/* ===========================================================================
   Home — il bivio fra le due landing.
   Poche cose, grandi: la pagina esiste solo per far scegliere.
   =========================================================================== */

.hp-bivio { padding: 96px 0 110px; min-height: calc(100vh - 72px); display: flex; align-items: center; }
.hp-intro { max-width: 760px; }
.hp-intro h1 { font-size: clamp(36px, 5.2vw, 68px); margin-top: 16px; }
.hp-lead { color: var(--ink-soft); font-size: clamp(16px, 2vw, 19px); max-width: 56ch; margin-top: 20px; }

.hp-cubi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 54px; }

.hp-cubo {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-alt);
  text-decoration: none !important; color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hp-cubo:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
/* La barra rossa in basso, come le barre di colore della presentazione: si
   allunga al passaggio del mouse. */
.hp-cubo::after {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 72px; height: 4px; background: var(--accent);
  transition: width .35s ease;
}
.hp-cubo:hover::after { width: 100%; }

.hp-cubo-foto { position: absolute; inset: 0; }
.hp-cubo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hp-cubo:hover .hp-cubo-foto img { transform: scale(1.04); }
/* Velo scuro, dall'indaco al BLACK: senza, il testo bianco su una foto chiara
   diventa illeggibile. */
.hp-cubo-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,1,68,.22) 0%, rgba(23,1,68,.84) 60%, rgba(18,10,30,.96) 100%);
}

.hp-cubo-testo { position: relative; padding: 32px 30px 30px; display: flex; flex-direction: column; gap: 10px; }
.hp-cubo-tag {
  color: var(--accent-dark); letter-spacing: .2em; text-transform: uppercase; font-size: 12px;
}
/* Maiuscolo Black, come "BULB® FUNCTIONAL": è il nome della strada da prendere. */
.hp-cubo-titolo {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -.005em; line-height: 1.02; text-transform: uppercase;
}
.hp-cubo-desc { color: var(--ink-soft); font-size: 15.5px; max-width: 40ch; }
.hp-cubo-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dark);
}
.hp-cubo:hover .hp-cubo-cta .arr { transform: translateX(3px); }
.hp-cubo-cta .arr { transition: transform .2s ease; }

.hp-nota { color: var(--ink-mute); font-size: 14px; margin-top: 28px; font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) { .hp-cubo::after { transition: none; } }

@media (max-width: 860px) {
  .hp-cubi { grid-template-columns: 1fr; }
  .hp-cubo { min-height: 340px; }
  .hp-bivio { min-height: 0; padding: 64px 0 80px; }
}
@media (max-width: 640px) {
  .hp-cubo-testo { padding-left: 16px; padding-right: 16px; }
}

/* ===========================================================================
   Stile «Celebrate» (19/10/2026, richiesta dell'utente: «allinea anche la
   home», solo il layout): come le landing e la pagina evento, col grigio chiaro
   #F5F4F1 del mockup della Professional Gallery, nero #0D0C0F, rosso #C4032F,
   rosa #F58BA6 sul nero, angoli vivi, titolo Black con la parte in evidenza
   sottile e a capo, etichette mono fra quadre, footer rosso Celebrate.
   Vale solo col body .stile-celebrate (campo «Stile della pagina» = Celebrate):
   con «Functional» la home resta com'è sopra. Testi, foto e menu invariati.
   Backup di prima: .backup/2026-10-19-prima-del-grigio-chiaro/home-prima.tar.gz.
   =========================================================================== */
.stile-celebrate {
  --ce-rosso: #C4032F; --ce-rosso-testo: #A80230; --ce-rosa: #F58BA6;
  --ce-nero: #0D0C0F; --ce-grigio: #F5F4F1; --ce-linea: rgba(13,12,15,.14);
  --bg: var(--ce-grigio); --bg-alt: var(--ce-grigio); --surface: #fff;
  --ink: var(--ce-nero); --ink-soft: #2B2A2E; --ink-mute: #4A494D;
  --accent: var(--ce-rosso); --accent-dark: var(--ce-rosso-testo); --accent-hot: var(--ce-rosso);
  --border: var(--ce-linea); --border-soft: var(--ce-linea);
  --radius-s: 0; --radius-m: 0; --radius-l: 0;
  --bulb-red: var(--ce-rosso); --bulb-red-deep: var(--ce-rosso-testo);
  --nav-h: 64px;
  background: var(--ce-grigio); color: var(--ce-nero);
}

/* Testata: grigio velato, marchio nero, «Another way» rosso, voci mono. */
.stile-celebrate .site-header { background: rgba(245,244,241,.94); border-bottom: 1px solid var(--ce-linea); }
.stile-celebrate .site-header .brand-logo { filter: brightness(0); }
.stile-celebrate .nav-claim {
  font-family: var(--font-display); font-weight: 400; font-size: 24px;
  letter-spacing: .01em; text-transform: none; color: var(--ce-rosso);
}
.stile-celebrate .nav-links a {
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: var(--mono-tracking); color: var(--ce-nero);
}
.stile-celebrate .nav-links a:hover, .stile-celebrate .nav-links a.active { color: var(--ce-rosso-testo); }
.stile-celebrate .nav-links a.active::after { content: none; }

/* Il bivio: grigio chiaro pieno, senza bagliore né righe. */
.stile-celebrate .hp-bivio { background: var(--ce-grigio); color: var(--ce-nero); min-height: calc(100vh - var(--nav-h) - 1px); padding: 104px 0 120px; }
.stile-celebrate .hp-bivio.band-glow::before, .stile-celebrate .hp-bivio.band-glow::after { content: none; }
.stile-celebrate .eyebrow { font-size: 12px; letter-spacing: var(--mono-tracking); color: var(--ce-rosso-testo); }
.stile-celebrate .eyebrow::before, .stile-celebrate .eyebrow::after { color: inherit; font-weight: inherit; }
.stile-celebrate .hp-intro { max-width: 1040px; }
.stile-celebrate .hp-intro h1 {
  font-size: clamp(44px, 7vw, 112px); font-weight: 900; line-height: .88;
  letter-spacing: -.02em; text-transform: uppercase; margin-top: 20px;
}
.stile-celebrate .hp-intro h1 .serif { display: block; font-weight: 300; color: inherit; }
.stile-celebrate .hp-lead { color: #2B2A2E; font-size: clamp(17px, 1.6vw, 19px); margin-top: 28px; }

/* I due blocchi: spigoli vivi, foto sotto un velo nero, bottone squadrato. */
.stile-celebrate .hp-cubi { gap: 14px; margin-top: 64px; }
.stile-celebrate .hp-cubo { border: 0; background: var(--ce-nero); color: #fff; }
.stile-celebrate .hp-cubo:hover { transform: none; box-shadow: none; }
.stile-celebrate .hp-cubo::after { height: 6px; background: var(--ce-rosso); }
.stile-celebrate .hp-cubo-foto::after {
  background: linear-gradient(180deg, rgba(13,12,15,.12) 0%, rgba(13,12,15,.76) 58%, rgba(13,12,15,.95) 100%);
}
.stile-celebrate .hp-cubo-tag { color: var(--ce-rosa); font-family: var(--font-mono); font-weight: var(--mono-weight); letter-spacing: var(--mono-tracking); }
.stile-celebrate .hp-cubo-titolo { font-size: clamp(28px, 3.2vw, 46px); line-height: .9; letter-spacing: -.01em; }
.stile-celebrate .hp-cubo-desc { color: #D9D9DB; }
.stile-celebrate .hp-cubo-cta {
  align-self: flex-start; margin-top: 16px; padding: 14px 20px; gap: 12px;
  background: var(--ce-rosso); color: #fff;
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px; letter-spacing: var(--mono-tracking);
  transition: background .2s, color .2s;
}
.stile-celebrate .hp-cubo:hover .hp-cubo-cta { background: #fff; color: var(--ce-nero); }
.stile-celebrate .hp-nota {
  color: #4A494D; font-size: 12px; font-weight: var(--mono-weight);
  letter-spacing: var(--mono-tracking); text-transform: uppercase; margin-top: 32px;
}

/* Footer: il rosso della Celebrate. */
.stile-celebrate .site-footer { background: var(--ce-rosso); }
.stile-celebrate .foot-manifesto-titolo { letter-spacing: -.02em; line-height: .86; }
.stile-celebrate .foot-hashtag { font-family: var(--font-display); font-weight: 300; }

@media (max-width: 860px) {
  .stile-celebrate .hp-bivio { min-height: 0; padding: 72px 0 88px; }
}