/* ================================
   NAVBAR DESKTOP — ELIMINAZIONE TOTALE
   sotto i 900px su TUTTI i browser
=================================== */
@media (max-width: 900px) {

    /* Disattiva container desktop */
    .nav-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 20px !important;
    }

    /* Tutta la main-nav sparisce */
    .main-nav,
    .nav-container .main-nav,
    .main-nav *,
    .nav-container .main-nav * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        max-height: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
    }

    /* Blocca la ricostruzione automatica della grid */
    header nav,
    header nav ul,
    header nav li,
    header nav a {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* ============================================================
   KILL SWITCH NAVBAR DESKTOP sotto i 900px
============================================================ */
@media (max-width: 900px) {
    nav.main-nav,
    nav.main-nav * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 18px !important;
    }
}


/* ============================================================
   FIX UNIVERSALE BROWSER MOBILE
============================================================ */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    touch-action: manipulation !important;
}

body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}


/* particles.js FIX */
#particles-js,
.particles-js-canvas-el {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 0 !important;
}


/* ============================================================
   MOBILE LAYOUT – < 900px
============================================================ */
@media (max-width: 900px) {

    /* NAVBAR */
    .nav-right {
        display: flex !important;
        align-items: center !important;
        z-index: 20 !important;
    }

    .lang-btn {
        display: inline-flex !important;
        padding: 6px 12px !important;
        font-size: 15px !important;
        z-index: 20 !important;
    }
}

/* ========== HERO CURVE FIX MOBILE < 900px ========== */
@media (max-width: 900px) {

  /* Riduci spazio tra hero e why */
  .page-content {
    padding-top: 0 !important;
  }

  #why-neuronet {
    padding-top: 20px !important;
  }

  /* Rimuovi fade / overlay */
  .hero::after {
    display: none !important;
    background: none !important;
    height: 0 !important;
    opacity: 0 !important;
  }
}

/* =========================================
   HERO MOBILE — FISSA + OVERLAP IMMAGINE
   (< 900px)
========================================= */
@media (max-width: 900px) {

  /* Hero fissa */
  .hero {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh !important;
    overflow: hidden !important;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;

    background: #0C1B38;
  }

  /* Immagine leggermente più piccola */
  .hero-image {
    position: absolute !important;
    top: 9vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 58vw !important;      /* più piccola */
    max-width: 260px !important; /* limite sui telefoni grandi */
    height: auto !important;
    z-index: 2 !important;
  }

  /* Testo che entra un po' sopra l'immagine */
  .hero-content {
    position: absolute !important;

    top: 44vh !important;                 /* qui comincia l’overlap */
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 90% !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  .hero-content h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  .hero-subtext,
  .hero-content p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .buttons {
    margin-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .buttons .btn {
    padding: 9px 14px !important;
    font-size: 14px !important;
  }

  .hero .buttons {
    display: none !important;
  }
  
  /* Fade che parte solo in basso */
  .hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px !important;  /* ERA 220px → TROPPO ALTA */
    background: linear-gradient(
      to bottom,
      rgba(12,27,56,0),
      #ffffff
    );
    z-index: 4;
    pointer-events: none;
  }


  /* Tutto il resto scorre dietro la hero */
  main.page-content {
    position: relative;
    z-index: 10 !important;
    margin-top: 100vh !important;
  }
}

/* HERO MOBILE — FISSA + OVERLAP IMMAGINE (< 900px) */
@media (max-width: 900px) {

  .hero {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    background: #0C1B38;
  }

  .hero-image {
    position: absolute !important;
    top: 9vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 58vw !important;
    max-width: 260px !important;
    height: auto !important;
    z-index: 2 !important;
  }

  .hero-content {
    position: absolute !important;
    top: 44vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  .hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px !important;
    background: linear-gradient(
      to bottom,
      rgba(12,27,56,0),
      #ffffff
    );
    z-index: 4;
    pointer-events: none;
  }

  main.page-content {
    position: relative;
    z-index: 10 !important;
    margin-top: 100vh !important;
  }
}

@media (max-width: 900px) {
  .hero-subtext .closing-line,
  .closing-line {
    font-size: 0.9em !important;   /* leggermente più piccola */
    line-height: 1.35 !important;
    display: block;
    margin-top: 4px;
  }
}

/* ================================
   MOBILE – curva subito sotto la hero
   (solo < 900px)
=================================== */
@media (max-width: 900px) {

  /* Avvicina la curva all'hero, togliendo il bianco */
  .section-curve-bottom {
    margin-top: -80px !important;   /* prova -200 se vuoi ancora meno bianco */
    position: relative !important;
    z-index: 10 !important;
  }

  .section-curve-bottom svg {
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   WHY NEURONET EXISTS — CARD STYLE MATCH WITH ARCHITECTURE
   (< 900px)
============================================================ */
@media (max-width: 900px) {

    /* Padding generale della sezione, come architecture */
    #why-neuronet {
        width: 100% !important;
        padding: 40px 20px !important;
        box-sizing: border-box !important;
    }

    /* Contenitore interno simile alla architecture section */
    #why-neuronet .nn-grid {
        width: 100% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
    }

    /* Distanza tra titolo e griglia */
    #why-neuronet .section-subtitle {
        margin-bottom: 32px !important;
        padding: 0 !important;
    }
}

@media (max-width: 900px) {

    .nn-grid .nn-block {
        background: #ffffff !important;
        border-radius: 20px !important;
        padding: 26px 24px !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .nn-grid .nn-block h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        color: #0C1B38 !important;
    }

    .nn-grid .nn-block p {
        font-size: 16px !important;
        line-height: 1.55 !important;
        color: #4a4a4a !important;
        word-break: break-word !important;
    }
}


/* ============================================================
   HOW NEURONET WORKS — FIX MOBILE < 900px
   UNA SOLA COLONNA, TESTO SEMPRE DENTRO I BOX
============================================================ */
@media (max-width: 900px) {

    /* Grid a 1 colonna */
    .architecture-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;     /* distanza tra le card */
        width: 100% !important;
    }

    /* Ogni card diventa full width */
    .architecture-grid .arch-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 22px 20px !important;
    }

    /* Titoli più leggibili */
    .arch-card h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    /* Testi ottimizzati per evitare overflow */
    .arch-card p {
        font-size: 15px !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Icone centrate e leggermente ridotte */
    .arch-card .arch-icon svg {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ============================================================
   EEG DATA SERVICES — STILE CARD COME ARCHITECTURE (<900px)
============================================================ */
@media (max-width: 900px) {

    /* Wrapper della sezione */
    #services {
        padding: 40px 20px !important;
        box-sizing: border-box !important;
    }

    /* Header della sezione */
    #services .section-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #services .section-subtitle,
    #services .section-kicker {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin-bottom: 25px !important;
    }

    /* GRID → una colonna */
    .building-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
        width: 100% !important;
    }

    /* CARD PRINCIPALE */
    .build-card {
        background: #ffffff !important;
        border-radius: 20px !important;
        padding: 26px 24px !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* HEADER card */
    .build-card-header h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .build-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    .build-card-subtitle {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin-bottom: 18px !important;
    }

    /* Blocchi interni */
    .build-block h4 {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }

    .build-block ul li {
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin-bottom: 6px !important;
    }

    /* Stato / Status */
    .build-status p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /* CTA finale */
    .build-cta-line {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /* Sezione “Intended use & roadmap note” */
    .building-roadmap {
        margin-top: 40px !important;
        padding: 20px !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.05) !important;
    }

    .building-roadmap h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .building-roadmap p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /* OUTPUT CARDS */
    .outputs-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
    }

    .output-card {
        background: #ffffff !important;
        border-radius: 20px !important;
        padding: 20px !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.05) !important;
    }

    .output-card img {
        width: 100% !important;
        border-radius: 14px !important;
    }

    .output-card h4 {
        font-size: 18px !important;
        margin-top: 12px !important;
        margin-bottom: 6px !important;
    }

    .output-card p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
}

/* ============================================================
   ROADMAP — MOBILE (<900px)
   Una tappa per riga, card larghe come le altre sezioni
============================================================ */
@media (max-width: 900px) {

  /* Sezione Roadmap */
  .roadmap-section {
    padding: 40px 18px !important;
    box-sizing: border-box !important;
  }

  .roadmap-section .section-title {
    font-size: 32px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .roadmap-section .section-subtitle {
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin-bottom: 30px !important;
    opacity: 0.9 !important;
  }

  /* Contenitore timeline */
  .roadmap-bar {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Linea verticale a sinistra */
  .roadmap-bar-line {
    position: absolute !important;
    top: 0 !important;
    left: 14px !important;      /* vicino al bordo */
    width: 3px !important;
    height: 100% !important;
    background: linear-gradient(to bottom,#6ba7ff,#1d4ed8) !important;
    border-radius: 4px !important;
    z-index: 1 !important;
  }

  /* Tutte le tappe in colonna */
  .roadmap-milestones {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Wrapper di ogni tappa:
     togliamo il max-width: 190px del desktop */
  .roadmap-milestone {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* Punto sulla linea */
  .roadmap-milestone .roadmap-dot {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #6ba7ff !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.18);
    position: relative !important;
    left: 5px !important;   /* centrato sulla linea */
    margin-bottom: 14px !important;
    z-index: 3 !important;
  }

  /* Card bianca: quasi full-width */
  .roadmap-card {
    background: #ffffff !important;
    border-radius: 22px !important;
    padding: 26px 24px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.08) !important;

    margin-left: 34px !important;             /* spazio per linea+dot */
    width: calc(100% - 34px) !important;      /* prende tutto il resto */
    max-width: none !important;

    box-sizing: border-box !important;
  }

  /* Header (data + badge) */
  .roadmap-card-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .roadmap-time {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0C1B38 !important;
  }

  .roadmap-status {
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: #e8eefc !important;
    color: #1d2a4d !important;
    border: 1px solid #d0d8f5 !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .roadmap-status-now {
    background: #d4e9ff !important;
    color: #0b3a7e !important;
    border-color: #b5d7ff !important;
  }

  .roadmap-status-next {
    background: #eaf8ff !important;
    color: #0c2f4d !important;
    border-color: #c8edff !important;
  }

  /* Titolo e testo */
  .roadmap-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    color: #0C1B38 !important;
  }

  .roadmap-note {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #3B4763 !important;
    word-break: break-word !important;
  }

  /* Nota finale */
  .roadmap-footnote {
    margin-top: 40px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    opacity: 0.85 !important;
  }
}


/* ============================================================
   FIELDS OF APPLICATION — MOBILE (<900px)
   Stile coerente con Services, Architecture, Roadmap
============================================================ */
@media (max-width: 900px) {

    /* Sezione principale */
    #applications {
        padding: 40px 20px !important;
        background: #F7F9FD !important;
        box-sizing: border-box !important;
    }

    #applications .section-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #applications .section-subtitle {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 28px !important;
        color: #0C1B38 !important;
        opacity: 0.88 !important;
        max-width: 100% !important;
    }

    /* GRID → UNA COLONNA */
    .applications-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* CARD */
    .application-card {
        background: #ffffff !important;
        border-radius: 22px !important;
        padding: 26px 24px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Icona centrata e più piccola */
    .application-card .app-icon {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #F1F5FF !important;
        border-radius: 14px !important;
    }

    .application-card .app-icon img,
    .application-card .app-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Titolo */
    .application-card h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        color: #0C1B38 !important;
        margin-bottom: 10px !important;
    }

    /* Testo */
    .application-card p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #3B4763 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* LISTE */
    .application-card ul {
        margin-top: 10px !important;
        padding-left: 18px !important;
    }

    .application-card ul li {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #3B4763 !important;
        margin-bottom: 6px !important;
    }

    /* Evita overflow laterale */
    #applications * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ============================================================
   FIELDS OF APPLICATION — MOBILE (<900px)
   Stile coerente con Services, Architecture, Roadmap
============================================================ */
@media (max-width: 900px) {

    /* Sezione principale */
    #applications {
        padding: 40px 20px !important;
        background: #F7F9FD !important;
        box-sizing: border-box !important;
    }

    #applications .section-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #applications .section-subtitle {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 28px !important;
        color: #0C1B38 !important;
        opacity: 0.88 !important;
        max-width: 100% !important;
    }

    /* GRID → UNA COLONNA */
    .applications-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* CARD */
    .application-card {
        background: #ffffff !important;
        border-radius: 22px !important;
        padding: 26px 24px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Icona centrata e più piccola */
    .application-card .app-icon {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #F1F5FF !important;
        border-radius: 14px !important;
    }

    .application-card .app-icon img,
    .application-card .app-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Titolo */
    .application-card h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        color: #0C1B38 !important;
        margin-bottom: 10px !important;
    }

    /* Testo */
    .application-card p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #3B4763 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* LISTE */
    .application-card ul {
        margin-top: 10px !important;
        padding-left: 18px !important;
    }

    .application-card ul li {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #3B4763 !important;
        margin-bottom: 6px !important;
    }

    /* Evita overflow laterale */
    #applications * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ============================================================
   FIELDS OF APPLICATION — MOBILE (<900px)
   Stile coerente con Services, Architecture, Roadmap
============================================================ */
@media (max-width: 900px) {

    /* Sezione principale */
    #applications {
        padding: 40px 20px !important;
        background: #F7F9FD !important;
        box-sizing: border-box !important;
    }

    #applications .section-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #applications .section-subtitle {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 28px !important;
        color: #0C1B38 !important;
        opacity: 0.88 !important;
        max-width: 100% !important;
    }

    /* GRID → UNA COLONNA */
    .applications-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* CARD */
    .application-card {
        background: #ffffff !important;
        border-radius: 22px !important;
        padding: 26px 24px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Icona centrata e più piccola */
    .application-card .app-icon {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #F1F5FF !important;
        border-radius: 14px !important;
    }

    .application-card .app-icon img,
    .application-card .app-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Titolo */
    .application-card h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        color: #0C1B38 !important;
        margin-bottom: 10px !important;
    }

    /* Testo */
    .application-card p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #3B4763 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* LISTE */
    .application-card ul {
        margin-top: 10px !important;
        padding-left: 18px !important;
    }

    .application-card ul li {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #3B4763 !important;
        margin-bottom: 6px !important;
    }

    /* Evita overflow laterale */
    #applications * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ============================================================
   TEAM — MOBILE (<900px)
   Stile coerente con Architecture, Services, Applications, Roadmap
============================================================ */
@media (max-width: 900px) {

    /* Sezione principale */
    #team,
    #who {
        padding: 40px 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Titolo */
    #team .section-title,
    #who .section-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    /* Sottotitolo */
    #team .section-subtitle,
    #who .section-subtitle {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 28px !important;
        opacity: 0.90 !important;
        color: #0C1B38 !important;
        max-width: 100% !important;
    }

    /* GRID → UNA COLONNA */
    .team-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* CARD DI OGNI MEMBRO */
    .team-member {
        background: #ffffff !important;
        border-radius: 22px !important;
        padding: 28px 24px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Foto profilo */
    .team-member .avatar,
    .team-member img {
        width: 110px !important;
        height: 110px !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        margin: 0 auto 16px auto !important;
        display: block !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    }

    /* Nome */
    .team-member h3 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #0C1B38 !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    /* Ruolo */
    .team-member .role {
        font-size: 15px !important;
        color: #3B4763 !important;
        margin-bottom: 14px !important;
        line-height: 1.4 !important;
        opacity: 0.85 !important;
    }

    /* Bio / descrizione */
    .team-member p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #3B4763 !important;
        word-break: break-word !important;
        margin: 0 !important;
    }

    /* Evita overflow */
    #team *,
    #who * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ============================================
   WHAT YOU CAN DO NOW — MOBILE (< 900px)
   Card a tutta larghezza + testi più scuri
============================================ */
@media (max-width: 900px) {

  /* Wrapper sezione */
  #next-steps.cta-section {
    padding: 40px 20px !important;
    box-sizing: border-box !important;
  }

  #next-steps .section-title {
    font-size: 32px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  #next-steps .section-subtitle {
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin-bottom: 26px !important;
    opacity: 0.9 !important;
    max-width: 100% !important;
  }

  /* Griglia → colonna, card larga come le altre */
  .cta-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* Card principale */
  .cta-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    border-radius: 22px !important;
    padding: 22px 20px !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.65) !important;
  }

  /* Titoli dentro la card */
  .cta-card h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: #FFFFFF !important;
  }

  /* Testo principale della card: più scuro e leggibile */
  .cta-lead,
  .cta-card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #E6ECFF !important;  /* molto più contrastato del #D4E0FF */
  }

  /* Elenco puntato: niente più azzurrino slavato */
  .cta-list li {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #E6ECFF !important;
  }

  /* Footnote finale, sempre leggibile */
  .cta-footnote {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #CBD6FF !important;
    opacity: 0.95 !important;
  }
}

/* ============================================================
   FOOTER — MOBILE (<900px)
   Stile coerente con: Services, Applications, Roadmap, Team
============================================================ */
@media (max-width: 900px) {

    footer {
        padding: 40px 20px !important;
        background: #071327 !important;
        box-sizing: border-box !important;
    }

    /* Layout in colonna */
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        width: 100% !important;
    }

    /* —— LOGO + BADGE —— */
    .footer-branding {
        text-align: center !important;
    }

    .footer-branding img {
        width: 120px !important;
        height: auto !important;
        margin-bottom: 14px !important;
    }

    .footer-badges {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-badge {
        background: rgba(255,255,255,0.07) !important;
        color: #dbe7ff !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
    }


    /* —— SEZIONI DEL FOOTER —— */
    .footer-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        color: #dbe7ff !important;
    }

    .footer-column h4 {
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-bottom: 14px !important;
        color: #ffffff !important;
    }

    .footer-column p,
    .footer-column span,
    .footer-column li,
    .footer-column a {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #d1dcf6 !important;
    }

    .footer-column a {
        text-decoration: none !important;
        color: #e1ecff !important;
    }

    .footer-column a:hover {
        color: #7bb8ff !important;
    }

    .footer-column ul {
        padding-left: 0 !important;
        list-style: none !important;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }


    /* —— CTA / BOTTONI —— */
    .footer-cta-btn {
        display: inline-block !important;
        margin-top: 12px !important;
        padding: 10px 16px !important;
        background: #ffffff !important;
        color: #0C1B38 !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        font-size: 15px !important;
        text-align: center !important;
        width: fit-content !important;
    }

    .footer-cta-btn:hover {
        background: #e6e6e6 !important;
    }


    /* —— COPYRIGHT —— */
    .footer-bottom {
        text-align: center !important;
        margin-top: 30px !important;
        font-size: 13px !important;
        opacity: 0.6 !important;
        color: #d1dcf6 !important;
    }
}

/* ----------------------------------------------
   NAVBAR FIX — 1081px → 1280px
   (versione stretta, anti-overflow)
---------------------------------------------- */
@media (min-width: 901px) and (max-width: 1280px) {

    /* Container più stretto */
    .nav-container {
        padding: 8px 18px !important;
        gap: 10px !important;
    }

    /* Logo ridotto */
    .nav-left img {
        max-width: 120px !important;
        height: auto !important;
    }

    /* Menu principale molto più compatto */
    .main-nav ul {
        gap: 10px !important;   /* meno spazio tra le voci */
    }

    .main-nav a {
        font-size: 13px !important;
        padding: 4px 6px !important; 
        white-space: nowrap !important;
    }

    /* Language button ridotto */
    .lang-btn {
        font-size: 13px !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Forza layout a NON spingere fuori nulla */
    .nav-right {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* Il menu non deve mai andare su 2 righe */
    .main-nav {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
}

/* ============================================
   HERO DESKTOP COMPATTO (901px – 1280px)
   Centra meglio immagine + testi
============================================ */
@media (min-width: 901px) and (max-width: 1280px) {

  /* Immagine un po’ più a sinistra e leggermente ridotta */
  .hero-image {
    left: 4% !important;
    width: 480px !important;   /* invece dei 520px */
  }

  /* Testo spostato verso sinistra */
  .hero-content {
    left: 30% !important;      /* invece del 35% */
    max-width: 540px !important;
  }
}

/* ============================================================
   NAVBAR — NASCONDERE IL MENU TRA 901px E 1280px
   (solo logo + language selector visibili)
============================================================ */
@media (min-width: 901px) and (max-width: 1280px) {

    /* Nasconde completamente la main-nav */
    .main-nav,
    .main-nav *,
    header nav,
    header nav ul {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        pointer-events: none !important;
    }

    /* Mantieni layout semplice: logo + lingue */
    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 24px !important;
        gap: 10px !important;
    }

    /* Logo */
    .nav-left img {
        max-width: 150px !important;
        height: auto !important;
    }

    /* Language button */
    .lang-btn {
        font-size: 14px !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .nav-right {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
}

/* =========================================
   HERO FIX 901–1280px — RIMUOVE ABSOLUTE
   e allinea immagine + testo con flex
========================================= */
@media (min-width: 901px) and (max-width: 1280px) {

  /* Togliamo il posizionamento assoluto */
  .hero-image,
  .hero-content {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  /* wrapper vero dell’hero */
  .hero {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 0 !important;
  }

  .hero-inner {
    width: 100% !important;
    max-width: 1200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 60px !important; /* distanza immagine <-> testo */
    margin: 0 auto !important;
  }

  /* Lato immagine */
  .hero-image {
    width: 350px !important; /* puoi aumentare o diminuire */
    flex-shrink: 0 !important;
  }

  /* Lato testo */
  .hero-content {
    max-width: 650px !important;
  }
}