@font-face{
        font-family: "JUST Sans";
        src:
          local("JUST Sans"),
          local("Just Sans"),
          url("../fonts/just_sans/JUST%20Sans%20Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

     @font-face{
        font-family: "Sitka";
        src: url("../fonts/sitka/SitkaVF%201.ttf") format("truetype");
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
      }

     @font-face{
        font-family: "Sitka";
        src: url("../fonts/sitka/SitkaVF-Italic.ttf") format("truetype");
        font-weight: 100 900;
        font-style: italic;
        font-display: swap;
      }


    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{font-family: "JUST Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color:#000000; background:#fff}
    img{max-width:100%; display:block}
    a{color:inherit}

    :root{
      /* colori placeholder (verranno sostituiti con i token reali) */
      --brand-900:#0a1231; /* blu notte */
      --brand-800:#001F5B; /* blu scuro */
      --brand-700:#193e7f; /* blu */
      --brand-600:#3559a5; /* blu medio */
      --brand-300:#b8c6ea; /* blu chiaro */
      --gold-500:#c7a54a; /* accento dorato */
      --beige-100:#efe9dc; /* fascia chiara */
      --ink-900:#0f1222;  /* testo principale */
      --ink-600:#4b5165;  /* testo secondario */
      --muted:#f5f7fb;    /* bg sezioni */
      --card:#ffffff;     /* bg card */
      --danger:#d44;      /* placeholder */

      /* tipografia provvisoria */
        --h1: clamp(40px, 6vw, 56px);
        --lh-h1: 1.2;  
        --h2: clamp(36px, 4.5vw, 48px);
        --lh-h2: 1.2;
        --h3: clamp(28px, 3vw, 32px);
        --lh-h3: 1.2;  
        --h4: clamp(22px, 2.5vw, 24px);
        --lh-h4: 1.3;
        --h5: clamp(20px, 2vw, 20px);
        --lh-h5: 1.4;
        --h6: clamp(16px, 1.8vw, 18px);
        --lh-h6: 1.5;
      --lead: clamp(18px, 1.8vw, 36px);
      --body: 16px;
      --tagline: 20px;

      /* Text Large: 18; Medium: 16; Regular: 14; Small: 12 */
      --text-lg: 18px;
      --text-md: 18px; /* default body */
      --text-sm: 14px;
      --text-xs: 12px;

      /* font families */
      --font-sitka: "Sitka", Georgia, "Times New Roman", serif;

      /* spazi e layout */
      --container: 1440px;
      --radius-xl: 20px;
      --radius-l: 14px;
      --shadow-m: 0 10px 30px rgba(0,0,0,.12);
      



       /* fascio obliquo */
      --beam-angle: -24deg;    /* inclinazione */
      --beam-width: 50%;       /* larghezza del raggio */
      --beam-opacity: .32;     /* intensità 0–1 */
      --beam-blur: 103px;       /* morbidezza bordi */
      --beam-offset-x: 950px;           /* posizione orizzontale del centro banda */
      --beam-offset-y: -1600px;           /* posizione verticale del centro banda */

      /* grana */
      --grain-opacity: .35;   /* era 5.28 → deve stare tra 0 e 1 */
      --grain-size: 145px;
      --grain-blend: overlay;

      /* gradiente base della sezione */
      --base-top: #0b1433;
      --base-bot: #0b1433;
      --glow-left: rgba(255,255,255,0);   /* alone tenue a sinistra */
      --glow-right: rgba(120,170,255,0);  /* alone più intenso a destra */
    }

    .container{ width: min(var(--container), 100% - 32px); margin-inline:auto }
    .section{padding: clamp(48px,7vw,110px) 0}
    .stack > * + *{margin-top: var(--stack-gap, 16px)}

    h1,h2,h3,h4,h5,h6{
        margin:0 0 .6em;
        letter-spacing:-.01em;
        font-weight:800; /* puoi variare per livello se vuoi */
      }
    h1{ font-size:var(--h1); line-height:var(--lh-h1); font-weight:800; }
    h2{ font-size:var(--h2); line-height:var(--lh-h2); font-weight:800; }
    h3{ font-size:var(--h3); line-height:var(--lh-h3); font-weight:700; }
    h4{ font-size:var(--h4); line-height:var(--lh-h4); font-weight:700; }
    h5{ font-size:var(--h5); line-height:var(--lh-h5); font-weight:600; }
    h6{ font-size:var(--h6); line-height:var(--lh-h6); font-weight:600; }
    p{font-size:var(--body); line-height:1.65; color:var(--ink-600)}
    

    /* Paragrafi */
    p{
      font-size: var(--text-md);      /* 16px */
      line-height: 1.5;               /* 150% */
      color: var(--ink-600);
    }

    /* Lead/Tagline (hero intro) */
    .lead{
      font-size: var(--lead);      /* 20px */      
      color:var(--gold-500);
      line-height:1.20;
    }

    /* Utility (facoltative) per testo */
    .text-lg { font-size: var(--text-lg); line-height: 1.5; }
    .text-sm { font-size: var(--text-sm); line-height: 1.5; }
    .text-xs { font-size: var(--text-xs); line-height: 1.5; }

    /* =========================
       Header (semplice)
       ========================= */
    /* Header visibile da subito, overlay sull'hero */
      .site-header{
        position: fixed; top:0; left:0; right:0; z-index:1000;
        background: transparent;            /* nessuno sfondo al load */
        opacity: 1; pointer-events: auto;   /* visibile e cliccabile */
        transform: none;                    /* niente offset */
        transition: background .25s ease, box-shadow .25s ease, padding .2s ease;
      }

      /* barra e dimensioni iniziali */
      .site-header .bar{
        display:flex; align-items:center; justify-content:space-between;
        padding: 14px 0;                    /* padding più alto a pagina appena caricata */
        transition: padding .2s ease;
      }

      .logo{ display:flex; align-items:center; text-decoration:none; }
      .logo-img{ height: 150px; width:auto; display:block; transition: height .2s ease; }

      /* Assicurati che il bottone sia leggibile sull’hero scuro */
      .site-header .btn--ghost { display: none; }
      .bar--right { justify-content: flex-end; }
      .site-header .bar.bar--right { 
        justify-content: flex-end; 
      }

      .site-header .btn--ghost:hover{ border-color: rgba(255,255,255,.75); }

      /* Stato attivo dopo leggero scroll: effetto vetro + shrink */
      .site-header.is-active{
        backdrop-filter: saturate(160%) blur(8px);
        background: rgba(10,18,49,.58);
        box-shadow: 0 6px 20px rgba(0,0,0,.18);
      }
      .site-header.is-active .bar{ padding: 6px 0; }
      .site-header.is-active .logo-img{ height: 40px; }

      @media (prefers-reduced-motion: reduce){
        .site-header, .logo-img{ transition: none;}
      }


    /* =========================
       Hero
       ========================= */
    .hero{position:relative;
      color:#fff; overflow:hidden; margin-top:-80px;}


      .hero{
          position: relative;
          overflow: clip;
          color: #fff;
          
        }
      


      /* vignetta leggera ai bordi (facoltativa, accentua il “teatro”) */
      .hero{ box-shadow: inset 0 0 180px rgba(0,0,0,.22); }



    .hero .container{display:grid; grid-template-columns: 1.2fr 0.8fr; gap:60px; align-items: stretch;}
    .kicker{display:inline-block; padding:.25rem .6rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px}
    .hero h1 strong{color:var(--gold-500)}
    .hero .cta{display:flex; gap:14px; margin-top:0;}

    .badge-col{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
    .badge{width:60px;height:60px; border-radius:12px; background:#fff1; border:1px solid #fff2}

    /* --- HERO LAYOUT --- */
    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 28px;
      align-self: center;
    }

    .hero-title {
      font-size: clamp(32px, 3.6vw, 52px);
      line-height: 1.15;
      font-weight: 800;
      color: #ffffff;
      margin: 0;
    }

    .hero-title-accent {
      color: var(--gold-500);
      display: block;
    }

    .hero-subtitle {
      font-size: clamp(15px, 1.3vw, 20px);
      line-height: 1.65;
      color: rgba(255,255,255,0.82);
      font-weight: 600;
      margin: 0;
      margin-bottom: clamp(52px, 7vw, 110px); /* spazio extra tra titolo e sottotitolo */
    }

    .hero-subtitle em {
      font-style: italic;
      color: rgba(199,165,74,0.88);
      font-weight: 400;
    }

    .hero-meta {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,0.18);
    }

    .hero-meta-item {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .hero-meta-label {
      font-size: 15px;
      color: #ffffff;      
      letter-spacing: 0.05em;
    }

    .hero-meta-value {
      font-size: clamp(17px, 1.6vw, 22px);
      color: var(--gold-500);
      font-weight: 700;
      line-height: 1.2;
    }

    .hero-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      align-self: stretch;
      padding-bottom: 24px; /* allinea il bordo inferiore del badge alla stripe hero-meta */
    }

    .hero-badges img {
      width: clamp(160px, 18vw, 240px);
      height: auto;
    }

    /* =========================
       Buttons
       ========================= */
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:44px; padding:0 58px; border-radius:5px; border:1px solid transparent; cursor:pointer; text-decoration:none; font-weight:600; transition: transform .06s ease, background .2s ease, border-color .2s ease}
    .btn:active{transform: translateY(1px)}
    .btn--primary{background:var(--gold-500); color:#111;}
    .btn--ghost{background:transparent; color:#fff; border-color:#fff3}
    .btn--ghost:hover{border-color:#fff8}

    

      /* Responsive */
      @media (max-width: 980px){
        .hero { margin-top: 0px; }
        .hero .container { grid-template-columns: 1fr; gap: 32px; }
        .hero-left { gap: 22px; }
        .hero-title { margin-top: 28px; } /* evita sovrapposizione con il logo fisso */
        .hero-right { align-items: flex-start; align-self: auto; padding-top: 0; }
        .hero-badges img { width: clamp(140px, 45vw, 200px); }
        .hero-meta { grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .logo-img{ height: 85px;}
      }
    

      /* GRIGLIA: 2 colonne × 2 righe; la card sinistra occupa entrambe le righe */
      .t-grid{
        display:grid;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: auto auto;
        gap:24px;
        align-items:stretch;
      }

      /* SINISTRA: card grande (copre due righe) */
      .t-hero{
        grid-column:1; grid-row: 1 / span 2; /* = altezza uguale alla somma delle due righe a destra */
        margin:0; position:relative; overflow:hidden; padding:28px;
        color:#fff; 
        display:flex; flex-direction:column;
        justify-content:flex-start;   /* <— prima era flex-end */
        align-items:flex-start;      
        min-height: 420px;
        background:
          linear-gradient(140deg, rgba(14,26,69,.66), rgba(14,26,69,.28)), /* overlay blu */
          var(--bg, none);
        background-size:cover; background-position:center;
        box-shadow: 0 18px 40px rgba(0,0,0,.18);
      }
      .t-quote{ font-size:clamp(22px,2.6vw,34px); line-height:1.25; font-weight:800; margin:0 0 18px; }
      .t-author{ font-size:14px; opacity:.95; }
      .t-author span{ opacity:.8; }

      /* DESTRA: riga alta = card larga; riga bassa = 2 card affiancate */
      .t-card--wide{ grid-column:2; grid-row:1; }
      .t-right-bottom{
        grid-column:2; grid-row:2;
        display:grid; grid-template-columns:1fr 1fr; gap:24px;
      }      

      /* RESPONSIVE */
      @media (max-width: 980px){
        .t-grid{ grid-template-columns:1fr; grid-template-rows:auto; }
        .t-hero{ grid-column:auto; grid-row:auto; min-height:360px; }
        .t-card--wide{ grid-column:auto; grid-row:auto; }
        .t-right-bottom{ grid-column:auto; grid-row:auto; grid-template-columns:1fr; }
      }

    /* =========================
       Services cards (alternating)
       ========================= */
        .services{background:#fff}
        .service{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; background:#fff; border:1px solid #eceffd; padding:24px; box-shadow:var(--shadow-m)}
        .service + .service{margin-top:20px}
        .service .illustration{aspect-ratio: 4/3; background:#eef2ff; border-radius:12px}

    /* =========================
       Contact / form
       ========================= */
    /* layout */
        .contact{ background:#fff; }
        .contact__grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:start; }

        .contact__kicker{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .5rem; color:#6b7280; }
        .contact__title{ font-size:clamp(28px,4vw,44px); line-height:1.15; margin:.2rem 0 1rem; color:#0f172a; }
        .contact__lead{ color:#475569; margin:0 0 1.2rem; }

        .contact__list{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.6rem; }
        .contact__item{ display:flex; align-items:center; gap:.6rem; color:#0f172a; }
        .contact__icon{
            width: 22px; min-width:22px; text-align:center;
            font-size: 16px; color: #111;   /* icone nere */
            opacity: 1;                      /* niente trasparenza */
            margin-top: 2px;                 /* allineamento ottico con il testo */
          }

        /* form */
        .contact__form{ display:grid; grid-template-columns:1fr; gap:14px; }
        .field{ display:grid; gap:6px; }
        .field--full{ grid-column:1 / -1; }

        .field__label{ font-size:12px; color:#334155; }
        .field__input{
          width:100%; padding:10px 12px; font-size:16px;
          border:1px solid #cbd5e1; background:#fff; color:#0f172a;
          border-radius:2px; outline: none;
        }
        .field__input:focus{ border-color:#1e3a8a; box-shadow:0 0 0 2px rgba(30,58,138,.15); }
        .field__textarea{ resize:vertical; min-height:140px; }

        /* checkbox */
        .check{ display:flex; align-items:center; gap:.5rem; font-size:13px; color:#334155; }

        /* bottone submit (blu scuro come screenshot) */
        .btn.btn--submit{
          align-self:start;
          background:#0b2a5a; color:#fff; border:1px solid #0b2a5a;
          height:40px; padding:0 18px; border-radius:2px; font-weight:600;
          cursor:pointer; transition: filter .15s ease;
        }
        .btn.btn--submit:hover{ filter: brightness(1.1); }

        /* messaggi */
        .form-msg{ font-size:14px; color:#0f5132; margin:.3rem 0 0; }
        .form-msg--err{ color:#842029; }

        /* responsive */
        @media (max-width: 980px){
          .contact__grid{ grid-template-columns:1fr; }
        }


    /* =========================
       Responsive
       ========================= */
    @media (max-width: 980px){
      .hero .container, .why .grid, .process .cols, .testimonials .grid, .services .service, .contact .grid{grid-template-columns:1fr}
      .badge-col{justify-content:flex-start}
      .merits .container{grid-template-columns:1fr}
      .merits .list{grid-template-columns:1fr}

      /* --- Hero mobile layout --- */
      .hero .container { gap: 20px; }
      .hero-left { gap: 16px; }
      .hero-title { overflow-wrap: break-word; }
      .hero-subtitle { margin-bottom: 0; }
      .hero-right {
        justify-content: flex-start;
        align-items: flex-start;
        align-self: auto;
        padding-bottom: 0;
      }
      .hero-badges img { width: 140px; }
      .hero-meta {
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
        padding-top: 20px;
      }
      .hero-meta .cta { grid-column: 1 / -1; margin-top: 4px; }
      .hero-meta-value { font-size: 16px; }
      .hero-meta-item:nth-child(1) .hero-meta-value:last-child { margin-top: 20px; }
      .hero-meta-item:nth-child(2) .hero-meta-value:last-child { margin-top: 20px; }
    }

    @media (max-width: 375px){
      .hero-meta-item:nth-child(1) .hero-meta-value:last-child {
        margin-top: 0;
      }
    }





/* --- CSS SEZIONE WEBINAR DEFINITIVO --- */

.section-webinar {
  background-image:
    linear-gradient(to right,
      rgba(5, 16, 46, 0.58) 0%,
      rgba(5, 18, 54, 0.42) 45%,
      rgba(5, 18, 54, 0.28) 100%
    ),
    url('https://binnova.it/wp-content/uploads/2026/07/copiar.webp');

  /* Rapporto immagine 1440x1800 preservato con altezza di sezione coerente */
  background-size: cover, cover;
  background-position: center, center center;
  background-repeat: no-repeat, no-repeat;
  background-color: #06091c;

  display: flex;
  align-items: flex-start;
  position: relative;
  min-height: clamp(1180px, 125vw, 1800px);
  padding-top: clamp(38px, 3vw, 50px);
  padding-bottom: clamp(76px, 6vw, 100px);
}

@media (min-width: 1401px) and (min-height: 1801px) {
  .section-webinar {
    background-image:
      linear-gradient(to right,
        rgba(5, 16, 46, 0.58) 0%,
        rgba(5, 18, 54, 0.42) 45%,
        rgba(5, 18, 54, 0.28) 100%
      ),
      url('https://binnova.it/wp-content/uploads/2026/07/copiar.webp');
    background-size: cover, cover;
    background-position: center, center center;
  }
}


/* --- SESSIONI LAYOUT (Desktop) --- */
.webinar-session {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 4.2vw, 72px);
  align-items: start;
  padding-top: 8px;
  padding-bottom: clamp(160px, 18vw, 220px);
  border-top: 2px solid rgba(255, 255, 255, 0.55); /* più spessa e più bianca */
}

.webinar-session-content {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Kicker e label sessione con lo stesso stile */
.webinar-kicker,
.webinar-session-label {
  font-size: clamp(20px, 1.9vw, 30px);
  color: #ffffff;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.webinar-session-quote {
  font-size: clamp(36px, 3.4vw, 30px);
  font-style: italic;
  color: #ffffff;
  line-height: 1.2;
  font-weight: 400;
  margin: 0;
}

.webinar-session-quote strong {
  color: var(--gold-500);
  font-weight: 800;
}

.webinar-list {
  list-style: disc;
  padding-left: 16px;
  padding-top: 30px;
  margin: 0;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.webinar-list li {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.3;
}

.wl-hl {
  color: var(--gold-500);
  font-weight: 700;
}

/* Colonna data (destra) */
.webinar-session-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
  gap: 10px;
  padding-top: 60px;  
}

/* Data: "22 maggio / 2026" — solo il numero del giorno in oro */
.webinar-session-day {
  font-size: clamp(84px, 6.7vw, 65px);
  font-weight: 800;
  color: #ffffff;        /* testo bianco di default */
  line-height: 0.98;
  margin: 0;
  text-align: left;
}

/* Il numero del giorno (primo token di testo) reso oro via span */
.webinar-session-day .day-number {
  color: var(--gold-500);
}

.webinar-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0;
}


/* --- SEZIONE SPEAKER --- */

.section-speaker {
  color: #ffffff;
}

.speaker-header {
  border-top: 2px solid rgba(255, 255, 255, 0.55);
  padding-top: 10px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.speaker-eyebrow {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.speaker-grid {
  display: none; /* rimpiazzato da speaker-top + speaker-bottom */
}

/* --- Griglia superiore: nome | ruolo | foto (sx) — citazione (dx, allineata al ruolo) --- */
.speaker-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 90px);
  /* 3 righe implicite: nome / ruolo / foto */
}

.speaker-name {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--gold-500);
  margin: 0 0 8px;
  line-height: 1.1;
  grid-column: 1;
  grid-row: 1;
}

.speaker-role {
  font-size: clamp(14px, 1.2vw, 17px);
  color: #ffffff;           /* bianco */
  font-style: italic;
  margin: 0 0 20px;
  grid-column: 1;
  grid-row: 2;
}

.speaker-img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  grid-column: 1;
  grid-row: 3;
  align-self: start;
}

/* La citazione parte dalla riga del ruolo (row 2) e si estende fino alla riga della foto (row 3) */
.speaker-quote {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  padding: 0;
  border: none;
  grid-column: 2;
  grid-row: 2 / 4;      /* inizia al ruolo, copre fino alla fine della foto */
  align-self: start;
}

/* --- Strike full-width dopo la foto --- */
.speaker-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  margin: clamp(0px, 0vw, 0px) 0 0;
}

/* --- Griglia inferiore: descrizione + bottone (sx) — stat (dx) --- */
.speaker-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 90px);
  align-items: start;
  padding-top: clamp(24px, 3vw, 40px);
}

.speaker-bio-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.speaker-desc {
  font-size: clamp(14px, 1.2vw, 20px);
  color: #ffffff;
  line-height: 1.65;
  margin: 0;
}

/* .speaker-bio rimane definito ma non usato nell'HTML aggiornato */
.speaker-bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.speaker-stats {
  display: flex;
  flex-direction: column;
}

.speaker-stat {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 50px;
  align-items: center;
  padding: 45px 0;
  border: none; /* prima stat: nessun bordo */
}

.speaker-stat:first-child {
  padding-top: 0;
}

.speaker-stat:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.45); /* solo la seconda stat ha il bordo superiore */
}

.speaker-stat-number {
  /* font-family: var(--font-sitka); */
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 700;
  font-style: italic;
  color: var(--gold-500);
  line-height: 1;
}

.speaker-stat-text {
  font-size: clamp(13px, 1.1vw, 20px);
  color: #ffffff;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 991px) {
  .speaker-top {
    grid-template-columns: 1fr;
  }
  .speaker-quote {
    grid-column: 1;
    grid-row: auto;
    margin-top: 24px;
  }
  .speaker-img {
    max-width: 200px;
  }
  .speaker-bottom {
    grid-template-columns: 1fr;
  }

  .speaker-stats {
    margin-top: 28px;
  }
}

/* --- MOBILE E TABLET (Sotto 991px) --- */
@media (max-width: 991px) {
  .webinar-session {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 0 44px;
  }

  .webinar-session-date {
    align-items: flex-start;
    text-align: left;
    order: -1;
  }

  .webinar-session-quote {
    font-size: clamp(32px, 8.2vw, 42px);
    line-height: 1.16;
  }

  .webinar-list li {
    font-size: clamp(18px, 4.6vw, 22px);
    line-height: 1.25;
    
  }

  .webinar-session-day {
    font-size: clamp(60px, 12vw, 76px);
  }

  .section-webinar {
    min-height: auto;
    background-image: linear-gradient(60deg,
      var(--brand-900) 45%,
      #2a5CA8 70%,
      var(--brand-800) 80%,
      var(--brand-900) 100%
    );
    background-size: cover;
    background-position: center;
    padding-top: 0px !important;
    padding-bottom: 56px !important;
  }
}


/* --- SEZIONE 3 — LA MATRICE DI JOHARI --- */

.section-useful {
  /* sfondo gestito da sections-bg-fx (identico all'hero) */
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

/* Header (kicker + titolo): larghezza metà pagina, allineato a sinistra */
.useful-header {
  max-width: 50%;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.useful-kicker {
  font-size: 14px;
  color: var(--gold-500);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 14px;
}

.useful-title {
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0;
}

.useful-highlight {
  color: var(--gold-500);
}

/* Griglia 2 colonne: immagine | testo */
.useful-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* Placeholder immagine matrice */
.useful-matrix {
  width: 100%;
}

.johari-matrix-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  /* Placeholder visibile finché non viene inserita l'immagine */
  min-height: 420px;
}

/* Colonna testo */
.useful-text-col {
  display: flex;
  align-items: flex-start;
}

.useful-body {
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.65;  
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.useful-body strong {
  font-weight: 800;
  color: #ffffff;
}

.useful-body em {
  color: var(--gold-500);
  font-style: italic;
  font-weight: 400;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
  .useful-header {
    max-width: 100%;
  }
  .useful-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .johari-matrix-img {
    min-height: 280px;
  }
}

/* --- BOTTONE (legacy, mantenuto per compatibilità) --- */
.action-wrapper { margin-top: 40px; }

.btn-primary {
  display: inline-block;
  background-color: var(--gold-500);
  color: var(--brand-900);
  padding: 16px 32px;
  border-radius: var(--radius-l);
  font-weight: 700;
  text-decoration: none;
  font-size: var(--text-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(199, 165, 74, 0.3);
}

/* --- VISUAL: SFERE DI COVEY (CSS PURE) --- */
.visual-side {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 0.85; 
  
}

.covey-circles {
  position: relative;
  width: 450px;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;  
}

/* Stile base per tutti i cerchi */
.circle {
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gradiente e ombra per effetto "sfera/vetro" */
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);  
  border: 1px solid rgb(3, 24, 70);
  box-shadow: inset 0 0 20px rgba(53, 89, 165, 0.2); 
  position: relative;
}

/* Etichette dentro i cerchi */
.label {
  color: var(--gold-500);
  font-weight: 700;
  font-size: 16px;  
  margin-top: 15px; /* Spaziatura dal bordo superiore */
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 1. Cerchio Esterno (Coinvolgimento) */
.circle.outer {
  width: 100%;
  height: 100%;
  justify-content: flex-start; /* Allinea il contenuto in alto */
  background: linear-gradient(145deg, rgba(25, 62, 127, 0.6), rgba(10, 18, 49, 0.692));  
  border: 1px solid rgb(3, 24, 70);
}

/* 2. Cerchio Medio (Influenza) */
.circle.middle {
  width: 70%;
  height: 70%;
  margin-top: 20px; /* Spinge giù rispetto alla label sopra */
  justify-content: flex-start;
  background: linear-gradient(145deg, rgba(53, 89, 165, 0.7), rgba(10, 49, 116, 0.774));
  border: 1px solid rgb(3, 24, 70);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* 3. Cerchio Interno (Controllo) */
.circle.inner {
  width: 60%;
  height: 60%;
  margin-top: 20px;
  justify-content: flex-start; /* Label al centro */
  background: linear-gradient(145deg, rgba(66, 109, 202, 0.493), rgba(16, 72, 168, 0.774));
  border: 1px solid rgb(3, 24, 70);
  box-shadow: 0 0 40px rgba(53, 89, 165, 0.6);
}



/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
  .useful-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  
  .useful-list {
    display: inline-block;
    text-align: left;
  }

  .covey-circles {
    width: 320px;
    height: 320px;
    margin: 0 auto;
  }
}


/* --- SEZIONE COSA IMPARERAI --- */

.section-learn {
  /* Colore campionato dallo screenshot (grigio perla chiaro) */
  background-color: #EBECEB; 
  /* Se preferisci usare la tua variabile beige, usa: var(--beige-100) */
}

.learn-layout {
  display: grid;
  /* La colonna sinistra occupa un po' meno spazio della destra per bilanciare visivamente */
  grid-template-columns: 1.3fr 0.7fr; 
  gap: 80px; /* Ampio spazio tra le colonne */
  align-items: start; /* Allinea in alto */
}

/* --- Colonna Sinistra --- */
.learn-title {
  font-size: var(--h2);
  line-height: 1.2;
  color: var(--gold-500); /* Giallo Oro */
  margin-bottom: 24px;
}

.learn-subtitle {
  font-size: var(--text-md); /* O var(--h5) se lo vuoi più grande */
  color: var(--brand-900);   /* Blu scuro */
  font-weight: 800;          /* Molto grassetto come nell'immagine */
  margin-bottom: 20px;
}

.learn-list {
  list-style-type: disc;
  
  /* AUMENTATO: da 20px a 50px per spostare tutto l'elenco verso destra */
  padding-left: 50px; 
  
  margin: 0;
  color: var(--brand-800);
}

.learn-list li {
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: var(--text-md);
  
  /* Opzionale: Aggiunge spazio tra il pallino e il testo della riga */
  padding-left: 5px; 
}

/* --- Colonna Destra (Testo Grande Serif) --- */
/* --- Colonna Destra (Citazione) --- */
.learn-quote-side {
  display: flex;
    justify-content: center;
    flex-direction: column;
}

.big-quote {  
  /* Dimensione Desktop: Grande e impattante */
  font-size: 48px; 
  line-height: 1.1; /* Interlinea stretta per i titoli grandi */
  font-family: "JUST Sans", sans-serif; 
  color: var(--brand-900);
  margin: 0;
  padding: 0;
  border: none; /* Rimuove bordi standard dei blockquote */
}

.quote-author {
  display: block; /* Va a capo */
  text-align: right; /* Allineato a destra come nello screen */
  
  /* Torna al font Sans-Serif (quello del sito) per la firma */
  font-family: "JUST Sans", sans-serif; 
  font-size: 20px;
  font-weight: 400;
  margin-top: 30px; /* Spazio tra citazione e firma */
  color: var(--brand-800); /* Leggermente più chiaro o uguale al testo */
}


/* --- RESPONSIVE MOBILE (Sotto 991px) --- */
@media (max-width: 991px) {
  .section-learn {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .learn-layout {
    grid-template-columns: 1fr; /* Una colonna */
    gap: 50px;
  }

  /* Gestione Citazione Mobile */
  .big-quote {
    /* Riduco drasticamente la dimensione per renderla leggibile su telefono */
    font-size: 32px; 
    line-height: 1.3;
    text-align: center; /* Su mobile sta meglio centrata */
  }

  .quote-author {
    text-align: center; /* Anche la firma centrata */
    font-size: 18px;
    margin-top: 20px;
  }
}

/* --- SEZIONE "PER CHI È" --- */

/* --- SEZIONE TARGET --- */
.section-target {
  background-color: var(--brand-900);
  background-image: radial-gradient(ellipse at 60% 50%, rgba(53, 89, 165, 0.5) 0%, rgba(10, 18, 49, 0) 60%);
  color: #fff;
  overflow: hidden;
}

.target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; 
  align-items: center;
}

.target-title {
  font-size: var(--h2);
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 24px;
  font-weight: 500  !important;
}

.target-subtitle {
  font-size: var(--text-lg);
  color: #ffffff;
  margin-bottom: 20px;
}

.target-list {
  list-style-type: disc;
  padding-left: 40px; 
  margin: 0;
}

.target-list li {
  margin-bottom: 12px;
  color: #ffffff;
  font-size: var(--text-md);
  padding-left: 5px; 
}

/* --- VIDEO CARD --- */
.target-visual {
  display: flex;
  justify-content: center;
}

.video-card-wrapper {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-card {
  width: 100%;
  aspect-ratio: 1 / 1; /* Quadrato */
  background-color: #000;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Overlay Grafico */
.video-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  transition: opacity 0.3s ease;
}

/* Classe aggiunta via JS per nascondere la copertina */
.video-placeholder.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Container YouTube (Nascosto di default) */
.yt-container video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 'contain' mostra tutto il video con bande nere se serve. Usa 'cover' se vuoi riempire il quadrato. */
  background-color: #000;
  outline: none;
}

.yt-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Elementi UI Video */
.video-label {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #ccc;
  backdrop-filter: blur(4px);
}

.play-button {
  width: 60px;
  height: 60px;
  background-color: #4b6fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s;
  
  /* --- MODIFICA POSIZIONAMENTO --- */
  position: absolute;
  bottom: 25px;  /* Ancorato in basso */
  left: 25px;    /* Ancorato a sinistra */
  transform: none; /* Rimuove la centratura precedente */
  z-index: 20;   /* Assicura che sia sopra a tutto */
}

.play-button:hover {
  transform: scale(1.1); /* Effetto zoom semplice al passaggio del mouse */
}

.video-time {
  position: absolute;
  bottom: 25px;
  right: 25px;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

/* --- DOTS --- */
.carousel-dots {
  display: flex;
  gap: 12px;
  margin-top: 25px;
  min-height: 20px; /* Assicura che il contenitore abbia altezza anche se vuoto */
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s;
  display: block; /* Assicura che siano visibili */
}

.dot.active {
  background-color: #fff;
}

/* Mobile */
@media (max-width: 991px) {
  .target-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* --- SEZIONE "IL DATO" --- */

.stat-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.stat-text-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.stat-kicker {
  font-size: 14px;
  color: var(--gold-500);
  font-style: italic;
  font-weight: 400;
  margin: 0;
}

.stat-text {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.45;
  color: #ffffff;
  font-weight: 700;
  margin: 0;
}

.stat-highlight {
  color: var(--gold-500);
}

.stat-number-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.stat-number {
  font-family: var(--font-sitka);
  font-size: clamp(80px, 11vw, 152px);
  line-height: 1;
  font-weight: 700;
  font-style: italic; /* Sitka esprime meglio la sua eleganza in corsivo */
  color: var(--gold-500);
  margin: 0;
  letter-spacing: -0.01em;
}

.stat-times {
  color: var(--gold-500);
  font-weight: 300; /* "×" più leggero per il contrasto visivo del mockup */
}

.stat-source {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.50);
  margin: 0;
  font-weight: 400;
}

@media (max-width: 991px) {
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .stat-number {
    font-size: clamp(72px, 18vw, 110px);
  }
}


/* --- SEZIONE "DA DOVE NASCE" --- */

.section-origin {
  /* Grigio molto chiaro / Beige (puoi usare var(--muted) o var(--beige-100) se preferisci) */
  background-color: #F0F2F5; 
  color: var(--brand-900);
}

/* 1. GRIGLIA PRINCIPALE: Modifica allineamento verticale */
.origin-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  
  /* CAMBIATO DA 'center' A 'start': */
  align-items: start; /* <--- Questo porta il testo in alto */
}

/* 2. PUNTO CHIAVE: Aggiunta indentazione */
.origin-key-point {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  
  /* AGGIUNTO: Sposta tutto il blocco verso destra */
  margin-left: 40px;  /* <--- Puoi aumentare o diminuire questo valore */
  
  /* Opzionale: aggiunge un po' di spazio sopra per staccarlo dal testo */
  margin-top: 10px;   
}
/* --- CAROSELLO IMMAGINI (Sinistra) --- */
.origin-visual {
  display: flex;
  justify-content: center;
}

/* --- MODIFICA CAROSELLO QUADRATO --- */

.image-carousel-wrapper {
  position: relative;
  width: 100%;
  
  /* Aumento leggermente la larghezza massima per compensare l'altezza persa */
  max-width: 450px; 
  
  /* QUESTA È LA MODIFICA CHIAVE: 1 su 1 crea un quadrato perfetto */
  aspect-ratio: 1 / 1; 
  
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: -20px 20px 0px var(--brand-900);
}

/* Nota: assicurati che .origin-slide-img abbia object-fit: cover 
   (era già presente nel codice precedente, ma verifica) */
.origin-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fondamentale: ritaglia l'immagine senza deformarla */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.origin-slides {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Stile della singola immagine */
.origin-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ritaglia l'immagine per riempire il box */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.origin-slide-img.active {
  opacity: 1;
}

/* Punti di navigazione */
.origin-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
  background: rgba(0,0,0,0.3); /* Leggero sfondo per contrasto */
  padding: 8px 12px;
  border-radius: 20px;
  backdrop-filter: blur(2px);
}

.origin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s;
}

.origin-dot.active {
  background-color: #fff;
}

/* --- CONTENUTO TESTUALE (Destra) --- */
.origin-title {
  font-size: var(--h2);
  line-height: 1.1;
  color: var(--gold-500);
  margin-bottom: 30px;
}

.origin-text-block p {
  font-size: var(--text-lg); /* Testo grande e leggibile */
  line-height: 1.6;
  color: var(--brand-900);
  margin-bottom: 30px;
}

.highlight-text {
  font-weight: 800; /* Molto grassetto per "Fiera YOUNG" */
  color: var(--brand-800);
}

/* Punto chiave finale */
.origin-key-point {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.bullet-point {
  color: var(--brand-700);
  font-size: 40px; /* Pallino grande */
  line-height: 0.8; /* Aggiustamento verticale */
}

.origin-key-point p {
  font-size: var(--text-lg);
  font-weight: 700; /* Grassetto */
  color: var(--brand-900);
  line-height: 1.4;
  margin: 0;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
  .origin-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .origin-visual {
    order: -1; /* Mette le immagini sopra su mobile */
    margin-bottom: 20px;
  }
  
  .image-carousel-wrapper {
    max-width: 300px; /* Un po' più piccolo su mobile */
    box-shadow: -10px 10px 0px var(--brand-900);
  }

  .origin-content {
    text-align: left; /* Mantiene allineamento a sinistra */
  }
}

/* --- FOOTER --- */
.site-footer {
  background-color: #EBECEB; /* O usa var(--muted) se preferisci */
  color: var(--ink-900);
  padding: 40px 0 60px 0;
  font-size: 13px; /* Testo piccolo per il footer */
}

/* Barra Navigazione Superiore (People, Strategy, Technology) */
.footer-top-nav {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  margin-bottom: 40px;
  border-top: 1px solid #ccc;    /* Linea sopra */
  border-bottom: 1px solid #ccc; /* Linea sotto */
}

.nav-link {
  font-size: var(--h5); /* Dimensione titolo, es. 20px */
  font-weight: 700;
  color: var(--ink-900);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--brand-600);
}

/* Layout a 3 colonne */
.footer-main {
  display: grid;
  /* Colonna SX: auto (si adatta al contenuto)
     Colonna Centro: 1fr (prende lo spazio disponibile)
     Colonna DX: auto (si adatta al contenuto)
  */
  grid-template-columns: 1fr 2fr 1fr;
  gap: 40px;
  align-items: start; /* Allinea in alto */
}

/* --- Stili Colonna Sinistra --- */
.footer-logo {
  width: 60px; /* Adatta la dimensione del logo */
  height: auto;
  margin-bottom: 15px;
}

.company-name {
  font-weight: 700;
  margin-bottom: 20px;
  font-size: 14px;
}

.copyright {
  color: var(--ink-600);
  font-size: 12px;
}

/* --- Stili Colonna Centrale (Dati) --- */
.center-col {
  text-align: center; /* Testo centrato come nell'immagine */
  color: var(--ink-900);
  line-height: 1.8;
}

.center-col p {
  margin: 0 0 4px 0; /* Poco spazio tra le righe */
  font-size: 13px;
  color: var(--ink-900);
}

.center-col a {
  text-decoration: none;
  color: inherit;
}

.sep {
  margin: 0 5px;
  color: #ccc; /* Colore del separatore verticale | */
}

/* --- Stili Colonna Destra --- */
.right-col {
  text-align: right; /* Allineato a destra */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Spinge verso il basso se c'è altezza extra */
  height: 100%;
}

.legal-links {
  margin-bottom: auto; /* Questo trucco spinge i crediti in basso se c'è spazio, oppure usa margin fisso */
  padding-top: 10px; /* Allinea visivamente con le righe centrali */
}

.legal-links a {
  color: var(--ink-600);
  text-decoration: none;
  font-size: 13px;
}

.credits {
  font-size: 12px;
  color: var(--ink-600);
  margin-top: 30px; /* Spazio prima dei crediti */
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
  .footer-top-nav {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }

  .footer-main {
    grid-template-columns: 1fr; /* Una sola colonna */
    text-align: center;
    gap: 40px;
  }
  
  .left-col, .right-col, .center-col {
    text-align: center; /* Forza tutto centrato su mobile */
    align-items: center;
  }
  
  .footer-logo {
    margin: 0 auto 15px auto; /* Centra il logo */
  }
  
  .legal-links {
    margin-bottom: 20px;
  }
}




/* --- SFONDOCON EFFETTO LUCE SGRANATA --- */

.sections-bg-fx {
  position: relative;
  /* Colore di base di sicurezza */
  background-color: var(--brand-900);
  overflow: hidden; /* Assicura che l'effetto non sbordi */
}

/* LAYER 1 — gradiente luce diagonale */
.sections-bg-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: linear-gradient(60deg,
    var(--brand-900) 45%,
    #2a5CA8 70%,
    var(--brand-800) 80%,
    var(--brand-900) 100%
  );
  background-size: cover;
}

/* LAYER 2 — grana separata: mix-blend-mode:screen su scuro
   formula screen: result = back + grain*(1-back)
   → su nero puro mostra direttamente la grana come speckle luminosi
   → non schiarisce uniformemente, preserva il fondo scuro */
.sections-bg-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='2'/%3E%3C/svg%3E");
  background-size: 200px 200px;

  mix-blend-mode: screen;
  opacity: 0.1; /* ← manopola principale: 0.10 quasi invisibile · 0.25 molto visibile */
}

/* Assicuriamoci che il contenuto vero della sezione stia sopra lo sfondo */
.sections-bg-fx > .container {
  position: relative;
  z-index: 2;
}




/* --- ADATTAMENTO MISURE DESIGNER (1440px Base) --- */

/* Regola Globale per centrare verticalmente il contenuto nelle sezioni fissate */
.section-learn, 
.section-useful, 
.section-target, 
.section-origin,
.hero-bg-fx {
  display: flex;
  align-items: center; /* Centra verticalmente il contenuto nel box da 600/900px */
  padding-top: 65px;      /* Rimuoviamo padding extra perché l'altezza la dà il min-height */
  padding-bottom: 65px;
}


/* HERO SECTION — full viewport height
   +80px compensa il margin-top:-80px che fa scivolare l'hero sotto l'header fisso */
.hero {
  min-height: calc(100vh + 80px);
  min-height: calc(100dvh + 80px);
  display: flex;
  align-items: center;
  padding-top: clamp(90px, 10vh, 130px) !important;
  padding-bottom: clamp(40px, 6vh, 80px) !important;
}

/* SEZIONE 2 — Di cosa parleremo / Cosa imparerai (1440x900) */
.section-learn {
  /* Questa è molto alta nel design (900px) */
  min-height: 600px; 
}

/* SEZIONE 3 — Perché partecipare / 3 Sfere (1440x600) */
.section-useful {
  min-height: 600px;
}

/* SEZIONE 4 — A chi si rivolge / Video (1440x600) */
.section-target {
  min-height: 600px;
}

/* SEZIONE 5 (Extra) — Da dove nasce / Immagini (1440x600) */
/* Assumo che anche questa segua lo standard 600px */
.section-origin {
  min-height: 600px;
}

@media (max-width: 991px) {
  
  .section-learn,
  .section-useful,
  .section-target,
  .section-origin {
    min-height: auto !important; /* Resetta l'altezza fissa */
    height: auto !important;
    padding-top: 60px;
    padding-bottom: 60px;
  }

}

@media (max-width: 991px) {
  .section-webinar { height: auto !important; }
}

/* --- ELENCO PUNTATO CON SFERE DI VETRO --- */

/* Rimuove il puntino standard e aggiunge spazio per la sfera custom */
.glass-list {
  list-style-type: none;
  padding-left: 0;
  margin: 30px 0;
}

.glass-list li {
  position: relative;
  padding-left: 50px; /* Spazio per la sfera sulla sinistra */
  margin-bottom: 15px;
  line-height: 1.5;
  color: #ffffff;
  font-size: var(--text-lg); /* O la dimensione che preferisci */
  font-weight: 700;          /* Grassetto come nello screenshot */
}

/* Creazione della Sfera di Vetro con ::before */
.glass-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* Centra verticalmente rispetto al testo */
  
  width: 32px;  /* Dimensione della sfera */
  height: 32px;
  border-radius: 50%; /* La rende rotonda */

  /* --- EFFETTO VETRO E VOLUME --- */
  /* 1. Sfondo base scuro con gradiente diagonale */
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  
  /* 2. Bordo sottile semitrasparente per definizione */
  border: 1px solid rgba(255, 255, 255, 0.15);
  
  /* 3. Ombre per dare profondità e il riflesso interno tipico del vetro */
  box-shadow: 
    /* Ombra interna chiara in alto a sx (riflesso di luce) */
    inset 2px 2px 6px rgba(255, 255, 255, 0.2),
    
    /* Ombra interna scura in basso a dx (profondità) */
    inset -2px -2px 6px rgba(0, 0, 0, 0.4),
    
    /* Leggera ombra esterna */
    2px 2px 8px rgba(0, 0, 0, 0.3);
}



/* --- SEZIONE CONTATTI (1440x900) --- */

.section-contact {
  /* Rimuoviamo il padding standard perché è un layout full-split */
  padding: 0; 
  width: 100%;
}

.contact-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% sinistra, 50% destra */
  min-height: 600px; /* Altezza richiesta dal designer */
}

/* --- LATO SINISTRO (Form) --- */
.contact-form-side {
  background-color: var(--brand-900);
  display: flex;
  justify-content: center;
  align-items: center; /* Centra la form verticalmente */
  padding: 60px;
}

.form-container {
  width: 100%;  
}

.contact-title {
  font-size: var(--h2);
  color: var(--gold-500);
  margin-bottom: 40px;  
  font-weight: 800;
}

/* Placeholder per HubSpot (opzionale, per styling base) */
.hubspot-embed-placeholder {
  color: #fff;
  max-height: 900px;
}

/* --- LATO DESTRO (Immagine + Testo) --- */
.contact-image-side {
  position: relative;
  /* Inserisci qui la tua immagine di sfondo */
  background-image: url('https://binnova.it/wp-content/uploads/2025/11/Imamgine-Form-LP-e1764345249972.webp'); 
  background-size: cover;
  background-position: center;
  
  /* Flexbox per posizionare il testo */
  display: flex;
  justify-content: flex-end; /* Allinea orizzontalmente a destra */
  align-items: center;       /* Allinea verticalmente al centro */
  padding: 60px;
  
  /* Aggiungiamo un overlay sfumato blu per migliorare la leggibilità del testo
     (simile all'effetto nello screenshot) */
  
}

/* Overlay sfumato opzionale se l'immagine è troppo chiara */
.contact-image-side::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
}

.contact-overlay-text {
  position: relative;
  z-index: 2; /* Sta sopra l'overlay */
  text-align: right; /* Testo allineato a destra come in foto */
  color: #ffffff;
}

.contact-intro {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.4;
  margin-bottom: 20px;
  font-weight: 400;
  color: #ffffff;
}

.contact-main-quote {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.3;
  font-weight: 400;
  color: #ffffff;
}

.contact-main-quote .gold {
  color: var(--gold-500);
  font-weight: 800; /* Parte dorata in grassetto */
}


/* --- RESPONSIVE MOBILE (Sotto 991px) --- */
@media (max-width: 991px) {
  .contact-split-layout {
    grid-template-columns: 1fr; /* Colonne una sopra l'altra */
    min-height: auto; /* Sgancia l'altezza fissa */
  }

  /* Ordine: Prima l'immagine (intro), poi la form? 
     O standard: Prima form, poi immagine. 
     Qui lascio standard (form sopra). Se vuoi invertire usa order: -1 */
  
  .contact-form-side {
     padding: 160px 20px; 
  }

  .contact-title { 
  margin-top: -120px;  
  
}

  .contact-image-side {
    min-height: 500px; /* Altezza minima per l'immagine su mobile */
    justify-content: center; /* Centra il testo su mobile */
    text-align: center;
  }

  .contact-overlay-text {
    text-align: center; /* Testo centrato su mobile */
  }

  .glass-list li {
    /* 1. Il box dell'elemento diventa largo solo quanto il testo contenuto */
    width: fit-content; 
    
    /* 2. Centriamo il blocco (che ora è più stretto) nella pagina */
    /* margin-left: auto; */
    margin-right: auto;
    
    /* 3. Manteniamo il margine sotto (lo stesso del desktop) */
    margin-bottom: 15px; 
    
    /* 4. Assicuriamo che il testo dentro al blocco sia allineato a sinistra 
       rispetto alla sfera (utile se il testo va su due righe) */
    text-align: left; 
  }

  /* Opzionale: se vuoi che l'intera lista sia centrata visivamente */
  .glass-list {
    text-align: center; 
  }

}


/* --- SEZIONE FINALE (Il dato + Form iscrizione) --- */

.section-finale {
  background-image:
    linear-gradient(
      to right,
      rgba(5, 10, 30, 0.93) 0%,
      rgba(10, 18, 49, 0.82) 42%,
      rgba(10, 18, 49, 0.58) 65%,
      rgba(5, 10, 30, 0.45) 100%
    ),
    url('https://binnova.it/wp-content/uploads/2026/04/studio-microphone-on-dark-background-scaled.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: #ffffff;
  /* sovrascrive il padding generico di .section */
  padding-top: clamp(64px, 7vw, 100px) !important;
  padding-bottom: clamp(64px, 7vw, 100px) !important;
}

/* Container della section finale con bordo superiore e sottotitolo */
.section-finale .finale-block {
  border-top: 2px solid rgba(255, 255, 255, 0.72);
  padding-top: 10px;
}

.section-finale .finale-block + .finale-block {
  margin-top: clamp(44px, 5vw, 64px);
}

.section-finale .webinar-session-label {
  margin-bottom: clamp(28px, 3vw, 40px);
}

.section-finale .target-grid {
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.section-finale .target-list {
  margin-top: 0;
  padding-left: 30px;
}

.section-finale .target-list li .wl-hl {
  color: var(--gold-500);
  font-weight: 700;
}

.section-finale .video-card-wrapper {
  max-width: 430px;
  margin-left: auto;
}

.section-finale .video-card {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
}

.section-finale .video-label {
  font-size: 11px;
  color: #9ea7c3;
}

/* Griglia form + testo */
.finale-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "copy ."
    "form cta";
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.finale-copy {
  grid-area: copy;
  font-size: clamp(20px, 5vw, 20px);
  color: #ffffff;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.finale-grid .hs-form-frame {
  grid-area: form;
}

.finale-copy-accent {
  color: var(--gold-500);
  font-weight: 800;
}

/* Colonna destra */
.finale-cta-col {
  grid-area: cta;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding-top: 0;
}

.finale-headline {
  font-family: var(--font-sitka);
  font-size: clamp(48px, 5.4vw, 65px);
  line-height: 1.05;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  margin-top: 50px;
  max-width: 540px;
}

.finale-highlight {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: var(--gold-500);
}

/* Mobile */
@media (max-width: 991px) {
  .section-finale .target-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section-finale .target-visual {
    order: 2;
    justify-content: flex-start;
  }

  .section-finale .webinar-session-label {
    margin-bottom: 24px;
  }

  .section-finale .video-card-wrapper {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .finale-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cta"
      "copy"
      "form";
    gap: 14px;
  }
  .finale-cta-col {
    padding-top: 0;
  }

  .finale-grid .hs-form-frame {
    margin-top: 18px;
  }

  .finale-copy {
    font-size: clamp(20px, 5vw, 20px);
  }

  .finale-headline {
    font-size: clamp(44px, 12vw, 66px);
    max-width: 100%;
  }
}


/* --- THANK YOU PAGE (FULL SCREEN) --- */

.thank-you-hero {
  /* LA REGOLA CHIAVE: Altezza minima 100% dello schermo */
  min-height: 100vh; 
  align-items: start;;
  /* Flexbox per centrare tutto perfettamente nel mezzo */
  display: flex;
  margin: 0;
  padding: 20px; /* Margine di sicurezza per schermi piccoli */
  padding-top: 180px
}

.thank-you-content {
  max-width: 600px;
  animation: fadeIn 0.8s ease-out; /* Piccola animazione di entrata */
}

/* Icona Check */
.ty-icon {
  color: var(--gold-500);
  margin-bottom: 24px;
}
.ty-icon svg {
  width: 80px;
  height: 80px;
}

/* Titolo */
.ty-title {
  font-size: clamp(32px, 5vw, 48px); /* Responsive */
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Messaggio */
.ty-message {
  font-size: var(--text-lg);
  color: var(--brand-300); /* Un blu chiaro/grigio per il testo secondario */
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Bottone (riutilizza il tuo stile btn-primary o definiscilo qui) */
.ty-btn {
  display: inline-block;
  background-color: var(--gold-500);
  color: var(--brand-900);
  padding: 10px 32px;
  border-radius: var(--radius-l);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s;
}

.ty-btn:hover {
  transform: scale(1.05);
  background-color: #dcb653; /* Leggermente più chiaro */
}

/* Animazione semplice */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
  
}
@media (max-width: 991px) {
  .thank-you-hero {
  
  padding-top: 50px
}
}