/* ==========================================================================
   Eratek – foglio di stile unico
   Colori e tipografia: solo variabili definite in :root (modificabili dal pannello)
   ========================================================================== */

:root{
  --colore-primario:#3b4cf0; --colore-primario-scuro:#2432c4; --colore-accento:#8b5cf6;
  --testo:#0f1330; --testo-tenue:#565d7a; --sfondo:#ffffff; --sfondo-alt:#f4f5fb; --bordo:#e2e5f2;
  --raggio:14px; --font-testo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-titoli:"Sora",var(--font-testo);

  /* Palette estesa per le sezioni scure e gli effetti "tech" */
  --sfondo-scuro:#090d24; --sfondo-scuro-alt:#121846;
  --testo-su-scuro:#f5f6ff; --testo-tenue-su-scuro:#a9afd3;
  --accento-chiaro:#c4b5fd; --bianco:#ffffff;

  --ombra:0 10px 30px color-mix(in srgb, var(--testo) 8%, transparent);
  --ombra-forte:0 24px 60px color-mix(in srgb, var(--colore-primario) 22%, transparent);
  --transizione:.25s ease;
  --larghezza:1160px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:var(--font-testo);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--testo);
  background:var(--sfondo);
}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{
  font-family:var(--font-titoli);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .6em;
  font-weight:700;
}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--colore-primario);text-decoration:none;transition:color var(--transizione)}
a:hover{color:var(--colore-primario-scuro)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--colore-accento);
  outline-offset:3px;
  border-radius:6px;
}
address{font-style:normal}
.contenitore{width:min(100% - 2.5rem,var(--larghezza));margin-inline:auto}

.etichetta{
  display:inline-flex;align-items:flex-start;gap:.5rem;
  font-family:var(--font-titoli);
  font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--colore-accento);
  margin-bottom:1rem;
}
.etichetta::before{
  content:"";flex:0 0 auto;width:22px;height:2px;border-radius:2px;margin-top:.55em;
  background:linear-gradient(90deg,var(--colore-primario),var(--colore-accento));
}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.5rem;
  border-radius:999px;
  font-family:var(--font-titoli);font-weight:600;font-size:.95rem;
  line-height:1;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--transizione),box-shadow var(--transizione),background var(--transizione),color var(--transizione);
}
.bottone:hover{transform:translateY(-2px)}
.bottone--primario{
  color:var(--bianco);
  background:linear-gradient(135deg,var(--colore-primario) 0%,var(--colore-accento) 100%);
  box-shadow:0 10px 24px color-mix(in srgb, var(--colore-primario) 35%, transparent);
}
.bottone--primario:hover{color:var(--bianco);box-shadow:0 14px 32px color-mix(in srgb, var(--colore-accento) 45%, transparent)}
.bottone--vetro{
  color:var(--testo-su-scuro);
  background:color-mix(in srgb, var(--bianco) 8%, transparent);
  border-color:color-mix(in srgb, var(--bianco) 22%, transparent);
  backdrop-filter:blur(8px);
}
.bottone--vetro:hover{color:var(--bianco);background:color-mix(in srgb, var(--bianco) 14%, transparent)}
.bottone--piccolo{padding:.65rem 1.15rem;font-size:.875rem;color:var(--bianco);background:var(--colore-primario)}
.bottone--piccolo:hover{color:var(--bianco);background:var(--colore-primario-scuro)}

/* --------------------------------------------------------------------------
   Intestazione
   -------------------------------------------------------------------------- */
.intestazione{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--sfondo) 82%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bordo);
  transition:box-shadow var(--transizione);
}
.intestazione.compatta{box-shadow:var(--ombra)}
.intestazione__riga{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:72px;
}
.logo{display:inline-flex;align-items:center}
.logo img{width:150px;height:auto}

.menu-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;
  background:transparent;border:1px solid var(--bordo);border-radius:10px;cursor:pointer;
}
.menu-toggle span{
  display:block;height:2px;width:100%;border-radius:2px;
  background:var(--testo);
  transition:transform var(--transizione),opacity var(--transizione);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.navigazione{
  position:absolute;left:0;right:0;top:100%;
  background:var(--sfondo);
  border-bottom:1px solid var(--bordo);
  box-shadow:var(--ombra);
  display:none;
}
.navigazione.aperta{display:block}
.navigazione ul{display:flex;flex-direction:column;padding:.75rem 1.25rem 1.25rem}
.navigazione a{
  display:block;padding:.75rem .5rem;
  font-family:var(--font-titoli);font-weight:500;font-size:1rem;
  color:var(--testo);
  border-bottom:1px solid var(--bordo);
}
.navigazione li:last-child a{border-bottom:0}
.navigazione a:hover{color:var(--colore-primario)}
.navigazione a.attivo{color:var(--colore-primario)}
.navigazione__cta{margin-top:.75rem}
.navigazione__cta a{border:0;text-align:center}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  color:var(--testo-su-scuro);
  background:var(--sfondo-scuro);
  padding:3.5rem 0 2.5rem;
}
.hero__sfondo{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 10%, color-mix(in srgb, var(--colore-accento) 38%, transparent) 0%, transparent 70%),
    radial-gradient(50% 45% at 10% 90%, color-mix(in srgb, var(--colore-primario) 40%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--sfondo-scuro) 0%, var(--sfondo-scuro-alt) 100%);
}
.hero__sfondo::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--bianco) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--bianco) 5%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero__griglia{position:relative;display:grid;gap:2.5rem;align-items:center}
.hero .etichetta{color:var(--accento-chiaro)}
.hero h1{color:var(--bianco);margin-bottom:1rem}
.hero__sottotitolo{font-size:1.15rem;color:var(--testo-tenue-su-scuro);max-width:34rem;margin-bottom:1.75rem}
.hero__azioni{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}
.hero__punti{display:grid;gap:.5rem;color:var(--testo-tenue-su-scuro);font-size:.95rem}
.hero__punti li{display:flex;align-items:center;gap:.6rem}
.hero__punti li::before{
  content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--colore-primario),var(--colore-accento));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--colore-accento) 25%, transparent);
}

.hero__visual{
  position:relative;max-width:480px;margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
}
.hero__visual img{flex:0 0 100%;width:100%;filter:drop-shadow(0 20px 40px color-mix(in srgb, var(--colore-accento) 30%, transparent))}
.chip{
  flex:1 1 96px;
  display:flex;flex-direction:column;gap:.1rem;
  padding:.6rem .9rem;
  border-radius:12px;
  font-size:.75rem;line-height:1.2;color:var(--testo-tenue-su-scuro);
  background:color-mix(in srgb, var(--sfondo-scuro-alt) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--bianco) 16%, transparent);
  backdrop-filter:blur(10px);
  box-shadow:var(--ombra-forte);
  animation:galleggia 6s ease-in-out infinite;
}
.chip strong{font-family:var(--font-titoli);font-size:1.1rem;color:var(--bianco)}
.chip--b{animation-delay:-2s}
.chip--c{animation-delay:-4s}
@keyframes galleggia{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.hero__competenze{
  position:relative;
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb, var(--bianco) 12%, transparent);
}
.hero__competenze span{
  font-family:var(--font-titoli);font-size:.8rem;font-weight:500;letter-spacing:.04em;
  padding:.4rem .85rem;border-radius:999px;
  color:var(--testo-tenue-su-scuro);
  border:1px solid color-mix(in srgb, var(--bianco) 14%, transparent);
  background:color-mix(in srgb, var(--bianco) 4%, transparent);
}

/* --------------------------------------------------------------------------
   Numeri
   -------------------------------------------------------------------------- */
.numeri{
  background:var(--sfondo);
  border-bottom:1px solid var(--bordo);
}
.numeri__griglia{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.25rem;
  padding:2.25rem 0;
}
.numero{display:grid;gap:.15rem;padding-left:1rem;border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--colore-primario),var(--colore-accento)) 1}
.numero strong{
  font-family:var(--font-titoli);font-size:2.2rem;line-height:1;font-weight:700;
  background:linear-gradient(135deg,var(--colore-primario),var(--colore-accento));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.numero span{font-size:.9rem;color:var(--testo-tenue)}

/* --------------------------------------------------------------------------
   Sezioni generiche
   -------------------------------------------------------------------------- */
.sezione{padding:4.5rem 0}
.sezione--scura{
  position:relative;
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--colore-accento) 22%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--colore-primario) 28%, transparent) 0%, transparent 60%),
    var(--sfondo-scuro);
  color:var(--testo-su-scuro);
}
.sezione--scura h2,.sezione--scura h3{color:var(--bianco)}
.sezione--scura p{color:var(--testo-tenue-su-scuro)}
.sezione--scura .etichetta{color:var(--accento-chiaro)}
.sezione__testa{max-width:44rem;margin-bottom:2.75rem}
.sezione__testa p:last-child{color:var(--testo-tenue);font-size:1.1rem}
.sezione__testa--chiara p:last-child{color:var(--testo-tenue-su-scuro)}

/* --------------------------------------------------------------------------
   Servizi
   -------------------------------------------------------------------------- */
.servizi{background:var(--sfondo-alt)}
.servizi__griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.scheda{
  position:relative;
  display:flex;flex-direction:column;
  padding:1.75rem;
  border-radius:var(--raggio);
  background:var(--sfondo);
  border:1px solid var(--bordo);
  scroll-margin-top:100px;
  transition:transform var(--transizione),box-shadow var(--transizione),border-color var(--transizione);
}
.scheda::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--colore-primario),var(--colore-accento));
  -webkit-mask:linear-gradient(var(--testo) 0 0) content-box,linear-gradient(var(--testo) 0 0);
  mask:linear-gradient(var(--testo) 0 0) content-box,linear-gradient(var(--testo) 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--transizione);
}
.scheda:hover{transform:translateY(-6px);box-shadow:var(--ombra-forte)}
.scheda:hover::before{opacity:1}
.scheda__icona{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;margin-bottom:1.25rem;
  color:var(--colore-primario);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--colore-primario) 12%, var(--sfondo)),
    color-mix(in srgb, var(--colore-accento) 14%, var(--sfondo)));
}
.scheda h3{margin-bottom:.5rem}
.scheda p{color:var(--testo-tenue);font-size:.98rem;flex:1}
.scheda__tag{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.scheda__tag li{
  font-size:.75rem;font-weight:500;letter-spacing:.03em;
  padding:.3rem .65rem;border-radius:999px;
  color:var(--colore-primario-scuro);
  background:color-mix(in srgb, var(--colore-primario) 9%, var(--sfondo));
}

/* --------------------------------------------------------------------------
   Metodo
   -------------------------------------------------------------------------- */
.passi{display:grid;gap:1.25rem;counter-reset:passo;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.passo{
  position:relative;
  padding:1.75rem;border-radius:var(--raggio);
  background:color-mix(in srgb, var(--bianco) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--bianco) 12%, transparent);
  backdrop-filter:blur(6px);
}
.passo__numero{
  display:inline-block;margin-bottom:1rem;
  font-family:var(--font-titoli);font-size:2rem;font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--accento-chiaro),var(--colore-accento));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.passo h3{margin-bottom:.4rem}
.passo p{font-size:.97rem;margin:0}

/* --------------------------------------------------------------------------
   Perché Eratek
   -------------------------------------------------------------------------- */
.perche__griglia{display:grid;gap:2.5rem;align-items:start}
.perche__testo p{color:var(--testo-tenue);font-size:1.1rem;margin-bottom:1.5rem}
.vantaggi{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vantaggio{
  padding:1.5rem;border-radius:var(--raggio);
  background:var(--sfondo-alt);border:1px solid var(--bordo);
}
.vantaggio h3{font-size:1.05rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.6rem}
.vantaggio h3::before{
  content:"";width:10px;height:10px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--colore-primario),var(--colore-accento));
}
.vantaggio p{margin:0;font-size:.95rem;color:var(--testo-tenue)}

/* --------------------------------------------------------------------------
   Settori
   -------------------------------------------------------------------------- */
.settori{padding:2.25rem 0;border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo);background:var(--sfondo)}
.settori .contenitore{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.settori__titolo{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-tenue);margin:0}
.settori__lista{display:flex;flex-wrap:wrap;gap:.5rem}
.settori__lista li{
  font-family:var(--font-titoli);font-size:.9rem;font-weight:500;
  padding:.45rem .95rem;border-radius:999px;
  border:1px solid var(--bordo);background:var(--sfondo-alt);color:var(--testo);
}

/* --------------------------------------------------------------------------
   Chi siamo
   -------------------------------------------------------------------------- */
.chi-siamo__griglia{display:grid;gap:2rem}
.chi-siamo__testo{max-width:46rem}
.chi-siamo__testo p{color:var(--testo-tenue);font-size:1.08rem}
.chi-siamo__valori{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.chi-siamo__valori li{
  position:relative;overflow:hidden;
  display:grid;gap:.35rem;
  padding:1.5rem;border-radius:var(--raggio);
  background:var(--sfondo-alt);border:1px solid var(--bordo);
}
.chi-siamo__valori li::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--colore-primario),var(--colore-accento));
}
.chi-siamo__valori strong{font-family:var(--font-titoli);font-size:1.05rem;color:var(--testo)}
.chi-siamo__valori span{font-size:.95rem;color:var(--testo-tenue)}

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */
.contatti__griglia{display:grid;gap:2.5rem;align-items:center}
.contatti__testo p{font-size:1.1rem;margin-bottom:1.75rem}
.contatti__scheda{
  padding:2rem;border-radius:var(--raggio);
  background:color-mix(in srgb, var(--bianco) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--bianco) 14%, transparent);
  backdrop-filter:blur(8px);
  display:grid;gap:.25rem;
}
.contatti__scheda h3{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accento-chiaro);margin:1rem 0 .35rem;
}
.contatti__scheda h3:first-child{margin-top:0}
.contatti__scheda p{margin:0;color:var(--testo-su-scuro)}
.contatti__scheda a{color:var(--accento-chiaro)}
.contatti__scheda a:hover{color:var(--bianco)}

/* --------------------------------------------------------------------------
   Piè di pagina
   -------------------------------------------------------------------------- */
.pie{
  background:var(--sfondo-scuro);
  color:var(--testo-tenue-su-scuro);
  border-top:1px solid color-mix(in srgb, var(--bianco) 10%, transparent);
  font-size:.95rem;
}
.pie__griglia{display:grid;gap:2rem;padding:3.5rem 0 2rem}
.pie__marchio img{width:150px;margin-bottom:1rem}
.pie__marchio p{max-width:30rem;margin:0}
.pie__titolo{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bianco);margin-bottom:1rem}
.pie__colonna ul{display:grid;gap:.5rem}
.pie a{color:var(--testo-tenue-su-scuro)}
.pie a:hover{color:var(--bianco)}
.pie__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;
  padding:1.25rem 0 1.75rem;
  border-top:1px solid color-mix(in srgb, var(--bianco) 10%, transparent);
  font-size:.85rem;
}
.pie__base p{margin:0}
.hp-legal-links small{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem}

/* --------------------------------------------------------------------------
   Pagina 404
   -------------------------------------------------------------------------- */
.hero--404{min-height:70vh;display:flex;align-items:center;text-align:center}
.errore{position:relative;max-width:40rem}
.errore__codice{
  font-family:var(--font-titoli);font-size:clamp(5rem,18vw,9rem);font-weight:700;line-height:1;margin:0 0 .5rem;
  background:linear-gradient(135deg,var(--colore-primario),var(--colore-accento));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.errore h1{color:var(--bianco)}
.errore .hero__sottotitolo{margin-inline:auto}
.errore .hero__azioni{justify-content:center;margin-bottom:0}

/* --------------------------------------------------------------------------
   Animazione di ingresso (attivata da main.js)
   -------------------------------------------------------------------------- */
.rivela{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.rivela.visibile{opacity:1;transform:none}
.js-non-attivo .rivela{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  .hero{padding:5rem 0 3rem}
  .hero__testo{max-width:44rem}
  .hero__punti{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
  .hero__visual{margin-top:1rem}
  .sezione{padding:6rem 0}
  .contatti__scheda{max-width:560px}
  .pie__griglia{grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
}

/* Menu orizzontale solo quando c'è davvero spazio per tutte le voci */
@media (min-width:960px){
  .menu-toggle{display:none}
  .navigazione{
    position:static;display:block;
    background:transparent;border:0;box-shadow:none;
  }
  .navigazione ul{flex-direction:row;align-items:center;gap:.25rem;padding:0}
  .navigazione a{padding:.5rem .8rem;border:0;font-size:.95rem;border-radius:8px;white-space:nowrap}
  .navigazione a:hover{background:var(--sfondo-alt)}
  .navigazione a.attivo{background:color-mix(in srgb, var(--colore-primario) 8%, var(--sfondo))}
  .navigazione__cta{margin:0 0 0 .75rem}
  .navigazione__cta a:hover{background:var(--colore-primario-scuro)}
}

@media (min-width:1024px){
  .hero{padding:5.5rem 0 3rem}
  .hero__griglia{grid-template-columns:1.1fr .9fr;gap:4rem}
  .hero__testo{max-width:none}
  .hero__visual{display:block;max-width:560px;margin-top:0}
  .chip{position:absolute;flex:none}
  .chip--a{top:0;left:38%}
  .chip--b{right:-2%;top:40%}
  .chip--c{left:-2%;top:42%}
  .perche__griglia{grid-template-columns:.9fr 1.1fr;gap:3.5rem}
  .contatti__griglia{grid-template-columns:1.2fr .8fr;gap:4rem}
  .contatti__scheda{max-width:none}
}