:root{
      /* ======= SOLO PALETTE: blu #8ca2c9 / #627da6 ======= */
      --blue-900:#000000; 
      --blue-800:#627da6; 
      --blue-700:#627da6; 
      --blue-500:#8ca2c9; 
      --blue-300:#8ca2c9; 
      --blue-100:#8ca2c9;
      --accent:#8ca2c9; 
      --bg:#ffffff; 
      --text:#0f172a; 
      --muted:#475569; 
      --shadow:0 10px 30px rgba(16,24,40,.08); 
      --radius:16px;
      --space-1:8px; 
      --space-2:12px; 
      --space-3:16px;
      --space-4:clamp(16px,1.8vw,24px);
      --space-5:clamp(20px,2.2vw,32px);
      --space-6:clamp(32px,3.5vw,48px);
      --space-7:clamp(48px,6vw,80px);
      --space-8:clamp(56px,8vw,96px);
    }
    *{ box-sizing:border-box } html{ scroll-behavior:smooth }
    body{ margin:0; font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Noto Sans",sans-serif; color:var(--text); background:var(--bg); line-height:1.55; }
    em,i{ font-style:italic } strong,b{ font-weight:700 } a{ color:inherit; text-decoration:none }
    .container{ width:min(1160px,92%); margin:0 auto }

    /* Header */
    .header{ position:sticky; top:0; background:rgba(255,255,255); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid #e2e8f0; z-index:50 }
    .header .inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; min-height:64px }
    .logo{ display:flex; align-items:center; gap:12px; color:var(--blue-900); letter-spacing:.1px; }
    .logo img{ display:block; height:55px; width:auto; max-width:500px }
    .logo .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
    .nav ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; align-items:center }
    .nav li{ display:flex; align-items:center }
    .nav a{ color:#0f172a; opacity:.9; display:inline-flex; align-items:center }
    .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid transparent; font-weight:700 }
    .btn.primary{ background:var(--accent); color:var(--blue-900) }
    .btn.ghost{ background:transparent; border-color:#cbd5e1; color:#0f172a }
    .menu-toggle{ display:none }

    @media (max-width:960px){
      .header .inner{ flex-wrap:wrap }
      
     
.menu-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid #cbd5e1; background:white; border-radius:12px; padding:8px 12px; order:2; }
      .logo{ order:1 }
      .logo img{ height:70px;}
      .nav{ order:3; width:100%; display:none; position:static; background:white; border-top:1px solid #e2e8f0; padding:12px 0; }
      .nav.open{ display:block } .nav ul{ flex-direction:column; gap:12px; align-items:flex-start } .nav a{ font-size:1.02rem; padding:6px 0 }
    }

    /* Hero */
    .hero{ background:linear-gradient(180deg,var(--blue-700),var(--blue-900)); color:white; padding:var(--space-8) 0 var(--space-6) }
    .hero .grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-5); align-items:center }
    .hero h1{ font-size:clamp(2rem,3.2vw,3.1rem); line-height:1.1; margin:0 0 10px; letter-spacing:-.02em }
    .hero p{ font-size:clamp(1.02rem,1.2vw,1.18rem); opacity:.95; margin:0; max-width:60ch }
    .hero .actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap }
    .hero .illustration{ background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius); height:320px; display:grid; place-items:center }
    @media (max-width:960px){
      .hero .grid{ grid-template-columns:1fr }
      
     
.hero .illustration{ display:none; } /* NASCOSTA SOLO DA MOBILE */
    }

    .badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:white; padding:8px 10px; border-radius:999px; font-size:.875rem }

    /* ===== Intro centrata + feature (SEZIONE RICOSTRUITA) ===== */
    .logo-cloud{ background:white; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; padding:calc(var(--space-7) + 10px) 0 }
    .kv-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,48px); align-items:start; margin-bottom:clamp(28px,4.5vw,44px); }
    .kv-title{ font-size:clamp(1.8rem,2.4vw,2.2rem); line-height:1.15; margin:0 0 10px; color:#0f172a; font-weight:900; letter-spacing:.01em }
    .kv-sub{ color:var(--muted); margin:0 0 16px; max-width:60ch; }
    .kv-accent{ color:var(--blue-700); }
    .kv-actions{ margin-top:10px; display:flex; gap:12px; flex-wrap:wrap }
    .kv-right{ display:flex; flex-direction:column; gap:18px }
    .kv-item{ display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start }
    .kv-ico{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--blue-100); color:var(--blue-700); border:1px solid #8ca2c9 }
    .kv-item h3{ margin:2px 0 4px; font-size:1.03rem; color:#0f172a }
    .kv-item h3 .kv-accent{ font-weight:800 }
    .kv-item p{ margin:0; color:#334155 }
    @media (max-width:960px){ .kv-hero{ grid-template-columns:1fr } 
     
}

    /* Titolo risultati */
    .results-title{
      margin:36px auto 12px;
      text-align:center;
      font-size:clamp(1.8rem,2.8vw,2.5rem);
      color:#0f172a;
      letter-spacing:.02em;
      font-weight:800;
      line-height:1.15;
    }

    /* ===== BLOCCO RISULTATI (stile band come screenshot) ===== */
    .kv-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .kv-metric{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px; text-align:center; box-shadow:0 6px 18px rgba(16,24,40,.06) }
    .kv-metric-value{ font-size:clamp(2rem,3.2vw,2.8rem); font-weight:900; color:#0f172a; line-height:1; margin:0 0 6px; letter-spacing:.01em; font-variant-numeric:tabular-nums }
    .kv-metric-title{ font-weight:800; color:var(--blue-700); margin:0 0 4px }
    .kv-metric-desc{ color:#334155; margin:0; font-size:.98rem }
    @media (max-width:1024px){ .kv-metrics{ grid-template-columns:repeat(2,1fr) } }
    @media (max-width:560px){ .kv-metrics{ grid-template-columns:1fr } }

    /* ====== (ORIGINALE) RISULTATI CON GRAFICO ====== */
    .pv-offscreen{
      position:absolute !important; width:1px !important; height:1px !important;
      overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
      border:0 !important; padding:0 !important; margin:-1px !important;
    }

    .pv-results{
      --pv-accent: 98,125,166;               /* nuovo accento (prima: 234,88,12) */
      --pv-hex-0:#627da6; --pv-rgb-0:98,125,166;   
      --pv-hex-1:#8ca2c9; --pv-rgb-1:140,162,201;  
      --pv-hex-2:#8ca2c9; --pv-rgb-2:140,162,201; 
      --pv-hex-3:#627da6; --pv-rgb-3:98,125,166;  
      --pv-sec-h: clamp(380px, 36vw, 480px);
    }
    .pv-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 6px 18px rgba(16,24,40,.06); padding:22px; display:flex; flex-direction:column; gap:18px }
    .pv-card-unified{ background:
      radial-gradient(140% 120% at 60% -10%, rgba(98,125,166,.06), transparent 55%),
      linear-gradient(180deg,#fff 0%, #f5f8ff 100%); }

    .pv-head{ display:flex; flex-direction:column; gap:8px }
    .pv-metric-title{ margin:0; font-weight:900; font-size:clamp(1.9rem,3.2vw,2.45rem); line-height:1; color:#0f172a; font-variant-numeric:tabular-nums; transition:opacity .25s ease }
    .pv-metric-title.is-fading{ opacity:.35 }
    .pv-meter{ height:6px; background:#eef2f7; border-radius:999px; overflow:hidden; width:100%; box-shadow: inset 0 1px 2px rgba(15,23,42,.08) }
    .pv-meter>span{ display:block; height:100%; width:0%; border-radius:999px; transition:width .6s cubic-bezier(.22,1,.36,1), background .2s ease; background:linear-gradient(90deg,#627da6,#8ca2c9); box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 6px 14px rgba(2,6,23,.08) }

    .pv-dots{ display:flex; justify-content:center; gap:10px; margin-top:2px }
    .pv-dot{ width:8px; height:8px; border-radius:999px; background:#cbd5e1; cursor:pointer; transition:transform .2s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease }
    .pv-dots .pv-dot:nth-child(1).is-active{ background:var(--pv-hex-0); box-shadow:0 0 0 4px rgba(var(--pv-rgb-0),.18) }
    .pv-dots .pv-dot:nth-child(2).is-active{ background:var(--pv-hex-1); box-shadow:0 0 0 4px rgba(var(--pv-rgb-1),.18) }
    .pv-dots .pv-dot:nth-child(3).is-active{ background:var(--pv-hex-2); box-shadow:0 0 0 4px rgba(var(--pv-rgb-2),.18) }
    .pv-dots .pv-dot:nth-child(4).is-active{ background:var(--pv-hex-3); box-shadow:0 0 0 4px rgba(var(--pv-rgb-3),.18) }
    .pv-dot.is-active{ transform:scale(1.15); opacity:.95 }

    .pv-unigrid{
      display:grid;
      grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
      gap:22px;
      align-items:stretch;
    }
    .pv-chart-cell, .pv-captions-cell{
      height:var(--pv-sec-h);
      display:flex; flex-direction:column;
    }

    .pv-chart-wrap{
      position:relative;
      flex:1 1 auto;
      height:100%;
      display:grid; place-items:center;
      border:none; border-radius:14px; overflow:hidden;
      background:radial-gradient(120% 120% at 60% 20%, #f5f8ff 0%, #ffffff 60%);
      box-shadow:
        0 0 0 1px rgba(16,24,40,.04) inset,
        0 22px 40px rgba(var(--pv-accent), .10),
        0 10px 22px rgba(2,6,23,.06);
      margin:0 auto;
      width:100%;
    }
    .pv-chart-wrap::after{
      content:''; position:absolute; inset:0; pointer-events:none; border-radius:14px;
      background:
        radial-gradient(90% 55% at 40% 0%, rgba(var(--pv-accent), .16), transparent 60%),
        radial-gradient(60% 60% at 80% 20%, rgba(var(--pv-accent), .10), transparent 65%);
    }
    #pv-area-chart{ width:100%; height:100%; min-height:280px }

    .pv-captions-scroll{ flex:1 1 auto; padding-right:0; display:block; }
    .pv-captions-list{ display:flex; flex-direction:column; gap:12px; width:100%; }

    .pv-caption-item{
      position:relative;
      display:flex; gap:14px; align-items:flex-start;
      border-radius:14px; padding:14px 14px;
      background:linear-gradient(180deg,#ffffff 0%, #f5f8ff 100%);
      border:1px solid #e5e7eb;
      transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease, filter .2s ease;
      will-change:transform;
      isolation:isolate;
    }
    .pv-captions-list .pv-caption-item{ --pv-item-hex: var(--pv-hex-2); --pv-item-rgb: var(--pv-rgb-2); }
    .pv-captions-list .pv-caption-item:nth-child(1){ --pv-item-hex: var(--pv-hex-0); --pv-item-rgb: var(--pv-rgb-0); }
    .pv-captions-list .pv-caption-item:nth-child(2){ --pv-item-hex: var(--pv-hex-1); --pv-item-rgb: var(--pv-rgb-1); }
    .pv-captions-list .pv-caption-item:nth-child(3){ --pv-item-hex: var(--pv-hex-2); --pv-item-rgb: var(--pv-rgb-2); }
    .pv-captions-list .pv-caption-item:nth-child(4){ --pv-item-hex: var(--pv-hex-3); --pv-item-rgb: var(--pv-rgb-3); }

    .pv-caption-item::before{
      content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none;
      padding:1px;
      background:linear-gradient(145deg, rgba(var(--pv-item-rgb), .28), rgba(var(--pv-item-rgb), .06));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity:.6; transition:opacity .25s ease, filter .25s ease;
    }
    .pv-caption-item::after{
      content:''; position:absolute; inset:-10px; border-radius:18px; pointer-events:none;
      background:radial-gradient(70% 70% at 50% 50%, rgba(var(--pv-item-rgb),.16), transparent 70%);
      filter: blur(12px); opacity:0; transition:opacity .25s ease, filter .25s ease;
    }
    .pv-caption-item:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(2,6,23,.06); border-color:#dfe3ea }
    .pv-caption-item:hover::before{ opacity:.9 }
    .pv-caption-item.active{
      border-color: rgba(var(--pv-item-rgb), .42);
      background:linear-gradient(180deg, rgba(var(--pv-item-rgb), .06), #ffffff 60%);
      box-shadow:0 12px 24px rgba(16,24,40,.08), 0 0 0 2px rgba(var(--pv-item-rgb), .10) inset;
    }
    .pv-caption-item.active::before{ opacity:1; filter:saturate(1.05) }
    .pv-caption-item.active::after{ opacity:1 }

    .pv-caption-icon{
      width:44px; height:44px; flex:0 0 44px; border-radius:12px; display:grid; place-items:center;
      background:rgba(var(--pv-item-rgb), .10); border:1px solid rgba(var(--pv-item-rgb), .30);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
      color: var(--pv-item-hex);
    }
    .pv-caption-icon svg{ width:22px; height:22px; }

    .pv-caption-body{ flex:1 1 auto; min-width:0 }
    .pv-caption-top{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:6px 12px; margin-bottom:4px; }
    .pv-caption-title{ margin:0; font-size:1.04rem; font-weight:800; color:#0f172a; line-height:1.25 }
    .pv-caption-perc{ font-weight:900; color:var(--pv-item-hex); font-variant-numeric:tabular-nums; text-align:right; min-width:5ch; letter-spacing:.02em }
    .pv-caption-text{ margin:0; color:#334155; line-height:1.45 }
    .pv-caption-item.inactive{ opacity:.96 }

    /* Sezioni generiche */
    .section{ padding:calc(var(--space-7) + 10px) 0 }
    .kicker{ text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:700; color:var(--blue-500) }
    .title{ font-size:clamp(1.6rem,2.2vw,2.2rem); margin:8px 0 8px }
    .lead{ color:var(--muted); max-width:120ch; margin:0 } 

    /* Cards generiche */
    .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px }
    .card{ background:white; border:1px solid #e2e8f0; border-radius:16px; padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px }
    .card .icon{ width:42px; height:42px; border-radius:10px; background:var(--blue-100); display:flex; align-items:center; justify-content:center; color:var(--blue-700) }
    .card ul{ margin:0 0 0 18px; color:#334155 }
    .card a.cta-link{ margin-top:auto }
    .card a.cta-link.btn{ display:flex; justify-content:center; width:100%; text-align:center }
    @media (max-width:1200px){ .cards{ grid-template-columns:repeat(2,1fr) } }
    @media (max-width:960px){ .cards{ grid-template-columns:1fr } 
     
}

    /* Come funziona */
    .split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; margin-top:24px }
    .split .illustration{ height:300px; border-radius:16px; border:1px solid #e2e8f0; background:linear-gradient(180deg,var(--blue-100),#fff); display:grid; place-items:center; color:var(--blue-700) }
    .split h3{ margin:0 0 8px }
    @media (max-width:960px){ .split{ grid-template-columns:1fr } 
     
}

    .how-icon { width:100%; max-width:470px; aspect-ratio: 45 / 25; border-radius:14px; }
    .how-icon img{ width:100%; height:100%; object-fit:contain; display:block }

    /* CTA finale */
    .cta-band{ background:linear-gradient(180deg,var(--blue-700),var(--blue-900)); color:white; border-radius:16px; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:16px }
    .cta-band h3{ margin:0 }
    @media (max-width:960px){ .cta-band{ flex-direction:column; align-items:flex-start } 
     
}

    /* Footer */
    .footer{ background:#627da6; color:#eaf0fb; padding:48px 0; margin-top:var(--space-7) }
    .footer a{ color:#eaf0fb }
    .footer .cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px }
    .footer .brand{ color:white; font-weight:800; font-size:1.1rem }
    @media (max-width:960px){ .footer .cols{ grid-template-columns:1fr 1fr } 
     
}

    /* ========= Soluzioni (2x2) ========= */
    .section.solutions-band{ background:linear-gradient(180deg,var(--blue-700),var(--blue-900)); color:white; padding:calc(var(--space-8) + 10px) 0; min-height:clamp(560px,72vh,900px); position:relative; overflow:hidden; scroll-margin-top:90px; }
    .section.solutions-band .kicker{ color:var(--blue-100) } .section.solutions-band .title{ color:#fff } .section.solutions-band .lead{ color:rgba(255,255,255,.92) }
    .solutions-3d{ display:flex; flex-direction:column; gap:16px }
    .cards-3d{ display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:32px 28px; align-items:stretch; margin-top:22px; overflow:visible }
    @media (max-width:980px){ .cards-3d{ grid-template-columns:1fr; gap:22px } }

    .box{ --card-accent:var(--blue-500); position:relative; width:100%; min-height:360px; display:flex; justify-content:center; align-items:center; padding:8px; transition:transform .35s ease, filter .35s ease; will-change:transform; isolation:isolate }
    .box:hover{ transform:translateY(-3px) }
    .box::before,.box::after{ content:''; position:absolute; inset:8px 18% 8px 18%; border-radius:12px; transform:skewX(10deg); transition:.45s ease; z-index:0 }
    .box::after{ filter:blur(24px); opacity:.85 }
    .box:hover::before,.box:hover::after{ inset:8px 12% 8px 12%; transform:skewX(0) }
    .cards-3d .box:nth-child(1){ --card-accent:#8ca2c9 } 
    .cards-3d .box:nth-child(2){ --card-accent:#8ca2c9 }
    .cards-3d .box:nth-child(3){ --card-accent:#8ca2c9 }
    .cards-3d .box:nth-child(4){ --card-accent:#8ca2c9 }
    .cards-3d .box:nth-child(1)::before,.cards-3d .box:nth-child(1)::after{ background:linear-gradient(315deg,#8ca2c9,#627da6) } 
    .cards-3d .box:nth-child(2)::before,.cards-3d .box:nth-child(2)::after{ background:linear-gradient(315deg,#627da6,#8ca2c9) }
    .cards-3d .box:nth-child(3)::before,.cards-3d .box:nth-child(3)::after{ background:linear-gradient(315deg,#8ca2c9,#627da6)  }
    .cards-3d .box:nth-child(4)::before,.cards-3d .box:nth-child(4)::after{ background:linear-gradient(315deg,#627da6,#8ca2c9) }

    .box>span{ position:absolute; inset:0; z-index:1; pointer-events:none; display:block }
    .box>span::before,.box>span::after{ content:''; position:absolute; border-radius:12px; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); box-shadow:0 5px 15px rgba(0,0,0,.08); opacity:0; transition:.45s ease; animation:solutions-float 2.2s ease-in-out infinite }
    .box>span::before{ top:8px; left:8px; width:0; height:0 } .box>span::after{ bottom:8px; right:8px; width:0; height:0; animation-delay:-1.1s }
    .box:hover>span::before,.box:hover>span::after{ width:88px; height:88px; opacity:1 }
    @keyframes solutions-float{ 0%,100%{ transform:translateY(6px) } 50%{ transform:translate(-6px) } }
    @media (prefers-reduced-motion:reduce){ .box,.box::before,.box::after,.box>span::before,.box>span::after{ transition:none; animation:none } }

    .content{ position:relative; z-index:2; padding:26px 28px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); border-radius:14px; box-shadow:0 5px 15px rgba(0,0,0,.18); color:#fff; width:100%; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease }
    .box:hover .content{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.28); border-color:rgba(255,255,255,.32) }
    .content .icon{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.24); margin-bottom:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
    .content h3{ font-size:1.5rem; margin:6px 0 8px; color:#fff } .content p{ margin:0 0 10px; color:rgba(255,255,255,.92) } .content ul{ margin:0 0 0 18px; color:rgba(255,255,255,.9) }
    .content a.btn.primary{ background:#fff; color:#111; border-color:transparent; margin-top:6px; transition:background .25s ease,color .25s ease,box-shadow .25s ease }
    .content a.btn.primary:hover{ background:var(--card-accent); color:#0f172a; box-shadow:0 1px 16px rgba(0,0,0,.22) }

    /* Biscotto */
    .cookie-fab{ position:fixed; bottom:max(16px,env(safe-area-inset-bottom)); left:max(16px,env(safe-area-inset-left)); right:auto; z-index:9999; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; border:1px solid rgba(15,23,42,.08); background:#fff; box-shadow:0 8px 24px rgba(2,6,23,.12); color:#0f172a; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease }
    .cookie-fab:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(2,6,23,.16) } .cookie-fab:active{ transform:translateY(0) }
    .cookie-fab:focus-visible{ outline:2px solid #8ca2c9; outline-offset:3px }
    .cookie-fab .hint{ position:absolute; left:66px; bottom:50%; transform:translateY(50%); background:#627da6; color:#fff; padding:6px 10px; border-radius:10px; font-size:.8rem; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:opacity .2s ease }
    .cookie-fab:hover .hint{ opacity:.95 }
@media (max-width:640px){
  .cookie-fab{ width:52px; height:52px; bottom:12px; left:12px }
  .cookie-fab .hint{ display:none }
}

     
     
     /* ====== Contact form band ====== */
     .contact-band{
       background:
         radial-gradient(1100px 420px at 0% 0%, rgba(98,125,166,.06), transparent 60%),
         radial-gradient(1100px 420px at 100% 100%, rgba(140,162,201,.08), transparent 60%);
     }
     .contact-grid{
       display:grid;
       grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
       gap:clamp(24px,3vw,40px);
       align-items:stretch;
     }
     .contact-copy--full{
       grid-column:1/-1;
     }
     .contact-copy .title{
       margin-top:6px;
       margin-bottom:10px;
     }
     .contact-lead{
       margin-top:6px;
       margin-bottom:12px;
     }
     .contact-points{
       list-style:none;
       margin:16px 0 0;
       padding:0;
       display:flex;
       flex-direction:column;
       gap:8px;
       color:#334155;
       max-width:52ch;
       font-size:.96rem;
     }
     .contact-points li::before{
       content:"\a7";
       margin-right:6px;
       color:var(--blue-700);
       font-weight:900;
     }

     .contact-form-card{
       background:#ffffff;
       border-radius:var(--radius);
       border:1px solid #e2e8f0;
       box-shadow:var(--shadow);
       padding:20px 22px 18px;
       position:relative;
       overflow:hidden;
     }
     .contact-form-card--full{
       grid-column:1/-1;
     }
     
     
     
     .contact-form-card::before{
       content:'';
       position:absolute;
       inset:-50% -40% auto auto;
       background:radial-gradient(120% 80% at 100% 0%, rgba(98,125,166,.16), transparent 60%);
       opacity:.75;
       pointer-events:none;
     }
     .contact-form-header{
       position:relative;
       display:flex;
       align-items:flex-start;
       gap:12px;
       margin-bottom:14px;
       z-index:1;
     }
     .contact-form-header-icon{
       width:40px;
       height:40px;
       border-radius:999px;
       display:flex;
       align-items:center;
       justify-content:center;
       background:rgba(140,162,201,.18);
       color:var(--blue-700);
       border:1px solid rgba(140,162,201,.6);
     }
     .contact-form-title{
       margin:0;
       font-size:1.1rem;
       color:#0f172a;
       font-weight:800;
     }
     .contact-form-subtitle{
       margin:3px 0 0;
       font-size:.9rem;
       color:#475569;
     }

     .contact-form{
       position:relative;
       z-index:1;
       display:flex;
       flex-direction:column;
       gap:14px;
     }
     .contact-form--steps{
       gap:16px;
     }
     .contact-stepper{
       display:flex;
       align-items:center;
       gap:12px;
       font-size:.85rem;
       color:#475569;
     }
     .contact-stepper-bar{
       flex:1;
       height:6px;
       border-radius:999px;
       background:#e2e8f0;
       overflow:hidden;
     }
     .contact-stepper-bar span{
       display:block;
       height:100%;
       width:25%;
       background:linear-gradient(90deg, rgba(98,125,166,.9), rgba(27,119,189,.95));
       transition:width .2s ease;
     }
     .contact-step{
       display:none;
     }
     .contact-step.is-active{
       display:block;
     }
     .contact-question{
       margin:0 0 10px;
       font-weight:700;
       color:#0f172a;
     }
     .contact-options{
       display:grid;
       grid-template-columns:repeat(2,minmax(0,1fr));
       gap:10px;
     }
     .option-card{
       display:flex;
       align-items:center;
       gap:8px;
       padding:10px 12px;
       border-radius:12px;
       border:1px solid #cbd5e1;
       background:#fff;
       cursor:pointer;
       font-weight:600;
       color:#0f172a;
       transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
     }
     .option-card input{
       margin:0;
     }
     .option-card.is-selected{
       border-color:var(--blue-500);
       box-shadow:0 0 0 2px rgba(98,125,166,.18);
       background:#f8fafc;
     }
     .contact-step-actions{
       margin-top:12px;
       display:flex;
       gap:10px;
       flex-wrap:wrap;
     }
     .contact-helper{
       margin:6px 0 0;
       font-size:.84rem;
       color:#64748b;
     }
     .contact-error{
       margin:6px 0 0;
       font-size:.84rem;
       color:#b45309;
     }
     .contact-error[hidden]{
       display:none;
     }

     .contact-form-grid{
       display:grid;
       grid-template-columns:repeat(2,minmax(0,1fr));
       gap:12px 18px;
     }
     .form-field{
       display:flex;
       flex-direction:column;
       gap:6px;
     }
     .form-field.field-full{
       grid-column:1/-1;
     }
     .field-label{
       display:inline-flex;
       align-items:center;
       gap:6px;
       font-size:.9rem;
       font-weight:600;
       color:#0f172a;
     }
     .field-label-icon{
       display:inline-flex;
       align-items:center;
       justify-content:center;
       width:18px;
       height:18px;
       border-radius:6px;
       background:rgba(140,162,201,.16);
       color:var(--blue-700);
       font-size:.72rem;
     }
     .contact-form input[type="text"],
     .contact-form input[type="email"],
     .contact-form input[type="tel"],
     .contact-form input[type="date"],
     .contact-form input[type="time"],
     .contact-form input[type="datetime-local"],
     .contact-form textarea{
       border-radius:10px;
       border:1px solid #cbd5e1;
       padding:9px 11px;
       font-size:.95rem;
       font-family:inherit;
       color:#0f172a;
       background:#ffffff;
       transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
     }
     .contact-form textarea{
       resize:vertical;
       min-height:120px;
     }
     .contact-form input::placeholder,
     .contact-form textarea::placeholder{
       color:#9ca3af;
     }
     .contact-form input:focus,
     .contact-form textarea:focus{
       outline:none;
       border-color:var(--blue-500);
       box-shadow:0 0 0 1px rgba(140,162,201,.5), 0 0 0 4px rgba(140,162,201,.22);
       background:#ffffff;
     }

     .contact-form-footer{
       margin-top:6px;
       display:flex;
       flex-direction:column;
       gap:10px;
     }
     .checkbox-field{
       display:flex;
       align-items:flex-start;
       gap:8px;
       font-size:.85rem;
       color:#475569;
     }
     .checkbox-field input[type="checkbox"]{
       margin-top:2px;
       width:16px;
       height:16px;
       border-radius:4px;
       border:1px solid #cbd5e1;
     }
     .checkbox-field a{
       text-decoration:underline;
     }
     .contact-form-footer .btn{
       align-self:flex-start;
     }
     .contact-form-note{
       margin:2px 0 0;
       font-size:.8rem;
       color:#64748b;
     }

     @media (max-width:960px){
       .contact-grid{
         grid-template-columns:1fr;
       }
     .contact-copy--full{
       grid-column:1/-1;
     }
     }
     @media (max-width:640px){
       .contact-options{
         grid-template-columns:1fr;
       }
       .contact-form-grid{
         grid-template-columns:1fr;
       }
       .contact-form-card{
         padding:18px 16px 16px;
       }
     
     
     
     }
/* ===== Sezione integrazioni: "Fallo comunicare con..." ===== */
    .integrations-section{
      background:#f1f5f9;
    }
    .integrations-head{
      display:flex;
      flex-direction:column;
      gap:4px;
      margin-bottom:var(--space-4);
      text-align:left;
    }
    .integrations-grid{
      margin-top:var(--space-3);
    }
    .integration-card{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .integration-media{
      border-radius:12px;
      background:linear-gradient(135deg,rgba(148,163,184,.16),rgba(148,163,184,.04));
      padding:10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .integration-media img{
      max-height:120px;
      width:auto;
      display:block;
    }
    .integration-tag{
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--blue-700);
      font-weight:700;
    }
    .integration-title{
      margin:2px 0 0;
      font-size:1.02rem;
      color:#0f172a;
    }
    .integration-desc{
      margin:0;
      color:#475569;
      font-size:.95rem;
    }
    .integration-link{
      margin-top:auto;
      font-size:.92rem;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--blue-700);
    }
    .integration-link svg{
      width:16px;
      height:16px;
    }
     
  









@media (max-width: 640px) {
  .f-certifications h4,
  .footer-certifications h4 {
    text-align: center;
    width: 100%;
  }
  .f-certifications .cert-logos,
  .footer-certifications {
    flex-direction: column;
    align-items: center;
  }
  .f-certifications .cert-logo-slot,
  .footer-certifications .cert-logo-slot {
    width: 200px;
    max-width: 100%;
    justify-content: center;
  }
  .f-certifications .cert-project,
  .footer-certifications .cert-project {
    margin-left: 0 !important;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .f-certifications .cert-project > div:last-child,
  .footer-certifications .cert-project > div:last-child {
    width: 100% !important;
    max-width: 220px;
    height: auto !important;
    padding: 6px;
  }
  .f-certifications .cert-project img,
  .footer-certifications .cert-project img {
    max-width: 100%;
    height: auto !important;
  }
}

@media (max-width: 640px) {
  .footer .cols{ grid-template-columns:1fr; }
  .footer .cols > div{ width:100%; }
}

@media (max-width: 960px) {
  .nav a.btn svg {
    margin-right: 8px;
  }
}