/* ---------- Banda claim chiara come PNG ---------- */
.az-claim {
  background: #fff;
  color: #111;
  padding: 100px 0 100px;
}

.az-claim .pre {
  margin: 0 0 8px;
  color: #000000ff;
}

.az-claim .hl-line {
  margin: 0;
  color: var(--accent);
  font-weight: 900;
  font-size: clamp(22px, 4vw, 41px);
}

/* ---------- Banda scura descrizione (km veri / servizio trasparente) ---------- */
.az-model {
  background: var(--dark);
  color: #fff;
  padding: 72px 0;
}

.az-model .narrow {
  color: #e9e9e9;
}

.az-model b.yellow {
  color: var(--accent);
}

/* ---------- Trust (frase grigia + headline gialla a destra) ---------- */
.az-trust {
  background: #fff;
  color: #111;
  padding: 74px 0;
  font-size: 22px;
}

.az-trust p {
  margin: 0;
  color: #000000ff;
}

.az-trust h3 {
  margin: 0;
  color: var(--accent);
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 50px);
  text-align: right;
}

/* ---------- Banda immagine orizzontale (non usata nel PNG, lasciata pronta) ---------- */
.az-photo {
  background: #fff;
}

.az-photo .band {
  height: clamp(220px, 32vw, 360px);
  background: center/cover no-repeat url("assets/img/azienda-band.jpg");
}

/* ---------- Numeri (sfondo immagine scura + titoli/stats) ---------- */
.az-numbers {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding: 94px 0;
}

.az-numbers .wrap {
  position: relative;
  z-index: 1;
}

.az-numbers h2 {
  margin: 0 0 22px;
  color: var(--accent);
  font-weight: 900;
  font-size: clamp(24px, 4.4vw, 40px);
}

.az-numbers .grid {
  display: grid;
  gap: 26px 34px;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
}

.az-col {
  display: grid;
  gap: 22px;
}

.az-stat {
  display: grid;
  gap: 4px;
}

.az-stat b {
  display: block;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1;
  font-weight: 900;
  color: #ffd200;
}

.az-stat small {
  display: block;
  color: #e9e9e9;
  opacity: 0.95;
  font-size: medium;
}

.az-donut-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.az-donut {
  --val: 98.12;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) calc(var(--val) * 1%),
    rgba(255, 255, 255, 0.16) 0
  );
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 0 0 6px rgba(0, 0, 0, 0.25);
}

.az-donut::after {
  content: attr(data-label);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.az-note {
  margin-top: 8px;
  color: #e9e9e9;
}

/* ---------- Placeholder testo immagine bianca ---------- */
.az-placeholder {
  background: #fff;
  color: #111;
  padding: 76px 0;
  text-align: center;
}

.az-placeholder h3 {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: clamp(22px, 3.8vw, 30px);
}

.az-placeholder p {
  margin: 0;
  color: #333;
}

/* ---------- Finale scuro ---------- */
.az-final {
  background: var(--dark);
  color: #fff;
}

.az-final .narrow {
  color: #e9e9e9;
}

.az-final h2 {
  color: var(--accent);
  margin: 10px 0 0;
  font-weight: 900;
}

/* ---------- Utilities ---------- */
.left {
  text-align: left;
}

.right {
  text-align: right;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .az-numbers .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .az-claim {
    padding: 64px 0;
  }

  .az-model {
    padding: 60px 0;
  }

  .az-trust {
    padding: 56px 0;
  }

  .az-donut {
    width: 64px;
    height: 64px;
  }

  .az-donut::after {
    width: 46px;
    height: 46px;
    font-size: 11px;
  }

  .az-stat b {
    font-size: clamp(24px, 7vw, 34px);
  }

  .az-placeholder {
    padding: 60px 0;
  }

  .az-final .narrow p {
    font-size: clamp(15px, 3.6vw, 17px);
  }
}

/* ---------- Layout grid per TRUST come nel PNG ---------- */
.az-trust .narrow.grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: center;
}

@media (max-width: 860px) {
  .az-trust .narrow.grid {
    grid-template-columns: 1fr;
  }

  .az-trust .narrow.grid .right {
    text-align: left;
  }
}

/* ---------- Sezione numeri: gestisci immagine come sfondo tramite .hero-media ---------- */
.az-numbers .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.az-numbers .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- ANIMAZIONI (reveal + stagger) ---------- */
.az-reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.az-reveal.show {
  opacity: 1;
  transform: none;
}

.az-stagger > * {
  opacity: 0;
  transform: translateY(12px);
}

.az-stagger.show > * {
  animation: azUp 0.55s ease both;
}

.az-stagger.show > *:nth-child(2) {
  animation-delay: 0.06s;
}

.az-stagger.show > *:nth-child(3) {
  animation-delay: 0.12s;
}

.az-stagger.show > *:nth-child(4) {
  animation-delay: 0.18s;
}

.az-stagger.show > *:nth-child(5) {
  animation-delay: 0.24s;
}

/* --- Numeri: leggero pop quando iniziano a contare --- */
.az-stat b.is-animating {
  animation: azPop 0.28s ease both;
}

@keyframes azPop {
  from {
    transform: translateY(4px) scale(0.98);
    opacity: 0.8;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

/* Donut: transizione liscia quando aggiorniamo --val */
.az-donut {
  transition: background 0.3s linear;
  will-change: background;
}

@keyframes azUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) {
  .scroll-dot:hover {
    transform: translateY(-2px) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .az-reveal,
  .az-stagger > * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}