/* Hero IlarIA v3 — eleganza SendApp, palette Diskover */
:root { --azzurro:#2E9FE6; --azzurro2:#1273B8; --giallo:#F5A623; --antracite:#26262B;
        --bordo:#E3E9F0; --testo:#5C6470; --verde:#128C7E; --ok:#16A34A; }
* { margin:0; box-sizing:border-box; }
body { font-family:'Outfit',sans-serif; color:var(--antracite); background:#FBFCFE; }

.testata { display:flex; justify-content:space-between; align-items:center;
           padding:20px 6vw; background:#FFF; }
.marchio { font-size:27px; font-weight:800; letter-spacing:-.02em; }
.marchio span { color:var(--azzurro); }
.menu { display:flex; gap:30px; }
.menu a { font-size:15px; font-weight:500; color:var(--antracite); text-decoration:none; }
.menu a::after { content:" \2304"; font-size:11px; color:#98A2B3; }
.menu a:nth-child(4)::after, .menu a:nth-child(5)::after { content:""; }
.menu a:hover { color:var(--azzurro); }
.testata-azioni { display:flex; gap:12px; align-items:center; }
.accedi { font-size:15px; font-weight:600; color:var(--antracite); text-decoration:none;
          border:1px solid var(--bordo); border-radius:12px; padding:11px 24px; background:#FFF; }
.prova { font-size:15px; font-weight:700; color:#FFF; text-decoration:none;
         background:linear-gradient(135deg,var(--azzurro),var(--azzurro2));
         border-radius:12px; padding:12px 26px;
         box-shadow:0 8px 20px rgba(46,159,230,.35); }

.hero { display:grid; grid-template-columns:minmax(380px,52%) minmax(0,1fr); align-items:center;
        gap:20px; padding:34px 6vw 70px; min-height:82vh; position:relative;
        background:
          radial-gradient(700px 520px at 74% 42%, rgba(46,159,230,.13), transparent 65%),
          radial-gradient(520px 420px at 92% 80%, rgba(245,166,35,.10), transparent 65%),
          linear-gradient(180deg,#FFF, #F6FAFD); }
.meta-badge { display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; }
.meta-badge svg { width:36px; height:20px; }
.meta-badge b { display:block; font-size:14px; font-weight:700; }
.meta-badge em { display:block; font-style:normal; font-size:12px; color:var(--testo); }
.meta-badge img { width:150px; height:auto; display:block; }
h1 { font-size:clamp(38px,4.2vw,58px); font-weight:800; line-height:1.04;
     letter-spacing:-.03em; margin-bottom:22px; }
h1 b { color:var(--azzurro); font-weight:800; }
.hero-break-mid { display:none; }
.payoff { font-size:18px; line-height:1.65; color:var(--testo); max-width:48ch; margin-bottom:30px; }
.payoff b { color:var(--antracite); }
.bottoni { display:flex; gap:14px; flex-wrap:wrap; }
.btn { display:inline-block; font-size:16px; font-weight:700; color:#FFF;
       background:linear-gradient(135deg,var(--azzurro),var(--azzurro2));
       border-radius:13px; padding:16px 36px; text-decoration:none;
       box-shadow:0 12px 28px rgba(46,159,230,.38); transition:transform .15s; }
.btn:hover { transform:translateY(-2px); }
.btn.secondario { color:var(--antracite); background:#FFF; border:1px solid var(--bordo);
                  box-shadow:0 6px 16px rgba(20,30,60,.07); }
.fiducia { display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; font-weight:500;
           color:var(--testo); margin-top:20px; }
.fiducia span::before { content:"\2713  "; color:var(--ok); font-weight:800; }

/* Scena: tutto ancorato all'orbita del telefono, misure in px */
.scena { display:grid; place-items:center; min-height:620px; }
.orbita { position:relative; width:100%; max-width:700px; height:640px;
          display:grid; place-items:center; }
.fili { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.fili path { fill:none; stroke:rgba(46,159,230,.35); stroke-width:1.4px;
             stroke-dasharray:1 6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
/* Badge: cerchi pieni e colorati + notifiche galleggianti */
.badge { position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px;
         z-index:1; animation:galleggia 5.6s ease-in-out infinite; }
.badge .cerchio { display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
                  background:#FFF; box-shadow:0 14px 30px rgba(18,60,100,.14); }
.badge .cerchio i { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; }
.badge svg { width:24px; height:24px; stroke:#FFF; stroke-width:2; fill:none;
             stroke-linecap:round; stroke-linejoin:round; }
.cerchio i { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; }
.t1 i { background:linear-gradient(135deg,#2E9FE6,#1273B8); }
.t2 i { background:linear-gradient(135deg,#F5A623,#DB8B0B); }
.t3 i { background:linear-gradient(135deg,#7C5CFC,#5B3DF5); }
.t4 i { background:linear-gradient(135deg,#16A34A,#0E7A37); }
.t5 i { background:linear-gradient(135deg,#F26D6D,#D94848); }
.t6 i { background:linear-gradient(135deg,#0EA5A5,#0B7E7E); }
.badge label { font-size:12px; font-weight:600; color:var(--antracite); background:#FFF;
               border-radius:12px; padding:5px 13px; box-shadow:0 6px 16px rgba(18,60,100,.10);
               white-space:nowrap; }
@keyframes galleggia { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-11px); } }
/* posizioni dei badge: inline, in px dall'orbita */
.notifica { position:absolute; z-index:3; display:flex; align-items:center; gap:10px;
            background:#FFF; border-radius:14px; padding:11px 16px;
            box-shadow:0 16px 36px rgba(18,60,100,.16);
            animation:galleggia 6.4s ease-in-out infinite; }
.notifica .tondo { display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
                   background:#E7F6EC; color:var(--ok); font-weight:800; font-size:14px; }
.notifica b { display:block; font-size:12.5px; }
.notifica span { display:block; font-size:11px; color:var(--testo); }


/* Pillole */
.pillole { padding:56px 6vw 72px; }
.pillole > * { max-width:1220px; margin-left:auto; margin-right:auto; }
.pillole h2 { font-size:clamp(26px,2.8vw,38px); font-weight:800; letter-spacing:-.02em;
              text-align:center; margin-bottom:8px; }
.pillole .sotto { font-size:16px; color:var(--testo); text-align:center; margin-bottom:30px; }
/* Fascia claim: il posizionamento, su navy S.Me.Co. */
.claim { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
         padding:46px 6vw; text-align:center; }
.claim-testo { font-size:clamp(22px,2.6vw,34px); font-weight:500; color:#E8EDF5;
               letter-spacing:-.01em; }
.claim-testo b { color:#FFF; font-weight:800; }
.claim-testo b::after { content:""; display:inline; }
.claim-punti { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.claim-punti span { font-size:13.5px; font-weight:600; color:#D9E2EE;
                    border:1px solid rgba(255,255,255,.22); border-radius:20px;
                    padding:9px 20px; background:rgba(255,255,255,.05); }
.claim-punti span::before { content:"\2713  "; color:#F5A623; font-weight:800; }

/* Ambiti su fascia sabbia, card solide */
.pillole { background:#F4F1EA; }
.ambiti-griglia { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:20px; }
.ambito { background:#FFF; border:1.5px solid #E3DDD2; border-radius:18px;
          padding:28px 26px 24px; box-shadow:0 3px 0 #E9E4DA, 0 14px 28px rgba(60,50,30,.07);
          transition:transform .16s, box-shadow .16s, border-color .16s; }
.ambito:hover { transform:translateY(-4px); border-color:var(--azzurro);
                box-shadow:0 3px 0 rgba(46,159,230,.35), 0 22px 40px rgba(18,60,100,.14); }
.ambito .ic { display:grid; place-items:center; width:56px; height:56px; border-radius:15px;
              background:linear-gradient(145deg,#2E9FE6,#1273B8); margin-bottom:18px;
              box-shadow:0 8px 18px rgba(46,159,230,.35); }
.ambito:nth-child(even) .ic { background:linear-gradient(145deg,#F5A623,#DB8B0B);
                              box-shadow:0 8px 18px rgba(245,166,35,.35); }
.ambito svg { width:28px; height:28px; }
.ambito .tr { stroke:#FFF; stroke-width:1.9; fill:none;
              stroke-linecap:round; stroke-linejoin:round; }
.ambito:nth-child(even) .tr { stroke:#FFF; }
.ambito h3 { font-size:18.5px; font-weight:800; letter-spacing:-.01em; margin-bottom:8px;
             color:#1F2733; }
.ambito p { font-size:14.2px; line-height:1.6; color:#4C5563; }



/* Card ambiti: parlanti, con invito */
.ambito { display:block; text-decoration:none; color:inherit; position:relative; }
.ambito .scopri { display:inline-flex; align-items:center; gap:6px; margin-top:14px;
                  font-size:13.5px; font-weight:700; color:var(--azzurro2); }
.ambito .scopri b { transition:transform .18s; font-weight:700; }
.ambito:hover .scopri b { transform:translateX(4px); }
.ambito .ic { transition:transform .18s; }
.ambito:hover .ic { transform:scale(1.06); }


/* --- Hero scena estesa con alveare e ape regina --- */
.hero, .pillole, .orchestra, .funzioni2, .flusso-orchestrazione { isolation:isolate; }
.alveare-sfondo, .rete-comando { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.alveare-sfondo { z-index:0; opacity:.82; }
.alveare-sfondo .cella { fill:rgba(255,255,255,.42); stroke:rgba(46,159,230,.16); stroke-width:1.2; }
.alveare-sfondo .cella.oro { stroke:rgba(245,166,35,.22); }
.alveare-sfondo .cella-core { fill:rgba(46,159,230,.055); stroke:rgba(46,159,230,.28); stroke-width:1.8; }
.alveare-sfondo .halo { fill:none; stroke:rgba(46,159,230,.10); stroke-width:1; stroke-dasharray:4 10; animation:ruotaHalo 24s linear infinite; transform-origin:350px 318px; }
@keyframes ruotaHalo { to { transform:rotate(360deg); } }
.fili { opacity:.24; }
.rete-comando { z-index:1; overflow:visible; }
.rete-comando .link-comando { fill:none; stroke:rgba(46,159,230,.16); stroke-width:1.5; stroke-dasharray:3 8; stroke-linecap:round; transition:stroke .2s, stroke-width .2s, filter .2s, opacity .2s; }
.rete-comando .link-comando.attivo { stroke:#F5A623; stroke-width:2.4; stroke-dasharray:7 7; filter:url(#commandGlow); animation:scorreComando .72s linear infinite; opacity:1; }
@keyframes scorreComando { to { stroke-dashoffset:-28; } }
.queen-host { position:absolute; inset:0; z-index:6; pointer-events:none; }
.queen-host svg { width:100%; height:100%; overflow:visible; }
.queen-host [id^="q-"] { transform-box:fill-box; }
.queen-host #q-wingL, .queen-host #q-wingR, .queen-host #q-head, .queen-host #q-antennae,
.queen-host #q-abdomen, .queen-host #q-legs, .queen-host #q-eyes { transform-box:fill-box; }
.queen-host .smil-flap #q-wingL { animation:qflapL .12s ease-in-out infinite alternate; transform-origin:right center; }
.queen-host .smil-flap #q-wingR { animation:qflapR .12s ease-in-out infinite alternate; transform-origin:left center; }
@keyframes qflapL { from{transform:rotate(4deg)} to{transform:rotate(24deg)} }
@keyframes qflapR { from{transform:rotate(-4deg)} to{transform:rotate(-24deg)} }
.orbita .badge.attivo .cerchio { animation:badgePulse .7s ease-out; }
@keyframes badgePulse { 0% { filter:brightness(1); transform:scale(1); } 30% { filter:brightness(1.4); transform:scale(1.12); } 100% { filter:brightness(1); transform:scale(1); } }
.orbita .badge { width:64px; }
.orbita .badge .cerchio { position:relative; width:64px; height:64px; }
.orbita .badge .cerchio i { width:56px; height:56px; }
.orbita .badge svg { width:46px; height:44px; overflow:visible; }
.orbita .badge label { position:absolute; top:72px; left:50%; transform:translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .queen-host [id^="q-"] { animation:none !important; }
}

@media (max-width:980px) {
  .alveare-sfondo, .rete-comando, .queen-host { display:none; }
}


/* --- Hero pulita v2: telefono più realistico e scena alleggerita --- */
.scena-pulita { min-height:600px; }
.orbita-pulita { position:relative; width:100%; max-width:700px; height:620px; display:grid; place-items:center; }
.orbita-pulita .fili-puliti { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.orbita-pulita .fili-puliti path { fill:none; stroke:rgba(46,159,230,.18); stroke-width:1.8px; stroke-linecap:round; }
.orbita-pulita .fili-puliti path.attivo { stroke:#F5A623; stroke-width:2.6px; filter:drop-shadow(0 0 6px rgba(245,166,35,.35)); }
.orbita-pulita .badge { z-index:2; width:auto; animation:none; }
.orbita-pulita .badge.icon-only label { display:none; }
.orbita-pulita .badge .cerchio { width:62px; height:62px; border-radius:50%; clip-path:none; background:#FFF; box-shadow:0 12px 26px rgba(18,60,100,.14); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.orbita-pulita .badge .cerchio i { width:44px; height:44px; border-radius:50%; }
.orbita-pulita .badge svg { width:22px; height:22px; }
.orbita-pulita .badge.attivo .cerchio { transform:scale(1.12); box-shadow:0 16px 30px rgba(18,60,100,.18); filter:brightness(1.06); }
.orbita-pulita .notifica-soft { z-index:2; max-width:186px; padding:10px 14px; border-radius:16px; box-shadow:0 14px 28px rgba(18,60,100,.12); animation:none; }
.orbita-pulita .notifica-soft b { font-size:12px; }
.orbita-pulita .notifica-soft span { font-size:10.5px; }
.orbita-pulita .telefono { z-index:3; }
.orbita-pulita .wa-tag { z-index:3; }
@media (max-width:980px) {
  .scena-pulita { min-height:0; height:calc(620px * var(--oscala)); }
  .orbita-pulita { height:620px; }
  .orbita-pulita .notifica-soft { max-width:150px; }
}


/* --- Hero pulita v3: 6 icone con titoli, senza notifiche --- */
.orbita-pulita .badge.icon-titled label { display:block; position:absolute; top:72px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:600; color:var(--antracite); background:#FFF; border-radius:12px; padding:5px 10px; box-shadow:0 6px 16px rgba(18,60,100,.10); white-space:nowrap; }
.orbita-pulita .badge.icon-titled { width:62px; }
.orbita-pulita .notifica-soft { display:none !important; }


/* --- Hero pulita v4: pressione badge durante l'orbita circolare --- */
.orbita-pulita .badge.attivo .cerchio {
  animation:badgePressV4 .62s cubic-bezier(.2,.8,.25,1);
}
@keyframes badgePressV4 {
  0%   { transform:scale(1); }
  25%  { transform:scale(.90); }
  58%  { transform:scale(1.13); }
  100% { transform:scale(1); }
}
.orbita-pulita .fili-puliti path.attivo {
  transition:stroke .2s ease, filter .2s ease;
}


/* --- Hero pulita v5: tag WhatsApp più basso e 6 badge definitivi --- */
.orbita-pulita { height:700px; }
.scena-pulita { min-height:680px; }
.orbita-pulita .wa-tag-basso { bottom:-58px; left:50%; transform:translateX(-50%); z-index:2; }
.orbita-pulita .badge.icon-titled label { max-width:136px; text-align:center; line-height:1.15; padding:6px 10px; }
.orbita-pulita .badge.icon-titled.t2 label { max-width:154px; }
@media (max-width:980px) { .scena-pulita { height:calc(700px * var(--oscala)); } .orbita-pulita { height:700px; } .orbita-pulita .wa-tag-basso { bottom:-48px; } }


/* --- Hero finale v6: 6 badge visibili (3 per lato) e tag WhatsApp sotto il telefono --- */
.scena-finale { min-height:640px; }
.orbita-finale { height:650px; }
.orbita-finale .badge.icon-titled { width:62px; z-index:2; }
.orbita-finale .badge.icon-titled label { display:block; position:absolute; top:72px; left:50%; transform:translateX(-50%); min-width:92px; max-width:162px; text-align:center; font-size:11.5px; font-weight:600; color:var(--antracite); background:#FFF; border-radius:12px; padding:6px 10px; box-shadow:0 6px 16px rgba(18,60,100,.10); line-height:1.15; white-space:normal; }
.orbita-finale .badge.icon-titled .cerchio { width:62px; height:62px; }
.orbita-finale .badge.icon-titled .cerchio i { width:44px; height:44px; }
.orbita-finale .wa-tag-basso { left:50%; bottom:14px; transform:translateX(-50%); z-index:2; }
.orbita-finale .telefono { z-index:3; }
.orbita-finale .queen-host { z-index:4; }
@media (max-width:980px) { .scena-finale { height:calc(650px * var(--oscala)); } .orbita-finale { height:650px; } .orbita-finale .wa-tag-basso { bottom:8px; } }


/* --- Hero v7: badge più distanti e tag WhatsApp realmente sotto il telefono --- */
.scena-finale { min-height:710px; }
.orbita-finale { height:720px; }
.orbita-finale .wa-tag-basso {
  top:642px;
  bottom:auto;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
}
@media (max-width:980px) {
  .scena-finale { height:calc(720px * var(--oscala)); }
  .orbita-finale { height:720px; }
  .orbita-finale .wa-tag-basso { top:642px; bottom:auto; }
}


/* === MOBILE v8: stessa impaginazione desktop, scalata sulla larghezza ===
   La scena (telefono + badge in orbita + fili + apetta) resta identica al
   desktop nel suo spazio di 700x720; viene solo ridotta con transform:scale,
   pilotata dalla variabile --oscala (definita per fasce di larghezza).      */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .scena-finale{
    --oscala:0.92;
    position:relative; min-height:0; height:calc(720px * var(--oscala));
    overflow:hidden; display:block;
  }
  .orbita-finale{
    position:absolute; top:0; left:50%;
    width:700px; height:720px; max-width:none;
    display:grid; place-items:center;
    transform:translateX(-50%) scale(var(--oscala));
    transform-origin:top center;
  }
  /* ripristina la scena desktop: annulla lo stacking mobile generico */
  .orbita-finale .fili-puliti{ display:block !important; }
  .orbita-finale .queen-host{ display:block !important; }
  .orbita-finale .telefono{ order:0; margin:0; }
  .orbita-finale .wa-tag-basso{
    position:absolute !important; top:642px; bottom:auto;
    left:50%; transform:translateX(-50%); margin:0;
  }
  .orbita-finale .badge{
    position:absolute !important; flex-direction:column; align-items:center;
    gap:8px; margin:0; width:62px; animation:none;
  }
  .orbita-finale .badge .cerchio{
    width:62px; height:62px; border-radius:50%;
    box-shadow:0 12px 26px rgba(18,60,100,.14);
  }
  .orbita-finale .badge .cerchio i{ width:44px; height:44px; }
  .orbita-finale .badge svg{ width:22px; height:22px; }
  .orbita-finale .badge.icon-titled label{
    display:block; position:absolute; top:72px; left:50%;
    transform:translateX(-50%); min-width:92px; max-width:162px;
    text-align:center; white-space:normal; line-height:1.15;
    font-size:11.5px; font-weight:600; color:var(--antracite);
    background:#FFF; border-radius:12px; padding:6px 10px;
    box-shadow:0 6px 16px rgba(18,60,100,.10);
  }
}
/* fattore di scala per fasce: la scena resta intera, cambia solo la scala */
@media (max-width:900px){ .scena-finale{ --oscala:0.90; } }
@media (max-width:820px){ .scena-finale{ --oscala:0.88; } }
@media (max-width:720px){ .scena-finale{ --oscala:0.80; } }
@media (max-width:640px){ .scena-finale{ --oscala:0.72; } }
@media (max-width:560px){ .scena-finale{ --oscala:0.64; } }
@media (max-width:480px){ .scena-finale{ --oscala:0.56; } }
@media (max-width:430px){ .scena-finale{ --oscala:0.50; } }
@media (max-width:390px){ .scena-finale{ --oscala:0.46; } }
@media (max-width:360px){ .scena-finale{ --oscala:0.43; } }

/* === Settori fotografici v2 === */
.pillole {
  position:relative;
  overflow:hidden;
  padding:82px 5vw 94px;
  background:
    radial-gradient(circle at 8% 12%, rgba(46,159,230,.12), transparent 25%),
    radial-gradient(circle at 92% 88%, rgba(245,166,35,.10), transparent 24%),
    linear-gradient(145deg,#F7FBFE 0%,#EEF6FC 48%,#F8FBFD 100%);
}
.pillole::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:radial-gradient(circle,rgba(46,159,230,.28) 1px,transparent 1.5px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent 28%,transparent 72%,rgba(0,0,0,.8));
}
.pillole > * { position:relative; z-index:1; max-width:1380px; }
.pillole h2 { margin-bottom:12px; }
.pillole .sotto { max-width:720px; margin-bottom:38px; }
.ambiti-griglia {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.ambito.ambito-foto {
  position:relative;
  display:block;
  height:300px;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.74);
  border-radius:20px;
  background:#10213F;
  box-shadow:0 14px 34px rgba(16,33,63,.12);
  isolation:isolate;
  text-decoration:none;
  transform:translateZ(0);
  transition:transform .38s cubic-bezier(.22,.72,.18,1), box-shadow .38s ease, border-color .38s ease;
}
.ambito.ambito-foto:hover {
  transform:translateY(-7px);
  border-color:rgba(104,216,210,.72);
  box-shadow:0 26px 54px rgba(16,33,63,.20),0 0 0 1px rgba(46,159,230,.12);
}
.ambito-foto > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .72s cubic-bezier(.22,.72,.18,1),filter .45s ease;
}
.ambito-foto:hover > img { transform:scale(1.055); filter:saturate(1.05) contrast(1.02); }
.ambito-overlay {
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(5,17,35,.02) 36%,rgba(5,17,35,.18) 58%,rgba(5,17,35,.94) 100%);
}
.ambito-copy {
  position:absolute;
  left:18px;
  right:18px;
  bottom:17px;
  z-index:2;
  color:#FFF;
}
.ambito-copy h3 {
  margin:0;
  color:#FFF;
  font-size:clamp(15px,1.18vw,19px);
  line-height:1.08;
  letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.38);
}
.ambito-freccia {
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:50%;
  background:rgba(255,255,255,.90);
  color:#10213F;
  font-size:17px;
  box-shadow:0 8px 22px rgba(5,17,35,.18);
  opacity:0;
  transform:translateY(-7px);
  transition:opacity .28s ease,transform .32s ease,background .28s ease;
}
.ambito-foto:hover .ambito-freccia,
.ambito-foto:focus-visible .ambito-freccia { opacity:1; transform:none; }
.ambito-foto:focus-visible { outline:3px solid rgba(46,159,230,.42); outline-offset:3px; }

@media (max-width:1120px) {
  .ambiti-griglia { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ambito-copy h3 { font-size:18px; }
}
@media (max-width:760px) {
  .ambiti-griglia { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .pillole { padding:64px 0 72px; }
  .pillole h2,.pillole .sotto { margin-left:6vw; margin-right:6vw; }
  .pillole .sotto { margin-bottom:28px; }
  .ambiti-griglia {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:min(76vw,310px);
    grid-template-columns:none;
    gap:14px;
    width:100%;
    max-width:none;
    margin:0;
    padding:4px 6vw 24px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:6vw;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .ambiti-griglia::-webkit-scrollbar { display:none; }
  .ambito.ambito-foto { scroll-snap-align:start; border-radius:22px; }
  .ambito-copy { left:20px; right:20px; bottom:20px; }
  .ambito-copy h3 { font-size:20px; }
  .ambito-freccia { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .ambito.ambito-foto,.ambito-foto > img,.ambito-freccia { transition:none; }
}

/* Hero: evita che “AI.” rimanga isolato su una riga nelle viewport intermedie */
@media (max-width: 1280px) {
  .hero-break-mid { display:inline; }
  .hero h1 { font-size:clamp(38px,5vw,54px); }
}

/* --- Card di esito nella hero: microcopy con risultati concreti --- */
.card-esito { position:absolute; z-index:6; display:flex; align-items:center; gap:10px;
  background:#FFF; border-radius:14px; padding:10px 14px;
  box-shadow:0 10px 24px rgba(18,60,100,.14); }
.card-esito .ce-icona { display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; background:#22B573; flex:none; }
.card-esito .ce-icona svg { width:18px; height:18px; stroke:#FFF; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.card-esito b { display:block; font-size:13px; font-weight:700; color:var(--antracite); }
.card-esito em { display:block; font-style:normal; font-size:11.5px; color:var(--testo); }
.ce-sx { top:170px; left:-180px; }
.ce-dx { top:560px; left:450px; }
@media (max-width:960px) { .card-esito { display:none; } }

/* --- Titolo hero: "Anche su" in antracite, WhatsApp nel verde del brand --- */
h1 .scuro { color: var(--antracite); }
h1 .wa-verde { color: #25D366; }

/* --- Mobile: telefono al centro, icone ai lati come su desktop --- */
@media (max-width:960px) {
  .hero { grid-template-columns:1fr; }
  .menu { display:none; }
  .orbita { height:auto; padding-bottom:16px; display:grid;
            grid-template-columns:auto minmax(0,1fr) auto;
            align-items:center; column-gap:6px; row-gap:18px; }
  .fili, .notifica, .queen-host, .card-esito { display:none; }
  .orbita .badge { position:static !important; animation:none; display:flex;
                   align-items:center; justify-content:center; width:auto; }
  .orbita .badge label { display:none; }
  .orbita .badge .cerchio { width:40px; height:40px; }
  .orbita .badge .cerchio i { width:30px; height:30px; }
  .orbita .badge svg { width:20px; height:20px; }
  .orbita .badge.t1 { grid-column:1; grid-row:1; }
  .orbita .badge.t6 { grid-column:1; grid-row:2; }
  .orbita .badge.t5 { grid-column:1; grid-row:3; }
  .orbita .badge.t2 { grid-column:3; grid-row:1; }
  .orbita .badge.t3 { grid-column:3; grid-row:2; }
  .orbita .badge.t4 { grid-column:3; grid-row:3; }
  .orbita .telefono { grid-column:2; grid-row:1 / span 3; justify-self:center;
                      transform:scale(.82); transform-origin:center; margin:0; }
  .orbita .wa-tag { grid-column:1 / -1; grid-row:4; position:static; transform:none; justify-self:center; }
}

/* --- Schermi intermedi: la scena si riduce per restare tutta in vista --- */
@media (min-width:961px) and (max-width:1580px) {
  .hero { gap:24px; }
  .orbita { transform:scale(.8); transform-origin:left top; }
}

/* --- Card di esito: testo su righe intere, niente a capo forzato --- */
.card-esito .ce-testo b, .card-esito .ce-testo em { white-space:nowrap; }

/* --- Telefono ancorato al centro geometrico dei badge --- */
.orbita .telefono { position:absolute; left:208px; top:50%; transform:translateY(-50%); }
@media (max-width:960px) {
  .orbita .telefono { position:static; left:auto; top:auto; transform:scale(.82); }
}

/* --- Colonna testo della hero leggermente più alta rispetto al telefono --- */
@media (min-width:961px) { .hero > div:first-child { margin-top:-56px; } }

/* --- Mobile: telefono a grandezza piena e icone appoggiate sui bordi --- */
@media (max-width:960px) {
  .orbita { grid-template-columns:32px minmax(0,1fr) 32px; column-gap:4px; }
  .orbita .badge { z-index:2; }
  .orbita .badge .cerchio { width:52px; height:52px; }
  .orbita .badge .cerchio i { width:38px; height:38px; }
  .orbita .badge svg { width:24px; height:24px; }
  .orbita .telefono { transform:none; }
}

/* --- Testata curata e hero più vicina al menu --- */
.testata { padding:16px 6vw; border-bottom:1px solid #EEF2F7; }
.menu { gap:8px; }
.menu a { font-size:14.5px; font-weight:600; padding:9px 14px; border-radius:10px;
          transition:background .15s, color .15s; }
.menu a::after { font-size:10px; position:relative; top:-1px; margin-left:2px; }
.menu a:hover { background:#F2F7FC; color:var(--azzurro); }
.hero { padding:16px 6vw 56px; min-height:74vh; }
@media (min-width:961px) { .hero > div:first-child { margin-top:-84px; } }

/* --- Mobile: settori a colpo d'occhio, griglia compatta invece del carosello --- */
@media (max-width:960px) {
  .ambiti-griglia { display:grid; grid-template-columns:1fr 1fr; gap:12px;
                    overflow-x:visible; scroll-snap-type:none; }
  .ambito.ambito-foto { height:150px; border-radius:16px; }
  .ambito.ambito-foto > img { width:100%; height:100%; object-fit:cover; }
  .ambito-copy { left:12px; right:12px; bottom:12px; }
  .ambito-copy h3 { font-size:15px; }
}

/* --- IlarIA HR: griglia settori a 3 colonne SOLO desktop, altezza contenuta --- */
@media (min-width:961px){
  .ambiti-griglia{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-auto-flow:row !important; grid-auto-columns:auto !important; gap:16px !important; overflow:visible !important; scroll-snap-type:none !important; width:auto !important; max-width:1180px !important; margin:0 auto !important; padding:0 !important; }
  .ambito.ambito-foto{ height:240px !important; scroll-snap-align:unset !important; }
}
/* --- IlarIA HR: MOBILE/TABLET <=960px — griglia 3 col centrata, spazi puliti --- */
@media (max-width:960px){
  .pillole{ padding:44px 0 52px !important; }
  .pillole h2,.pillole .sotto{ margin-left:0 !important; margin-right:0 !important; padding-left:16px !important; padding-right:16px !important; }
  .ambiti-griglia{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-auto-flow:row !important; gap:10px !important; overflow:visible !important; scroll-snap-type:none !important; width:auto !important; max-width:560px !important; margin:0 auto !important; padding:0 16px !important; box-sizing:border-box !important; }
  .ambito.ambito-foto{ height:auto !important; aspect-ratio:3 / 4 !important; border-radius:14px !important; scroll-snap-align:unset !important; }
  .ambito-copy{ left:12px !important; right:12px !important; bottom:12px !important; }
  .ambito-copy h3{ font-size:13.5px !important; line-height:1.12 !important; }
  .ambito-freccia{ width:30px !important; height:30px !important; top:10px !important; right:10px !important; font-size:15px !important; opacity:1 !important; transform:none !important; }
}

/* --- IlarIA HR: apetta (ape regina) visibile e animata anche su mobile --- */
@media (max-width:980px){ .queen-host{ display:block !important; } }

/* --- IlarIA HR: icone hero piu' grandi, fili visibili ed eleganti --- */
.orbita-finale .badge .cerchio{ width:76px; height:76px; }
.orbita-finale .badge .cerchio i{ width:56px; height:56px; }
.orbita-finale .badge svg{ width:27px; height:27px; }
.orbita-finale .fili-puliti path{ stroke:rgba(18,115,184,.26); stroke-width:1.3px; }

/* --- IlarIA HR: mascotte overlay per card (non cliccabile, link intatto) --- */
.ambito-mascotte{ position:absolute; z-index:2; width:64px; pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(8,18,40,.45)); animation:masc-fluttua 3.6s ease-in-out infinite; }
.ambito-mascotte img{ display:block; width:100%; height:auto; }
.ambito-mascotte[data-ang="tr"]{ top:6px; right:6px; }
.ambito-mascotte[data-ang="tl"]{ top:6px; left:6px; }
.ambito-mascotte[data-ang="br"]{ bottom:8px; right:6px; }
.ambito-mascotte[data-ang="bl"]{ bottom:8px; left:6px; }
.ambito-mascotte[data-ang="bc"]{ bottom:8px; left:50%; transform:translateX(-50%); }
/* orienta verso l'interno della card: gli angoli a destra guardano a sinistra */
.ambito-mascotte[data-ang="tr"] img,
.ambito-mascotte[data-ang="br"] img{ transform:scaleX(-1); }
@keyframes masc-fluttua{ 50%{ transform:translateY(-5px); } }
.ambito-mascotte[data-ang="bc"]{ animation:masc-fluttua-c 3.6s ease-in-out infinite; }
@keyframes masc-fluttua-c{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-5px); } }
@media (prefers-reduced-motion:reduce){ .ambito-mascotte{ animation:none; } }
@media (max-width:960px){ .ambito-mascotte{ width:44px !important; } }