/* ==========================================================================
   HODA DESIGN SYSTEM — hoda.css
   Sito hoda.digital · versione da pubblicare · settembre 2026
   Un solo foglio di stile per tutte le pagine: home, aziende, persone, weople³.
   Palette ufficiale: blu notte #04122B · blu #0057B8 · azzurro #00A8FF · ciano #00E5FF
   Percorso aziende: #0057B8 — Percorso persone: #5FC4E1 / #0074A6 (da SVG Weople)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
:root{
  /* colore istituzionale */
  --navy:#04122B;
  --navy2:#0A2C5E;
  --blu:#0057B8;
  --azz:#00A8FF;
  --ciano:#00E5FF;
  --ink:#12263A;
  --ink2:#28405E;
  --gray:#5E7085;
  --paper:#FFFFFF;
  --bg:#F4F9FD;
  --line:rgba(18,38,58,.12);
  --linew:rgba(255,255,255,.16);

  /* codice colore dei due mondi */
  --azc:#0057B8;          /* aziende */
  --pec:#5FC4E1;          /* persone — azzurro Weople */
  --ped:#0074A6;          /* persone — blu profondo Weople */
  --peb:#EAF7FC;          /* persone — fondo chiaro */

  /* tipografia */
  --font:"Avenir Next LT Pro","Avenir Next",Avenir,"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --font-geo:"Poppins","Avenir Next LT Pro","Avenir Next",Avenir,sans-serif;

  /* ritmo */
  --wrap:1180px;
  --pad:clamp(22px,4vw,40px);
  --sect:clamp(76px,9vw,124px);

  /* forma */
  --r:16px;
  --r-lg:22px;
  --sh-s:0 6px 26px rgba(0,87,184,.08);
  --sh-m:0 18px 44px rgba(4,18,43,.12);
  --sh-l:0 30px 70px rgba(4,18,43,.20);

  /* movimento */
  --ease:cubic-bezier(.2,.7,.2,1);
  --slow:.9s var(--ease);
}

/* --------------------------------------------------------------------------
   2. RESET E BASE
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font);
  color:var(--ink);
  line-height:1.66;
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
[hidden]{display:none!important}
img{height:auto}
a{color:inherit}
::selection{background:var(--ciano);color:var(--navy)}
:focus-visible{outline:3px solid var(--azz);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
section{padding:var(--sect) 0;position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   3. BARRA DI AVANZAMENTO E NAVIGAZIONE
   -------------------------------------------------------------------------- */
#bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--blu),var(--azz),var(--ciano));
  box-shadow:0 0 14px rgba(0,229,255,.5);
}

nav{
  position:fixed;top:0;left:0;right:0;z-index:110;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease);
}
nav .navin{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:84px;padding:0 clamp(20px,4vw,64px);
  transition:height .4s var(--ease);
}
nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,18,43,.55),rgba(4,18,43,0));
  opacity:0;transition:opacity .4s var(--ease);
}
nav.ondark:not(.solid)::before{opacity:1}
nav .navin{position:relative}
nav.solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(12px);box-shadow:0 1px 0 var(--line),0 8px 30px rgba(4,18,43,.06)}
nav.solid .navin{height:70px}
nav .brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
nav .brandlogo{height:46px;width:auto;display:block;transition:height .4s var(--ease)}
nav.solid .brandlogo{height:40px}
/* in home, finché si è sull'immagine di apertura il marchio sta solo nell'hero:
   in alto a sinistra ricompare quando la barra diventa bianca */
nav.herohome:not(.solid) .brand{opacity:0;visibility:hidden;transition:opacity .3s var(--ease)}

nav ul{display:flex;gap:clamp(14px,2vw,30px);list-style:none;align-items:center}
nav ul a{
  text-decoration:none;color:var(--gray);font-size:14px;font-weight:600;
  letter-spacing:.02em;padding:6px 2px;position:relative;transition:color .25s;
}
nav ul a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--azz),var(--ciano));transition:right .3s var(--ease);
}
nav ul a:hover::after,nav ul a[aria-current="page"]::after{right:0}
nav ul a:hover{color:var(--azz)}
nav ul a[aria-current="page"]{color:var(--blu)}
nav.ondark:not(.solid) ul a{color:rgba(255,255,255,.86)}
nav.ondark:not(.solid) ul a:hover,nav.ondark:not(.solid) ul a[aria-current="page"]{color:var(--ciano)}
nav a.en{border:1.5px solid currentColor;padding:4px 12px;border-radius:99px;font-weight:700;font-size:12.5px}
nav a.en::after{display:none}
nav a.cubelink{
  background:linear-gradient(90deg,var(--ped),var(--pec));color:#fff!important;
  padding:8px 18px;border-radius:99px;font-weight:700;
}
nav a.cubelink::after{display:none}
nav a.cubelink:hover{filter:brightness(1.08)}

/* menu mobile */
.navtoggle{
  display:none;background:none;border:0;cursor:pointer;padding:10px;
  width:46px;height:46px;position:relative;z-index:6;flex:0 0 auto;
}
.navtoggle span{
  position:absolute;left:11px;right:11px;height:2.5px;border-radius:2px;background:var(--ink);
  transition:transform .35s var(--ease),opacity .2s;
}
.navtoggle span:nth-child(1){top:15px}
.navtoggle span:nth-child(2){top:22px}
.navtoggle span:nth-child(3){top:29px}
nav.ondark:not(.solid) .navtoggle span{background:#fff}
nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .navtoggle span:nth-child(2){opacity:0}
nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  .navtoggle{display:block}
  nav ul{
    position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);
    flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--navy);padding:104px 30px 40px;
    z-index:2;transform:translateX(102%);transition:transform .45s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.35);
  }
  nav.open ul{transform:none}
  nav ul li{width:100%}
  nav ul a{display:block;width:100%;padding:15px 0;font-size:18px;color:#fff!important;border-bottom:1px solid var(--linew)}
  nav ul a::after{display:none}
  nav a.en{display:inline-block;margin-top:18px;border-color:var(--ciano);color:var(--ciano)!important;border-bottom:1.5px solid var(--ciano)!important}
  nav a.cubelink{display:inline-block;margin-top:16px;border-bottom:0!important}
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA DI SEZIONE
   -------------------------------------------------------------------------- */
.kick{
  display:inline-flex;align-items:center;gap:12px;
  letter-spacing:.24em;font-size:11.5px;font-weight:800;text-transform:uppercase;
  color:var(--ciano);
}
.kick::before{content:"";width:32px;height:2px;border-radius:2px;background:currentColor}
.kick.dark{color:var(--azz)}
.kick.pe{color:var(--pec)}

.chap{display:block;margin-bottom:clamp(30px,4vw,50px)}
.chap .n{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azz);margin-bottom:14px;
}
.chap .n::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex:0 0 auto}
.chap .n::after{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.45;flex:0 0 auto}
.chap h2{font-size:clamp(23px,3.1vw,39px);font-weight:700;line-height:1.11;letter-spacing:-.015em}
.chap h2 .gr{
  background:linear-gradient(90deg,var(--blu),var(--azz),var(--ciano));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.chap .plogo{display:block;height:clamp(38px,4vw,52px);width:auto;margin:6px 0 16px}
.chap .sub{font-size:clamp(15.5px,1.3vw,17.5px);color:var(--gray);max-width:760px;margin-top:14px}

.lead{font-size:clamp(16px,1.55vw,19.5px);line-height:1.55;color:var(--ink2);max-width:860px}
p{font-size:16px}
strong{font-weight:700;color:inherit}

/* --------------------------------------------------------------------------
   5. BOTTONI
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;font-weight:700;font-size:15.5px;
  padding:15px 34px;border-radius:99px;border:0;cursor:pointer;font-family:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s;
}
.btn::after{content:"→";font-size:20px;font-weight:800;-webkit-text-stroke:.7px currentColor;transition:transform .3s var(--ease)}
.btn.plain::after{display:none}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{transform:translateX(4px)}
.btn-g{background:linear-gradient(90deg,var(--blu),var(--azz));color:#fff}
.btn-g:hover{box-shadow:0 16px 38px rgba(0,168,255,.34)}
.btn-w{background:#fff;color:var(--blu)}
.btn-w:hover{box-shadow:0 16px 38px rgba(4,18,43,.22)}
.btn-pe{background:linear-gradient(90deg,var(--ped),var(--pec));color:#fff}
.btn-pe:hover{box-shadow:0 16px 38px rgba(0,116,166,.32)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff;background:none}
.btn-ghost:hover{border-color:var(--ciano);color:var(--ciano)}
.btn-sm{padding:11px 24px;font-size:14px}
.btn:disabled{opacity:.62;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{transform:none}

/* --------------------------------------------------------------------------
   6. HERO — home (schermo pieno) e pagine interne (immagine protagonista)
   -------------------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;
}
.hero .media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero .media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);animation:kenburns 26s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}
}
.hero .veil{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(105deg,rgba(4,18,43,.96) 0%,rgba(4,18,43,.88) 34%,rgba(4,18,43,.55) 62%,rgba(4,18,43,.34) 100%),
    radial-gradient(1100px 620px at 12% 78%,rgba(0,87,184,.55),transparent 70%);
}
.hero .net{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero .herologo{height:clamp(62px,7.8vw,116px);width:auto;display:block;margin-bottom:6px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.45))}
.hero .heroin{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:150px var(--pad) clamp(84px,10vh,120px)}
.hero h1{
  font-size:clamp(29px,5.4vw,70px);line-height:1.03;font-weight:700;letter-spacing:-.03em;
  margin:22px 0 0;max-width:16em;
}
.hero h1 .gr{
  background:linear-gradient(90deg,var(--azz),var(--ciano));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero .sub{
  font-size:clamp(15.5px,1.45vw,18.5px);margin:26px 0 0;color:rgba(255,255,255,.88);
  max-width:44em;line-height:1.55;
}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero .heronote{
  margin-top:44px;padding-top:20px;padding-right:96px;border-top:1px solid var(--linew);
  display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.hero .heronote b{color:var(--ciano);font-weight:700}
.scrollcue{
  position:absolute;right:clamp(20px,4vw,64px);bottom:26px;z-index:3;
  color:rgba(255,255,255,.72);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;text-align:center;
}
@media(max-width:640px){.scrollcue{display:none}}
.scrollcue::after{content:"";display:block;width:1px;height:34px;margin:8px auto 0;background:linear-gradient(var(--ciano),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* hero delle pagine interne: stessa struttura, altezza minore */
.phero{position:relative;min-height:74svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate}
.phero .media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.phero .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:kenburns 30s var(--ease) infinite alternate}
.phero .veil{position:absolute;inset:0;z-index:-2}
.phero.az .veil{background:linear-gradient(100deg,rgba(3,20,48,.96) 0%,rgba(3,20,48,.86) 40%,rgba(10,59,122,.52) 100%)}
.phero.pe .veil{background:linear-gradient(100deg,rgba(4,45,60,.88) 0%,rgba(4,45,60,.6) 42%,rgba(10,110,150,.18) 78%,rgba(10,110,150,.06) 100%)}
.phero.cube .veil{background:linear-gradient(100deg,rgba(2,12,28,.97) 0%,rgba(4,32,58,.9) 45%,rgba(0,116,166,.55) 100%)}
.phero .heroin{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:150px var(--pad) clamp(60px,8vh,90px)}
.phero h1{font-size:clamp(27px,4.3vw,54px);line-height:1.06;font-weight:700;letter-spacing:-.025em;margin:20px 0 0;max-width:17em}
.phero .sub{font-size:clamp(15.5px,1.4vw,18px);margin:22px 0 0;color:rgba(255,255,255,.87);max-width:44em;line-height:1.56}

/* --------------------------------------------------------------------------
   7. SISTEMA DI COMPARSA (reveal)
   -------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity var(--slow),transform var(--slow)}
.rv.vis{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-38px);transition:opacity var(--slow),transform var(--slow)}
.rv-r{opacity:0;transform:translateX(38px);transition:opacity var(--slow),transform var(--slow)}
.rv-l.vis,.rv-r.vis{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.94);transition:opacity var(--slow),transform var(--slow)}
.rv-s.vis{opacity:1;transform:none}
/* svelamento a tendina: la foto si scopre */
.rv-clip{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease)}
.rv-clip.vis{clip-path:inset(0 0 0 0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}
/* titolo hero: parola per parola */
.wsplit .w{display:inline-block;opacity:0;transform:translateY(.6em);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.wsplit.vis .w{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   8. BLOCCHI DI CONTENUTO
   -------------------------------------------------------------------------- */
/* testo + foto */
.split{display:grid;grid-template-columns:1.04fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.split.rev{grid-template-columns:1fr 1.04fr}
.split p{font-size:16px;margin-bottom:16px;color:var(--ink2)}
.split p:last-child{margin-bottom:0}

.frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-l)}
.frame img{width:100%;display:block;transition:transform 1s var(--ease)}
.frame:hover img{transform:scale(1.04)}
.frame.tall img{aspect-ratio:3/4;object-fit:cover}
/* foto che esce dal bordo: l'immagine diventa protagonista */
@media(min-width:1181px){
  .frame.bleed-r{margin-right:calc(-1 * ((100vw - var(--wrap))/2 + var(--pad)));border-radius:var(--r) 0 0 var(--r)}
  .frame.bleed-l{margin-left:calc(-1 * ((100vw - var(--wrap))/2 + var(--pad)));border-radius:0 var(--r) var(--r) 0}
  .frame.bleed-r img,.frame.bleed-l img{aspect-ratio:16/11;object-fit:cover}
}

/* fascia a tutto schermo con foto (parallasse) */
.fullbleed{
  position:relative;min-height:min(86svh,760px);display:flex;align-items:center;
  color:#fff;overflow:hidden;isolation:isolate;padding:var(--sect) 0;
}
.fullbleed .media{position:absolute;inset:-12% 0;z-index:-3;overflow:hidden;will-change:transform}
.fullbleed .media img{width:100%;height:100%;object-fit:cover}
.fullbleed .veil{position:absolute;inset:0;z-index:-2}
.fullbleed .glow{
  position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  opacity:0;transition:opacity 2s var(--ease);
  background:radial-gradient(circle,rgba(255,240,200,.55) 0%,rgba(255,214,130,.22) 38%,transparent 70%);
  mix-blend-mode:screen;
}
.fullbleed.vis .glow{opacity:1;animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.1);opacity:1}}

/* citazione grande */
.pull{padding:clamp(90px,11vw,150px) 0;text-align:center;background:linear-gradient(#fff 0%,var(--bg) 100%)}
.pull blockquote{font-size:clamp(21px,3.7vw,46px);font-weight:700;line-height:1.14;letter-spacing:-.025em;max-width:19em;margin:0 auto}
.pull .gr{
  background:linear-gradient(90deg,var(--blu),var(--azz),var(--ciano),var(--azz),var(--blu));
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:flow 9s linear infinite;
}
@keyframes flow{to{background-position:280% 0}}
.pull .who{margin-top:24px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray)}

/* sezione scura */
.dark{background:linear-gradient(158deg,var(--navy) 42%,var(--navy2));color:#fff;overflow:hidden;isolation:isolate}
.dark .chap h2,.dark h3{color:#fff}
.dark p{color:rgba(255,255,255,.86)}
.dark .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px)}
.dark .cols p{font-size:16px;margin-bottom:16px}
.dotfield{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.85}

/* contatori */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linew);margin-top:64px}
.stats div{padding:26px 22px 0;border-left:1px solid var(--linew)}
.stats div:first-child{border-left:none;padding-left:0}
.stats b{font-size:clamp(30px,3.6vw,44px);font-weight:700;color:var(--ciano);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}

/* --------------------------------------------------------------------------
   9. UN MESTIERE, DUE VITTORIE
   -------------------------------------------------------------------------- */
.twowin{background:var(--paper)}
.twowin .manifesto{
  font-size:clamp(17px,1.8vw,23px);line-height:1.42;font-weight:600;color:var(--ink);
  max-width:24em;letter-spacing:-.01em;
}
.twowin .body{font-size:16.4px;color:var(--ink2);max-width:46em;margin-top:22px}
.twowin .grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(38px,5vw,62px);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-m)}
.twowin .w1,.twowin .w2{padding:clamp(28px,3.4vw,44px);position:relative;overflow:hidden}
.twowin .w1{background:linear-gradient(150deg,#0A3B7A,#031430);color:#fff}
.twowin .w2{background:linear-gradient(150deg,#0A6E96,#043546);color:#fff}
.twowin .w1::after,.twowin .w2::after{
  content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%);
}
.twowin .lbl{font-size:17.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:12px}   /* 24/09: +50% su richiesta di Silvio (era 11,5px) */
.twowin .w1 .lbl{color:var(--azz)}
.twowin .w2 .lbl{color:var(--pec)}
.twowin h3{font-size:clamp(19px,2.1vw,25px);font-weight:700;margin-bottom:12px;letter-spacing:-.015em}
.twowin p{color:rgba(255,255,255,.87);font-size:16px}
.twowin .join{
  text-align:center;margin-top:26px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);display:flex;align-items:center;gap:16px;justify-content:center;
}
.twowin .join::before,.twowin .join::after{content:"";height:1px;flex:1;max-width:130px;background:var(--line)}

/* --------------------------------------------------------------------------
   10. LA BIFORCAZIONE — due strade
   -------------------------------------------------------------------------- */
.fork{background:var(--bg)}
.fork .intro{max-width:44em}
.forkgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:clamp(38px,5vw,58px)}
.road{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-s);transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  display:flex;flex-direction:column;
}
.road:hover{transform:translateY(-8px);box-shadow:var(--sh-m)}
/* Le due teste colorate erano centrate verticalmente: il testo di aziende
   occupa quattro righe e quello di persone due, e centrando il piu' corto
   partiva 27px piu' in basso (misurato). Allineate in alto, etichetta,
   titolo e testo delle due colonne stanno sulla stessa riga. */
.road .rhead{padding:clamp(24px,3vw,36px);color:#fff;position:relative;overflow:hidden;min-height:clamp(190px,19vw,236px);display:flex;flex-direction:column;justify-content:flex-start}
.road.az .rhead{background:linear-gradient(140deg,#0A3B7A,#04122B)}
.road.pe .rhead{background:linear-gradient(140deg,#0A6E96,#043546)}
.road .rhead::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background:radial-gradient(420px 200px at 88% 12%,rgba(0,229,255,.32),transparent 70%);
}
.road .rlbl{position:relative;font-size:17.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}   /* 24/09: +50% (era 11,5px) */
.road.az .rlbl{color:var(--azz)}
.road.pe .rlbl{color:var(--pec)}
.road .rhead h3{position:relative;font-size:clamp(20px,2.4vw,29px);font-weight:700;margin:12px 0 10px;letter-spacing:-.02em}
.road .rhead p{position:relative;color:rgba(255,255,255,.86);font-size:15.6px;max-width:30em}
.road .rbody{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;flex:1}
.road .rfoot{padding:0 clamp(22px,2.6vw,30px) clamp(24px,3vw,32px)}

/* riga di servizio dentro la strada */
.svc{
  display:flex;gap:14px;align-items:flex-start;text-decoration:none;
  padding:18px 18px 18px 20px;border-radius:12px;background:var(--bg);
  border-left:3px solid transparent;
  transition:transform .3s var(--ease),background .3s,border-color .3s;
}
.svc:hover{transform:translateX(6px);background:#EAF3FC;border-left-color:var(--azc)}
.road.pe .svc:hover{background:var(--peb);border-left-color:var(--pec)}
.svc .stx{flex:1;min-width:0}
.svc .slogo{display:block;height:24px;margin-bottom:10px}
.svc .slogo img{height:24px;width:auto;display:block}
.svc .slogo .walogo{font-size:23px;line-height:24px;display:block}
.svc .sd{display:block;font-size:14.4px;color:var(--ink2);line-height:1.5}
.svc .arw{
  flex:0 0 auto;font-size:24px;font-weight:800;-webkit-text-stroke:.8px currentColor;line-height:1;color:var(--azc);margin-top:0;
  opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.road.pe .svc .arw{color:var(--ped)}
.svc:hover .arw{opacity:1;transform:none}

/* strisce di risposta rapida dentro la strada */
.minirow{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.minirow.sotto{margin:-4px 0 4px 20px}
.minirow span{
  font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:9px 16px;border-radius:99px;
  background:var(--peb);color:var(--ped);
}
.road.az .minirow span{background:#EAF3FC;color:var(--azc)}

/* --------------------------------------------------------------------------
   11. CARD
   -------------------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);margin-top:44px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-s);border:1px solid rgba(0,87,184,.07);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 56px rgba(0,87,184,.16)}
.card .ph{height:180px;overflow:hidden;position:relative}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .ph img{transform:scale(1.06)}
.card .pn{
  position:absolute;top:14px;left:14px;z-index:2;background:rgba(4,18,43,.82);
  color:var(--ciano);font-size:10.5px;font-weight:800;letter-spacing:.14em;padding:5px 11px;border-radius:99px;
}
.card .bd{padding:26px 24px 24px;display:flex;flex-direction:column;flex:1}
.card .tag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.card h3{font-size:20.5px;color:var(--blu);margin-bottom:10px;letter-spacing:-.01em}
.card p{font-size:14.8px;flex:1;color:var(--ink2)}
.card .blogo{display:block;height:30px;width:auto!important;max-width:78%;object-fit:contain;margin:2px 0 12px}
.card .more{color:var(--azz);font-weight:700;text-decoration:none;margin-top:18px;font-size:14.5px}
.card .more::after{content:" →";font-size:19px;-webkit-text-stroke:.7px currentColor}
.card.az{border-top:4px solid var(--azc)}
.card.pe{border-top:4px solid var(--pec)}
.card.pe h3,.card.pe .more{color:var(--ped)}

/* box semplice (statement, tre risposte, ecc.) */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
.panel{
  background:#fff;border-radius:var(--r);padding:clamp(24px,2.8vw,32px);
  box-shadow:var(--sh-s);border-top:4px solid var(--pec);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.panel:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(0,116,166,.16)}
.panel .fr{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ped);font-weight:800;margin-bottom:12px}
.panel h4{font-size:19px;color:var(--ped);margin-bottom:9px}
.panel p{font-size:15.6px;color:#1E3D4D}
.panel.big h4{font-size:23px}
.panel.az{border-top-color:var(--azc)}
.panel.az .fr,.panel.az h4{color:var(--blu)}

/* griglia di box compatti */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:34px}
.gcard{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:var(--sh-s);border-left:4px solid var(--azc)}
.gcard h4{font-size:17px;color:var(--blu);margin-bottom:8px}
.gcard p{font-size:14.6px;color:var(--ink2)}

/* il pacchetto (blocco firmato) */
.bundle{position:relative;margin-top:52px;padding:38px 28px 30px;border-radius:var(--r-lg);border:1.5px solid rgba(0,87,184,.2);background:linear-gradient(180deg,#FBFDFF,#EFF7FE)}
.bundle .blabel{
  position:absolute;top:-15px;left:26px;background:linear-gradient(90deg,var(--blu),var(--azz));
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 18px;border-radius:99px;
}
.bundle .bfoot{margin-top:24px;font-size:13.4px;color:var(--gray);display:flex;align-items:center;gap:10px}
.bundle .bfoot::before{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--blu),var(--ciano));flex:0 0 auto}

/* doppio mandato */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:32px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s)}
.duo .dcol{background:#fff;padding:26px 28px}
.duo .dcol+.dcol{border-left:1px solid var(--line)}
.duo h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}
.duo .a h4{color:var(--azc)}
.duo .b h4{color:var(--ped)}
.duo p{font-size:14.8px;color:var(--ink2)}

/* indice dei servizi (pagina aziende) */
.svcindex{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:48px}
.svcindex a{display:block;text-decoration:none;padding-top:16px;border-top:3px solid;transition:transform .3s var(--ease)}
.svcindex a:hover{transform:translateY(-4px)}
.svcindex .sk{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:6px}
.svcindex .sd{font-size:13.8px;color:var(--gray);line-height:1.5}
.svcindex .s1{border-color:#0057B8}.svcindex .s1 .sk{color:#0057B8}
.svcindex .s2{border-color:#0084DE}.svcindex .s2 .sk{color:#0084DE}
.svcindex .s3{border-color:#00A8FF}.svcindex .s3 .sk{color:#00A8FF}
.area{border-left:5px solid}
.area1{border-color:#0057B8}.area1 .chap .n{color:#0057B8}
.area2{border-color:#0084DE}.area2 .chap .n{color:#0084DE}
.area3{border-color:#00A8FF}.area3 .chap .n{color:#00A8FF}

/* --------------------------------------------------------------------------
   12. WEKOSMOS — le 24 aree informative
   -------------------------------------------------------------------------- */
.areeblock{background:var(--navy);color:#fff;overflow:hidden}
.aree{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:40px}
.aree .a{
  border-radius:9px;padding:16px 13px;min-height:96px;display:flex;align-items:center;
  font-size:13.4px;font-weight:600;line-height:1.32;color:#fff;
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .6s var(--ease),transform .6s var(--ease),filter .3s;
;text-decoration:none;cursor:pointer}
.aree.vis .a{opacity:1;transform:none}
.aree .a:hover{filter:brightness(1.18);transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.aree .c1{background:#04478F}.aree .c2{background:#1C6EA4}
.aree .c3{background:#009FD4}.aree .c4{background:#5BC5E3;color:#04303F}
.areeblock .caption{margin-top:22px;font-size:13.5px;color:rgba(255,255,255,.62)}

/* --------------------------------------------------------------------------
   13. WEKOSMOS AI — finestra con mock d'interfaccia
   -------------------------------------------------------------------------- */
.aiwin{background:linear-gradient(160deg,#031430 40%,#0A3B7A);color:#fff;overflow:hidden}
.aiwin .badge{
  display:inline-block;background:linear-gradient(90deg,var(--azz),var(--ciano));color:var(--navy);
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 16px;border-radius:99px;margin-bottom:18px;
}
.aiwin .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4vw,60px);align-items:center}
.aiwin .plogo{height:clamp(34px,3.6vw,46px);width:auto;margin-bottom:18px}
.aiwin ul{list-style:none;display:grid;gap:18px;margin-top:28px}
.aiwin li{padding-left:30px;position:relative}
.aiwin li::before{
  content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:4px;
  background:linear-gradient(135deg,var(--azz),var(--ciano));
}
.aiwin li b{display:block;font-size:17px;margin-bottom:3px}
.aiwin li span{font-size:15.2px;color:rgba(255,255,255,.8)}

.mock{
  border-radius:var(--r-lg);background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);padding:22px;box-shadow:var(--sh-l);backdrop-filter:blur(6px);
}
.mock .mbar{display:flex;align-items:center;gap:7px;margin-bottom:18px}
.mock .mbar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.mock .mbar span{margin-left:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.mock .q{
  background:rgba(0,168,255,.14);border:1px solid rgba(0,229,255,.28);border-radius:12px;
  padding:14px 16px;font-size:15.4px;min-height:52px;
}
.mock .q .cur{display:inline-block;width:2px;height:1.05em;background:var(--ciano);vertical-align:-.16em;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.mock .a{margin-top:16px;display:grid;gap:11px;opacity:0;transition:opacity .6s}
.mock .a.on{opacity:1}
.mock .row{display:grid;grid-template-columns:150px 1fr 54px;gap:12px;align-items:center;font-size:13.4px}
.mock .row .track{height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.mock .row .fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blu),var(--ciano));transition:width 1.3s var(--ease)}
.mock .row .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--ciano);font-weight:700}
.mock .foot{margin-top:18px;font-size:11.5px;color:rgba(255,255,255,.42);letter-spacing:.1em;text-transform:uppercase}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.shot{
  aspect-ratio:16/10;border-radius:14px;display:grid;place-items:center;text-align:center;
  border:1.5px dashed rgba(0,229,255,.45);background:rgba(255,255,255,.07);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);padding:16px;line-height:1.7;
}

/* --------------------------------------------------------------------------
   14. ANGEL
   -------------------------------------------------------------------------- */
.angelwrap{position:relative;display:grid;place-items:center;padding:20px}
.angelwrap .halo{
  position:absolute;width:min(74%,320px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(95,196,225,.5),rgba(1,97,189,.14) 46%,transparent 72%);
  animation:breathe 6s ease-in-out infinite;
}
.angelwrap img{position:relative;width:min(62%,240px);filter:drop-shadow(0 22px 48px rgba(0,116,166,.34))}
.angelwrap .spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--pec);opacity:.7}

.alist{list-style:none;display:grid;gap:16px;margin-top:26px}
.alist li{padding-left:30px;position:relative;font-size:16px;color:#1E3D4D}
.alist li::before{
  content:"";position:absolute;left:0;top:9px;width:13px;height:13px;border-radius:50%;
  background:linear-gradient(135deg,var(--pec),var(--ped));
}
.alist li b,.alist li strong{color:var(--ped)}

/* unità di interazione: vedo / spiego / propongo / decidi tu */
.unit{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-m);
  border-top:4px solid var(--pec);padding:clamp(24px,3vw,34px);max-width:620px;
}
.unit .steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.unit .steps i{
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;background:var(--peb);color:var(--ped);
}
.unit .steps i.on{background:linear-gradient(90deg,var(--ped),var(--pec));color:#fff}
.unit .msg{font-size:16.4px;color:#1E3D4D;line-height:1.55}
.unit .msg b{color:var(--ped)}
.unit .why{margin-top:14px;padding-left:16px;border-left:3px solid var(--pec);font-size:14.6px;color:var(--gray)}
.unit .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.unit .acts button{
  font-family:inherit;font-size:14px;font-weight:700;border-radius:99px;padding:11px 20px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink2);transition:transform .25s,border-color .25s,background .25s;
}
.unit .acts button:hover{transform:translateY(-2px);border-color:var(--pec)}
.unit .acts button.yes{background:linear-gradient(90deg,var(--ped),var(--pec));color:#fff;border-color:transparent}
.unit .note{margin-top:18px;font-size:12.6px;color:var(--gray)}

/* --------------------------------------------------------------------------
   15. WEOPLE³ — cubo, principi, passi
   -------------------------------------------------------------------------- */
.cubestage{--lato:clamp(150px,17vw,220px);perspective:1000px;display:grid;place-items:center;padding:clamp(20px,4vw,40px);cursor:grab;touch-action:none;user-select:none}
.cubestage.grabbing{cursor:grabbing}
.cubestage .cubehint{
  grid-area:1/1;align-self:end;justify-self:center;pointer-events:none;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
  transform:translateY(26px);transition:opacity .4s}
.cubestage.mosso .cubehint{opacity:0}
.cube3d.manuale{animation:none;transform:rotateX(var(--rx,-18deg)) rotateY(var(--ry,0deg))}
.cube3d{
  position:relative;width:var(--lato,clamp(150px,17vw,220px));aspect-ratio:1;
  transform-style:preserve-3d;animation:spin 26s linear infinite;
}
@keyframes spin{
  from{transform:rotateX(-18deg) rotateY(0)}
  to{transform:rotateX(-18deg) rotateY(360deg)}
}
.cube3d .f{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:14px;
  border:1.5px solid rgba(0,229,255,.5);border-radius:10px;
  background:linear-gradient(150deg,rgba(0,87,184,.5),rgba(4,18,43,.86));
  backdrop-filter:blur(2px);backface-visibility:hidden;
  font-size:clamp(12px,1.2vw,15px);font-weight:700;color:#fff;letter-spacing:.02em;
  box-shadow:inset 0 0 40px rgba(0,229,255,.16);
}
.cube3d .f i{display:block;font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ciano);margin-bottom:6px}
.cube3d .f1{transform:translateZ(calc(var(--lato) / 2))}
.cube3d .f2{transform:rotateY(90deg) translateZ(calc(var(--lato) / 2))}
.cube3d .f3{transform:rotateY(180deg) translateZ(calc(var(--lato) / 2))}
.cube3d .f4{transform:rotateY(-90deg) translateZ(calc(var(--lato) / 2))}
.cube3d .f5{transform:rotateX(90deg) translateZ(calc(var(--lato) / 2))}
.cube3d .f6{transform:rotateX(-90deg) translateZ(calc(var(--lato) / 2))}

.formula{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;
  font-size:clamp(17px,2.1vw,27px);font-weight:700;color:#fff;margin:0 auto;text-align:center;
}
.formula .op{color:var(--pec);font-size:1.1em}
.formula .res{display:inline-flex;align-items:center;gap:10px}
.formula .res img{height:clamp(26px,3vw,40px);width:auto}
.formula .t{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.formula.vis .t{opacity:1;transform:none}

.principi{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:44px}
.principio{
  border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
}
.principio .zero{
  font-size:clamp(44px,6vw,74px);font-weight:700;line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--ciano),var(--pec));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.principio h4{font-size:20px;margin:12px 0 10px}
.principio p{font-size:15.4px;color:rgba(255,255,255,.82)}

.steps7{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:40px}
.step{
  position:relative;background:#fff;border-radius:14px;padding:24px 22px 22px;box-shadow:var(--sh-s);
  border-top:3px solid var(--pec);
}
.step .num{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--ped);
  display:block;margin-bottom:10px;
}
.step p{font-size:14.8px;color:#1E3D4D}

/* --------------------------------------------------------------------------
   16. TIMELINE
   -------------------------------------------------------------------------- */
.tl{position:relative;margin-top:clamp(40px,6vw,72px)}
.tl .rail{
  position:absolute;top:7px;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blu),var(--azz),var(--ciano));
  transform:scaleX(0);transform-origin:left center;transition:transform 1.6s var(--ease);
}
.tl.vis .rail{transform:scaleX(1)}
.tl .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,34px)}
.tl .cell{padding-top:34px;position:relative}
.tl .cell::before{
  content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;
  background:var(--navy);border:3px solid rgba(255,255,255,.25);transition:border-color .5s,box-shadow .5s;
}
.tl .cell.vis::before{border-color:var(--ciano);box-shadow:0 0 0 6px rgba(0,229,255,.14)}
.tl .y{font-size:clamp(20px,2.2vw,26px);font-weight:700;color:var(--ciano);margin-bottom:10px;font-variant-numeric:tabular-nums}
.tl p{font-size:14.4px;color:rgba(255,255,255,.8)}
.tl .cell.now{background:rgba(0,229,255,.07);border-radius:14px;padding:34px 20px 22px;margin:0 -20px}
.tl .cell.now::before{left:20px}
.tl .cell.now p{color:rgba(255,255,255,.92)}

/* --------------------------------------------------------------------------
   17. CARD ORIZZONTALE (Weople in home)
   -------------------------------------------------------------------------- */
.cardH{
  display:grid;grid-template-columns:minmax(260px,380px) 1fr;background:#fff;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-s);border-top:4px solid var(--pec);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.cardH:hover{transform:translateY(-7px);box-shadow:0 26px 56px rgba(0,116,166,.18)}
.cardH .ph2{position:relative;min-height:260px;overflow:hidden}
.cardH .ph2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cardH:hover .ph2 img{transform:scale(1.05)}
.cardH .pn{position:absolute;top:14px;left:14px;z-index:2;background:rgba(4,18,43,.82);color:var(--pec);font-size:10.5px;font-weight:800;letter-spacing:.14em;padding:5px 11px;border-radius:99px}
.cardH .bd2{padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.cardH .tag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.cardH .blogo{display:block;height:38px;width:auto!important;object-fit:contain;margin:2px 0 16px}
.cardH p{font-size:15.6px;color:var(--ink2);flex:1}
.cardH .foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:14px;flex-wrap:wrap}
.cardH .foot .more{color:var(--ped);font-weight:700;text-decoration:none;font-size:15px}
.cardH .foot .more::after{content:" →";font-size:19px;-webkit-text-stroke:.7px currentColor}

/* --------------------------------------------------------------------------
   18. CARD "COSA STIAMO PREPARANDO"
   -------------------------------------------------------------------------- */
.crumbs{background:var(--peb)}
.crumbs .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:44px}
.crumbs .cell{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:var(--sh-s);transition:transform .35s var(--ease)}
.crumbs .cell:hover{transform:translateY(-6px)}
.crumbs .st{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--pec);padding:4px 11px;border-radius:99px;margin-bottom:12px}
.crumbs h4{font-size:16px;color:var(--ped);margin-bottom:8px}
.crumbs p{font-size:14.2px;color:#1E3D4D}

/* --------------------------------------------------------------------------
   19. FORM
   -------------------------------------------------------------------------- */
.formbox{
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,42px);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
}
.formbox.light{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-m)}
.formbox h3{font-size:clamp(21px,2.3vw,27px);margin-bottom:8px;letter-spacing:-.015em}
.formbox .fsub{font-size:15px;opacity:.82;margin-bottom:24px;max-width:46em}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow.one{grid-template-columns:1fr}
.frow.three{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15.5px;padding:13px 15px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.24);background:rgba(255,255,255,.94);color:var(--ink);
}
.formbox.light .field input,.formbox.light .field select,.formbox.light .field textarea{border-color:var(--line);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14.4px;line-height:1.5;margin:6px 0 16px}
.check input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--azz)}
.fnote{font-size:12.4px;opacity:.62;margin-top:16px;line-height:1.55}
/* «* campi obbligatori»: fra la casella del consenso e il bottone (segnalazione del consulente privacy, 18/09) */
.fnote.obbl{margin:-8px 0 16px}

/* generatore di codice anonimo */
.codebox{
  margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:22px;border-radius:14px;background:rgba(0,229,255,.08);border:1.5px dashed rgba(0,229,255,.4);
}
.codebox .code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:clamp(21px,2.6vw,30px);font-weight:700;letter-spacing:.12em;color:var(--ciano);
}
.codebox .code.empty{color:rgba(255,255,255,.6);letter-spacing:.2em}
.codebox .hint{font-size:13.4px;opacity:.78;flex:1;min-width:200px}

/* --------------------------------------------------------------------------
   20. CTA E FOOTER
   -------------------------------------------------------------------------- */
.cta{text-align:center;padding:clamp(90px,11vw,140px) 0}
.cta h2{font-size:clamp(23px,3.2vw,40px);font-weight:700;line-height:1.13;letter-spacing:-.02em;max-width:22em;margin:22px auto 18px}
.cta p{font-size:16px;color:var(--gray);max-width:38em;margin:0 auto 36px}
.cta .kick{justify-content:center}
.cta.dark p{color:rgba(255,255,255,.82)}

footer{background:var(--navy);color:#8FA3B8;padding:clamp(52px,6vw,72px) 0 30px;font-size:14.4px}
footer .grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:clamp(26px,3.4vw,44px);margin-bottom:40px}
footer .flogo{height:36px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:16px}
footer h4{color:#fff;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
footer a{color:#8FA3B8;text-decoration:none;transition:color .25s}
footer a:hover{color:var(--ciano)}
footer .base{border-top:1px solid var(--linew);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.4px;opacity:.72}
footer .todo{opacity:.5;font-style:italic}

/* --------------------------------------------------------------------------
   21. LOGOTIPO white_agent (HTML, non immagine)
   -------------------------------------------------------------------------- */
.walogo{font-family:var(--font-geo);font-weight:600;letter-spacing:-.015em;line-height:1;display:inline-block;white-space:nowrap}
.walogo .u{color:var(--ciano);font-weight:700;margin:0 .02em}
.walogo{color:var(--azz)}
.walogo .a{color:var(--blu)}
.walogo.lg{font-size:clamp(30px,4vw,46px)}
.walogo.md{font-size:30px}
.walogo.sm{font-size:22px}
.walogo.onblue,.walogo.onblue .a{color:#fff}

/* interruttore Weople³ */
.w3-off .cube-only{display:none!important}

/* loghi: mai stirati */
.blogo,.plogo,.flogo{width:auto;max-width:100%;object-fit:contain}

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .aree{grid-template-columns:repeat(4,1fr)}
  .crumbs .grid4{grid-template-columns:repeat(2,1fr)}
  .cards.four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .split,.split.rev,.dark .cols,.forkgrid,.aiwin .grid,.twowin .grid,.duo{grid-template-columns:1fr}
  .split.rev>*:first-child{order:2}
  .cards,.cards.two,.panels,.gcards,.svcindex,.principi,.shots{grid-template-columns:1fr}
  .tl .grid{grid-template-columns:1fr 1fr}
  .cardH{grid-template-columns:1fr}
  .cardH .ph2{min-height:220px}
  .stats{grid-template-columns:1fr 1fr}
  .twowin .grid{box-shadow:none;gap:16px;border-radius:0}
  .twowin .w1,.twowin .w2{border-radius:var(--r-lg)}
  .duo .dcol+.dcol{border-left:none;border-top:1px solid var(--line)}
  .frow,.frow.three{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .aree{grid-template-columns:repeat(2,1fr)}
  .aree .a{min-height:78px;font-size:12.6px}
  .tl .grid,.cards.four,.crumbs .grid4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stats div{border-left:none;border-top:1px solid var(--linew);padding-left:0}
  .stats div:first-child{border-top:none}
  footer .grid{grid-template-columns:1fr}
  .hero{min-height:88svh}
  .mock .row{grid-template-columns:110px 1fr 44px}
}

/* --------------------------------------------------------------------------
   23. RISPETTO DELLE PREFERENZE DI MOVIMENTO
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv,.rv-l,.rv-r,.rv-s,.wsplit .w{opacity:1!important;transform:none!important}
  .rv-clip{clip-path:none!important}
  .aree .a{opacity:1!important;transform:none!important}
  .hero .media img,.phero .media img{animation:none;transform:none}
  .cube3d{animation:none;transform:rotateX(-16deg) rotateY(-28deg)}
  .fullbleed .glow{opacity:.8!important;animation:none}
}

/* stampa */
@media print{
  nav,#bar,.scrollcue,.dotfield,.hero .net{display:none!important}
  .hero,.phero,.dark,.fullbleed,.aiwin{color:#000!important;background:#fff!important;min-height:0}
  .hero .media,.phero .media,.fullbleed .media,.hero .veil,.phero .veil,.fullbleed .veil{display:none}
}


/* ==========================================================================
   RITOCCHI DEL 7 SETTEMBRE (revisione Silvio)
   ========================================================================== */

/* banda «Due vittorie»: il testo occupa la metà sinistra, la foto respira a destra */
/* Il testo copriva la bambina sul go-kart rosso e il velo le arrivava sopra.
   Misurato a 1500px: il testo finiva a 750px, il braccio alzato della bambina
   cade a 643px. Ora l'inquadratura scorre a destra di 8 punti e il testo si
   stringe e si sposta a sinistra: fra la fine del testo e la bambina restano
   circa 170px di strada vuota. */
.banda-due .banda-tx{max-width:min(500px,46%);margin-left:calc(-1 * clamp(10px,1.4vw,26px))}
/* left:0 e non 14%: partendo dal 14% si vedeva il bordo sinistro della foto
   come uno stacco netto. Lo spostamento del soggetto lo dà il solo margine
   destro negativo, che allarga la foto oltre la sezione. */
.banda-due .media{left:0;right:-30%}
@media(max-width:980px){
  .banda-due .banda-tx{max-width:100%}
  .banda-due .media{left:0;right:0}
  .banda-due .veil{background:linear-gradient(0deg,rgba(4,18,43,.94) 0%,rgba(4,18,43,.72) 62%,rgba(4,18,43,.5) 100%)!important}
}

/* colonna singola quando accanto non c'è più il riquadro */
.unacol{display:block;max-width:52em}
.unacol p{font-size:16px;margin-bottom:16px;color:var(--ink2)}
.unacol p:last-child{margin-bottom:0}

/* i tre servizi come schede: sono la porta d'ingresso dei prodotti */
.svcindex.grande{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.svcindex.grande a{
  position:relative;padding:clamp(24px,2.6vw,32px);border-top:0;border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-s);border:1px solid rgba(0,87,184,.08);
  display:flex;flex-direction:column;gap:8px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.svcindex.grande a::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.svcindex.grande a.s1::before{background:#0057B8}
.svcindex.grande a.s2::before{background:#0084DE}
.svcindex.grande a.s3::before{background:#00A8FF}
.svcindex.grande a:hover{transform:translateY(-7px);box-shadow:0 26px 56px rgba(0,87,184,.16)}
.svcindex.grande .sn{
  font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--gray);
  font-variant-numeric:tabular-nums;
}
.svcindex.grande .sk{font-size:clamp(17px,1.7vw,21px);letter-spacing:0;text-transform:none;margin:0;line-height:1.25}
.svcindex.grande .sd{font-size:15px;color:var(--ink2);flex:1}
.svcindex.grande .sgo{
  font-size:22px;font-weight:800;-webkit-text-stroke:.8px currentColor;line-height:1;margin-top:4px;
  opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.svcindex.grande a.s1 .sgo{color:#0057B8}
.svcindex.grande a.s2 .sgo{color:#0084DE}
.svcindex.grande a.s3 .sgo{color:#00A8FF}
.svcindex.grande a:hover .sgo{opacity:1;transform:none}
@media(max-width:980px){.svcindex.grande{grid-template-columns:1fr}}

/* piastra chiara: i logo ufficiali restano tali anche sui fondi scuri */
.logoplate{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:14px;padding:12px 18px;box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.logoplate.grande{padding:14px 22px;margin-bottom:18px}
.logoplate img{display:block;height:clamp(26px,3vw,38px);width:auto}
.vault .box .logoplate{margin:0 auto 10px;padding:10px 16px}
.vault .box .logoplate img{height:28px;margin:0}


/* blocco "punto di osservazione": le connessioni attive, in chiaro */
.obs{margin-top:34px;border-radius:var(--r-lg);border:1.5px solid rgba(0,87,184,.18);background:linear-gradient(180deg,#FBFDFF,#EFF7FE);padding:28px}
.obs .ol{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blu);margin-bottom:16px}
.obs .chips{display:flex;flex-wrap:wrap;gap:10px}
.obs .chips b{font-size:14px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px;color:var(--ink)}
.obs .chips b.on{background:linear-gradient(90deg,var(--blu),var(--azz));color:#fff;border-color:transparent}
.obs .flow{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:14.4px;color:var(--ink2);flex-wrap:wrap}
.obs .flow i{font-style:normal;color:var(--azz);font-weight:700}


/* il caveau: le fonti entrano, le chiavi restano tue */
.vault{border-radius:var(--r-lg);background:linear-gradient(155deg,#0A6E96,#043546);color:#fff;padding:clamp(24px,3vw,34px);box-shadow:var(--sh-l)}
.vault .lbl{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pec);font-weight:800;margin-bottom:14px}
.vault .src{display:flex;flex-wrap:wrap;gap:8px}
.vault .src b{font-size:13.5px;font-weight:700;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:9px 16px}
.vault .src b.soon{background:none;border-style:dashed;color:rgba(255,255,255,.7);font-weight:600}
.vault .arrow{text-align:center;color:var(--pec);font-size:24px;line-height:1;margin:18px 0}
.vault .box{border:1.5px solid rgba(95,196,225,.55);border-radius:16px;padding:24px 20px;text-align:center;background:rgba(0,0,0,.2)}
.vault .box img{height:34px;width:auto;display:block;margin:0 auto 10px}
.vault .box .t{font-size:15.5px;color:rgba(255,255,255,.9)}
.vault .box .t b{color:#fff}
.vault .out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.vault .out span{font-size:12.8px;font-weight:700;text-align:center;padding:11px 8px;border-radius:10px;background:rgba(95,196,225,.16);border:1px solid rgba(95,196,225,.28)}
@media(max-width:520px){.vault .out{grid-template-columns:1fr}}
/* ponte verso Weople³ */
.bridge{border-radius:var(--r-lg);background:linear-gradient(140deg,#0A6E96,#031430);color:#fff;padding:clamp(30px,4vw,52px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,3vw,44px);align-items:center;box-shadow:var(--sh-l)}
.bridge img.cube{height:clamp(34px,4vw,52px);width:auto;display:block;margin-bottom:16px}
.bridge p{color:rgba(255,255,255,.88);font-size:16.4px}
.bridge .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* il sovratitolo del ponte («In arrivo molto presto, entro pochi mesi»): bianco, in grassetto,
   su una riga tutta sua in cima al riquadro, sopra testo e cubo */
.kick.bianco{color:#fff}
.bridge>.kick{grid-column:1/-1;font-size:13.5px;letter-spacing:.26em;margin-bottom:calc(-1*clamp(6px,1.4vw,18px))}
.bridge>.kick::before{width:40px;flex:none;background:#fff}
@media(max-width:980px){.bridge{grid-template-columns:1fr}}
/* su schermo stretto il sovratitolo va su due righe: il filetto resta allineato alla prima */
@media(max-width:600px){
  .bridge>.kick{align-items:flex-start;font-size:12.5px;letter-spacing:.2em;line-height:1.5}
  .bridge>.kick::before{width:26px;margin-top:.55em}
}


.cubehero{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(1000px 600px at 22% 32%,#0A6E96 0%,#04122B 58%),linear-gradient(160deg,#031430,#04122B)}
.cubehero .heroin{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:150px var(--pad) clamp(70px,9vh,110px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:center}
.cubehero h1{font-size:clamp(28px,4.8vw,60px);line-height:1.04;font-weight:700;letter-spacing:-.03em;margin:20px 0 0}
.cubehero .sub{font-size:clamp(15.5px,1.45vw,18.5px);margin:24px 0 0;color:rgba(255,255,255,.88);max-width:40em;line-height:1.55}
.cubehero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cubehero .w3logo{height:clamp(34px,4.4vw,58px);width:auto;display:block}
@media(max-width:980px){.cubehero .heroin{grid-template-columns:1fr}.cubehero{min-height:auto}}

.dirs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,26px);margin-top:clamp(34px,4vw,50px)}
.dir{background:#fff;border-radius:var(--r);padding:clamp(24px,2.8vw,32px);box-shadow:var(--sh-s);border-left:4px solid var(--pec);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.dir:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(0,116,166,.16)}
.dir h4{font-size:19.5px;color:var(--ped);margin-bottom:9px}
.dir p{font-size:15.4px;color:#1E3D4D}
@media(max-width:720px){.dirs{grid-template-columns:1fr}}

.when{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(38px,5vw,60px)}
.when .m{position:relative;padding-top:34px}
.when .m::before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:#04122B;border:3px solid rgba(255,255,255,.25);transition:border-color .5s,box-shadow .5s}
.when .m.vis::before{border-color:var(--pec);box-shadow:0 0 0 6px rgba(95,196,225,.16)}
.when .k{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pec);margin-bottom:8px;display:block}
.when h4{font-size:18px;color:#fff;margin-bottom:8px}
.when p{font-size:14.4px;color:rgba(255,255,255,.8)}
@media(max-width:880px){.when{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.when{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   RITOCCHI DEL 7 SETTEMBRE — note grafiche della revisione rev4
   -------------------------------------------------------------------------- */

/* PE-58: «Da dove passa tutto» senza la lineetta davanti */
.kick.senza-filetto::before{display:none}
.kick.senza-filetto{gap:0}

/* PE-01: la foto di apertura torna viva; il testo resta leggibile con un'ombra */
.phero.pe .media img{filter:saturate(1.18) contrast(1.06)}
.phero.pe .heroin{text-shadow:0 2px 18px rgba(2,22,32,.55)}

/* AZ-40: i 24 riquadri sono ipertesti */
.aree .a:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}

/* la scritta «trascina per girarlo» finiva sopra la faccia alta del cubo:
   il cubo prende la prima riga della griglia, la scritta la seconda, staccata */
.cubestage{grid-template-columns:minmax(0,1fr)}
.cubestage .cube3d{grid-row:1;grid-column:1}
.cubestage .cubehint{
  grid-row:2;grid-column:1;align-self:start;justify-self:center;
  transform:none;margin-top:calc(var(--lato) * .24);
}

/* --------------------------------------------------------------------------
   RITOCCHI DEL 7 SETTEMBRE, secondo giro (revisione Silvio sul link)
   -------------------------------------------------------------------------- */

/* 1. Loghi dentro le due strade: erano tutti alti 24px, ma a parità di altezza
      chi ha una lettera che scende sotto la riga (la g di agent, la p di weople)
      sembra più piccolo. Li ingrandisco e do a ciascuno l'altezza che lo fa
      leggere alla pari — così si vedono i colori e si nota il ³. */
.svc .slogo{height:auto;margin-bottom:14px}
.svc .slogo img{height:34px}
.svc .slogo img[src*="white-agent"]{height:46px;margin:-6px 0}
.svc .slogo img[src*="dotconn"]{height:40px;margin:-3px 0}
.svc .slogo img[src*="weople-cube"]{height:40px;margin:-3px 0}
.svc .slogo img[src*="weople.svg"]{height:36px;margin:-1px 0}

/* 2. Scritte sulle facce del cubo: un po' più grandi ovunque */
.cube3d .f{font-size:clamp(13px,1.4vw,17px)}
.cube3d .f i{font-size:11px;letter-spacing:.18em}

/* 3. Nella pagina Weople³ il cubo è il protagonista: molto più grande,
      e le scritte in proporzione, perché si leggano davvero */
.cubehero .cubestage{--lato:clamp(230px,26vw,370px)}
.cubehero .cube3d .f{font-size:clamp(17px,1.9vw,25px);padding:20px}
.cubehero .cube3d .f i{font-size:13px}
.cubehero .cubestage{padding:clamp(24px,3vw,44px)}

/* Nota di Silvio su H-62: niente lineetta davanti ai sovratitoli delle sezioni
   di chiusura su fondo blu — vale per tutte e quattro le pagine, non solo per
   «Da dove passa tutto», che era stato il primo caso. */
.cta .kick::before{display:none}
.cta .kick{gap:0}

/* Apertura «Per le aziende» con la mongolfiera. Il velo coprente resta alle
   due schede affiancate in home; qui, nella sua pagina, l'immagine torna dei
   suoi colori — esattamente come il bambino nella pagina persone. */
.phero.az .veil{background:linear-gradient(100deg,rgba(3,20,48,.90) 0%,rgba(3,20,48,.64) 42%,rgba(10,59,122,.24) 78%,rgba(10,59,122,.10) 100%)}
.phero.az .media img{filter:saturate(1.15) contrast(1.05)}
.phero.az .heroin{text-shadow:0 2px 18px rgba(2,14,32,.55)}

/* ==========================================================================
   RITOCCHI DEL 9 SETTEMBRE — revisione rev6 di Silvio
   ========================================================================== */

/* H-06 — il payoff sale di grado: non più una riga piccola in fondo all'apertura
   ma la conclusione della frase, subito sotto, in bianco e in evidenza.
   «Primi in Europa» resta ciano come era. */
.hero .heronote.payoff{
  margin:24px 0 0;padding:0;border-top:0;
  gap:6px 26px;
  font-size:clamp(12.5px,1.05vw,14.5px);letter-spacing:.13em;font-weight:700;
  color:#fff;text-shadow:0 2px 14px rgba(2,10,26,.5);
}
.hero .heronote.payoff b{color:var(--ciano)}
.hero .cta-row{margin-top:32px}

/* H-12 — i due marchi sotto il titolo della visione */
/* I due marchi non si pareggiano dando la stessa altezza al riquadro: dentro
   il proprio file, weople disegna le lettere piu' piccole di wekosmos. Misurato
   rendendo entrambi a 400px di altezza: la «w» iniziale (la stessa lettera in
   entrambi) viene 224px in weople e 281px in wekosmos, cioe' weople e' il 20%
   piu' piccola. Il fattore 1,254 (281/224) pareggia le lettere: e' quello che
   l'occhio confronta, non il riquadro. */
.chap .duelogo{--hlogo:clamp(26px,2.6vw,34px);
  display:flex;align-items:center;gap:clamp(20px,3vw,38px);flex-wrap:wrap;margin:16px 0 4px}
.chap .duelogo img{height:var(--hlogo);width:auto;display:block}
/* Pareggiate le lettere restano le linee di base sfalsate, perche' dentro il
   proprio file i due marchi siedono a altezze diverse: misurato, la base della
   «w» di weople viene 4,5px piu' alta di quella di wekosmos quando questa e' a
   34px. Il rientro verticale di 0,132 volte l'altezza le riporta sulla stessa
   riga a qualunque dimensione. */
.chap .duelogo img.lw{height:calc(var(--hlogo) * 1.254);
  transform:translateY(calc(var(--hlogo) * 0.132))}

/* W3-19 — via la sfumatura blu più scura sotto l'icona di Angel: resta un alone
   solo luminoso. E i micro-pallini non sono più polvere sparsa: stanno su un
   anello che gira piano, così danno movimento invece di rumore. */
.angelwrap .halo{
  background:radial-gradient(circle,rgba(120,214,238,.72) 0%,rgba(95,196,225,.30) 46%,transparent 74%);
}
.angelwrap .anello{
  position:absolute;width:min(86%,352px);aspect-ratio:1;border-radius:50%;
  pointer-events:none;animation:orbita 26s linear infinite;
}
/* ogni puntino è uno strato grande come l'anello, che ruota: il pallino
   sta in cima. Cosi il raggio è quello dell'anello e non quello del pallino. */
.angelwrap .anello i{position:absolute;inset:0;transform:rotate(var(--a))}
.angelwrap .anello i::before{
  content:"";position:absolute;top:var(--t);left:50%;margin-left:-4px;
  width:8px;height:8px;border-radius:50%;
  background:var(--pec);box-shadow:0 0 12px rgba(95,196,225,.95);
  animation:respiro 4.5s ease-in-out infinite;animation-delay:var(--d);
}
@keyframes orbita{to{transform:rotate(360deg)}}
@keyframes respiro{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .angelwrap .anello{animation:none}
  .angelwrap .anello i::before{animation:none;opacity:.75}
}

/* --------------------------------------------------------------------------
   AZ-51/53/54/55 — la finestra Wekosmos AI con le schermate vere.
   Il finto grafico è stato tolto: portava percentuali inventate e la nota
   «valori non reali» è stata eliminata. Al suo posto parlano le schermate.
   -------------------------------------------------------------------------- */
.aiwin .intro{max-width:60em}
.aiwin ul.tre{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);
  margin-top:clamp(30px,3.4vw,44px);
}
.aiwin ul.tre li{padding-left:30px}

/* Le tre schermate sono catture native a 1196 / 1728 / 1760 px di larghezza:
   la piu' piccola e' la 01. Mostrandole a 1200px la 01 lavora 1:1 e le altre
   due restano ridotte, quindi nitide. Piu' larghe di cosi' la 01 si sgranerebbe.
   I rapporti sono diversi (2,06 / 1,96 / 2,22) perche' le finestre catturate
   avevano proporzioni diverse: uniformo la larghezza, non l'altezza, perche'
   pareggiarla vorrebbe dire tagliare contenuto o aggiungere fondo finto. */
/* Le tre schermate sono catture a pagina intera di forme diverse: due verticali
   (1900x2084 e 1900x2646) e una orizzontale (1900x1088). Mostrate intere e in
   colonna la sezione arrivava a 3165px di altezza. Stanno quindi in fila come
   tre miniature della stessa misura — il ritaglio mostra la parte alta, quella
   riconoscibile — e al passaggio del mouse si apre l'immagine intera al centro
   dello schermo. Le miniature sono volutamente medio-grandi: troppo piccole
   nessuno ci passerebbe sopra. */
.vetrina{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,30px);margin-top:clamp(44px,5.5vw,76px);
  max-width:1200px;margin-inline:auto}
.vetrina .scatto{display:flex;flex-direction:column}
.vetrina figcaption{
  display:flex;align-items:baseline;gap:11px;margin-bottom:12px;
  font-size:15px;font-weight:600;line-height:1.4;color:#fff;max-width:none;min-height:4.2em;
}
.vetrina .num{font-size:19px}
.vetrina .cornice{
  padding:7px;border-radius:16px;position:relative;cursor:zoom-in;
  aspect-ratio:4/3;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vetrina .cornice img{
  height:100%;width:100%;object-fit:cover;object-position:top center;
  border-radius:9px;box-shadow:none;
}
.vetrina .cornice::after{
  content:"⤢";position:absolute;right:12px;bottom:11px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(4,18,43,.72);color:var(--ciano);font-size:15px;
  border:1px solid rgba(0,229,255,.4);
  opacity:0;transition:opacity .25s var(--ease);
}
.vetrina .cornice:hover{transform:translateY(-5px);
  box-shadow:0 30px 64px rgba(0,0,0,.62),0 0 0 1px rgba(0,229,255,.4)}
.vetrina .cornice:hover::after{opacity:1}

/* la schermata intera, al passaggio del mouse o al tocco */
.zoomwrap{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(16px,3vw,46px);background:rgba(2,10,24,.82);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s;
}
.zoomwrap.on{opacity:1;visibility:visible}
.zoomwrap figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.zoomwrap img{
  max-height:calc(100vh - clamp(96px,12vw,150px));max-width:100%;width:auto;
  border-radius:12px;display:block;
  box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 0 1px rgba(0,229,255,.3);
}
.zoomwrap .did{
  font-size:15px;color:rgba(255,255,255,.88);text-align:center;max-width:52em;
  display:flex;align-items:baseline;gap:11px;
}
.zoomwrap .did i{
  font-style:normal;font-family:var(--font-geo);font-weight:700;font-size:19px;
  background:linear-gradient(180deg,var(--ciano),var(--azz));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@media(max-width:860px){
  .vetrina{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .vetrina figcaption{min-height:0;font-size:15.5px}
  .vetrina .cornice{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){
  .vetrina .cornice,.zoomwrap{transition:none}
  .vetrina .cornice:hover{transform:none}
}
.vetrina .scatto{margin:0}
.vetrina figcaption{
  display:flex;align-items:baseline;gap:16px;margin-bottom:16px;
  font-size:clamp(16px,1.5vw,20px);font-weight:600;line-height:1.35;color:#fff;
  max-width:44em;
}
.vetrina .num{
  flex:0 0 auto;font-style:normal;font-family:var(--font-geo);font-size:clamp(20px,2.1vw,27px);font-weight:700;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,var(--ciano),var(--azz));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vetrina .cornice{line-height:0}
.vetrina .cornice img{width:100%;height:auto;display:block}
@media(max-width:980px){
  .aiwin ul.tre{grid-template-columns:1fr}
  .vetrina figcaption{font-size:16px}
}

/* --------------------------------------------------------------------------
   Corpo del testo: Silvio ha indicato come riferimento il paragrafo della
   banda go-kart (17px / 1,6). Le colonne scure della home e il testo di
   «Due vittorie, un mestiere solo» stavano a 16 e si leggevano male: porto
   tutta la lettura corrente su quel riferimento, un filo sopra dove serve.
   -------------------------------------------------------------------------- */
p{font-size:17px}
.split p,
.unacol p,
.cta p,
.alist li{font-size:17px;line-height:1.62}
.dark .cols p{font-size:17.5px;line-height:1.62}
.twowin .body{font-size:17.5px;line-height:1.62}
.twowin p{font-size:17px;line-height:1.6}
.bridge p{font-size:17.5px;line-height:1.6}
.road .rhead p{font-size:16.4px}
.panel p{font-size:16.4px}
.cardH p{font-size:16.4px}

/* --------------------------------------------------------------------------
   Link verso l'esterno: cliccabili e riconoscibili, ma non grandi come i
   titoli (la riga «nome · indirizzo» sotto un titolo di sezione).
   -------------------------------------------------------------------------- */
.fuorilink{
  margin-top:14px;font-size:14.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.68);
}
.fuorilink a{
  color:var(--ciano);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(0,229,255,.45);padding-bottom:1px;
  transition:border-color .25s,color .25s;
}
.fuorilink a::after{content:" ↗";font-size:.9em;-webkit-text-stroke:0}
.fuorilink a:hover{color:#fff;border-bottom-color:#fff}

a.inlink{
  color:var(--ped);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(0,116,166,.4);
  transition:border-color .25s,color .25s;
}
a.inlink:hover{color:var(--azz);border-bottom-color:var(--azz)}
.dark a.inlink,.aiwin a.inlink{color:var(--ciano);border-bottom-color:rgba(0,229,255,.45)}
.dark a.inlink:hover,.aiwin a.inlink:hover{color:#fff;border-bottom-color:#fff}

/* --------------------------------------------------------------------------
   Finestra Wekosmos AI — revisione grafica chiesta da Silvio:
   marchio a sinistra e chip a destra, composizione centrata per darle
   risalto, i tre riquadri col rilievo e la bordatura delle schede della
   pagina aziende, e il fondo blu della sezione «Chi è Hoda oggi» con i
   pallini azzurri in movimento.
   -------------------------------------------------------------------------- */
.aiwin{
  background:linear-gradient(158deg,var(--navy) 42%,var(--navy2));
  isolation:isolate;
}

/* testata: da una parte il marchio, dall'altra il «in arrivo» */
.aiwin .aitesta{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,44px);
}
.aiwin .aitesta .badge{margin:0}

/* la composizione al centro */
.aiwin .intro{max-width:66em;margin-inline:auto;text-align:center}
.aiwin .intro h2{margin-inline:auto;max-width:24em}
.aiwin .intro p{margin-inline:auto;max-width:54em}

/* i tre riquadri: schede in rilievo, filetto colorato in cima */
.aiwin ul.tre li{
  position:relative;overflow:hidden;padding:clamp(26px,2.8vw,34px);
  background:#fff;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 48px rgba(2,12,30,.38);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.aiwin ul.tre li::before{
  content:"";position:absolute;left:0;right:0;top:0;
  width:auto;height:4px;border-radius:0;background:#0057B8;
}
.aiwin ul.tre li:nth-child(2)::before{background:#0084DE}
.aiwin ul.tre li:nth-child(3)::before{background:#00A8FF}
.aiwin ul.tre li:hover{transform:translateY(-7px);box-shadow:0 32px 68px rgba(2,12,30,.5)}
.aiwin ul.tre li b{color:var(--blu);font-size:clamp(17px,1.7vw,20px);line-height:1.25}
.aiwin ul.tre li span{color:var(--ink2);font-size:15.6px}

@media(max-width:980px){
  .aiwin .aitesta{justify-content:flex-start}
  .aiwin .intro{text-align:left}
  .aiwin .intro h2,.aiwin .intro p{margin-inline:0}
}

/* --------------------------------------------------------------------------
   Finestra Wekosmos AI, secondo giro:
   · il marchio sulla sua targa bianca sta al centro
   · la chip «in arrivo» si è spostata dopo i tre riquadri, prima delle
     schermate: è l'informazione che accompagna quello che si sta per vedere
   · i tre riquadri restano in evidenza ma sul fondo naturale della pagina:
     il rilievo lo fanno il filo di luce in cima, l'ombra e il pannello un
     filo più chiaro del fondo — non il bianco
   · le cornici delle schermate non hanno più fondo e bordo bianchi: erano
     loro la striscia di colore diverso attorno alla foto
   -------------------------------------------------------------------------- */
.aiwin .aitesta{justify-content:center;margin-bottom:clamp(24px,3vw,38px)}
.aiwin .quando{display:flex;justify-content:center;margin-top:clamp(34px,4vw,54px)}
.aiwin .quando .badge{margin:0}

.aiwin ul.tre li{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 22px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.18);
}
.aiwin ul.tre li::before{background:#0084DE}
.aiwin ul.tre li:nth-child(2)::before{background:#00A8FF}
.aiwin ul.tre li:nth-child(3)::before{background:#00E5FF}
.aiwin ul.tre li b{color:#fff}
.aiwin ul.tre li span{color:rgba(255,255,255,.84)}
.aiwin ul.tre li:hover{
  transform:translateY(-7px);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  box-shadow:0 32px 68px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.26);
}

/* La schermata bianca appoggiata sul blu scuro non aveva contorno: raggio 14px
   su 1360px di larghezza è invisibile e il filo ciano al 24% non si legge, così
   la foto sembrava incollata. Ora è un telaio di vetro scuro: niente fascia
   chiara (che era il difetto di prima), un filo appena percepibile all'esterno,
   angoli generosi e un'ombra profonda che la solleva dal fondo. */
/* Passepartout, la soluzione scelta da Silvio. Due cose che nel provino non
   andavano e che erano la causa dello «spazio libero» e degli «elementi
   disconnessi» che ha visto nell'angolo alto a sinistra:
   1. la fascia era rgba(255,255,255,.07): su questo blu non si legge come
      cornice, si legge come buco fra il bordo esterno e la foto. Portata a .16.
   2. i raggi non erano concentrici (esterno 20, interno 10, fascia 12): negli
      angoli la fascia risultava più spessa che sui lati. Ora esterno = interno
      + fascia esatto (22 = 12 + 10), così lo spessore è uniforme su tutto il giro.
   Il filo scuro sull'immagine incastra la foto nella fascia invece di
   lasciarla appoggiata sopra. */
.vetrina .cornice{
  padding:10px;border-radius:22px;border:0;
  background:rgba(255,255,255,.16);
  box-shadow:0 38px 90px rgba(0,0,0,.6),
             0 0 0 1px rgba(255,255,255,.22);
}
.vetrina .cornice img{border-radius:12px;box-shadow:0 0 0 1px rgba(2,12,30,.45)}
@media(max-width:700px){
  .vetrina .cornice{padding:7px;border-radius:17px}
  .vetrina .cornice img{border-radius:10px}
}

/* Il paragrafo centrato lasciava «in azienda.» sola nell'ultima riga.
   text-wrap:pretty chiede al browser di evitare le righe finali orfane;
   la misura un filo più stretta aiuta il ritmo delle righe. */
.aiwin .intro h2{text-wrap:balance}
/* Silvio: il paragrafo va giustificato, non centrato (il titolo resta al centro). */
/* Misure prese con Nunito Sans installata (prima l'ambiente usava un font di
   ripiego piu' larga dell'8% e le mie misure non corrispondevano allo schermo
   di Silvio). Righe e riempimento dell'ultima riga, misurati:
     48em -> 4 righe, ultima piena al 97%   (da 880px in su)
     46em -> 5 righe, ultima al 10%: «in azienda.» sola — il difetto segnalato
     42em -> 5 righe, ultima al 37% (sei parole), stabile da 800 a 1500px
   Da 880px in su sta a 48em, cioe' quattro righe e l'ultima piena: le due
   parole sono tirate su. Fra 560 e 879px 48em ricadrebbe nell'orfano, quindi
   scende a 42em, dove l'ultima riga porta sei parole. */
.aiwin .intro p{max-width:48em;text-wrap:pretty;text-align:justify;text-justify:inter-word;hyphens:none}
@media(max-width:879px){
  .aiwin .intro p{max-width:42em}
}
/* Fra 520 e 660px la misura la impone il viewport: a 515px il paragrafo cade
   su sette righe e balance non si applica piu' (Chrome bilancia fino a sei),
   cosi' «in azienda.» resta sola. Dieci pixel rubati per lato portano la
   larghezza a 535px: sei righe, ultima piena al 92%. Misurato a 560px.
   Se il testo di AZ-45 viene riscritto, ricontrollare questa fascia. */
@media(min-width:520px) and (max-width:660px){
  .aiwin .intro p{margin-inline:-10px}
}
@media(max-width:700px){
  /* su schermo stretto il giustificato apre buchi fra le parole: meglio a bandiera.
     Sotto i 700px la misura la impone il viewport, non il max-width, quindi
     l'unica leva contro la riga orfana e' chiedere al browser di bilanciare. */
  .aiwin .intro p{text-align:left;text-wrap:balance}
}
/* 46em è misurato: con questo testo dà cinque righe e l'ultima piena al 72%.
   Se il paragrafo viene riscritto, ricontrollare che non torni una riga orfana. */

/* Titolo bilanciato: a 600px il titolo di «Che cos'è» lasciava «direzioni»
   sola sulla terza riga. Misurato dopo: tre righe piene, niente parola sola.
   La classe sta solo su quel titolo, per non ricomporre gli altri. */
h2.bil{text-wrap:balance}

/* --------------------------------------------------------------------------
   FINESTRE DESCRITTIVE SULLE 24 AREE WEKOSMOS
   Il testo di ogni area sta nell'attributo data-desc della tessera: testi
   validati, riportati verbatim. La finestra è una sola, riusata per tutte,
   appesa al body e posizionata sul documento — così resta agganciata alla
   tessera quando la pagina scorre.
   -------------------------------------------------------------------------- */
.areadesc{
  position:absolute;top:0;left:0;z-index:95;
  width:min(400px,calc(100vw - 28px));
  padding:18px 21px 19px;border-radius:12px;
  background:linear-gradient(180deg,#0C2F57,#06182E);
  border:1px solid rgba(0,168,255,.38);
  box-shadow:0 28px 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09);
  color:rgba(255,255,255,.92);
  font-family:var(--font);font-size:14.8px;line-height:1.56;
  text-wrap:pretty;
  opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .17s var(--ease),transform .17s var(--ease),visibility .17s;
  pointer-events:none;
}
.areadesc.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* il filo di luce in cima richiama la barretta colorata delle tessere */
.areadesc::before{
  content:"";position:absolute;left:21px;right:21px;top:0;height:2px;
  background:linear-gradient(90deg,var(--azz),var(--ciano));
  border-radius:0 0 2px 2px;opacity:.75;
}
.aree .a:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}
@media(max-width:640px){
  .areadesc{font-size:14.2px;padding:16px 18px 17px}
}
@media(prefers-reduced-motion:reduce){
  .areadesc{transition:none}
}

/* trappola anti-robot dei moduli: fuori dallo schermo, non nel flusso di lettura */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* segnaposto dei campi più leggibile (17→18/09: le caselle erano troppo scure) */
.field input::placeholder{color:#5E7085;opacity:1}
/* le due schede-esempio di Angel affiancate (18/09): risparmio a sinistra, sicurezza a destra */
.units2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);align-items:start;margin-top:clamp(30px,4vw,44px)}
.units2 .unit{max-width:none;margin:0;height:100%}
@media (max-width:900px){.units2{grid-template-columns:1fr}}

/* ---- le due schede in cui parla Angel (18/09): scure e vive, per distinguerle dai box informativi sotto */
.units2 .unit.angel-card{position:relative;overflow:hidden;border-top:0;color:#fff;
  background:linear-gradient(150deg,#0B4468 0%,#062A47 55%,#04122B 100%);
  box-shadow:0 26px 60px rgba(4,18,43,.26);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.units2 .unit.angel-card:hover{transform:translateY(-4px);box-shadow:0 34px 72px rgba(4,18,43,.32)}
.angel-card::before{content:"";position:absolute;right:-110px;top:-110px;width:320px;height:320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,229,255,.30),rgba(0,229,255,0) 66%);animation:respiro 5.5s ease-in-out infinite}
.angel-card::after{content:"";position:absolute;left:-80px;bottom:-120px;width:260px;height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(95,196,225,.22),rgba(95,196,225,0) 66%)}
.angel-card > *{position:relative;z-index:1}
.angel-card .ahead{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.angel-card .avatar{width:40px;height:40px;border-radius:50%;background:#fff;padding:5px;box-shadow:0 0 0 3px rgba(95,196,225,.32),0 10px 26px rgba(0,229,255,.28)}
.angel-card .nome{font-weight:800;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:#BFEFFF}
.angel-card .tema{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 13px;border-radius:99px;
  background:linear-gradient(90deg,var(--pec),var(--ciano));color:var(--navy)}
.angel-card .big{font-family:var(--font-geo);font-size:clamp(20px,1.9vw,25px);font-weight:700;line-height:1.22;letter-spacing:-.015em;color:#fff;margin:16px 0 14px}
.angel-card .steps i{background:rgba(255,255,255,.1);color:#BFEFFF}
.angel-card .steps i.on{background:linear-gradient(90deg,var(--pec),var(--ciano));color:var(--navy)}
.angel-card .msg{color:rgba(255,255,255,.92)}
.angel-card .msg strong{color:var(--ciano)}
.angel-card .why{border-left-color:var(--ciano);color:rgba(255,255,255,.74)}
.angel-card .acts button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35);color:#fff}
.angel-card .acts button:hover{border-color:var(--ciano);background:rgba(255,255,255,.1)}
.angel-card .acts button.yes{background:linear-gradient(90deg,var(--pec),var(--ciano));color:var(--navy);border-color:transparent}
.angel-card .note{color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:reduce){.angel-card::before{animation:none}}

/* ---- i quattro box informativi: leggeri, con icona, quattro in fila (18/09) */
.dirs{grid-template-columns:repeat(4,1fr)}
.dir{border-left:0;padding:clamp(20px,2.2vw,26px);border-top:3px solid var(--pec)}
.dir .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;margin-bottom:14px;color:var(--ped);
  background:linear-gradient(135deg,var(--peb),#fff);border:1px solid rgba(0,116,166,.16)}
.dir .ic svg{width:22px;height:22px}
.dir h4{font-size:16.5px;line-height:1.3;margin-bottom:8px}
.dir p{font-size:14.4px;line-height:1.55}
@media (max-width:1100px){.dirs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dirs{grid-template-columns:1fr}}