:root{
    --blue-light:#bde3ff;
    --blue-mid:#59b8ff;
    --blue-deep:#0088dd;      /* azzurro intenso come il logo */
    --bg:#ffffff;
    --text:#4b5259;           /* 20% più chiaro */
    --muted:#9aa2ac;
    --line:#e6edf3;
    --login:#3a4046;          /* grigio testo login (sempre visibile) */
    --login-hover:#0a8f3f;    /* verde al passaggio */
    --login-border:#8da3b9;   /* grigio bordo login */
  }
  
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--bg);color:var(--text);
    font-size:10.5px;            /* testi su bianco più piccoli (~ -30%) */
    line-height:1.5;
  }
  .container{max-width:1080px;margin:0 auto;padding:16px 20px}
  
  /* Barre azzurre con gradiente fino all'azzurro intenso */
  .band{
    color:#edf6ff;
    background:linear-gradient(180deg,var(--blue-light),var(--blue-mid) 40%,var(--blue-deep));
  }
  .band.top{border-bottom:1px solid var(--line)}
  .band.bottom{border-top:1px solid var(--line)}
  
  /* Header/menu (dimensioni fisse per leggibilità) */
  .nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .brand{display:flex;align-items:center;gap:10px}
  .brand .logo{width:42px;height:42px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#fff}
  .brand .title{font-weight:800;letter-spacing:.2px;color:#eaf5ff;font-size:16px}
  
  .menu a{
    color:#ffffff;text-decoration:none;margin:0 8px;font-weight:700;
    font-size:14px;opacity:.98;transition:opacity .18s ease,text-decoration .18s ease;
  }
  .menu a:hover{opacity:1;text-decoration:underline}
  
  /* Bottone Login: grigio sempre, verde su hover */
  .btn{
    background:#ffffff;color:var(--login);text-decoration:none;font-weight:800;
    border-radius:10px;padding:8px 14px;font-size:14px;
    border:1px solid var(--login-border);
    transition:all .18s ease;
  }
  .btn:hover{
    background:#eafff1;
    border-color:#0a8f3f;
    color:var(--login-hover);
  }
  
  /* Hero su bianco */
  .hero{text-align:center;padding:70px 20px 50px}
  .hero img.logo-big{
    width:min(525px,92vw);   /* +25% rispetto a prima */
    height:auto;display:block;margin:0 auto 14px;
  }
  .hero img.scritta{
    width:min(525px,92vw);height:auto;display:block;margin:4px auto 12px;
  }
  .hero h1{font-size:1.9rem;font-weight:800;margin:14px 0 6px;color:#2e3640}
  .hero p{max-width:700px;margin:0 auto;color:#606872;font-size:0.95rem}
  
  /* Cards e griglia */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:0 20px 60px;max-width:1080px;margin:0 auto}
  .card{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
  .card h3{font-size:1.15rem;margin:0 0 6px;color:#2e3640}
  .card p,.card ul{font-size:0.95rem;color:#5a6169;margin:0}
  ul.list{list-style:disc;padding-left:16px;margin-top:4px}
  
  /* Sezioni interne */
  .section{padding:28px 20px}
  .lead{font-size:1rem;color:#5f6770;max-width:800px;margin-bottom:20px}
  h2{font-size:1.5rem;margin-bottom:10px;color:#2e3640}
  
  /* Footer (leggibile sulla banda) */
  .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:#e9f4ff}
  .footer-inner a{color:#e9f4ff;text-decoration:underline}