@font-face {
    font-family: 'urbanist';
    src: url('../fonts/Urbanist.otf'); /* IE9 Compat Modes */ 
    src: url('../fonts/Urbanist.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/Urbanist.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/Urbanist.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-display: swap;     
  }
  
  *, *::before, *::after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
  body {
    position:relative;
    margin: 0;        
    font-size: 1em;     
    background-color: white;
    color:var(--cl-txt);
    width:100%;        
    font-family: var(--font-normal);     
    overflow-x: clip;
    cursor:default;
    transition: background 1s ease-in-out;
}

html {scroll-behavior: smooth; scroll-padding-top: 80px; max-width:100%; overflow-x: clip; }
img { max-width: 100%; }
:root {   
  --text: #282828;  
  --cw:#0061A0;
  --cw-l:#1ac0f2;
  --cw-light:  #e6f0f8;
  --ipn:#5bb8c9;
  --ipn2:#2874a7;
  --ipn-d:#243b64;
  --ipn-light: #ebf8fb;
  --sec:#0d9483;
  --sec-d: #02443c;
  --sec-l:#d6dfde;
  --antracite: #1c2030;   
  --antracite-l: #5e6066;   
  --muted: #5a6882;
  --white: #FAF9F6;
  --light: #8fa0b8;
  --off:   #f6f8fb;
  --boxshadowBOX: -1px -1px 4px rgb(184, 184, 184), 1px 1px 4px rgb(184, 184, 184);
  --font-normal: 'urbanist', sans-serif; 
  --clborder: #afbbd4;
  --shadow-nav: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.45);
  --fsize18: 18px;
  --lwhite: rgba(255,255,255,.7);
}

.pd-inline-gen {padding-inline: 20em;}

/* ── NAVBAR ── */
nav {
  position: fixed; top: 0; z-index: 200; width:100%;
  background-color: white; padding: 0 20em; height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  transition: box-shadow .35s;
  will-change:background-color;
}
nav.sc { background-color: white; box-shadow: 0 2px 8px rgba(21,21,21,.25); color:var(--sec); }
.nav-logo { display: flex; align-items: center; gap: 11px; cursor: pointer }
.nav-logo-img {width:200px; height:auto; transition:width 0.3s ease;}

.nav-links { display: flex; gap: 0; align-items: stretch; height: 70px }
.nav-item { position: relative; display: flex; align-items: center }
.nav-item > a, .nav-links > a {
  padding: 0 16px; font-size: 17px; font-weight: 600; height: 100%;
  display: flex; align-items: center; gap: 4px;
  color: var(--text); transition: color .25s, background .2s, font-size 0.3s ease;
  letter-spacing: .1px; position: relative;
  text-decoration:none;
}
nav.sc .nav-item > a, nav.sc .nav-links > a { color: var(--text); font-size:14px; }
nav.sc .nav-logo-img {width:180px;}
.nav-item > a:hover, .nav-links > a:hover { background: rgba(0,0,0,.04) }
nav.sc .nav-item > a:hover, nav.sc .nav-links > a:hover { background: rgba(255,255,255,.1); color:  var(--sec); }
/* underline indicator */
.nav-item > a::after, .nav-links > a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--sec); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
nav.sc .nav-item > a::after, nav.sc .nav-links > a::after { background: rgba(255,255,255,.6); }
.nav-item > a:hover::after, .nav-links > a:hover::after,
.nav-item:hover > a::after { transform: scaleX(1) }
@media  (min-resolution: 1.5dppx) {
  .nav-item > a, .nav-links > a {font-size:17px; }
  nav.sc .nav-item > a, nav.sc .nav-links > a { font-size:16px; }
}
/* Dropdown parent: no background change, only subtle text brighten */
.nav-item:hover > a { color: var(--text); }
nav.sc .nav-item:hover > a { color:  var(--text); }

/* ── TRIGGER DROPDOWN SENZA PAGINA (es. "Chi siamo"): <button>, non link vuoto ── */
/* Replica lo stile di .nav-item > a per coerenza visiva */
.nav-item > .nav-trigger {
  padding: 0 16px; font-size: 17px; font-weight: 600; height: 100%;
  display: flex; align-items: center; gap: 4px;
  color: var(--text); transition: color .25s, background .2s, font-size 0.3s ease;
  letter-spacing: .1px; position: relative;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
nav.sc .nav-item > .nav-trigger { color: var(--text); font-size: 14px; }
.nav-item > .nav-trigger:hover { background: rgba(0,0,0,.04); }
nav.sc .nav-item > .nav-trigger:hover { background: rgba(255,255,255,.1); color: var(--sec); }
.nav-item > .nav-trigger::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--sec); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
nav.sc .nav-item > .nav-trigger::after { background: rgba(255,255,255,.6); }
.nav-item > .nav-trigger:hover::after,
.nav-item:hover > .nav-trigger::after { transform: scaleX(1); }
@media (min-resolution: 1.5dppx) {
  .nav-item > .nav-trigger { font-size: 17px; }
  nav.sc .nav-item > .nav-trigger { font-size: 16px; }
}
.nav-item:hover > .nav-trigger { color: var(--text); }
nav.sc .nav-item:hover > .nav-trigger { color: var(--text); }

/* ── MEGA DROPDOWN ── */
/* ── DROPDOWN SINTESI-STYLE ── */
.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%; transform: translateX(-50%) translateY(-10px);
  min-width: 580px;
  background: var(--antracite);
  /* ombra minima solo su lati e basso (mai sopra: il box resta attaccato alla barra) */
  box-shadow: 0 14px 24px -12px rgba(0,0,0,.18),
              -9px 10px 20px -14px rgba(0,0,0,.13),
               9px 10px 20px -14px rgba(0,0,0,.13);
  opacity: 0; visibility: hidden;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  z-index: 190;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop::before, .nav-drop::after { display: none }

/* "Chi siamo" (dropdown non-mega, a destra nella barra): ancorato a destra
   così non sborda oltre il bordo destro su schermi desktop più stretti. */
.nav-drop:not(.hy-mega){ left: auto; right: 0; transform: translateX(0) translateY(-10px); }
.nav-item:hover .nav-drop:not(.hy-mega),
.nav-item:focus-within .nav-drop:not(.hy-mega){ transform: translateX(0) translateY(0); }

.nav-drop-inner {
  display: grid; grid-template-columns: 1fr 1fr;
}

.drop-col-l {
  background: var(--antracite);
  padding: 32px 28px;
  position: relative;
}
.drop-col-l::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.05) 100%);
  pointer-events: none;
}
.drop-col-r {
  background: var(--white);
  padding: 32px 28px;  
}

.drop-col-h {
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 2px solid;
}
.drop-col-l .drop-col-h { color: var(--white);  }
.drop-col-r .drop-col-h { color: var(--antracite); }
.drop-col-b-ipn {border-bottom-color: var(--ipn); }
.drop-col-b-cw {border-bottom-color: var(--cw); }


.nav-drop a {
  display: block;
  font-size: 14px; font-weight: 600;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  transition: all .22s ease;
  text-decoration: none;
}
.drop-col-l a { color: rgba(255,255,255,.85) }
.drop-col-l a:hover {
  color: var(--white); background: rgba(255,255,255,.15);
  border-left-color: var(--cw); transform: translateX(6px);
}
.drop-col-r a { color: var(--antracite) }
.drop-col-r a:hover {
  color: var(--antracite); background: rgba(0,0,0,.04);
  border-left-color: var(--ipn); transform: translateX(6px);
}

.nav-drop-arrow { font-size: 10px; transition: transform .25s; display: inline-block; margin-left: 4px }
.nav-item:hover .nav-drop-arrow,
.nav-item:focus-within .nav-drop-arrow { transform: rotate(180deg) }

.nav-burger { display: none; flex-direction: column; gap: 6px; cursor: pointer; padding: 8px; z-index: 200 }
.nb-l { display: block; width: 26px; height: 2px; background: var(--text); transition: all .4s cubic-bezier(.77,0,.18,1); }
nav.sc .nb-l { background: var(--text); }
.nav-burger.open .nb-l:nth-child(1) { transform: translateY(8px) rotate(45deg) }
.nav-burger.open .nb-l:nth-child(2) { opacity: 0; transform: scaleX(0) }
.nav-burger.open .nb-l:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }

/* ── NAVBAR: responsività ricalcolata dopo l'aggiunta della voce "Quanto costa" ──
   #nav dà specificità sufficiente a vincere sui blocchi @media(min-resolution) e su nav.sc */
@media (max-width: 1900px) {
  nav#nav .nav-links > a, nav#nav .nav-item > a, nav#nav .nav-item > .nav-trigger { padding: 0 11px; font-size: 16px; }
  nav#nav.sc .nav-links > a, nav#nav.sc .nav-item > a, nav#nav.sc .nav-item > .nav-trigger { font-size: 14px; }
}
@media (max-width: 1340px) {
  nav#nav .nav-links > a, nav#nav .nav-item > a, nav#nav .nav-item > .nav-trigger { padding: 0 8px; font-size: 15px; }
  nav#nav.sc .nav-links > a, nav#nav.sc .nav-item > a, nav#nav.sc .nav-item > .nav-trigger { font-size: 13px; }
}

/* ─────────────────────────────────────────────────
   FULLSCREEN MOBILE MENU — sipario, stile SINTESI
───────────────────────────────────────────────── */
#menuOv {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
}
.mo-panel-l,
.mo-panel-r {
  position: absolute; top: 0; bottom: 0; width: 51%; background: #2a2f3d;
  transition: transform .6s cubic-bezier(.77,0,.18,1);
}
.mo-panel-l { left: 0;  transform: translateX(-102%); }
.mo-panel-r { right: 0; transform: translateX(102%); }
#menuOv.open { pointer-events: all }
#menuOv.open .mo-panel-l { transform: translateX(0); }
#menuOv.open .mo-panel-r { transform: translateX(0); }
#menuOv.closing .mo-panel-l { transform: translateX(-102%); }
#menuOv.closing .mo-panel-r { transform: translateX(102%); }

.mo-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 72px 32px 40px;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#menuOv.open .mo-inner { opacity: 1; pointer-events: all; transition-delay: .42s; }

.mo-close {
  position: absolute; top: 20px; right: 20px;
  width: 48px; height: 48px; background: rgba(255,255,255,.07); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color:  var(--white);;
  transition: background .2s, transform .35s;
}
.mo-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }

/* Main links — stile SINTESI: sinistra, font medio, separatori sottili */
.mo-nav { display: flex; flex-direction: column; }

.mo-nav > a,
.mo-has-sub {
  font-size: 22px; font-weight: 600; color: rgba(255,255,255,.85);
  padding: 16px 0; letter-spacing: -.2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center;
  opacity: 0; transform: translateY(10px);
  transition: transform .4s ease, opacity .4s ease, color .2s;
  text-decoration:none;
}
.mo-nav > a:hover, .mo-nav > .mo-has-sub:hover { color: var(--sec); }



/* stagger */
#menuOv.open .mo-nav > a,
#menuOv.open .mo-has-sub { transform: translateY(0); opacity: 1; }


/* Servizi trigger */
.mo-has-sub {
  cursor: pointer; user-select: none;
  justify-content: space-between;
  width: 100%;
  background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  font-family: var(--font-normal); text-align: left;
}
/* when expanded: remove bottom border (sub-items provides its own) */
.mo-has-sub.sub-open {
  border-bottom: none !important;
}
.mo-sub-arr {
  font-size: 14px; color: rgba(255,255,255,.3);
  transition: transform .3s ease, color .3s ease;
  margin-left: auto; flex-shrink: 0;
}
.mo-has-sub.sub-open { color: var(--sec) }
.mo-has-sub.sub-open .mo-sub-arr { transform: rotate(180deg); color: var(--sec) }

/* Submenu — stile SINTESI: categorie verde + voci sotto */
/* Grid trick for smooth expand/collapse animation */
.mo-sub-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.77,0,.18,1);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mo-sub-items-inner {
  overflow: hidden;
  padding: 0;
  transition: padding .4s cubic-bezier(.77,0,.18,1);
}
.mo-sub-items.open {
  grid-template-rows: 1fr;
}
.mo-sub-items.open .mo-sub-items-inner {
  padding: 8px 0 12px 0;
}

.mo-sub-items a {
  display: block !important;
  font-size: 17px !important; font-weight: 500 !important;
  color: rgba(255,255,255,.6) !important;
  padding: 8px 0 !important;
  letter-spacing: 0 !important;
  transform: none !important; opacity: 1 !important;
  transition: color .2s !important; transition-delay: 0s !important;
  border: none !important;
  text-decoration:none;
}
.mo-sub-items a:hover { color:  var(--white) !important; }

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
footer { background: var(--antracite); color: var(--lwhite); padding-top: 64px; padding-bottom:40px; border-top: 1px solid rgba(255,255,255,.05) }
.fg { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 52px }
.footer-logo-img {max-width:350px; height:auto;}
.fb p { font-size: 14px; line-height: 1.5; max-width: 240px; }
.fc h5 { font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 16px;color:var(--sec); }
.fc a, .fc p { display: block; font-size: 14px; color: var(--lwhite); margin-bottom: 10px; transition: color .2s; }
.fc a:hover { color: var(--white); }
.footer-bot { border-top: 1px solid rgba(255,255,255,.06); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; flex-wrap: wrap; gap: 12px; }
.fbl a { color: var(--lwhite); margin-left: 20px; font-size: 13px; font-weight: 600; transition: color .2s }
.fbl a:hover { color: rgba(255,255,255,.7) }
.fc-co-socials { display: flex; gap: 14px; margin-top: 14px }
.fc-co-socials a {  
  display: flex; align-items: center; justify-content: center;
  color: var(--lwhite); font-size: 16px;
  transition: all .2s; text-decoration: none;
}
.fc-co-socials a:hover {color: var(--white); background: rgba(255,255,255,.06) }

@media(max-width:1787px) {.pd-inline-gen { padding-inline: 10em; }}
@media(max-width:1500px) {.pd-inline-gen { padding-inline: 5em; }}
@media(max-width:1300px) {.pd-inline-gen { padding-inline: 4em; }}
@media(max-width:1350px) {
  .fg {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .fb { grid-column: span 2 }
}
@media(max-width:1260px) {  
  .nav-drop { display: none !important }  /* hide mega-menu on mobile */
  nav#nav { padding-block: 0; }
  nav#nav .nb-l { background:  var(--text); }
  .nav-links { display: none }
  .nav-burger { display: flex }
 
  footer { padding-top: 40px; padding-bottom:28px; }
}
@media(max-width:900px) {
  .fg {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .fb {
    grid-column: span 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fb p { max-width: 100% }
  .footer-bot { justify-content: center; text-align:center; }
  .fbl {width:100%;}
  .footer-logo-img {max-width:300px;}
}

@media (max-width:750px) {.footer-bot { justify-content: center; text-align:center; } .footer-logo-img {max-width:300px;} .pd-inline-gen {padding-inline:2.5em;}.fc a, .fc p {font-size:16px;} .fbl {width:100%;}}

@media(max-width:600px) {
  .mo-inner { padding: 90px 28px 40px }  
  .svc-main { padding: 36px }
  .svc-grid { grid-template-columns: 1fr }  
  #menuOv { grid-template-columns: 1fr }
  .mo-inner { padding: 80px 28px }

  .fg { grid-template-columns: 1fr; gap: 32px; text-align:center;}
  .fc-co-socials {justify-content: center;}
  .fb { grid-column: span 1; text-align: left; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────
   BUTTONS — no border-radius, slide fill
───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-normal); font-weight: 800; cursor: pointer; border: none;
  letter-spacing: .2px; font-size: 15px;
  /* gradient slide fill — avoids z-index/pseudo-element text coverage */
  background-size: 200% 100%; background-position: right center;
  transition: background-position .4s cubic-bezier(.77,0,.18,1), transform .25s ease, box-shadow .25s ease, color .2s ease;
  text-decoration:none;
}
.btn:hover { background-position: left center; }
/* btn-cta: green → darker green */
.btn-cta {
  padding: 16px 34px; color:  var(--white); border: 2px solid var(--sec); 
  background-image: linear-gradient(to right, var(--antracite) 50%, var(--sec) 50%);
}
.btn-cta:hover { transform: translateY(-2px); color:  var(--white); border: 2px solid var(--antracite);}
.btn-cta-alt {background-image: linear-gradient(to right, var(--white) 50%, var(--sec) 50%); }
.btn-cta-alt:hover {color:var(--sec); transform:none;}
/* btn-s: outline, fills dark */
.btn-s {
  padding: 16px 34px; color: var(--text); border: 2px solid var(--antracite);
  background-image: linear-gradient(to right, var(--sec) 50%, transparent 50%);
}
.btn-s:hover { border-color: var(--sec); transform: translateY(-2px); color:  var(--white); }

@media (max-width:768px) {.btn100 {width:100%;justify-content: center; text-align: center;}}

/* ── BACK TO TOP (sticky = ok su iOS, non fixed; markup nel footer) ── */
.backtop-wrap {
  position: sticky; bottom: 24px; z-index: 90;
  height: 0;                    /* non aggiunge spazio in fondo alla pagina */
  display: flex; justify-content: flex-end;
  padding-right: 24px;
  pointer-events: none;         /* la fascia larga non intercetta i click */
}
.backtop {
  pointer-events: auto;
  transform: translateY(-100%); /* sale sopra la linea sticky: interamente visibile */
  flex: none; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sec); color: var(--white);
  border: none; cursor: pointer; font-size: 17px; line-height: 1;
  /* anello bianco (sparisce sul bianco, stacca su sezioni verdi/scure) + ombra morbida */
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 8px 22px rgba(28,32,48,.30);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease, background .2s ease;
}
.backtop.show { opacity: 1; visibility: visible; }
.backtop:hover { background: #fff; color: var(--sec); box-shadow: 0 0 0 2px var(--sec), 0 8px 22px rgba(28,32,48,.30); }
@media (max-width: 600px) {
  .backtop-wrap { bottom: 16px; padding-right: 16px; }
  .backtop { width: 42px; height: 42px; font-size: 16px; }
}


/* ════════════════════════════════════
   CTA PANEL
   position:fixed — centrato a metà viewport
════════════════════════════════════ */
@keyframes slideFromRight{
  from{transform:translateY(-50%) translateX(100%);}
  to{transform:translateY(-50%) translateX(0);}
}
@keyframes tabIn{
  from{opacity:0;transform:translateY(-50%) translateX(20px);}
  to{opacity:1;transform:translateY(-50%) translateX(0);}
}

/* Panel aperto */
.panel{
  position:fixed;
  right:0;
  top:50%;
  top: 50dvh;
  transform:translateY(-50%);
  width:290px;
  background:var(--antracite);
  border-left:3px solid var(--sec);
  border-top:1px solid rgba(255,255,255,.3);
  border-bottom:1px solid rgba(255,255,255,.3);
  box-shadow:-4px 0 16px rgba(0,0,0,.12);
  z-index:150;
  animation:slideFromRight .4s cubic-bezier(.77,0,.18,1) both;
}
.panel.hidden{display:none;}

.panel-head{
  padding:20px 20px 0;
  display:flex;align-items:flex-center;justify-content:space-between;gap:8px;
}
.panel-kicker{
  font-size:10px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--sec);
  display:flex;align-items:center;gap:6px;
}
.panel-kicker::before{content:'';width:14px;height:1px;background:var(--sec);}

.panel-close{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.3);font-size:13px;cursor:pointer;
  background:rgba(255,255,255,.06);
  transition:all .25s;flex-shrink:0;
}
.panel-close:hover{background:rgba(255,255,255,.12);color:#fff;transform:rotate(90deg);}

.panel-body{padding:14px 20px 24px;}

.panel-title{
  font-size:20px;font-weight:900;color:#fff;
  letter-spacing:-.5px;line-height:1.15;margin-bottom:10px;
}
.panel-txt{
  font-size:14px;color:rgba(255,255,255,.4);
  line-height:1.65;margin-bottom:20px;
}

.panel-stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2px;margin-bottom:20px;
  border:1px solid rgba(13,148,131,.2);
}
.panel-stat{
  background:rgba(255,255,255,.04);
  padding:10px 12px;transition:background .2s;
  text-align:center;
}
.panel-stat-n{font-size:22px;font-weight:900;color:var(--sec);letter-spacing:-1px;line-height:1;}
.panel-stat-l{font-size:12px;color:rgba(255,255,255,.3);font-weight:600;line-height:1.3;margin-top:3px;}

.panel-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 16px;
  background:var(--sec);color:#fff;
  font-size:16px;font-weight:800;
  width:100%;border:none;cursor:pointer;
  text-decoration: none;
}
.panel-arrow {transition: transform 0.7s ease;}
.panel-btn:hover .panel-arrow{transform: translateX(6px);}
.panel-note{font-size:14px;color:rgba(255,255,255,.2);text-align:center;margin-top:10px;}

/* Tab chiusa */
.panel-tab{
  position:fixed;
  right:0;
  top:50%;
  top: 45dvh;
  transform:translateY(-50%);
  background:var(--sec);
  display:flex;align-items:center;
  cursor:pointer;z-index:150;
  box-shadow:-2px 0 8px rgba(13,148,131,.2);
  transition:background .2s;
  animation:tabIn .3s cubic-bezier(.77,0,.18,1) both;
  padding-right:10px;
  border:2px solid rgba(255,255,255,.3);
  border-right:none;
}
.panel-tab.hidden{display:none;}
.panel-tab:hover{background:var(--antracite);}

.panel-tab-ico{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:#fff;flex-shrink:0;
}
.panel-tab-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:12px;font-weight:800;letter-spacing:1.5px;
  color:rgba(255,255,255,.85);text-transform:uppercase;
  white-space:nowrap;padding:14px 0; 
}

/* ── RESPONSIVE ──
   Su mobile il panel parte chiuso (vedi anche JS).
   La tab resta sempre visibile e cliccabile.        */
@media(max-width:1200px){
  .panel{ width:260px; }
}
@media(max-width:768px){
  .panel{ width:100%; border-left:none; border-top:3px solid var(--sec); top:auto; bottom:0; transform:none; }
  .panel:not(.hidden){ z-index:10000; }  /* da aperto copre il cookie round (#cookieWrapper z-index:9999) */
  @keyframes slideFromRight{
    from{transform:translateY(100%);}
    to{transform:translateY(0);}
  }
  .panel-tab-label {font-size:10px;}
  .panel-tab-ico {font-size:14px; width:34px; height:34px;}
  
  @keyframes tabIn{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
  }
}

/*stili generali */
.width100 {width:100%;}
.h100 {height:100vh;} 
.relative {position:relative;}
.wrap-flex {display:flex; }
.column {flex-direction:column;}
.wrap {flex-wrap: wrap;}
.center {align-items:center;justify-content: center;}
.flexwrap {flex-wrap: wrap;}
.spc_btw {justify-content: space-between;}
.justify-c {justify-content: center;}
.justify-r {justify-content: flex-end;}
.justify-s {justify-content: flex-start;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.fit {width:fit-content;}

.txt-c {text-align:center;}
.txt-r {text-align:right;}
.txt-l {text-align: left;}
.txt-j {text-align: justify;}
.txt-w {color:white;}
.txt-green {color:var(--sec);}
.uppercase {text-transform: uppercase;}
.underline {text-decoration: underline;}
.bold {font-weight:600;}

.pointer {cursor:pointer;}
.gap5 {gap:5px;}
.gap10 {gap:10px;}
.gap16 {gap:16px;}
.gap20 {gap:20px;}
.gap30 {gap:30px;}
.gap50 {gap:50px;}
.gap100 {gap:100px;}

.m0 {margin:0;}
.ml-auto {margin-left:auto;}
.mr-auto {margin-right:auto;}
.m-auto {margin: 0 auto;}
.m-block0 {margin-block: 0;} /* top e bottom */
.m-inline0 {margin-inline: 0;} /* left e right */
.mt0 {margin-top:0;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt16 {margin-top:16px;}
.mt20 {margin-top:20px;}
.mt50 {margin-top:50px;}
.mt100 {margin-top:100px;}
.mb0 {margin-bottom:0;}
.mb3 {margin-bottom:3em;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb16 {margin-bottom:16px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb50 {margin-bottom:50px;}
.mb100 {margin-bottom:100px;}

.p0 {padding:0;}
.p5 {padding: 5px;}
.p10 {padding:10px;}

.pt0 {padding-top:0;}
.pb0 {padding-bottom:0;}
.p-block0 {padding-block: 0;} /* top e bottom */
.p-inline0 {padding-inline: 0;} /* left e right */

.bradius {border-radius:var(--bradius);}

.link-gen {color:var(--muted);}
.link-gen:hover {color:var(--sec);}

.bg-cw {background:var(--cw);}
.bg-ipn {background:var(--ipn2);}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}
.bkgr-image_cover {
  background-size: cover;
  -webkit-background-size:cover;
   -moz-background-size: cover;
   -o-background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  width:100%;
  height:100vh;
}

/* ═══════════════════════════════════════════════════
   MEGA-MENU "COME TI AIUTA"
   Sinistra (scuro): Caratteristiche + Servizi Premium — titolo = link, voci = solo leggibili
   Destra (bianco):  Cosa fa Helyos — etichetta, ogni voce = link
   Un colore per area: Caratteristiche verde (--sec), Cosa fa Helyos blu (--cw), Servizi celeste (--ipn)
═══════════════════════════════════════════════════ */
.nav-drop.hy-mega{ min-width:0; width:864px; }
.hy-mega-inner{ display:grid; grid-template-columns:344px 520px; }

.hy-acc-sec{ --acc:var(--sec); }   /* Caratteristiche → verde */
.hy-acc-ipn{ --acc:var(--ipn); }   /* Servizi Premium → celeste */
.hy-acc-cw{  --acc:var(--cw);  }   /* Cosa fa Helyos → blu */

/* ── colonna sinistra (scura) ── */
.hy-col-l{ background:var(--antracite); padding:26px 22px; position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:22px; }
.hy-col-l::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.045) 100%); }
.hy-sec{ position:relative; z-index:1; }
.hy-sec + .hy-sec{ padding-top:8px; }

/* titolo di sezione = link: bianco, MAIUSCOLO, linea sotto, "Scopri →" sempre visibile */
.hy-mega a.hy-sec-link{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px 11px; border-left:3px solid transparent; border-bottom:2px solid var(--acc);
  color:#fff; font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; cursor:pointer; transition:background .2s, border-left-color .2s, transform .2s;
}
.hy-sec-link .hy-cta{ margin-left:auto; display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#fff; }
.hy-sec-link .hy-cta i{ font-size:11px; transition:transform .22s; }
.hy-mega a.hy-sec-link:hover{ background:rgba(255,255,255,.06); border-left-color:var(--acc); transform:translateX(5px); }
.hy-mega a.hy-sec-link:hover .hy-cta i{ transform:translateX(3px); }

/* voci descrittive — NON link */
.hy-voices{ margin:9px 0 2px 2px; display:flex; flex-direction:column; gap:2px; }
.hy-voice{ display:flex; align-items:center; gap:9px; padding:5px 4px; color:rgba(255,255,255,.6); font-size:13px; font-weight:500; cursor:default; }
.hy-voice i{ width:16px; text-align:center; color:var(--acc); opacity:.92; font-size:13px; flex:none; }

/* ── colonna destra (bianca) ── */
.hy-col-r{ background:var(--white); padding:26px 24px; display:flex; flex-direction:column; --acc:var(--cw); }
.hy-kicker{ font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--antracite); padding-bottom:11px; margin-bottom:6px; border-bottom:2px solid var(--acc); }
.hy-mega a.hy-kicker{ display:flex; align-items:center; gap:8px; padding:9px 12px 11px; border-left:3px solid transparent; font-size:10px; text-decoration:none; cursor:pointer; transition:background .2s, border-left-color .2s, transform .2s; }
.hy-mega a.hy-kicker .hy-cta{ margin-left:auto; display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--antracite); }
.hy-mega a.hy-kicker .hy-cta i{ font-size:11px; transition:transform .22s; }
.hy-mega a.hy-kicker:hover{ background:rgba(0,0,0,.04); border-left-color:var(--acc); transform:translateX(5px); }
.hy-mega a.hy-kicker:hover .hy-cta i{ transform:translateX(3px); }
.hy-cosafa{ margin-top:6px; }
.hy-cfg + .hy-cfg{ margin-top:6px; padding-top:8px; border-top:1px solid var(--clborder); }
.hy-sublbl{ font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); padding:6px 12px 5px; cursor:default; }
.hy-sublbl small{ color:var(--light); font-weight:600; letter-spacing:0; text-transform:none; }
.hy-cfg-core{ display:flex; flex-direction:column; }
.hy-cfg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px 14px; }
.hy-mega a.hy-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-left:3px solid transparent;
  color:var(--antracite); font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:background .2s, border-left-color .2s, transform .2s;
}
.hy-link i{ width:18px; text-align:center; color:var(--acc); font-size:14px; flex:none; }
.hy-mega a.hy-link:hover{ background:rgba(0,0,0,.04); border-left-color:var(--acc); transform:translateX(6px); }

/* ── MOBILE: dentro l'accordion "Come ti aiuta" (#menuOv .mo-sub-items) ── */
.hy-mo{ display:flex; flex-direction:column; }
.hy-mo-grp{ margin-top:12px; }
.hy-mo-grp:first-child{ margin-top:2px; }
.hy-mo-grp.hy-acc-sec{ --acc:var(--sec); }
.hy-mo-grp.hy-acc-ipn{ --acc:var(--ipn); }
.hy-mo-grp.hy-acc-cw{ --acc:var(--cw-l); }   /* blu, variante chiara su fondo scuro */
/* titolo mobile = link: bianco, MAIUSCOLO, linea sotto, "Scopri →" */
.mo-sub-items-inner a.hy-mo-seclink{
  display:flex !important; align-items:center; gap:10px;
  padding:12px 2px 11px !important; border:none !important; border-bottom:2px solid var(--acc) !important;
  color:#fff !important; font-weight:800 !important; font-size:13px !important; letter-spacing:1.5px !important; text-transform:uppercase;
}
.hy-mo-seclink .hy-cta{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#fff; }
.hy-mo-voices{ margin:9px 0 4px 2px; display:flex; flex-direction:column; gap:1px; }
.hy-mo-voice{ display:flex; align-items:center; gap:10px; padding:7px 2px; color:rgba(255,255,255,.55); font-size:14.5px; font-weight:500; }
.hy-mo-voice i{ width:16px; text-align:center; color:var(--acc); opacity:.9; font-size:14px; flex:none; }
.mo-sub-items-inner a.hy-mo-link{
  display:flex !important; align-items:center; gap:11px;
  padding:11px 0 11px 14px !important; border:none !important; border-left:2px solid transparent !important;
  color:rgba(255,255,255,.9) !important; font-weight:600 !important; font-size:16px !important; letter-spacing:0 !important;
}
.mo-sub-items-inner a.hy-mo-link:hover{ color:#fff !important; border-left-color:var(--acc) !important; }
.hy-mo-link i{ width:16px; text-align:center; color:var(--acc); font-size:14px; flex:none; }
.hy-mo-sublbl{ font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.3); margin:12px 0 2px; padding-left:14px; }