/* VARIABLES DA FIGMA */
    :root {
      --bg-color: #020202;
      --text-white: #EDEDED;
      --text-green: #3CBF9C;
      --text-muted: #A1A1AA;
	  --text-muted-2: #FEFEFE;
      
      --btn-primary-bg: #EDEDED;
      --btn-primary-text: #0A0A0A;
      
      --btn-secondary-bg: rgba(255, 255, 255, 0.00);
      --btn-secondary-text: #EDEDED;
      --btn-secondary-border: rgba(255, 255, 255, 0.14);
      
      --font-main: 'Geist', sans-serif;
      --font-label: 'Roboto Mono', monospace;
      
      --container-max-width: 1440px;
      --container-padding-x: 128px;
      --section-gap: 64px;
    }
	
	html {
  scroll-behavior: smooth;
}

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

    body {
      background-color: var(--bg-color);
      color: var(--text-white);
      font-family: var(--font-main);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
	
	/* Nasconde gli a capo forzati su desktop */
	.mobile-break {
	  display: none;
	}

    /* CONTAINER PRINCIPALE */
    .container {
      max-width: var(--container-max-width);
      margin: 0 auto;
      padding-left: var(--container-padding-x);
      padding-right: var(--container-padding-x);
    }

    /* UTILITY SECTION SPACING */
    .section-spacing {
      margin-bottom: var(--section-gap);
    }

    /* HEADER */
    .header {
      padding-top: 40px;
      padding-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-img {
      height: 32px;
      width: auto;
      margin-bottom:10px;
    }

    /* HERO SECTION (Sfondo a griglia a tutta larghezza) */
    .hero {
      position: relative;
      width: 100%;
      background-image: url('img/hero-background.png');
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
      padding-top: 48px;
      padding-bottom: 32px;
      text-align: center;
    }

    /* RIQUADRO #020202 CON BORDO #2B2B2B E MARGIN BOTTOM 32px */
    .hero-card {
      max-width: 1040px;
      margin: 0 auto 32px auto;
      background-color: #0202029c; /* #020202 */
      padding: 48px;
      border: 0px solid #2B2B2B;
      
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .hero-title {
      color: var(--text-white);
      font-size: 52px;
      line-height: 1.15;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    /* EVIDENZIATORE VERDE SOLO SU "4 ORE" */
    .hero-title .highlight {
      color: var(--text-green);
      font-weight: bold;
    }

    /* GAP 24px tra Titolo e Sottotitolo */
    .hero-subtitle {
      margin-top: 24px;
      font-size: 20px;
      line-height: 1.4;
      color: var(--text-muted);
      font-weight: 400;
    }

    /* GAP 32px tra Sottotitolo e Bottoni */
    .hero-cta-group {
      margin-top: 32px;
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: center;
    }

    /* BOTTONI */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 9999px;
      font-family: var(--font-main);
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

/* Bottone Telegram */
.btn-telegram {
  background-color: #24A1DE;
  color: #FFFFFF;
  border: 1px solid #24A1DE;
}

.btn-telegram:hover {
  background-color: #28B0F3;
  border-color: #28B0F3;
  box-shadow: 0 0 16px rgba(36, 161, 222, 0.3);
}

/* Icona immagine dentro il bottone */
.btn-telegram-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

    /* Bottone Primario: Inizia Ora */
    .btn-primary {
      background-color: var(--btn-primary-bg);
      color: var(--btn-primary-text);
      border: 1px solid var(--btn-primary-bg);
    }

    .btn-primary:hover {
      background-color: #ffffff;
      border-color: #ffffff;
    }

    /* Bottone Secondario: Scopri come funziona */
    .btn-secondary {
      background-color: var(--btn-secondary-bg);
      color: var(--btn-secondary-text);
      box-shadow: 0 0 0 1px var(--btn-secondary-border);
      border: none;
    }

    .btn-secondary:hover {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.04);
    }

    .btn-icon {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }

    /* IMMAGINE GRAPHIC FUORI DAL RIQUADRO */
    .hero-visual {
      display: flex;
      justify-content: center;
      width: 100.5%;
    }

    .hero-visual-img {
      width: 207px;
      height: 152px;
      display: block;
      object-fit: contain;
    }

    /* LABEL ROBOTO MONO UTILITY */
    .label-mono {
      font-family: var(--font-label);
    }
	
    /* UTILITY & HIGHLIGHTS */
    .highlight {
      color: #3CBF9C !important;
      font-weight: bold;
    }

    /* PILLOLE / BADGE UNIFICATI */
    .section-tag-pill, .badge-passive {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(60, 191, 156, 0.12);
      border: 1px solid rgba(60, 191, 156, 0.3);
      color: #3CBF9C;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 999px;
      margin-bottom: 16px;
    }
	
	    /* PILLOLE / BADGE UNIFICATI */
    .section-tag-pill-2, .badge-passive-2 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid #FEFEFE;
      color: #FEFEFE;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 999px;
      margin-bottom: 16px;
    }

    /* HEADER CENTRATO */
    .neutral-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-bottom: 64px;
    }
  
    /* SFONDO PER LA SEZIONE DELTA NEUTRAL */
    .section-neutral {
      background-image: url('img/bg-3.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      position: relative;
    }

    .section-h2 {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 36px;
      font-weight: 600;
      line-height: 48px;
      letter-spacing: -2.4px;
      text-align: center;
    }

    /* CONTENITORE LAYOUT ZIG-ZAG */
    .neutral-staggered-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 1184px;
      margin: 0 auto;
      gap: 32px;
    }

    /* BLOCCHI A ZIG-ZAG */
    .staggered-block {
      width: 700px;
    }

    .block-left {
      align-self: flex-start;
    }

    .block-right {
      align-self: flex-end;
    }

    /* STILE CARD / BLOCCHI */
    .card-intro {
      display: flex;
      padding: 24px 32px;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
    }

    /* ICONE SOPRA GLI HEADING */
    .heading-icon {
      width: 48px;
      height: 48px;
      object-fit: contain;
      margin-bottom: -4px;
    }

    .card-h5 {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 24px;
      font-weight: 700;
      line-height: normal;
    }

    .p-medium {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }

    /* ELENCO PUNTATO "COME FUNZIONA" */
    .bullet-list {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .bullet-list li::marker {
      color: #3CBF9C;
    }

    /* SUMMARY BOX FINALE */
    .summary-box {
      margin-bottom: 24px;
      padding: 24px 32px;
      background: rgba(60, 191, 156, 0.04);
      border: 1px solid rgba(60, 191, 156, 0.18);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
  
    /* CARD TRASPARENTE DELTA NEUTRALITY */
    .delta-card {
      width: 100%;
      max-width: 1184px;
      margin: 64px auto 0 auto;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      padding: 32px 32px 24px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .delta-title {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -0.5px;
      text-transform: uppercase;
      text-align: center;
      margin: 0 0 32px 0;
    }

    .delta-schema-img {
      width: 100%;
      max-width: 650px;
      height: auto;
      display: block;
      object-fit: contain;
    }
  
    /* UTILITY SPAZIATURE */
    .mx-auto {
      margin-left: auto;
      margin-right: auto;
    }
    .mb-64 {
      margin-bottom: 64px;
    }
    .text-muted {
      color: #A1A1AA !important;
    }

    /* GRIGLIA 3 CARD BENEFIT */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      width: 100%;
    }

    .benefit-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 32px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
    }

    .benefit-icon {
      width: 24px;
      height: 24px;
      object-fit: contain;
      margin-bottom: 24px;
    }

    .benefit-title {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 16px;
    }
  
    /* SFONDO SEZIONE SOLUTION */
    .section-solution {
      background: linear-gradient(180deg, #5B0002 0%, #025D51 60%, #01362F 100%);
      padding-top: 64px;
      padding-bottom: 64px;
      width: 100%;
    }

    .text-center { text-align: center; }
    .text-white { color: #EDEDED !important; }
    .font-semibold { font-weight: 600; }
  
    .mb-16 { margin-bottom: 16px; }
    .mb-24 { margin-bottom: 24px; }
    .mb-48 { margin-bottom: 48px; }
    .mt-64 { margin-top: 64px; }

    .solution-wrapper {
      max-width: 1184px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    /* GRIGLIA RISCHI */
    .risks-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      width: 100%;
    }

    .risk-card {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .risk-icon {
      width: 24px;
      height: 24px;
      object-fit: contain;
      margin-bottom: 24px;
    }

    .risk-title {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .startup-logo {
      height: 48px;
      width: auto;
      display: inline-block;
    }

    .shield-block {
      display: flex;
      align-items: stretch;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 24px;
      overflow: hidden;
    }

    .shield-col {
      flex: 0 0 35%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px;
      background: rgba(60, 191, 156, 0.05);
      border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    .shield-img {
      width: 100%;
      max-width: 180px;
      height: auto;
      object-fit: contain;
    }

    .shield-features {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 40px 48px;
    }

    .shield-feature-item {
      padding-bottom: 32px;
      margin-bottom: 32px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .shield-feature-item.no-border {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }

    .shield-feature-title {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .section-onboarding {
      position: relative;
      width: 100%;
      padding-top: 64px;
      padding-bottom: 64px;
    }

    .tools-header {
      max-width: 800px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 32px;
      width: 100%;
    }

    .span-3 { grid-column: span 3; }
    .span-2 { grid-column: span 2; }

	.tool-card {
	  background-color: #1a1b1c;
	  border-radius: 6px;
	  padding: 32px;
	  box-sizing: border-box;
	  display: flex;
	  flex-direction: column;
	}

	.tool-card-header {
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  height: 24px;
	  margin-bottom: 24px;
	}

	.tool-icon {
	  width: 20px;
	  height: 20px;
	  object-fit: contain;
	  opacity: 0.6;
	}

	.tool-label {
	  color: #9e9e9e;
	  font-size: 13px;
	  font-family: monospace;
	  text-transform: uppercase;
	  letter-spacing: 0.5px;
	}

	.tool-title {
	  color: #ffffff;
	  font-size: 26px;
	  line-height: 1.2;
	  font-weight: 500;
	  margin: 0;
	}

    /* SEZIONE PRICING */
    .pricing-section {
      width: 100%;
      padding-top: 64px;
      padding-bottom: 64px;
      position: relative;
    }

    .pricing-layout {
      max-width: 1184px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .billing-toggle-container {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 4px;
      border-radius: 9999px;
      margin-bottom: 64px;
      gap: 4px;
    }

    .billing-btn {
      background: transparent;
      border: none;
      color: #A1A1AA;
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 20px;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }

    .billing-btn:hover {
      color: #EDEDED;
    }

    .billing-btn.active {
      background: rgba(255, 255, 255, 0.08);
      color: #EDEDED;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      width: 100%;
      align-items: stretch;
    }

    .pricing-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .pricing-card:hover {
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-4px);
    }

    .pricing-card.active {
      background: rgba(255, 255, 255, 0.04);
      border-color: #31EBBA;
      box-shadow: 0 0 32px rgba(49, 235, 186, 0.12);
    }

    .pricing-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .pricing-card-header .material-symbols-outlined {
      color: #31EBBA;
      font-size: 24px;
    }

    .pricing-card-header h3 {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 22px;
      font-weight: 600;
      margin: 0;
    }

    .pricing-card .price {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -1.5px;
      margin: 0 0 32px 0;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .pricing-card .price .period {
      color: #A1A1AA;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: normal;
    }

    .pricing-features {
      list-style: none;
      padding: 0;
      margin: 0 0 40px 0;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pricing-features li {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 13px;
      line-height: 22px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pricing-features li::before {
      content: "✓";
      color: #31EBBA;
      font-weight: bold;
      font-size: 14px;
      display: inline-block;
      width: 16px;
      flex-shrink: 0;
    }

    .pricing-features li.disabled {
      color: #52525B;
      text-decoration: line-through;
    }

    .pricing-features li.disabled::before {
      content: "✕";
      color: #52525B;
    }

    .pricing-cta {
      display: block;
      width: 100%;
      text-align: center;
      padding: 14px 24px;
      border-radius: 12px;
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
      box-sizing: border-box;
    }

    .section-support-footer {
      width: 100%;
      padding-top: 64px;
      background-color: #000000;
    }

    .support-card {
      max-width: 1184px;
      margin: 0 auto 64px auto;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      padding: 64px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .support-title {
      color: #EDEDED;
      font-family: 'Geist', sans-serif;
      font-size: 32px;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -1.5px;
      margin: 0 0 12px 0;
    }

    .support-subtitle {
      color: #A1A1AA;
      font-family: 'Geist', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      margin: 0 0 32px 0;
      max-width: 600px;
    }

    .btn-support {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #EDEDED;
      color: #09090B;
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 600;
      padding: 12px 28px;
      border-radius: 9999px;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .btn-support:hover {
      background-color: #FFFFFF;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
      transform: translateY(-2px);
    }

    .site-footer {
      width: 100%;
      padding: 32px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      background-color: #000000;
    }

    .footer-text {
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      color: #A1A1AA;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .footer-brand {
      color: #31EBBA;
      font-weight: 500;
    }

    .footer-separator {
      color: #52525B;
    }

    .footer-link {
      color: #A1A1AA;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-link:hover {
      color: #EDEDED;
    }

    .how-to-start-section {
      padding: 64px 128px;
      width: 100%;
      box-sizing: border-box;
    }

    .how-to-start-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 32px;
    }

    .section-title {
      color: #ffffff;
      font-size: 32px;
      font-weight: 700;
      margin: 0;
    }

    .video-list-vertical {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .video-row-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #0b0e11;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 24px;
      gap: 32px;
    }

    .video-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .video-badge {
      color: #3cbf9c;
      font-size: 13px;
      font-weight: 500;
    }

    .video-card-title {
      color: #ffffff;
      font-size: 32px;
      font-weight: 600;
      margin: 0;
    }

    .video-card-desc {
      color: #848e9c;
      font-size: 16px;
      margin: 0;
    }

    .video-wrapper {
      flex: 1.4;
      width: 100%;
    }

    .video-placeholder {
      width: 100%;
      aspect-ratio: 16 / 9;
      background-color: #6b7280;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .play-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(60, 191, 156, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .play-btn:hover {
      transform: scale(1.08);
      background: rgba(0, 0, 0, 0.6);
    }

    /*========================================================================*/
    /* MEDIA QUERY MOBILE & TABLET (Modificata e arricchita per tutte le tue richieste) */
    /*========================================================================*/
    @media (max-width: 900px) {
		
		
		/* Mostra gli a capo forzati su mobile */
  .mobile-break {
    display: block;
  }
		
		/* Riduzione margini e padding di delta-card su mobile */
      .delta-card {
        margin-top: -16px;       /* Riduce il margine superiore da 64px a 32px */
        padding: 24px 16px;     /* Riduce i padding interni rispetto ai 32px del desktop */
      }
	  
	  .video-card-title {
      color: #ffffff;
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
	  
	  /* Riduzione padding superiore della sezione assistenza/footer su mobile */
      .section-support-footer {
        padding-top: 0px; /* Riduce da 64px a 32px (o metti 0px se vuoi azzerarlo del tutto) */
      }
      
      /* Aggiustamento padding generale del contenitore per evitare tagli */
      .container {
        padding-left: 24px;
        padding-right: 24px;
      }

      /* HERO SECTION */
      .hero-title {
        font-size: 36px;
      }
      .hero-card {
        padding: 32px 24px;
      }
      .hero-cta-group {
        flex-direction: column;
        width: 100%;
      }
      .hero-cta-group .btn {
        width: 100%;
        justify-content: center;
      }

      /* =========================================================================
         1. I VIDEO VANNO UNO SOPRA L'ALTRO CON TITOLO/DESCRIZIONE SOPRA IL VIDEO 
         ========================================================================= */
      .how-to-start-section {
        padding: 32px 24px;
      }
      .video-row-card {
        flex-direction: column; /* Incolonna gli elementi */
        align-items: flex-start;
        gap: 20px;
      }
      /* Dato che .video-info è scritto prima di .video-wrapper nell'HTML,
         con flex-direction: column andrà automaticamente SOPRA al video */
      .video-wrapper, .video-info {
        width: 100%;
      }

      /* =========================================================================
         2. STRUTTURA A ZIG-ZAG DIVENTA UNA SOPRA L'ALTRA 
         ========================================================================= */
      .neutral-staggered-container {
        gap: 24px;
      }
      .staggered-block {
        width: 100%; /* Occupa tutto lo spazio e non solo 700px */
      }
      .block-left, .block-right {
        align-self: center; /* Rimuove lo spostamento a destra/sinistra (lo zig-zag) */
      }

      /* Aggiustamenti per altre griglie (benefici, rischi, shield) in ottica mobile */
      .cards-grid {
        grid-template-columns: 1fr;
      }
      .risks-grid {
        grid-template-columns: 1fr;
      }
      .shield-block {
        flex-direction: column;
      }
      .shield-col {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 32px 24px;
      }
      .shield-features {
        padding: 32px 24px;
      }

      /* Griglia Tools (da 6 colonne a 1 colonna) */
      .tools-grid {
        grid-template-columns: 1fr;
      }
      .span-3, .span-2 {
        grid-column: span 1; /* Reset dei blocchi per occupare singola riga */
      }

      /* =========================================================================
         3. PREZZI UNO SOPRA L'ALTRO 
         ========================================================================= */
      .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      /* Support Footer */
      .support-card {
        padding: 32px 24px;
      }
      .support-title {
        font-size: 28px;
      }
      
      /* Footer */
      .footer-text {
        flex-direction: column;
        gap: 12px;
      }
      .footer-separator {
        display: none;
      }
    }