:root{
    /* Un'unica famiglia di blu per tutto il testo: prima il corrente era grigio-nero
       e i secondari grigio puro, stonati rispetto ai titoli blu. */
    --navy:#1c2757; --navy-2:#2a3775; --ink:#1c2757; --muted:#4f5a80;
    --yellow:#ffd400; --bg:#ffffff; --soft:#f4f5f8; --line:#e3e6ee;
    --radius:14px; --max:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:108px}
  body{margin:0; font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; font-size:17px}
  img{max-width:100%; display:block}
  a{color:var(--navy-2)}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
  h1,h2,h3{color:var(--navy); line-height:1.2; margin:0 0 .5em}
  h2{font-size:clamp(1.7rem,3vw,2.3rem)}
  h3{font-size:1.15rem}
  .eyebrow{display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-2); margin-bottom:.8rem}
  .eyebrow::after{content:""; display:block; width:36px; height:3px; background:var(--yellow); margin-top:.5rem}
  section{padding:88px 0}

  /* Header */
  header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:100px}
  .nav img{height:80px; width:auto}
  .nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0}
  .nav a{text-decoration:none; color:var(--ink); font-weight:600; font-size:.95rem}
  .nav a:hover{color:var(--navy-2)}
  .nav .cta{background:var(--navy); color:#fff; padding:9px 18px; border-radius:999px}
  .nav .cta:hover{background:var(--navy-2); color:#fff}

  /* Hero */
  .hero{position:relative; padding:110px 0 120px; background:#e9eaed url(img/hero.jpg) center/cover no-repeat; overflow:hidden}
  .hero::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 45%,rgba(255,255,255,.35) 100%)}
  .hero .wrap{position:relative}
  .hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); max-width:760px; letter-spacing:-.01em}
  .hero h1 span{background:linear-gradient(transparent 62%,var(--yellow) 62%)}
  .hero p.lead{font-size:1.2rem; color:var(--muted); max-width:620px; margin:0 0 2rem}
  .btn{display:inline-block; padding:14px 26px; border-radius:999px; font-weight:700; text-decoration:none; transition:transform .15s}
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{background:var(--navy); color:#fff}
  .btn-ghost{color:var(--navy); border:2px solid var(--navy); margin-left:10px}

  /* Intro */
  .intro{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
  .nome{background:#fff; color:var(--muted); border:1px solid var(--line); border-top:5px solid var(--yellow);
        border-radius:var(--radius); padding:34px 32px; box-shadow:0 12px 32px rgba(28,39,87,.07)}
  .nome h3{color:var(--navy); font-size:1.5rem; margin-bottom:1rem}
  .nome-voce{padding:16px 0}
  .nome-voce + .nome-voce{border-top:1px solid var(--line)}
  .nome-tag{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-2); margin-bottom:.4rem}
  .nome p{margin:0}
  .nome strong{color:var(--navy)}
  /* Il marchio dentro il riquadro: il payoff fa parte del logo stesso */
  .marchio{margin:.4rem 0 1rem; padding:8px 0; display:grid; place-items:center}
  .marchio img{width:min(320px,100%); height:auto}

  /* Servizi */
  .servizi{background:var(--soft)}
  .grid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-top:40px}
  .grid .card{grid-column:span 2}
  .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; transition:box-shadow .2s, transform .2s}
  .card:hover{box-shadow:0 14px 34px rgba(28,39,87,.1); transform:translateY(-3px)}
  .card .ico{width:46px; height:46px; border-radius:12px; background:var(--navy); color:var(--yellow); display:grid; place-items:center; margin-bottom:18px}
  .card ul{margin:.6rem 0 0; padding-left:1.1rem; color:var(--muted); font-size:.97rem}
  .card li{margin:.2rem 0}

  /* Metodo */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px; counter-reset:s}
  .step{counter-increment:s; padding-top:18px; border-top:3px solid var(--navy)}
  .step::before{content:"0" counter(s); font-weight:800; font-size:.9rem; color:var(--navy-2); letter-spacing:.1em}
  .step p{color:var(--muted); margin:0}
  .valori{display:flex; flex-wrap:wrap; gap:12px; margin-top:44px}
  .valori span{background:var(--soft); border:1px solid var(--line); padding:8px 18px; border-radius:999px; font-weight:600; color:var(--navy)}

  /* Contatti */
  .contatti{background:var(--navy); color:#dfe3f1}
  .contatti h2{color:#fff}
  .contatti .eyebrow{color:#fff}
  .contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start}
  .contact-list{list-style:none; padding:0; margin:0}
  .contact-list li{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14)}
  .contact-list svg{flex:none; color:var(--yellow); margin-top:3px}
  .contact-list a{color:#fff; text-decoration:none; font-weight:600}
  .contact-list small{display:block; color:#aeb6d3; font-size:.85rem}
  .btn-yellow{background:var(--yellow); color:var(--navy); margin-top:1.4rem}

  /* Modulo di contatto */
  .form{margin-top:1.6rem; max-width:520px}
  .form label{display:block; font-size:.9rem; font-weight:600; color:#fff; margin:14px 0 6px}
  .form input[type=text],.form input[type=email],.form textarea{width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; padding:11px 13px}
  .form textarea{resize:vertical; min-height:120px}
  .form input:focus,.form textarea:focus{outline:3px solid var(--yellow); outline-offset:1px}
  .form .check{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.9rem; color:#dfe3f1; margin-top:18px}
  .form .check input{margin-top:4px; flex:none; width:18px; height:18px}
  .form .check a{color:#fff}
  .form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .esito{border-radius:8px; padding:14px 16px; margin-bottom:16px; font-weight:600}
  .esito.ok{background:#e6f6ec; color:#15532c}
  .esito.ko{background:#fdeaea; color:#7a1d1d}

  /* Pagine di testo (informativa privacy) */
  .doc{max-width:760px; padding:56px 0 72px}
  .doc h1{font-size:clamp(1.8rem,3.4vw,2.4rem)}
  .doc h2{font-size:1.25rem; margin-top:2.2em}
  .doc ul{padding-left:1.2rem}
  .doc li{margin:.35rem 0}
  .doc .aggiornamento{font-size:.9rem; color:var(--muted)}
  footer a{color:#dfe3f1}
  .todo{background:#fff3a6; color:#6a5300; padding:0 6px; border-radius:4px; font-weight:600}

  .profilo{margin-top:1.4rem; padding:14px 18px; background:var(--soft); border-left:4px solid var(--navy); border-radius:6px; color:var(--navy)}
  footer{background:#141c41; color:#9aa3c4; font-size:.85rem; padding:28px 0; line-height:1.6}
  footer p{margin:0 0 6px}
  footer strong{color:#dfe3f1; font-weight:600}
  button.btn{border:0; cursor:pointer; font:inherit; font-weight:700}
  .linklike{background:none; border:0; padding:0; font:inherit; color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer}

  @media (max-width:860px){
    section{padding:64px 0}
    .nav ul li:not(:last-child){display:none}
    .intro,.contact-grid{grid-template-columns:1fr; gap:32px}
    .steps{grid-template-columns:1fr}
    .grid{grid-template-columns:1fr} .grid .card, .grid .card:nth-last-child(-n+2){grid-column:auto}
    .hero{padding:72px 0 80px}
    .hero::before{background:rgba(255,255,255,.9)}
    .btn-ghost{margin:12px 0 0}
  }
  @media (max-width:860px){ .nav{height:80px} .nav img{height:62px} html{scroll-padding-top:88px} }
  @media (max-width:420px){ .wrap{padding:0 16px} }