@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Jost:wght@300&display=swap');

:root {
  /* pesi Libre Franklin — decisi 2026-07-18 */
  --fs-link:14px; /* liste di link nelle card (deciso 2026-07-18) */
  --fw-display:800; --fw-titolo:700; --fw-etichetta:600; --fw-forte:600; --fw-testo:400; --fw-sottile:300;
  --magenta:#E5147B; --yellow:#F5B820; --teal:#1C7A99; --azure:#45B5E5;
  --ink:#111112; --mute:#8A8A88; --rule:#EDEBE5; --soft:#F6F4EE; --paper:#FFFFFF;
  --sans:'Libre Franklin',system-ui,sans-serif; /* tutto Libre Franklin — deciso 2026-07-17 */
  --mono:'Libre Franklin',system-ui,sans-serif;
  --display:'Libre Franklin',system-ui,sans-serif;
  --adam:'Jost','Libre Franklin',sans-serif; /* SOLO glifi ADAM giganti — eccezione decisa 2026-07-21 */
  --read:'Libre Franklin',system-ui,sans-serif;
  --read-ink:#1b1b1c;
  --pad:56px;
  /* Scala tipografica KOM — 8 misure (decisa 2026-07) */
  --fs-meta:12px; --fs-legale:12px;
  --fs-testo:16px; --fs-testo-s:var(--fs-testo); /* Testo S ritirato: alias di Testo */ --fs-lead:20px;
  --fs-titolo-s:24px; --fs-titolo:34px; --fs-titolo-l:48px;
  --fs-display:clamp(44px,6.5vw,92px);
}
* { box-sizing:border-box; }
/* Nessun elemento può causare scroll orizzontale di pagina: su mobile l'overflow
   orizzontale (es. la marquee del footer larga ~2600px, blocchi full-bleed, embed)
   farebbe «zoomare» Safari lasciando una fascia bianca infinita sotto il footer.
   `clip` non crea un contenitore di scroll → l'header sticky continua a funzionare. */
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; font-family:var(--read); color:var(--ink); background:var(--paper); font-size:var(--fs-testo); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1,h2,h3,h4 { margin:0; font-family:var(--display); font-weight:var(--fw-titolo); letter-spacing:-0.02em; line-height:1.05; }
.wrap { max-width:1400px; margin:0 auto; padding:0 var(--pad); }
.kicker { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.em { font-family:var(--display); font-style:italic; font-weight:400; }

/* ---- accent band ---- */
.accent { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.accent > span { height:6px; }
.accent > span:nth-child(1){ background:var(--magenta); }
.accent > span:nth-child(2){ background:var(--yellow); }
.accent > span:nth-child(3){ background:var(--teal); }
.accent > span:nth-child(4){ background:var(--azure); }

/* ---- header ---- */
header.site { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); }
/* In WordPress l'header è dentro il wrapper del template-part: lo sticky va
   messo anche lì, altrimenti il genitore (alto quanto l'header) lo fa scorrere via. */
.wp-site-blocks > header,
header.wp-block-template-part { position:sticky; top:0; z-index:50; }
header.wp-block-template-part > header.site { position:static; }
/* WordPress: niente striscia bianca tra header (con barra accento) e contenuto.
   Il blockGap del sito inserisce un margine sopra <main> (secondo blocco di .wp-site-blocks)
   che lascia trasparire il fondo bianco del sito — invisibile su hero chiare, evidente su hero scure.
   Azzeriamo quel margine: l'header e la sua barra accento toccano direttamente la sezione successiva. */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group { margin-block-start:0; margin-top:0; }
/* top utility strip */
.topbar { border-bottom:1px solid var(--rule); }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; height:34px; }
.topbar .tb-l, .topbar .tb-r { display:flex; gap:22px; align-items:center; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.topbar a { text-decoration:none; color:var(--mute); transition:color .15s ease; }
.topbar a:hover { color:var(--ink); }
.topbar .dot-sep { color:var(--rule); }
/* .lang (selettore lingua) — ora è una pastiglia nella riga del menu: vedi in fondo al file. */
/* main nav row */
.nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:20px 0; }
.nav .logo { height:40px; width:auto; justify-self:start; }
.nav nav { display:flex; gap:28px; align-items:center; }
.nav nav > a, .mega-trigger:not(.nav-ai), .drop-trigger {
  font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; color:var(--ink); position:relative; padding:8px 3px; white-space:nowrap;
  transition:color .18s ease;
}
.nav nav > a::after, .mega-trigger:not(.nav-ai)::after, .drop-trigger::after {
  content:""; position:absolute; left:3px; right:100%; bottom:1px; height:2px; border-radius:2px; background:var(--ink);
  transition:right .22s ease;
}
.nav nav > a:hover::after, .mega-trigger:not(.nav-ai):hover::after, .drop-trigger:hover::after { right:0; }
.nav .right { justify-self:end; display:flex; gap:14px; align-items:center; }
/* hamburger (solo mobile) */
.nav-toggle { display:none; width:42px; height:42px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:0; cursor:pointer; padding:0; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
.site.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.site.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
.site.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.btn { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; font-weight:var(--fw-etichetta); text-decoration:none; cursor:pointer; border:0; border-radius:var(--radius,2px); padding:13px 22px; display:inline-block; position:relative; overflow:hidden; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease; }
.btn::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform:translateX(-130%); transition:transform .6s cubic-bezier(.22,1,.36,1); }
@media (hover:hover){
  .btn:hover { transform:translateY(-3px); box-shadow:0 14px 26px -12px rgba(17,17,18,.45); }
  .btn:hover::before { transform:translateX(130%); }
  .btn:active { transform:translateY(-1px); box-shadow:0 7px 14px -10px rgba(17,17,18,.45); transition-duration:.06s; }
}
@media (prefers-reduced-motion:reduce){
  .btn { transition:background .2s ease, color .2s ease, border-color .2s ease; }
  .btn:hover { transform:none; box-shadow:none; }
  .btn::before { display:none; }
}
.btn-primary { background:var(--ink); color:var(--paper); }
.btn-primary:hover { background:#000; }
.btn-outline { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-outline:hover { background:var(--ink); color:var(--paper); }
.link-u { text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:4px; font-weight:500; display:inline-block; transition:color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.link-u:hover { color:var(--mute); border-color:var(--mute); }
@media (hover:hover){
  .link-u:hover { transform:translateX(3px); }
}
@media (prefers-reduced-motion:reduce){
  .link-u { transition:color .2s ease, border-color .2s ease; }
  .link-u:hover { transform:none; }
}

/* ── Formati inline KOM (pulsanti barra editor) — funzionano ovunque nel testo ──
   Evidenziato (banda gialla), Corsivo display, colori del brand (testo/puntini). */
.it { font-style:italic; font-weight:400; }
b, strong { font-weight:var(--fw-forte); }
mark.hl, .hl { background:linear-gradient(transparent 66%, rgba(245,184,32,.22) 66%, rgba(245,184,32,.22) 92%, transparent 92%); color:inherit; padding:0 2px; }
/* Evidenziatore "pennarello": chip pieno che si clona su ogni riga. Testo scuro su giallo, leggibile su fondo chiaro o scuro. */
.hl-mark { color:var(--ink); background:var(--yellow); padding:.04em .28em; margin:0 -.06em; border-radius:5px 13px 6px 13px / 13px 6px 13px 5px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hl-mark.is-magenta { background:var(--magenta); color:var(--paper); }
.txt-magenta { color:var(--magenta); }
.txt-giallo  { color:var(--yellow); }
.txt-teal    { color:var(--teal); }
.txt-azure   { color:var(--azure); }

/* ---- mega menu ---- */
.navitem { position:relative; display:flex; align-items:center; }
.mega-trigger { display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; }
.mega-trigger .caret, .drop-trigger .caret { font-size:0; width:10px; height:10px; display:inline-block; position:relative; color:var(--mute); transition:transform .2s ease, color .18s ease; }
.mega-trigger .caret::before, .drop-trigger .caret::before { content:""; position:absolute; left:1px; top:0; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }

/* ---- compact dropdown (pochi link) ---- */
.drop-trigger { display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; }
.drop-trigger:hover { color:var(--mute); }
.drop-trigger .caret { color:var(--mute); transition:transform .2s ease, color .18s ease; }
.has-dropdown.open .caret { transform:rotate(180deg); }
.dropdown {
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:220px; background:var(--paper); border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 24px 48px -24px rgba(17,17,18,.25); padding:8px;
  display:none; z-index:46;
}
.has-dropdown.open .dropdown { display:block; animation:megaIn .2s ease both; }
.dropdown::before { content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--paper); border-left:1px solid var(--rule); border-top:1px solid var(--rule); }
.dropdown a { display:block; text-decoration:none; font-size:var(--fs-testo-s); color:var(--ink); padding:10px 14px; border-radius:4px; transition:background .14s ease, padding-left .14s ease; }
.dropdown a:hover { background:var(--soft); padding-left:18px; }
.dropdown.dropdown-right { left:auto; right:0; transform:translateY(-8px); }
.has-dropdown.open .dropdown.dropdown-right { transform:translateY(0); }
.dropdown.dropdown-right::before { left:auto; right:24px; transform:rotate(45deg); }
.mega-backdrop { position:fixed; inset:0; top:0; background:rgba(17,17,18,.18); display:none; z-index:40; }
.mega-backdrop.open { display:block; }
.mega {
  position:fixed; left:0; right:0; top:var(--header-h, 90px); z-index:45; background:var(--paper);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); box-shadow:0 24px 48px -24px rgba(17,17,18,.25);
  display:none;
}
.mega.open { display:flex; animation:megaIn .22s ease both; }
/* PANNELLI A PIENA ALTEZZA (deciso 2026-08-21): ogni mega riempie lo schermo sotto l'header,
   contenuto centrato in verticale; se eccede, scorre dentro il pannello. */
.mega { min-height:calc(100svh - var(--header-h,90px)); max-height:calc(100svh - var(--header-h,90px)); align-items:stretch; overflow-y:auto; overscroll-behavior:contain; }
/* «safe center»: centra solo se il contenuto ci sta, altrimenti parte dall'alto (niente titoli tagliati sotto la nav) */
.mega > .wrap { display:flex; flex-direction:column; justify-content:flex-start; justify-content:safe center; width:100%; }
.mega > .wrap > * { width:100%; }
@keyframes megaIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
.mega.open ~ * .caret, .has-mega.open .caret { transform:rotate(180deg); }
.mega-inner { display:grid; grid-template-columns:1fr 320px; gap:56px; padding-top:clamp(24px,3.4vh,48px); padding-bottom:clamp(24px,3.4vh,48px); }
.mega-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; }
.mega-col .mega-h { display:flex; align-items:center; gap:10px; font-family:var(--display); font-style:italic; font-size:var(--fs-titolo-s); font-weight:400; margin-bottom:20px; }
.mega-col .dot { width:12px; height:12px; border-radius:999px; display:inline-block; }
.mega-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.mega-col li a { display:block; text-decoration:none; font-size:var(--fs-testo); padding:9px 0; border-top:1px solid var(--rule); color:var(--ink); transition:color .15s ease, padding-left .15s ease; }
.mega-col li a:hover { color:var(--mute); padding-left:6px; }
.mega-promo { display:flex; flex-direction:column; gap:10px; background:var(--soft); border:1px solid var(--rule); border-radius:6px; padding:28px; text-decoration:none; transition:background .2s ease; }
.mega-promo:hover { background:#f1eee6; }
.mega-promo-title { font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-0.01em; line-height:1; }
.mega-promo p { font-size:var(--fs-testo-s); color:var(--mute); margin:4px 0 8px; line-height:1.5; }

/* ---- mega "Il Metodo" — colonne-fase (ognuna linka alla sua pagina) ---- */
.mega-metodo .mega-aside { display:flex; flex-direction:column; gap:16px; }
.mega-metodo .mega-aside .btn { text-align:center; padding:15px 22px; }
.mega-phase { display:block; text-decoration:none; color:inherit; border-top:2px solid var(--ink); padding-top:18px; transition:border-color .2s ease; }
.mega-phase .mp-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.mega-phase .dot { width:11px; height:11px; border-radius:999px; display:inline-block; }
.mega-phase .mp-name { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.01em; line-height:1; transition:color .18s ease; }
.mega-phase .mp-desc { font-size:var(--fs-testo-s); color:var(--mute); line-height:1.5; margin:0 0 14px; min-height:38px; }
.mega-phase .mp-tools { display:flex; flex-direction:column; }
.mega-phase .mp-tool { font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.01em; color:var(--ink); border-top:1px solid var(--rule); padding:10px 0; line-height:1.3; }
.mega-phase .mp-tool b { font-weight:var(--fw-forte); }
.mega-phase .mp-tool span { color:var(--mute); margin-left:8px; }
.mega-phase .mp-go { display:inline-block; font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-top:16px; transition:color .18s ease, transform .18s ease; }
.mega-phase.an:hover { border-top-color:var(--magenta); } .mega-phase.an:hover .mp-name { color:var(--magenta); }
.mega-phase.di:hover { border-top-color:var(--yellow); } .mega-phase.di:hover .mp-name { color:var(--yellow); }
.mega-phase.am:hover { border-top-color:var(--teal); } .mega-phase.am:hover .mp-name { color:var(--teal); }
.mega-phase.mi:hover { border-top-color:var(--azure); } .mega-phase.mi:hover .mp-name { color:var(--azure); }
.mega-phase:hover .mp-go { color:var(--ink); transform:translateX(3px); }
@media (max-width:980px){ .mega-metodo .mega-aside { display:none; } }

/* ---- section scaffold ---- */
section { padding:var(--sec-pad,96px) 0; border-top:1px solid var(--rule); }
/* mobile: meno respiro verticale per sezione — evita i "buchi" tra blocchi (l'inline per-sezione vince comunque) */
@media (max-width:980px){ section { padding-top:64px; padding-bottom:64px; } }
@media (max-width:620px){ section { padding-top:48px; padding-bottom:48px; } }
.sec-head { margin-bottom:56px; }
.sec-num { display:none; }
.sec-title { font-size:var(--fs-titolo-l); }
.sec-intro { font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); margin-bottom:16px; letter-spacing:.04em; }

/* ── SFONDI SEZIONE — alterna chiaro / beige / scuro ──────────────────
   Applica al blocco Gruppo della sezione, in "Classi CSS aggiuntive":
     has-paper  → bianco (default)
     has-soft   → beige soft
     has-dark   → fondo scuro, testo chiaro automatico
   ------------------------------------------------------------------- */
.has-paper { background:var(--paper); }
.has-soft  { background:var(--soft); }
.has-dark  { background:var(--ink); }

/* testo leggibile su fondo scuro */
.has-dark, .has-dark p, .has-dark li { color:#d7d5cf; }
.has-dark h1, .has-dark h2, .has-dark h3, .has-dark h4, .has-dark .sec-title { color:var(--paper); }
.has-dark .sec-intro, .has-dark .sec-num,
.has-dark .crumb, .has-dark .crumb a,
.has-dark .mh-crumb, .has-dark .mh-crumb a { color:#9a9893; }
.has-dark .em { color:var(--yellow); }
.has-dark a:not(.wp-block-button__link):not(.btn) { color:var(--paper); }
.has-dark .link-u { color:var(--paper); border-color:rgba(255,255,255,.5); }
.has-dark .link-u:hover { color:#c8c6c2; border-color:#c8c6c2; }
.has-dark .sec-head, .has-dark .biglist .row, .has-dark hr { border-color:rgba(255,255,255,.14); }

/* bottoni leggibili su fondo scuro (il nero sparirebbe) */
.has-dark .btn-primary { background:var(--paper); color:var(--ink); }
.has-dark .btn-primary:hover { background:#e9e7e1; }
.has-dark .btn-outline { color:var(--paper); border-color:rgba(255,255,255,.55); }
.has-dark .btn-outline:hover { background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* le card chiare dentro una sezione scura restano leggibili (superficie chiara) */
.has-dark .feat, .has-dark .case, .has-dark .tier, .has-dark .unit, .has-dark .moment,
.has-dark .pf-card, .has-dark .cat, .has-dark .work { background:var(--paper); border-color:var(--rule); }
.has-dark .feat h3, .has-dark .case h3, .has-dark .tier h3, .has-dark .unit h3,
.has-dark .moment h3, .has-dark .pf-card h3, .has-dark .cat .cn, .has-dark .work h3 { color:var(--ink); }
.has-dark .feat p, .has-dark .case p, .has-dark .tier p, .has-dark .unit p,
.has-dark .moment p, .has-dark .pf-card p, .has-dark .cat p, .has-dark .work p { color:var(--mute); }

/* ---- hero ---- */
.hero { padding:120px 0 80px; border-top:0; }
.hero .row1 { margin-bottom:56px; }
.hero h1 { font-family:var(--display); font-size:calc(clamp(48px,7.5vw,108px) * var(--hero-scale,1)); font-weight:var(--fw-display); line-height:.96; letter-spacing:-0.025em; max-width:1180px; text-wrap:balance; }
.hero h1 .it { font-style:italic; font-weight:400; }
.hero .row2 { display:grid; grid-template-columns:2fr 1.2fr; gap:48px; border-top:1px solid var(--rule); padding-top:32px; }
.hero .row2 p { font-size:var(--fs-lead); margin:0; max-width:560px; }
.hero .ctas { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }

/* ---- ADAM colored cards ---- */
.adam-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.adam-card { padding:32px; min-height:420px; display:flex; flex-direction:column; position:relative; overflow:hidden; border-radius:var(--radius,4px); color:var(--paper); }
.adam-card.magenta { background:var(--magenta); }
.adam-card.yellow  { background:var(--yellow); color:var(--ink); }
.adam-card.teal    { background:var(--teal); }
.adam-card.azure   { background:var(--azure); }
.adam-card .glyph { position:absolute; top:auto; bottom:-44px; right:-6px; font-family:var(--adam); font-size:210px; line-height:.8; font-weight:var(--fw-sottile); opacity:var(--glyph-op,.12); pointer-events:none; }
.adam-card .idx { font-family:var(--mono); font-size:var(--fs-meta); opacity:.85; margin-bottom:24px; position:relative; }
.adam-card .nm { font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-0.01em; margin-bottom:16px; position:relative; }
.adam-card p { font-size:var(--fs-testo); line-height:1.55; margin:0 0 20px; flex:1; position:relative; opacity:1; }
.adam-card .svc { display:flex; flex-direction:column; gap:0; position:relative; }
.adam-card .svc a { font-family:var(--mono); font-size:var(--fs-link); font-weight:var(--fw-etichetta); text-decoration:none; padding:8px 0; border-top:1px solid currentColor; opacity:.95; }

/* «Il salto AI» nelle card ADAM (ex .ai-ev del prototipo adam-ai.html: il CSS non era mai entrato nel
   tema, la label usciva attaccata al testo). Il blocco ora e' un group con due paragrafi. 2026-09-11 */
.adam-card .ai-ev { margin:0 0 20px; position:relative; }
.adam-card .ai-ev p { font-size:var(--fs-testo-s); line-height:1.6; margin:0; flex:none; opacity:.95; }
.adam-card .ai-ev p.lbl { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.09em; text-transform:uppercase; margin:0 0 6px; opacity:.8; }

.adam-card.yellow .svc a { border-top-color:rgba(0,0,0,.25); }

/* ---- units ---- */
.units { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.unit { background:var(--paper); padding:32px; display:flex; flex-direction:column; gap:14px; min-height:260px; }
.unit .tag { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; }
.unit h3 { font-size:var(--fs-titolo); font-weight:400; }
.unit p { font-size:var(--fs-testo-s); color:var(--mute); margin:0; flex:1; }
.unit .more { font-size:var(--fs-testo-s); text-decoration:none; font-weight:500; border-top:1px solid var(--rule); padding-top:12px; }

/* ---- portfolio ---- */
.pf-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:32px; flex-wrap:wrap; }
.pf-head h2 { font-size:var(--fs-titolo-l); }
.pf-head h2 .em { font-size:inherit; }
.filters { display:flex; gap:8px; }
.filter { padding:10px 18px; border:1px solid var(--rule); background:transparent; color:var(--ink); font-family:var(--sans); font-size:var(--fs-testo-s); font-weight:var(--fw-etichetta); border-radius:999px; cursor:pointer; transition:all .15s ease; }
.filter:hover { border-color:var(--ink); }
.filter.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pf-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.pf-card { border:1px solid var(--rule); background:var(--paper); overflow:hidden; transition:opacity .35s ease, transform .35s ease; }
.pf-card.hide { display:none; }
.pf-card .thumb { height:240px; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:center; }
.pf-card .thumb span { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; }
.pf-card .body { padding:28px; }
.pf-card .ptag { font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); margin-bottom:10px; letter-spacing:.04em; }
.pf-card h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.01em; margin-bottom:8px; line-height:1.1; }
.pf-card p { font-size:var(--fs-testo-s); color:var(--mute); margin:0; }

/* ---- book ---- */
.book { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.book h2 { font-size:var(--fs-titolo-l); }
.book .cover { aspect-ratio:3/4; background:var(--soft); border:1px solid var(--rule); padding:32px; display:flex; flex-direction:column; justify-content:space-between; }
.book .cover .big { font-family:var(--display); font-size:var(--fs-titolo-l); font-style:italic; font-weight:400; line-height:.95; letter-spacing:-0.02em; }
.book .cover .sq { display:flex; gap:6px; margin-top:24px; }
.book .cover .sq span { width:28px; height:28px; display:block; }

/* ---- CTA yellow ---- */
.cta-yellow { background:var(--yellow); border-radius:8px; padding:80px 64px; display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; }
.cta-yellow h2 { font-size:72px; font-weight:var(--fw-display); letter-spacing:-0.025em; line-height:.95; color:var(--ink); font-family:var(--display); }
.cta-yellow h2 .pink { color:var(--magenta); }
.cta-yellow p { font-size:var(--fs-testo); margin:0 0 24px; color:var(--ink); }
.cta-wrap { border-top:1px solid var(--rule); }

/* ---- Komsulting block ---- */
.ks-band { background:var(--ink); }
.ks-band .wrap { padding:120px 56px; }
.ks-eyebrow { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); margin-bottom:24px; }
.ks-band h2 { font-family:var(--display); font-size:clamp(40px,6vw,84px); font-weight:var(--fw-display); line-height:1; letter-spacing:-0.025em; max-width:1000px; color:var(--paper); }
.ks-band .sub { font-size:var(--fs-lead); color:#c8c6c2; margin:28px 0 0; max-width:620px; }
.ks-band .ctas { margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; }
.btn-yellow { background:var(--yellow); color:var(--ink); }
.btn-yellow:hover { background:#ffc738; }
.btn-ghost { background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* Trittico — Variante A · Indice grande (card con accento che scorre in alto al hover) */
.moments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; counter-reset:mom; }
.moment { counter-increment:mom; position:relative; background:var(--paper); border:1px solid var(--rule); border-radius:5px;
  padding:34px 30px 30px; display:flex; flex-direction:column; min-height:330px; overflow:hidden; --mom-accent:var(--magenta);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.moment:nth-child(3n+2) { --mom-accent:var(--yellow); }
.moment:nth-child(3n+3) { --mom-accent:var(--teal); }
.moment::before { content:counter(mom,decimal-leading-zero); display:block; font-family:var(--display); font-weight:var(--fw-display);
  font-size:var(--fs-titolo-l); line-height:.9; letter-spacing:-0.02em; color:var(--mom-accent); }
.moment::after { content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--mom-accent); transition:width .35s ease; }
.moment:hover { transform:translateY(-5px); box-shadow:0 26px 52px -30px rgba(17,17,18,.5); border-color:rgba(17,17,18,.12); }
.moment:hover::after { width:100%; }
.moment .mn { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:16px 0 0; }
.moment h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.015em; line-height:1.06; margin:8px 0 12px; }
.moment p { font-size:var(--fs-testo); color:#54534f; margin:0; line-height:1.6; }
.moment .svc { margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:var(--fs-link); color:var(--ink); }
.moment .svc a { color:inherit; text-decoration:none; }
.moment .svc b, .moment .svc strong { color:var(--ink); font-weight:var(--fw-forte); }

.ks-adam { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ks-phase { border-top:2px solid var(--ink); padding-top:18px; }
.ks-phase .dot { width:12px; height:12px; border-radius:999px; display:inline-block; margin-bottom:14px; }
.ks-phase h3 { font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); margin-bottom:8px; }
.ks-phase > p { font-size:var(--fs-testo-s); color:var(--mute); margin:0 0 16px; line-height:1.5; }
.ks-tools { display:flex; flex-direction:column; gap:9px; }
.ks-tools .tool { font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.01em; color:var(--ink); border-top:1px solid var(--rule); padding-top:10px; }
.ks-tools .tool b { color:var(--mute); font-weight:var(--fw-etichetta); display:block; margin-bottom:3px; font-size:var(--fs-meta); letter-spacing:.04em; text-transform:uppercase; }

.mrwolf { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.chatwin { background:var(--paper); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(17,17,18,.25); }
.chatwin .bar { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--rule); }
.chatwin .bar .av { width:30px; height:30px; border-radius:999px; background:linear-gradient(135deg,var(--magenta),var(--azure)); }
.chatwin .bar b { font-size:var(--fs-testo-s); }
.chatwin .bar .st { font-family:var(--mono); font-size:var(--fs-meta); color:#1F8A5B; margin-left:auto; letter-spacing:.04em; }
.chatlog { padding:20px; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:82%; padding:12px 16px; border-radius:14px; font-size:var(--fs-testo-s); line-height:1.45; }
.msg.user { align-self:flex-end; background:var(--ink); color:var(--paper); border-bottom-right-radius:4px; }
.msg.bot { align-self:flex-start; background:var(--soft); border:1px solid var(--rule); border-bottom-left-radius:4px; }
.chatwin .inp { display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--rule); }
.chatwin .inp input { flex:1; border:1px solid var(--rule); border-radius:999px; padding:10px 16px; font-family:var(--sans); font-size:var(--fs-testo-s); color:var(--mute); }
.chatwin .inp .send { background:var(--ink); color:var(--paper); border:0; border-radius:999px; padding:0 18px; font-family:var(--mono); font-size:var(--fs-meta); text-transform:uppercase; cursor:pointer; }

.cases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.case { border:1px solid var(--rule); padding:32px; display:flex; flex-direction:column; gap:6px; }
.case .ct { font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); letter-spacing:.04em; }
.case h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); }
.case .desc { font-size:var(--fs-testo-s); color:var(--mute); margin:0 0 14px; line-height:1.5; }
.case .stat { display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--rule); padding-top:14px; }
.case .stat .big { font-family:var(--display); font-size:var(--fs-titolo-l); font-weight:var(--fw-display); letter-spacing:-0.02em; line-height:1; }
.case .stat .lbl { font-size:var(--fs-testo-s); color:var(--mute); }

/* Card case study come GRUPPO di blocchi (editabili): accento via classe, link vero dentro */
.case--magenta{ --accent:var(--magenta); } .case--giallo{ --accent:var(--yellow); } .case--teal{ --accent:var(--teal); } .case--azure{ --accent:var(--azure); }
.case--top{ border-top:3px solid var(--accent,var(--ink)); }
div.case{ cursor:pointer; transition:border-color .25s ease, transform .25s ease; }
.case p.ct, .case p.desc, .case h3{ margin:0; }
.case p.roi{ margin:0; display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--rule); padding-top:14px; margin-top:14px; }
.case p.roi .big{ font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); line-height:1; letter-spacing:-0.02em; color:var(--accent,var(--ink)); }
.case p.roi .sm{ font-size:var(--fs-meta); color:var(--mute); }
.case p.stat{ margin:0; display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--rule); padding-top:14px; }
.case p.stat .big{ font-family:var(--display); font-size:var(--fs-titolo-l); font-weight:var(--fw-display); letter-spacing:-0.02em; line-height:1; color:var(--accent,var(--ink)); }
.case p.stat .lbl{ font-size:var(--fs-testo-s); color:var(--mute); }
.case .case-link-w{ margin:0; }
.case .case-link{ text-decoration:none; }
@media (hover:hover){
  div.case:hover{ border-color:var(--ink); }
  div.case:hover .case-link{ color:var(--magenta); }
  div.case:hover .case-link .ar{ transform:translateX(4px); }
}
/* link "Leggi il caso" + card cliccabile */
.case .case-link { margin-top:16px; font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); display:inline-flex; gap:6px; align-items:center; }
.case .case-link .ar { transition:transform .25s ease; }
a.case { text-decoration:none; color:inherit; transition:border-color .25s ease, transform .25s ease; }
@media (hover:hover){
  a.case:hover { border-color:var(--ink); }
  a.case:hover .case-link { color:var(--magenta); }
  a.case:hover .case-link .ar { transform:translateX(4px); }
}

.aiscore { background:var(--soft); border:1px solid var(--rule); border-radius:10px; padding:56px; display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center; }
.gauge { display:flex; flex-direction:column; align-items:center; gap:12px; }
.gauge .num { font-family:var(--display); font-size:96px; font-weight:var(--fw-sottile); line-height:1; }
.gauge .num small { font-size:var(--fs-titolo-s); color:var(--mute); }
.gauge .bar { width:100%; height:8px; background:var(--rule); border-radius:999px; overflow:hidden; }
.gauge .bar i { display:block; height:100%; width:68%; background:linear-gradient(90deg,var(--magenta),var(--yellow),var(--teal),var(--azure)); }
.gauge .scale { font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); width:100%; display:flex; justify-content:space-between; }

.pricing { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.tier { border:1px solid var(--rule); padding:32px; display:flex; flex-direction:column; gap:6px; }
.tier.featured { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.tier .tn { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.tier .price { font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-0.02em; }
.tier .price small { font-size:var(--fs-testo-s); color:var(--mute); font-family:var(--sans); }
.tier ul { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tier li { font-size:var(--fs-testo-s); padding-left:18px; position:relative; color:var(--ink); line-height:1.4; }
.tier li::before { content:"→"; position:absolute; left:0; color:var(--mute); }
.tier .who { font-size:var(--fs-testo-s); color:var(--mute); margin-top:18px; padding-top:14px; border-top:1px solid var(--rule); }
.director { margin-top:20px; background:var(--ink); border-radius:10px; padding:44px 48px; display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; }
.director .sub2 { font-family:var(--mono); font-size:var(--fs-meta); color:var(--yellow); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.director h3 { font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); color:var(--paper); line-height:1; }
.director p { font-size:var(--fs-testo); color:#c8c6c2; margin:14px 0 0; line-height:1.5; }
.director .d-cta { display:flex; justify-content:flex-end; }

/* ---- partner marquee ---- */
.marquee { overflow:hidden; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.marquee .track { display:flex; gap:0; width:max-content; animation:scroll 32s linear infinite; }
.marquee:hover .track { animation-play-state:paused; }
.marquee .item { flex:0 0 auto; width:240px; padding:36px 24px; text-align:center; font-size:var(--fs-testo); font-weight:500; color:var(--mute); border-right:1px solid var(--rule); }
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ---- footer ---- */
footer.site { background:var(--soft); border-top:1px solid var(--rule); padding:64px 0 40px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.foot-grid .logo { height:44px; width:auto; }
.foot-grid .desc { font-size:var(--fs-testo-s); color:var(--mute); max-width:300px; margin:20px 0 0; }
.foot-grid .contact { margin-top:20px; font-size:var(--fs-testo-s); line-height:1.8; }
.foot-col .ch { font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); margin-bottom:16px; letter-spacing:.04em; }
.foot-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-col a { font-size:var(--fs-testo-s); text-decoration:none; display:inline-block; transition:color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.foot-col a:hover { color:var(--magenta); }
@media (hover:hover){ .foot-col a:hover { transform:translateX(4px); } }
@media (prefers-reduced-motion:reduce){ .foot-col a { transition:color .2s ease; } .foot-col a:hover { transform:none; } }
.foot-legal .soc a { transition:color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); display:inline-block; }
.foot-legal .soc a:hover { color:var(--ink); }
@media (hover:hover){ .foot-legal .soc a:hover { transform:translateY(-2px); } }
.foot-legal { border-top:1px solid var(--rule); padding-top:20px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); letter-spacing:.04em; }
.foot-legal .soc { display:flex; gap:20px; }

@media (max-width:980px){
  .topbar .tb-l span:last-child { display:none; }
  .topbar .tb-r a[href^="tel"], .topbar .dot-sep { display:none; }
  .adam-grid{ grid-template-columns:repeat(2,minmax(0,1fr));} 
  .units{ grid-template-columns:1fr;}
  .pf-grid{ grid-template-columns:1fr;}
  .book{ grid-template-columns:1fr; }
  .cta-yellow{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .hero .row2{ grid-template-columns:1fr; }
  .moments{ grid-template-columns:1fr; }
  .ks-adam{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mrwolf{ grid-template-columns:1fr; }
  .cases{ grid-template-columns:1fr; }
  .aiscore{ grid-template-columns:1fr; padding:40px; }
  .pricing{ grid-template-columns:1fr; }
  .director{ grid-template-columns:1fr; }
  .director .d-cta{ justify-content:flex-start; }
  .ks-band .wrap{ padding:80px 32px; }
  /* --- nav mobile: hamburger + drawer --- */
  .nav{ display:flex; justify-content:space-between; align-items:center; position:relative; }
  .nav-toggle{ display:inline-flex; }
  .nav .right .btn{ display:none; }
  .nav nav{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 1px);
    flex-direction:column; align-items:stretch; gap:0; padding:4px 0;
    background:var(--paper); border-top:1px solid var(--rule); border-bottom:2px solid var(--ink);
    box-shadow:0 26px 44px rgba(0,0,0,.10); z-index:80;
  }
  .site.nav-open .nav nav{ display:flex; }
  .nav nav > a, .nav .navitem{ width:100%; padding:15px 6px; border-bottom:1px solid var(--rule); }
  .nav .navitem{ display:block; }
  .nav nav > a:last-child, .nav .navitem:last-child{ border-bottom:0; }
  .nav .navitem .mega-trigger, .nav .navitem .drop-trigger{ display:flex; justify-content:flex-start; width:100%; }
  .nav .navitem .caret{ display:none; }
  .nav .mega, .nav .dropdown{ display:none !important; }
}
@media (max-width:620px){
  .nav .logo{ height:34px; }
  .foot-grid{ grid-template-columns:1fr; }
  .benefits{ grid-template-columns:1fr; }
  .goals-cols{ grid-template-columns:1fr; }
}

/* ---- tweak variants ---- */
body.nav-sans .nav nav > a, body.nav-sans .mega-trigger, body.nav-sans .drop-trigger {
  font-family:var(--sans); font-size:var(--fs-testo); font-weight:var(--fw-etichetta); letter-spacing:0; text-transform:none;
}
body.no-topbar .topbar { display:none; }
body.no-glyph .adam-card .glyph { display:none; }

/* color intensity */
body.color-sober .cta-yellow { background:var(--soft); border:1px solid var(--rule); }
body.color-sober .cta-yellow h2 { color:var(--ink); }
body.color-balanced .gauge .bar i, body.color-sober .gauge .bar i { background:var(--magenta); }

/* la barra accento sotto l'header mostra SEMPRE i 4 colori del brand */

/* sober: ADAM cards become light with colored accent (readable) */
body.color-sober .adam-card { background:var(--paper); color:var(--ink); border:1px solid var(--rule); }
body.color-sober .adam-card.magenta { border-top:3px solid var(--magenta); }
body.color-sober .adam-card.yellow  { border-top:3px solid var(--yellow); }
body.color-sober .adam-card.teal    { border-top:3px solid var(--teal); }
body.color-sober .adam-card.azure   { border-top:3px solid var(--azure); }
body.color-sober .adam-card .idx { color:var(--mute); opacity:1; }
body.color-sober .adam-card p { color:var(--mute); opacity:1; }
body.color-sober .adam-card .svc a { color:var(--ink); border-top-color:var(--rule); opacity:1; }
body.color-sober .adam-card.magenta .nm { color:var(--magenta); }
body.color-sober .adam-card.teal .nm    { color:var(--teal); }
body.color-sober .adam-card.azure .nm   { color:var(--azure); }
body.color-sober .adam-card.yellow .nm  { color:var(--ink); }
body.color-sober .adam-card .glyph { color:var(--ink); }
/* CTA "Vai alla fase" — bottone outline ancorato in fondo alla card */
.adam-card .adam-cta { margin-top:auto; padding-top:24px; }
.adam-card .adam-cta .wp-block-button__link { position:relative; z-index:1; }
/* su card a fondo pieno (modalità non-sobria) il contorno passa al bianco */
body:not(.color-sober) .adam-card .btn-outline .wp-block-button__link { color:var(--paper); border-color:rgba(255,255,255,.55); }
body:not(.color-sober) .adam-card .btn-outline .wp-block-button__link:hover { background:var(--paper); color:var(--ink); border-color:var(--paper); }
body:not(.color-sober) .adam-card.yellow .btn-outline .wp-block-button__link { color:var(--ink); border-color:rgba(26,20,7,.5); }
body:not(.color-sober) .adam-card.yellow .btn-outline .wp-block-button__link:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---- hover sulle 4 card ADAM ---- */
.adam-card { transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease, background-color .34s ease, border-color .34s ease; }
.adam-card .glyph { transition:opacity .34s ease, color .34s ease, transform .34s cubic-bezier(.22,1,.36,1); }
.adam-card .nm, .adam-card .idx { transition:color .25s ease; }
body.color-sober .adam-card:hover { transform:translateY(-6px); box-shadow:0 28px 52px -26px rgba(17,17,18,.26); }
body.color-sober .adam-card.teal:hover    { background:rgba(28,122,153,.05); }
body.color-sober .adam-card.azure:hover   { background:rgba(69,181,229,.06); }
body.color-sober .adam-card.yellow:hover  { background:rgba(245,184,32,.08); }
body.color-sober .adam-card.magenta:hover { background:rgba(229,20,123,.05); }
body.color-sober .adam-card.teal:hover .glyph    { color:var(--teal);    opacity:.24; transform:translateY(-8px) scale(1.05); }
body.color-sober .adam-card.azure:hover .glyph   { color:var(--azure);   opacity:.24; transform:translateY(-8px) scale(1.05); }
body.color-sober .adam-card.yellow:hover .glyph  { color:var(--yellow);  opacity:.5;  transform:translateY(-8px) scale(1.05); }
body.color-sober .adam-card.magenta:hover .glyph { color:var(--magenta); opacity:.24; transform:translateY(-8px) scale(1.05); }
body.color-sober .adam-card.teal:hover .idx,
body.color-sober .adam-card.azure:hover .idx,
body.color-sober .adam-card.yellow:hover .idx,
body.color-sober .adam-card.magenta:hover .idx { color:var(--ink); }
@media (prefers-reduced-motion:reduce){
  .adam-card, .adam-card .glyph { transition:none; }
  body.color-sober .adam-card:hover { transform:none; }
  body.color-sober .adam-card:hover .glyph { transform:none; }
}

/* ---- mega "Obiettivi" (goals) ---- */
.mega-goals .wrap { padding-top:44px; padding-bottom:0; }
.goals-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px; }
.goal-col .goal-h { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); font-variation-settings:'opsz' 56, 'wght' 800; letter-spacing:-0.015em; line-height:1.12; text-wrap:balance; color:var(--ink); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--rule); position:relative; }
.goal-col .goal-h::after { content:""; position:absolute; left:0; bottom:-1px; height:3px; width:44px; border-radius:3px; background:var(--magenta); transition:width .3s cubic-bezier(.4,0,.2,1); }
.goals-cols .goal-col:nth-child(2) .goal-h::after { background:var(--yellow); }
.goals-cols .goal-col:nth-child(3) .goal-h::after { background:var(--teal); }
.goals-cols .goal-col:nth-child(4) .goal-h::after { background:var(--azure); }
.goal-col:hover .goal-h::after { width:100%; }
.goal-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.goal-col li a { display:block; text-decoration:none; font-size:var(--fs-testo); font-weight:500; padding:8px 0; color:var(--ink); transition:color .15s ease, padding-left .15s ease; }
.goal-col li a:hover { color:var(--sh, var(--magenta)); padding-left:6px; }
.mega-cta-row { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:28px; border-top:1px solid var(--rule); padding:24px 0; text-decoration:none; }
.mega-cta-row .ctr-l { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); color:var(--ink); letter-spacing:-0.01em; }
.mega-cta-row .ctr-r { font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:var(--magenta); white-space:nowrap; }
.mega-cta-row:hover .ctr-r { color:var(--ink); }
@media (max-width:980px){ .goals-cols { grid-template-columns:1fr 1fr; gap:28px; } .mega-cta-row { flex-direction:column; align-items:flex-start; gap:10px; } }


/* ---- client logo strip (marquee sobrio) ---- */
.logo-strip { position:relative; overflow:hidden; padding:6px 0; }
.logo-strip::before, .logo-strip::after { content:""; position:absolute; top:0; bottom:0; width:140px; z-index:2; pointer-events:none; }
.logo-strip::before { left:0; background:linear-gradient(90deg, var(--paper) 12%, transparent); }
.logo-strip::after  { right:0; background:linear-gradient(270deg, var(--paper) 12%, transparent); }
.logo-track { display:flex; align-items:center; gap:80px; width:max-content; animation:logoscroll 55s linear infinite; }
.logo-strip:hover .logo-track { animation-play-state:paused; }
.logo-track .logo { font-family:var(--sans); font-size:var(--fs-titolo-s); font-weight:var(--fw-etichetta); letter-spacing:0; color:var(--ink); opacity:.38; white-space:nowrap; transition:opacity .25s ease; }
.logo-track .logo:hover { opacity:1; }
@keyframes logoscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }


/* ---- announcement bar (fascetta nera scorrevole) ---- */
.announce { background:var(--ink); color:var(--paper); overflow:hidden; position:relative; display:flex; align-items:center; }
.announce .ann-track { display:flex; gap:48px; width:max-content; white-space:nowrap; padding:9px 0; animation:annscroll 110s linear infinite; flex:1 1 0; min-width:0; overflow:hidden; }
.announce:hover .ann-track { animation-play-state:paused; }
.announce .ann-item { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:#e8e6e0; }
.announce .ann-item a { color:var(--yellow); text-decoration:none; }
.announce .ann-close { flex:0 0 auto; background:var(--ink); border:0; color:#c8c6c2; cursor:pointer; font-size:var(--fs-testo); line-height:1; padding:0 18px; align-self:stretch; transition:color .15s ease; position:relative; z-index:2; }
.announce .ann-close:hover { color:#fff; }
.announce.is-closed { display:none; }
@keyframes annscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }


/* ============================================================
   HEADER NERO — variante "nero pieno" (attiva su tutto il sito)
   Header su fondo scuro + logo KOM a colori. Footer resta chiaro.
   Per tornare al chiaro: rimuovi questo blocco.
   ============================================================ */
header.site { background:radial-gradient(60% 200% at 90% -60%, rgba(69,181,229,.14), transparent 60%), radial-gradient(50% 220% at 8% 160%, rgba(229,20,123,.10), transparent 60%), linear-gradient(200deg, rgba(18,31,60,.96), rgba(7,11,22,.96) 62%); backdrop-filter:blur(12px) saturate(1.05); -webkit-backdrop-filter:blur(12px) saturate(1.05); border-bottom:1px solid rgba(255,255,255,.10); }
header.site .topbar { border-bottom:1px solid rgba(255,255,255,.10); }
header.site .topbar .tb-l { color:#cdcbc5; display:flex; align-items:center; gap:10px; }
header.site .topbar .tb-r,
header.site .topbar a { color:#f3f1ec; font-weight:500; }
header.site .topbar a:hover { color:#f3f1ec; }
header.site .topbar .dot-sep { color:rgba(255,255,255,.20); }
header.site .nav nav > a,
header.site .mega-trigger,
header.site .drop-trigger { color:#f3f1ec; }
header.site .nav nav > a::after,
header.site .mega-trigger::after,
header.site .drop-trigger::after { background:#f3f1ec; }
header.site .caret { color:#b6b4ae; }
/* primo livello: stato hover/aperto piu leggibile e cliccoso */
header.site .nav nav > a:hover,
header.site .mega-trigger:not(.nav-ai):hover,
header.site .drop-trigger:hover,
header.site .navitem.open > .mega-trigger:not(.nav-ai),
header.site .has-dropdown.open > .drop-trigger { color:#fff; }
header.site .nav nav > a:hover::after,
header.site .mega-trigger:not(.nav-ai):hover::after,
header.site .drop-trigger:hover::after,
header.site .navitem.open > .mega-trigger:not(.nav-ai)::after,
header.site .has-dropdown.open > .drop-trigger::after { background:#fff; right:3px; }
header.site .mega-trigger:not(.nav-ai):hover .caret,
header.site .drop-trigger:hover .caret,
header.site .navitem.open .caret,
header.site .has-dropdown.open .caret { color:#fff; }
header.site .nav-toggle span { background:#f3f1ec; }
/* logo a colori: dimensione bilanciata + hover discreto con alone brand */
header.site .nav > a { display:inline-flex; }
header.site .nav .logo { height:56px; transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
@media (hover:hover){
  header.site .nav > a:hover .logo {
    transform:translateY(-1px) scale(1.02);
    filter:brightness(1.04) drop-shadow(-4px 0 7px rgba(229,20,123,.28)) drop-shadow(4px 0 7px rgba(69,181,229,.28));
  }
}
/* CTA "Prenota una call" su nero -> contorno bianco (solo header) */
header.site .btn-primary { background:transparent; color:#f3f1ec; border:1px solid rgba(255,255,255,.45); }
header.site .btn-primary:hover { background:#fff; color:#0a0f1e; border-color:#fff; }
/* footer: logo a colori leggermente piu' contenuto */
footer.site .foot-grid .logo { height:34px; }
/* mobile: il drawer segue l'header nero -> fondo scuro, testo chiaro */
@media (max-width:980px){
  header.site .nav nav { background:rgba(10,15,30,.98); border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 26px 44px rgba(0,0,0,.45); }
  header.site .nav nav > a,
  header.site .nav .mega-trigger,
  header.site .nav .drop-trigger { color:#f3f1ec; }
  header.site .nav nav > a, header.site .nav .navitem { border-bottom-color:rgba(255,255,255,.10); }
  header.site .nav nav > a:hover,
  header.site .nav .mega-trigger:hover,
  header.site .nav .drop-trigger:hover { color:#fff; background:rgba(255,255,255,.05); }
  header.site .nav nav > a::after { background:#f3f1ec; }
}


/* ============================================================
   LOGO COMPATTO SU MOBILE — lockup completo su desktop, marchio
   «KOM» sotto i 768px (il payoff piccolo diventa illeggibile).
   ============================================================ */
@media (max-width:768px){
  header.site .nav > a > img.logo { display:none; }
  header.site .nav > a {
    width:92px; height:34px;
    background:url(../kom-logo.png) left center / contain no-repeat;
  }
}


/* ============================ FOOTER KOM · nero/carbone, accento magenta ============================ */
footer.kf{
  --kf-bg:#141416; --kf-accent:#E5147B;
  background:var(--kf-bg); color:#e7e5e0;
  font-family:var(--read);
  border-top:3px solid var(--kf-accent);
  overflow-x:clip;
}
footer.kf a{ color:inherit; text-decoration:none; }
.kf-wrap{ max-width:1280px; margin:0 auto; padding:0 56px; }

/* Fascia 1 · marquee partner */
.kf-marq{ overflow:hidden; border-bottom:1px solid rgba(255,255,255,.12); }
.kf-track{ display:inline-flex; white-space:nowrap; animation:kf-scroll 34s linear infinite; }
.kf-track:hover{ animation-play-state:paused; }
.kf-item{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:#a8a6a1;
  padding:16px 30px; border-right:1px solid rgba(255,255,255,.08); display:inline-flex; align-items:center; gap:10px; }
.kf-item::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--kf-accent); display:inline-block; }
@keyframes kf-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .kf-track{ animation:none; } }

/* Fascia 2 · mini-CTA + libro */
.kf-cta{ position:relative; z-index:0; display:grid; grid-template-columns:1.1fr .9fr; gap:64px; padding:72px 56px;
  max-width:1280px; margin:0 auto; align-items:center; }
.kf-cta::before{ content:""; position:absolute; top:0; bottom:0; left:50%; margin-left:-50vw; width:100vw; background:var(--blue-grad); z-index:-1; }
.kf-cta--solo{ grid-template-columns:1fr; } /* 2026-09-05: senza il riquadro libro la CTA occupa tutta la larghezza (classe aggiunta, nulla rinominato) */
.kf-call h2{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(30px,3.4vw,46px); line-height:1.02; letter-spacing:-0.02em; color:#fff; max-width:15ch; }
.kf-call p{ color:rgba(255,255,255,.82); margin:18px 0 28px; font-size:var(--fs-testo); max-width:46ch; line-height:1.55; }
.kf-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--kf-accent); color:#fff;
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; font-weight:var(--fw-etichetta);
  padding:15px 24px; border-radius:3px; border:0; cursor:pointer; transition:transform .18s ease, filter .18s ease; }
.kf-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.kf-book{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:30px; }
.kf-book .ey{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin:0 0 12px; }
.kf-book h3{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo-s); line-height:1.1; color:#fff; margin:0 0 20px; }
.kf-book h3 em{ font-style:italic; }
.kf-form{ display:flex; gap:8px; flex-wrap:wrap; }
.kf-form input{ flex:1; min-width:0; background:#000; border:1px solid rgba(255,255,255,.2); border-radius:3px; color:#fff;
  font-family:var(--mono); font-size:var(--fs-meta); padding:13px 14px; }
.kf-form input::placeholder{ color:#6f6d68; }
.kf-form input:focus{ outline:none; border-color:var(--kf-accent); }
.kf-form .kf-btn{ padding:13px 18px; }
.kf-micro{ font-size:11.5px; color:rgba(255,255,255,.6); margin:14px 0 0; line-height:1.5; }

/* Fascia 3+4 · brand + mappa */
.kf-main{ display:grid; grid-template-columns:1.3fr 2fr; gap:64px; padding:64px 56px; max-width:1280px; margin:0 auto;
  border-bottom:1px solid rgba(255,255,255,.12); }
.kf-logo{ display:block; height:30px; width:auto; opacity:.95; transition:opacity .2s ease; }
.kf-logo:hover{ opacity:1; }
.kf-brand .desc{ color:#b6b4af; font-size:var(--fs-testo-s); line-height:1.6; margin:20px 0 0; max-width:38ch; }
.kf-brand .meta{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.02em; color:#cfcdc8; margin:18px 0 0; line-height:1.9; }
.kf-brand .meta a:hover{ color:var(--kf-accent); }
.kf-sign{ font-family:var(--display); font-style:italic; font-size:var(--fs-titolo-s); color:#8f8d88; margin:22px 0 0; }
.kf-map{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.kf-col h4{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--kf-accent); margin:0 0 16px; font-weight:var(--fw-etichetta); }
.kf-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.kf-col a{ font-size:var(--fs-testo-s); color:#cfcdc8; transition:color .15s ease, padding-left .15s ease; }
.kf-col a:hover{ color:#fff; padding-left:5px; }

/* Fascia 5 · riga onesta */
/* pannello blu come il mega menu AI (2026-07-28): citazione bianca + seconda
   parte in gradiente magenta→azure corsivo */
.kf-honest{ position:relative; overflow:hidden; text-align:center; margin:0 clamp(16px,3vw,40px) 34px; padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px) clamp(30px,3.4vw,44px); border-radius:18px;
  background:radial-gradient(50% 90% at 12% -10%, rgba(69,181,229,.22), transparent 60%), radial-gradient(48% 100% at 92% 120%, rgba(229,20,123,.18), transparent 60%), radial-gradient(120% 160% at 10% -25%, #17284c 0%, #0a0f1e 62%); }
.kf-honest::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(58% 130% at 10% -10%, rgba(229,20,123,.07), transparent 60%), radial-gradient(58% 130% at 92% 110%, rgba(69,181,229,.08), transparent 60%); }
@media (prefers-reduced-motion:no-preference){ .kf-honest::before{ background-size:200% 200%; animation:aiAura 16s ease-in-out infinite alternate; } }
.kf-honest > *{ position:relative; z-index:1; }
.kf-honest .kf-honest__q{ font-family:var(--display); font-size:clamp(26px,3.6vw,48px); font-weight:var(--fw-display); line-height:1.1; letter-spacing:-0.025em; color:#fff; margin:0; max-width:24ch; margin-inline:auto; text-wrap:pretty; }
.kf-honest .kf-honest__q .g{ font-style:italic; font-weight:var(--fw-sottile); background:linear-gradient(100deg,#E5147B,#45B5E5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kf-honest .kf-honest__btn{ border-color:rgba(255,255,255,.34); margin-top:clamp(22px,2.6vw,34px); }


/* Fascia 5-bis · BANDA «MARKETING FOR THE BRAVE» (deciso 2026-07-28,
   banco: WORK/Bozze/PROVA - Marketing for the Brave.html, variante F+A):
   banda nera a tutta larghezza, titolone su due righe con il gradiente brand
   in scorrimento continuo (11s, sequenza doppia: nessuno stacco all'aggancio). */
.kf-brave{ container-type:inline-size; background:#000; padding:clamp(44px,7vh,86px) clamp(24px,3cqw,56px); display:grid; place-items:center; text-align:center; }
.kf-brave h2{ margin:0; font-family:var(--display); font-weight:var(--fw-display); text-transform:uppercase; font-size:min(13cqw,210px); line-height:.82; letter-spacing:-0.035em; max-width:14ch;
  background-image:linear-gradient(100deg,#E5147B,#F5B820,#45B5E5,#1C7A99,#E5147B,#F5B820,#45B5E5,#1C7A99,#E5147B); background-size:400% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (prefers-reduced-motion:no-preference){ .kf-brave h2{ animation:komGrad 11s linear infinite; } }
@keyframes komGrad{ 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }
.kf-brave .kf-brave__sub{ margin:clamp(22px,2.6vw,36px) 0 0; font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.3em; text-transform:uppercase; color:#fff; }

/* Fascia 6 · legale */
.kf-legal{ border-top:1px solid rgba(255,255,255,.12); }
.kf-legal .kf-wrap{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; padding-top:22px; padding-bottom:30px; }
.kf-legal *{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:#86847f; }
.kf-legal .lg-l{ text-align:left; }
.kf-legal .lg-c{ text-align:center; }
.kf-legal .lg-c a:hover{ color:#cfcdc8; }
.kf-legal .lg-r{ text-align:right; display:flex; gap:16px; justify-content:flex-end; }
.kf-legal .lg-r a{ letter-spacing:.1em; }
.kf-legal .lg-r a:hover{ color:var(--kf-accent); }

/* credito Claude Design */
.kf-credit{ border-top:1px solid rgba(255,255,255,.08); }
.kf-credit .kf-wrap{ display:flex; align-items:center; justify-content:center; gap:9px; padding:16px 56px; }
.kf-credit a{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em;
  color:#6f6d68; transition:color .18s ease; }
.kf-credit a:hover{ color:#fff; }
.kf-credit .claude-mark{ width:16px; height:16px; display:block; flex:none; transform-origin:50% 50%; animation:kfStar 9s linear infinite; }
@keyframes kfStar{ to{ transform:rotate(360deg); } }
.kf-credit a:hover .claude-mark{ animation-duration:1.6s; }
.kf-credit__live{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:#46c07a; }
.kf-credit__live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#46c07a; box-shadow:0 0 0 0 rgba(70,192,122,.6); animation:kfPulse 1.8s ease-out infinite; }
@keyframes kfPulse{ 0%{ box-shadow:0 0 0 0 rgba(70,192,122,.55);} 70%{ box-shadow:0 0 0 7px rgba(70,192,122,0);} 100%{ box-shadow:0 0 0 0 rgba(70,192,122,0);} }
@media (prefers-reduced-motion:reduce){ .kf-credit .claude-mark{ animation:none; } .kf-credit__live::before{ animation:none; } }

@media (max-width:900px){
  .kf-cta, .kf-main{ grid-template-columns:1fr; gap:40px; }
  .kf-map{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .kf-legal .kf-wrap{ grid-template-columns:1fr; text-align:center; gap:14px; }
  .kf-legal .lg-l, .kf-legal .lg-r{ text-align:center; justify-content:center; }
}


/* ---- mega "Esperienza" — fondo bianco, carte portfolio in blu ---- */
.mega--exp{ background:#fff; border-top-color:var(--rule); border-bottom-color:var(--rule); color:var(--ink); }
.mega--exp .exp-grid{ display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:16px; padding:36px 0; align-items:stretch; }
.exp-intro{ padding:8px 28px 8px 0; display:flex; flex-direction:column; }
.exp-title{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo); line-height:1.04; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.exp-sub{ font-size:var(--fs-testo); line-height:1.55; color:var(--mute); margin:14px 0 22px; max-width:42ch; }
.exp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.exp-chips span{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.02em; color:var(--ink); background:var(--soft); border:1px solid var(--rule); border-radius:5px; padding:7px 12px; }
.exp-allbtn{ display:inline-block; margin-top:auto; align-self:flex-start; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--ink); border:1px solid var(--ink); border-radius:7px; padding:14px 24px; text-decoration:none; transition:transform .2s ease, filter .2s ease; }
.exp-allbtn:hover{ transform:translateY(-2px); filter:brightness(1.2); }
.exp-card{ display:flex; flex-direction:column; padding:30px 26px; text-decoration:none; border-radius:14px; background:var(--blue-grad); color:#fff; box-shadow:0 16px 40px -28px rgba(14,18,48,.7); transition:transform .25s ease, box-shadow .25s ease; }
.exp-card:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -26px rgba(14,18,48,.85); }
.exp-card .exp-k{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.exp-card .exp-t{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo); line-height:1; letter-spacing:-0.01em; margin:4px 0 16px; color:#fff; }
.exp-card.b2c .exp-t{ color:#F7C44A; }
.exp-card.b2b .exp-t{ color:#62C7DE; }
.exp-card.retail .exp-t{ color:#7FCEF2; }
.exp-card p{ font-size:var(--fs-testo-s); line-height:1.56; color:rgba(255,255,255,.8); margin:0 0 auto; }
.exp-cta{ display:block; margin-top:24px; font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:7px; padding:13px 18px; text-align:center; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.exp-card.b2c:hover .exp-cta{ background:var(--yellow); color:#111; border-color:var(--yellow); transform:translateY(-2px); }
.exp-card.b2b:hover .exp-cta{ background:var(--teal); color:#fff; border-color:var(--teal); transform:translateY(-2px); }
.exp-card.retail:hover .exp-cta{ background:var(--azure); color:#111; border-color:var(--azure); transform:translateY(-2px); }
@media (max-width:980px){ .mega--exp .exp-grid{ grid-template-columns:1fr 1fr; } .exp-intro{ padding:30px 0 8px; grid-column:1/-1; } .exp-card{ padding:26px 22px; } }

/* ---- mega "Il Metodo" — descrizione fase + bottone "vai alla fase" ---- */
.mega-col .mega-desc{ font-size:var(--fs-testo-s); line-height:1.5; color:var(--mute); margin:-6px 0 16px; }
.mega-phase-btn{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); border:1px solid var(--rule); border-radius:5px; padding:10px 16px; text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.mega-phase-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }


/* ============================ Slider Case Study (per tag) ============================ */
.cs-slider{ position:relative; }
.cs-slider__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.cs-slider__nav{ display:flex; gap:8px; }
.cs-slider__btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--rule); background:var(--paper); color:var(--ink); font-size:var(--fs-lead); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; }
.cs-slider__btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cs-slider__btn:disabled{ opacity:.32; cursor:default; }
.cs-slider__btn:disabled:hover{ background:var(--paper); color:var(--ink); border-color:var(--rule); }
.cs-slider__viewport{ overflow:hidden; }
.cs-slider__track{ display:flex; gap:24px; transition:transform .55s cubic-bezier(.25,.8,.3,1); will-change:transform; }
.cs-slider__track .case{ flex:0 0 calc((100% - 48px) / 3); box-sizing:border-box; }
.cs-slider__dots{ display:flex; gap:8px; justify-content:center; margin-top:28px; }
.cs-slider__dots button{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--rule); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.cs-slider__dots button.on{ background:var(--magenta); transform:scale(1.4); }
.cs-slider__filters{ display:flex; gap:8px; flex-wrap:wrap; }
.cs-slider__filters .filter{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.03em; padding:9px 16px; border-radius:99px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.cs-slider__filters .filter:hover{ border-color:var(--ink); }
.cs-slider__filters .filter.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cs-slider .case .roi{ display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--rule); padding-top:14px; margin-top:auto; }
.cs-slider .case .roi .big{ font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-0.02em; line-height:1; color:var(--accent,var(--ink)); }
.cs-slider .case .roi .lbl{ font-size:var(--fs-testo-s); color:var(--mute); }
@media (max-width:900px){ .cs-slider__track .case{ flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:620px){ .cs-slider__track .case{ flex-basis:100%; } }
@media (prefers-reduced-motion:reduce){ .cs-slider__track{ transition:none; } }


/* ============================================================
   SISTEMA MEGA — pannelli a fondo bianco + carte accento in blu sfumato (hero home)
   ============================================================ */
:root{ --blue-grad:linear-gradient(150deg,#0e1230 0%,#1a1f46 58%,#141834 100%); --blue-accent:#FF6FB0; }

/* ---- mega "Chiedi a noi" — fondo bianco, carte percorso in blu ---- */
.mega--ask{ background:#fff; border-top-color:var(--rule); border-bottom-color:var(--rule); color:var(--ink); }
.mega--ask .ask-grid{ display:grid; grid-template-columns:1.15fr 1.15fr .8fr; gap:0; }
/* Senza la card Mr Wolf (WOLF_ATTIVO = false): due colonne, niente buco a destra.
   Va dentro un min-width: ha 3 classi e sotto i 980px scavalcherebbe la media query a 1fr. */
@media (min-width:981px){ .mega--ask .ask-grid.no-wolf{ grid-template-columns:1.3fr 1fr; } }
.ask-intro{ padding:48px 44px 48px 0; }
.ask-ey{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); margin:0 0 18px; }
.ask-title{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo); line-height:1.05; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.ask-title .it{ font-style:italic; color:var(--magenta); }
.ask-sub{ font-size:var(--fs-testo); line-height:1.6; color:var(--mute); margin:18px 0 26px; max-width:44ch; }
.ask-sede{ display:flex; gap:13px; align-items:flex-start; border-top:1px solid var(--rule); padding-top:22px; }
.ask-pin{ margin-top:5px; width:11px; height:11px; border-radius:50%; background:var(--magenta); flex:none; box-shadow:0 0 0 4px rgba(229,20,123,.16); }
.ask-sede-k{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin:0; }
.ask-sede-v{ font-size:var(--fs-testo-s); line-height:1.5; color:var(--mute); margin:6px 0 0; }
.ask-about{ display:inline-block; margin-top:26px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(17,17,18,.28); padding-bottom:3px; transition:border-color .2s, color .2s; }
.ask-about:hover{ color:var(--magenta); border-color:var(--magenta); }
.ask-paths{ padding:42px 38px; border-left:1px solid var(--rule); display:flex; flex-direction:column; gap:13px; }
.ask-card{ display:block; text-decoration:none; border-radius:14px; padding:24px 26px; background:var(--blue-grad); color:#fff; box-shadow:0 16px 40px -28px rgba(14,18,48,.7); transition:transform .2s, box-shadow .2s; }
.ask-card:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -26px rgba(14,18,48,.85); }
.ask-card .ask-k{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--blue-accent); }
.ask-card .ask-t{ display:block; font-family:var(--display); font-size:var(--fs-titolo-s); color:#fff; margin:6px 0 9px; letter-spacing:-0.01em; }
.ask-card p{ font-size:var(--fs-testo-s); line-height:1.55; color:rgba(255,255,255,.82); margin:0 0 14px; }
.ask-card .ask-cta{ font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:var(--blue-accent); }
.ask-contacts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:9px; }
.ask-contacts a{ display:flex; flex-direction:column; gap:5px; text-decoration:none; border:1px solid var(--rule); border-radius:12px; padding:14px 16px; font-family:var(--mono); font-size:var(--fs-link); color:var(--ink); background:var(--soft); transition:border-color .2s, background .2s, transform .2s; }
.ask-contacts a:first-child{ grid-column:1 / -1; }
.ask-contacts a span{ font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.ask-contacts a:hover{ border-color:var(--magenta); background:#fff; transform:translateY(-2px); }
.ask-wolf{ position:relative; display:flex; flex-direction:column; padding:42px 34px; border-left:1px solid var(--rule); background:var(--soft); text-decoration:none; transition:background .25s; }
.ask-wolf:hover{ background:#f1eee6; }
.ask-wolf-ava{ width:48px; height:48px; border-radius:50%; background:radial-gradient(circle at 32% 30%, #E5147B, #7a0c43); box-shadow:0 0 0 4px rgba(229,20,123,.14); }
.ask-wolf-live{ position:absolute; top:46px; left:66px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:#1F8A5B; }
.ask-wolf-live::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#1F8A5B; margin-right:6px; vertical-align:middle; }
.ask-wolf-name{ font-family:var(--display); font-size:var(--fs-titolo-s); color:var(--ink); margin:22px 0 3px; }
.ask-wolf-role{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:var(--magenta); margin:0 0 15px; }
.ask-wolf-txt{ font-size:var(--fs-testo-s); line-height:1.58; color:var(--mute); margin:0 0 auto; }
.ask-wolf-cta{ margin-top:20px; font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:var(--ink); }
.ask-wolf:hover .ask-wolf-cta{ color:var(--magenta); }
@media (max-width:980px){ .mega--ask .ask-grid{ grid-template-columns:1fr; } .ask-intro{ padding:30px 0; } .ask-paths,.ask-wolf{ border-left:0; border-top:1px solid var(--rule); padding:30px 0; } .ask-contacts{ grid-template-columns:1fr; } }

/* ---- mega "Il Metodo" — colonne su fondo bianco, bottoni colorati per fase ---- */
.mega--metodo-color{ background:#fff; }
.mega--metodo-color .mega-inner{ padding:0; max-width:1500px; display:block; }
.mc-grid{ display:grid; grid-template-columns:repeat(4,1fr) .82fr; align-items:stretch; }
.mc-col{ display:flex; flex-direction:column; padding:40px 30px 32px; min-height:340px; border-left:1px solid var(--rule); border-top:3px solid var(--c,transparent); }
.mc-col.mc-a{ --c:var(--magenta); } .mc-col.mc-d{ --c:var(--yellow); } .mc-col.mc-am{ --c:var(--teal); } .mc-col.mc-m{ --c:var(--azure); }
.mc-col:first-child{ border-left:0; }
.mc-col h3{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo-s); letter-spacing:-0.01em; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.mc-col h3::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c); flex:none; }
.mc-col h3 a{ color:var(--ink); text-decoration:none; transition:color .15s ease; }
.mc-col h3 a:hover{ color:var(--c); }
.mc-desc{ font-size:var(--fs-testo-s); line-height:1.5; color:var(--mute); margin:0 0 18px; }
.mc-links{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:9px; }
.mc-links a{ color:var(--ink); font-size:var(--fs-testo); font-weight:500; text-decoration:none; transition:color .15s ease, padding-left .15s ease; }
.mc-links a:hover{ color:var(--c); padding-left:4px; }
.mc-btn{ margin-top:auto; align-self:flex-start; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--c); border:0; border-radius:5px; padding:12px 20px; text-decoration:none; transition:filter .18s ease, transform .18s ease; }
.mc-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.mc-side{ background:transparent; padding:20px; display:flex; align-items:stretch; border-left:1px solid var(--rule); }
.mc-mf{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:0; text-decoration:none; background:var(--blue-grad); border-radius:14px; padding:32px 28px; box-shadow:0 16px 40px -28px rgba(14,18,48,.7); transition:transform .2s ease, box-shadow .2s ease; }
.mc-mf:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -26px rgba(14,18,48,.85); }
.mc-mf__ey{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); }
.mc-mf__t{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo-s); line-height:1.06; letter-spacing:-0.01em; color:#fff; margin:12px 0 0; }
.mc-mf__t em{ font-style:italic; color:#ff7ab8; }
.mc-mf__d{ font-size:var(--fs-testo-s); line-height:1.55; color:rgba(255,255,255,.7); margin:14px 0 20px; }
.mc-mf__btn{ align-self:flex-start; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--magenta); padding:13px 20px; border-radius:7px; transition:filter .2s ease, transform .2s ease; }
.mc-mf:hover .mc-mf__btn{ filter:brightness(1.1); transform:translateY(-2px); }
@media (max-width:980px){ .mc-grid{ grid-template-columns:1fr 1fr; } .mc-col{ border-left:0; min-height:0; } .mc-side{ grid-column:1 / -1; border-left:0; flex-direction:row; flex-wrap:wrap; align-items:center; } .mc-card{ flex:1 1 280px; } }
@media (max-width:560px){ .mc-grid{ grid-template-columns:1fr; } }


/* ============================ Referenze (prove sociali nelle pagine servizio) ============================ */
.refs{ }
.refs__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:30px; }
.refs__head .sec-intro{ margin-bottom:8px; }
.refs__all, .refs__all-w a{ font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:var(--ink); text-decoration:none; border:1px solid var(--rule); border-radius:6px; padding:12px 18px; white-space:nowrap; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.refs__all-w{ margin:0; }
.refs__all:hover, .refs__all-w a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.refs__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.ref{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--paper); text-decoration:none; color:inherit; min-height:300px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ref:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -34px rgba(17,17,18,.4); border-color:rgba(17,17,18,.16); }
.ref__img{ position:relative; order:2; background:var(--soft) center/cover no-repeat; overflow:hidden; min-height:100%; }
.ref__img::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; height:auto; background:var(--accent,var(--magenta)); z-index:2; }
.ref__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ref:hover .ref__img img{ transform:scale(1.05); }
.ref__logo{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--display); font-size:var(--fs-titolo-s); line-height:1; color:#fff; letter-spacing:-0.01em; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.ref__img.is-ph{ display:flex; align-items:flex-end; padding:18px; background:linear-gradient(150deg,var(--soft),#fff); }
.ref__img.is-ph::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent,var(--magenta)) 14%, transparent), transparent 60%); }
.ref__img.is-ph .ref__logo{ position:static; color:var(--accent,var(--ink)); text-shadow:none; opacity:.92; font-size:var(--fs-titolo); z-index:2; }
.ref__body{ order:1; padding:24px; display:flex; flex-direction:column; gap:12px; }
.ref__tags{ display:flex; gap:6px; flex-wrap:wrap; }
.ref__tag{ font-family:var(--mono); font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.05em; color:var(--mute); border:1px solid var(--rule); border-radius:999px; padding:4px 9px; }
.ref__t{ font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.01em; line-height:1.14; margin:0; }
.ref__desc{ font-size:var(--fs-testo-s); color:var(--mute); line-height:1.55; margin:0; }
.ref__foot{ display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--rule); padding-top:14px; margin-top:auto; }
.ref__kpi{ font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); line-height:1; letter-spacing:-0.02em; color:var(--accent,var(--magenta)); }
.ref__kpi-l{ font-size:var(--fs-testo-s); color:var(--mute); line-height:1.3; }
.ref__link{ margin-top:4px; font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:var(--ink); }
.ref:hover .ref__link{ color:var(--accent,var(--magenta)); }
/* Card referenze come GRUPPO di blocchi (editabili a vista): accento via classe, non style inline */
.ref__ph-note{ position:absolute; right:14px; top:12px; z-index:3; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); background:rgba(255,255,255,.88); border:1px solid var(--rule); border-radius:4px; padding:5px 9px; }
.refs__hint{ font-family:var(--mono); font-size:var(--fs-meta); line-height:1.5; color:var(--magenta); border:1px dashed color-mix(in srgb, var(--magenta) 45%, transparent); border-radius:6px; padding:10px 12px; margin:0 0 16px; }
.ref--magenta{ --accent:var(--magenta); } .ref--giallo{ --accent:var(--yellow); } .ref--teal{ --accent:var(--teal); } .ref--azure{ --accent:var(--azure); }
.ref > .ref__img, .ref > .ref__body{ min-width:0; }
p.ref__logo, p.ref__tags, p.ref__foot{ margin:0; }
.ref__link a{ color:inherit; text-decoration:none; }
.ref:hover .ref__link a{ color:var(--accent,var(--magenta)); }
div.ref{ cursor:pointer; }
.refs__all-wrap{ margin:0; }
@media (max-width:900px){ .refs__grid{ grid-template-columns:1fr; } }
@media (max-width:620px){ .ref{ grid-template-columns:1fr; } }
.refs__head .refs__manage{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:6px; padding:9px 13px; cursor:pointer; transition:border-color .2s; }
.refs__head .refs__manage:hover{ border-color:var(--ink); }
.ref-admin-open{ position:fixed; right:18px; bottom:18px; z-index:9000; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; background:var(--ink); color:#fff; border:0; border-radius:99px; padding:12px 18px; cursor:pointer; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }
.ref-admin-open:hover{ background:#000; }
.ref-admin{ position:fixed; top:0; right:0; height:100%; width:min(440px,92vw); background:#fff; z-index:9500; box-shadow:-30px 0 80px -30px rgba(0,0,0,.4); transform:translateX(101%); transition:transform .3s ease; display:flex; flex-direction:column; border-left:1px solid var(--rule); }
.ref-admin.open{ transform:none; }
.ref-admin__bar{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--rule); font-family:var(--display); font-size:var(--fs-titolo-s); }
.ref-admin__x{ border:0; background:none; font-size:var(--fs-lead); cursor:pointer; color:var(--mute); line-height:1; }
.ref-admin__body{ flex:1; overflow:auto; padding:20px 22px; }
.ref-admin__hint{ font-family:var(--mono); font-size:var(--fs-meta); line-height:1.55; color:var(--mute); margin:0 0 20px; }
.ref-sec{ margin-bottom:24px; }
.ref-sec__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.ref-add{ font-family:var(--mono); font-size:var(--fs-meta); border:1px solid var(--rule); background:var(--paper); border-radius:6px; padding:6px 10px; cursor:pointer; }
.ref-add:hover{ border-color:var(--ink); }
.ref-tagwrap{ display:flex; flex-wrap:wrap; gap:7px; }
.ref-tag-toggle{ font-family:var(--mono); font-size:var(--fs-meta); border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:99px; padding:7px 13px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.ref-tag-toggle.on{ background:var(--magenta); color:#fff; border-color:var(--magenta); }
.ref-row{ border:1px solid var(--rule); border-radius:8px; padding:10px; margin-bottom:10px; display:flex; flex-direction:column; gap:7px; }
.ref-row__top{ display:flex; gap:7px; align-items:center; }
.ref-row__kpi{ display:flex; gap:7px; }
.ref-in{ font-family:var(--mono); font-size:var(--fs-meta); border:1px solid var(--rule); border-radius:6px; padding:8px 10px; width:100%; background:#fff; color:var(--ink); }
.ref-in:focus{ outline:none; border-color:var(--magenta); }
.ref-del{ flex:none; border:1px solid var(--rule); background:#fff; color:var(--mute); border-radius:6px; width:32px; height:32px; cursor:pointer; }
.ref-del:hover{ border-color:#d11; color:#d11; }
.ref-admin__foot{ display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--rule); }
.ref-btn{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; border:0; border-radius:6px; padding:11px 18px; cursor:pointer; background:var(--magenta); color:#fff; }
.ref-btn.ghost{ background:none; border:1px solid var(--rule); color:var(--ink); }
.ref-btn:hover{ filter:brightness(1.07); }
@media print{ .ref-admin-open,.ref-admin,.refs__manage{ display:none!important; } }


/* ============================ Hero fasi ADAM a fondo pieno colorato ============================ */
.svc-hero.ph{ position:relative; border-top:0; padding:84px 0 76px; color:#fff; }
.svc-hero.ph .crumb, .svc-hero.ph .crumb a{ color:rgba(255,255,255,.78); }
.svc-hero.ph .crumb .sep{ color:rgba(255,255,255,.45); }
.svc-hero.ph .tag{ color:#fff; }
.svc-hero.ph .tag .dot{ background:#fff; }
.svc-hero.ph h1{ color:#fff; }
.svc-hero.ph h1 .it{ color:rgba(255,255,255,.92); }
.svc-hero.ph .lead{ color:rgba(255,255,255,.86); }
.svc-hero.ph .btn-primary .wp-block-button__link, .svc-hero.ph .btn-primary{ background:#fff; color:var(--ph,#111); border-color:#fff; }
.svc-hero.ph .btn-outline .wp-block-button__link, .svc-hero.ph .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.svc-hero.ph .btn-outline .wp-block-button__link:hover{ background:#fff; color:var(--ph,#111); border-color:#fff; }
.svc-hero.ph-analizza{ background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.30), rgba(255,255,255,0) 46%), linear-gradient(135deg, #ff5cab 0%, #E5147B 52%, #a60d59 100%); --ph:#E5147B; }
.svc-hero.ph-amplia{ background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.26), rgba(255,255,255,0) 46%), linear-gradient(135deg, #34a7cc 0%, #1C7A99 52%, #114f66 100%); --ph:#1C7A99; }
.svc-hero.ph-misura{ background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.30), rgba(255,255,255,0) 46%), linear-gradient(135deg, #8ad4f5 0%, #45B5E5 50%, #2487b8 100%); --ph:#1a5f7d; }
/* Design = giallo: testo scuro per leggibilità */
.svc-hero.ph-disegna{ background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.42), rgba(255,255,255,0) 46%), linear-gradient(135deg, #ffdc78 0%, #F5B820 52%, #d99e00 100%); --ph:#7a5a06; color:#1a1407; }
.svc-hero.ph-disegna .crumb, .svc-hero.ph-disegna .crumb a{ color:rgba(26,20,7,.72); }
.svc-hero.ph-disegna .crumb .sep{ color:rgba(26,20,7,.4); }
.svc-hero.ph-disegna .tag{ color:#1a1407; }
.svc-hero.ph-disegna .tag .dot{ background:#1a1407; }
.svc-hero.ph-disegna h1{ color:#1a1407; }
.svc-hero.ph-disegna h1 .it{ color:rgba(26,20,7,.82); }
.svc-hero.ph-disegna .lead{ color:rgba(26,20,7,.78); }
.svc-hero.ph-disegna .btn-primary .wp-block-button__link, .svc-hero.ph-disegna .btn-primary{ background:#1a1407; color:#F5B820; border-color:#1a1407; }
.svc-hero.ph-disegna .btn-outline .wp-block-button__link, .svc-hero.ph-disegna .btn-outline{ color:#1a1407; border-color:rgba(26,20,7,.5); }
.svc-hero.ph-disegna .btn-outline .wp-block-button__link:hover{ background:#1a1407; color:#F5B820; border-color:#1a1407; }
/* azure (Measure): testo bianco regge, ma scuriamo un filo per contrasto AA sul lead */
.svc-hero.ph-misura{ background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.28), rgba(255,255,255,0) 46%), linear-gradient(135deg, #7fcbef 0%, #2ea3d4 54%, #1f7ba6 100%); }
/* alone morbido che vive sul colore della fase + sfumatura di profondità */
.svc-hero.ph{ overflow:hidden; }
.svc-hero.ph > .wrap{ position:relative; z-index:1; }
.svc-hero.ph::before{ content:""; position:absolute; z-index:0; top:-32%; right:-12%; width:62%; aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:.42; background:radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 64%); }
@media (prefers-reduced-motion:no-preference){ .svc-hero.ph::before{ animation:phGlow 17s ease-in-out infinite alternate; } @keyframes phGlow{ from{ transform:translate(0,0) scale(1); opacity:.36; } to{ transform:translate(-9%,13%) scale(1.2); opacity:.55; } } }


/* ---- Hero servizio · variante scura (quando l'hero bianco è seguito da una sezione bianca) ---- */
.svc-hero.is-dark{ background:#0e0f12; }
.svc-hero.is-dark .crumb, .svc-hero.is-dark .crumb a{ color:rgba(255,255,255,.6); }
.svc-hero.is-dark .crumb .sep{ color:rgba(255,255,255,.3); }
.svc-hero.is-dark .tag{ color:var(--magenta); }
.svc-hero.is-dark h1, .svc-hero.is-dark .wp-block-heading{ color:#fff; }
.svc-hero.is-dark .lead{ color:rgba(255,255,255,.74); }
.svc-hero.is-dark .btn-outline .wp-block-button__link,
.svc-hero.is-dark .btn-outline{ color:#fff; border-color:rgba(255,255,255,.5); }
.svc-hero.is-dark .btn-outline .wp-block-button__link:hover,
.svc-hero.is-dark .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }


/* ---- promo Manifesto nei mega menu (Metodo + Obiettivi) ---- */
.mc-card--mf{ background:var(--magenta); border-color:var(--magenta); color:#fff; }
.mc-card--mf:hover{ box-shadow:0 20px 44px -22px rgba(229,20,123,.6); border-color:var(--magenta); }
.mc-card--mf .mc-card__tag{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); display:block; margin-bottom:8px; }
.mc-card--mf strong{ color:#fff; border-bottom:0; padding-bottom:0; margin-bottom:8px; font-style:italic; }
.mc-card--mf p{ color:rgba(255,255,255,.86); margin:0 0 12px; }
.mc-card--mf .mc-card__cta{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.mega-manifesto{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; margin:22px 0 0; padding:24px 28px; border-radius:12px; text-decoration:none;
  background:var(--blue-grad); border:0; position:relative; overflow:hidden; box-shadow:0 16px 40px -28px rgba(14,18,48,.7); transition:box-shadow .2s ease, transform .2s ease; }
.mega-manifesto::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--magenta); }
.mega-manifesto::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(229,20,123,.32), transparent 70%); pointer-events:none; }
.mega-manifesto:hover{ box-shadow:0 26px 52px -26px rgba(14,18,48,.85); transform:translateY(-2px); }
.mega-manifesto .mm-txt{ display:flex; flex-direction:column; gap:5px; position:relative; z-index:1; }
.mega-manifesto .mm-ey{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); }
.mega-manifesto .mm-t{ font-family:var(--display); font-size:var(--fs-titolo-s); line-height:1.05; color:#fff; letter-spacing:-0.01em; }
.mega-manifesto .mm-t em{ font-style:italic; color:#ff7ab8; }
.mega-manifesto .mm-cta{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; justify-self:start; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); background:rgba(229,20,123,.08); border:1px solid rgba(229,20,123,.5); padding:9px 18px; border-radius:999px; white-space:nowrap; transition:background .2s ease, border-color .2s ease; }
.mega-manifesto:hover .mm-cta{ background:rgba(229,20,123,.18); border-color:var(--magenta); }
@media (max-width:980px){ .mega-manifesto{ grid-template-columns:1fr; gap:16px; } .mega-manifesto .mm-cta{ align-self:flex-start; } }

/* Variante Shopify (verde) della card promo mega — "Partner Shopify" */
.mega-manifesto.mega-shopify{ background:var(--blue-grad); }
.mega-manifesto.mega-shopify::before{ background:#7ED957; }
.mega-manifesto.mega-shopify::after{ background:radial-gradient(circle, rgba(94,142,62,.34), transparent 70%); }
.mega-manifesto.mega-shopify:hover{ box-shadow:0 26px 52px -26px rgba(14,18,48,.85); }
.mega-manifesto.mega-shopify .mm-ey{ color:#95BF47; }
.mega-manifesto.mega-shopify .mm-t em{ color:#7ED957; }
.mega-manifesto.mega-shopify .mm-cta{ color:rgba(255,255,255,.92); background:rgba(94,142,62,.10); border-color:rgba(94,142,62,.5); }
.mega-manifesto.mega-shopify:hover .mm-cta{ background:rgba(126,217,87,.16); border-color:#7ED957; }

/* Card promo del mega affiancate + tono piu' sobrio */
.mega-promos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 0; }
.mega-promos .mega-manifesto{ margin-top:0; grid-template-columns:1fr; gap:12px; padding:20px 22px; box-shadow:0 10px 28px -22px rgba(0,0,0,.45); }
.mega-promos .mega-manifesto::after{ opacity:.55; }
.mega-promos .mega-manifesto .mm-t{ font-size:var(--fs-lead); line-height:1.12; }
.mega-promos .mega-manifesto .mm-cta{ align-self:flex-start; }
@media (max-width:980px){ .mega-promos{ grid-template-columns:1fr; } }

/* rev3 */


/* Lettera-filigrana della fase nell'hero (come le card della home) — Jost 300 (token --adam, stessa eccezione dei glifi ADAM, deciso 2026-07-25) */
.svc-hero.ph::after{ content:var(--gly,""); position:absolute; z-index:0; right:3%; bottom:-0.16em; font-family:var(--adam); font-weight:var(--fw-sottile); line-height:.8; font-size:clamp(260px,32vw,500px); color:inherit; opacity:.14; pointer-events:none; -webkit-user-select:none; user-select:none; }
.svc-hero.ph-analizza{ --gly:"A"; }
.svc-hero.ph-disegna{ --gly:"D"; }
.svc-hero.ph-amplia{ --gly:"A"; }
.svc-hero.ph-misura{ --gly:"M"; }
@media (max-width:680px){ .svc-hero.ph::after{ font-size:46vw; opacity:.12; right:-2%; } }


/* Voce di menu "AI" — evidenziata, con riflesso (slice) animato */
.navitem--ai{ display:flex; align-items:center; margin-left:26px; }
.nav-ai{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-link); font-weight:var(--fw-etichetta); letter-spacing:.1em; color:#fff!important; text-decoration:none; padding:10px 20px; border-radius:0; background:#0d1631; clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.nav-ai::before{ content:""; position:absolute; inset:0; padding:1.5px; background:linear-gradient(100deg,#E5147B,#45B5E5); clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px, 1.5px 9.6px, 1.5px calc(100% - 1.5px), calc(100% - 9.6px) calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 9.6px), calc(100% - 1.5px) 1.5px, 9.6px 1.5px); pointer-events:none; }
.nav-ai__spark{ font-size:11px; line-height:1; color:#F5B820; }
.nav-ai .caret{ color:rgba(255,255,255,.75); margin-left:2px; }
.nav-ai::after{ content:""; position:absolute; top:-25%; left:-65%; width:38%; height:150%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform:skewX(-18deg); pointer-events:none; }
@media (prefers-reduced-motion:no-preference){ .nav-ai::after{ animation:navAiShine 3.6s ease-in-out infinite; } }
@keyframes navAiShine{ 0%{ left:-65%; } 52%{ left:140%; } 100%{ left:140%; } }
.nav-ai{ transition:transform .18s ease, filter .22s ease, background .2s ease; }
.nav-ai:hover{ transform:translateY(-2px); background:#111b42; filter:drop-shadow(0 7px 14px rgba(69,181,229,.5)) drop-shadow(0 4px 12px rgba(229,20,123,.4)); }


/* Mega panel della voce AI */
.mega--ai{ background:radial-gradient(50% 90% at 12% -10%, rgba(69,181,229,.22), transparent 60%), radial-gradient(48% 100% at 92% 120%, rgba(229,20,123,.18), transparent 60%), radial-gradient(120% 160% at 10% -25%, #17284c 0%, #0a0f1e 62%); border-top-color:rgba(255,255,255,.12); border-bottom-color:rgba(255,255,255,.12); overflow:hidden; }
/* TITOLONE MONUMENTALE (deciso 2026-08-23): il claim occupa tutta la pagina, le card stanno sotto */
.mega--ai .ai-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:clamp(26px,4vh,54px); align-items:start; padding-block:clamp(28px,4.6vh,56px) clamp(28px,4.4vh,52px); }
.mega--ai::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(58% 130% at 10% -10%, rgba(229,20,123,.07), transparent 60%), radial-gradient(58% 130% at 92% 110%, rgba(69,181,229,.08), transparent 60%); }
@media (prefers-reduced-motion:no-preference){ .mega--ai::before{ background-size:200% 200%; animation:aiAura 16s ease-in-out infinite alternate; } }
@keyframes aiAura{ 0%{ background-position:0% 0%, 100% 100%; } 100%{ background-position:36% 24%, 64% 76%; } }
.mega--ai .ai-ey{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:8px; margin:0; background:linear-gradient(100deg,#E5147B,#1C7A99); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mega--ai .ai-spark{ -webkit-text-fill-color:#E5147B; color:#E5147B; }
@media (prefers-reduced-motion:no-preference){ .mega--ai .ai-spark{ animation:aiSpark 2.6s ease-in-out infinite; } }
@keyframes aiSpark{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(1.18); } }
.mega--ai .ai-title{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(40px,5.6vw,96px); line-height:.96; letter-spacing:-0.035em; margin:clamp(10px,1.6vh,20px) 0 0; color:#fff; text-wrap:balance; }
.mega--ai .ai-title .it{ font-style:italic; background:linear-gradient(100deg,#E5147B,#1C7A99); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mega--ai .ai-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.6vw,24px); }
.mega--ai .ai-card{ position:relative; display:flex; flex-direction:column; padding:24px; border-radius:14px; background:var(--blue-grad); border:0; text-decoration:none; color:#fff; box-shadow:0 16px 40px -28px rgba(14,18,48,.7); transition:transform .22s ease, box-shadow .22s ease; }
.mega--ai .ai-card::after{ content:""; position:absolute; inset:0; border-radius:14px; padding:1px; background:linear-gradient(120deg,#E5147B,#45B5E5); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.mega--ai .ai-card:hover{ transform:translateY(-5px); box-shadow:0 26px 54px -26px rgba(14,18,48,.85); }
.mega--ai .ai-card:hover::after{ opacity:1; }
/* --- Riflettore: la card si schiarisce dove passa il cursore, invita a guardare dentro --- */
.mega--ai .ai-card{ --mx:50%; --my:50%; isolation:isolate; transition:transform .22s ease, box-shadow .26s ease, filter .28s ease; }
.mega--ai .ai-card > *{ position:relative; z-index:1; }
.mega--ai .ai-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:0; transition:opacity .3s ease; mix-blend-mode:screen; background:radial-gradient(220px circle at var(--mx) var(--my), rgba(190,235,255,.30), rgba(120,200,240,.10) 42%, transparent 70%); }
.mega--ai .ai-card:hover, .mega--ai .ai-card:focus-visible{ filter:brightness(1.05); }
.mega--ai .ai-card:hover::before, .mega--ai .ai-card:focus-visible::before{ opacity:1; }
.mega--ai .ai-k{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--blue-accent); }
.mega--ai .ai-t{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo-s); letter-spacing:-0.01em; margin:8px 0 11px; color:#fff; }
.mega--ai .ai-card p{ font-size:var(--fs-testo-s); line-height:1.55; color:rgba(255,255,255,.8); margin:0 0 18px; }

/* testo bianco su fondo blu — leggermente piu' marcato nei mega menu */
.ask-card .ask-t, .exp-card .exp-t, .mega--ai .ai-t, .mc-mf__t, .mega-manifesto .mm-t{ font-weight:500; }
.ask-card p, .exp-card p, .mega--ai .ai-card p, .mc-mf__d{ font-weight:500; }
.ask-card .ask-k, .ask-card .ask-cta, .exp-card .exp-k, .exp-card .exp-cta, .mega--ai .ai-k, .mega--ai .ai-cta, .mega-manifesto .mm-ey, .mega-manifesto .mm-cta, .mc-mf__ey{ font-weight:500; }

/* CTA mega menu — lettering normalizzato per leggibilita' */
.exp-allbtn, .mc-btn, .mc-mf__btn, .mega-phase-btn, .mega-manifesto .mm-cta{ font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.06em; }
.ask-card .ask-cta, .ask-wolf-cta, .exp-card .exp-cta, .mega--ai .ai-card .ai-cta, .mega-cta-row .ctr-r, .ask-about{ font-size:var(--fs-testo-s); font-weight:var(--fw-forte); letter-spacing:.02em; }
.mega--ai .ai-cta{ margin-top:auto; font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:#7fcef2; transition:transform .2s ease; }
.mega--ai .ai-card:hover .ai-cta{ transform:translateX(3px); }
.mega--ai .ai-cta{ transition:transform .2s ease, color .2s ease; }
.mega--ai .ai-card:hover .ai-cta, .mega--ai .ai-card:focus-visible .ai-cta{ color:#cdecff; }
@media (max-width:900px){ .mega--ai .ai-grid{ gap:22px; padding-block:26px 30px; } .mega--ai .ai-title{ font-size:clamp(32px,8vw,54px); letter-spacing:-0.025em; } }
@media (max-width:560px){ .mega--ai .ai-cards{ grid-template-columns:1fr; } }

/* ---- menu mobile: accordion sottolivelli nel drawer (<=980px) ---- */
.navitem .m-sub{ display:none; }
@media (max-width:980px){
  .nav .navitem.has-msub > .mega-trigger,
  .nav .navitem.has-msub > .drop-trigger{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .nav .navitem.has-msub .caret{ display:inline-block; margin-left:auto; font-size:11px; transition:transform .2s ease; }
  .nav .navitem.m-open > .mega-trigger .caret,
  .nav .navitem.m-open > .drop-trigger .caret{ transform:rotate(180deg); }
  .nav .navitem.m-open > .m-sub{ display:block; }
  .nav .navitem .m-sub{ padding:2px 0 12px; }
  .nav .navitem .m-sub .m-group{ padding:8px 0; border-top:1px solid rgba(255,255,255,.08); }
  .nav .navitem .m-sub .m-group:first-child{ border-top:0; }
  .nav .navitem .m-sub .m-gh{ display:block; margin:6px 12px 2px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:#9a978f; }
  .nav .navitem .m-sub a{ display:block; width:auto; padding:11px 16px; border-bottom:0; font-family:var(--sans); font-size:var(--fs-testo); font-weight:400; letter-spacing:0; text-transform:none; color:#e9e7e2; }
  .nav .navitem .m-sub a:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .nav .navitem .m-sub a.m-gh-link{ color:#fff; font-weight:var(--fw-forte); }
  .nav .navitem .m-sub a.m-all{ font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; text-transform:uppercase; color:var(--yellow); font-weight:var(--fw-etichetta); }
}


/* ---- mega "Il Metodo" — Proposta A: 4 fasi ADAM + barra Manifesto/AI ---- */
.mega--metodo .mtd-wrap{ padding-top:42px; padding-bottom:40px; }
.mtd-head{ margin-bottom:30px; }
.mtd-ey{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 10px; }
.mtd-h{ font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-.012em; line-height:1.05; margin:0; max-width:26ch; }
.mtd-h .em, .mtd-h .it{ font-style:italic; }
.mtd-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.mtd-col{ display:flex; flex-direction:column; }
.mtd-bar{ height:3px; width:100%; border-radius:2px; margin-bottom:16px; }
.mtd-top{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.mtd-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.mtd-num{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.08em; }
.mtd-name{ font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-.01em; line-height:1; margin:0; }
.mtd-desc{ font-size:var(--fs-testo-s); line-height:1.5; color:#5b5a54; margin:10px 0 0; }
.mtd-btn{ margin-top:22px; align-self:flex-start; font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-decoration:none; border:1px solid var(--rule); border-radius:7px; padding:11px 16px; display:inline-flex; gap:8px; align-items:center; transition:.16s; }
.mtd-btn.an:hover{ background:var(--magenta); color:#fff; border-color:var(--magenta); }
.mtd-btn.di:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.mtd-btn.am:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }
.mtd-btn.mi:hover{ background:var(--azure); color:var(--ink); border-color:var(--azure); }
.mtd-cta{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px; padding-top:30px; border-top:1px solid var(--rule); }
.mtd-promo{ display:flex; align-items:center; justify-content:space-between; gap:20px; text-decoration:none; color:inherit; background:#0c0c0d; border:1px solid #0c0c0d; border-radius:10px; padding:22px 24px; transition:.16s; }
.mtd-promo:hover{ background:#1b1b1d; border-color:#1b1b1d; }
.mtd-promo.ai{ background:linear-gradient(135deg,#155E76 0%,#45B5E5 100%); border-color:transparent; }
.mtd-promo.ai:hover{ background:linear-gradient(135deg,#185f78 0%,#5bbde8 100%); }
.mtd-pe{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:#b9b8b4; margin:0 0 6px; display:flex; align-items:center; gap:7px; }
.mtd-pt{ font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-.01em; margin:0; line-height:1.05; color:#fff; }
.mtd-pd{ font-size:var(--fs-testo-s); color:#cfcec9; margin:5px 0 0; max-width:34ch; }
.mtd-promo.ai .mtd-pe{ color:rgba(255,255,255,.82); } .mtd-promo.ai .mtd-pt{ color:#fff; } .mtd-promo.ai .mtd-pd{ color:rgba(255,255,255,.92); }
.mtd-pe .spark{ color:var(--yellow); }
.mtd-arrow{ font-family:var(--mono); font-size:var(--fs-lead); color:#cfcec9; flex:0 0 auto; }
.mtd-promo.ai .mtd-arrow{ color:#fff; }
.mtd-bar.an, .mtd-dot.an{ background:var(--magenta); } .mtd-bar.di, .mtd-dot.di{ background:var(--yellow); } .mtd-bar.am, .mtd-dot.am{ background:var(--teal); } .mtd-bar.mi, .mtd-dot.mi{ background:var(--azure); }
.mtd-num.an{ color:var(--magenta); } .mtd-num.di{ color:#b7860b; } .mtd-num.am{ color:var(--teal); } .mtd-num.mi{ color:var(--azure); }
@media (max-width:980px){ .mega--metodo .mtd-cols{ grid-template-columns:1fr 1fr; gap:24px; } .mega--metodo .mtd-cta{ grid-template-columns:1fr; } }
@media (max-width:600px){ .mega--metodo .mtd-cols{ grid-template-columns:1fr; } }

/* ---------- Firma d'autore — avatar-link riutilizzabile (komlab/btn-firma) ---------- */
.btn-firma{ display:inline-flex; align-items:center; gap:13px; margin-top:24px; text-decoration:none; color:inherit; width:max-content; max-width:100%; -webkit-tap-highlight-color:transparent; }
.btn-firma__ava{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; object-fit:cover; background:var(--soft); box-shadow:0 0 0 2px var(--paper), 0 0 0 3px rgba(229,20,123,.45); transition:box-shadow .25s ease, transform .25s ease; }
.btn-firma__txt{ display:flex; flex-direction:column; gap:2px; line-height:1.15; }
.btn-firma__by{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.btn-firma__name{ font-family:var(--display); font-size:var(--fs-titolo-s); letter-spacing:-.01em; color:var(--ink); display:inline-flex; align-items:center; gap:7px; }
.btn-firma__go{ font-family:var(--mono); font-size:var(--fs-meta); color:var(--magenta); transition:transform .25s ease; }
.btn-firma:hover .btn-firma__ava, .btn-firma:focus-visible .btn-firma__ava{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--magenta); transform:translateY(-1px); }
.btn-firma:hover .btn-firma__name{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(229,20,123,.45); }
.btn-firma:hover .btn-firma__go, .btn-firma:focus-visible .btn-firma__go{ transform:translateX(4px); }
.btn-firma:focus-visible{ outline:2px solid var(--magenta); outline-offset:4px; border-radius:10px; }
.btn-firma:focus:not(:focus-visible){ outline:none; }


/* ============================ Hero SOLUZIONI per obiettivo (porte 01–04) ============================
   Le pagine servizio ereditano il colore della loro «porta» (obiettivo), non della fase ADAM:
   01 Costruire marca e sito = magenta · 02 Far crescere il marketing = giallo · 03 Trovare nuovi clienti = teal · 04 Vendere di più online = azure.
   Uso: <section class="svc-hero obj obj-brand|obj-crescere|obj-clienti|obj-vendere"> con dentro
   il lockup .obj-side (slogan + numero) e l'evidenziato .hl-ink nell'H1. Niente crumb né tag. */
.svc-hero.obj{ position:relative; overflow:hidden; border-top:0; padding:96px 0 90px; color:var(--obj-ink,#1a1407); }
.svc-hero.obj > .wrap{ position:relative; z-index:2; }
.svc-hero.obj::before{ content:""; position:absolute; z-index:0; top:-30%; right:-10%; width:60%; aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:.4; background:radial-gradient(circle, rgba(255,255,255,.62), rgba(255,255,255,0) 64%); }
@media (prefers-reduced-motion:no-preference){ .svc-hero.obj::before{ animation:objGlow 18s ease-in-out infinite alternate; } }
@keyframes objGlow{ from{ transform:translate(0,0) scale(1); opacity:.32; } to{ transform:translate(-8%,12%) scale(1.18); opacity:.5; } }
.svc-hero.obj h1, .svc-hero.obj .wp-block-heading{ color:var(--obj-ink); max-width:62%; }
.svc-hero.obj h1 .it{ color:inherit; }
.svc-hero.obj .lead{ color:var(--obj-lead); }
.svc-hero.obj .crumb, .svc-hero.obj .tag{ display:none; } /* rimossi dal markup; safety per pattern non ancora rigenerati */
/* lockup slogan + numero della porta, a destra */
.svc-hero.obj .obj-side{ position:absolute; z-index:1; right:5%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; text-align:right; pointer-events:none; }
.svc-hero.obj .os-label{ font-family:var(--mono); font-size:var(--fs-link); font-weight:var(--fw-etichetta); letter-spacing:.15em; text-transform:uppercase; line-height:1.32; color:var(--obj-ink); margin:0 6px 12px 0; }
.svc-hero.obj .os-num{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(220px,26vw,420px); line-height:.78; color:var(--obj-ink); opacity:.14; letter-spacing:-0.04em; }
/* evidenziato «pennarello» invertito: fascia ad altezza fissa centrata sul testo (non tocca la riga sopra) */
.svc-hero.obj h1 .hl-ink, .svc-hero.obj h1 mark.hl, .svc-hero.obj .claim .hl-ink, .svc-hero.obj .claim mark.hl{ color:var(--obj-chip-txt); background-color:transparent; background-image:linear-gradient(var(--obj-chip),var(--obj-chip)); background-repeat:no-repeat; background-position:0 center; background-size:100% .9em; padding:0 .24em; margin:0 -.05em; border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.svc-hero.obj h1 .end-dot, .svc-hero.obj .claim .end-dot{ color:inherit !important; }
/* bottoni sul fondo pieno */
.svc-hero.obj .btn-primary, .svc-hero.obj .btn-primary .wp-block-button__link{ background:var(--obj-btn-bg); color:var(--obj-btn-txt); border-color:var(--obj-btn-bg); }
.svc-hero.obj .btn-primary:hover{ transform:translateY(-1px); }
.svc-hero.obj .btn-outline, .svc-hero.obj .btn-outline .wp-block-button__link{ background:transparent; color:var(--obj-ink); border-color:var(--obj-line); }
.svc-hero.obj .btn-outline:hover, .svc-hero.obj .btn-outline .wp-block-button__link:hover{ background:var(--obj-btn-bg); color:var(--obj-btn-txt); border-color:var(--obj-btn-bg); }
/* — varianti: una per porta — */
.svc-hero.obj-brand{ --obj:#E5147B; --obj-ink:#fff; --obj-lead:rgba(255,255,255,.94); --obj-chip:#fff; --obj-chip-txt:#c40e67; --obj-btn-bg:#fff; --obj-btn-txt:#c40e67; --obj-line:rgba(255,255,255,.62);
  background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.30), rgba(255,255,255,0) 46%), linear-gradient(135deg,#ff5cab 0%,#DB1173 52%,#a60d59 100%); }
.svc-hero.obj-crescere{ --obj:#F5B820; --obj-ink:#1a1407; --obj-lead:rgba(26,20,7,.8); --obj-chip:#1a1407; --obj-chip-txt:#F5B820; --obj-btn-bg:#1a1407; --obj-btn-txt:#F5B820; --obj-line:rgba(26,20,7,.46);
  background:radial-gradient(120% 130% at 90% 6%, rgba(255,255,255,.30), rgba(255,255,255,0) 48%), linear-gradient(180deg,#ffd451 0%,#F5B820 62%,#e9a800 100%); }
.svc-hero.obj-clienti{ --obj:#1C7A99; --obj-ink:#fff; --obj-lead:rgba(255,255,255,.92); --obj-chip:#fff; --obj-chip-txt:#155e76; --obj-btn-bg:#fff; --obj-btn-txt:#155e76; --obj-line:rgba(255,255,255,.6);
  background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.26), rgba(255,255,255,0) 46%), linear-gradient(135deg,#34a7cc 0%,#1C7A99 52%,#114f66 100%); }
.svc-hero.obj-vendere{ --obj:#45B5E5; --obj-ink:#08222e; --obj-lead:rgba(8,34,46,.82); --obj-chip:#08222e; --obj-chip-txt:#8ad9ff; --obj-btn-bg:#08222e; --obj-btn-txt:#8ad9ff; --obj-line:rgba(8,34,46,.5);
  background:radial-gradient(135% 120% at 12% -8%, rgba(255,255,255,.34), rgba(255,255,255,0) 46%), linear-gradient(135deg,#8ad4f5 0%,#45B5E5 52%,#2487b8 100%); }
@media (max-width:920px){
  .svc-hero.obj{ padding:64px 0 58px; }
  .svc-hero.obj h1, .svc-hero.obj .wp-block-heading{ max-width:100%; }
  .svc-hero.obj .obj-side{ position:static; transform:none; flex-direction:row; align-items:baseline; justify-content:space-between; max-width:1400px; margin:0 auto 10px; padding:0 var(--pad); }
  .svc-hero.obj .os-label{ margin:0; text-align:left; }
  .svc-hero.obj .os-num{ font-size:76px; line-height:1; opacity:.22; }
}


/* ===== ANIMAZIONI TITOLO · HERO (kom-nav.js: random negli hero obiettivo, fissa per pagina altrove) =====
   5 varianti sorteggiate: rise · blur · drop (per-parola), wipe (clip), marker (pennellata hl-ink).
   Solo con motion consentito; senza JS il titolo resta statico. */
@media (prefers-reduced-motion: no-preference){
  section[data-tanim] h1 .kta-w{ display:inline-block; }
  /* 1 · rise — le parole salgono una dopo l'altra */
  section[data-tanim="rise"] h1 .kta-w{ opacity:0; transform:translateY(.55em); animation:ktaRise 1.1s cubic-bezier(.2,.75,.25,1) forwards; animation-delay:calc(150ms + var(--kw)*95ms); }
  @keyframes ktaRise{ to{ opacity:1; transform:translateY(0); } }
  /* 2 · blur — messa a fuoco progressiva */
  section[data-tanim="blur"] h1 .kta-w{ opacity:0; filter:blur(10px); animation:ktaBlur 1.2s ease-out forwards; animation-delay:calc(130ms + var(--kw)*80ms); }
  @keyframes ktaBlur{ to{ opacity:1; filter:blur(0); } }
  /* 3 · drop — le parole cadono con un piccolo assestamento */
  section[data-tanim="drop"] h1 .kta-w{ opacity:0; transform:translateY(-.45em) rotate(-2.5deg); animation:ktaDrop .95s cubic-bezier(.3,1.45,.4,1) forwards; animation-delay:calc(130ms + var(--kw)*110ms); }
  @keyframes ktaDrop{ to{ opacity:1; transform:none; } }
  /* 4 · wipe — il titolo si svela da sinistra */
  section[data-tanim="wipe"] h1{ clip-path:inset(-6% 100% -6% -2%); animation:ktaWipe 1.6s cubic-bezier(.6,0,.2,1) .2s forwards; }
  @keyframes ktaWipe{ to{ clip-path:inset(-6% -4% -6% -2%); } }
  /* 5 · marker — titolo morbido, poi la fascia si «pennella» sull'evidenziato */
  .svc-hero.obj[data-tanim="marker"] h1{ opacity:0; animation:ktaFade .9s ease-out .15s forwards; }
  @keyframes ktaFade{ to{ opacity:1; } }
  .svc-hero.obj[data-tanim="marker"] h1 .hl-ink, .svc-hero.obj[data-tanim="marker"] h1 mark.hl{ background-size:0% .9em; color:var(--obj-ink); animation:ktaMark 1.3s cubic-bezier(.65,0,.25,1) 1s forwards; }
  @keyframes ktaMark{ 0%{ background-size:0% .9em; color:var(--obj-ink); } 45%{ color:var(--obj-ink); } 100%{ background-size:100% .9em; color:var(--obj-chip-txt); } }
  /* 6 · fog — le parole si mettono a fuoco in ordine sparso */
  section[data-tanim="fog"] h1 .kta-w{ opacity:0; filter:blur(14px); animation:ktaBlur 1.4s ease-out forwards; animation-delay:calc(150ms + var(--kr,.5)*1100ms); }
  /* 7 · glide — le parole si mettono a fuoco scivolando da sinistra */
  section[data-tanim="glide"] h1 .kta-w{ opacity:0; filter:blur(9px); transform:translateX(-.4em); animation:ktaGlide 1.15s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(130ms + var(--kw)*85ms); }
  @keyframes ktaGlide{ to{ opacity:1; filter:blur(0); transform:translateX(0); } }
}


/* ============================================================
   MEGA BLU AI — tutti i pannelli mega + dropdown prendono lo
   sfondo blu profondo del mega AI (deciso 2026-07-23).
   Per tornare ai pannelli bianchi: rimuovi questo blocco
   e il ritocco blu nel blocco HEADER NERO.
   ============================================================ */
:root{ --ai-bg:radial-gradient(50% 90% at 12% -10%, rgba(69,181,229,.22), transparent 60%), radial-gradient(48% 100% at 92% 120%, rgba(229,20,123,.18), transparent 60%), radial-gradient(120% 160% at 10% -25%, #17284c 0%, #0a0f1e 62%); }
.mega, .mega--ask, .mega--exp, .mega--metodo-color{ background:var(--ai-bg); border-top-color:rgba(255,255,255,.12); border-bottom-color:rgba(255,255,255,.12); color:#fff; }
/* — Obiettivi / colonne base — */
.mega .mega-h{ color:#fff; }
.mega-col li a{ color:rgba(255,255,255,.88); border-top-color:rgba(255,255,255,.14); }
.mega-col li a:hover{ color:#fff; }
.goal-col li a{ color:rgba(255,255,255,.88); }
.mega-promo{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.mega-promo:hover{ background:rgba(255,255,255,.1); }
.mega-promo-title{ color:#fff; }
.mega-promo p{ color:rgba(255,255,255,.7); }
.mega-cta-row{ border-top-color:rgba(255,255,255,.16); }
.mega-cta-row .ctr-l{ color:#fff; }
.mega-cta-row .ctr-r{ color:var(--blue-accent); }
.mega-cta-row:hover .ctr-r{ color:#fff; }
/* — Il Metodo (colonne fase) — */
.mega--metodo-color .mc-col{ border-left-color:rgba(255,255,255,.12); }
.mc-col h3 a{ color:#fff; }
.mc-desc{ color:rgba(255,255,255,.66); }
.mc-links a{ color:rgba(255,255,255,.88); }
.mc-side{ border-left-color:rgba(255,255,255,.12); }
.mc-mf{ border:1px solid rgba(255,255,255,.1); }
/* variante legacy mega-metodo (mega-phase) */
.mega .mega-phase{ border-top-color:rgba(255,255,255,.4); }
.mega .mega-phase .mp-name{ color:#fff; }
.mega .mega-phase .mp-tool{ color:rgba(255,255,255,.85); border-top-color:rgba(255,255,255,.14); }
.mega .mega-phase:hover .mp-go{ color:#fff; }
/* — Chiedi a noi — */
.ask-title{ color:#fff; }
.ask-sub{ color:rgba(255,255,255,.72); }
.ask-sede{ border-top-color:rgba(255,255,255,.16); }
.ask-sede-k{ color:#fff; }
.ask-sede-v{ color:rgba(255,255,255,.65); }
.ask-about{ color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.35); }
.ask-about:hover{ color:var(--blue-accent); border-color:var(--blue-accent); }
.ask-paths{ border-left-color:rgba(255,255,255,.14); }
.ask-card{ border:1px solid rgba(255,255,255,.1); }
.ask-contacts a{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.ask-contacts a span{ color:rgba(255,255,255,.6); }
.ask-contacts a:hover{ background:rgba(255,255,255,.12); border-color:var(--blue-accent); }
.ask-wolf{ border-left-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); }
.ask-wolf:hover{ background:rgba(255,255,255,.09); }
.ask-wolf-name{ color:#fff; }
.ask-wolf-role{ color:var(--blue-accent); }
.ask-wolf-txt{ color:rgba(255,255,255,.7); }
.ask-wolf-cta{ color:rgba(255,255,255,.9); }
.ask-wolf:hover .ask-wolf-cta{ color:var(--blue-accent); }
/* — Esperienza — */
.exp-title{ color:#fff; }
.exp-sub{ color:rgba(255,255,255,.72); }
.exp-chips span{ color:rgba(255,255,255,.88); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
.exp-card{ border:1px solid rgba(255,255,255,.1); }
/* — dropdown "Chi siamo" — */
.dropdown{ background:#0d1631; border-color:rgba(255,255,255,.14); }
.dropdown::before{ background:#0d1631; border-left-color:rgba(255,255,255,.14); border-top-color:rgba(255,255,255,.14); }
.dropdown a{ color:rgba(255,255,255,.9); }
.dropdown a:hover{ background:rgba(255,255,255,.07); color:#fff; }
/* mobile: voci del drawer leggibili sul blu */
@media (max-width:980px){ .nav .mega, .nav .dropdown{ background:transparent; }
  /* nel drawer i pannelli non sono a piena altezza: altezza libera, niente centraggio */
  .mega{ height:auto; align-items:flex-start; overflow:visible; }
  .mega > .wrap{ display:block; } }
/* — Obiettivi: titoli colonna — */
.goal-col .goal-h{ color:#fff; }
/* — Il Metodo (pannello attivo mega--metodo / mtd-*) — */
.mtd-ey{ color:rgba(255,255,255,.6); }
.mtd-h, .mtd-name{ color:#fff; }
.mtd-num.di{ color:var(--yellow); }
.mtd-desc{ color:rgba(255,255,255,.66); }
.mtd-btn{ color:#fff; border-color:rgba(255,255,255,.35); }
.mtd-cta{ border-top-color:rgba(255,255,255,.16); }
.mtd-promo{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.mtd-promo:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }

/* ============================================================
   MENU MONUMENTALE — scala S3 (deciso 2026-07-23, banco:
   Bozze/PROVA - Menu imponente + pulsante AI.html).
   Solo desktop; per tornare alla scala precedente rimuovi il blocco.
   ============================================================ */
@media (min-width:981px){
  header.site .nav{ padding:32px 0; column-gap:56px; }
  header.site .nav .logo{ height:74px; }
  .nav nav{ gap:42px; }
  .nav nav > a, .mega-trigger:not(.nav-ai), .drop-trigger{ font-size:15px; letter-spacing:.08em; }
  header.site .btn-primary{ font-size:13.5px; padding:15px 26px; }
  .topbar .tb-l, .topbar .tb-r{ font-size:var(--fs-meta); }
}
/* CTA "Prenota una call" rimossa dall'header (deciso 2026-07-23) — la regola nasconde il bottone su tutte le pagine; per ripristinarla elimina questa riga */
header.site .right .btn-primary{ display:none; }

/* ============================================================
   MEGA MENU — LEGGIBILITÀ (2026-07-25)
   Voci di 2° livello più grandi e chiaramente cliccabili (riga con
   separatore + freccia in hover), bottoni/CTA con corpo maggiore e
   contorno pieno. Vale sia per i prototipi sia per WordPress: unica
   fonte. Sta in fondo per vincere sulle regole per-pannello.
   ============================================================ */
/* 2° livello: colonne "Soluzioni" (.goal-col) e mega generico (.mega-col) */
.goal-col ul, .mega-col ul{ gap:0; }
.goal-col li a, .mega-col li a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:17px; font-weight:var(--fw-etichetta); line-height:1.3; color:rgba(255,255,255,.92);
  padding:11px 12px 11px 2px; border-top:1px solid rgba(255,255,255,.16); border-radius:7px;
  transition:background .15s ease, color .15s ease, padding .15s ease;
}
.goal-col li:last-child a, .mega-col li:last-child a{ border-bottom:1px solid rgba(255,255,255,.16); }
.goal-col li a::after, .mega-col li a::after{ content:"→"; font-size:15px; color:rgba(255,255,255,.5); opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease, color .15s ease; }
.goal-col li a:hover, .goal-col li a:focus-visible, .mega-col li a:hover, .mega-col li a:focus-visible{
  background:rgba(255,255,255,.10); color:#fff; padding-left:12px;
}
.goal-col li a:hover::after, .goal-col li a:focus-visible::after, .mega-col li a:hover::after, .mega-col li a:focus-visible::after{ opacity:1; transform:translateX(0); }
.goals-cols .goal-col:nth-child(1) li a:hover::after{ color:#ff6fb0; }
.goals-cols .goal-col:nth-child(2) li a:hover::after{ color:var(--yellow); }
.goals-cols .goal-col:nth-child(3) li a:hover::after{ color:#6fc6e0; }
.goals-cols .goal-col:nth-child(4) li a:hover::after{ color:var(--azure); }
/* intestazione di colonna: chiaramente un titolo, non un link */
.goal-col .goal-h, .mega-col .mega-h{ margin-bottom:14px; padding-bottom:10px; }
/* tendina compatta */
.dropdown a{ font-size:var(--fs-testo); font-weight:var(--fw-etichetta); padding:12px 16px; }
.dropdown a:hover{ background:rgba(255,255,255,.12); padding-left:20px; }
/* CTA e bottoni dei pannelli: corpo maggiore, peso etichetta */
.mega-manifesto .mm-cta, .mtd-btn, .exp-allbtn, .exp-card .exp-cta, .ask-card .ask-cta,
.ask-wolf-cta, .ask-about, .mega--ai .ai-cta, .mega-cta-row .ctr-r, .mc-btn, .mc-mf__btn, .mega-phase-btn{
  font-size:var(--fs-link); font-weight:var(--fw-etichetta); letter-spacing:.04em;
}
.mega-manifesto .mm-cta, .mtd-btn, .exp-allbtn{ padding:12px 20px; border-radius:999px; }
.mega-manifesto .mm-cta{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.42); color:#fff; }
.mega-manifesto:hover .mm-cta{ background:var(--magenta); border-color:var(--magenta); color:#fff; }
.mega-manifesto.mega-shopify .mm-cta{ background:rgba(126,217,87,.16); border-color:rgba(126,217,87,.55); color:#fff; }
.mega-manifesto.mega-shopify:hover .mm-cta{ background:#7ED957; border-color:#7ED957; color:#0f1922; }
.mtd-btn{ border-width:1px; }
/* riga CTA in fondo al mega: destra come vero bottone */
.mega-cta-row .ctr-r{ display:inline-flex; align-items:center; gap:8px; background:var(--magenta); color:#fff; padding:13px 22px; border-radius:999px; transition:background .18s ease, transform .18s ease; }
.mega-cta-row:hover .ctr-r{ background:#fff; color:var(--ink); transform:translateY(-2px); }
/* le due card promo (manifesto AI · partner Shopify) staccate dal fondo blu:
   superficie più chiara, contorno visibile, ombra — e accento azzurro al posto del verde (2026-07-25) */
.mega-promos{ margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.mega-promos .mega-manifesto{
  background:linear-gradient(180deg,#1d2748,#151d38);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 24px 46px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18);
  padding:24px 26px;
}
.mega-promos .mega-manifesto:hover{ background:linear-gradient(180deg,#222e55,#182042); border-color:rgba(255,255,255,.5); transform:translateY(-2px); box-shadow:0 30px 56px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.22); }
.mega-promos .mega-manifesto::after{ opacity:.42; }
.mega-promos .mega-manifesto.mega-shopify::before{ background:var(--azure); }
.mega-promos .mega-manifesto.mega-shopify::after{ background:radial-gradient(circle, rgba(69,181,229,.34), transparent 70%); }
.mega-promos .mega-manifesto.mega-shopify .mm-ey{ color:var(--azure); }
.mega-promos .mega-manifesto.mega-shopify .mm-t em{ color:#9BD9F3; }
.mega-manifesto.mega-shopify .mm-cta{ background:rgba(69,181,229,.20); border-color:rgba(69,181,229,.6); color:#fff; }
.mega-manifesto.mega-shopify:hover .mm-cta{ background:var(--azure); border-color:var(--azure); color:#0f1922; }
/* Il Metodo (.mc-links): stesso trattamento delle colonne "Soluzioni" —
   righe separate da filetto, hover con superficie chiara + freccia nel
   colore della fase; bottone "Vai alla fase" piu' distanziato (2026-07-25) */
.mc-links{ gap:0; margin:0 0 34px; }
.mc-links a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:17px; font-weight:var(--fw-etichetta); line-height:1.3;
  padding:11px 12px 11px 2px; border-top:1px solid rgba(255,255,255,.16); border-radius:7px;
  transition:background .15s ease, color .15s ease, padding .15s ease;
}
.mc-links li:last-child a{ border-bottom:1px solid rgba(255,255,255,.16); }
.mc-links a::after{ content:"→"; font-size:15px; color:rgba(255,255,255,.5); opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease, color .15s ease; }
.mc-links a:hover, .mc-links a:focus-visible{ background:rgba(255,255,255,.10); color:#fff; padding-left:12px; }
.mc-links a:hover::after, .mc-links a:focus-visible::after{ opacity:1; transform:translateX(0); color:var(--c); }
.mc-col h3{ margin-bottom:10px; }
.mc-btn{ margin-top:auto; }
@media (max-width:980px){
  .goal-col li a, .mega-col li a{ font-size:var(--fs-testo); padding:13px 8px 13px 0; }
  .mc-links a{ font-size:var(--fs-testo); padding:13px 8px 13px 0; }
  .mc-links{ margin-bottom:26px; }
  .mega-cta-row .ctr-r{ padding:12px 18px; }
}


/* ============================================================
   FILIGRANA ADAM nei mega (2026-07-25) — la lettera della fase come
   marchio d'acqua sotto ogni colonna: Jost 300 (token --adam, stessa
   eccezione dei glifi ADAM), bianco al 5%, tagliata dal bordo inferiore.
   Deve intravedersi: se serve più/meno presenza, agire solo su --adam-op.
   ============================================================ */
.goals-cols, .mtd-cols, .mc-grid{ --adam-op:.055; }
.goals-cols .goal-col, .mtd-cols .mtd-col, .mc-grid .mc-col{ position:relative; overflow:hidden; }
.goals-cols .goal-col > *, .mtd-cols .mtd-col > *, .mc-grid .mc-col > *{ position:relative; z-index:1; }
.goals-cols .goal-col::after, .mtd-cols .mtd-col::after, .mc-grid .mc-col::after{
  position:absolute; right:-.05em; bottom:-.20em;
  font-family:var(--adam); font-weight:var(--fw-sottile); font-size:clamp(104px,11vw,190px);
  line-height:.76; letter-spacing:-.04em; color:#fff; opacity:var(--adam-op);
  pointer-events:none; user-select:none; z-index:0;
  transition:opacity .3s ease, color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
/* hover di colonna = la lettera si accende (niente sfondi pesanti): unico segnale, delicato */
.goals-cols .goal-col:hover::after, .mtd-cols .mtd-col:hover::after, .mc-grid .mc-col:hover::after{
  opacity:calc(var(--adam-op) * 6.5); transform:translateY(-8px) scale(1.06);
}
.goals-cols .goal-col:nth-child(1):hover::after{ color:#ff6fb0; }
.goals-cols .goal-col:nth-child(2):hover::after{ color:var(--yellow); }
.goals-cols .goal-col:nth-child(3):hover::after{ color:#6fc6e0; }
.goals-cols .goal-col:nth-child(4):hover::after{ color:var(--azure); }
.goals-cols .goal-col:nth-child(1)::after, .mtd-cols .mtd-col:nth-child(1)::after, .mc-grid .mc-a::after{ content:"A"; }
.goals-cols .goal-col:nth-child(2)::after, .mtd-cols .mtd-col:nth-child(2)::after, .mc-grid .mc-d::after{ content:"D"; }
.goals-cols .goal-col:nth-child(3)::after, .mtd-cols .mtd-col:nth-child(3)::after, .mc-grid .mc-am::after{ content:"A"; }
.goals-cols .goal-col:nth-child(4)::after, .mtd-cols .mtd-col:nth-child(4)::after, .mc-grid .mc-m::after{ content:"M"; }
/* nelle colonne fase la lettera segue l'accento della fase, appena accennata */
.mtd-cols .mtd-col:nth-child(1)::after, .mc-grid .mc-a::after{ color:var(--magenta); opacity:calc(var(--adam-op) * 2.1); }
.mtd-cols .mtd-col:nth-child(2)::after, .mc-grid .mc-d::after{ color:var(--yellow); opacity:calc(var(--adam-op) * 1.9); }
.mtd-cols .mtd-col:nth-child(3)::after, .mc-grid .mc-am::after{ color:#6fc6e0; opacity:calc(var(--adam-op) * 2); }
.mtd-cols .mtd-col:nth-child(4)::after, .mc-grid .mc-m::after{ color:var(--azure); opacity:calc(var(--adam-op) * 2); }
.mtd-cols .mtd-col, .mc-grid .mc-col{ padding-bottom:8px; }
/* nelle colonne fase c'è il bottone in fondo: lettera più piccola, angolo basso-destra come le card ADAM */
.mc-grid .mc-col::after, .mtd-cols .mtd-col::after{ font-size:clamp(132px,13vw,232px); bottom:-.20em; right:-.04em; }
/* hover più marcato nelle colonne fase: la lettera si accende e cresce di più */
.mc-grid .mc-col:hover::after, .mtd-cols .mtd-col:hover::after{ opacity:calc(var(--adam-op) * 8); transform:translateY(-10px) scale(1.1); }
@media (max-width:980px){ .goals-cols, .mtd-cols, .mc-grid{ --adam-op:.04; } }


/* ============================================================
   LOGHI CLIENTI nel mega "Esperienza" (2026-07-25) — al posto dei chip
   testuali. I file vanno in NEGATIVO (bianco su trasparente): fondo scuro.
   Sorgente: opzione komlab_exp_loghi (ID media o URL) oppure
   /assets/clienti/mega/ del tema. Segnaposto attuali: wordmark bianchi.
   ============================================================ */
.exp-loghi{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; margin:4px 0 26px; }
.exp-logo{ height:26px; width:auto; max-width:132px; object-fit:contain; opacity:.72; filter:saturate(0); transition:opacity .2s ease, filter .2s ease, transform .2s ease; }
.exp-logo:hover{ opacity:1; filter:none; transform:translateY(-2px); }
@media (max-width:980px){ .exp-loghi{ gap:12px 20px; margin-bottom:20px; } .exp-logo{ height:22px; } }


/* ============================================================
   MEGA "CHIEDI A NOI" — FOTO DELLA SEDE (2026-07-25)
   La sede al NET Center come zoccolo del pannello: la foto e' nitida e
   riconoscibile nella metà bassa, il blu del sistema resta sopra dove
   c'e' il testo. Foto: komlab-theme/assets/net-center.jpg
   Per tornare al pannello senza foto: rimuovere questo blocco.
   ============================================================ */
.mega--ask{ isolation:isolate; overflow:hidden; }
.mega--ask > .wrap{ position:relative; z-index:2; }
.mega--ask::before, .mega--ask::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.mega--ask::before{ z-index:0; background:url(../net-center.jpg) 50% 56% / cover; filter:saturate(1.12) contrast(1.02) brightness(1.04);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 5%,#000 13%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 5%,#000 13%); }
/* velo: scuro solo sotto la barra nav, poi lascia respirare la foto della sede */
.mega--ask::after{ z-index:1; background:linear-gradient(180deg,rgba(8,12,40,.88) 3%,rgba(9,15,48,.30) 15%,rgba(10,18,56,.10) 34%,rgba(10,18,56,.14) 100%); }
/* la colonna di testo si porta il suo velo: foto leggibile, testo pure */
.mega--ask .ask-intro{ position:relative; }
.mega--ask .ask-intro::before{ content:""; position:absolute; z-index:-1; inset:-18px -70px -18px -50vw;
  background:linear-gradient(100deg,rgba(8,12,40,.92) 0%,rgba(8,12,40,.86) 62%,rgba(8,12,40,.46) 88%,rgba(8,12,40,0) 100%); }
/* contrasto del testo sulla foto: corpo più chiaro e titoli con ombra morbida */
.mega--ask .ask-title, .mega--ask .ask-wolf-name{ text-shadow:0 2px 18px rgba(6,10,32,.7); }
.mega--ask .ask-sub, .mega--ask .ask-sede-v, .mega--ask .ask-wolf-txt{ color:rgba(255,255,255,.88); }
.mega--ask .ask-card p{ color:rgba(255,255,255,.9); }
.mega--ask .ask-contacts a span{ color:rgba(255,255,255,.75); }
.mega--ask .ask-sede-k, .mega--ask .ask-about{ color:#fff; }
/* card percorso e Mr Wolf in vetro scuro: appoggiate sulla foto, non la coprono */
.mega--ask .ask-card .ask-t{ margin-top:0; }
.mega--ask .ask-card{ background:linear-gradient(150deg,rgba(11,15,44,.72),rgba(20,26,66,.58)); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); border:1px solid rgba(255,255,255,.2); }
.mega--ask .ask-wolf{ background:rgba(9,13,40,.48); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); }
.mega--ask .ask-wolf:hover{ background:rgba(12,18,52,.62); }
/* pannello a PIENA ALTEZZA (2026-08-21): la foto della sede riempie lo schermo, il contenuto sta al centro */
.mega--ask.open{ display:flex; }
.mega--ask{ align-items:stretch; }
.mega--ask .ask-grid{ width:100%; align-items:stretch; }
.mega--ask .ask-intro{ display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,7vh,96px) 44px clamp(40px,7vh,96px) 0; }
.mega--ask .ask-paths{ justify-content:center; padding:clamp(40px,7vh,96px) 38px; }
.mega--ask .ask-wolf{ justify-content:center; padding:clamp(40px,7vh,96px) 34px; }
.mega--ask .ask-title{ font-size:clamp(var(--fs-titolo),3.4vw,var(--fs-titolo-l)); }
.mega--ask .ask-sub{ font-size:var(--fs-lead); line-height:1.55; }
.mega--ask .ask-wolf-txt{ margin:0 0 auto; }
@media (max-width:980px){
  .mega--ask::before{ background-position:50% 62%; -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 16%); mask-image:linear-gradient(180deg,transparent 2%,#000 16%); }
  .mega--ask .ask-intro::before{ inset:-18px -24px -18px -24px; background:linear-gradient(180deg,rgba(8,12,40,.9),rgba(8,12,40,.72)); }
  .mega--ask{ height:auto; max-height:calc(100svh - var(--header-h,90px)); }
  .mega--ask > .wrap{ align-items:flex-start; }  .mega--ask .ask-intro, .mega--ask .ask-paths, .mega--ask .ask-wolf{ padding:30px 0; }
  .mega--ask .ask-sub{ font-size:var(--fs-testo); }
}


/* ============================================================
   HERO FASI ADAM — colonna servizi a destra (2026-07-25)
   Distingue le 4 pagine ADAM dalle pagine servizio: a sinistra il
   discorso della fase, a destra l'elenco dei servizi collegati con lo
   stesso trattamento del mega menu (righe separate + freccia in hover).
   Markup: .wrap > .ph-cols > (.ph-main | .ph-svc con .ph-svc-list)
   ============================================================ */
.svc-hero.ph{ --pht:#fff; --phl:rgba(255,255,255,.92); --phm:rgba(255,255,255,.66); --phr:rgba(255,255,255,.2); }
.svc-hero.ph-disegna{ --pht:#1a1407; --phl:rgba(26,20,7,.9); --phm:rgba(26,20,7,.6); --phr:rgba(26,20,7,.22); }
.svc-hero.ph .ph-cols{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:clamp(30px,4.6vw,68px); align-items:start; }
.svc-hero.ph .ph-main > *:first-child{ margin-top:0; }
.svc-hero.ph .ph-svc{ margin-top:6px; padding:24px 22px 22px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid var(--phr); backdrop-filter:blur(8px) saturate(1.05); -webkit-backdrop-filter:blur(8px) saturate(1.05); }
.svc-hero.ph-disegna .ph-svc{ background:rgba(255,255,255,.24); }
.svc-hero.ph .ph-svc-h{ margin:0 0 14px; font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.14em; text-transform:uppercase; color:var(--phm); }
.svc-hero.ph .ph-svc-list{ list-style:none; margin:0; padding:0; }
.svc-hero.ph .ph-svc-list li{ margin:0; }
.svc-hero.ph .ph-svc-list li a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:17px; font-weight:var(--fw-etichetta); line-height:1.3; color:var(--phl); text-decoration:none;
  padding:11px 12px 11px 2px; border-top:1px solid var(--phr); border-radius:7px;
  transition:background .15s ease, color .15s ease, padding .15s ease;
}
.svc-hero.ph .ph-svc-list li:last-child a{ border-bottom:1px solid var(--phr); }
.svc-hero.ph .ph-svc-list li a::after{ content:"\2192"; font-size:15px; color:var(--phm); opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease; }
.svc-hero.ph .ph-svc-list li a:hover, .svc-hero.ph .ph-svc-list li a:focus-visible{ background:rgba(255,255,255,.14); color:var(--pht); padding-left:12px; }
.svc-hero.ph-disegna .ph-svc-list li a:hover, .svc-hero.ph-disegna .ph-svc-list li a:focus-visible{ background:rgba(255,255,255,.5); }
.svc-hero.ph .ph-svc-list li a:hover::after, .svc-hero.ph .ph-svc-list li a:focus-visible::after{ opacity:1; transform:translateX(0); }
.svc-hero.ph .ph-svc-note{ margin:16px 0 0; font-size:var(--fs-testo-s); line-height:1.5; color:var(--phm); }
/* il glifo gigante resta dietro: nell'hero a due colonne si sposta a sinistra della lista */
.svc-hero.ph:has(.ph-cols)::after{ right:auto; left:44%; opacity:.1; }
@media (max-width:980px){
  .svc-hero.ph .ph-cols{ grid-template-columns:1fr; gap:30px; }
  .svc-hero.ph:has(.ph-cols)::after{ left:auto; right:-2%; }
}

/* mega titolo della fase, centrato sopra le due colonne — Libre Franklin GROSSO e imponente (2026-07-27, prima Jost 300) */
.svc-hero.ph .ph-word{ margin:clamp(30px,4.4vw,58px) 0 clamp(38px,5.4vw,72px); text-align:center; font-family:var(--display); font-weight:var(--fw-titolo); font-size:clamp(64px,11.8vw,196px); line-height:.94; letter-spacing:-0.025em; text-transform:uppercase; color:var(--pht); }
.svc-hero.ph:has(.ph-word)::after{ opacity:.07; }
/* guardia anti-overflow: alcune pagine hanno un font-size inline (220px) salvato nel blocco — su schermi stretti va ricondotto alla scala fluida */
@media (max-width:1100px){ .svc-hero.ph .ph-word{ font-size:clamp(40px,12.4vw,140px)!important; } }
@media (max-width:680px){ .svc-hero.ph .ph-word{ margin:24px 0 30px; letter-spacing:-0.015em; font-size:clamp(38px,12.8vw,84px)!important; } }

/* nome del servizio come titolo centrale negli hero "porta" (2026-07-25):
   stesso ruolo del mega titolo delle fasi ADAM, ma in Libre Franklin light
   (Jost resta la firma delle sole pagine ADAM). Markup: <p class="obj-word"> in cima al .wrap */
.svc-hero.obj .obj-word{ margin:0 0 clamp(30px,4.4vw,58px); text-align:center; font-family:var(--display); font-weight:var(--fw-sottile); font-size:clamp(32px,4.8vw,68px); line-height:1.05; letter-spacing:.09em; text-transform:uppercase; color:var(--obj-ink); }
@media (max-width:920px){ .svc-hero.obj .obj-word{ margin-bottom:26px; letter-spacing:.06em; text-align:left; } }

/* ============================================================
   HERO SERVIZIO A SCHERMO PIENO (2026-07-25)
   Il nome del servizio E' l'h1, imponente e centrato; sotto il claim e il
   lead; la lettera della fase ADAM fa da filigrana (come nel mega) e una
   pillola in alto rimanda alla fase. Niente lockup numerico, niente colonne.
   Uso: <section class="svc-hero obj obj-<porta> is-full obj-gly-a|d|m">
   ============================================================ */
.svc-hero.obj.is-full{ display:flex; align-items:center; min-height:calc(100svh - var(--header-h,90px)); padding:clamp(46px,7vh,92px) 0; text-align:center; }
.svc-hero.obj.is-full > .wrap{ width:100%; }
.svc-hero.obj.is-full h1, .svc-hero.obj.is-full .wp-block-heading{ max-width:none; margin:0 auto; font-weight:var(--fw-sottile); font-size:clamp(38px,6.4vw,104px); line-height:1.02; letter-spacing:.02em; text-transform:uppercase; text-wrap:balance; }
.svc-hero.obj.is-full .claim{ margin:clamp(20px,2.8vw,36px) auto 0; max-width:26ch; font-family:var(--display); font-weight:var(--fw-titolo); font-size:clamp(23px,3.1vw,42px); line-height:1.14; letter-spacing:-.01em; color:var(--obj-ink); }
.svc-hero.obj.is-full .lead{ margin:clamp(18px,2.4vw,30px) auto 0; max-width:62ch; }
.svc-hero.obj.is-full .ctas{ justify-content:center; margin-top:clamp(24px,3.2vw,40px); }
.svc-hero.obj .obj-phase{ display:inline-flex; align-items:center; gap:10px; margin:0 0 clamp(22px,3vw,36px); padding:10px 18px; border-radius:999px; border:1px solid var(--obj-line); color:var(--obj-ink); text-decoration:none; font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.1em; text-transform:uppercase; transition:background .18s ease, color .18s ease, transform .18s ease; }
.svc-hero.obj .obj-phase-w{ margin:0 0 clamp(22px,3vw,36px); }
.svc-hero.obj .obj-phase-w .obj-phase{ margin:0; }
.svc-hero.obj .obj-phase .op-k{ opacity:.62; }
.svc-hero.obj .obj-phase .op-go{ font-size:var(--fs-link); }
.svc-hero.obj .obj-phase:hover{ background:var(--obj-btn-bg); color:var(--obj-btn-txt); border-color:var(--obj-btn-bg); transform:translateY(-2px); }
.svc-hero.obj .obj-phase:hover .op-k{ opacity:.78; }
.svc-hero.obj.is-full::after{ content:var(--gly,""); position:absolute; z-index:0; right:5%; top:6%; left:auto; bottom:auto; transform:none; font-family:var(--adam); font-weight:var(--fw-sottile); font-size:min(34vh,22vw); line-height:.8; color:var(--obj-ink); opacity:.13; pointer-events:none; }
.obj-gly-a{ --gly:"A"; } .obj-gly-d{ --gly:"D"; } .obj-gly-m{ --gly:"M"; }
@media (max-width:920px){
  .svc-hero.obj.is-full{ min-height:0; text-align:left; }
  .svc-hero.obj.is-full h1, .svc-hero.obj.is-full .wp-block-heading{ margin:0; }
  .svc-hero.obj.is-full .claim, .svc-hero.obj.is-full .lead{ margin-left:0; }
  .svc-hero.obj.is-full .ctas{ justify-content:flex-start; }
  .svc-hero.obj.is-full::after{ font-size:44vw; opacity:.1; right:-2%; top:2%; }
}


/* ============================================================
   HERO SERVIZIO «INCHIOSTRO» (deciso 2026-07-26, banco: WORK/Bozze/PROVA - Hero SEO frasi protagoniste.html)
   La FRASE CHIAVE è protagonista: titolone light con poche parole in bold
   sottolineate, nome del servizio come occhiello, lead grande, CTA fisse
   (contatti + portfolio) e pillola della fase ADAM relegata in fondo, muta.
   Fondo nero pieno (massimo contrasto sulle parole) + alone del colore della
   «porta» e lettera della fase in filigrana.
   Uso: <section class="svc-hero srv srv-brand|srv-crescere|srv-clienti|srv-vendere obj-gly-a|d|m">
        .wrap > p.srv-kick · h1 (con <strong> sulle parole forti) · p.lead · .ctas · .srv-foot > p.srv-phase
   ============================================================ */
.svc-hero.srv{ --srv-glow:rgba(69,181,229,.42); position:relative; overflow:hidden; border-top:0; display:flex; align-items:center; min-height:calc(100svh - var(--header-h,90px)); padding:clamp(64px,9vh,120px) 0 0; background:linear-gradient(158deg,#08090c 0%,#0d1330 46%,#122048 100%); color:#fff; }
.svc-hero.srv > .wrap{ width:100%; position:relative; z-index:2; }
.svc-hero.srv::before{ content:""; position:absolute; z-index:0; width:min(70vw,900px); height:min(70vw,900px); right:-14%; top:-30%; border-radius:50%; background:radial-gradient(closest-side,var(--srv-glow),transparent 72%); }
.svc-hero.srv::after{ content:var(--gly,""); position:absolute; z-index:0; right:3%; bottom:-8%; font-family:var(--adam); font-weight:var(--fw-sottile); font-size:52vh; line-height:.8; color:var(--gly-c,rgba(255,255,255,.07)); pointer-events:none; }
.svc-hero.srv .srv-kick{ margin:0 0 clamp(22px,3vw,34px); font-family:var(--sans); font-weight:var(--fw-etichetta); font-size:19px; letter-spacing:.22em; text-transform:uppercase; color:#fff; }
.svc-hero.srv h1, .svc-hero.srv .wp-block-heading{ margin:0; max-width:none; font-family:var(--display); font-weight:var(--fw-sottile); font-size:clamp(40px,6.6vw,108px); line-height:1; letter-spacing:-0.015em; color:#fff; text-wrap:balance; }
.svc-hero.srv h1 :is(strong,b){ position:relative; font-weight:var(--fw-display); color:#fff; }
.svc-hero.srv h1 :is(strong,b)::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.1em; background:var(--srv-line,#F5B820); }
.svc-hero.srv h1 .it{ font-style:italic; }
.svc-hero.srv h1 .end-dot{ color:var(--srv-line,#F5B820) !important; }
.svc-hero.srv .lead{ margin:clamp(26px,3.4vw,42px) 0 0; font-size:clamp(var(--fs-lead),1.6vw,24px); line-height:1.6; max-width:62ch; color:rgba(255,255,255,.88); text-wrap:pretty; }
.svc-hero.srv .ctas{ display:flex; flex-wrap:wrap; gap:14px; margin:clamp(30px,3.6vw,44px) 0 0; }
.svc-hero.srv .btn-primary, .svc-hero.srv .btn-primary .wp-block-button__link{ background:#fff; color:#0e0e10; border-color:#fff; }
.svc-hero.srv .btn-primary:hover, .svc-hero.srv .btn-primary .wp-block-button__link:hover{ background:var(--srv,#45B5E5); border-color:var(--srv,#45B5E5); color:#0e0e10; }
.svc-hero.srv .btn-outline, .svc-hero.srv .btn-outline .wp-block-button__link{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.svc-hero.srv .btn-outline:hover, .svc-hero.srv .btn-outline .wp-block-button__link:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.svc-hero.srv .srv-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin:clamp(46px,6vh,86px) 0 0; padding:18px 0 clamp(26px,3vh,40px); border-top:1px solid rgba(255,255,255,.16); }
.svc-hero.srv .srv-note{ margin:0; font-size:var(--fs-meta); color:rgba(255,255,255,.7); }
.svc-hero.srv .srv-phase{ margin:0 0 0 auto; flex:1 1 260px; display:flex; align-items:center; gap:16px; justify-content:flex-end; font-family:var(--sans); font-weight:var(--fw-etichetta); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; }
.svc-hero.srv .srv-phase::before{ content:""; flex:1 1 auto; min-width:40px; height:1px; background:linear-gradient(90deg,rgba(255,255,255,0),var(--srv-line,rgba(255,255,255,.6))); }
.svc-hero.srv .srv-phase a{ color:rgba(255,255,255,.92); text-decoration:none; transition:color .18s ease; white-space:nowrap; }
.svc-hero.srv .srv-phase a:hover{ color:var(--srv-line,#fff); }
.svc-hero.srv .srv-phase .k{ opacity:.72; font-weight:var(--fw-testo); }
/* lettera della fase in filigrana, nel colore della fase: Analyze magenta · Design giallo · Amplify teal · Measure azure */
.srv-analizza{ --gly:"A"; --gly-c:rgba(229,20,123,.24); --gly-hi:rgba(229,20,123,.52); --srv-line:#E5147B; }
.srv-disegna{ --gly:"D"; --gly-c:rgba(245,184,32,.20); --gly-hi:rgba(245,184,32,.46); --srv-line:#F5B820; }
.srv-amplia{ --gly:"A"; --gly-c:rgba(28,122,153,.42); --gly-hi:rgba(79,195,220,.62); --srv-line:#2FA3C7; }
.srv-misura{ --gly:"M"; --gly-c:rgba(69,181,229,.24); --gly-hi:rgba(69,181,229,.54); --srv-line:#45B5E5; }
/* la lettera reagisce SOLO al passaggio sul link della fase (2026-07-28) */
.svc-hero.srv::after{ transform-origin:100% 100%; transition:color .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.svc-hero.srv:has(.srv-phase a:hover)::after{ color:var(--gly-hi,var(--gly-c)); transform:translateY(-2.6vh) scale(1.07); filter:drop-shadow(0 0 42px var(--gly-c)); }
.svc-hero.srv .srv-phase a:hover{ color:var(--srv-line,#fff); }
@media (prefers-reduced-motion:reduce){ .svc-hero.srv::after, .svc-hero.srv:has(.srv-phase a:hover)::after{ transform:none; transition:color .3s ease; } }
.srv-brand{ --srv:#FF4C9E; }
.srv-crescere{ --srv:#F5B820; }
.srv-clienti{ --srv:#4FC3DC; }
.srv-vendere{ --srv:#45B5E5; }
@media (max-width:820px){
  .svc-hero.srv{ min-height:0; padding-top:56px; }
  .svc-hero.srv .srv-foot{ margin-top:38px; }
  .svc-hero.srv::after{ font-size:44vw; bottom:-4%; }
}


/* ============================================================
   SCHEDA "I SERVIZI DELLA FASE" · blu scuro come il mega menu (2026-07-27)
   Solo il box .ph-svc: l'hero resta del colore della sua fase. Vale per
   tutte e 4 le fasi; dentro il box i testi sono bianchi (anche su Design,
   dove l'hero e' giallo con testo scuro). In fondo al file per vincere
   sulle regole per-fase piu' sopra.
   ============================================================ */
.svc-hero.ph .ph-svc, .svc-hero.ph-disegna .ph-svc{
  background:#0d1631; border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 48px -28px rgba(13,22,49,.55), inset 3px 0 0 var(--phacc,#fff);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  --pht:#fff; --phl:rgba(255,255,255,.92); --phm:rgba(255,255,255,.62); --phr:rgba(255,255,255,.14);
}
.svc-hero.ph-analizza .ph-svc{ --phacc:#FF6FB0; }
.svc-hero.ph-disegna .ph-svc{ --phacc:#F5B820; }
.svc-hero.ph-amplia .ph-svc{ --phacc:#3fb6da; }
.svc-hero.ph-misura .ph-svc{ --phacc:#7fcef2; }
.svc-hero.ph .ph-svc-h{ color:var(--phm); }
.svc-hero.ph .ph-svc-list li a{ color:var(--phl); }
.svc-hero.ph .ph-svc-list li a:hover, .svc-hero.ph .ph-svc-list li a:focus-visible,
.svc-hero.ph-disegna .ph-svc-list li a:hover, .svc-hero.ph-disegna .ph-svc-list li a:focus-visible{ background:rgba(255,255,255,.1); color:#fff; }
.svc-hero.ph .ph-svc-note{ color:var(--phm); }


/* ============================================================
   MEGA A PIENA ALTEZZA — densita' verticale (2026-08-21)
   I pannelli sono alti 100svh: qui li facciamo STARE nello schermo
   invece di farli scorrere. Spaziature legate all'altezza (vh), non fisse.
   In fondo al file per vincere sulle regole per-pannello.
   ============================================================ */
.mega-goals > .wrap, .mega-inner{ padding-top:clamp(20px,3vh,44px); padding-bottom:clamp(16px,2.4vh,32px); }
.goals-cols{ gap:clamp(20px,2.4vw,36px) clamp(24px,2.6vw,36px); }
.goal-col .goal-h, .mega-col .mega-h{ margin-bottom:clamp(8px,1.4vh,14px); padding-bottom:clamp(6px,1vh,10px); }
.goal-col li a, .mega-col li a{ padding-top:clamp(6px,1.05vh,11px); padding-bottom:clamp(6px,1.05vh,11px); }
.mega-promos{ margin-top:clamp(16px,2.4vh,30px); padding-top:clamp(14px,2vh,26px); }
.mega-promos .mega-manifesto{ padding:clamp(14px,2vh,24px) clamp(18px,2vw,26px); gap:clamp(6px,1vh,12px); }
.mega-cta-row{ margin-top:clamp(14px,2vh,28px); padding-top:clamp(12px,1.8vh,24px); padding-bottom:clamp(12px,1.8vh,24px); }
/* schermi bassi: cade la seconda card promo e i titoli colonna si stringono */
@media (min-width:981px) and (max-height:820px){
  .goal-col .goal-h, .mega-col .mega-h{ font-size:var(--fs-testo); }
  .mega-promos .mega-manifesto .mm-t{ font-size:var(--fs-testo); }
  .mega-promos .mega-manifesto p{ display:none; }
}


/* ============================================================
   MEGA "CHIEDI A NOI" — FOTO IN BIANCO E NERO + CTA A PULSANTE (2026-08-23)
   La foto della sede resta come sfondo ma desaturata: il colore lo portano
   solo i pulsanti. Le CTA delle card diventano pastiglie piene magenta
   (Mr Wolf in contorno bianco) con area di tocco >=44px.
   ============================================================ */
.mega--ask::before{ filter:grayscale(1) contrast(1.08) brightness(.9); }
.mega--ask .ask-card .ask-cta, .mega--ask .ask-wolf-cta{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:12px 22px; border-radius:999px;
  font-size:var(--fs-link); font-weight:var(--fw-etichetta); letter-spacing:.02em; line-height:1;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.mega--ask .ask-card .ask-cta{ background:var(--magenta); color:#fff; border:1px solid var(--magenta);
  box-shadow:0 14px 30px -16px rgba(229,20,123,.9); }
.mega--ask .ask-card:hover .ask-cta{ background:#ff2a91; border-color:#ff2a91; transform:translateY(-1px);
  box-shadow:0 20px 40px -16px rgba(229,20,123,.95); }
.mega--ask .ask-wolf-cta{ align-self:flex-start; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); }
.mega--ask .ask-wolf:hover .ask-wolf-cta{ background:#fff; color:#0b1a3a; border-color:#fff; transform:translateY(-1px); }
/* le card si leggono come bottoni grandi: bordo che si accende e sollevamento */
.mega--ask .ask-card{ cursor:pointer; }
.mega--ask .ask-card:hover{ border-color:rgba(255,255,255,.55); transform:translateY(-4px);
  box-shadow:0 30px 56px -24px rgba(4,8,26,.95); }
.mega--ask .ask-about{ display:inline-flex; align-items:center; min-height:44px; }
@media (prefers-reduced-motion:reduce){
  .mega--ask .ask-card:hover, .mega--ask .ask-card:hover .ask-cta, .mega--ask .ask-wolf:hover .ask-wolf-cta{ transform:none; } }

/* ============================================================
   CTA MEGA MENU — PASTIGLIE (2026-08-23)
   Estende la forma "pastiglia" del mega Chiedi a noi a tutti i pannelli:
   stessa geometria (44px, raggio pieno); riempimento MAGENTA solo dove la CTA
   era un semplice link-freccia neutro (AI, manifesto, riga CTA finale).
   Restano coi loro colori: bottoni per fase (.mtd-btn/.mc-btn/.mega-phase-btn),
   card portfolio (hover giallo/teal/azure) e variante Shopify (verde).
   ============================================================ */
.mega--ai .ai-card .ai-cta, .mega-manifesto .mm-cta, .mega-cta-row .ctr-r,
.exp-card .exp-cta, .exp-allbtn, .mtd-btn, .mc-btn, .mc-mf__btn, .mega-phase-btn{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:12px 22px; border-radius:999px;
  line-height:1; white-space:nowrap; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.mega--ai .ai-card .ai-cta, .mega-manifesto .mm-cta, .mega-cta-row .ctr-r{
  background:var(--magenta); border:1px solid var(--magenta); color:#fff;
  box-shadow:0 14px 30px -16px rgba(229,20,123,.9); }
.mega--ai .ai-card:hover .ai-cta, .mega--ai .ai-card:focus-visible .ai-cta,
.mega-manifesto:hover .mm-cta, .mega-cta-row:hover .ctr-r{
  background:#ff2a91; border-color:#ff2a91; color:#fff; transform:translateY(-1px);
  box-shadow:0 20px 40px -16px rgba(229,20,123,.95); }
.mega-cta-row .ctr-r{ align-self:center; }
@media (prefers-reduced-motion:reduce){
  .mega--ai .ai-card:hover .ai-cta, .mega-manifesto:hover .mm-cta, .mega-cta-row:hover .ctr-r{ transform:none; } }

/* pastiglie: mai a tutta larghezza dentro i genitori flex-column (2026-08-23) */
.mega--ai .ai-card .ai-cta, .mega-manifesto .mm-cta, .mega-cta-row .ctr-r,
.exp-card .exp-cta, .mega--ask .ask-card .ask-cta, .mega--ask .ask-wolf-cta, .mega--ask .ask-about{
  align-self:flex-start; width:fit-content; }

/* ============================================================
   MEGA «SOLUZIONI» — titoli colonna piu' leggibili, palette coerente
   (deciso 2026-08-23): le intestazioni sopra le liste sono titoli veri;
   la card Shopify esce dal verde (fuori brand) e passa ad azzurro+magenta;
   le lettere ADAM di sfondo un filo piu' accese.
   ============================================================ */
.goal-col .goal-h, .mega-col .mega-h{ font-size:clamp(19px,1.45vw,26px); font-weight:var(--fw-display); font-variation-settings:'opsz' 56,'wght' 800; letter-spacing:-0.022em; line-height:1.1; color:#fff; margin-bottom:clamp(10px,1.6vh,18px); padding-bottom:clamp(8px,1.2vh,12px); }
.goal-col .goal-h::after{ height:4px; width:56px; }
@media (min-width:981px) and (max-height:820px){ .goal-col .goal-h, .mega-col .mega-h{ font-size:clamp(18px,1.35vw,22px); } }
.mega-manifesto.mega-shopify::before{ background:var(--azure); }
.mega-manifesto.mega-shopify::after{ background:radial-gradient(circle, rgba(69,181,229,.34), transparent 70%); }
.mega-manifesto.mega-shopify .mm-ey{ color:var(--azure); }
.mega-manifesto.mega-shopify .mm-t em{ color:#9BD9F3; }
.mega-manifesto.mega-shopify .mm-cta{ background:var(--magenta); border-color:var(--magenta); color:#fff; box-shadow:0 14px 30px -16px rgba(229,20,123,.9); }
.mega-manifesto.mega-shopify:hover .mm-cta{ background:#ff2a91; border-color:#ff2a91; color:#fff; box-shadow:0 20px 40px -16px rgba(229,20,123,.95); }
.goals-cols, .mtd-cols, .mc-grid{ --adam-op:.10; }

/* ============================================================
   MEGA «ESPERIENZA» — titolone monumentale a tutta pagina sopra le
   carte + CTA magenta a pastiglia come nel pannello «Chiedi a noi»
   (deciso 2026-08-23)
   ============================================================ */
.mega--exp .exp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.7vw,26px); padding-block:clamp(26px,4.4vh,54px) clamp(24px,3.6vh,48px); padding-inline:var(--pad); align-items:stretch; }
.mega--exp .exp-intro{ grid-column:1/-1; padding:0; }
.mega--exp .exp-title{ font-size:clamp(40px,5.6vw,96px); font-weight:var(--fw-display); line-height:.96; letter-spacing:-0.035em; text-wrap:balance; }
.mega--exp .exp-sub{ font-size:var(--fs-lead); max-width:52ch; margin:clamp(10px,1.5vh,20px) 0 clamp(14px,2vh,24px); }
.mega--exp .exp-chips{ margin-bottom:clamp(12px,1.8vh,22px); }
.mega--exp .exp-allbtn{ margin-top:0; background:var(--magenta); border:1px solid var(--magenta); color:#fff; box-shadow:0 14px 30px -16px rgba(229,20,123,.9); }
.mega--exp .exp-allbtn:hover{ background:#ff2a91; border-color:#ff2a91; color:#fff; filter:none; transform:translateY(-1px); box-shadow:0 20px 40px -16px rgba(229,20,123,.95); }
/* 2026-09-14 — i due bottoni dell'intro «Esperienza» (Tutti i progetti + Scopri chi siamo)
   stavano attaccati: ora vivono in .exp-btns, una riga con gap che va a capo se serve. */
.exp-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:auto; align-self:flex-start; }
.mega--exp .exp-btns{ margin-top:0; }
.exp-btns .exp-allbtn{ margin-top:0; align-self:auto; }
/* rete di sicurezza se il markup non è ancora aggiornato (JS in cache) */
.exp-intro > .exp-allbtn + .exp-allbtn{ margin-top:12px; }
.mega--exp .exp-card .exp-cta{ background:var(--magenta); border:1px solid var(--magenta); color:#fff; box-shadow:0 14px 30px -16px rgba(229,20,123,.9); }
.mega--exp .exp-card:hover .exp-cta, .mega--exp .exp-card.b2c:hover .exp-cta, .mega--exp .exp-card.b2b:hover .exp-cta, .mega--exp .exp-card.retail:hover .exp-cta{ background:#ff2a91; border-color:#ff2a91; color:#fff; transform:translateY(-1px); box-shadow:0 20px 40px -16px rgba(229,20,123,.95); }
@media (min-width:981px) and (max-height:820px){ .mega--exp .exp-title{ font-size:clamp(32px,3.8vw,58px); } .mega--exp .exp-sub{ font-size:var(--fs-testo); } .mega--exp .exp-card{ padding:22px 20px; } }
@media (max-width:980px){ .mega--exp .exp-grid{ grid-template-columns:1fr 1fr; } .mega--exp .exp-title{ font-size:clamp(32px,7vw,52px); } }
@media (prefers-reduced-motion:reduce){ .mega--exp .exp-allbtn:hover, .mega--exp .exp-card:hover .exp-cta{ transform:none; } }
.goals-cols .goal-col:hover::after, .mtd-cols .mtd-col:hover::after, .mc-grid .mc-col:hover::after{ opacity:calc(var(--adam-op) * 3.2); }


/* ============================================================
   SELETTORE LINGUA — pastiglia segmentata IT|EN (2026-09-14)
   Prima: testo minuto in coda alla topbar («IT · EN»), stessa resa grafica di
   email e telefono — invisibile. Ora: pastiglia nella riga del menu, a destra,
   nel posto lasciato libero dalla CTA («header.site .right .btn-primary» è
   display:none). Il segmento pieno è la lingua che stai leggendo, l'altro è il
   link alla traduzione. Markup in inc/komlab-lingue.php.
   ============================================================ */
.lang { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--rule); border-radius:999px; line-height:1; }
.lang .lang__on, .lang .lang__off { display:block; padding:7px 13px; border-radius:999px; font-family:var(--mono); font-size:var(--fs-meta); font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.lang .lang__on { background:var(--ink); color:var(--paper); }
.lang .lang__off { color:var(--mute); transition:background .18s ease, color .18s ease; }
.lang .lang__off:hover { background:var(--soft); color:var(--ink); }
/* header nero */
header.site .lang { border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.07); }
header.site .lang .lang__on { background:#f3f1ec; color:#0a0f1e; }
header.site .lang .lang__off { color:#f3f1ec; opacity:.85; }
header.site .lang .lang__off:hover { background:rgba(255,255,255,.20); color:#fff; opacity:1; }
@media (max-width:620px){
  .lang .lang__on, .lang .lang__off { padding:6px 10px; letter-spacing:.08em; }
}
/* Laptop stretti (981–1320px): la riga del menu ci stava per un pelo già prima, perché il
   grid «1fr auto 1fr» tiene la colonna destra larga quanto il logo anche quando è vuota.
   Con la pastiglia sforava: qui il menu diventa elastico e centrato nello spazio che resta. */
@media (min-width:981px) and (max-width:1320px){
  header.site .nav { grid-template-columns:auto 1fr auto; column-gap:20px; }
  header.site .nav nav { gap:clamp(14px,2.2vw,42px); justify-content:center; min-width:0; }
  .lang .lang__on, .lang .lang__off { padding:6px 9px; letter-spacing:.06em; }
}
@media (min-width:981px) and (max-width:1120px){
  header.site .nav .logo { height:48px; }
}