/* ============================================================================
   HOME — IL PONTE (B) + GALILEO AL LAVORO (A)          sess.73 · 05/09/2026
   agente HOME-AB · direzione A+B scelta da David (04/09 h20:34)
   ----------------------------------------------------------------------------
   ⚠️ FILE NUOVO E SEPARATO, di proposito: `home.css` non viene toccato.
   La sola cosa che questo file fa alla home esistente è NEUTRALIZZARE il
   trattamento-giuntura di `.hm-three` quando il ponte è in pagina (in fondo,
   sezione «LA STAFFETTA»). Rientro completo: togliere il <link> in
   index.html — la home torna esattamente a com'era.

   COSA C'È QUI DENTRO
   · `.hm-bridge`   = la fascia che sta A CAVALLO della fine del film. Eredita
                      il gesto già collaudato di `.hm-three` (risalita di
                      150px dentro l'ultima inquadratura, alone del poster,
                      velo caldo) e ci aggiunge le due cose che mancavano:
                      il VELO DI DISCESA per il tema chiaro, e l'apparecchio
                      che SBORDA dal fotogramma.
   · `.hm-gw`       = «Galileo al lavoro»: il filmato scrubbabile col fader.

   ⭐⭐ VINCOLO ASSOLUTO (verdetto David 04/09): nel girato c'è UN SOLO
   apparecchio, un Galileo dual-engine. Non due proiettori. Ogni riga di copy
   e ogni etichetta qui sotto parla di DUE MOTORI dello stesso corpo.
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════
   B · IL PONTE
   ───────────────────────────────────────────────────────────────────────────
   Diagnosi (V-76, già scritta in home.css): nella riga di pixel in cui
   finisce il film cambiano TRE cose insieme — immagine piena → fondo pagina,
   calda → neutra, tutto schermo → colonna. Coda e alone hanno calmato luce e
   colore; resta il TAGLIO GEOMETRICO, e un taglio si nasconde solo se
   qualcosa lo ATTRAVERSA.
   ═══════════════════════════════════════════════════════════════════════════ */

.hm-bridge{
  position: relative;
  margin-bottom: 56px;
}

/* Il trattamento-giuntura vale SOLO se il film c'è davvero. Senza film
   (reduced-motion, niente JS, video KO) questa resta una sezione normale:
   nessuna risalita sopra un hero statico, nessun alone, nessuno sbordo. È lo
   stesso contratto di fallback del film hero — arricchimento, mai dipendenza. */
body.hm-has-film .hm-bridge{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -150px;                  /* nasce DENTRO l'ultima luce */
  padding: calc(clamp(40px, 6vw, 78px) + 150px) clamp(20px, 5vw, 64px) clamp(34px, 5vw, 60px);
  z-index: 1;
  /* ⚠️ La lezione del 02/09 su `.hm-three`: uscire dal BORDO e uscire dal
     DOCUMENTO sono due cose diverse. `clip` e non `hidden`, perché `hidden`
     su un asse rende l'altro scrollabile e ci porterebbe via lo sbordo
     VERTICALE, che qui è tutto il gesto. */
  overflow-x: clip;
  overflow-y: visible;
}
body:not(.hm-has-film) .hm-bridge{
  padding: 0 0 clamp(20px, 3vw, 34px);
}

/* ── l'alone: l'ultima inquadratura si deposita sotto la fascia ─────────────
   `--hm-poster` la scrive `home-film-hero.js` una volta sola. Stessi valori
   di `.hm-three` in produzione, comprese le due opacità per tema: un velo
   tarato su un fondo non regge l'altro. */
body.hm-has-film .hm-bridge::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hm-poster, none);
  background-size: cover;
  background-position: center 38%;
  opacity: .11;
  filter: saturate(.42) blur(1px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.35) 66%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.35) 66%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
body.ds-light.hm-has-film .hm-bridge::before{ opacity: .045; }
body.ds-dark.hm-has-film  .hm-bridge::before{ opacity: .11; }

/* ── il velo caldo: la temperatura del film non finisce di colpo ─────────── */
body.hm-has-film .hm-bridge::after{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  /* Non parte al massimo dal bordo: a piena forza sulla prima riga di pixel
     disegnerebbe un gradino, che è la cucitura di prima con un altro nome. */
  background:
    linear-gradient(180deg,
      rgba(244,181,50,0) 0%,
      rgba(244,181,50,.055) 14%,
      rgba(244,181,50,.030) 44%,
      rgba(244,181,50,0) 100%),
    linear-gradient(180deg,
      rgba(12,12,12,0) 0%,
      rgba(12,12,12,.34) 16%,
      rgba(12,12,12,0) 82%);
  pointer-events: none;
  z-index: -1;
}

/* ── ⭐ IL VELO DI DISCESA — il difetto storico «in chiaro si spezza» ───────
   In tema scuro i due fondi sono parenti e la giuntura si legge; in tema
   CHIARO il film finisce su un fotogramma scuro e la pagina comincia quasi
   bianca, quindi fra i due c'è una riga di pixel in cui la luminanza salta.
   Non si nasconde il confine: lo si trasforma in una DISCESA, un velo che
   parte dal buio del film e si spegne in mezza schermata.
   In scuro serve la metà, ed è per questo che ha due valori e non uno. */
.hm-bridge__seam{
  position: absolute;
  inset: 0 0 auto;
  height: 340px;
  background: linear-gradient(180deg,
              rgba(10,10,10,.42) 0%,
              rgba(10,10,10,.20) 32%,
              rgba(10,10,10,.06) 64%,
              rgba(10,10,10,0) 100%);
  pointer-events: none;
  z-index: -1;
  display: none;
}
body.hm-has-film .hm-bridge__seam{ display: block; }
body.ds-dark .hm-bridge__seam{ opacity: .45; }

/* ── IL FASCIO ─────────────────────────────────────────────────────────────
   Parte dalla lente dell'apparecchio e si apre verso il basso a destra. Non è
   un cono geometrico: un cono con lo spigolo netto su una pagina web si legge
   come un triangolo giallo, non come luce. Intensità comandata da `--seam`,
   che `home-film-hero.js` scrive sulla radice: 0 quando la fascia è ancora
   sotto lo schermo, 1 quando è entrata. Monotona di proposito — questo è un
   ÀNCORA, non un passaggio: arriva e resta finché A si legge. */
/* ⚠️ TARATO IN PAGINA, DUE VOLTE, e la prima era sbagliata: partiva dal
   centro ed era largo 1500px, quindi arrivava sotto la COLONNA DI TESTO. In
   tema scuro si leggeva come una patina verde-oliva; in tema chiaro faceva
   di peggio — l'occhiello oro finiva su un fondo giallo pallido e spariva.
   ⇒ Il fascio parte dalla LENTE dell'apparecchio e resta sulla sua metà:
   illumina il palco del filmato, non la copy. E in tema chiaro vale la metà,
   perché su un fondo quasi bianco un velo giallo non è luce, è sporco. */
.hm-bridge__beam{
  position: absolute;
  top: -30px;
  left: clamp(2%, 5vw, 8%);
  width: min(1040px, 72vw);   /* il fascio del ponte: e' un disegno, non un contenitore */
  height: 700px;
  transform: translateX(-4%) rotate(8deg);
  transform-origin: 18% 0;
  background:
    radial-gradient(110% 74% at 16% 0%,
      rgba(255, 209, 0, .20) 0%,
      rgba(255, 209, 0, .085) 24%,
      rgba(255, 209, 0, .030) 50%,
      rgba(255, 209, 0, 0) 76%);
  opacity: var(--seam, 0);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
  display: none;
}
body.ds-light .hm-bridge__beam{ opacity: calc(var(--seam, 0) * .5); }

/* ── L'APPARECCHIO CHE SBORDA ──────────────────────────────────────────────
   `top` negativo: la testa sta sopra il bordo della sezione, cioè DENTRO
   l'ultima inquadratura del film; la forcella è già sulla pagina, e l'ombra
   cade sui contenuti sotto — è la `drop-shadow` che lo fa stare DAVANTI
   invece che sopra.

   📌 ASSET PROVVISORIO, e si sostituisce senza toccare una riga di codice:
   è un `<img>` nel markup di index.html, non un nodo costruito dal JS. Il
   giorno in cui il ruolo 3D consegna il render dedicato (posa e luce
   dell'ultima inquadratura, o il GLB) si cambia il `src` e basta.
   La `filter` qui sotto è quella che toglie la «luce da e-commerce»: senza,
   si legge come uno sticker incollato sulla pagina. */
.hm-bridge__rig{
  position: absolute;
  top: calc(-142px + 26px * var(--seam, 0));
  left: clamp(2%, 5vw, 8%);
  width: clamp(300px, 28vw, 480px);
  pointer-events: none;
  z-index: 3;
  transform: rotate(calc(-4deg + 4deg * var(--seam, 0))) scale(calc(0.97 + 0.05 * var(--seam, 0)));
  transform-origin: 50% 18%;
  opacity: calc(0.35 + 0.65 * var(--seam, 0));
  will-change: transform, opacity;
  display: none;
}
.hm-bridge__rig img{
  display: block;
  width: 100%;
  height: auto;
  filter:
    brightness(calc(.66 + .20 * var(--seam, 0)))
    contrast(1.05) saturate(.6)
    drop-shadow(-14px 34px 44px rgba(0,0,0,.55));
}

/* Il ponte esiste solo dove esiste il film E dove `--seam` viene scritta.
   ⛔ Sotto i 1100 il film va in modalità PLAY e il JS ripulisce `--seam`:
   il gesto resta fermo a metà, ed è esattamente il difetto del paraluce
   orfano visto su iPhone il 02/09 («una cosa fuori posto è peggio di una
   cosa che non c'è»). Quindi qui si accende solo da 1100 in su. */
@media (min-width: 1100px){
  body.hm-has-film .hm-bridge__beam,
  body.hm-has-film .hm-bridge__rig{ display: block; }
}

/* Chi ha chiesto meno movimento non deve vedere niente che si muove. */
@media (prefers-reduced-motion: reduce){
  .hm-bridge__beam,
  .hm-bridge__rig{ display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   A · GALILEO AL LAVORO
   ───────────────────────────────────────────────────────────────────────────
   Il cursore NON è un player: è un FADER — lo stesso verbo del film hero
   («lo scroll è il fader»), che qui passa nelle mani di chi guarda. Scrubba
   il girato vero: non è un'animazione, quindi non può mentire.
   ═══════════════════════════════════════════════════════════════════════════ */

.hm-gw{
  position: relative;
  z-index: 2;                          /* sopra il fascio, sotto il rig */
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: center;
  max-width: var(--page-max-largo);
  margin-inline: auto;
}

/* ── il palco ──────────────────────────────────────────────────────────────
   Fondo scuro FISSO nei due temi, come l'hero: la scena è girata al buio di
   uno stand e su fondo chiaro il bordo sfarfallerebbe. È l'eccezione già
   dichiarata in home.css per il film, non un colore hardcoded nuovo. */
.hm-gw__stage{
  position: relative;
  aspect-ratio: 1200 / 946;            /* il crop, esatto */
  border-radius: 16px;
  overflow: hidden;
  background: #0A0A0A;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  isolation: isolate;
}
.hm-gw__stage img,
.hm-gw__stage video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Le due immagini sono insieme il PRIMO PAINT e il FALLBACK, comandate dallo
   stesso `--p` del video: senza video la sezione continua a funzionare e si
   dissolve fra i due estremi. */
.hm-gw__frame--fresnel{ opacity: var(--p, 0); }
.hm-gw__video{ opacity: 0; transition: opacity .3s ease; z-index: 2; }
.hm-gw[data-painted] .hm-gw__video{ opacity: 1; }

/* ── le due didascalie sul muro ────────────────────────────────────────────
   Non un tooltip: una riga che sta DOVE succede la cosa. Compaiono agli
   estremi e si spengono in mezzo, così si capisce che sono due REGIMI e non
   un cursore di luminosità. */
.hm-gw__call{
  position: absolute;
  z-index: 3;
  right: clamp(10px, 3%, 26px);
  top: 8%;
  max-width: 46%;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(8,8,10,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 3px 0 0 rgba(244,181,50,.48);
  color: #F1EFEA;
  font-size: 12.5px;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity .25s ease;
}
.hm-gw__call b{
  display: block;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--ds-brand-yellow-light);
}
.hm-gw__call--soft{ opacity: calc(1 - var(--p, 0) * 2.2); }
.hm-gw__call--fresnel{ opacity: calc(var(--p, 0) * 2.2 - 1.2); }

/* ── il fader ──────────────────────────────────────────────────────────────
   Un `input[type=range]` VERO: tastiera, screen reader e touch funzionano
   senza scrivere una riga. Sopra ci si veste solo la traccia. */
.hm-gw__fader{ margin-top: 18px; }
.hm-gw__poles{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}
.hm-gw__pole--on{ color: var(--ds-c-accent); }

.hm-gw__range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
  cursor: ew-resize;
}
.hm-gw__range::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(150,170,190,.55) 0%, var(--ds-brand-yellow-dark) 100%);
}
.hm-gw__range::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(150,170,190,.55) 0%, var(--ds-brand-yellow-dark) 100%);
}
.hm-gw__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ds-brand-yellow-dark);
  border: 3px solid var(--ds-c-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.hm-gw__range::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--ds-c-bg);
  background: var(--ds-brand-yellow-dark);
}
.hm-gw__range:focus-visible{ outline: 2px solid var(--ds-c-focus); outline-offset: 6px; }

/* ── la colonna che spiega ─────────────────────────────────────────────── */
.hm-gw__eyebrow{
  margin: 0 0 8px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--ds-fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ds-c-accent);
}
.hm-gw__title{
  margin: 0 0 14px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.1;
  color: var(--ds-c-text);
  text-wrap: balance;
}
.hm-gw__lead{
  margin: 0 0 22px;
  max-width: var(--misura-corta);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ds-c-text-secondary);
}

/* le due voci si accendono col cursore: è la legenda che segue la mano */
.hm-gw__legend{ display: grid; gap: 10px; margin-bottom: 22px; }
.hm-gw__row{
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ds-c-surface);
  box-shadow: inset 3px 0 0 rgba(244,181,50,.20);
  transition: box-shadow .25s ease, background .25s ease;
}
body.ds-dark .hm-gw__row{ box-shadow: inset 3px 0 0 rgba(244,181,50,.32); }
.hm-gw__row h3{
  margin: 0 0 4px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--ds-c-text);
}
.hm-gw__row p{ margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ds-c-text-secondary); }
.hm-gw__row[data-on="1"]{
  background: var(--ds-c-surface-hover);
  box-shadow: inset 3px 0 0 var(--ds-brand-yellow-dark);
}

/* ── il dittico: i due motori, un fotogramma di distanza ───────────────────
   `accensione-06` e `accensione-07` hanno LA STESSA INQUADRATURA e cambia
   solo cosa è acceso. È la dimostrazione del dual-engine senza una parola —
   e serve a chiudere il dubbio «ma allora sono due apparecchi?». */
.hm-gw__ditt{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}
/* TRE fasi (08/09, regola di David: mai due su tre). Su schermo stretto
   restano due colonne e la terza va a capo: tre macro affiancate sotto i
   700 px non si leggerebbero — e una fase illeggibile e' una fase assente. */
.hm-gw__ditt--tre{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px){
  .hm-gw__ditt--tre{ grid-template-columns: 1fr 1fr; }
}
.hm-gw__ditt figure{ margin: 0; }
.hm-gw__ditt img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #0A0A0A;
}
.hm-gw__ditt figcaption{
  margin-top: 6px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}

.hm-gw__cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hm-gw__fair{
  margin: 0;
  font-size: 12.5px;
  color: var(--ds-c-text-tertiary);
}
.hm-gw__caption{
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-c-text-tertiary);
}

/* ── fasce ─────────────────────────────────────────────────────────────────
   <1400: una colonna. Il fader sotto il filmato resta a portata di pollice e
   la legenda diventa il testo della sezione. */
@media (max-width: 1399.98px){
  .hm-gw{ grid-template-columns: 1fr; }
  .hm-gw__stage{ aspect-ratio: 4 / 3; }
}
@media (max-width: 1099.98px){
  body.hm-has-film .hm-bridge{
    margin-top: -90px;
    padding-top: calc(clamp(28px, 7vw, 44px) + 90px);
  }
  body.hm-has-film .hm-bridge::before{
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 82%);
            mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 82%);
  }
  .hm-gw__call{ max-width: 60%; font-size: 12px; }
  .hm-gw__title{ font-size: clamp(22px, 6vw, 30px); }
}
@media (min-width: 1850px){
  .hm-gw{ gap: clamp(34px, 3vw, 56px); }
}

/* Reduced-motion: niente video, restano le due immagini e il fader. Il fader
   funziona lo stesso — è l'utente a muoverlo, non noi. */
@media (prefers-reduced-motion: reduce){
  .hm-gw__video{ display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA STAFFETTA — `.hm-three` cede il trattamento-giuntura al ponte
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ QUESTA È L'UNICA COSA CHE IL FILE FA ALLA HOME ESISTENTE, ed è
   necessaria: `body.hm-has-film .hm-three` risale di -150px «dentro l'ultima
   luce del film». Con il ponte in mezzo quella risalita cadrebbe dentro il
   ponte, e l'alone dell'ultima inquadratura comparirebbe una seconda volta a
   metà pagina, sotto tre card che non c'entrano niente.
   ⇒ Il gesto si fa UNA VOLTA SOLA, e lo fa chi sta davvero alla giuntura.
   Selettore fratello: `.hm-bridge ~ .hm-three` (0,3,1) batte
   `body.hm-has-film .hm-three` (0,2,1) senza un `!important`.
   Senza ponte in pagina questo blocco non seleziona niente e `.hm-three`
   resta identica a prima. ========================================== */
body.hm-has-film .hm-bridge ~ .hm-three{
  margin-top: 0;
  padding-top: clamp(20px, 3vw, 34px);
}
body.hm-has-film .hm-bridge ~ .hm-three::before,
body.hm-has-film .hm-bridge ~ .hm-three::after{ content: none; }
/* Il fondo delle card serviva a reggere QUALUNQUE fotogramma dell'alone.
   Senza alone dietro, torna il fondo normale del design system. */
body.hm-has-film .hm-bridge ~ .hm-three .hm-arg{
  background: var(--ds-c-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCCHI PREDISPOSTI — welcome letter · sta arrivando · social
   ───────────────────────────────────────────────────────────────────────────
   Struttura vera, contenuto onesto: dove non c'è una destinazione degna lo
   slot NON è un link, e lo dice. `feedback_riempi_e_marca`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la lettera ──────────────────────────────────────────────────────────── */
.hm-welcome{ max-width: var(--misura); }
.hm-welcome p:not(.hm-hero__eyebrow){
  margin: 0;
  padding-left: 16px;                  /* allineata al filo del titolo */
  font-size: 15px;
  line-height: 1.68;
  color: var(--ds-c-text-secondary);
}
.hm-welcome .hm-hero__eyebrow{ color: var(--ds-c-accent); }
.hm-welcome__sign{
  margin-top: 14px !important;
  font-family: 'Oswald', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12.5px !important;
  color: var(--ds-c-text) !important;
}

/* ── sta arrivando: gli slot ─────────────────────────────────────────────── */
.hm-soon__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.hm-slot{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: var(--ds-c-surface);
  box-shadow: inset 3px 0 0 rgba(244,181,50,.20);
  color: var(--ds-c-text);
  text-decoration: none;
}
body.ds-dark .hm-slot{ box-shadow: inset 3px 0 0 rgba(244,181,50,.32); }
.hm-slot h3{
  margin: 0;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .028em;
}
.hm-slot p{ margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ds-c-text-secondary); }
.hm-slot__state{
  margin-top: 6px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}
/* Uno slot senza destinazione non finge di averla: nessun accento acceso,
   nessuna freccia, e non è un <a>. */
.hm-slot--soon{ opacity: .78; }
a.hm-slot .hm-slot__state{ color: var(--ds-c-accent); }
@media (hover: hover){
  a.hm-slot{ transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
  a.hm-slot:hover{
    background: var(--ds-c-surface-hover);
    box-shadow: inset 3px 0 0 var(--ds-brand-yellow-dark);
    transform: translateY(-2px);
  }
}
a.hm-slot:focus-visible{ outline: 2px solid var(--ds-c-focus); outline-offset: 3px; }

/* ── social ──────────────────────────────────────────────────────────────── */
.hm-social__row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.hm-social__link{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ds-c-surface);
  box-shadow: inset 0 0 0 1px var(--ds-c-surface-border);
  color: var(--ds-c-text);
  text-decoration: none;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
}
.hm-social__link svg{ width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; }
@media (hover: hover){
  .hm-social__link{ transition: background .2s ease, box-shadow .2s ease; }
  .hm-social__link:hover{
    background: var(--ds-c-surface-hover);
    box-shadow: inset 0 0 0 1px var(--ds-brand-yellow-dark);
  }
}
.hm-social__link:focus-visible{ outline: 2px solid var(--ds-c-focus); outline-offset: 3px; }