:root{
      --primary:#097bc0;
      --primary-dark:#0a5a8a;
      --secondary:#2b4a72;
      --accent:#4fc3f7;

      --light:#fafbfc;
      --white:#ffffff;

      --text-dark:#1a2332;
      --text-light:#64748b;
      --text-medium:#475569;

      --border:#e2e8f0;
      --success:#10b981;
      --warning:#f59e0b;
      --danger:#ef4444;

      --info-bg:#e0f2fe;
      --info-border:#097bc0;

      --gradient:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
      --shadow:0 4px 6px -1px rgb(0 0 0 / 0.1);
      --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1);
      --shadow-xl:0 18px 30px -10px rgb(0 0 0 / 0.18);

      --radius:12px;
      --transition:all .3s cubic-bezier(.4,0,.2,1);

      --header-height: 84px; /* verrà aggiornato via JS */
    }

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

    body{
      font-family:'Inter',sans-serif;
      line-height:1.6;
      color:var(--text-dark);
      background:var(--light);
      overflow-x:hidden;
      padding-top: var(--header-height);
    }

    a{color:inherit}

    /* Header */
    

    

    
    

    

    

    
    
    

    
    

    
    

    /* Mobile-only menu item */
    

    
    

    /* Main */
    main{
      max-width: 100%;
      padding: 1.25rem 0 0;
    }

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

    /* Hero/Intro box */
    .intro-box{
      margin: 1.5rem auto 1rem;
      padding: 1.75rem;
      border: 2px solid var(--primary);
      border-radius: 12px;
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      text-align:center;
      box-shadow: var(--shadow);
    }
    .intro-box h2{
      color: var(--primary-dark);
      font-size: 1.5rem;
      margin-bottom: 1rem;
      font-family:'Playfair Display',serif;
      display:flex;
      justify-content:center;
      gap:.5rem;
      align-items:center;
    }
    .intro-box p{
      color: var(--text-dark);
      font-size: 1.05rem;
      line-height: 1.7;
      margin: 0 0 1.25rem 0;
    }

    .intro-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      text-align:left;
      margin-top: .5rem;
    }

    .intro-card{
      background: #fff;
      padding: 1rem;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,.08);
      border: 1px solid var(--border);
    }
    .intro-card .icon{
      color: var(--primary);
      font-size: 1.55rem;
      margin-bottom: .5rem;
    }
    .intro-card strong{display:block;margin-bottom:.2rem}

    /* Benefits */
    .benefits{
      margin: 2rem auto 1rem;
    }
    .benefits h3{
      font-size: 1.3rem;
      color: var(--text-dark);
      margin-bottom: 1rem;
      text-align:center;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:.5rem;
    }
    .benefit-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.25rem;
    }
    .benefit-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius: 12px;
      padding: 1.25rem;
      transition: var(--transition);
    }
    .benefit-card:hover{box-shadow: var(--shadow)}
    .benefit-card .bicon{
      color: var(--primary);
      font-size: 2rem;
      margin-bottom: .75rem;
    }
    .benefit-card h4{
      color: var(--text-dark);
      margin-bottom: .5rem;
      font-size: 1.1rem;
    }
    .benefit-card ul{
      list-style:none;
      padding:0;
      color: var(--text-light);
      font-size: .95rem;
      line-height: 1.7;
    }
    .benefit-card li{
      display:flex;
      align-items:flex-start;
      gap:.5rem;
      padding:.25rem 0;
    }
    .benefit-card li i{color: var(--success); margin-top:.25rem}

    /* Info Alert */
    .info-alert{
      color: var(--text-medium);
      background: var(--info-bg);
      border-left: 4px solid var(--info-border);
      padding: .9rem 1rem;
      border-radius: 10px;
      margin: 1.5rem 0 0;
    }
    .info-alert a{color: var(--primary); font-weight:600; text-decoration: underline}

    /* Form container */
    .form-container{
      margin: 2rem auto;
      padding: 1.5rem;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--white);
      box-shadow: var(--shadow-lg);
    }

    .form-header img{height:54px;display:block;margin:0 0 1rem 0}
    .form-title{
      margin:.25rem 0 0;
      color: var(--text-dark);
      font-size: 1.75rem;
      font-weight: 700;
    }
    .form-subtitle{
      color: var(--text-light);
      margin:.25rem 0 1rem;
    }
    .form-subtitle a{color: var(--primary); text-decoration:none}
    .form-subtitle a:hover{text-decoration:underline}

    .message{
      display:none;
      margin: .9rem 0;
      padding: .9rem 1rem;
      border-radius: 10px;
      font-weight: 600;
    }
    .message.success{
      background:#d1fae5;
      color:#065f46;
      border:1px solid #10b981;
    }
    .message.error{
      background:#fee2e2;
      color:#991b1b;
      border:1px solid #ef4444;
    }

    .form{
      display:grid;
      gap: 1rem;
    }
    .form-group{display:flex;flex-direction:column}
    .form-row{
      display:grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr;
    }

    label{
      font-weight: 500;
      margin-bottom:.5rem;
      color: var(--text-dark);
    }

    input, select, textarea{
      width:100%;
      padding:.75rem;
      border:1px solid var(--border);
      border-radius: 8px;
      font-size: 1rem;
      transition: var(--transition);
      background:#fff;
    }
    input:focus, select:focus, textarea:focus{
      outline:none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(9,123,192,.1);
    }

    fieldset{
      border:1px solid var(--border);
      border-radius: 12px;
      padding: 1rem;
      margin: 0;
    }
    legend{
      font-weight: 600;
      padding: 0 .5rem;
      color: var(--text-dark);
    }

    .radio-group, .checkbox-group{
      display:flex;
      flex-direction:column;
      gap: .5rem;
      margin-top: .5rem;
    }
    .radio-item, .checkbox-item{
      display:flex;
      align-items:flex-start;
      gap: .5rem;
    }
    input[type="radio"], input[type="checkbox"]{
      width:auto;
      margin-top:.2rem;
    }

    .content-box{
      display:none;
      margin-top:.75rem;
      padding:1rem;
      border-radius: 10px;
      border:1px solid var(--border);
      background:#fff;
    }

    .payment-note{
      margin-top: 1rem;
      color: var(--text-light);
      font-size: .9rem;
    }

    .stripe-button{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      background: var(--gradient);
      color:#fff;
      padding:.85rem 1.35rem;
      border-radius: 12px;
      text-decoration:none;
      font-weight: 700;
      transition: var(--transition);
      margin-top:.5rem;
    }
    .stripe-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
    .stripe-note{
      margin-top:.5rem;
      color: var(--text-light);
      font-size:.9rem;
    }

    .qr-download{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      background: var(--text-dark);
      color:#fff;
      padding:.7rem 1rem;
      border-radius: 10px;
      text-decoration:none;
      font-weight: 700;
      margin-top:.75rem;
      transition: var(--transition);
    }
    .qr-download:hover{background:var(--primary);transform:translateY(-2px)}

    .qr-image{margin-top:.75rem}
    .qr-image img{
      width:200px;
      border:1px solid var(--border);
      padding:.25rem;
      border-radius: 10px;
      background:#fff;
    }

    /* Statuto box */
    .statuto-fieldset{
      border: 2px solid var(--warning);
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    }
    .statuto-legend{
      color:#92400e;
      font-weight: 800;
      font-size: 1.1rem;
    }
    .statuto-panel{
      background:#fff;
      border:2px solid var(--warning);
      border-radius: 10px;
      padding: 1.25rem;
      margin-bottom: 1rem;
    }
    .statuto-alert{
      background:#fef2f2;
      border-left:4px solid #dc2626;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
    }
    .statuto-alert p{
      margin:0;
      color:#7f1d1d;
      font-weight: 700;
      font-size: 1.02rem;
      line-height: 1.55;
    }
    .steps{display:grid;gap:1rem;margin-top:1rem}
    .step{display:flex;gap:1rem;align-items:flex-start}
    .step-badge{
      background: var(--warning);
      color:#fff;
      width:35px;height:35px;
      border-radius: 999px;
      display:flex;align-items:center;justify-content:center;
      font-weight: 800;
      flex-shrink:0;
    }
    .statuto-final{
      background:#fee2e2;
      border:1px solid #dc2626;
      padding:1rem;
      border-radius: 10px;
      margin-top: 1rem;
      color:#991b1b;
      font-weight: 700;
    }

    /* Dichiarazione vincolante */
    .binding-box{
      background: var(--info-bg);
      border-left:4px solid var(--info-border);
      padding: 1.25rem;
      border-radius: 10px;
      margin-bottom: 1rem;
    }
    .binding-box strong.title{
      color: var(--primary-dark);
      font-size: 1.05rem;
      display:block;
      margin-bottom:.5rem;
    }
    .binding-box p, .binding-box li{color: var(--text-dark)}
    .binding-box ul{margin:.75rem 0 0 1.25rem; line-height: 1.8}
    .binding-reminder{
      background:#fef3c7;
      border-left:4px solid var(--warning);
      padding: 1rem;
      border-radius: 10px;
      color: var(--text-dark);
      font-weight: 600;
    }

    /* Signature */
    .signature-container{
      border:1px solid var(--border);
      border-radius: 10px;
      overflow:hidden;
      background:#fff;
    }
    #sigpad{
      width:100%;
      max-width: 520px;
      height: 180px;
      display:block;
      touch-action: none; /* importante per pointer events su mobile */
      cursor: crosshair;
    }
    .signature-controls{
      padding:.5rem;
      background:#f8fafc;
      border-top: 1px solid var(--border);
    }
    .clear-signature{
      padding:.45rem .9rem;
      border:none;
      border-radius: 8px;
      background: var(--border);
      cursor:pointer;
      font-size:.95rem;
      transition: var(--transition);
    }
    .clear-signature:hover{background:#cbd5e1}

    /* Submit */
    .submit-button{
      background: var(--gradient);
      color:#fff;
      padding: .95rem 1.4rem;
      border:none;
      border-radius: 12px;
      font-weight: 700;
      cursor:pointer;
      font-size: 1rem;
      transition: var(--transition);
      margin-top: 1rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
    }
    .submit-button:hover{transform:translateY(-2px);box-shadow: var(--shadow-lg)}
    .submit-button:disabled{background:#9ca3af;cursor:not-allowed;transform:none}

    /* FAQ */
    .faq-section{margin: 3rem auto 0}
    .faq-title{
      font-family:'Playfair Display',serif;
      font-size: clamp(2rem, 5vw, 2.5rem);
      text-align:center;
      color: var(--text-dark);
      margin-bottom: 2rem;
      display:flex;
      justify-content:center;
      gap:.6rem;
      align-items:center;
    }
    .faq-container{display:flex;flex-direction:column;gap:1rem}
    .faq-item{
      background:#fff;
      border:1px solid var(--border);
      border-radius: 12px;
      overflow:hidden;
      transition: var(--transition);
    }
    .faq-item:hover{box-shadow: var(--shadow)}
    .faq-question{
      width:100%;
      padding: 1.15rem 1.25rem;
      background:#fff;
      border:none;
      text-align:left;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-dark);
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 1rem;
      transition: var(--transition);
    }
    .faq-question:hover{background:#f8fafc}
    .faq-question span{display:flex;align-items:center;gap:.75rem}
    .faq-icon{color: var(--primary); transition: transform .25s ease}
    .faq-item.active .faq-icon{transform: rotate(180deg)}
    .faq-answer{
      max-height: 0;
      overflow:hidden;
      transition: max-height .3s ease;
      padding: 0 1.25rem;
    }
    .faq-item.active .faq-answer{
      max-height: 1000px;
      padding: 0 1.25rem 1.25rem;
    }
    .faq-answer p{color: var(--text-light); line-height: 1.7; margin-bottom:.75rem}
    .faq-answer ul{list-style:none; padding-left: 1rem}
    .faq-answer li{
      padding:.25rem 0;
      color: var(--text-light);
      position:relative;
      padding-left:1.5rem;
    }
    .faq-answer li::before{
      content:"→";
      color: var(--primary);
      position:absolute;
      left:0;
    }

    /* Home CTA section */
    .home-cta{
      margin: 3rem 0 0;
      background: linear-gradient(135deg, #097bc0, #0a5a8a);
      padding: clamp(3rem, 6vw, 4rem) 1.5rem;
      text-align:center;
    }
    .home-cta a{
      background:#fff;
      color:#097bc0;
      padding: clamp(.9rem, 2vw, 1.1rem) clamp(1.8rem, 4vw, 2.5rem);
      border-radius: 12px;
      text-decoration:none;
      font-weight: 800;
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      font-size: clamp(.95rem, 2vw, 1.05rem);
      transition: var(--transition);
      box-shadow: 0 4px 15px rgba(0,0,0,.2);
    }
    .home-cta a:hover{transform: translateY(-2px); box-shadow: var(--shadow-xl)}

    /* Footer */
    footer{
      background: var(--text-dark);
      color:#fff;
      padding: 3rem 1.5rem 1rem;
      margin-top: 0;
    }
    .footer-content{
      max-width: 1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }
    .footer-section h3{margin-bottom:1rem;color: var(--accent)}
    .footer-section a{
      color:#fff;
      text-decoration:none;
      opacity:.85;
      transition: var(--transition);
      display:flex;
      align-items:flex-start;
      gap:.5rem;
      margin-bottom:.5rem;
    }
    .footer-section a:hover{opacity:1;color: var(--accent)}
    .footer-section ul{list-style:none}
    .footer-section ul li{margin-bottom:.5rem}
    .footer-bottom{
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: 2rem;
      padding-top: 1rem;
      text-align:center;
      opacity: .7;
      font-size:.9rem;
    }

    /* Back to top */
    .back-to-top{
      position:fixed;
      bottom:2rem;
      right:2rem;
      background: var(--primary);
      color:#fff;
      width:50px;height:50px;
      border:none;
      border-radius: 999px;
      cursor:pointer;
      display:none;
      align-items:center;
      justify-content:center;
      font-size: 1.2rem;
      transition: var(--transition);
      z-index:1000;
      box-shadow: var(--shadow-lg);
    }
    .back-to-top:hover{background: var(--primary-dark); transform: translateY(-2px)}

    /* Responsive */
    @media (max-width: 768px) {
      
      

      
      
      
      
      

      

      .form-container{margin: 1rem auto; padding: 1rem}
      .form-title{font-size: 1.5rem}
      .form-row{grid-template-columns:1fr}

      #sigpad{height: 140px}
    }

    @media (max-width: 480px) {
      .form-container{border-radius: 12px}
      .form-title{font-size: 1.3rem}
    }