/* =============================================================
   ODONTOFY — Homepage: titoli in stile "Il nostro scanner"
   Foglio caricato SOLO in Homepage (inc/assets.php, is_front_page).
   Stessa ricetta dei titoli della pagina Scanner: Inter 600
   compatto, tracking negativo, gradient cromato a 9 stop della
   palette Odontofy, leggera profondita' via drop-shadow.
   Tutto e' scoped a #main: header, footer e ogni altra pagina
   del sito restano esattamente come prima. Il body copy, gli
   eyebrow e le animazioni non vengono toccati.
   ============================================================= */

#main .h-display {
  font-family: var(--font-ui, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

#main h1.h-display.hero__title {
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  line-height: 1.02;
}

#main h2.h-display {
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #main h1.h-display,
  #main h2.h-display {
    background: linear-gradient(
      100deg,
      #f0f5f6 0%,
      #ffffff 12%,
      #9dbcf0 24%,
      #6491d8 38%,
      #2a6adc 52%,
      #dce8fa 66%,
      #ffffff 76%,
      #6f9be0 88%,
      #2a6adc 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 14px rgba(7, 16, 26, 0.45));
  }

  /* Superfici chiare (hero su video bianco comprese): stessa ricetta cromata
     ma su base navy — dove il gradiente scuro aveva i bianchi qui ci sono i
     navy, i blu restano blu. Niente ombra: su fondo chiaro sporcherebbe. */
  #main h1.h-display.hero__title,
  #main .bg-off-white h2.h-display,
  #main .bg-white h2.h-display,
  #main .workflow .workflow__scene h3.h-display {
    /* Lo stop piu' chiaro era il Soft Blue #6491D8: su off-white (#F0F5F6)
       si ferma a 2,90:1, sotto il minimo 3:1 previsto per il testo grande.
       Sostituito con un blu della stessa famiglia appena piu' profondo:
       3,57:1 su off-white e 3,30:1 sul bianco del video della hero.
       Gli altri otto stop sono invariati. */
    background: linear-gradient(
      100deg,
      #131a28 0%,
      #07101a 12%,
      #2a6adc 24%,
      #4d80d4 38%,
      #2a6adc 52%,
      #131a28 66%,
      #07101a 76%,
      #2a6adc 88%,
      #131a28 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    filter: none;
  }
}

/* =============================================================
   DENTAL GO — Homepage, copy Master STEP 5 (solo testi, stessa
   struttura). Regole scoped a .home: nessun'altra pagina le vede.
   ============================================================= */

/* Hero: il testo di supporto sotto le CTA ora è composto da due frasi
   ("Non siamo un'agenzia generalista…" / "Costruiamo e gestiamo…").
   Resta il filetto a sinistra della reference, ma il maiuscoletto a riga
   singola lascia il posto a un corpo normale, leggibile su due paragrafi. */
.home .hero__sub {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
}

/* Blocchi che il Master riporta in grassetto: stessa resa su tutta la
   Homepage (chiusura di Esperienza, "Dental Go costruisce il collegamento.",
   "Una strategia. Un'identità…", note accanto al form). Inter è caricato
   fino al peso 600: niente grassetto sintetico del browser. */
.home .experience__intro strong,
.home .compat__strong,
.home .scanner__strong,
.home .contact__notes li strong {
  font-weight: 600;
  color: var(--text-strong);
}

/* CTA lunga della sezione Sistema ("Scopri come possiamo lavorare sul tuo
   studio"): sugli schermi stretti il bottone va a capo invece di uscire
   dal contenitore. */
@media (max-width: 767px) {
  .home .scanner__cta .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding-block: 12px;
  }
}

/* Titoli del Master su più righe (H1 e H2 con a capo forzato): righe
   bilanciate, così l'ultima riga non resta con una parola sola
   ("sistema.", "strumenti.", "studio."). Miglioria progressiva: i browser
   che non la supportano mantengono l'andata a capo normale. */
/* Occhiello della hero: il testo poggia sul fotogramma quasi bianco del
   video. Campionando i pixel reali sotto la riga, la luminanza media del
   fondo e' 0,8758: il Blu Dental Go (#2A6ADC) si ferma a 4,42:1, sotto i
   4,5:1 richiesti per un testo di 13px. #2468DA e' lo stesso blu appena
   piu' profondo — 4,55:1 sul video, 4,69:1 sull'off-white, 5,16:1 sul
   bianco — con una differenza percettiva di deltaE 0,87, sotto la soglia
   alla quale l'occhio distingue due colori affiancati.
   Vale SOLO per questo elemento: il token della palette non cambia, e
   dimensioni, peso, spaziatura e composizione restano quelli di prima. */
.home .hero .eyebrow { color: #2468da; }

.home .hero .eyebrow,
.home .hero__title,
.home .experience__intro h2,
.home .workflow-intro h2,
.home .compat__copy h2,
.home .scanner__copy h2,
.home .contact__copy h2 {
  text-wrap: balance;
}

/* =============================================================
   DENTAL GO — pulizia mobile (17/09/2026)
   Solo smartphone, solo Homepage. Nessun cambio di colori,
   tipografia o struttura: si interviene su allineamento delle
   CTA e sul doppio spazio fra sezioni dello stesso colore.
   ============================================================= */

@media (max-width: 767px) {

  /* CTA: sotto i 768px i bottoni della hero andavano a capo restando
     di larghezza diversa (169px e 175px), quindi impilati disallineati
     a destra. Qui diventano una colonna a larghezza piena, come gia'
     sono il bottone del form, quello del menu hamburger e la CTA lunga
     della sezione Sistema: un solo allineamento per tutte le CTA. */
  .home .hero__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .home .hero__cta-row .btn,
  .home .compat__cta .btn {
    width: 100%;
    text-align: center;
  }

  /* Sezioni consecutive con lo stesso fondo: i due padding da 72px si
     sommavano in una fascia vuota di 144px (misurati 202px fra la barra
     dei servizi e la sezione successiva, tutta off-white, senza alcuno
     stacco visivo). Su smartphone il padding superiore della seconda
     sezione scende a 48px. Su tablet e desktop nulla cambia. */
  .home .bg-off-white + .bg-off-white {
    padding-top: var(--space-7);
  }
}