:root{
      --fg:#0b2239; --nav:#122559; --muted:#6b7b8b; --cta:#122559;
      --accent:#5ebe31; --bg:#ffffff; --soft:#e6edf3;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      color:var(--fg); background:var(--bg); line-height:1.55;
      /* Sfondo pagina: immagine + velo bianco che schiarisce */
      background:
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
        url("../image/background.jpg");
      background-position:center top; background-size:cover;
      background-repeat:no-repeat; background-attachment:fixed;
    }
    a{color:inherit;text-decoration:none}

    /* Topbar */
    .topbar{ background:var(--nav); color:#fff; font-size:14px; }
    .topbar .container{ max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; justify-content:flex-end; }
    .topbar a{color:#fff; opacity:.95}

    /* Nav */
    .nav{border-bottom:1px solid var(--soft); background:#fff; position:sticky; top:0; z-index:9}
    .menu{max-width:1200px; margin:0 auto; padding:14px 16px; display:flex; gap:28px; justify-content:flex-end}
    .menu a{letter-spacing:.04em; text-transform:uppercase; color:#6d7480; font-weight:600}
    .menu a:hover{color:var(--fg)}

    /* Logo */
    .logo{max-width:1200px; margin:0 auto; padding:18px 16px}
    .logo img{max-width:420px; height:auto; display:block}

    /* Hero */
    .hero-wrap{
      position:relative; overflow:hidden;
      max-width:1200px; margin:0 auto; padding:40px 16px 24px;
      min-height:420px;
      display:grid; grid-template-columns: 1.1fr 0.9fr; gap:24px; align-items:center;
      /* Background hero soft + supporto parallasse */
      /*background:
        linear-gradient(rgba(255,255,255,.60), rgba(255,255,255,.60)),
        url("../image/background.jpg") right center / contain no-repeat;*/
      will-change: background-position;
    }
    h1{
      font-size: clamp(34px, 5vw, 56px);
      line-height:1.08; margin:0 0 12px 0; font-weight:800; color:#0f2550;
      letter-spacing: -0.02em;
    }
    h8{
      font-size: clamp(34px, 5vw, 56px);
      line-height:1.08; margin:0 0 12px 0; font-weight:800; color:#5ebe31;
      letter-spacing: -0.02em;
    }
    /* h1 più piccoli (lasciati come li avevi) */
    .h1-sm { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; }
    .h1-xs { font-size: clamp(22px, 2.6vw, 36px); line-height: 1.12; }

    .accent{color:var(--accent)}
    .lead{font-size:18px; color:var(--muted); margin:0 0 22px 0}
    .btn{
      display:inline-block; padding:14px 22px; border-radius:999px;
      background:var(--cta); color:#fff; font-weight:700; border:1px solid var(--cta);
      transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, opacity .5s ease;
    }
    .btn:hover{opacity:.92; transform: translateY(-2px)}

    .hero-art{ width:100%; height:auto; display:block; image-rendering:auto; }

    /* Sezioni */
    .section{padding:42px 16px}
    .container{max-width:1200px; margin:0 auto}
    .grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
    .card{border:1px solid var(--soft); border-radius:14px; padding:16px; background:#fff; transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, opacity .5s ease}
    .card:hover{ transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,.08); }
    .card img{width:100%; height:auto; display:block; border-radius:10px}
    .split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
    .hr{height:1px;background:var(--soft);margin:22px 0}
    .alt{background:#f7fafc}
    .center{text-align:center}
    img.resp{width:100%;height:auto;display:block;border-radius:12px}

    /* Split CTA */
    .split-cta{
      max-width:1200px; margin:0 auto; padding:40px 16px;
      display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
    }
    .split-cta .panel{text-align:center;}
    .split-cta .line{height:1px; background:#e6edf3; border:0; margin:0 0 28px 0;}
    .split-cta h1{
      font-size:clamp(32px,4vw,56px);
      color:#0f2550; margin:0 0 22px 0; font-weight:800; letter-spacing:-0.02em;
    }
    .split-cta p{max-width:820px; margin:0 auto 54px; font-size:clamp(18px,1.5vw,22px); color:#122559; line-height:1.45;}
    .btn-pill{
      display:inline-block; padding:18px 30px; border-radius:9999px; font-size:22px;
      border:1.6px solid var(--nav); font-weight:700;
      transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, opacity .5s ease;
    }
    .btn-pill.primary{ background:var(--nav); color:#fff; }
    .btn-pill.outline{ background:#fff; color:var(--nav); }
    .btn-pill:hover{ opacity:.92; transform: translateY(-2px); }

    footer{border-top:1px solid var(--soft); padding:18px 16px; color:var(--muted); font-size:14px}
    footer .container{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

    @media (max-width: 900px){
      .hero-wrap{grid-template-columns:1fr; min-height:auto; padding-top:28px}
      .grid3{grid-template-columns:1fr}
      .split{grid-template-columns:1fr}
      .split-cta{ grid-template-columns:1fr; gap:48px; padding:28px 16px; }
      .menu{justify-content:center}
      .logo{display:flex; justify-content:center}
      .logo img{max-width:320px}
    }

    /* ===== Effetti transizionali (boost) ===== */
    .accent { display:inline-block; transform: translateY(.6em); opacity:0;
      transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease; }
    .accent.is-in { transform:none; opacity:1; }

    .hero-art { transform: translateY(20px) scale(.97); opacity:0; }
    .hero-in   { transform:none; opacity:1; }

    .reveal { opacity:0; transform: translateY(26px);
      transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
    .reveal.in { opacity:1; transform:none; }

    .reveal[data-reveal="scale"]    { transform: scale(.96); }
    .reveal[data-reveal="scale"].in { transform: none; }
    .reveal[data-reveal="left"]     { transform: translateX(-28px); }
    .reveal[data-reveal="right"]    { transform: translateX(28px); }