/* =========================
   AssicurAmbiente — stile.css
   Design system derivato dalla homepage Safety Insurance,
   con palette adattata alla brand identity verde.
   Font self-hosted in /fonts/ (nessuna dipendenza online).
   ========================= */

/* =========================
   FONT LOCALI — @font-face
   File WOFF2 in /fonts/, scaricati da Google Fonts.
   ========================= */

/* Barlow Condensed 700 */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow Condensed 900 */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/barlow-condensed-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/barlow-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 400 */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 600 */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-600-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-600-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/inter-600-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/inter-600-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================
   VARIABILI CSS — TEMA
   Palette colori e valori globali riutilizzati
   in tutto il foglio di stile tramite var(--nome).
   ========================= */
:root {
  /* Colori principali — palette verde AssicurAmbiente
     Estratti dall'immagine hero (paesaggio naturale italiano):
     ombre profonde del fogliame → --navy
     verde foresta medio (foglie in ombra) → --navy-light
     verde campo all'ombra (saturo, terroso) → --blue-mid
     verde foglia illuminata → --blue-light
     highlight retroilluminato dell'albero (verde-giallo caldo) → --lime
  */
  --navy:        #1e3d14;  /* ombra profonda fogliame — sfondo sezioni dark */
  --navy-light:  #33592a;  /* verde foresta medio, foglia in ombra parziale */
  --blue-mid:    #558a2a;  /* verde campo saturo-terroso — verde brand */
  --blue-light:  #88c258;  /* verde foglia illuminata — badge e dot */
  --lime:        #7db82e;  /* highlight retroilluminato albero — accent principale */
  --lime-dark:   #6a9e24;  /* --lime scurito ~15% — hover bottoni */
  --cream:       #f4f7f0;  /* avorio con lieve tinta calda-verde — sfondo chiaro */
  --cream-dark:  #e4ead8;  /* cream più scuro, accordato luce solare foto */

  /* Colore del testo principale */
  --text: #1e3d14;

  /* Ombre */
  --shadow-lg: 0 10px 30px rgba(0,0,0,.18);   /* ombra media */
  --shadow-xl: 0 18px 60px rgba(0,0,0,.22);   /* ombra grande (hover card) */

  /* Border radius globale per le card */
  --radius: 16px;

  /* Larghezza massima del contenitore centrale (≈ max-w-7xl di Tailwind) */
  --container: 80rem;
}

/* =========================
   RESET BASE
   Regole minime per uniformare i browser.
   ========================= */
* { box-sizing: border-box; }   /* il padding non aumenta la larghezza degli elementi */
html {
  scroll-behavior: smooth;          /* scorrimento fluido tra le sezioni */
  scroll-padding-top: var(--header-h, 76px); /* impostato dinamicamente da JS */
}
html.soft-scroll-ready {
  scroll-behavior: auto;            /* lo scroll inerziale desktop viene gestito da JS */
}
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;      /* anti-aliasing su WebKit/Chrome */
  -moz-osx-font-smoothing: grayscale;       /* anti-aliasing su Firefox/macOS */
}
a   { color: inherit; text-decoration: none; } /* i link ereditano il colore e non hanno sottolineatura */
img { display: block; max-width: 100%; }        /* le immagini non escono dal loro contenitore */
button { font: inherit; }                       /* i button ereditano il font del body */

/* =========================
   UTILITY GENERALI
   Classi helper riutilizzabili in tutto il HTML.
   ========================= */

/* Contenitore centrato con larghezza massima */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px; /* spazio laterale (≈ px-6 Tailwind) */
}

/* Impedisce al testo lungo di rompersi in modo sgradevole */
.text-balance { text-wrap: balance; }

/* Classe accessibilità: nasconde visualmente ma rimane leggibile dagli screen reader */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================
   ANIMAZIONI KEYFRAME
   Riutilizzate tramite le classi .float, .float-rev, .pulse.
   ========================= */

/* Galleggiamento verso l'alto con leggera rotazione */
@keyframes float-triangle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(5deg); }
}

/* Galleggiamento verso il basso (inverso) */
@keyframes float-triangle-reverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(15px) rotate(-3deg); }
}

/* Pulsazione di opacità (usata sui blob di sfondo) */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 0.35; }
}

/* Scorrimento del gradiente nei bordi animati delle card e nav-link */
@keyframes border-glow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Classi che applicano le animazioni agli elementi */
.float     { animation: float-triangle         6s ease-in-out infinite; }
.float-rev { animation: float-triangle-reverse 7s ease-in-out infinite; }
.pulse     { animation: pulse-glow             4s ease-in-out infinite; }
.delay-2   { animation-delay: 2s; } /* ritardo per sfasare due blob vicini */

/* =========================
   SCROLL REVEAL
   Gli elementi .section-reveal partono invisibili e
   traslati verso il basso. Quando JS aggiunge la
   classe "visible" (tramite IntersectionObserver),
   scatta la transizione CSS.
   ========================= */
.section-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .72s cubic-bezier(.22, .61, .36, 1),
    transform .72s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.section-reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* =========================
   HEADER / NAVIGAZIONE
   Header fisso in cima, trasparente di default.
   Diventa opaco (navy + blur) dopo 60px di scroll.
   ========================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;               /* sopra tutto il resto */
  transition: background .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
  background: transparent;   /* trasparente sulla hero */
}

/* Stato dopo lo scroll: sfondo blue-mid semitrasparente con effetto vetro */
.site-header.scrolled {
  background: rgba(85, 138, 42,.92);   /* --blue-mid: il logo navy contrasta naturalmente */
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}

/* Quando il menu mobile è aperto: header completamente opaco
   (anche se non hai ancora scrollato) per evitare che la hero si intraveda */
.site-header.menu-open {
  background: rgb(85, 138, 42);   /* --blue-mid solido, stesso tono del menu */
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
}

/* Barra di navigazione: flex tra logo e voci di menu */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ── LOGO / BRAND ── */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  /* Badge circolare cream: isola il logo verde dallo sfondo verde dell'header */
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cream);
  /* Bordo sottile: gradient conic che ruota lentamente — discreto, non invadente */
  outline: 2px solid transparent;
  outline-offset: 0;
  background-clip: padding-box;
  position: relative;
  /* Ombra con tonalità verde per integrarsi col brand, non un grigio neutro */
  box-shadow:
    0 2px 6px rgba(30, 61, 20, .18),
    0 5px 16px rgba(30, 61, 20, .12);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Anello gradient conic tramite pseudo-elemento — non tocca l'immagine */
.brand-mark::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from var(--_angle, 0deg),
    var(--lime)       0deg,
    var(--blue-light) 90deg,
    var(--lime)       180deg,
    var(--blue-light) 270deg,
    var(--lime)       360deg
  );
  /* Maschera: il bordo è visibile, l'interno viene tagliato */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  /* Rotazione continua, amplissima durata → quasi impercettibile in movimento */
  animation: brand-ring-spin 8s linear infinite;
  opacity: .55;
  transition: opacity .3s ease;
}

/* @property per l'angolo — garantisce interpolazione CSS nativa dove supportato */
@property --_angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes brand-ring-spin {
  to { --_angle: 360deg; }
}

/* Hover: ombra più pronunciata + anello più visibile */
.brand:hover .brand-mark {
  transform: scale(1.08);
  box-shadow:
    0 4px 10px rgba(30, 61, 20, .22),
    0 8px 24px rgba(30, 61, 20, .18);
}
.brand:hover .brand-mark::before {
  opacity: .90;
}

.brand-mark img {
  width: 34px; height: 34px; /* padding visivo: 10px su 54px = 5px per lato */
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Reduced motion: ferma la rotazione, mantieni il bordo statico */
@media (prefers-reduced-motion: reduce) {
  .brand-mark::before { animation: none; }
}
/* Testo accanto al logo (visibile solo da ≥640px) */
.brand-text {
  display: none; /* nascosto su mobile */
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  transition: color .3s ease;
}
.brand:hover .brand-text { color: var(--lime); }

/* ── BYLINE DI ENDORSEMENT (header) ──
   Micro-firma "by Safety Insurance" impilata sotto il brand-text.
   Solo testuale e minuta: comunica l'appartenenza alla società madre
   senza un secondo logo che competa col brand-mark di AssicurAmbiente.
   Il contenitore .brand-group impila brand + byline in colonna. */
.brand-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-byline {
  /* Nascosta su mobile: l'header <640px ha spazio solo per badge + hamburger.
     Compare insieme al .brand-text (≥640px), allineata al testo del brand. */
  display: none;
  align-items: baseline;
  gap: .34em;
  /* 66px = larghezza badge (54px) + gap brand (12px): allinea la byline
     al filo sinistro del brand-text, non sotto il logo. */
  margin-inline-start: 66px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Bianco ad alta opacità per restare leggibile (AA) sia sulla hero scura
     sia sulla barra blue-mid dopo lo scroll. Un'ombra sottile aiuta il
     contrasto contro l'immagine hero variabile. */
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(30,61,20,.45);
  transition: color .25s ease;
}
.brand-byline__pre {
  font-weight: 500;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: none;
  opacity: .9;
}
.brand-byline__name {
  font-weight: 700;
  color: #fff;
  transition: color .25s ease;
}
.brand-byline:hover,
.brand-byline:focus-visible { color: #fff; }
.brand-byline:hover .brand-byline__name,
.brand-byline:focus-visible .brand-byline__name { color: var(--lime); }
.brand-byline:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── LISTA VOCI DI MENU (desktop) ── */
.nav-list {
  list-style: none;
  margin: 0; padding: 0;
  display: none; /* nascosta su mobile */
  gap: 4px;
  align-items: center;
}

/* Singolo link di navigazione */
.nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
  overflow: hidden;
}
.nav-link__text {
  position: relative;
  z-index: 2; /* sopra gli pseudo-elementi ::before e ::after */
  transition: color .3s ease;
}
.nav-link:hover .nav-link__text { color: #fff; }

/* ::before — sfondo vetro che appare all'hover */
.nav-link::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(12px);
  transform: scale(0);           /* invisibile di default */
  transition: transform .5s ease-out;
}
.nav-link:hover::before { transform: scale(1); } /* si espande all'hover */

/* ::after — bordo animato con gradiente lime→blu→lime */
.nav-link::after {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(90deg, var(--lime), var(--blue-light), var(--lime));
  background-size: 200% 100%;
  animation: border-glow 3s linear infinite; /* scorrimento continuo del gradiente */
  opacity: 0;
  transition: opacity .5s ease;
  /* Tecnica mask per mostrare solo il bordo (non il riempimento) */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.nav-link:hover::after { opacity: 1; }

/* ── DROPDOWN MENU ── */
.has-dropdown {
  position: relative;
}
/* PONTE INVISIBILE: copre il gap tra button e dropdown così
   l'hover non si interrompe quando il cursore scende verso il menu. */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 18px;
  pointer-events: none;
}
.has-dropdown:hover::after { pointer-events: auto; }

/* Button reset: identico visivamente a .nav-link ma non naviga.
   Eredita tutte le caratteristiche tipografiche del nav-link. */
button.nav-link--btn {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* Tipografia matchata a .nav-link */
  padding: 10px 18px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
}

.nav-caret {
  display: inline-block;
  width: 10px; height: 6px;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform .25s ease;
  position: relative;
  z-index: 2;
  color: currentColor;
}
.has-dropdown:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(30, 61, 20,.22), 0 4px 12px rgba(30, 61, 20,.08);
  padding: 10px 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Apertura veloce, chiusura leggermente ritardata per dare tempo
     al cursore di raggiungere il menu senza stress */
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
  z-index: 100;
}
/* Piccola freccia che punta verso il button (accento visivo) */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #fff;
  box-shadow: -2px -2px 6px rgba(30, 61, 20,.06);
  border-radius: 2px;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s 0s;
}
.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav-dropdown__item:hover {
  background: rgba(30, 61, 20,.06);
  color: var(--navy);
  padding-left: 28px;
}
.nav-dropdown__item:hover .nav-dropdown__dot {
  transform: scale(1.3);
  background: var(--lime);
}
.nav-dropdown__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  transition: transform .15s ease;
}

/* Mobile: il dropdown diventa voce piatta nel mobile-list */
.mobile-dropdown-label {
  display: block;
  padding: 8px 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.mobile-dropdown-sub {
  display: block;
  padding: 10px 12px;
  margin-bottom: 2px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
}
.mobile-dropdown-sub:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ── HAMBURGER (mobile) ── */
/* Tre linee orizzontali che si trasformano in X quando il menu è aperto */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  width: 24px; height: 2px;
  background: #fff;
  transition: all .3s ease;
}
/* Stato menu aperto: prima linea → diagonale in alto */
.site-header.menu-open .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
/* Stato menu aperto: seconda linea → scompare */
.site-header.menu-open .hamburger span:nth-child(2) {
  opacity: 0;
}
/* Stato menu aperto: terza linea → diagonale in basso */
.site-header.menu-open .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── MENU MOBILE ── */
/* Altezza animata da 0 a max-height quando la classe menu-open è presente */
.mobile-wrap {
  overflow: hidden;
  max-height: 0;   /* collassato di default */
  opacity: 0;
  transition: all .5s ease;
}
.site-header.menu-open .mobile-wrap {
  max-height: 100vh; /* copre tutto il viewport */
  opacity: 1;
}
.mobile-list {
  list-style: none;
  margin: 0;
  padding: 16px 24px 32px;
  background: rgb(85, 138, 42);   /* --blue-mid solido, niente trasparenze */
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: calc(100vh - 68px); /* riempie il viewport sotto l'header */
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.mobile-link {
  display: block;
  padding: 12px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  transition: color .2s ease;
}
.mobile-link:hover { color: var(--lime); }

/* ── BREAKPOINT DESKTOP ── */
@media (min-width: 640px) {
  .brand-text { display: block; } /* mostra il testo del brand */
  .brand-byline { display: inline-flex; } /* mostra la byline di endorsement */
}
@media (min-width: 768px) {
  .nav-list  { display: flex; }  /* mostra il menu desktop */
  .hamburger { display: none; }  /* nasconde l'hamburger */
  .mobile-wrap { display: none; } /* nasconde il menu mobile */
}

/* =========================
   SEZIONI
   Struttura comune a tutte le sezioni della pagina.
   ========================= */
.section {
  position: relative;
  overflow: hidden;             /* evita che elementi decorativi escano dai bordi */
  padding: 96px 0;             /* spaziatura verticale (≈ py-24 Tailwind) */
}
@media (min-width: 768px) {
  .section { padding: 128px 0; } /* più spazio su tablet/desktop */
}
.section-cream { background: var(--cream); }          /* sfondo chiaro */
.section-navy  { background: var(--navy); color: #fff; } /* sfondo scuro */

/* ── SFONDO SPECIALIZZAZIONI (immagine decorativa rimossa: aggiungi un'immagine in /img/ e ripristina background-image) ── */
/* Tutto il contenuto interno rimane sopra lo sfondo */
#specializzazioni > *,
#specialisations > * {
  position: relative;
  z-index: 1;
}
/* Card e tab con fondo solido: siedono puliti sull'immagine */
#specializzazioni .spec-card,
#specialisations .spec-card {
  background: rgba(248,249,250,.92);
}
#specializzazioni .tab:not(.active),
#specialisations .tab:not(.active) {
  background: rgba(248,249,250,.75);
}

/* ── TITOLI H2 (Barlow Condensed maiuscolo) ── */
.h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.0;
  font-size: 36px; /* mobile */
}
@media (min-width: 768px)  { .h2 { font-size: 48px; } } /* tablet */
@media (min-width: 1024px) { .h2 { font-size: 60px; } } /* desktop */
.h2.center { text-align: center; }
.h2.navy   { color: var(--navy); }
.h2.white  { color: #fff; }

/* Intestazione centrata */
.center-head { margin-bottom: 64px; }

/* ── LABEL (etichette piccole sopra i titoli) ── */
.label-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.label-row.center { justify-content: center; }

/* Lineetta decorativa accanto alla label */
.label-line      { height: 1px; width: 40px; background: var(--lime); opacity: 1; }
.label-line.lime { background: var(--lime); }

/* Testo della label */
.label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .30em;
  text-transform: uppercase;
}
.label-lime { color: var(--lime); }

/* =========================
   SEZIONE HERO
   Occupa tutta l'altezza dello schermo (100vh).
   Immagine di sfondo con overlay scuro sul lato sinistro.
   ========================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* Contenitore immagine di sfondo */
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%; /* mostra più cielo in alto */
}

/* Overlay diagonale: copre l'area testo in alto a sinistra (cielo) */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.30) 35%,
    rgba(0,0,0,.08) 65%,
    transparent     100%
  );
}

@media (max-width: 640px) {
  .hero-overlay {
    background: linear-gradient(90deg,
      rgba(30, 61, 20, .95),
      rgba(30, 61, 20, .85),
      rgba(30, 61, 20, .60)
    );
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding-top: 7rem;
  padding-bottom: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr; /* testo sinistra | destra libera (immagine) */
  align-items: start;
}
.hero-max {
  grid-column: 1;
  max-width: 100%;
}

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* Il contenuto parte invisibile e traslato, poi anima con la classe "loaded" */
.hero-content {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}
.hero.loaded .hero-content {
  opacity: 1;
  transform: translateY(0);
}

/* Pretitolo (riga lime con testo piccolo sopra il titolo principale) */
.pretitle {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.pretitle-line { width: 48px; height: 1px; background: var(--lime); }
.pretitle-text {
  font-size: 12px; font-weight: 500;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--lime);
}

/* Titolo principale hero */
.hero-title {
  margin: 0 0 24px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  font-size: 40px;
  text-shadow: 0 2px 24px rgba(0,0,0,.70), 0 1px 6px rgba(0,0,0,.90);
}
@media (min-width: 640px) { .hero-title { font-size: 48px; } }
@media (min-width: 768px) { .hero-title { font-size: 60px; } }

/* Paragrafo descrittivo sotto il titolo */
.hero-lead {
  margin: 0 0 32px 0;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 10px rgba(0,0,0,.80);
}
@media (min-width: 768px) { .hero-lead { font-size: 20px; } }

/* Lista di punti chiave con bordo sinistro lime */
.hero-points {
  margin: 0 0 40px 0;
  padding: 0 0 0 24px;
  list-style: none;
  border-left: 2px solid rgba(125,184,46,.30);
  display: flex; flex-direction: column; gap: 12px;
}
.hero-points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,.95);
  text-shadow: 0 1px 8px rgba(0,0,0,.75);
}

/* Icona spunta (SVG check) */
.check {
  width: 16px; height: 16px;
  margin-top: 4px;
  flex: 0 0 auto; /* non si restringe */
  color: var(--lime);
}

/* Gruppo bottoni CTA */
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* =========================
   BOTTONI
   Stili base + varianti: lime, ghost, navy.
   ========================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .3s ease;
}
.btn .arrow { width: 16px; height: 16px; } /* freccia SVG interna al bottone */

/* Variante verde lime — CTA principale */
.btn-lime { background: var(--lime); color: var(--navy); }
.btn-lime:hover { background: var(--lime-dark); }

/* Variante trasparente con bordo bianco — CTA secondario su sfondo scuro */
.btn-ghost {
  border-color: rgba(255,255,255,.30);
  color: #fff; background: transparent;
}
.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.05);
}


/* =========================
   GRIGLIA 12 COLONNE
   Layout a griglia usato nella sezione "Chi Siamo".
   Su mobile: colonna singola. Su desktop: 12 colonne.
   ========================= */
.grid-12 {
  display: grid;
  grid-template-columns: 1fr; /* mobile: una colonna */
}
.gap-16 { gap: 64px; }

@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .col-7   { grid-column: span 7 / span 7; } /* colonna testo (7/12) */
  .col-5   { grid-column: span 5 / span 5; } /* colonna steps (5/12) */
  .pt-16   { padding-top: 64px; }            /* offset verticale colonna destra */
}

/* Testo body nelle sezioni chiare */
.prose {
  color: rgba(30, 61, 20,.70);
  font-size: 16px; line-height: 1.8;
}
@media (min-width: 768px) { .prose { font-size: 18px; } }

/* ── DECORAZIONE DESTRA (sezione Chi Siamo) ── */
/* SVG geometrico in posizione assoluta, quasi invisibile */
.decor-right {
  position: absolute; right: -80px; top: 50%;
  transform: translateY(-50%);
  opacity: .06;
  pointer-events: none; /* non cattura click */
}

/* ── LISTA PASSI / STEPS ── */
.feature-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.feature-steps li { display: flex; align-items: flex-start; gap: 16px; }

.feature-steps--cascade {
  gap: 14px;
}
.feature-steps--cascade li {
  position: relative;
  gap: 18px;
  padding: 14px 0;
}
.feature-steps--cascade li::after {
  content: "";
  position: absolute;
  left: 50px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(125,184,46,.24), rgba(30, 61, 20,.08));
  transform: scaleX(.4);
  transform-origin: left center;
  opacity: .6;
  transition: transform .35s ease, opacity .35s ease;
}
.feature-steps--cascade li:last-child::after {
  opacity: 0;
}
.feature-steps--cascade li:hover::after {
  transform: scaleX(1);
  opacity: .95;
}

/* Numerino quadrato con bordo lime */
.step {
  margin-top: 4px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(125,184,46,.40);
  color: var(--lime);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 12px;
  flex: 0 0 auto;
}
.feature-steps--cascade .step {
  margin-top: 2px;
  border-color: rgba(125,184,46,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.52)),
    rgba(255,255,255,.4);
  box-shadow: 0 10px 24px rgba(10, 28, 16,.07);
}
.feature-steps span:last-child {
  color: rgba(30, 61, 20,.80);
  font-size: 14px; line-height: 1.7;
}
.feature-steps--cascade li > span:last-child {
  color: rgba(18, 42, 16,.88);
}

/* Linea divisoria orizzontale sottile */
.divider { margin-top: 40px; height: 1px; width: 100%; background: rgba(30, 61, 20,.10); }

/* Testo piccolo (usato per il numero IVASS) */
.tiny  { margin-top: 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: rgba(30, 61, 20,.40); }

/* =========================
   SEZIONE SERVIZI
   Sfondo navy con griglia 1→2→3 colonne di card.
   ========================= */
.servizi-bg { position: absolute; inset: 0; pointer-events: none; }

/* Linee verticali decorative sui bordi */
.vline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(125,184,46,.10); }
.vline.left  { left: 0; }
.vline.right { right: 0; }

/* Triangolo SVG decorativo (in basso a destra) */
.tri { position: absolute; right: 40px; bottom: 40px; opacity: .05; }

/* Card del servizio */
.service-card {
  position: relative;
  background: rgba(51, 89, 42,.50);
  border-left: 2px solid rgba(125,184,46,.40); /* bordo sinistro lime tenue */
  padding: 32px;
  transition: all .3s ease;
}
.service-card:hover {
  background: rgba(51, 89, 42,1); /* sfondo più pieno all'hover */
  border-left-color: var(--lime); /* bordo lime pieno */
}

/* Griglia servizi: 1 col → 2 col → 3 col */
.services-grid {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3,1fr); } }

/* Numero del servizio (in alto a destra, quasi invisibile) */
.service-num {
  position: absolute; top: 16px; right: 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 12px;
  color: rgba(255,255,255,.10);
}

/* Icona SVG del servizio */
.service-ico {
  margin-bottom: 20px;
  color: var(--lime);
  transition: transform .3s ease;
}
.service-card:hover .service-ico { transform: scale(1.10); } /* ingrandisce all'hover */

/* Titolo del servizio */
.service-title {
  margin: 0 0 12px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: .03em; text-transform: uppercase;
  color: #fff;
}

/* Descrizione del servizio */
.service-desc { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.70); }

/* Lineetta orizzontale lime che si espande da 0 a 100% all'hover */
.service-accent {
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--lime);
  transition: width .5s ease;
}
.service-card:hover .service-accent { width: 100%; }

/* =========================
   SEZIONE SPECIALIZZAZIONI — TAB
   Sistema di tab accessibile con ARIA.
   ========================= */

/* Bordo colorato sul lato sinistro della sezione */
.accent-left {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: rgba(125,184,46,.20);
  pointer-events: none;
}

/* Watermark "A" stilizzata grande sulla destra di #specializzazioni.
   Stessa filigrana usata su #chi-siamo / #servizi (img/watermark-trasparente.png)
   ma in versione XL, posizionata in alto a destra dove c'è spazio cream vuoto
   accanto al titolo "Come lavoriamo". Non interferisce con i card sottostanti
   che hanno background quasi opaco e la nasconderebbero.
   Sezione cream → opacity più alta per restare visibile (sul cream il grigio chiaro
   della filigrana ha contrasto minore che su navy). */
#specializzazioni::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -100px;
  width: clamp(420px, 50vw, 680px);
  height: clamp(420px, 50vw, 680px);
  background: url("img/watermark-trasparente.png") center / contain no-repeat;
  opacity: 0.28;             /* più visibile: la filigrana è grigio chiarissimo su cream */
  pointer-events: none;
  z-index: 0;
}

/* Garantisce che il contenuto stia sopra alla filigrana */
#specializzazioni .container { position: relative; z-index: 1; }

@media (max-width: 768px) {
  #specializzazioni::after {
    top: -40px;
    right: -200px;
    width: 460px;
    height: 460px;
    opacity: 0.18;       /* più discreto su mobile per non disturbare la lettura */
  }
}

/* La filigrana è statica → nessuna regola prefers-reduced-motion necessaria */

.mb-12 { margin-bottom: 48px; }

/* Contenitore dei pulsanti tab */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }

/* Singolo pulsante tab */
.tab {
  border: 1px solid rgba(30, 61, 20,.20);
  background: transparent;
  color: rgba(30, 61, 20,.60);
  padding: 10px 20px;
  cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: all .3s ease;
}
.tab:hover { border-color: rgba(125,184,46,.60); color: rgba(30, 61, 20,1); }

/* Tab attivo: sfondo lime pieno */
.tab.active { border-color: var(--lime); background: var(--lime); color: var(--navy); }

/* Panel nascosto (JS toglie/aggiunge questa classe) */
.tab-panel.hidden { display: none; }
.tab-panel { position: relative; }

/* Griglia delle spec-card dentro ogni panel: 1→2→3 colonne */
.spec-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .spec-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .spec-grid { grid-template-columns: repeat(3,1fr); } }

/* Card singola specializzazione */
.spec-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(30, 61, 20,.10);
  background: rgba(228,234,216,.30);
  padding: 24px;
  transition: all .3s ease;
}
.spec-card:hover { border-color: rgba(125,184,46,.40); background: rgba(228,234,216,.60); }

/* Header della spec-card: barra lime + titolo */
.spec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.spec-bar  { width: 2px; height: 16px; background: var(--lime); }
.spec-card h3 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 14px;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--navy);
}
.spec-card p { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(30, 61, 20,.70); }

/* =========================
   SEZIONE PERCHÉ NOI
   Griglia 1→2→4 colonne di elementi centrati.
   ========================= */
.why-decor { position: absolute; inset: 0; pointer-events: none; }
.why-decor svg.left {
  position: absolute; left: -80px; top: 50%;
  transform: translateY(-50%); opacity: .05;
}

/* Griglia elementi "perché noi" */
.why-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4,1fr); } }

/* Singolo elemento centrato */
.why-item { text-align: center; }

/* Icona con bordo lime quadrato */
.why-ico {
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(125,184,46,.30);
  color: var(--lime); transition: all .3s ease;
}
.why-item:hover .why-ico { border-color: var(--lime); background: rgba(125,184,46,.10); }
.why-item h3 {
  margin: 0 0 12px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
.why-item p { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.70); }

/* =========================
   SEZIONE SEDI
   Griglia di 3 card (una per sede).
   ========================= */
.locations { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .locations {
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
    justify-content: center;
  }
}

/* Card sede */
.loc-card {
  position: relative;
  border: 1px solid rgba(30, 61, 20,.10);
  background: rgba(228,234,216,.20);
  padding: 32px; transition: all .3s ease;
}
.loc-card:hover { border-color: rgba(125,184,46,.40); }

/* Lineetta superiore lime che si espande all'hover */
.loc-accent {
  position: absolute; top: 0; left: 0;
  height: 4px; width: 48px;
  background: var(--lime); transition: width .5s ease;
}
.loc-card:hover .loc-accent { width: 100%; }

/* Etichetta tipo sede (SEDE LEGALE / OPERATIVA) */
.loc-type {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: .30em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 4px;
}

/* Nome della città */
.loc-city {
  margin: 0 0 24px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900; text-transform: uppercase;
  color: var(--navy); font-size: 28px;
}
@media (min-width: 768px) { .loc-city { font-size: 32px; } }

/* Blocco testo indirizzo e telefono */
.loc-text { color: rgba(30, 61, 20,.60); font-size: 14px; line-height: 1.6; }
.loc-text p      { margin: 0; }
.loc-text .tel   { margin-top: 12px; }
.loc-text .tel span { color: rgba(30, 61, 20,.40); } /* "Tel/Fax" in grigio chiaro */
.loc-text a      { color: rgba(30, 61, 20,.80); transition: color .2s ease; }
.loc-text a:hover { color: var(--lime); }

/* =========================
   SEZIONE CONTATTI
   Form centrato su sfondo navy.
   ========================= */
.narrow { max-width: 56rem; } /* contenitore più stretto rispetto alle altre sezioni */

/* Decorazioni di sfondo */
.contact-decor { position: absolute; inset: 0; pointer-events: none; }
.contact-decor svg.br {
  position: absolute; right: -128px; bottom: -128px; opacity: .05;
}

/* Offset scroll ridotto per la sezione contatti: mostra più contenuto incluso il pulsante */
#contatti { scroll-margin-top: -40px; }

/* Titolo grande del form contatti */
.contact-title {
  margin: 0 0 64px 0; text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; color: #fff;
  font-size: 42px; line-height: 1.0;
}
@media (min-width: 768px)  { .contact-title { font-size: 60px; } }
@media (min-width: 1024px) { .contact-title { font-size: 72px; } }

/* Form contatti: colonna singola con gap tra i campi */
.contact-form {
  max-width: 42rem;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}

/* Griglia a due colonne per le coppie di campi */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
/* Su mobile torna a colonna singola */
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; gap: 32px 0; }
}

/* Campi input e textarea: stile minimal con solo il bordo inferiore */
/* [type="checkbox"] escluso: ha stili propri nella .privacy-row */
.field input:not([type="checkbox"]),
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.20); /* solo linea sotto */
  padding: 16px 0;
  font-size: 14px; color: #fff;
  outline: none;
  transition: border-color .2s ease;
}
.field textarea { resize: none; } /* impedisce il ridimensionamento manuale */

/* Placeholder semitrasparente */
.field input:not([type="checkbox"])::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.30); }

/* Al focus: il bordo inferiore diventa lime */
.field input:not([type="checkbox"]):focus,
.field textarea:focus { border-bottom-color: var(--lime); }

/* ── VALIDAZIONE FORM: stato errore ── */
.field.field-error input:not([type="checkbox"]),
.field.field-error textarea {
  border-bottom-color: #e05c5c;   /* rosso tenue, non aggressivo */
}

/* ── Riga checkbox privacy ── */
.privacy-row { margin-top: -8px; } /* compensa il gap del form */
.privacy-row label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,.60);
  cursor: pointer;
}
.privacy-row label a { color: rgba(125,184,46,.85); text-decoration: underline; }
.privacy-row label a:hover { color: var(--lime); }
.privacy-row label strong { color: rgba(255,255,255,.80); font-weight: 600; }
.privacy-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 2px;
  accent-color: var(--lime);
  cursor: pointer;
}
/* Errore checkbox: outline rosso invece del bordo bottom */
.privacy-row.field-error input[type="checkbox"] {
  outline: 2px solid #e05c5c;
  outline-offset: 2px;
}
.field-err-msg {
  display: block;
  font-size: 11px;
  color: #e05c5c;
  letter-spacing: .04em;
  margin-top: 5px;
  min-height: 14px;               /* evita salti di layout quando compare/scompare */
}

/* ── ANIMAZIONE SCOSSA al submit fallito ── */
@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  18%       { transform: translateX(-7px); }
  36%       { transform: translateX(7px); }
  54%       { transform: translateX(-5px); }
  72%       { transform: translateX(5px); }
  88%       { transform: translateX(-2px); }
}
.form-shake { animation: formShake .45s ease; }

/* Contenitore del bottone submit */
.send { padding-top: 16px; }
.btn.full { width: 100%; } /* full-width su mobile */
@media (min-width: 640px) { .btn.full { width: auto; } } /* larghezza auto su desktop */

/* Animazione freccia nel bottone submit */
#contactBtnIcon { transition: transform .3s ease; }
#contactBtn:hover #contactBtnIcon { transform: translateX(4px); } /* freccia si sposta a destra */

/* =========================
   FOOTER
   Barra inferiore con brand, dati legali e copyright.
   ========================= */
/* ── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  border-top: 1px solid rgba(248,249,250,.08);
  padding: 56px 0 0;
}

/* Brand in cima */
.footer-top {
  margin-bottom: 40px;
  /* Riga che ospita il brand AssicurAmbiente a sinistra e il lockup
     di endorsement Safety a destra; va a capo sotto i 560px. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 28px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }

/* ── LOCKUP SOCIETÀ MADRE (footer) ──
   Logo Safety in badge chiaro (leggibile sul navy) + dicitura istituzionale.
   Preceduto da un divisore verticale che lo separa dal brand AssicurAmbiente:
   segnala una relazione di appartenenza, non una coppia di brand pari grado. */
.footer-parent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(248,249,250,.10);
  background: rgba(248,249,250,.03);
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.footer-parent__label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248,249,250,.55); /* AA su navy: ~4.7:1 anche a 11px uppercase */
  white-space: nowrap;
  transition: color .25s ease;
}
.footer-parent__logo {
  /* Logo su fondo trasparente (nessun badge). Una lieve ombra-glow lo
     stacca dal verde del footer senza introdurre uno sfondo bianco. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.footer-parent__logo img {
  width: 36px; height: auto; /* l'anello mantiene il proprio aspect-ratio 903×401 */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.footer-parent__name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(248,249,250,.85);
  white-space: nowrap;
  transition: color .25s ease;
}
.footer-parent:hover,
.footer-parent:focus-visible {
  border-color: rgba(248,249,250,.22);
  background: rgba(248,249,250,.06);
}
.footer-parent:hover .footer-parent__name,
.footer-parent:focus-visible .footer-parent__name { color: #fff; }
.footer-parent:hover .footer-parent__label,
.footer-parent:focus-visible .footer-parent__label { color: rgba(248,249,250,.60); }
.footer-parent:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
/* ≤560px: il lockup va a capo sotto il brand e si allinea a sinistra,
   evitando di stringere troppo l'header del footer su mobile. */
@media (max-width: 560px) {
  .footer-top { gap: 18px; }
  .footer-parent { padding-inline: 14px 14px; }
}
/* Reduced motion: niente micro-spostamenti, restano solo i cambi di colore. */
@media (prefers-reduced-motion: reduce) {
  .footer-parent { transition: border-color .25s ease, background .25s ease; }
}
.footer-mark {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.footer-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .85;
}
.footer-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 14px;
  letter-spacing: .10em; text-transform: uppercase;
  color: rgba(248,249,250,.80);
}

/* Griglia 3 colonne */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(248,249,250,.08);
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1.2fr 1.2fr; }
}

/* Titolo colonna */
.footer-col-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248,249,250,.30);
  margin: 0 0 14px 0;
}

/* Nome società dentro la colonna */
.footer-col-name {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(248,249,250,.75);
}

/* Testo descrittivo / disclaimer IVASS dentro la colonna */
.footer-col-desc {
  margin: 0 0 18px 0;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(248,249,250,.35);
}
.footer-col-desc strong { color: rgba(248,249,250,.52); }
.footer-col-desc a {
  color: rgba(248,249,250,.52);
  text-decoration: underline;
}
.footer-col-desc a:hover { color: var(--lime); }

/* Dati aziendali: definition list a 2 colonne */
.footer-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: 12px;
  line-height: 1.5;
}
.footer-dl dt {
  color: rgba(248,249,250,.35);
  white-space: nowrap;
}
.footer-dl dd {
  margin: 0;
  color: rgba(248,249,250,.70);
}
.footer-dl dd a {
  color: rgba(248,249,250,.70);
  text-decoration: underline;
}
.footer-dl dd a:hover { color: var(--lime); }

/* Liste link */
.footer-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: 13px;
  color: rgba(248,249,250,.60);
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover { color: var(--lime); }

/* Barra inferiore: copyright + social */
.footer-bottom {
  padding: 20px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Testo copyright */
.footer-copy { margin: 0; font-size: 11px; color: rgba(248,249,250,.18); }

/* Icone social footer */
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 6px;
  color: rgba(248,249,250,.35);
  border: 1px solid rgba(248,249,250,.12);
  transition: color .2s, border-color .2s, background .2s;
  text-decoration: none;
}
.footer-social-icon:hover {
  color: var(--lime);
  border-color: var(--lime);
  background: rgba(125,184,46,.08);
}
@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
}

/* =========================
   PAGINA SOLUZIONI (rcprofessionale.html)
   ========================= */

/* Hero */
.sol-hero {
  background: var(--navy);
  padding: 160px 0 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.sol-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(125,184,46,.08) 0%, transparent 65%);
  pointer-events: none;
}
.sol-hero-label {
  display: inline-block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 20px;
}
.sol-hero-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 52px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.0;
}
@media (min-width: 768px) { .sol-hero-title { font-size: 76px; } }
.sol-hero-sub {
  margin: 24px auto 0;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.60);
}

/* Griglia aree */
.sol-section {
  background: var(--cream);
  padding: 80px 0 100px;
}
.sol-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px)  { .sol-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .sol-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Colonna area */
.sol-area-label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(30, 61, 20,.45);
  margin-bottom: 6px;
}
.sol-area-name {
  margin: 0 0 24px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 38px;
  text-transform: uppercase;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  font-style: italic;
  color: var(--navy);
  line-height: 1.05;
}
@media (min-width: 768px) { .sol-area-name { font-size: 46px; } }
.sol-divider { height: 3px; width: 48px; background: var(--lime); margin-bottom: 32px; }
.sol-list-label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.sol-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid rgba(30, 61, 20,.10);
}
.sol-list li { border-bottom: 1px solid rgba(30, 61, 20,.10); }
.sol-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-size: 15px;
  color: rgba(30, 61, 20,.80);
  transition: color .2s ease, padding-left .2s ease;
}
.sol-list a:hover { color: var(--navy); padding-left: 10px; }
.sol-list a:hover .sol-arrow { color: var(--lime); transform: translateX(4px); }
.sol-arrow {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: rgba(30, 61, 20,.30);
  transition: color .2s ease, transform .2s ease;
}


/* ══════════════════════════════════════════════════════════════
   MARQUEE COMPAGNIE PARTNER
   Scroll orizzontale infinito seamless: il track contiene 2 set
   identici di loghi; l'animazione trasla di -50% = esattamente
   la larghezza di un set, creando un loop senza salti.
   UX: grayscale di default per non competere col brand del sito,
   colore al hover; pausa su hover per permettere la lettura.
════════════════════════════════════════════════════════════════ */
.partners {
  padding: 48px 0 56px;
  background: var(--cream);
  border-top: 1px solid rgba(30, 61, 20,.08);
  border-bottom: 1px solid rgba(30, 61, 20,.08);
}
.partners__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(30, 61, 20,.40);
  margin: 0 0 32px;
  padding: 0 24px;
}
.partners__label-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: rgba(30, 61, 20,.15);
  display: block;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Padding verticale: dà spazio al scale(1.05) dell'hover senza tagliarlo */
  padding: 8px 0;
  /* Sfumatura ai bordi: i loghi appaiono/scompaiono dolcemente */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee__item img {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.marquee__item img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}
.marquee__item--sm img { height: 38px; }
.marquee__item--md img { height: 60px; }
.marquee__item--lg img { height: 72px; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Accessibility: utenti che hanno disabilitato le animazioni.
   Mostriamo una riga orizzontale statica centrata — stesso look,
   senza scroll. Il secondo set duplicato viene nascosto perché
   senza animazione sarebbe ridondante. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    justify-content: center;
    width: 100%;
  }
  /* Nascondi il set duplicato (aria-hidden) — non serve senza animazione */
  .marquee__item[aria-hidden="true"] {
    display: none;
  }
  .marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Mobile: loghi più piccoli e animazione più veloce per dimensione ridotta */
@media (max-width: 640px) {
  .partners { padding: 36px 0 40px; }
  .partners__label { font-size: 12px; margin-bottom: 24px; }
  .marquee__track { gap: 40px; animation-duration: 28s; }
  .marquee__item img { height: 36px; max-width: 120px; }
}

/* ── RC PROFESSIONALE INDEX — griglia prodotti homepage ── */
.rc-index-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    margin-top: 36px;
}

@media (min-width: 768px) {
    .rc-index-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .rc-index-grid { grid-template-columns: repeat(3, 1fr); }
}

.rc-index-area {
    padding: 22px 22px 18px;
    border: 1px solid rgba(30, 61, 20, .10);
    background: rgba(30, 61, 20, .025);
}

.rc-index-area-title {
    margin: 0 0 14px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--navy);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--lime);
}

.rc-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rc-index-list li a {
    font-size: 14px;
    color: rgba(30, 61, 20, .78);
    text-decoration: none;
    transition: color .2s;
    display: block;
    padding: 4px 0;
    line-height: 1.4;
}

.rc-index-list li a:hover {
    color: var(--lime);
}


/* ═══════════════════════════════════════════════════════════════
   SEZIONE NUMERI (STATS) — counter animati su scroll
═══════════════════════════════════════════════════════════════ */
.section-stats {
    position: relative;
    background: var(--navy);
    color: #fff;
    padding: 72px 0 64px;
    overflow: hidden;
    isolation: isolate;
}
.stats-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.stats-decor svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.section-stats .container { position: relative; z-index: 1; }

.stats-head { text-align: center; margin-bottom: 48px; }
.stats-title {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.1;
    color: #fff;
    margin: 14px 0 0;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .stats-title { font-size: 44px; } }

.stats-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 16px;
    max-width: 1080px;
}
@media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 860px; } }

.stat {
    text-align: center;
    padding: 8px 12px;
    position: relative;
}
@media (min-width: 900px) {
    .stat + .stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 18%;
        bottom: 18%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(125,184,46,.35), transparent);
    }
}

.stat-num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 900;
    line-height: 1;
    color: var(--lime);
    font-size: 64px;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) { .stat-num { font-size: 80px; } }
.stat-suffix {
    color: var(--lime);
    font-size: 0.6em;
    font-weight: 700;
}
.stat-label {
    margin: 14px 0 0;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    line-height: 1.4;
}
@media (min-width: 768px) { .stat-label { font-size: 14px; } }

.stats-badge {
    margin: 52px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    max-width: max-content;
    border: 1px solid rgba(125,184,46,.25);
    border-radius: 999px;
    background: rgba(125,184,46,.05);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.75);
}
.stats-badge strong { color: #fff; font-weight: 700; letter-spacing: 0.08em; }
.stats-badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 0 rgba(125,184,46,.6);
    animation: statPulse 2s ease-out infinite;
}
@keyframes statPulse {
    0%   { box-shadow: 0 0 0 0 rgba(125,184,46,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(125,184,46,0); }
    100% { box-shadow: 0 0 0 0 rgba(125,184,46,0); }
}


/* ═══════════════════════════════════════════════════════════════
   MOTION SYSTEM — animazioni UX premium
═══════════════════════════════════════════════════════════════ */

/* ── 1. SCROLL PROGRESS BAR (barra lime in alto) ──────────── */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--lime) 0%, var(--blue-light) 50%, var(--lime) 100%);
    transform-origin: left center;
    transform: scaleX(var(--progress, 0));
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.12s linear;
}

/* ── 2. STAGGERED CHILDREN — fade + rise a cascata ────────── */
/* SICURO: items visibili di default; l'animazione si attiva
   SOLO quando il parent riceve .visible dall'observer.
   "backwards" fill = opacity:0 SOLO durante il delay iniziale,
   mai prima che l'observer spari. */
.section-reveal.visible [data-stagger] {
    animation: staggerIn .7s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes staggerIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── About steps: reveal narrativo una voce alla volta ─────── */
.section-reveal.visible .feature-steps--cascade > li[data-stagger] {
    animation: aboutStepIn .82s cubic-bezier(.2,.8,.22,1) backwards;
    animation-delay: calc(180ms + var(--i, 0) * 150ms);
}
.section-reveal.visible .feature-steps--cascade > li[data-stagger] .step {
    animation: aboutStepBadgeIn .56s cubic-bezier(.22,.88,.35,1) backwards;
    animation-delay: calc(240ms + var(--i, 0) * 150ms);
}
.section-reveal.visible .about-steps .divider {
    animation: aboutStepMetaIn .6s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: 860ms;
}
.section-reveal.visible .about-steps .tiny {
    animation: aboutStepMetaIn .6s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: 980ms;
}
@keyframes aboutStepIn {
    from {
        opacity: 0;
        transform: translate3d(28px, 16px, 0);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}
@keyframes aboutStepBadgeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.82);
        box-shadow: 0 0 0 rgba(10, 28, 16,0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 24px rgba(10, 28, 16,.07);
    }
}
@keyframes aboutStepMetaIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── 3. ACTIVE NAV SECTION (underline + accent) ───────────── */
.nav-link.is-active::before {
    transform: scale(1) !important;
    opacity: 0.5;
}
.nav-link.is-active .nav-link__text {
    color: var(--lime);
}

/* ── 4. HERO PARALLAX — bg si sposta con scroll ───────────── */
.hero-bg img {
    will-change: transform;
    transform: translate3d(0, var(--parallax, 0px), 0) scale(1.05);
    transition: transform 0.08s linear;
}

/* ── 5. HERO TITLE — nessun word-split, animazione via hero-content ── */
/* Il titolo è animato insieme al container .hero-content (opacity 0→1).
   Nessun rischio di invisibilità permanente. */

/* ── 6. 3D TILT CARDS ─────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .service-card,
    .why-item,
    .loc-card,
    .spec-card {
        transform-style: preserve-3d;
        will-change: transform;
    }
    .service-card.tilt-active,
    .why-item.tilt-active,
    .loc-card.tilt-active,
    .spec-card.tilt-active {
        transition: transform .1s linear, box-shadow .3s, border-color .3s;
    }
}

/* ── 7. SVG ICON DRAW-IN ──────────────────────────────────── */
.service-ico svg *,
.why-ico svg * {
    transition: stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1);
}

/* ── 8. LABEL-LINE GROW ───────────────────────────────────── */
/* Animazione solo su visible/loaded — mai nascosta di default */
.section-reveal.visible .label-line {
    animation: lineGrow .9s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: 0.2s;
}
.section-reveal.visible .label-row.center .label-line:first-child {
    animation-delay: 0.15s;
}
.section-reveal.visible .label-row.center .label-line:last-child {
    animation-delay: 0.25s;
}
.hero.loaded .label-line {
    animation: lineGrow .9s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: 0.3s;
}
@keyframes lineGrow {
    from { transform: scaleX(0); transform-origin: left center; }
    to   { transform: scaleX(1); transform-origin: left center; }
}

/* ── 9. MAGNETIC CTA ──────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .hero-cta .btn {
        will-change: transform;
    }
    .hero-cta .btn.magnet-active {
        transition: transform .12s linear;
    }
}

/* ── 10. BACK-TO-TOP ──────────────────────────────────────── */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: var(--lime);
    border: 1px solid rgba(125,184,46,.3);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px) scale(.9);
    pointer-events: none;
    transition: opacity .35s, transform .35s, background-color .25s, border-color .25s;
    z-index: 998;
    box-shadow: 0 8px 20px rgba(10, 28, 16,.25);
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--lime);
    color: var(--navy);
    border-color: var(--lime);
    transform: translateY(-3px) scale(1.05);
}
.back-to-top svg { transition: transform .3s cubic-bezier(.2,.65,.25,1); }

body.has-whatsapp-float .back-to-top {
    bottom: 86px;
}

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 997;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 16px 11px 13px;
    border: 1px solid rgba(125, 184, 46, .32);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(10, 28, 16, .96), rgba(22, 58, 24, .94));
    color: #fff;
    box-shadow: 0 14px 34px rgba(10, 28, 16, .28);
    text-decoration: none;
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity .35s ease,
        transform .35s cubic-bezier(.2, .8, .2, 1),
        border-color .25s ease,
        box-shadow .25s ease;
}

.whatsapp-float.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.whatsapp-float:hover {
    border-color: rgba(125, 184, 46, .72);
    box-shadow: 0 18px 42px rgba(10, 28, 16, .36);
}

.whatsapp-float__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--lime);
}

.whatsapp-float__icon svg {
    width: 24px;
    height: 24px;
}

.whatsapp-float__text {
    display: grid;
    gap: 1px;
    line-height: 1;
}

.whatsapp-float__kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .56);
}

.whatsapp-float__label {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 640px) {
    body.has-whatsapp-float .back-to-top {
        bottom: 82px;
    }

    .whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 52px;
        min-height: 52px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }

    .whatsapp-float__text {
        display: none;
    }
}

/* ── 11. BUTTON ARROW GLIDE ───────────────────────────────── */
.btn .arrow {
    transition: transform .35s cubic-bezier(.2,.65,.25,1);
}
.btn:hover .arrow {
    transform: translateX(5px);
}

/* ── 12. TAB PANEL LEFT-TO-RIGHT SWEEP ────────────────────── */
.section-reveal.visible .tab-panel:not(.hidden) {
    overflow: hidden;
    isolation: isolate;
}
.section-reveal.visible .tab-panel:not(.hidden)::before {
    content: "";
    position: absolute;
    top: -12%;
    left: -18%;
    width: 120px;
    height: 124%;
    background: linear-gradient(90deg, rgba(125,184,46,0), rgba(125,184,46,.10), rgba(255,255,255,.30), rgba(125,184,46,0));
    transform: translateX(-150%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: specialtyBeamSweep 1.62s cubic-bezier(.2,.72,.2,1) .18s both;
}
.section-reveal.visible .tab-panel:not(.hidden) .spec-grid {
    position: relative;
    z-index: 1;
}
.section-reveal.visible .tab-panel:not(.hidden) .spec-card {
    animation: specSlideAcross 1.42s cubic-bezier(.2,.84,.22,1) backwards;
    transform-origin: left center;
    will-change: transform, opacity;
}
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(1) { animation-delay: .16s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(2) { animation-delay: .32s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(3) { animation-delay: .48s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(4) { animation-delay: .64s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(5) { animation-delay: .80s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(6) { animation-delay: .96s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(7) { animation-delay: 1.12s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(8) { animation-delay: 1.28s; }
.section-reveal.visible .tab-panel:not(.hidden) .spec-card:nth-child(9) { animation-delay: 1.44s; }
@keyframes specSlideAcross {
    0% {
        opacity: 0;
        transform: translate3d(-64px, 14px, 0) scale(.95) rotate(-1.4deg);
        filter: blur(10px);
        clip-path: inset(0 42% 0 0);
    }
    58% {
        opacity: 1;
        filter: blur(0);
    }
    76% {
        transform: translate3d(8px, 0, 0) scale(1.01) rotate(0deg);
        clip-path: inset(0 0 0 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        filter: blur(0);
        clip-path: inset(0 0 0 0);
    }
}
@keyframes specialtyBeamSweep {
    0% {
        opacity: 0;
        transform: translateX(-150%) skewX(-18deg);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(215%) skewX(-18deg);
    }
}

/* ── 13. SERVICE CARD ICON SUBTLE ROTATION ────────────────── */
@media (hover: hover) {
    .service-card { transition: transform .35s cubic-bezier(.2,.65,.25,1), box-shadow .3s, border-color .3s, background-color .3s; }
    .service-card:hover .service-ico {
        transform: scale(1.1) translateY(-4px) rotate(-5deg);
    }
    .service-ico { transition: transform .4s cubic-bezier(.34,1.56,.64,1), color .3s, background-color .3s, border-color .3s; }
}

/* ── 14. TAB BUTTON SMOOTH UNDERLINE ──────────────────────── */
.tab {
    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}

/* ── 15. PARTNERS MARQUEE — hover pulse lime ──────────────── */
.marquee__item img { transition: filter .4s, transform .4s; }
.marquee__item:hover img { transform: scale(1.08); }

/* ── 16. COUNTER FLIP EFFECT (quando si attiva il count-up) ─ */
.stat-count {
    display: inline-block;
    transform-origin: center bottom;
    transition: transform .08s ease-out;
}
.stat-count.counting { animation: statBreathe 1.5s ease-out; }
@keyframes statBreathe {
    0%   { transform: translateY(8px) scale(.92); opacity: .6; }
    50%  { transform: translateY(0) scale(1.04); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── 17. RISPETTO prefers-reduced-motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .section-reveal {
        opacity: 1;
        transform: none;
    }
    .scroll-progress,
    .hero-bg img,
    .stat-count,
    .stats-badge-dot,
    .section-reveal.visible [data-stagger],
    .section-reveal.visible .tab-panel:not(.hidden)::before,
    .section-reveal.visible .feature-steps--cascade > li[data-stagger] .step,
    .section-reveal.visible .about-steps .divider,
    .section-reveal.visible .about-steps .tiny,
    .hero.loaded .label-line,
    .section-reveal.visible .label-line,
    .section-reveal.visible .tab-panel:not(.hidden) .spec-card {
        animation: none !important;
        transition: none !important;
    }
    .service-card,
    .why-item,
    .loc-card,
    .spec-card {
        transform: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   SEZIONE NUMERI — CONTATORI ANIMATI
   Sfondo navy con linee diagonali decorative, 4 stat in griglia.
   I contatori sono animati via JS (IntersectionObserver + requestAnimationFrame).
   ════════════════════════════════════════════════════════════════ */

.section-stats {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0) 24%),
        linear-gradient(180deg, #1f4a16 0%, #163510 100%);
    padding: 80px 0 34px;
    overflow: hidden;
    isolation: isolate;
}

/* Gradient di profondità nell'angolo in basso a destra */
.section-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 110%, rgba(125, 184, 46, .08) 0%, transparent 45%),
        radial-gradient(circle at 10% -10%, rgba(85, 138, 42, .06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.section-stats::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -86px;
    height: clamp(150px, 18vw, 220px);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 58%),
        var(--cream);
    border-top-left-radius: 48% 100%;
    border-top-right-radius: 48% 100%;
    box-shadow: 0 -18px 50px rgba(8, 24, 12, .08);
    pointer-events: none;
    z-index: 0;
}

/* Decorazione linee diagonali */
.stats-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.stats-decor svg {
    width: 100%;
    height: 100%;
    display: block;
}

.section-stats .container {
    position: relative;
    z-index: 1;
    padding: clamp(30px, 4.6vw, 48px) clamp(18px, 3.6vw, 40px) clamp(92px, 10vw, 120px);
    border-radius: clamp(28px, 4vw, 48px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)),
        linear-gradient(180deg, rgba(30, 61, 20, .94), rgba(30, 68, 22, .98));
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow:
        0 30px 80px rgba(8, 24, 12, .28),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* ── Intestazione ── */
.stats-head {
    text-align: center;
    margin-bottom: 44px;
}
.stats-title {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 4.5vw, 44px);
    letter-spacing: .01em;
    color: #fff;
    line-height: 1.1;
    margin: 14px 0 0;
    text-transform: uppercase;
}

/* ── Griglia contatori: 2 col mobile → 3 col desktop ── */
.stats-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 980px;
}
.stats-grid .stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 340px);
}
@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    .stats-grid .stat:last-child:nth-child(odd) {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}

.stat {
    position: relative;
    text-align: center;
    padding: clamp(22px, 3vw, 30px) clamp(14px, 2.2vw, 22px);
    border-radius: clamp(22px, 3vw, 30px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(6px);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, background .35s ease;
}
.stat:hover {
    transform: translateY(-4px);
    border-color: rgba(125, 184, 46, .28);
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .024));
}

/* Linea divisoria verticale tra stat (solo desktop) */
@media (min-width: 768px) {
    .stat + .stat::before {
        content: none;
    }
}

/* ── Numero grande ── */
.stat-num {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 900;
    line-height: 1;
    color: var(--lime);
    letter-spacing: -.02em;
    font-size: clamp(54px, 8vw, 82px);
    text-shadow: 0 0 40px rgba(125, 184, 46, .15);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

/* Variant number sizing per valori a 3 cifre */
.stat-count {
    display: inline-block;
    font-variant-numeric: tabular-nums; /* cifre a larghezza fissa: evita jitter durante il count */
}

.stat-suffix {
    display: inline-block;
    font-size: .55em;
    color: var(--lime);
    margin-left: 4px;
    font-weight: 700;
    transform: translateY(-.15em);
}

/* Hover micro-interaction: leggero lift + glow */
.stat:hover .stat-num {
    transform: translateY(-3px);
    text-shadow: 0 0 50px rgba(125, 184, 46, .35);
}

/* =========================
   WATERMARK — logo filigrana
   Decoro sottile in fondo alle sezioni chiare e scure.
   pointer-events: none sempre. max opacity 0.07.
   ========================= */

/* Sezione cream #chi-siamo: watermark in basso a destra,
   fuori dai confini del testo, non copre mai contenuto primario */
#chi-siamo::after,
#perche-noi::after {
  content: "";
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: clamp(220px, 30vw, 380px);
  height: clamp(220px, 30vw, 380px);
  background: url("img/watermark-trasparente.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* Sezione dark #servizi e #contatti: stessa filigrana su navy */
#servizi::before,
#contatti::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -50px;
  width: clamp(200px, 28vw, 340px);
  height: clamp(200px, 28vw, 340px);
  background: url("img/watermark-trasparente.png") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Reduced motion: nasconde le filigrane (sono puramente decorative) */
@media (prefers-reduced-motion: reduce) {
  #chi-siamo::after,
  #perche-noi::after,
  #servizi::before,
  #contatti::before {
    display: none;
  }
}

/* ── Label sotto il numero ── */
.stat-label {
    margin: 14px 0 0;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
    letter-spacing: .02em;
}

/* ── Badge IVASS sotto ── */
.stats-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 44px 0 0;
    padding: 12px 22px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(125, 184, 46, .16);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(125, 184, 46, .08), rgba(255, 255, 255, .035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.stats-badge strong {
    color: rgba(255, 255, 255, .85);
    font-weight: 700;
    letter-spacing: .12em;
}
.stats-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 0 rgba(125, 184, 46, .6);
    animation: stats-pulse 2.2s ease-out infinite;
}

@keyframes stats-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(125, 184, 46, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(125, 184, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(125, 184, 46, 0); }
}

/* Stato "counted" — appare solo una volta dopo fine animazione, aggiunge micro-bump */
.stat-count.counted {
    animation: stat-bump .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes stat-bump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ── Accessibilità: rispetto reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .stat-num,
    .stat:hover .stat-num,
    .stat-count.counted,
    .stats-badge-dot {
        transition: none;
        animation: none;
    }
}