/* ==========================================================================
   LOPEZFX (LFX) – FOGLIO DI STILE UNICO
   ==========================================================================
   Condiviso da tutte le pagine: index.html e html/about, community,
   mentorship, capital. Il footer (footer.html) viene iniettato da script.js,
   quindi anche i suoi stili vivono qui.

   INDICE
     01  Fondamenta ............ compatibilità Lenis, variabili, reset, base
     02  Sfondo fotografico .... immagine fissa con parallax e velo scuro
     03  Header ................ barra superiore, menu, selettore lingua
     04  Home · Hero ........... logo, slogan, indicatore di scroll
     05  Home · Chi siamo ...... anteprima fondatori, bottone, titoli
     06  Pilastri .............. blocchi testo + immagine usati in tutto il sito
     07  Elenchi puntati ....... liste di Community, Mentorship e Capital
     08  Effetto vetro ......... aspetto "glass" condiviso dalle card
     09  Animazioni allo scroll  entrata di sezioni e card
     10  Pagine interne ........ struttura comune (contenitore, titolo, intro)
     11  Pagina Community
     12  Pagina Mentorship
     13  Pagina Dynamic Capital
     14  Footer
   ========================================================================== */


/* ==========================================================================
   01 · FONDAMENTA
   --------------------------------------------------------------------------
   Regole di base che valgono per ogni pagina: compatibilità con la libreria
   di scroll fluido (Lenis), colori e misure globali, reset e stile di body
   e link.
   ========================================================================== */

/* ---- 1.1 Scroll della pagina e compatibilità con Lenis ------------------ */

html {
  overflow-y: scroll; /* barra di scorrimento sempre presente: evita i salti orizzontali tra pagine corte e lunghe */
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---- 1.2 Variabili globali (colori, font, misure, vetro) ---------------- */

:root {
  --bg-dark: #000000;        /* nero puro */
  --bg-card: #0a0a0a;        /* sfondo schede, leggermente staccato dal nero */
  --border-color: #1a1a1a;   /* bordi sottili scuri */

  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;

  --accent-blue: #38bdf8;
  --accent-blue-glow: rgba(56, 189, 248, 0.55);

  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, Didot, serif;

  --max-width: 1300px;

  /* Effetto vetro (usato dalla sezione 08 e dalle card dei fondatori) */
  --bg-glass: rgba(10, 10, 10, 0.65);
  --border-glass: rgba(56, 189, 248, 0.2);
  --border-glass-hover: rgba(56, 189, 248, 0.5);
  --bg-glass-blur: blur(12px);

  /* Immagini di sfondo segnaposto: sostituisci i percorsi con le foto
     definitive. Per ora è usata solo --bg-home-img (inline nelle pagine);
     le altre sono pronte per le singole pagine. */
  --bg-home-img: url('imgs/bg-home.jpg');
  --bg-about-img: url('imgs/bg-about.jpg');
  --bg-community-img: url('imgs/bg-community.jpg');
  --bg-mentorship-img: url('imgs/bg-mentorship.jpg');
  --bg-capital-img: url('imgs/bg-capital.jpg');
}

/* ---- 1.3 Reset e stile base --------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}


/* ==========================================================================
   02 · SFONDO FOTOGRAFICO
   --------------------------------------------------------------------------
   Immagine fissa dietro tutta la pagina (<div class="page-bg-overlay">),
   scurita con un filtro. È più alta dello schermo per poter scorrere con
   effetto parallax: il movimento lo imposta script.js. Sopra c'è un velo
   radiale che sfuma verso il nero per rendere leggibile il testo.
   ========================================================================== */

.page-bg-overlay {
  position: fixed;
  top: -15vh;
  left: 0;
  width: 100%;
  height: 130vh;
  z-index: -1;
  background-image: url('imgs/bg-community.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.25) contrast(1.15) grayscale(0.2);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Velo che sfuma verso il nero per la leggibilità */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.85) 70%, #000000 100%);
  pointer-events: none;
}

/* Mobile e "riduci movimento": niente parallax, sfondo fermo a schermo intero */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .page-bg-overlay {
    top: 0;
    height: 100vh;
    transform: none !important;
    will-change: auto;
  }
}


/* ==========================================================================
   03 · HEADER E NAVIGAZIONE
   --------------------------------------------------------------------------
   Barra superiore fissa (sticky) presente in tutte le pagine: logo, menu
   principale (Community | Mentorship | Capital), link About Us e selettore
   lingua ITA / ENG. Nelle pagine interne a sinistra c'è la freccia "indietro".
   ========================================================================== */

/* ---- 3.1 Contenitore ---------------------------------------------------- */

.site-header {
  height: 70px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  background-color: rgb(0, 0, 0);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Tablet (sotto i 1024px): voci del menu più ravvicinate */
@media (max-width: 1024px) {
  .header-container {
    gap: 1rem;
  }

  .main-nav {
    padding: 0 1rem;
  }
}

/* ---- 3.2 Lato sinistro delle pagine interne: freccia "indietro" + logo -- */

.header-left-group {
  position: relative;
  padding-left: 3rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 100%;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 1.2rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.back-btn:hover {
  color: var(--accent-blue);
}

.back-arrow {
  line-height: 1;
}

.header-v-divider {
  color: var(--border-color);
  font-size: 1.1rem;
  user-select: none;
}

/* ---- 3.3 Logo ----------------------------------------------------------- */

.brand-logo {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Loghetto tondo accanto alla scritta (solo home): la sua opacità la
   gestisce script.js durante l'animazione di scroll del logo */
.header-logo-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  margin-right: 10px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.3s ease;
}

/* Scritta "LopezFX" con bagliore neon */
.logo-text {
  text-shadow: 0 0 10px var(--accent-blue-glow), 0 0 20px var(--accent-blue-glow);
  transition: text-shadow 0.3s ease;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}

.brand-logo:hover .logo-text {
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.8), 0 0 30px rgba(56, 189, 248, 0.6);
}

/* ---- 3.4 Menu principale e link secondario ------------------------------ */

.main-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 1.5rem;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.main-nav a:hover,
.nav-link-secondary:hover {
  color: var(--text-primary);
}

.nav-link-secondary {
  color: var(--text-secondary);
}

/* Separatore "|" tra le voci */
.separator {
  color: var(--border-color);
  user-select: none;
}

/* Voce della pagina corrente: azzurro con bagliore neon.
   Deve stare dopo gli stili :hover per prevalere. */
.main-nav ul li a.active,
.nav-link-secondary.active {
  color: var(--accent-blue);
  font-weight: 600;
  text-shadow: 0 0 8px var(--accent-blue-glow), 0 0 16px rgba(56, 189, 248, 0.35);
}

/* ---- 3.5 Utility a destra: About Us + selettore lingua ------------------ */

.header-utilities {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9rem;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 1001;
}

.lang-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer !important;
  padding: 4px 6px;
  pointer-events: auto;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.lang-btn:hover {
  color: var(--text-primary);
}

/* Lingua attualmente selezionata (classe aggiunta da script.js) */
.lang-btn.active {
  color: var(--accent-blue);
  text-shadow: 0 0 8px var(--accent-blue-glow);
}

.lang-divider {
  color: var(--border-color);
}


/* ==========================================================================
   04 · HOME · HERO
   --------------------------------------------------------------------------
   Prima schermata della home: a sinistra il logo grande (con riflesso
   metallico), a destra micro-titolo, slogan scritto a macchina e firma dei
   fondatori. In fondo l'indicatore "scorri". Animazioni e classi dinamiche
   (reveal-extra, fade-out, cursor) sono gestite da script.js.
   ========================================================================== */

/* ---- 4.1 Struttura ------------------------------------------------------ */

.hero-section {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 4rem 2rem;
}

.hero-container {
  display: grid;
  grid-template-columns: 45% 55%; /* logo | testo */
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- 4.2 Logo grande a sinistra ----------------------------------------- */

/* Il logo entra dal basso al caricamento (animazione logoEntrance) */
.hero-logo-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  max-width: 340px;
  opacity: 0;
  transform: translateY(40px);
  animation: logoEntrance 1s cubic-bezier(0.25, 1, 0.5, 1) 0.15s both;
}

.hero-logo-img {
  max-width: 340px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Lama di luce che attraversa il logo (si ripete ogni 5 secondi) */
.hero-logo-wrapper::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 100%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%
  );
  transform: rotate(25deg);
  animation: metallicShine 5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes logoEntrance {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes metallicShine {
  0%,
  75% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

/* ---- 4.3 Blocco testuale a destra --------------------------------------- */

.hero-right-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 1rem;
}

/* Micro-titolo sopra lo slogan e firma dei fondatori: partono nascosti e
   salgono con dissolvenza quando script.js aggiunge .reveal-extra */
.hero-subhead,
.hero-founders {
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.6s ease;
}

.hero-subhead {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--text-secondary);
}

.hero-founders {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-blue);
  text-shadow: 0 0 12px var(--accent-blue-glow);
}

.hero-subhead.reveal-extra,
.hero-founders.reveal-extra {
  opacity: 1;
  transform: translateY(0);
}

/* Slogan principale (scritto a macchina da script.js) */
.hero-tagline-main {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  min-height: 2.5em;
  margin: 0;
}

/* Cursore "|" dopo lo slogan: sfuma via a fine scrittura */
.cursor.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Mobile: una sola colonna, tutto centrato */
@media (max-width: 768px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }

  .hero-right-content {
    align-items: center;
    text-align: center;
  }

  .hero-tagline-main {
    font-size: 1.8rem;
    min-height: auto;
  }
}

/* ---- 4.4 Indicatore "scorri" -------------------------------------------- */

.scroll-indicator {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

/* Sparisce quando la pagina viene scrollata (classe aggiunta da script.js) */
.scroll-indicator.fade-out {
  opacity: 0;
  transform: translate(-50%, 15px);
}

.scroll-mouse {
  width: 24px;
  height: 42px;
  border: 1.5px solid var(--text-secondary);
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.scroll-dot {
  width: 4px;
  height: 9px;
  background-color: var(--accent-blue);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-blue-glow);
  animation: scrollDotLoop 2s infinite ease-in-out;
}

.scroll-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

@keyframes scrollDotLoop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(14px);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-dot {
    animation: none;
  }
}


/* ==========================================================================
   05 · HOME · CHI SIAMO (ANTEPRIMA)
   --------------------------------------------------------------------------
   Sezione sotto la hero con le due card dei fondatori (foto, ruolo, nome,
   descrizione) e il bottone verso la pagina About. Include anche titoli di
   sezione e bottone, usati solo qui.
   ========================================================================== */

/* ---- 5.1 Sezione e intestazione ----------------------------------------- */

.about-preview-section {
  padding: 5rem 2rem;
  position: relative;
  z-index: 2;
}

.text-center {
  text-align: center;
}

/* Badge "LFX | ABOUT US" */
.section-badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid var(--accent-blue);
  border-radius: 20px;
  color: var(--accent-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
}

/* ---- 5.2 Card dei fondatori (stile vetro fluttuante) -------------------- */

.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 1000px;
  margin: 3rem auto 2.5rem auto;
}

.founder-card {
  background: var(--bg-glass);
  backdrop-filter: var(--bg-glass-blur);
  -webkit-backdrop-filter: var(--bg-glass-blur);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Al passaggio del mouse: la card si solleva e prende un bagliore azzurro */
.founder-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-blue);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(56, 189, 248, 0.25);
}

/* Foto in formato 3:4 con zoom morbido al mouseover */
.founder-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #0a0a0a;
}

.founder-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.founder-card:hover .founder-img-wrapper img {
  transform: scale(1.05);
}

/* Sfumatura scura sulla foto, per leggere ruolo e nome */
.founder-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.95) 0%,
    rgba(10, 10, 10, 0.4) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Ruolo e nome in sovrimpressione, in basso sulla foto */
.founder-photo-meta {
  position: absolute;
  bottom: 1.2rem;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.role-pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid var(--accent-blue);
  border-radius: 20px;
  color: var(--accent-blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.founder-name {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Parte bassa della card: descrizione */
.founder-card-body {
  padding: 1.5rem;
}

.founder-card-body p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- 5.3 Bottone "Scopri la nostra storia" ------------------------------ */

.about-cta-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid var(--accent-blue);
  border-radius: 30px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--accent-blue);
  color: #000000;
  box-shadow: 0 0 20px var(--accent-blue-glow);
}

/* ---- 5.4 Responsive ----------------------------------------------------- */

/* Mobile: card in colonna singola, senza sfocatura (più fluido) */
@media (max-width: 768px) {
  .founders-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .founder-card {
    backdrop-filter: none;
    background: rgba(10, 10, 10, 0.9);
  }

  .founder-name {
    font-size: 1.7rem;
  }
}

/* "Riduci movimento": niente sollevamento né zoom */
@media (prefers-reduced-motion: reduce) {
  .founder-card,
  .founder-img-wrapper img {
    transition: none;
  }

  .founder-card:hover {
    transform: none;
  }

  .founder-card:hover .founder-img-wrapper img {
    transform: none;
  }
}


/* ==========================================================================
   06 · PILASTRI (TESTO + IMMAGINE)
   --------------------------------------------------------------------------
   Il blocco più riusato del sito: titolo, poi griglia a due colonne con
   testo da un lato e immagine dall'altro. Serve per le sezioni Community,
   Mentorship e Dynamic Capital della home e per le sezioni di dettaglio
   delle pagine interne (si inverte l'ordine nell'HTML). Qui c'è anche il
   segnaposto grigio tratteggiato per le immagini non ancora pronte.
   ========================================================================== */

/* ---- 6.1 Struttura della sezione ---------------------------------------- */

.pillar-section {
  padding: 5rem 2rem;
}

.pillar-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- 6.2 Titoli ---------------------------------------------------------- */

/* Titolo cliccabile (home): diventa azzurro e si alza al passaggio del mouse */
.pillar-title-link {
  display: inline-block;
  margin-bottom: 1rem;
}

.pillar-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  transition: color 0.3s ease, transform 0.2s ease;
}

.pillar-title-link:hover .pillar-title {
  color: var(--accent-blue);
  transform: translateY(-2px);
}

/* Prefisso azzurro "LFX |" davanti ai titoli.
   Deve stare dopo .pillar-title per vincere sul colore. */
.title-divider {
  color: var(--accent-blue);
  margin: 0 0.5rem;
}

/* Titolo non cliccabile (pagine interne) */
.pillar-title-block {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ---- 6.3 Griglia testo + immagine --------------------------------------- */

.pillar-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.pillar-text-content {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.pillar-media-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pillar-media-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.pillar-media-img:hover {
  border-color: var(--accent-blue);
  transform: scale(1.02);
}

/* Link che racchiude un'immagine a tutta larghezza (Community, Capital) */
.media-link {
  display: block;
  width: 100%;
}

/* ---- 6.4 Segnaposto per immagini mancanti ------------------------------- */

.media-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.media-placeholder:hover {
  border-color: var(--accent-blue);
}

/* ---- 6.5 Responsive ----------------------------------------------------- */

/* Mobile: testo e immagine una sopra l'altra */
@media (max-width: 760px) {
  .pillar-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* ==========================================================================
   07 · ELENCHI PUNTATI
   --------------------------------------------------------------------------
   Le tre liste con pallino azzurro: piattaforme Community (home e pagina
   Community), fasi Mentorship (home) e dati Dynamic Capital (home).
   Pallino, dimensioni e colori sono comuni; cambiano solo spaziature e
   allineamento.
   ========================================================================== */

/* ---- 7.1 Parti comuni alle tre liste ------------------------------------ */

.home-community-list,
.home-mentorship-list,
.home-capital-list {
  list-style: none;
  padding-left: 0;
}

.home-community-list li,
.home-mentorship-list li,
.home-capital-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.home-community-list li::before,
.home-mentorship-list li::before,
.home-capital-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 1.2rem;
  line-height: 1;
}

.home-community-list strong,
.home-mentorship-list strong,
.home-capital-list strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---- 7.2 Community ------------------------------------------------------- */

.home-community-list {
  margin: 1.25rem 0 1.75rem 0;
}

.home-community-list li {
  margin-bottom: 0.75rem;
}

/* ---- 7.3 Mentorship (home) ---------------------------------------------- */

.home-mentorship-block {
  margin: 1.25rem 0 1.75rem 0;
  text-align: center;
}

/* Sottotitoli "1 to 1" e "Life-time" */
.mentorship-subgroup-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-blue);
  margin: 0.75rem 0 0.4rem 0;
}

.home-mentorship-list {
  margin-bottom: 0.75rem;
  display: inline-block;
  text-align: left;
}

.home-mentorship-list li {
  margin-bottom: 0.5rem;
}

/* ---- 7.4 Dynamic Capital (home) ----------------------------------------- */

.home-capital-list {
  margin: 1.25rem auto;
  display: table;
  text-align: left;
}

.home-capital-list li {
  margin-bottom: 0.6rem;
}

.home-capital-disclaimer {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 1.5rem;
  line-height: 1.45;
  opacity: 0.85;
  text-align: center;
}


/* ==========================================================================
   08 · EFFETTO VETRO (GLASSMORPHISM)
   --------------------------------------------------------------------------
   Aspetto "vetro smerigliato" condiviso da sezioni e card: sfondo scuro
   semitrasparente con sfocatura, bordo azzurro tenue e leggero bagliore.
   Al passaggio del mouse il bordo si accende e l'elemento si alza.
   Gli !important servono a battere stili più specifici definiti altrove.
   ========================================================================== */

.pillar-section,
.phase-card,
.bundle-card,
.capital-card,
.about-card {
  background: var(--bg-glass) !important;
  backdrop-filter: var(--bg-glass-blur);
  -webkit-backdrop-filter: var(--bg-glass-blur);
  border: 1px solid var(--border-glass) !important;
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(56, 189, 248, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pillar-section:hover,
.phase-card:hover,
.bundle-card:hover,
.capital-card:hover,
.about-card:hover {
  border-color: var(--border-glass-hover) !important;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.2);
  transform: translateY(-4px);
}

/* Mobile: niente sfocatura (più fluido), sfondo più opaco */
@media (max-width: 768px) {
  .pillar-section,
  .phase-card,
  .bundle-card,
  .capital-card,
  .about-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 10, 10, 0.88) !important;
  }
}


/* ==========================================================================
   09 · ANIMAZIONI D'ENTRATA ALLO SCROLL
   --------------------------------------------------------------------------
   Gli elementi partono nascosti e compaiono quando entrano nello schermo:
   script.js (IntersectionObserver) aggiunge la classe .visible.
   ========================================================================== */

/* ---- 9.1a Sezioni social della pagina Community -------------------------- */
/* Alternate: Discord e Instagram da sinistra, YouTube e Telegram da destra */

#discord-section,
#instagram-section {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

#youtube-section,
#telegram-section {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

#discord-section.visible,
#instagram-section.visible,
#youtube-section.visible,
#telegram-section.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: dissolvenza dal basso, per evitare scroll orizzontale */
@media (max-width: 768px) {
  #discord-section,
  #instagram-section,
  #youtube-section,
  #telegram-section {
    transform: translateY(30px);
  }
}

/* ---- 9.1b Sezioni di dettaglio della pagina Mentorship ------------------- */
/* Alternate: STEP 1 e STEP 3 da sinistra, STEP 2 e Bundle da destra */
#fase1-detail, #fase3-detail {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

#fase2-detail, #bundle-detail-section {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

#fase1-detail.visible, #fase2-detail.visible, #fase3-detail.visible, #bundle-detail-section.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: dissolvenza dal basso, per evitare scroll orizzontale */
@media (max-width: 768px) {
  #fase1-detail,
  #fase2-detail,
  #fase3-detail,
  #bundle-detail-section {
    transform: translateY(30px);
  }
}

/* ---- 9.2 Card social in cima alla pagina Community ---------------------- */
/* Dissolvenza laterale: Discord e YouTube da sinistra, Instagram e Telegram da destra.
   Mantiene la transizione di bordo e bagliore per non accenderli di scatto. */

.community-card {
  opacity: 0 !important;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
  will-change: opacity, transform;
}

.community-card:nth-child(1),
.community-card:nth-child(2) {
  transform: translateX(-50px) !important;
}

.community-card:nth-child(3),
.community-card:nth-child(4) {
  transform: translateX(50px) !important;
}

.community-card.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Su mobile dissolvenza morbida dal basso per evitare sbordamenti orizzontali */
@media (max-width: 768px) {
  .community-card:nth-child(1),
  .community-card:nth-child(2),
  .community-card:nth-child(3),
  .community-card:nth-child(4) {
    transform: translateY(25px) !important;
  }

  .community-card.visible {
    transform: translateY(0) !important;
  }
}

/* "Riduci movimento": le card sono subito visibili e ferme */
@media (prefers-reduced-motion: reduce) {
  .community-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- 9.3 Banner iniziali pagina Mentorship (Step 1-2-3 e Bundle) -------- */
/* Step 1, 2 e 3 entrano da sinistra; il Bundle entra da destra */

.phases-stack .phase-card {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: opacity, transform;
}

.bundle-wrapper .bundle-card {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: opacity, transform;
}

.phases-stack .phase-card.visible,
.bundle-wrapper .bundle-card.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: dissolvenza dal basso */
@media (max-width: 768px) {
  .phases-stack .phase-card,
  .bundle-wrapper .bundle-card {
    transform: translateY(25px);
  }

  .phases-stack .phase-card.visible,
  .bundle-wrapper .bundle-card.visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phases-stack .phase-card,
  .bundle-wrapper .bundle-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- 9.4 Card della pagina Dynamic Capital ------------------------------ */
/* Alternate: 1ª e 3ª card da sinistra, 2ª card da destra. */
/* Il disclaimer legale (.disclaimer-card) resta escluso e non animato. */

.capital-card:nth-of-type(1),
.capital-card:nth-of-type(3) {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: opacity, transform;
}

.capital-card:nth-of-type(2) {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: opacity, transform;
}

.capital-card.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: dissolvenza dal basso per evitare scrollbar orizzontale */
@media (max-width: 768px) {
  .capital-card:nth-of-type(1),
  .capital-card:nth-of-type(2),
  .capital-card:nth-of-type(3) {
    transform: translateY(25px);
  }

  .capital-card.visible {
    transform: translateY(0);
  }
}

/* Riduci movimento */
@media (prefers-reduced-motion: reduce) {
  .capital-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   10 · PAGINE INTERNE · STRUTTURA COMUNE
   --------------------------------------------------------------------------
   Scheletro condiviso da About, Community, Mentorship e Capital:
   contenitore della pagina, larghezza massima, titolo H1 con prefisso
   "LFX |" e paragrafo introduttivo.
   ========================================================================== */

.page-container {
  min-height: calc(100vh - 80px);
  padding: 4rem 2rem 6rem;
}

.content-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
}

.page-header-block {
  margin-bottom: 4rem;
  text-align: center;
}

.page-title {
  margin-bottom: 1.25rem;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-intro {
  max-width: 980px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1.6;
}


/* ==========================================================================
   11 · PAGINA COMMUNITY
   --------------------------------------------------------------------------
   In alto una riga di 4 card in vetro cliccabili, ognuna con il logo del
   social (Discord, YouTube, Instagram, Telegram); sotto, le quattro sezioni
   di approfondimento (struttura "pilastri" della sezione 06).
   ========================================================================== */

/* ---- 11.1 Banner social ------------------------------------------------- */

.community-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

/* Card social: vetro trasparente 3:4 con al centro solo il logo del social.
   A riposo è neutra; al passaggio del mouse (o con la tastiera) bordo, bagliore
   e logo diventano azzurri. La classe community-card-banner non ha stile ma la
   usa script.js per l'animazione di entrata: non toglierla dall'HTML. */
.community-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: var(--bg-glass-blur);
  backdrop-filter: var(--bg-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
}

.community-card:hover,
.community-card:focus-visible {
  border-color: var(--accent-blue);
  box-shadow: 0 0 25px var(--accent-blue-glow), 0 0 70px rgba(56, 189, 248, 0.25), inset 0 0 25px rgba(56, 189, 248, 0.12);
}

/* Logo del social (SVG inline): bianco a riposo, azzurro con bagliore al mouse */
.community-card-logo {
  width: 32%;
  max-width: 96px;
  height: auto;
  color: var(--text-primary);
  transition: color 0.3s ease, filter 0.3s ease;
}

.community-card:hover .community-card-logo,
.community-card:focus-visible .community-card-logo {
  color: var(--accent-blue);
  filter: drop-shadow(0 0 10px var(--accent-blue-glow));
}
/* Tablet: 2 colonne */
@media (max-width: 1024px) {
  .community-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: niente sfocatura (più fluido), come le altre card */
@media (max-width: 768px) {
  .community-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Mobile: 1 colonna */
@media (max-width: 600px) {
  .community-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 11.2 Sezioni di approfondimento ------------------------------------ */

.social-sections-wrapper {
  margin-top: 5rem;
}


/* ==========================================================================
   12 · PAGINA MENTORSHIP
   --------------------------------------------------------------------------
   In alto due colonne: "1 to 1" (tre card Step 1-2-3) e "Life-time"
   (card Bundle con immagine che esce leggermente a destra). Sotto, le
   sezioni di dettaglio a scorrimento (struttura "pilastri" della sezione 06).
   ========================================================================== */

/* ---- 12.1 Griglia principale a due colonne ------------------------------ */

.mentorship-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
  margin-top: 2rem;
}

.mentorship-column {
  display: flex;
  flex-direction: column;
}

/* Titolo di colonna ("1 to 1" / "Life-time") con linee ai lati */
.mentorship-col-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  text-align: center;
  color: var(--text-primary);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mentorship-col-title::before,
.mentorship-col-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-color);
}

/* ---- 12.2 Colonna 1 to 1: le tre fasi ----------------------------------- */

.phases-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
}

/* Aspetto vetro, bordi e hover: sezione 08 */
.phase-card {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem;
}

.phase-info {
  flex: 1;
}

.phase-title {
  margin-bottom: 0.4rem;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.phase-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Cerchio col numero della fase */
.phase-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--accent-blue);
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.1);
}

/* ---- 12.3 Colonna Life-time: il bundle ---------------------------------- */

.bundle-wrapper {
  display: flex;
  flex: 1;
}

/* Aspetto vetro, bordi e hover: sezione 08 */
.bundle-card {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 2.25rem;
}

.bundle-title {
  margin-bottom: 1rem;
  color: var(--text-primary);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.bundle-desc {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

/* Contenitore dell'immagine: esce di 56px a destra della card */
.bundle-media-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-right: -56px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
}

/* Il segnaposto occupa tutto il contenitore (deve stare dopo .media-placeholder) */
.bundle-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  aspect-ratio: 4 / 3;
}

.bundle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- 12.4 Sezioni di dettaglio a scorrimento ---------------------------- */

.mentorship-details-wrapper {
  margin-top: 5.5rem;
}

/* Titolo azzurro "STEP 1/2/3" sopra ogni sezione di dettaglio */
.phase-detail-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 1.5rem;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ---- 12.5 Responsive ---------------------------------------------------- */

/* Tablet: le due colonne si impilano e il bundle va in colonna singola */
@media (max-width: 1024px) {
  .mentorship-main-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .bundle-card {
    grid-template-columns: 1fr;
  }
}

/* Mobile: l'immagine del bundle non esce più dalla card */
@media (max-width: 768px) {
  .bundle-media-box {
    margin-right: 0;
  }
}


/* ==========================================================================
   13 · PAGINA DYNAMIC CAPITAL
   --------------------------------------------------------------------------
   Pagina a card verticali: obiettivo con tabella riassuntiva, interesse
   composto con immagine equity curve, punti di forza e rischi su due
   colonne, e in fondo il box con l'avvertenza legale.
   ========================================================================== */

/* ---- 13.1 Card e titoli ------------------------------------------------- */

/* Aspetto vetro, bordi e hover: sezione 08 */
.capital-card {
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.capital-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 1rem;
}

/* ---- 13.2 Tabella "Modalità ipotizzata" --------------------------------- */

.capital-info-box {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
}

.capital-box-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}

.capital-table {
  width: 100%;
  border-collapse: collapse;
}

.capital-table td {
  padding: 0.6rem 0;
  font-size: 0.95rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.table-label {
  color: var(--text-secondary);
  font-weight: 500;
  width: 40%;
}

.table-value {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---- 13.3 Immagine equity curve ----------------------------------------- */

.capital-card .pillar-media-box {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* Deve stare dopo .pillar-media-img (sezione 06) per annullarne il "cover" */
.capital-equity-img {
  display: block;
  object-fit: fill;
}

.capital-subtext {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 1rem;
  font-style: italic;
}

/* ---- 13.4 Punti di forza e rischi (due colonne) ------------------------- */

.capital-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.capital-column-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.title-strength {
  color: var(--accent-blue);
}

/* Rosso tenue per l'avvertenza sui rischi */
.title-risk {
  color: #f87171;
}

.capital-list {
  list-style: none;
  padding-left: 0;
}

.capital-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.capital-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 1.2rem;
}

/* ---- 13.5 Box avvertenza legale ----------------------------------------- */

.disclaimer-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.disclaimer-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  text-transform: uppercase;
  border-bottom: 1px solid #1f1f23;
  padding-bottom: 0.5rem;
  display: inline-block;
}

.disclaimer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
}

/* Testo legale: piccolo, grigio e giustificato */
.disclaimer-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: justify;
}

/* ---- 13.6 Responsive ---------------------------------------------------- */

/* Tablet/mobile: forza e rischi in colonna singola, avvertenza allineata a sinistra */
@media (max-width: 900px) {
  .capital-two-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .disclaimer-card {
    align-items: flex-start;
    gap: 0.75rem;
  }
}


/* ==========================================================================
   14 · FOOTER
   --------------------------------------------------------------------------
   Footer in stile "fintech", caricato da script.js dentro #footer-placeholder.
   Tre fasce: (1) brand + social a sinistra e colonne di link a destra,
   (2) disclaimer legale a tutta larghezza, (3) riga finale con copyright.
   ========================================================================== */

/* ---- 14.1 Contenitore --------------------------------------------------- */

.site-footer {
  background: linear-gradient(180deg, #070b14 0%, #03050a 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.15);
  color: #94a3b8;
  font-size: 0.88rem;
  padding-top: 3.5rem;
  width: 100%;
  position: relative;
  z-index: 10;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Prima fascia: brand a sinistra, colonne di link a destra */
.site-footer .footer-container:first-child {
  display: grid;
  grid-template-columns: 1.4fr 2.6fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
}

/* ---- 14.2 Brand, slogan e icone social ---------------------------------- */

.footer-brand-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.05em;
}

.footer-tagline {
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 340px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social-icon:hover {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  background-color: rgba(56, 189, 248, 0.08);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
  transform: translateY(-2px);
}

.social-icon:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* ---- 14.3 Colonne di link ----------------------------------------------- */

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-col-title {
  color: #f8fafc;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.86rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #38bdf8;
  padding-left: 3px;
}

.footer-links a:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* ---- 14.4 Disclaimer legale --------------------------------------------- */

.footer-disclaimer-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2.2rem 0;
  background-color: rgba(0, 0, 0, 0.2);
}

/* pre-line: rispetta gli "a capo" del testo tradotto da script.js */
.footer-disclaimer-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  white-space: pre-line;
}

.footer-disclaimer-content p {
  max-width: 920px;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.6;
  margin: 0 auto;
  text-align: center;
}

/* ---- 14.5 Riga finale (copyright e firma) ------------------------------- */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1.25rem 0;
  background-color: #020408;
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.copyright-text,
.footer-credit {
  font-size: 0.78rem;
  color: #475569;
}

/* I margini "auto" distribuiscono lo spazio tra i due testi: non modificarli
   senza controllare l'allineamento della riga */
.copyright-text {
  margin: auto auto 0 auto;
}

.footer-credit {
  margin: auto 0 0 auto;
}

/* ---- 14.6 Responsive ---------------------------------------------------- */

@media (max-width: 992px) {
  .site-footer .footer-container:first-child {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .footer-nav-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }

  .footer-bottom-flex {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .footer-nav-grid {
    grid-template-columns: 1fr;
  }
}