/* DOLOMITESCONNECT - Components */

/* ================= DECORAZIONE A LINEE (sezioni senza icone) =================
   Stesso stile astratto delle linee/cerchi dell'hero, riusato come sfondo
   decorativo su tutte le altre sezioni "piatte" (eccetto l'intro, che ha
   gia' le icone). Il modificatore --on-color schiarisce le linee per gli
   sfondi colorati pieni (es. sezione AI). */
main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  overflow-x: hidden;
}
/* align-items:center riduce ogni figlio alla larghezza del contenuto
   (i pannelli hero sono tutti position:absolute quindi collassano a 0
   larghezza): riportiamo ogni sezione a piena larghezza. */
main > * { width: 100%; }

   .has-line-decor::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--line-decor-color);
  background-image:
    radial-gradient(circle at 8% 24%, currentColor 0 4px, transparent 5px),
    radial-gradient(circle at 92% 20%, currentColor 0 3px, transparent 4px),
    radial-gradient(circle at 88% 80%, currentColor 0 4px, transparent 5px),
    repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 150px),
    repeating-linear-gradient(65deg, currentColor 0 1px, transparent 1px 190px);
}
.has-line-decor--on-color::before { color: var(--line-decor-color-on-color); }

/* ================= OVERNAV ================= */
.overnav {
  height: var(--overnav-height);
  background: var(--clay-yellow);
  color: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto;
}
.overnav__track { position: relative; width: 100%; height: 100%; }
.overnav__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.5rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-align: center;
  color: #000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.overnav__msg.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ================= NAVBAR ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: transparent;
  filter: drop-shadow(0 4px 10px rgba(20, 20, 30, .10));
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar {
  height: var(--header-height);
  max-width: 1300px;
  width: 100%;
  margin-inline: 5%;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 0;
  background-color: var(--clay-base);
  border-radius: 0 0 1rem 1rem;
}
.navbar__logo { display: flex; align-items: center; }
.navbar__logo-img--light { display: none; }
[data-theme="dark"] .navbar__logo-img--dark { display: none; }
[data-theme="dark"] .navbar__logo-img--light { display: block; }

/* -- Curva decorativa: la navbar "scende" nella parte centrale, il bordo
      resta a filo in alto oltre il margine del 5% (stesso margine del
      contenuto). Non occupa spazio nel flusso. -- */
.site-header__shape {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: -1px;
  overflow: visible;
  display: none;
}
.site-header__shape path { fill: var(--clay-surface); }

.navbar__menu {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0 0 0 0;
}
.navbar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-weight: 500;
  font-size: .92rem;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: color var(--transition), background var(--transition);
}
.navbar__link i { display: none; }
.navbar__link:hover { color: var(--text-primary); background: var(--bg-alt); }
.navbar__link--active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-alt);
}
.navbar__cta {
  margin-left: 10px;
  padding: 10px 22px;
  font-size: .9rem;
}

/* -- Language switch: bandiera + dropdown (ora solo nel footer) -- */
.lang-switcher { position: relative; }
.lang-switcher__current {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 4px;
  color: var(--text-secondary);
}
.lang-switcher__current i { font-size: .7rem; transition: transform var(--transition); }
.lang-switcher.is-open .lang-switcher__current i { transform: rotate(180deg); }

.lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 160px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--clay-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 30px -10px var(--shadow-dark-strong);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear .2s;
  z-index: 210;
}
.lang-switcher.is-open .lang-switcher__dropdown {
  opacity: 1; transform: translateY(0); visibility: visible;
  transition: opacity var(--transition), transform var(--transition);
}
.lang-switcher__dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 500;
  color: var(--text-secondary);
}
.lang-switcher__dropdown a:hover { background: var(--bg-alt); color: var(--text-primary); }
.lang-switcher__dropdown a.lang-switcher__item--active { color: var(--clay-yellow-dark); }
.lang-switcher__flag { font-size: 1.15rem; }

/* -- Hamburger: due sole linee che si incrociano a X -- */
.hamburger {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1.5px solid var(--text-muted);
  border-radius: var(--radius-full);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform var(--transition-slow);
}
.hamburger span:nth-child(1) { transform: translate(-50%, -50%) translateY(-4px); }
.hamburger span:nth-child(2) { transform: translate(-50%, -50%) translateY(4px); }
.hamburger.is-open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* -- Menu mobile: nessun pannello separato. Sotto i 900px la navbar diventa
      una griglia di 2 righe (logo+hamburger / navlink) e .navbar__menu (lo
      stesso elenco usato su desktop) e' l'unico elemento della 2a riga,
      la cui altezza anima da 0fr ad auto (1fr) all'apertura. -- */
@media (max-width: 900px) {
  .navbar {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 0fr;
    align-items: stretch;
    height: auto;
    padding-block: 12px;
    transition: grid-template-rows var(--transition-slow);
  }
  .navbar__logo,
  .hamburger { align-self: center; }
  .navbar.is-open { grid-template-rows: auto 1fr; }
  .navbar__logo { grid-column: 1; grid-row: 1; }
  .hamburger { display: block; grid-column: 2; grid-row: 1; justify-self: end; }

  .navbar__menu {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    overflow: hidden;
    min-height: 0;
  }
  .navbar__link {
    padding: 14px 4px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-bottom: 1px solid var(--bg-alt);
    font-weight: 500;
    font-size: 1.02rem;
  }
  .navbar__link i { display: inline-flex; }
  .navbar__link--active { color: var(--text-primary); font-weight: 700; background: none; border-bottom-color: var(--clay-yellow); }
  .navbar__cta { display: flex; margin-left: 0; justify-content: center; }
}

/* ================= NAV FLOURISH =================
   Unica shape (nastro + nuvoletta a cascata di 3 cerchi), non occupa spazio
   nel flusso (height:0): resta agganciata alla navbar sticky. Altezza
   sempre 75px su qualunque schermo (preserveAspectRatio="none" sull'SVG). */
.nav-flourish {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  height: 0;
  z-index: 150;
  pointer-events: none;
  display: none;
}
.nav-flourish__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  overflow: visible;
  display: block;
}
.nav-flourish__shape {
  fill: var(--clay-surface);
  stroke: none;
}
.nav-flourish__progress {
  fill: none;
  stroke: var(--clay-yellow);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-flourish__marker {
  fill: var(--clay-yellow);
  opacity: 0;
}

/* ================= HERO =================
   I due pannelli sono full-bleed (100% larghezza) e sovrapposti allo stesso
   spazio: e' il clip-path a mostrare solo la propria meta'. Una retta che
   attraversa il centro esatto del box divide SEMPRE l'area esattamente a
   meta', qualunque sia l'inclinazione -> --hero-offset controlla i 65deg.
   Un piccolo inset (--hero-seam) su ciascun pannello lascia intravedere lo
   sfondo bianco dell'.hero lungo il taglio, creando il bordo di 2px. */
.hero {
  --hero-offset: -16vh;  /* scostamento dal centro (segno invertito per ribaltare l'inclinazione) per ~65deg dall'orizzontale */
  --hero-seam: 1.4px;   /* meta' dello spessore del bordo bianco sulla linea di taglio */
  position: relative;
  min-height: 55vh;
  max-height: 65vh;
  overflow: hidden;
  background: #fff;
}
.hero__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size .6s cubic-bezier(.22,.61,.36,1);
}
.hero__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__panel-inner { position: relative; z-index: 1; max-width: 560px; }

/* -- Posizione (taglio a 65deg, sempre esattamente a meta') -- */
.hero__panel--left {
  clip-path: polygon(0 0, calc(50% - var(--hero-offset) - var(--hero-seam)) 0, calc(50% + var(--hero-offset) - var(--hero-seam)) 100%, 0 100%);
  padding-left: 6vw;
  /* Il box e' largo quanto tutto l'hero ma se ne vede solo circa meta':
     copriamo solo quella meta' (invece dell'intero box) cosi' lo zoom
     resta al minimo necessario e la foto non viene tagliata troppo. */
  background-size: 65% 100%;
  background-position: left center;
}
.hero__panel--right {
  clip-path: polygon(calc(50% - var(--hero-offset) + var(--hero-seam)) 0, 100% 0, 100% 100%, calc(50% + var(--hero-offset) + var(--hero-seam)) 100%);
  padding-left: calc(50% + 6vw);
  padding-right: 6vw;
  background-size: 65% 100%;
  background-position: right center;
}

/* -- Hover: zoom leggero sull'immagine del pannello sotto il cursore -- */
.hero__panel--left:hover, .hero__panel--right:hover {
  background-size: 76% 116%;
}

/* -- Colore (indipendente dalla posizione) -- */
.hero__panel--yellow::before {
  background: linear-gradient(150deg, rgba(255, 204, 0, .88), rgba(204, 153, 0, .92) 85%);
}
.hero__panel--yellow, .hero__panel--yellow .hero__title { color: var(--text-on-color); }
.hero__panel--purple::before {
  background: linear-gradient(150deg, rgba(109, 63, 194, .85), rgba(67, 39, 122, .92) 85%);
}
.hero__panel--purple, .hero__panel--purple .hero__title { color: #fff; }

.hero__title { margin-bottom: 0.5em; }
.hero__panel .btn--clay { box-shadow: 8px 8px 18px rgba(0,0,0,.28); }

@media (max-width: 900px) {
  .hero { display: block; height: auto; max-height: none; min-height: 0; }
  .hero__panel {
    position: static;
    width: 100%;
    height: auto;
    min-height: 52vh;
    padding: 56px 8vw;
  }
  .hero__panel:first-of-type {
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    margin-bottom: -8vw;
    padding-left: 8vw;
    padding-right: 8vw;
  }
  .hero__panel:last-of-type {
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
    padding: 70px 8vw 56px;
  }
  /* Su mobile ogni pannello e' impilato a piena larghezza (niente piu'
     taglio diagonale a meta'): la foto deve coprire tutto il pannello. */
  .hero__panel--left, .hero__panel--right {
    background-size: cover;
    background-position: center;
  }
}

/* ================= SECTION DIVIDER (hero -> intro) =================
   Sostituisce la riga dritta con una curva leggera: il div si sovrappone
   al fondo dell'hero (margin-top negativo), cosi' lo sfondo dell'hero resta
   visibile ovunque tranne dove il path "morde" con il colore di sfondo
   della pagina, rivelando una curva convessa molto leggera. */
.section-divider {
  position: relative;
  z-index: 2;
  margin-top: -32px;
  line-height: 0;
  pointer-events: none;
}
.section-divider svg { display: block; width: 100%; height: 32px; }
.section-divider path { fill: var(--bg-body); }

/* -- Variante speculare, da mettere PRIMA dell'hero: stessa curva ma
      capovolta (scaleY) cosi' l'hero diventa una fascia con la curva
      convessa sia sopra che sotto. -- */
.section-divider--top {
  transform: scaleY(-1);
  margin-top: 0;
  margin-bottom: -32px;
}

/* ================= INTRO ================= */
.intro { padding: 110px 0; overflow: hidden; min-height: 70vh; display: flex; align-items: center; justify-content: center; position: relative; }
.intro__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.intro__icon { position: absolute; font-size: 3rem; color: var(--icon-decor-color); }
.intro__content {
  position: relative; z-index: 1;
  max-width: 760px; margin-inline: auto; text-align: center; padding-inline: 24px;
}
.intro__title {
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: .6em;
}

@media (max-width: 768px) {
  .intro { padding: 70px 0; }
  .intro__icon { font-size: 2rem; }
}

/* ================= LOGOS STRIP ================= */
.logos-strip { background: var(--bg-alt); padding: 34px 0; }
.logos-strip__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-strip__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logos-scroll 30s linear infinite;
}
.logos-strip__logo { height: 26px; width: auto; opacity: .18; filter: grayscale(1); flex-shrink: 0; }
.logos-strip__name,
.logos-strip__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  opacity: .18;
  white-space: nowrap;
  flex-shrink: 0;
}
.logos-strip__brand i { font-size: 1.25rem; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ================= PRE-HERO ================= */
.pre-hero {
  position: relative;
  overflow: hidden;
  max-height: 80vh;
  padding: 90px 0 80px;
  background: var(--clay-base);
  max-width: 1300px;
  width: 100%;
}

@media (max-width: 395px) {
  .pre-hero{
    max-height: fit-content;
  }
}

.pre-hero__bg-logo {
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: min(480px, 45vw);
  opacity: .12;
  filter: brightness(0);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.pre-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding-inline: 24px;
  text-align: left;
}
.pre-hero__headline {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.35;
  margin-bottom: .3em;
}
.pre-hero__word { position: relative; display: inline-block; }
.pre-hero__word--google { margin-inline: 2px; }
.pre-hero__google-logo {
  display: inline-flex;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.pre-hero__google-logo span:nth-child(1) { color: #4285F4; }
.pre-hero__google-logo span:nth-child(2) { color: #EA4335; }
.pre-hero__google-logo span:nth-child(3) { color: #FBBC05; }
.pre-hero__google-logo span:nth-child(4) { color: #4285F4; }
.pre-hero__google-logo span:nth-child(5) { color: #34A853; }
.pre-hero__google-logo span:nth-child(6) { color: #EA4335; }

.pre-hero__word--social { display: inline-block; margin-inline: 2px; padding-top: 15px; }
.pre-hero__social-arc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: -1;
}
.pre-hero__social-arc i {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .9rem;
  color: #fff;
  box-shadow: 4px 4px 10px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
}
.pre-hero__social-arc i:nth-child(1) { background: linear-gradient(145deg,#f58529,#dd2a7b 60%,#8134af); transform: translateY(12px) rotate(-16deg); }
.pre-hero__social-arc i:nth-child(2) { background: linear-gradient(145deg,#1877f2,#0e5bc4); transform: translateY(2px) rotate(-5deg); }
.pre-hero__social-arc i:nth-child(3) { background: linear-gradient(145deg,#25f4ee,#111 55%,#fe2c55); transform: translateY(2px) rotate(5deg); }
.pre-hero__social-arc i:nth-child(4) { background: linear-gradient(145deg,#0a66c2,#004182); transform: translateY(12px) rotate(16deg); }

.pre-hero__word--ai { margin-left: 2px; }
.pre-hero__ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: super;
  font-size: .55em;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(145deg, var(--clay-purple), var(--clay-purple-dark));
  padding: 4px 6px;
  border-radius: 5px;
  margin-left: 6px;
  box-shadow: 3px 3px 8px var(--shadow-dark);
}

.pre-hero__subheadline { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: .7em; }

.pre-hero__actions {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 1.4em;
}
.pre-hero__actions .btn { padding: 10px 20px; }

.pre-hero__stats-lead { font-weight: 600; color: var(--text-secondary); margin-bottom: .6em; }

.pre-hero__stats {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
  scroll-margin-top: calc(var(--header-height) + var(--overnav-height) + 16px);
}
.stat-card {
  width: 200px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(145deg, var(--clay-surface) 0%, var(--clay-base) 100%);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow:
    10px 10px 22px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light),
    inset 0 1px 1px rgba(255, 255, 255, .8),
    inset 0 -10px 16px rgba(0, 0, 0, .035);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform: translateY(-4px); }
.stat-card__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.2rem;
  text-align: center;
  background: linear-gradient(145deg, var(--clay-yellow), var(--clay-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card__label { font-size: .85rem; font-weight: 600; color: var(--text-secondary); text-align: center; }

@media (max-width: 640px) {
  .stat-card { width: 40vw; }
  .pre-hero__bg-logo { width: 60vw; }
  .pre-hero__actions { flex-direction: column; align-items: stretch; }
  .pre-hero__actions .btn { white-space: normal; text-align: center; justify-content: center; }
}

/* ================= IL NOSTRO VALORE ================= */
.value-section { position: relative; overflow: hidden; padding: 100px 0; }
.value-section__bg-logo {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  max-width: 1300px;
  opacity: .12;
  filter: grayscale(1) brightness(.55);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.value-section__head {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 24px;
}
.value-section__head h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.value-grid {
  position: relative; z-index: 1;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
/* Le card usano .stat-card (stessa classe delle card del pre-hero): qui si
   sovrascrive solo la dimensione, piu' adatta a un testo titolo+paragrafo. */
.value-card { width: 260px; text-align: center; }
.value-card h3 { font-size: 1.05rem; margin-bottom: .5em; }
.value-card p { font-size: .88rem; margin: 0; }

.value-cta {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 560px;
  margin: 30vh auto 0;
  padding-inline: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;

}

.value-cta p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--text-primary);
  margin-bottom: .6em;
}

.value-cta__call { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.value-cta__button {
  width: clamp(7rem, 10vw, 10rem);
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
}
.value-cta__caption {
  display: block;
  margin-top: 14px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .value-card { width: 220px; }
}
@media (max-width: 520px) { .value-card { width: 100%; max-width: 280px; } }

/* Riusato in servizi.php dentro .section-block */
.positioning__self-made { margin-top: 1.8em; }

/* ================= AI SECTION ================= */
.ai-section {
  background: linear-gradient(120deg, var(--clay-purple-dark), var(--clay-yellow-dark));
  padding: 100px 0;
}
.ai-section__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; padding-inline: 24px; text-align: center; }
.ai-section h2 { color: #fff; }
.ai-section p { color: rgba(255,255,255,.88); font-size: 1.05rem; }

/* ================= PIU' RICHIESTI (heading prima dell'hero spostato) ================= */
.section-heading { text-align: center; padding: 10vh 24px 40px; }
.section-heading h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin: 0; }

/* ================= CASI STUDIO ================= */
.case-studies { padding: 100px 0 90px; overflow: hidden; }
.case-studies__head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto 50px; padding-inline: 24px; }
.case-studies__head h2 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  margin: 0;
}
.case-studies__logo { height: .85em; width: auto; }
[data-theme="dark"] .case-studies__logo { filter: invert(1); }

/* Slider senza margini laterali: le card toccano il bordo dello schermo e
   la loro larghezza segue quella naturale dell'immagine caricata (height
   fissa + width:auto sull'<img>, non un crop forzato). */
.case-studies__slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow-y: hidden;
  height: fit-content;
}
.case-studies__slider::-webkit-scrollbar { display: none; }
.case-study-card {
  position: relative;
  flex: 0 0 auto;
  height: 60vh;
  max-height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 10px 10px 22px var(--shadow-dark-strong);
}
.case-study-card img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  object-fit: cover;
}
.case-study-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px;
  background: linear-gradient(0deg, rgba(20,20,30,.86) 0%, rgba(20,20,30,.35) 55%, rgba(20,20,30,.1) 100%);
  color: #fff;
}
.case-study-card__category { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.case-study-card__title { color: #fff; margin-bottom: .3em; font-size: 1.25rem; white-space: nowrap; }
.case-study-card__desc { color: rgba(255,255,255,.85); font-size: .9rem; margin-bottom: .6em; max-width: 320px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.case-study-card .btn--ghost { align-self: flex-start; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.case-study-card:hover .btn--ghost { background: #fff; color: var(--clay-yellow-dark); border-color: #fff; }

/* -- Frecce navigazione: claymorphism grigio chiaro, stessa sfumatura e
      ombre interne delle stat-card/hamburger. -- */
.case-studies__nav {
  position: relative; z-index: 1;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.case-studies__arrow {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--clay-surface) 0%, var(--clay-base) 100%);
  color: var(--text-secondary);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow:
    6px 6px 14px var(--shadow-dark),
    -6px -6px 14px var(--shadow-light),
    inset 0 1px 1px rgba(255, 255, 255, .8),
    inset 0 -6px 10px rgba(0, 0, 0, .035);
  transition: transform var(--transition), box-shadow var(--transition), color var(--transition);
}
.case-studies__arrow:hover { color: var(--text-primary); transform: translateY(-2px); }
.case-studies__arrow:active {
  transform: translateY(0);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

@media (max-width: 640px) {
  .section-heading { padding: 14vh 24px 32px; }
  .case-study-card { height: 42vh; }
}

/* ================= CONTATTI (home clay) ================= */
.contact-clay {
  padding: 110px 0 100px;
  background: var(--clay-base);
}
.contact-clay__head { position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 0 auto 30px; padding-inline: 24px; }
.contact-clay__title { font-size: clamp(2.2rem, 5vw, 3.4rem); }

.steps-timeline {
  list-style: none;
  margin: 60px auto;
  padding: 0 24px;
  max-width: var(--container-width);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.steps-timeline__step {
  position: relative;
  text-align: center;
  background: var(--clay-surface);
  border-radius: var(--radius-lg);
  padding: 36px 22px 26px;
  box-shadow: 10px 10px 22px var(--shadow-dark), -8px -8px 18px var(--shadow-light);
}
.steps-timeline__step::after {
  content: '';
  position: absolute;
  top: 46px;
  right: -30px;
  width: 40px;
  border-top: 3px dashed var(--clay-yellow);
  opacity: .55;
}
.steps-timeline__step:last-child::after { display: none; }
.steps-timeline__icon {
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(145deg, var(--clay-yellow), var(--clay-purple));
  box-shadow: 6px 6px 14px var(--shadow-dark-strong), -5px -5px 12px var(--shadow-light), inset 0 2px 4px rgba(255,255,255,.35);
}
.steps-timeline__step h3 { font-size: 1.02rem; margin-bottom: .4em; }
.steps-timeline__step p { font-size: .88rem; margin: 0; }

.contact-clay__info { position: relative; z-index: 1; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding-inline: 24px; }
.contact-pill {
  display: flex; align-items: center; gap: 14px;
  background: var(--clay-surface);
  padding: 16px 26px;
  border-radius: var(--radius-full);
  font-weight: 600;
  box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
  transition: box-shadow var(--transition), transform var(--transition);
}
.contact-pill:hover { transform: translateY(-2px); }
.contact-pill--static { cursor: default; }
.contact-pill--static:hover { transform: none; }
.contact-pill__icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--clay-yellow), var(--clay-yellow-dark));
  color: var(--text-on-color); font-size: .95rem; flex-shrink: 0;
}

@media (max-width: 900px) {
  .steps-timeline { grid-template-columns: repeat(2, 1fr); }
  .steps-timeline__step::after { display: none; }
}
@media (max-width: 520px) {
  .steps-timeline { grid-template-columns: 1fr; }
}

/* ================= FAQ ================= */
.faq { padding: 100px 0; max-width: 860px; margin-inline: auto; padding-inline: 24px; }
.faq__head { position: relative; z-index: 1; text-align: center; max-width: 560px; margin: 0 auto 40px; }
.faq__item {
  border-bottom: 1px solid var(--bg-alt);
}
.faq__item:first-child { border-top: 1px solid var(--bg-alt); }
.faq__question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 2px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  color: var(--text-primary); text-align: left;
  transition: color var(--transition);
}
.faq__question:hover { color: var(--clay-purple); }
.faq__chevron { transition: transform var(--transition), color var(--transition); color: var(--clay-purple); flex-shrink: 0; }
.faq__question[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.faq__answer p { padding: 0 2px 22px; margin: 0; }

/* ================= FOOTER ================= */
.site-footer { background: var(--bg-dark-footer); color: #C7CAD4; padding: 70px 0 0; }
.footer__inner {
  max-width: 100vw;
  margin-inline: 5%;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 50px;
}
.footer__col--brand .footer__about { max-width: 34ch; margin-top: 16px; font-size: .9rem; }
.footer__heading { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__list a, .footer__list li { font-size: .9rem; color: #ACB0BE; display: flex; align-items: center; gap: 8px; }
.footer__list a:hover { color: var(--clay-yellow); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 10px;
  padding: 22px 24px;
  max-width: 100vw;
  margin-inline: 5%;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.footer__social { display: flex; gap: 14px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  color: #C7CAD4; transition: background var(--transition), color var(--transition);
}
.footer__social a:hover { background: var(--clay-yellow); color: var(--text-on-color); }
.footer__copy { font-size: .82rem; color: #8E93A3; margin: 0; }

.footer__controls { display: flex; align-items: center; gap: 22px; }
.footer__controls .lang-switcher__current { color: #C7CAD4; }
.footer__controls .lang-switcher__current:hover { color: #fff; }
.lang-switcher__dropdown--up { top: auto; bottom: calc(100% + 12px); }

/* -- Theme switch (footer) -- */
.theme-switch-wrap { display: flex; align-items: center; gap: 10px; }
.theme-switch-wrap .theme-switch__label { font-size: .95rem; color: #8E93A3; }
.theme-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(255,255,255,.14);
  cursor: pointer;
  padding: 3px;
}
.theme-switch__knob {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(0);
  transition: transform var(--transition);
}
.theme-switch[aria-checked="true"] { background: var(--clay-yellow); }
.theme-switch[aria-checked="true"] .theme-switch__knob { transform: translateX(20px); }

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ================= PAGE HERO (metodo/servizi/contatti/zona/zone) ================= */
.page-hero { padding: 90px 0 80px; }
.page-hero--purple { background: linear-gradient(135deg, var(--clay-purple), var(--clay-purple-dark)); }
.page-hero--blue { background: linear-gradient(135deg, var(--clay-yellow), var(--clay-yellow-dark)); }
.page-hero--white { background: var(--clay-base); }
.page-hero__inner { max-width: 720px; margin-inline: auto; padding-inline: 24px; text-align: center; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.88); font-size: 1.05rem; }
.page-hero--blue h1, .page-hero--blue p { color: var(--text-on-color); }
.page-hero--white h1 { color: var(--text-primary); }
.page-hero--white p { color: var(--text-secondary); }

/* -- Su tutte le pagine con .page-hero la navbar "galleggia" sopra la prima
      parte dell'hero (invece di lasciare una fascia chiara tra navbar e
      hero colorato): l'hero risale sotto la sola navbar (non l'overnav) e
      recupera lo spazio con padding-top, cosi' il colore dietro la navbar
      e' sempre quello dell'hero (viola/blu/bianco a seconda della pagina). -- */
.page-hero {
  margin-top: calc(-1 * var(--header-height));
  padding-top: calc(var(--header-height) + 50px);
}

/* ================= STEPS DETAIL (metodo) ================= */
.steps-detail { padding: 100px 0; }
.steps-detail__inner {
  max-width: var(--container-width); margin-inline: auto; padding-inline: 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.steps-detail__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--clay-surface); border-radius: var(--radius-lg); padding: 30px 24px;
  box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
}
.steps-detail__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.steps-detail__num { font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; color: var(--clay-yellow-light); -webkit-text-stroke: 1px var(--clay-yellow); }
.steps-detail__icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--clay-yellow), var(--clay-purple));
  color: #fff; font-size: 1.3rem;
  flex-shrink: 0;
}
.steps-detail__text { margin-top: auto; }
.steps-detail__text h3 { margin-bottom: .4em; }
.steps-detail__text p { margin: 0; }
@media (max-width: 900px) { .steps-detail__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps-detail__inner { grid-template-columns: 1fr; } }

/* ================= SERVICES GRID (servizi) ================= */
.services-grid { padding: 90px 0; }
.services-grid__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
  background: var(--clay-surface); border-radius: var(--radius-lg); padding: 34px 28px;
  box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
  transition: transform var(--transition);
}
.service-card:hover { transform: translateY(-4px); }
.service-card__icon {
  width: 58px; height: 58px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--clay-yellow-light); color: var(--clay-yellow-dark); font-size: 1.5rem; margin-bottom: 18px;
}
@media (max-width: 1024px) { .services-grid__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid__inner { grid-template-columns: 1fr; } }

/* ================= CTA BAND ================= */
.cta-band { padding: 80px 0; background: var(--bg-alt); text-align: center; }
.cta-band__inner { max-width: 640px; margin-inline: auto; padding-inline: 24px; }
.cta-band h2 { margin-bottom: .8em; }

/* ================= ZONE (indice localita' + link interni) ================= */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.zone-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(145deg, var(--clay-surface) 0%, var(--clay-base) 100%);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light), inset 0 1px 1px rgba(255, 255, 255, .7);
  transition: transform var(--transition);
}
.zone-card:hover { transform: translateY(-4px); }
.zone-card h3 { font-size: 1.05rem; margin-bottom: .4em; }
.zone-card p { font-size: .85rem; margin-bottom: 1em; }
.zone-card__link { margin-top: auto; font-weight: 600; font-size: .85rem; color: var(--clay-purple); display: inline-flex; align-items: center; gap: 6px; }

.zone-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.zone-links__item {
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--clay-base);
  font-weight: 600;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition), color var(--transition);
}
.zone-links__item:hover { background: var(--bg-alt); }
.zone-links__item--all { background: linear-gradient(145deg, var(--clay-yellow), var(--clay-purple)); color: #fff; }

/* ================= CONTACT PAGE ================= */
.contact-page { padding: 90px 0 110px; }
.contact-page__inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 46px; align-items: start;
}
.contact-form {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--clay-surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 10px 10px 22px var(--shadow-dark), -8px -8px 18px var(--shadow-light);
}
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: .88rem; color: var(--text-primary); }
.contact-form input, .contact-form textarea {
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--clay-base);
  box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -3px -3px 8px var(--shadow-light);
  color: var(--text-primary);
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--clay-yellow); outline-offset: 1px; }
.contact-form__honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { align-self: flex-start; }

.contact-page__info { display: flex; flex-direction: column; gap: 16px; }
.contact-page__map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light); }
.contact-page__map iframe { width: 100%; height: 260px; border: 0; display: block; }

.form-alert {
  padding: 16px 20px; border-radius: var(--radius-md); font-weight: 600; font-size: .9rem;
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.form-alert--success { background: rgba(156, 99, 0, .16); color: var(--clay-yellow-dark); }
.form-alert--error { background: rgba(214, 92, 92, .12); color: #B84040; }

@media (max-width: 900px) {
  .contact-page__inner { grid-template-columns: 1fr; }
}

/* ================= 404 ================= */
.error-404 { padding: 140px 24px; text-align: center; }
.error-404__code {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(4rem, 12vw, 8rem); color: var(--clay-yellow-light);
  -webkit-text-stroke: 2px var(--clay-yellow);
}
.error-404 .btn { margin-top: 20px; }