/* =========================================================
   G&G ELETTRONICA — design system
   Font: Libre Franklin (display) · Inter (testo) · IBM Plex Mono (dati/eyebrow)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- colore: base blu-grafite industriale + rame (pad PCB) + teal (traccia) --- */
  --bg:            #ffffff;
  --bg-elev-1:     #f4f7fb;
  --bg-elev-2:     #e8eef5;
  --line:          rgba(7,26,45,.10);
  --line-strong:   rgba(7,26,45,.18);

  --text:          #071a2d;
  --text-muted:    #536170;
  --text-faint:    #7b8794;

  --copper:        #0057A8;   /* blu principale G&G */
  --copper-soft:   rgba(0,87,168,.10);
  --teal:          #2F8EDB;   /* azzurro secondario */
  --teal-soft:     rgba(47,142,219,.12);

  --radius-s:  6px;
  --radius-m:  12px;
  --radius-l:  20px;

  --font-display: 'Libre Franklin', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Consolas', monospace;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0; }
p{ margin:0; }

::selection{ background:var(--copper); color:#ffffff; }

/* focus visibile per accessibilità da tastiera */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 3px var(--copper-soft);
}

/* =========================== HEADER =========================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 90px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:.01em;
}
.site-logo {
    display: block;
    width: 220px;
    height: auto;
}

@media (max-width: 768px) {
    .site-logo {
        width: 150px;
    }
}

/* header più stretto sui telefoni piccoli: senza questo, sotto ~380px
   il lockup logo+divisore+bollino anniversario spinge il bottone menu
   fuori dallo spazio disponibile o lo fa toccare i loghi */
@media (max-width: 400px){
  .brand{ gap:6px; }
  .brand-divider{ margin:0 8px; }
  .anniversary-logo{ width:56px; }
}

.brand-divider {
    width: 1px;
    height: 36px;
    background-color: #d0d5da;
    margin: 0 16px;
}

.anniversary-logo {
    display: block;
    width: 80px;
    height: auto;
}

.main-nav ul{ display:flex; align-items:center; gap:36px; }
.main-nav a{
  font-size:14.5px; font-weight:500; color:var(--text-muted);
  position:relative; padding:6px 0;
  transition:color .15s ease;
}
.main-nav a:hover{ color:var(--text); }
.main-nav a.active{ color:var(--text); }
.main-nav a.active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-3px;
  height:2px; background:var(--copper);
  border-radius:2px;
}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--copper); color:#ffffff !important;
  font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px -8px var(--copper-soft); }

.nav-toggle{ display:none; }

/* --- selettore lingua (placeholder, disattivato: la versione inglese
   arriverà a sito ultimato — vedi commento HTML accanto al markup).
   Le opzioni sono bandierine SVG codificate a mano (stesso approccio
   delle icone social nel footer, nessuna dipendenza esterna). --- */
.lang-switch{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-elev-1);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:5px;
}
.lang-switch .lang-opt{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:22px;
  padding:0;
  border:none;
  background:none;
  border-radius:5px;
  overflow:hidden;
  cursor:default;
}
/* preserveAspectRatio="slice" nel markup fa sì che la bandiera riempia
   tutto il riquadro mantenendo le proporzioni corrette (croppata sui
   bordi se serve), invece di essere stirata per adattarsi al box. */
.lang-switch .lang-opt .flag{ width:100%; height:100%; display:block; }
.lang-switch .lang-opt.is-active{ box-shadow:0 0 0 2px var(--copper); }
.lang-switch .lang-opt:disabled{
  cursor:not-allowed;
  opacity:.4;
  filter:grayscale(.7);
}

/* =========================== BOTTONI =========================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:13px 24px; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--copper); color:#ffffff; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(217,138,62,.55); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--copper); color:var(--copper); }
.btn-sm{ padding:10px 22px; font-size:14px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================== HERO =========================== */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 85% 0%, rgba(47,142,219,.35), transparent 55%),
    linear-gradient(160deg, #0a2540 0%, #071a2d 60%);
}
.hero-content{
  position:relative; z-index:1;
  padding:60px 0 52px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  font-size:clamp(38px, 5vw, 60px);
  letter-spacing:-.01em;
  max-width:16ch;
  color:#ffffff;
}
.hero h1 em{
  font-style:normal;
  color:var(--copper);
}
.hero-sub{
  margin-top:22px;
  font-size:17px;
  color:var(--text-muted);
  max-width:52ch;
}
.hero .hero-sub{ color:rgba(255,255,255,.76); }
.hero .btn-row{ margin-top:34px; }
.hero .btn-ghost{
  color:#ffffff;
  border-color:rgba(255,255,255,.35);
}
.hero .btn-ghost:hover{
  border-color:#ffffff;
  color:#ffffff;
}

.hero-stats{
  display:flex; flex-direction:column; gap:22px;
  border-left:1px solid rgba(255,255,255,.18);
  padding-left:32px;
}
.hero-stat b{
  display:block;
  font-family:var(--font-display); font-size:30px; font-weight:700;
  color:#ffffff;
}
.hero-stat span{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:rgba(255,255,255,.76); text-transform:uppercase;
}

/* --- sfondo animato a circuito (SVG + CSS, nessuna dipendenza esterna) ---
   una trama di tracce PCB in bianco a bassa opacità copre lo sfondo;
   un sottoinsieme di tracce e "via" si illumina a tratti, come corrente
   che scorre nel circuito. Decorativo (aria-hidden) e sotto al contenuto
   (z-index:0), pensato per restare leggero e non competere col testo. */
.hero-circuit{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.circuit-svg{ width:100%; height:100%; display:block; }

/* --- bagliore ambientale che deriva lentamente: aggiunge vita atmosferica
   di sfondo (la luce si sposta piano) senza nessuna forma riconoscibile
   che si muove — a differenza di tratteggi o scintille, non rischia di
   leggersi come qualcosa che "cammina". --- */
.hero-ambient-glow{
  position:absolute;
  width:640px; height:640px;
  top:-220px; right:-140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,142,219,.4), transparent 70%);
  filter:blur(50px);
  animation:ambient-drift 16s ease-in-out infinite;
}
@keyframes ambient-drift{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-50px, 40px) scale(1.12); }
}

/* --- traccia che "respira": solo un pulsare di luminosità sull'intera
   linea, niente tratteggio in movimento — un tratteggio animato (dashoffset
   che scorre) è visivamente identico al classico effetto "marching ants",
   che a bassa velocità legge come una fila di insetti in cammino invece
   che come corrente. Linea continua, nessun segmento che si sposta. --- */
.glow-trace{
  fill:none; stroke:#ffffff; stroke-width:1.6;
  stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.6));
  animation:circuit-trace-pulse 4.4s ease-in-out infinite;
}
.glow-trace.t2{ animation-duration:5.2s; animation-delay:-.8s; }
.glow-trace.t3{ animation-duration:3.8s; animation-delay:-2.1s; }
.glow-trace.t4{ animation-duration:4.9s; animation-delay:-1.5s; }
.glow-trace.t5{ animation-duration:5.6s; animation-delay:-3.2s; }
.glow-trace.t6{ animation-duration:4.2s; animation-delay:-.4s; }
.glow-trace.t7{ animation-duration:4.6s; animation-delay:-2.6s; }
.glow-trace.t8{ animation-duration:5.1s; animation-delay:-.9s; }

.glow-dot{
  fill:#ffffff;
  opacity:0;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
  animation:circuit-pulse 3.8s ease-in-out infinite;
}
@keyframes circuit-trace-pulse{
  0%, 100%{ opacity:.2; }
  50%{ opacity:.8; }
}
@keyframes circuit-pulse{
  0%, 100%{ opacity:0; }
  50%{ opacity:.85; }
}

/* =========================== TRACCIA PCB — elemento firma =========================== */
/* Divisore tra sezioni disegnato come una traccia di circuito con "via" (nodi).
   Puramente decorativo (aria-hidden), coerente col mondo dell'assemblaggio schede. */
.trace-divider{
  position:relative;
  height:64px;
  width:100%;
}
.trace-divider svg{ width:100%; height:100%; display:block; }
.trace-divider path{
  fill:none;
  stroke:var(--line-strong);
  stroke-width:1.5;
}
.trace-divider circle{ fill:var(--teal); }

/* =========================== SEZIONI GENERICHE =========================== */
section{ padding:96px 0; }
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(28px,3.4vw,38px);
  margin-top:14px;
}
.section-head p{
  margin-top:16px;
  color:var(--text-muted);
  font-size:15.5px;
}
.section-alt{ background:var(--bg-elev-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* --- variante scura, stesso blu navy della sezione "Investimenti e
   innovazione" (pagina Azienda) — per sezioni che vogliono lo stesso tono --- */
.section-dark{
  background:
    radial-gradient(circle at 85% 0%, rgba(47,142,219,.35), transparent 55%),
    linear-gradient(160deg, #0a2540 0%, #071a2d 60%);
  color:#ffffff;
}
.section-dark .eyebrow{ color:#ffffff; }
.section-dark .eyebrow::before{ background:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.section-dark .section-head p{ color:rgba(255,255,255,.76); }
.section-dark .card{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
}
.section-dark .card:hover{ border-color:rgba(255,255,255,.32); }
.section-dark .card .icon{ background:rgba(255,255,255,.14); color:#ffffff; }
.section-dark .card h3{ color:#ffffff; }
.section-dark .card p{ color:rgba(255,255,255,.72); }

/* --- variante con foto di sfondo a effetto parallasse: overlay più
   coperto e uniforme del solito .feature-band-media, per non far
   competere la trama della foto con le card sopra --- */
.section-dark--photo{ position:relative; overflow:hidden; }
.section-dark--photo .wrap{ position:relative; z-index:1; }
.section-dark--photo .feature-band-media::after{
  background:linear-gradient(160deg, rgba(10,37,64,.68) 0%, rgba(7,26,45,.58) 55%, rgba(7,26,45,.5) 100%);
}
.section-dark--photo .card{ background:rgba(7,26,45,.55); backdrop-filter:blur(3px); border-color:rgba(255,255,255,.22); }

/* =========================== INTRO / TESTO =========================== */
.lede{
  font-size:19px;
  line-height:1.7;
  color:var(--text-muted);
  max-width:820px;
}
.lede strong{ color:var(--text); font-weight:600; }
.lede a{
  color:var(--copper);
  text-decoration:underline;
  text-decoration-color:var(--copper-soft);
  text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.lede a:hover{ color:var(--teal); text-decoration-color:var(--teal-soft); }

/* =========================== CARD GRID =========================== */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--bg-elev-1);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:30px;
  transition:border-color .15s ease, transform .15s ease;
}

/* --- variante con foto di sfondo, visibile solo al passaggio del mouse ---
   la foto si imposta per singola card con lo stile inline
   "--card-bg-img: url('...')" (vedi HTML). Molto trasparente e non
   invasiva: appare solo con :hover, il contenuto resta sempre sopra
   e perfettamente leggibile. */
.card--photo-hover{ position:relative; overflow:hidden; }
.card--photo-hover::after{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.card--photo-hover:hover::after{ opacity:.3; }
.card--photo-hover > *{ position:relative; z-index:1; }
.card--smd::after{ background-image:url('../assets/img/pick-place-color.jpg'); }
.card--tht::after{ background-image:url('../assets/img/montaggio-tht.jpg'); }
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.card .icon{
  width:42px; height:42px;
  border-radius:10px;
  background:var(--copper-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  color:var(--copper);
}
.card h3{ font-size:18px; margin-bottom:10px; }
.card p{ color:var(--text-muted); font-size:14.5px; }

/* liste con marker "via" (pallino ramato) al posto dei bullet standard */
.via-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:14px;
  color:var(--text-muted);
  font-size:15px;
}
.via-list li::before{
  content:'';
  position:absolute; left:0; top:8px;
  width:9px; height:9px; border-radius:50%;
  background:var(--bg);
  border:2px solid var(--copper);
}
.via-list li strong{ color:var(--text); font-weight:600; }

/* =========================== NUMERI / STATISTICHE =========================== */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
}
.stat-strip .stat{
  padding:26px 28px;
  border-right:1px solid var(--line);
}
.stat-strip .stat:last-child{ border-right:none; }
.stat b{
  display:block;
  font-family:var(--font-display); font-size:42px; font-weight:700;
  color:var(--copper);
}
/* --- numero + unità di misura sulla stessa riga, senza andare a capo:
   l'unità (es. "MLN") sta a destra del numero animato, più piccola --- */
.stat-number{ display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.stat-number .stat-unit{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--copper);
}
.stat span{
  display:block; margin-top:8px;
  font-size:13.5px; color:var(--text-muted);
}
.stat-note{
  margin-top:14px;
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--text-faint);
}

/* =========================== SETTORI / SOTTONAVIGAZIONE (tag grid) =========================== */
/* usata sia per gli elenchi di settori (span) sia per le pillole di
   navigazione interna alla pagina (a), es. la sottonavigazione di Azienda */
.tag-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.tag-grid span, .tag-grid a{
  display:inline-block;
  font-family:var(--font-mono); font-size:13px;
  padding:10px 18px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--text-muted);
  transition:border-color .15s ease, color .15s ease;
}
.tag-grid span:hover, .tag-grid a:hover{ border-color:var(--teal); color:var(--teal); }

/* =========================== IMMAGINE / MEDIA PLACEHOLDER =========================== */
/* Riquadro segnaposto per le immagini: sostituire con <img>, vedi commenti HTML e README */
.media-frame{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, var(--bg-elev-2) 0 12px, var(--bg-elev-1) 12px 24px);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.media-frame .placeholder-label{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
  background:rgba(16,20,26,.75);
  border:1px dashed var(--line-strong);
  padding:14px 20px;
  border-radius:var(--radius-s);
  max-width:80%;
}
.media-frame img,
.media-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border:0;
}
/* variante 16:9 per i riquadri video (es. embed YouTube) */
.video-frame{ aspect-ratio:16/9; }

/* --- dettaglio statico del motivo a circuito, per sfondi chiari ---
   stesso linguaggio grafico dell'animazione nella hero, ma fermo e con
   i colori del brand invece del bianco (pensato per stare su .media-frame). */
.circuit-detail{
  background:var(--bg-elev-1);
  padding:32px;
}
.circuit-detail svg{ width:100%; height:100%; }
.cd-trace{ fill:none; stroke:var(--line-strong); stroke-width:2; }
.cd-trace--accent{ stroke:var(--copper); }
.cd-via{ fill:var(--copper); }
.cd-via--hollow{ fill:var(--bg-elev-1); stroke:var(--line-strong); stroke-width:2; }
.cd-via--accent{ fill:var(--teal); }

/* punto di arrivo degli anchor link ai settori (dal paragrafo/tag in alto),
   con margine per non finire nascosti sotto l'header fisso */
[id^="settore-"]{ scroll-margin-top:110px; }

/* =========================== PROCESSO (steps) =========================== */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
.process-step{
  padding:0 24px 0 0;
  position:relative;
}
.process-step:not(:last-child)::after{
  content:'';
  position:absolute; top:20px; right:0;
  width:24px; height:1px;
  background:var(--line-strong);
}
.process-step .tag{
  font-family:var(--font-mono); font-size:12px; color:var(--teal);
  letter-spacing:.06em;
}
.process-step h4{ font-size:16px; margin:12px 0 8px; }
.process-step p{ font-size:14px; color:var(--text-muted); }

/* --- adattamento su sfondo scuro (.section-dark): il divisore e il testo
   del passaggio userebbero altrimenti colori pensati per sfondo chiaro,
   quasi invisibili sul blu navy --- */
.section-dark .process-step:not(:last-child)::after{ background:rgba(255,255,255,.28); }
.section-dark .process-step p{ color:rgba(255,255,255,.72); }

/* =========================== LINEE DI PRODUZIONE (carosello scorribile) =========================== */
.line-carousel{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:16px;
  margin-top:32px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.line-carousel::-webkit-scrollbar{ height:8px; }
.line-carousel::-webkit-scrollbar-track{ background:transparent; }
.line-carousel::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; }
.line-card{
  flex:0 0 auto;
  width:min(640px, 84vw);
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-l);
  overflow:hidden;
}
.line-card .media-frame{ border-radius:0; border:none; aspect-ratio:auto; height:100%; min-height:260px; }
.line-card-body{ padding:30px; display:flex; flex-direction:column; justify-content:center; }

/* =========================== VIDEO (carosello scorribile) =========================== */
.video-carousel{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:16px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.video-carousel::-webkit-scrollbar{ height:8px; }
.video-carousel::-webkit-scrollbar-track{ background:transparent; }
.video-carousel::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; }
.video-carousel .media-frame{
  flex:0 0 auto;
  width:min(640px, 82vw);
  scroll-snap-align:start;
}
.line-card-body h3{ font-size:18px; }
.line-card-body p{ margin-top:10px; color:var(--text-muted); font-size:14px; line-height:1.6; }

/* =========================== PERSONA / TEAM =========================== */
.person-card{
  display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:center;
  background:var(--bg-elev-1); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:32px;
}
.person-card .media-frame{ aspect-ratio:1/1; border-radius:var(--radius-m); }
.person-card h3{ font-size:20px; }
.person-card .role{
  font-family:var(--font-mono); font-size:12.5px; color:var(--copper);
  text-transform:uppercase; letter-spacing:.06em; margin:6px 0 14px;
  display:block;
}
.person-card p{ color:var(--text-muted); font-size:14.5px; }
.person-card .links{ margin-top:16px; display:flex; gap:12px; }
.person-card .links a{
  font-family:var(--font-mono); font-size:12.5px;
  border:1px solid var(--line-strong); padding:7px 14px; border-radius:999px;
  color:var(--text-muted);
}
.person-card .links a:hover{ border-color:var(--copper); color:var(--copper); }

/* =========================== SOSTENIBILITÀ / VALORI =========================== */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; }
.values-grid .card{ border:none; border-radius:0; background:var(--bg-elev-1); }

/* =========================== CTA BAND =========================== */
.cta-band{
  background:var(--bg-elev-1);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:56px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  flex-wrap:wrap;
}
.cta-band h2{ font-size:28px; max-width:20ch; }
.cta-band p{ color:var(--text-muted); margin-top:10px; }

/* =========================== FORM (Contatti) =========================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1 / -1; }
label{
  display:block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:8px;
}
input, textarea, select{
  width:100%;
  background:var(--bg-elev-1);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-s);
  padding:13px 14px;
  color:var(--text);
  font-family:var(--font-body); font-size:14.5px;
  transition:border-color .15s ease;
}
input:focus, textarea:focus, select:focus{ border-color:var(--copper); }
textarea{ resize:vertical; min-height:130px; }

input[type="file"]{
  padding:10px 14px;
  font-size:13.5px;
  color:var(--text-muted);
}
input[type="file"]::file-selector-button{
  font-family:var(--font-body); font-weight:600; font-size:13px;
  color:var(--copper);
  background:var(--copper-soft);
  border:none; border-radius:var(--radius-s);
  padding:8px 14px;
  margin-right:12px;
  cursor:pointer;
  transition:background .15s ease;
}
input[type="file"]::file-selector-button:hover{ background:rgba(0,87,168,.18); }
.form-note{
  margin-top:16px; font-size:13px; color:var(--text-faint);
}

.info-card{
  background:var(--bg-elev-1); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:26px; margin-bottom:16px;
}
.info-card .eyebrow{ margin-bottom:10px; }
.info-card p{ font-size:15px; color:var(--text-muted); }
.info-card a{ color:var(--teal); }

/* --- riquadro "cosa succede dopo l'invio", sotto il form contatti ---
   colore diverso (teal invece del grigio delle info-card) per distinguerlo
   visivamente come nota di processo, non come un recapito. Contenuto
   segnaposto: testo definitivo da aggiungere. */
.highlight-card{
  background:var(--teal-soft);
  border:1px solid rgba(47,142,219,.28);
  border-radius:var(--radius-m);
  padding:22px 26px;
}
.highlight-card .eyebrow{ color:var(--teal); }
.highlight-card .eyebrow::before{ background:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.highlight-card p{ margin-top:10px; font-size:14.5px; color:var(--text-muted); line-height:1.6; }

/* =========================== FEATURE BAND (immagine di sfondo statica) =========================== */
.feature-band{
  position:relative;
  overflow:hidden;
  padding:110px 0;
  color:#ffffff;
}
/* l'immagine si imposta per singola istanza con style="background-image:url('...')"
   sull'elemento .feature-band-media (vedi HTML) — così il componente è
   riutilizzabile con foto diverse mantenendo lo stesso effetto parallasse. */
.feature-band-media{
  position:absolute; inset:0;
  z-index:0;
  background-color:#071a2d;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* su iOS Safari "background-attachment:fixed" non è supportato: l'immagine
   torna semplicemente a scorrere insieme al resto (nessun effetto rotto). */
.feature-band-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(7,26,45,.94) 0%, rgba(7,26,45,.86) 42%, rgba(7,26,45,.62) 100%);
}
.feature-band .wrap{ position:relative; z-index:1; }
.feature-band .eyebrow{ color:#ffffff; }
.feature-band .eyebrow::before{ background:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.feature-band h2{
  margin-top:14px; font-size:clamp(26px,3.2vw,34px); max-width:22ch;
}
.feature-band-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:52px;
  align-items:center;
  margin-top:32px;
}
.feature-band-stat{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(58px,8vw,96px); line-height:1;
  color:#ffffff; white-space:nowrap;
}
.feature-band-stat span{
  display:block; margin-top:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.7); white-space:normal; max-width:16ch;
}
.feature-band-grid p{
  font-size:17px; line-height:1.75;
  color:rgba(255,255,255,.86);
  max-width:56ch;
}

/* --- variante verde, per la sezione Sostenibilità --- */
.feature-band--green .feature-band-media{ background-color:#06301f; }
.feature-band--green .feature-band-media::after{
  background:linear-gradient(100deg, rgba(6,48,31,.94) 0%, rgba(6,48,31,.86) 42%, rgba(6,48,31,.6) 100%);
}
.feature-band--green .eyebrow::before{ background:#3ddc8a; box-shadow:0 0 0 3px rgba(61,220,138,.3); }
.feature-band--green .feature-band-stat{ color:#3ddc8a; }

/* =========================== MAPPA (Contatti) =========================== */
.map-frame{
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:21/7;
}
.section-dark .map-frame{ border-color:rgba(255,255,255,.18); }
.section-dark .media-frame{ border-color:rgba(255,255,255,.18); }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* --- placeholder "carica su richiesta": nessuna chiamata a Google finché
   l'utente non clicca (vedi script.js) --- */
.map-placeholder{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, var(--bg-elev-2) 0 12px, var(--bg-elev-1) 12px 24px);
}
.section-dark .map-placeholder{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.02) 12px 24px);
}
.map-placeholder-inner{ text-align:center; }
.map-placeholder-inner p{
  font-size:14px; margin-bottom:16px;
  color:var(--text-muted);
}
.section-dark .map-placeholder-inner p{ color:rgba(255,255,255,.76); }

/* =========================== FOOTER =========================== */
footer{
  padding:56px 0 32px;
  background:
    radial-gradient(circle at 85% 0%, rgba(47,142,219,.3), transparent 55%),
    linear-gradient(160deg, #0a2540 0%, #071a2d 60%);
  color:#ffffff;
}
.footer-logo{ width:160px; height:auto; display:block; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-top h5{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:rgba(255,255,255,.5); margin-bottom:16px;
}
.footer-top li{ margin-bottom:10px; }
.footer-top a{ color:rgba(255,255,255,.76); font-size:14.5px; }
.footer-top a:hover{ color:#ffffff; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; flex-wrap:wrap; gap:12px;
}
.footer-bottom p{ font-size:13px; color:rgba(255,255,255,.5); font-family:var(--font-mono); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.76);
  transition:border-color .15s ease, color .15s ease;
}
.footer-social a svg{ width:17px; height:17px; }
.footer-social a:hover{ border-color:#ffffff; color:#ffffff; }

/* =========================== PAGE HEADER (pagine interne) =========================== */
.page-head{
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 85% 0%, var(--copper-soft), transparent 55%);
}
.page-head h1{ font-size:clamp(32px,4.4vw,46px); margin-top:14px; max-width:18ch; }
.page-head p{ margin-top:16px; color:var(--text-muted); max-width:60ch; font-size:16px; }

/* --- variante scura, per staccare nettamente dal bianco della sezione
   sottostante (usata sulla pagina Azienda) --- */
.page-head--dark{
  background:
    radial-gradient(circle at 85% 0%, rgba(47,142,219,.35), transparent 55%),
    linear-gradient(160deg, #0a2540 0%, #071a2d 60%);
  border-bottom-color:transparent;
}
.page-head--dark .eyebrow{ color:#ffffff; }
.page-head--dark .eyebrow::before{ background:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.page-head--dark h1{ color:#ffffff; }
.page-head--dark p{ color:rgba(255,255,255,.78); }

/* --- variante con foto di sfondo a effetto parallasse (usa insieme a
   .page-head--dark: il colore/overlay arriva da .feature-band-media) --- */
.page-head--photo{
  position:relative;
  overflow:hidden;
  background:none;
}
.page-head--photo .wrap{ position:relative; z-index:1; }

/* =========================== TIMELINE (storia aziendale) =========================== */
.timeline-block{ margin-top:44px; }

/* --- versione desktop: nastro di frecce con contenuti alternati sopra/sotto --- */
.timeline-desktop{ overflow-x:auto; padding-bottom:6px; }
.timeline-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:auto 32px auto 32px auto;
  column-gap:3px;
  min-width:1080px;
}
.tl-item{ display:contents; }
.tl-item > *{ grid-column:var(--col); }

/* card "a comparsa": chiusa mostra solo il titolo (altezza fissa e uguale per
   tutti i blocchi, per simmetria), aperta rivela l'elenco delle tappe */
.tl-content{
  background:var(--bg-elev-1);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tl-content[open]{ border-color:var(--copper); box-shadow:0 16px 32px -18px rgba(7,26,45,.28); }
.tl-top .tl-content{ grid-row:1; align-self:end; }
.tl-bottom .tl-content{ grid-row:5; align-self:start; }

.tl-content summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:76px;
  padding:0 22px;
  font-family:var(--font-display); font-size:16.5px; font-weight:700;
  color:var(--copper);
  -webkit-tap-highlight-color:transparent;
}
.tl-content summary::-webkit-details-marker{ display:none; }
.tl-content summary::after{
  content:'+';
  flex-shrink:0;
  width:24px; height:24px; border-radius:50%;
  background:var(--copper-soft);
  color:var(--copper);
  font-family:var(--font-mono); font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.tl-content[open] summary::after{ content:'–'; }
.tl-content summary:hover{ background:var(--bg-elev-2); }

.tl-body{ padding:0 22px 22px; }
.tl-body ul{ display:flex; flex-direction:column; gap:9px; }
.tl-body li{
  position:relative; padding-left:16px;
  font-size:13.5px; line-height:1.55; color:var(--text-muted);
}
.tl-body li::before{
  content:''; position:absolute; left:0; top:7px;
  width:5px; height:5px; border-radius:50%; background:var(--copper);
}

.tl-connector{ justify-self:center; position:relative; width:2px; background:var(--line-strong); }
.tl-top .tl-connector{ grid-row:2; }
.tl-bottom .tl-connector{ grid-row:4; }
.tl-top .tl-connector::before{
  content:''; position:absolute; left:50%; top:-1px; transform:translate(-50%,-100%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:6px solid var(--line-strong);
}
.tl-bottom .tl-connector::after{
  content:''; position:absolute; left:50%; bottom:-1px; transform:translate(-50%,100%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--line-strong);
}

.tl-chevron{
  grid-row:3;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px 18px;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:15.5px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
  margin-left:-18px;
}
.tl-item:first-child .tl-chevron{
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  margin-left:0;
}

/* --- versione mobile: timeline verticale --- */
.timeline-mobile{ display:none; }
.tl-m-item{ position:relative; padding:0 0 32px 26px; border-left:2px solid var(--line-strong); }
.tl-m-item:last-child{ padding-bottom:0; border-left-color:transparent; }
.tl-m-item::before{
  content:''; position:absolute; left:-7px; top:2px;
  width:12px; height:12px; border-radius:50%;
  background:var(--copper); border:2px solid var(--bg);
  box-shadow:0 0 0 2px var(--copper);
}
.tl-m-period{
  display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:#fff; padding:4px 12px; border-radius:999px; margin-bottom:10px;
}
.tl-m-item h4{ font-size:16px; margin-bottom:10px; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stats{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:24px; flex-direction:row; flex-wrap:wrap; }
  .grid-3, .grid-4, .values-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-strip{ grid-template-columns:repeat(3,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .process-step::after{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .person-card{ grid-template-columns:1fr; }
  .person-card .media-frame{ max-width:220px; }
  .feature-band-grid{ grid-template-columns:1fr; gap:24px; }
  .line-card{ width:min(520px, 88vw); }
}

@media (max-width: 720px){
  .wrap{ padding:0 20px; }
  .main-nav{
    /* .site-header ha backdrop-filter, che lo rende "contenitore di
       riferimento" per i suoi discendenti in position:fixed: "bottom:0"
       finirebbe per calcolarsi rispetto all'header (alto ~90px) invece
       che rispetto allo schermo. Usiamo height con un'unità di
       viewport (sempre relativa allo schermo reale) invece di bottom. */
    position:fixed;
    top:76px; left:0; right:0;
    height:calc(100vh - 76px);
    overflow-y:auto;
    background:var(--bg);
    padding:32px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .main-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  .main-nav a{ font-size:19px; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; justify-content:center;
    width:32px; height:32px; background:none; border:none; cursor:pointer;
  }
  .nav-toggle span{ height:2px; background:var(--text); border-radius:2px; }

  .grid-3, .grid-4, .values-grid{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:1fr; }
  .stat-strip .stat{ border-right:none; border-bottom:1px solid var(--line); }
  .process{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:36px; flex-direction:column; align-items:flex-start; }
  .line-card{ grid-template-columns:1fr; width:min(360px, 86vw); }
  .line-card .media-frame{ min-height:180px; }

  .timeline-desktop{ display:none; }
  .timeline-mobile{ display:block; }

  .map-frame{ aspect-ratio:4/3; }

  /* meno spazio verticale per sezione: sullo stesso schermo stretto e alto
     di un telefono, i padding pensati per desktop (spesso 90-110px) rendono
     lo scroll lunghissimo senza reale beneficio di leggibilità */
  section{ padding:60px 0; }
  .feature-band{ padding:64px 0; }

  /* impedisce lo zoom automatico che iOS Safari applica quando il
     font-size di un campo è sotto i 16px al focus */
  input, textarea, select{ font-size:16px; }

  /* bottone menu: area di tocco più comoda (32px era sotto i 44px
     consigliati), stessa icona visiva */
  .nav-toggle{ width:44px; height:44px; }

  /* icone social del footer: stesso ragionamento */
  .footer-social a{ width:40px; height:40px; }

  /* trafiletti con due bottoni (Azienda, Servizi): impilati a piena
     larghezza invece di affiancarsi stretti o andare a capo storti */
  .cta-band .btn-row{ flex-direction:column; width:100%; }
  .cta-band .btn-row .btn{ width:100%; justify-content:center; }

  /* il titolo hero ha un <br> pensato per il bilanciamento delle righe
     su desktop: su schermo stretto il testo va comunque a capo da solo,
     quindi lo disattiviamo per non creare righe corte e sbilanciate */
  .hero-break{ display:none; }
}