/* ============================================================================
   DadoMediaWeb — design system condiviso (.it + .com)
   2026-09-03. Sostituisce gli stili per-pagina sparsi e i var() con fallback.

   Misure che motivano questo file:
   - i token --brand- e --navy- NON erano definiti in nessun CSS: solo inline in
     renderer.php:955 per .landing-page. Ovunque altrove var(--navy-500,#1E1B4B)
     cadeva sul fallback. Qui diventano reali e globali.
   - la scala --brand- era incoerente: 50..300 arancio, 400..600 indigo,
     700..900 arancio (migrazione a metà). Uso reale misurato: brand-500x41,
     navy-500x22, brand-400x19, brand-600x16 vs arancio residuo brand-50x5,
     brand-300x2, brand-700x1. Il sito È indigo+navy: la scala viene resa
     coerente e i pochi riferimenti arancio restano validi (rimappati).
   ========================================================================== */

:root{
  /* --- Brand: indigo. Scala coerente, ancorata ai 3 valori già in uso --- */
  --brand-50:#EEF2FF;
  --brand-100:#E0E7FF;
  --brand-200:#C7D2FE;
  --brand-300:#A5B4FC;
  --brand-400:#818CF8;   /* in uso x19 */
  --brand-500:#6366F1;   /* in uso x41 — colore primario */
  --brand-600:#4F46E5;   /* in uso x16 */
  --brand-700:#4338CA;
  --brand-800:#3730A3;
  --brand-900:#312E81;
  --brand-rgb:99,102,241;

  /* --- Navy: superfici scure e testo forte --- */
  --navy-50:#F0F4FF;
  --navy-100:#E0E8FF;
  --navy-200:#C7D2FE;
  --navy-300:#A5B4FC;
  --navy-400:#818CF8;
  --navy-500:#1E1B4B;    /* in uso x22 — titoli */
  --navy-600:#181547;
  --navy-700:#120F3C;
  --navy-800:#0C0A2E;
  --navy-900:#06051E;

  /* --- Accenti di linea prodotto (invariati: già semanticamente usati) --- */
  --ai:#06B6D4;
  --commerce:#10B981;
  --pa:#8B5CF6;

  /* --- Accento caldo: unico superstite dell'arancio, per evidenze puntuali --- */
  --accent:#F97316;
  --accent-rgb:249,115,22;

  /* --- Testo e superfici chiare --- */
  /* Contrasti verificati su bianco (calcolo WCAG, 2026-09-03):
     ink 17.9:1 · ink-body 10.35:1 · ink-muted 4.76:1 · brand-600 6.29:1
     navy-500 15.99:1 · ink-muted su surface-alt 4.55:1 — tutti AA testo normale.
     Bianco su brand-500 = 4.47:1: AA-large, valido per il testo bottone (16px/700). */
  --ink:#0F172A;
  --ink-body:#334155;
  --ink-muted:#64748B;
  --ink-inverse:#F8FAFC;
  --ink-inverse-muted:#94A3B8;
  --surface:#FFFFFF;
  --surface-alt:#F8FAFC;
  --surface-sunken:var(--navy-50);
  --line:#E2E8F0;
  --line-strong:#CBD5E1;

  /* --- Stato --- */
  --ok:#22C55E;
  --warn:#F59E0B;
  --err:#B91C1C;

  /* --- Spazio: scala 4px, un solo vocabolario --- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.25rem;--s-6:1.5rem; --s-8:2rem;   --s-10:2.5rem;
  --s-12:3rem;  --s-16:4rem;  --s-20:5rem;

  /* --- Ritmo verticale di sezione (fluido) --- */
  --section-y:clamp(3rem,7vw,5.5rem);
  --section-y-lg:clamp(4rem,8vw,7rem);

  /* --- Tipografia --- */
  --font-display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'Fira Code',SFMono-Regular,Menlo,monospace;

  --t-h1:clamp(2.2rem,5vw,3.6rem);
  --t-h2:clamp(1.5rem,3.2vw,2.2rem);
  --t-h3:clamp(1.15rem,2vw,1.4rem);
  --t-lead:clamp(1.05rem,2vw,1.2rem);
  --t-body:1.0625rem;
  --t-sm:.9rem;
  --t-xs:.8rem;

  --lh-tight:1.15;
  --lh-heading:1.25;
  --lh-body:1.7;

  /* --- Forma --- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:100px;

  /* --- Ombre: una sola famiglia --- */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12);
  --shadow-brand:0 4px 20px rgba(var(--brand-rgb),.25);
  --shadow-brand-hover:0 8px 30px rgba(var(--brand-rgb),.35);

  /* --- Motion: durate uniche, così reduced-motion le spegne in un punto --- */
  --dur-fast:.15s;
  --dur:.3s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* --- Layout --- */
  --container:1280px;
  /* Riga leggibile. 68ch (~540px) era troppo stretta accanto a sezioni da
     1280px: la pagina sembrava passare al mobile a meta' scorrimento.
     A 46rem (~736px) resta comoda da leggere ma non "buca" il layout. */
  --measure:46rem;
  --header-h:68px;
  --citybar-h:44px;
}

/* Il sito è light-only per scelta: dichiarato esplicitamente, così il browser
   non tenta di reinterpretare i colori di form/scrollbar in dark. */
:root{color-scheme:light}

/* ============================================================================
   Accessibilità di base — vale per .it e .com
   ========================================================================== */

/* Focus visibile e coerente ovunque (prima: nessuna regola globale). */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand-500);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* Rispetta chi ha chiesto meno movimento: spegne anche le animazioni
   decorative già presenti (pulse del dot, hover translateY). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Salto al contenuto per tastiera/screen reader. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--navy-500);color:#fff;
  padding:var(--s-3) var(--s-5);border-radius:0 0 var(--r-md) 0;
  font-family:var(--font-display);font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================================
   Prosa SEO — il blocco di testo lungo delle destinazioni
   Larghezza di riga limitata: era max-width 760px fisso, ora legata al font.
   ========================================================================== */

.seo-article{padding:var(--section-y) 0;background:var(--surface)}

/* La prosa resta su una riga leggibile, ma NON come colonnina centrata in
   mezzo a sezioni larghe: su desktop si affianca un filetto e il blocco parte
   allineato al resto del layout, cosi' la pagina non sembra cambiare
   larghezza (e "diventare mobile") a meta' scorrimento. */
.seo-article-inner{max-width:var(--measure);margin:0 auto}   /* legacy: pagine non ancora editoriali */

/* Perche' non una colonna stretta e basta: a 540px in mezzo a sezioni da
   1280px la pagina sembrava "diventare mobile" a meta' scorrimento.
   A 46rem la riga resta leggibile e lo stacco non si nota. */

.seo-article h2{
  font-family:var(--font-display);
  font-size:var(--t-h2);
  font-weight:800;
  color:var(--navy-500);
  line-height:var(--lh-heading);
  margin:var(--s-10) 0 var(--s-4);
  /* ancora per i link "salta a" e per i passaggi estraibili */
  scroll-margin-top:calc(var(--header-h) + var(--s-4));
}
.seo-article h2:first-child{margin-top:0}

.seo-article h3{
  font-family:var(--font-display);
  font-size:var(--t-h3);
  font-weight:700;
  color:var(--navy-500);
  line-height:var(--lh-heading);
  margin:var(--s-8) 0 var(--s-3);
}

.seo-article p{
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink-body);
  margin:0 0 var(--s-5);
  text-wrap:pretty;              /* evita l'orfana a fine paragrafo */
}

.seo-article a{
  color:var(--brand-600);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:from-font;
}
.seo-article a:hover{color:var(--brand-700)}

.seo-article strong{color:var(--ink);font-weight:700}

.seo-article ul:not([class]){margin:0 0 var(--s-5) var(--s-5);padding:0}
.seo-article ul:not([class]) li{
  font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink-body);margin-bottom:var(--s-2);
}

/* Tabelle dati: prova originale, devono poter scrollare su mobile senza
   far scrollare la pagina in orizzontale. */
.seo-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s-6) 0}
.seo-table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--t-sm)}
.seo-table th,.seo-table td{
  text-align:left;padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);
}
.seo-table th{
  font-family:var(--font-display);font-weight:700;
  color:var(--navy-500);background:var(--surface-alt);
  position:sticky;top:0;
}
.seo-table caption{
  caption-side:bottom;padding-top:var(--s-3);
  font-size:var(--t-xs);color:var(--ink-muted);text-align:left;
}

/* ============================================================================
   Artefatto visivo — gate di pubblicazione SPEC §10.7 (>=1 per destinazione)
   ========================================================================== */

.seo-figure{margin:var(--s-8) 0}
.seo-figure .seo-svg,.hero-visual .seo-svg{
  width:100%;height:auto;display:block;border-radius:var(--r-lg);
}
.seo-figure figcaption{
  margin-top:var(--s-3);font-size:var(--t-xs);
  color:var(--ink-muted);line-height:1.5;
}

/* ============================================================================
   Liste di link interne (indice città, servizi correlati)
   ========================================================================== */

.seo-farm{list-style:none;margin:0 0 var(--s-6);padding:0}
.seo-farm li{
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--t-body);line-height:1.55;color:var(--ink-body);
}
.seo-farm li a{
  font-weight:700;color:var(--navy-500);text-decoration:none;
}
.seo-farm li a:hover{color:var(--brand-600);text-decoration:underline}

/* Indice città: griglia, non una colonna infinita. */
.seo-farm--grid{
  display:grid;gap:0 var(--s-6);
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
}

/* ============================================================================
   Barra di contesto città (.it) / city-site (.com)
   Prima iniettava <style>body{padding-top:44px}</style> a metà body: causa di
   CLS. Qui l'altezza è riservata da una classe sul body, senza style inline.
   ========================================================================== */

.city-bar{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:990;
  height:var(--citybar-h);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.city-bar::-webkit-scrollbar{display:none}
.city-bar-inner{
  display:flex;align-items:center;gap:var(--s-1);
  height:100%;padding:0 clamp(1rem,4vw,2rem);
}
.city-bar a{
  white-space:nowrap;font-family:var(--font-display);
  font-size:var(--t-xs);font-weight:600;
  color:var(--ink-body);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-sm);text-decoration:none;
}
.city-bar a:hover,.city-bar a[aria-current="page"]{
  color:var(--navy-500);background:var(--surface-alt);
}
.city-bar a.is-request{
  margin-left:auto;background:var(--navy-500);color:#fff;
}
.city-bar a.is-request:hover{background:var(--navy-600);color:#fff}

/* Riserva lo spazio: niente salto di layout. */
body.has-city-bar{padding-top:var(--citybar-h)}
@media(max-width:1199px){
  .city-bar{display:none}
  body.has-city-bar{padding-top:0}
}

/* ============================================================================
   Blocco "prova" — sede, telefono, chi risponde. È il vantaggio misurato
   sulle city page dei concorrenti (loro non hanno NAP locale).
   ========================================================================== */

.proof{
  display:grid;gap:var(--s-4);
  /* dentro la colonna di lettura (~540px) auto-fit a 13rem collassava a una
     sola colonna, rendendo il blocco altissimo: qui restano 2 colonne. */
  grid-template-columns:repeat(2,1fr);
  margin:var(--s-8) 0;padding:var(--s-6);
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.proof-item{display:flex;flex-direction:column;gap:var(--s-1)}
@media(max-width:520px){.proof{grid-template-columns:1fr}}
.proof-k{
  font-family:var(--font-display);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-muted);font-weight:700;
}
.proof-v{
  font-size:var(--t-body);color:var(--ink);
  font-weight:600;line-height:1.4;
}
.proof-v a{color:var(--brand-600);text-decoration:none}
.proof-v a:hover{text-decoration:underline}

/* ============================================================================
   FAQ — la produzione ruota una <svg>. Le pagine generate emettono uno
   <span class="faq-chevron">: qui entrambi ruotano allo stato .open.
   ========================================================================== */

.faq-chevron{
  flex-shrink:0;color:var(--ink-muted);
  transition:transform var(--dur) var(--ease);
  font-size:.7em;line-height:1;
}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--brand-500)}
.faq-q{gap:var(--s-4)}
.faq-list{margin:var(--s-6) 0}

/* ============================================================================
   Hero — variante "split" usata dalle destinazioni SEO
   ========================================================================== */

.hero.hero-split h1,
.hero.hero-split .hero-sub{text-align:left;margin-left:0}
.hero.hero-split .hero-ctas{justify-content:flex-start}
.hero.hero-split .hero-sub{max-width:34rem}

.hero-visual{display:block;margin-top:var(--s-6)}
@media(min-width:1024px){.hero-visual{margin-top:0}}

.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-8)}

/* Il glow decorativo dell'hero era arancio su palette indigo: allineato. */
.hero::before{
  background:radial-gradient(circle,rgba(var(--brand-rgb),.14) 0%,transparent 70%) !important;
}

/* ============================================================================
   CTA di chiusura
   ========================================================================== */

.cta-section p a{color:var(--brand-400);text-decoration:none}
.cta-section p a:hover{text-decoration:underline}

/* ============================================================================
   Telefono sticky su mobile — il CTA primario è la chiamata (SPEC §3).
   Sicuro con la safe-area iOS.
   ========================================================================== */

.call-sticky{display:none}
@media(max-width:767px){
  .call-sticky{
    position:fixed;left:0;right:0;bottom:0;z-index:995;
    display:flex;gap:var(--s-2);
    padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
  }
  .call-sticky a{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    min-height:48px;                    /* target touch */
    font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);
    border-radius:var(--r-md);text-decoration:none;
  }
  .call-sticky .is-call{background:var(--brand-500);color:#fff}
  .call-sticky .is-quote{
    background:var(--surface);color:var(--navy-500);
    border:1.5px solid var(--line-strong);
  }
  body.has-call-sticky{padding-bottom:76px}
}

/* ============================================================================
   Footer — barra lingua/EN. Serve su entrambi i siti, quindi vive qui e non
   in en-seo.css. Prima era uno <style> inline a metà body (fonte di CLS).
   ========================================================================== */

.footer-en-bar{
  margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-en-bar h5{
  font-family:var(--font-display);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--brand-400);margin-bottom:var(--s-4);font-weight:700;
}
.footer-en-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center}
.footer-en-links a{
  white-space:nowrap;font-size:var(--t-sm);
  color:var(--ink-inverse-muted);display:inline-block;text-decoration:none;
}
.footer-en-links a:hover{color:var(--brand-400);text-decoration:underline}

/* ============================================================================
   Utility minime (solo ciò che serve davvero)
   ========================================================================== */

.u-measure{max-width:var(--measure)}
.u-center{margin-left:auto;margin-right:auto}
.u-stack>*+*{margin-top:var(--s-4)}

/* ============================================================================
   LAYER DI CONVERSIONE (.com EN, riusabile su .it)
   Prima le pagine erano hero → muro di prosa → FAQ → CTA: contenuto senza
   architettura di vendita. Questi blocchi danno ritmo alla pagina e fanno
   respirare il testo, che è anche ciò che tiene il lettore fino al CTA.
   ========================================================================== */

/* --- Barra di prova sotto l'hero: ciò che si verifica in 5 secondi --- */
.trustbar{
  background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:var(--s-5) 0;
}
.trustbar-list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
}
.trustbar-list li{display:flex;flex-direction:column;gap:2px}
.trustbar-list strong{
  font-family:var(--font-display);font-size:var(--t-sm);
  color:var(--ink-inverse);font-weight:700;
}
.trustbar-list span{font-size:var(--t-xs);color:var(--ink-inverse-muted)}

/* --- Fascia generica --- */
.band{padding:var(--section-y) 0;background:var(--surface)}
.band--alt{background:var(--surface-alt)}
.band--dark{background:var(--navy-900);color:var(--ink-inverse)}
.band-head{max-width:var(--measure);margin:0 auto var(--s-10)}
.band h2{
  font-family:var(--font-display);font-size:var(--t-h2);font-weight:800;
  color:var(--navy-500);line-height:var(--lh-heading);margin:0 0 var(--s-3);
  text-wrap:balance;
}
.band--dark h2{color:var(--ink-inverse)}
.band-lead{
  font-size:var(--t-lead);line-height:1.6;color:var(--ink-muted);
  margin:0;text-wrap:pretty;
}
.band--dark .band-lead{color:var(--ink-inverse-muted)}

/* --- Problema vs risultato: il contrasto è il messaggio --- */
.split{
  display:grid;gap:var(--s-6);
  grid-template-columns:1fr;
  max-width:60rem;margin:0 auto;
}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr;gap:var(--s-8)}}
.split-col{
  padding:var(--s-6);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);
}
.split-col--pain{background:var(--surface-alt)}
.split-col--gain{border-color:var(--brand-200);background:var(--brand-50)}
.split-col h3{
  font-family:var(--font-display);font-size:var(--t-h3);font-weight:700;
  color:var(--navy-500);margin:0 0 var(--s-4);
}
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.ticklist li{
  position:relative;padding-left:1.75rem;
  font-size:var(--t-body);line-height:1.55;color:var(--ink-body);
}
.ticklist li::before{
  position:absolute;left:0;top:0;
  font-weight:700;font-size:1.05em;line-height:1.4;
}
.ticklist--pain li::before{content:"×";color:var(--err)}
.ticklist--gain li::before{content:"✓";color:var(--ok)}

/* --- Processo numerato: rende concreto un servizio astratto --- */
.steps{
  list-style:none;margin:0;padding:0;counter-reset:step;
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  max-width:64rem;margin-inline:auto;
}
.step{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6);
}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--brand-500);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);
  margin-bottom:var(--s-3);
}
.step h3{
  font-family:var(--font-display);font-size:var(--t-h3);font-weight:700;
  color:var(--navy-500);margin:0 0 var(--s-2);
}
.step p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-body);margin:0}

/* --- Obiezioni: nominarle disinnesca, ignorarle conferma --- */
.objections{
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  max-width:64rem;margin-inline:auto;
}
.objection{
  border-left:3px solid var(--brand-500);
  padding:var(--s-2) 0 var(--s-2) var(--s-5);
}
.objection h3{
  font-family:var(--font-display);font-size:var(--t-body);font-weight:700;
  color:var(--navy-500);margin:0 0 var(--s-2);
}
.objection p{font-size:var(--t-sm);line-height:1.65;color:var(--ink-body);margin:0}

/* --- Inversione del rischio --- */
.riskgrid{
  display:grid;gap:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  max-width:64rem;margin-inline:auto;
}
.risk h3{
  font-family:var(--font-display);font-size:var(--t-h3);font-weight:700;
  color:var(--ink-inverse);margin:0 0 var(--s-2);
}
.risk p{font-size:var(--t-sm);line-height:1.65;color:var(--ink-inverse-muted);margin:0}
.risk-anchor{
  max-width:var(--measure);margin:var(--s-8) auto 0;
  padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-sm);line-height:1.65;color:var(--ink-inverse-muted);
}

/* --- Chiusura --- */
.closer{
  padding:var(--section-y-lg) 0;text-align:center;
  background:linear-gradient(160deg,var(--navy-900),var(--navy-500) 60%,var(--navy-800));
}
.closer h2{
  font-family:var(--font-display);font-size:var(--t-h2);font-weight:800;
  color:var(--ink-inverse);margin:0 0 var(--s-3);text-wrap:balance;
}
.closer-sub{
  font-size:var(--t-lead);color:var(--ink-inverse-muted);
  max-width:40rem;margin:0 auto var(--s-8);line-height:1.6;
}
.closer-ctas{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  justify-content:center;margin-bottom:var(--s-6);
}
.btn-lg{padding:16px 32px;font-size:1.05rem}
.closer .btn-outline{border-color:rgba(255,255,255,.28);color:var(--ink-inverse)}
.closer .btn-outline:hover{border-color:var(--brand-400);color:var(--brand-400)}
.closer-fine{
  font-size:var(--t-sm);color:var(--ink-inverse-muted);
  max-width:38rem;margin:0 auto;line-height:1.6;
}
.closer-fine a{color:var(--brand-400)}

/* ============================================================================
   Blocchi di respiro — spezzano il muro di prosa delle pagine interne
   ========================================================================== */

/* --- Cifre: si leggono in un secondo, danno ritmo --- */
.figures{
  padding:var(--section-y) 0;
  background:
    radial-gradient(60rem 24rem at 15% 0%, rgba(var(--brand-rgb),.16), transparent 65%),
    var(--navy-900);
  color:var(--ink-inverse);
}
.figures-title{
  font-family:var(--font-display);font-size:var(--t-h3);font-weight:700;
  color:var(--ink-inverse-muted);text-align:center;
  margin:0 0 var(--s-8);letter-spacing:.02em;
}
.figrow{
  display:grid;gap:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  max-width:64rem;margin-inline:auto;
}
.fig{display:flex;flex-direction:column;gap:var(--s-2);text-align:center}
.fig-v{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,4vw,2.8rem);line-height:1;
  background:linear-gradient(135deg,var(--brand-300),var(--brand-500));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand-400);
}
.fig-k{font-size:var(--t-sm);color:var(--ink-inverse-muted);line-height:1.45}

/* --- Tabella di confronto --- */
.vs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:64rem;margin-inline:auto}
.vs{border-collapse:separate;border-spacing:0;width:100%;min-width:38rem;font-size:var(--t-sm)}
.vs th,.vs td{padding:var(--s-4) var(--s-5);text-align:left;vertical-align:top}
.vs thead th{
  font-family:var(--font-display);font-weight:700;color:var(--navy-500);
  border-bottom:2px solid var(--line-strong);
}
.vs thead th:nth-child(2){color:var(--brand-600)}
.vs tbody th{
  font-weight:600;color:var(--ink-muted);width:11rem;
  border-bottom:1px solid var(--line);
}
.vs tbody td{color:var(--ink-body);border-bottom:1px solid var(--line);line-height:1.55}
.vs .vs-us{
  background:var(--brand-50);color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand-500);
}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:0}

/* --- Affermazione a tutta larghezza --- */
.statement{
  padding:var(--section-y) 0;
  background:var(--surface-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.statement blockquote{
  margin:0 auto;max-width:46rem;text-align:center;position:relative;
}
.statement blockquote::before{
  content:"\201C";
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:4rem;line-height:.7;color:var(--brand-300);
  margin-bottom:var(--s-3);
}
.statement p{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.4;
  color:var(--navy-500);margin:0 0 var(--s-4);text-wrap:balance;
}
.statement cite{
  font-style:normal;font-size:var(--t-sm);color:var(--ink-muted);
}

/* --- Alterna il fondo delle fasce consecutive: niente muro bianco --- */
.band + .band{background:var(--surface-alt)}
.band + .band.band--dark{background:var(--navy-900)}
/* Due fasce chiare di fila: la seconda torna bianca, cosi' si distinguono. */
.band--alt + .band:not(.band--dark):not(.band--alt){background:var(--surface)}
.band + .band:not(.band--dark){border-top:1px solid var(--line)}

/* ============================================================================
   HERO EN ricostruito — v2
   Il precedente era: badge grigio, titolo, due bottoni, clipart a destra.
   Generico. Qui: griglia asimmetrica, occhiello tipografico, titolo con
   accento cromatico, riga di prova sotto le CTA, illustrazione-interfaccia
   inclinata su un piano scuro con bagliore. Piu' profondita', meno template.
   ========================================================================== */

.hero--v2{
  position:relative;overflow:hidden;
  padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(3.5rem,7vw,5.5rem);
  background:
    radial-gradient(70rem 34rem at 78% 8%, rgba(var(--brand-rgb),.24), transparent 62%),
    radial-gradient(48rem 30rem at 6% 92%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(158deg, var(--navy-900) 0%, #131046 46%, var(--navy-800) 100%);
}
/* trama sottile: da' materia al fondo senza immagini */
.hero--v2::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60rem 40rem at 70% 20%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(60rem 40rem at 70% 20%, #000 30%, transparent 78%);
}
.hero--v2 > .container{position:relative;z-index:1}

.hero-v2-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:1024px){.hero-v2-grid{grid-template-columns:1.05fr .95fr}}

/* Occhiello: piccolo, in maiuscoletto spaziato. Sostituisce il badge pillola. */
.hero-eyebrow{
  display:flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-300);margin-bottom:var(--s-5);
}
.hero-eyebrow::before{
  content:'';width:2rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-400),transparent);
}

.hero--v2 h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.3rem,4.8vw,3.7rem);line-height:1.06;
  letter-spacing:-.022em;color:var(--ink-inverse);
  margin:0 0 var(--s-5);text-wrap:balance;
}
.hero--v2 h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--brand-300),var(--brand-500) 55%,#22D3EE);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero--v2 .hero-sub{
  font-size:clamp(1.02rem,1.7vw,1.16rem);line-height:1.62;
  color:#B9C2D6;max-width:35rem;margin:0 0 var(--s-8);
}

/* Riga di prova: sostituisce i "trust" sparsi, e' sotto le CTA */
.hero-proofline{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.09);
}
.hero-proofline span{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-sm);color:#93A0BA;
}
.hero-proofline span::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.16);
}

/* Illustrazione: piano inclinato + bagliore, non un rettangolo piatto */
.hero-figure{position:relative}
.hero-figure::after{
  content:'';position:absolute;inset:8% -4% -10% 4%;z-index:0;
  background:radial-gradient(closest-side, rgba(var(--brand-rgb),.30), transparent 72%);
  filter:blur(38px);
}
.hero-figure .seo-svg{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 32px 70px -22px rgba(0,0,0,.72);
  transform:perspective(1400px) rotateY(-8deg) rotateX(2.5deg);
  transform-origin:left center;
}
@media(max-width:1023px){
  .hero-figure .seo-svg{transform:none}
  .hero-figure::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-figure .seo-svg{transform:none}
}

/* ============================================================================
   Reveal allo scroll. Nascondiamo SOLO se il JS ha aggiunto .has-reveal:
   senza JS (o con reduced-motion) il contenuto e' visibile da subito.
   Mai nascondere testo con CSS che potrebbe non tornare indietro.
   ========================================================================== */
.has-reveal .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.has-reveal .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .has-reveal .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ============================================================================
   Casi reali: screenshot di progetti in produzione. Prova visiva, non mockup.
   ========================================================================== */
.cases{
  display:grid;gap:var(--s-6);
  grid-template-columns:1fr;
  margin:var(--s-6) 0 var(--s-8);
}
@media(min-width:860px){.cases{grid-template-columns:1fr 1fr}}
.case{margin:0}
.case img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.case a:hover img{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.case figcaption{
  margin-top:var(--s-3);font-size:var(--t-sm);
  line-height:1.55;color:var(--ink-body);
}
.case figcaption strong{color:var(--navy-500)}
@media (prefers-reduced-motion:reduce){
  .case a:hover img{transform:none}
}

/* ============================================================================
   FIX mega menu — bug preesistente in style.css
   Ordine reale nel foglio:
     .mega-panel.show{display:block}      <- prima
     .mega-panel{display:none !important} <- dopo, e con !important
   La seconda vince sempre: il pannello non si apriva MAI, ne' al click ne' in
   hover. main.js aggiungeva .show correttamente, ma il CSS lo annullava.
   Qui si ripristina la precedenza allo stato aperto.
   ========================================================================== */
.mega-panel.show{display:block !important}
.mega-overlay.show{opacity:1;visibility:visible}

/* ============================================================================
   Mega menu citta' (.com) — ricostruito
   Prima: 7 colonne di link neri su bianco, 700px di altezza, nessuna gerarchia.
   Sembrava un elenco telefonico. Qui: card per citta' su fondo scuro, nome +
   fuso in evidenza, servizi come lista compatta, CTA per citta'.
   ========================================================================== */
.mega-panel.mega-locations{
  background:
    radial-gradient(50rem 22rem at 15% 0%, rgba(var(--brand-rgb),.16), transparent 62%),
    var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 48px -16px rgba(0,0,0,.5);
  padding:var(--s-8) 0 var(--s-6);
}
.citymenu{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));
}
.citymenu-col{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-4) var(--s-3);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.citymenu-col:hover{background:rgba(255,255,255,.06);border-color:rgba(var(--brand-rgb),.45)}

.citymenu-city{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);
  text-decoration:none;padding-bottom:var(--s-3);margin-bottom:var(--s-3);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.citymenu-name{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--ink-inverse);letter-spacing:-.01em;
}
.citymenu-col:hover .citymenu-name{color:var(--brand-300)}
.citymenu-tz{
  font-family:var(--font-mono);font-size:.68rem;
  color:var(--ink-inverse-muted);white-space:nowrap;
}

.citymenu-list{list-style:none;margin:0 0 var(--s-3);padding:0;display:grid;gap:2px}
.citymenu-list a{
  display:block;padding:5px 8px;margin-left:-8px;border-radius:var(--r-sm);
  font-size:.845rem;line-height:1.35;color:#AEB8CE;text-decoration:none;
}
.citymenu-list a:hover{color:var(--ink-inverse);background:rgba(255,255,255,.07)}

.citymenu-cta{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:.78rem;color:var(--brand-300);text-decoration:none;
}
.citymenu-cta:hover{color:var(--brand-200)}

.citymenu-foot{
  margin:var(--s-6) 0 0;padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.07);
  font-size:var(--t-xs);color:var(--ink-inverse-muted);text-align:center;
}
.citymenu-foot a{color:var(--brand-300);text-decoration:none}
.citymenu-foot a:hover{text-decoration:underline}


/* ============================================================================
   Prosa editoriale — titolo a sinistra, testo a destra.
   Perche': la prosa centrata a 736px in mezzo a sezioni da 1280px faceva
   sembrare che la pagina "diventasse mobile" a meta' scorrimento, e lasciava
   buchi bianchi fra le sezioni. Cosi' occupa la stessa larghezza di tutto il
   resto, e chi compra scansiona i titoli in verticale leggendo solo cio' che
   gli serve. Senza JS resta il flusso normale (nessun contenuto nascosto).
   ========================================================================== */
.prose{max-width:var(--measure);margin:0 auto}      /* fallback senza JS */

.prose.is-editorial{max-width:none;margin:0}
.prose.is-editorial .prose-row{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,42rem);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:var(--s-8) 0;
  border-top:1px solid var(--line);
}
.prose.is-editorial .prose-row:first-child{border-top:0;padding-top:0}
.prose.is-editorial .prose-row--full{grid-template-columns:minmax(0,42rem);margin-left:0}
@media(min-width:1200px){
  .prose.is-editorial .prose-row{grid-template-columns:minmax(0,17rem) minmax(0,44rem)}
}

.prose.is-editorial .prose-side{position:sticky;top:calc(var(--header-h) + var(--s-8));align-self:start}
.prose.is-editorial .prose-side h2{
  margin:0;
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.2;
  text-wrap:balance;
}
.prose.is-editorial .prose-main > *:last-child{margin-bottom:0}

/* Sotto i 1000px il JS non interviene: resta la colonna leggibile. */