/* ============================================================
   EKRAI.com — Foglio di stile principale
   Stile ispirato a sap.com: pulito, corporate, blu + verde EKR
   ============================================================ */

:root{
  --blu:#0a6ed1;            /* blu primario (azioni, link) */
  --blu-scuro:#0854a0;
  --navy:#12263a;           /* titoli e footer */
  --verde:#6fae1f;          /* verde EKR (accento) */
  --verde-scuro:#588c17;
  --grigio-bg:#f5f7fa;      /* sezioni alternate */
  --grigio-linea:#e2e6ea;
  --testo:#32363a;
  --testo-soft:#5b6b79;
  --bianco:#ffffff;
  --rosso:#c9302c;          /* pain */
  --radius:10px;
  --ombra:0 6px 24px rgba(18,38,58,.08);
  --font: "72", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--testo);background:var(--bianco);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--blu);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blu);outline-offset:2px}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{color:var(--navy);line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,4.5vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.22rem}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--verde-scuro);margin-bottom:.6rem}
.lead{font-size:1.12rem;color:var(--testo-soft);max-width:62ch}

/* ---------- Header / Navigazione ---------- */
.topbar{background:var(--navy);color:#cfd9e3;font-size:.8rem}
.topbar .container{display:flex;justify-content:flex-end;gap:1.5rem;padding:.35rem 24px}
.topbar a{color:#cfd9e3}

header.sito{position:sticky;top:0;z-index:100;background:var(--bianco);border-bottom:1px solid var(--grigio-linea)}
.nav{display:flex;align-items:center;gap:2rem;height:64px}
.logo{display:flex;align-items:baseline;gap:.15rem;font-weight:800;font-size:1.5rem;letter-spacing:-.02em;text-decoration:none}
.logo .ekr{color:var(--blu-scuro)}
.logo .ai{color:#6c757d}
.logo .freccia{color:var(--verde);font-weight:900}
.logo:hover{text-decoration:none}

.menu{display:flex;gap:.25rem;list-style:none;margin-left:auto;align-items:center}
.menu>li{position:relative}
.menu a.voce{display:block;padding:.55rem .9rem;color:var(--testo);font-weight:600;border-radius:6px}
.menu a.voce:hover,.menu a.voce.attiva{background:var(--grigio-bg);color:var(--blu);text-decoration:none}
.menu .tendina{position:absolute;top:100%;left:0;background:var(--bianco);min-width:300px;border:1px solid var(--grigio-linea);border-radius:var(--radius);box-shadow:var(--ombra);padding:.5rem;display:none}
.menu li:hover .tendina,.menu li:focus-within .tendina{display:block}
.tendina a{display:block;padding:.65rem .8rem;border-radius:6px;color:var(--testo)}
.tendina a:hover{background:var(--grigio-bg);text-decoration:none}
.tendina .desc{display:block;font-size:.8rem;color:var(--testo-soft);font-weight:400}

.cta-nav{background:var(--blu);color:#fff !important;border-radius:6px;padding:.55rem 1.1rem;font-weight:700}
.cta-nav:hover{background:var(--blu-scuro);text-decoration:none}

.hamburger{display:none;margin-left:auto;background:none;border:1px solid var(--grigio-linea);border-radius:6px;padding:.45rem .6rem;font-size:1.2rem;cursor:pointer;color:var(--navy)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(115deg,var(--navy) 0%,#0f3a5f 55%,var(--blu-scuro) 100%);color:#fff;padding:5rem 0 4.5rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(111,174,31,.35),transparent 70%)}
.hero h1{color:#fff;max-width:19ch}
.hero .lead{color:#d6e2ee;margin:1.2rem 0 2rem}
.hero .badge-riga{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.35rem .95rem;font-size:.85rem}

.bottoni{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;border-radius:6px;padding:.8rem 1.6rem;font-weight:700;border:2px solid transparent;cursor:pointer;font-size:1rem}
.btn.primario{background:var(--verde);color:#fff}
.btn.primario:hover{background:var(--verde-scuro);text-decoration:none}
.btn.secondario{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.secondario:hover{background:rgba(255,255,255,.12);text-decoration:none}
.btn.blu{background:var(--blu);color:#fff}
.btn.blu:hover{background:var(--blu-scuro);text-decoration:none}
.btn.contorno{color:var(--blu);border-color:var(--blu)}
.btn.contorno:hover{background:var(--blu);color:#fff;text-decoration:none}

/* ---------- Sezioni ---------- */
section{padding:4.2rem 0}
section.alt{background:var(--grigio-bg)}
.intestazione-sezione{max-width:760px;margin-bottom:2.6rem}
.intestazione-sezione.centro{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Griglie di card ---------- */
.griglia{display:grid;gap:1.4rem}
.griglia.tre{grid-template-columns:repeat(3,1fr)}
.griglia.due{grid-template-columns:repeat(2,1fr)}
.griglia.quattro{grid-template-columns:repeat(4,1fr)}

.card{background:var(--bianco);border:1px solid var(--grigio-linea);border-radius:var(--radius);padding:1.8rem;box-shadow:0 2px 10px rgba(18,38,58,.04);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--ombra)}
.card .icona{width:46px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem;background:#e8f1fb;color:var(--blu)}
.card.verde .icona{background:#eef6e2;color:var(--verde-scuro)}
.card h3{margin-bottom:.55rem}
.card p{color:var(--testo-soft);flex:1}
.card .link{margin-top:1.2rem;font-weight:700}
.card .link::after{content:" →"}

/* ---------- Pain & Gain ---------- */
.pain-gain{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.colonna-pg{border-radius:var(--radius);padding:1.8rem;border:1px solid var(--grigio-linea);background:var(--bianco)}
.colonna-pg.pain{border-top:5px solid var(--rosso)}
.colonna-pg.gain{border-top:5px solid var(--verde)}
.colonna-pg h3{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.colonna-pg ul{list-style:none}
.colonna-pg li{padding:.5rem 0 .5rem 1.8rem;position:relative;border-bottom:1px dashed var(--grigio-linea)}
.colonna-pg li:last-child{border-bottom:none}
.colonna-pg.pain li::before{content:"✕";position:absolute;left:0;color:var(--rosso);font-weight:800}
.colonna-pg.gain li::before{content:"✓";position:absolute;left:0;color:var(--verde-scuro);font-weight:800}

/* ---------- KPI ---------- */
.kpi-riga{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:center}
.kpi{background:var(--bianco);border:1px solid var(--grigio-linea);border-radius:var(--radius);padding:1.6rem 1rem}
.kpi .numero{font-size:2.4rem;font-weight:800;color:var(--blu);line-height:1}
.kpi .numero span{color:var(--verde)}
.kpi .etichetta{margin-top:.5rem;color:var(--testo-soft);font-size:.92rem}
.hero .kpi{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.hero .kpi .numero{color:#fff}
.hero .kpi .etichetta{color:#c9d7e4}

/* ---------- Confronto PE / RAG / KAG ---------- */
.confronto{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.livello{border-radius:var(--radius);border:1px solid var(--grigio-linea);background:var(--bianco);padding:1.8rem;display:flex;flex-direction:column}
.livello .tag{align-self:flex-start;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:.25rem .8rem;margin-bottom:1rem}
.livello.pe .tag{background:#f1f3f5;color:var(--testo-soft)}
.livello.rag .tag{background:#e8f1fb;color:var(--blu)}
.livello.kag{border:2px solid var(--verde);box-shadow:var(--ombra)}
.livello.kag .tag{background:var(--verde);color:#fff}
.livello ul{list-style:none;margin-top:1rem;flex:1}
.livello li{padding:.4rem 0 .4rem 1.6rem;position:relative;font-size:.95rem;color:var(--testo-soft)}
.livello li.si::before{content:"✓";position:absolute;left:0;color:var(--verde-scuro);font-weight:800}
.livello li.no::before{content:"✕";position:absolute;left:0;color:var(--rosso);font-weight:800}
.livello li.parz::before{content:"~";position:absolute;left:0;color:#d98e00;font-weight:800}

/* Barra segnale/rumore — elemento firma del sito */
.snr{margin-top:1.2rem}
.snr .snr-etichetta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--testo-soft);margin-bottom:.3rem}
.snr .barra{height:12px;border-radius:999px;background:#f3d6d5;overflow:hidden}
.snr .segnale{height:100%;background:linear-gradient(90deg,var(--verde),#8ecb3e);border-radius:999px;width:0;transition:width 1.1s ease}
.snr .valore{font-weight:800;color:var(--navy)}

/* ---------- Tabella confronto estesa ---------- */
.tabella-scroll{overflow-x:auto}
table.confronto-tab{width:100%;border-collapse:collapse;background:var(--bianco);border:1px solid var(--grigio-linea);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
.confronto-tab th,.confronto-tab td{padding:.85rem 1rem;border-bottom:1px solid var(--grigio-linea);text-align:left;vertical-align:top}
.confronto-tab thead th{background:var(--navy);color:#fff;font-weight:700}
.confronto-tab thead th.kag-col{background:var(--verde-scuro)}
.confronto-tab tbody tr:nth-child(even){background:var(--grigio-bg)}
.confronto-tab td:first-child{font-weight:700;color:var(--navy);min-width:180px}

/* ---------- Fasce ---------- */
.fascia-cta{background:linear-gradient(115deg,var(--blu-scuro),var(--blu));color:#fff;text-align:center;padding:3.6rem 0}
.fascia-cta h2{color:#fff;margin-bottom:.8rem}
.fascia-cta p{color:#d6e2ee;max-width:60ch;margin:0 auto 1.8rem}

.fascia-clienti{border-top:1px solid var(--grigio-linea);border-bottom:1px solid var(--grigio-linea);padding:2.2rem 0;background:var(--bianco)}
.loghi{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.loghi span{border:1px solid var(--grigio-linea);border-radius:6px;padding:.4rem 1rem;color:var(--testo-soft);font-weight:600;font-size:.88rem;background:var(--grigio-bg)}

/* ---------- Passi / roadmap ---------- */
.passi{list-style:none;counter-reset:passo;display:grid;gap:1rem}
.passi li{counter-increment:passo;background:var(--bianco);border:1px solid var(--grigio-linea);border-radius:var(--radius);padding:1.1rem 1.3rem 1.1rem 4.2rem;position:relative}
.passi li::before{content:counter(passo);position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:2.1rem;height:2.1rem;border-radius:50%;background:var(--blu);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.passi li strong{color:var(--navy)}

/* ---------- Caso cliente ---------- */
.caso{background:var(--bianco);border-left:6px solid var(--verde);border-radius:var(--radius);box-shadow:var(--ombra);padding:2rem}
.caso .settore{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--verde-scuro)}
.caso blockquote{font-size:1.05rem;color:var(--testo);margin:.8rem 0 1.2rem}
.caso .metriche{display:flex;gap:2.2rem;flex-wrap:wrap}
.caso .metriche div strong{display:block;font-size:1.7rem;color:var(--blu)}

/* ---------- Footer ---------- */
footer.sito{background:var(--navy);color:#b9c6d2;padding:3.4rem 0 2rem;font-size:.92rem}
footer .griglia-footer{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem}
footer h4{color:#fff;margin-bottom:.9rem;font-size:1rem}
footer ul{list-style:none}
footer li{margin-bottom:.5rem}
footer a{color:#b9c6d2}
footer a:hover{color:#fff}
.footer-legale{border-top:1px solid rgba(255,255,255,.15);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ---------- Animazioni reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visibile{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .snr .segnale{transition:none}
  .card:hover{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .griglia.tre,.griglia.quattro{grid-template-columns:repeat(2,1fr)}
  .kpi-riga{grid-template-columns:repeat(2,1fr)}
  .confronto{grid-template-columns:1fr}
  footer .griglia-footer{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hamburger{display:block}
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bianco);flex-direction:column;align-items:stretch;padding:1rem;border-bottom:1px solid var(--grigio-linea);box-shadow:var(--ombra)}
  .menu.aperto{display:flex}
  .menu .tendina{position:static;display:block;border:none;box-shadow:none;padding-left:1rem;min-width:0}
  .griglia.due,.griglia.tre,.griglia.quattro,.pain-gain{grid-template-columns:1fr}
  .kpi-riga{grid-template-columns:1fr 1fr}
  .topbar{display:none}
}

/* ---------- Aggiunte v2: Repowering ---------- */
.fascia-repower{background:var(--navy);color:#d6e2ee;padding:4rem 0;text-align:center}
.fascia-repower h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);max-width:26ch;margin:0 auto .9rem}
.fascia-repower .lead{color:#b9c9d8;margin:0 auto 1.6rem}
.fascia-repower .verde-txt{color:#a4d05a}
.pillole{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.4rem}
.pillole span{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.35rem 1rem;font-size:.85rem}
.sotto-ambito{border:2px solid var(--blu);border-radius:var(--radius);padding:1.8rem;background:#f4f9ff;margin-top:1.4rem}
.sotto-ambito .tag-sub{display:inline-block;background:var(--blu);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:.25rem .8rem;margin-bottom:.8rem}
.ciclo{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:fase}
.ciclo .fase{background:var(--bianco);border:1px solid var(--grigio-linea);border-radius:var(--radius);padding:1.3rem;position:relative;counter-increment:fase}
.ciclo .fase::before{content:counter(fase);width:1.9rem;height:1.9rem;border-radius:50%;background:var(--verde);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.ciclo .fase h4{margin-bottom:.35rem}
.ciclo .fase p{font-size:.9rem;color:var(--testo-soft)}
@media (max-width:980px){.ciclo{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ciclo{grid-template-columns:1fr}}

/* ---------- v3: multilingua + SEO ---------- */
/* Language switcher */
.lang-li{position:relative}
.lang-switch{display:inline-block}
.lang-switch summary{list-style:none;cursor:pointer;padding:.5rem .8rem;border:1px solid var(--grigio-linea);border-radius:6px;font-weight:600;color:var(--testo);white-space:nowrap}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch[open] summary{background:var(--grigio-bg);color:var(--blu)}
.lang-menu{position:absolute;right:0;margin-top:.4rem;background:#fff;border:1px solid var(--grigio-linea);border-radius:var(--radius);box-shadow:var(--ombra);padding:.4rem;min-width:180px;z-index:120}
.lang-menu a{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem .7rem;border-radius:6px;color:var(--testo)}
.lang-menu a:hover{background:var(--grigio-bg);text-decoration:none}
.lang-menu a.corrente{color:var(--blu);font-weight:700}
.lang-menu a .codice{color:var(--testo-soft);font-size:.8rem;text-transform:uppercase}

/* FAQ */
.faq{max-width:840px}
.faq details{background:#fff;border:1px solid var(--grigio-linea);border-radius:var(--radius);margin-bottom:.8rem;overflow:hidden}
.faq summary{cursor:pointer;padding:1.05rem 1.2rem;font-weight:700;color:var(--navy);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;color:var(--verde-scuro);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{background:var(--grigio-bg)}
.faq .risposta{padding:.2rem 1.2rem 1.15rem;color:var(--testo-soft)}

/* Language chooser (root) */
.chooser{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(115deg,var(--navy),#0f3a5f 60%,var(--blu-scuro));padding:2rem}
.chooser .box{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:720px;width:100%;padding:2.6rem;text-align:center}
.chooser .logo{justify-content:center;font-size:2rem;margin-bottom:.4rem}
.chooser p{color:var(--testo-soft);margin-bottom:1.8rem}
.lang-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.lang-cards a{display:block;padding:1.1rem .6rem;border:1px solid var(--grigio-linea);border-radius:var(--radius);font-weight:700;color:var(--navy);transition:.15s}
.lang-cards a:hover{border-color:var(--blu);background:#f4f9ff;text-decoration:none;transform:translateY(-3px)}
.lang-cards a small{display:block;color:var(--testo-soft);font-weight:500;font-size:.78rem;margin-top:.2rem}
@media (max-width:600px){.lang-cards{grid-template-columns:1fr 1fr}}

/* ---------- v4: contact form + company ---------- */
.contatti-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:start}
.form-box{background:#fff;border:1px solid var(--grigio-linea);border-radius:var(--radius);box-shadow:var(--ombra);padding:2rem}
.form-box h2{font-size:1.4rem;margin-bottom:.3rem}
.form-note{color:var(--testo-soft);font-size:.9rem;margin-bottom:1.4rem}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-weight:600;color:var(--navy);margin-bottom:.35rem;font-size:.92rem}
.campo input,.campo textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--grigio-linea);border-radius:8px;font-family:inherit;font-size:1rem;color:var(--testo);background:#fdfefe}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgba(10,110,209,.15)}
.campo textarea{min-height:130px;resize:vertical}
.campo-due{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campo-privacy{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0 1.2rem;font-size:.9rem;color:var(--testo-soft)}
.campo-privacy input{width:auto;margin-top:.25rem}
.form-msg{padding:.8rem 1rem;border-radius:8px;font-size:.92rem;margin-bottom:1rem;display:none}
.form-msg.err{display:block;background:#fdecea;color:var(--rosso);border:1px solid #f5c6c2}
.form-ok{display:none;background:#eef6e2;border:1px solid #cfe6a8;border-radius:var(--radius);padding:1.4rem}
.form-ok.mostra{display:block}
.form-ok h3{color:var(--verde-scuro);margin-bottom:.5rem}
.aside-contatti .box-aside{background:var(--grigio-bg);border:1px solid var(--grigio-linea);border-radius:var(--radius);padding:1.6rem;margin-bottom:1.2rem}
.aside-contatti h3{font-size:1.05rem;margin-bottom:.8rem}
.aside-contatti ul{list-style:none}
.aside-contatti li{padding:.4rem 0 .4rem 1.6rem;position:relative;color:var(--testo-soft);font-size:.93rem;border-bottom:1px dashed var(--grigio-linea)}
.aside-contatti li:last-child{border-bottom:none}
.aside-contatti li::before{content:"✓";position:absolute;left:0;color:var(--verde-scuro);font-weight:800}
.direct-card{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--grigio-linea);border-radius:var(--radius);padding:1.2rem}
.direct-card .iniziali{width:52px;height:52px;border-radius:50%;background:var(--blu);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;flex-shrink:0}
.direct-card strong{display:block;color:var(--navy)}
.direct-card a{font-size:.92rem}

/* company / sedi */
.sedi{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.sede{background:#fff;border:1px solid var(--grigio-linea);border-radius:var(--radius);box-shadow:0 2px 10px rgba(18,38,58,.04);padding:1.8rem;border-top:5px solid var(--verde)}
.sede h3{margin-bottom:.6rem}
.sede .indirizzo{color:var(--testo);font-weight:600;margin-bottom:.5rem}
.sede .nota{color:var(--testo-soft);font-size:.93rem;margin-bottom:.8rem}
.sede .contatti-sede a{display:inline-block;margin-right:1rem;font-size:.92rem}
.sede.placeholder{border-top-color:#d0a800;background:#fffdf5}
.placeholder-note{color:#8a6d00;font-size:.88rem;margin-top:1rem;background:#fffdf5;border:1px dashed #e0c25a;border-radius:8px;padding:.7rem 1rem}
.valori{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:900px){.contatti-grid{grid-template-columns:1fr}.sedi{grid-template-columns:1fr}.valori{grid-template-columns:1fr}.campo-due{grid-template-columns:1fr}}