/* 

TemplateMo - Finance Business

https://templatemo.com/tm-545-finance-business

*/

body {
  font-family: 'IBM Plex Sans', sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p {
	margin-bottom: 0px;
	font-size: 14px;
	color: #666666;
	line-height: 30px;
}
a {
	text-decoration: none!important;
}
ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0px;
}

a.filled-button {
	background-color: #6D28D9;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 12px 30px;
	border-radius: 30px;
	display: inline-block;
	transition: all 0.3s;
}

a.filled-button:hover {
	background-color: #fff;
	color: #6D28D9;
}

a.border-button {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 10px 28px;
	border-radius: 30px;
	display: inline-block;
	transition: all 0.3s;
}

a.border-button:hover {
	background-color: #fff;
	color: #6D28D9;
}

.section-heading {
	text-align: center;
	margin-bottom: 80px;
}

.section-heading h2 {
	font-size: 44px;
	font-weight: 600;
	color: #1e1e1e;
}

.section-heading em {
	font-style: normal;
	color: #6D28D9;
}

.section-heading span {
	display: block;
	margin-top: 15px;
	text-transform: uppercase;
	font-size: 15px;
	color: #666;
	letter-spacing: 1px;
}

#preloader {
  overflow: hidden;
  background: #6D28D9;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Sub Header Style */

.sub-header {
	background-color: #6D28D9;
	height: 46px;
	line-height: 46px;
}

.sub-header ul li {
	display: inline-block;
}

.sub-header ul.left-info li {
	border-left: 1px solid rgba(250,250,250,0.3);
	padding: 0px 20px;
}

.sub-header ul.left-info li:last-child {
	border-right: 1px solid rgba(250,250,250,0.3);
}

.sub-header ul.left-info li i {
	margin-right: 10px;
	font-size: 18px;
}

.sub-header ul.left-info li a {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.sub-header ul.right-icons {
	float: right;
}

.sub-header ul.right-icons li {
	margin-right: -4px;
	width: 46px;
	display: inline-block;
	text-align: center;
	border-right: 1px solid rgba(250,250,250,0.3);
}

.sub-header ul.right-icons li:first-child {
	border-left: 1px solid rgba(250,250,250,0.3);
}

.sub-header ul.right-icons li a {
	color: #fff;
	transition: all 0.3s;
}

.sub-header ul.right-icons li a:hover {
	opacity: 0.75;
}



/* Header Style */
header {
	position: absolute;
	z-index: 99999;
	width: 100%;
	background-color: transparent!important;
	height: 80px;
	-webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
header .navbar {
	padding: 20px 0px;
}
.background-header .navbar {
	padding: 10px 0px;
}
.background-header {
	top: 0;
	position: fixed;
	background-color: #fff!important;
	box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
}
.background-header .navbar-brand h2 {
	color: #6D28D9!important;
}
.background-header .navbar-nav a.nav-link {
	color: #1e1e1e!important;
}
.background-header .navbar-nav .nav-link:hover,
.background-header .navbar-nav .active>.nav-link,
.background-header .navbar-nav .nav-link.current,
.background-header .navbar-nav .nav-link.show,
.background-header .navbar-nav .show>.nav-link {
	color: #6D28D9!important;
}
.navbar .navbar-brand {
	float: 	left;
	margin-top: 12px;
	outline: none;
}
.navbar .navbar-brand h2 {
	color: #fff;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 700;
	-webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.navbar .navbar-brand h2 em {
	font-style: normal;
	font-size: 16px;
}
#navbarResponsive {
	z-index: 999;
}
.navbar-collapse {
	text-align: center;
}
.navbar .navbar-nav .nav-item {
	margin: 0px 15px;
}
.navbar .navbar-nav a.nav-link {
	text-transform: capitalize;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: #fff;
	transition: all 0.5s;
	margin-top: 5px;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .active>.nav-link,
.navbar .navbar-nav .nav-link.current,
.navbar .navbar-nav .nav-link.show,
.navbar .navbar-nav .show>.nav-link {
	color: #6D28D9;
	border-bottom: 3px solid #6D28D9;
}
.navbar .navbar-toggler-icon {
	background-image: none;
}
.navbar .navbar-toggler {
	border-color: #fff;
	background-color: #fff;	
	height: 36px;
	outline: none;
	border-radius: 0px;
	position: absolute;
	right: 30px;
	top: 20px;
}
.navbar .navbar-toggler-icon:after {
	content: '\f0c9';
	color: #6D28D9;
	font-size: 18px;
	line-height: 26px;
	font-family: 'FontAwesome';
}



/* Banner Style */

.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

.img-fill img {
  min-height: 100%;
  min-width: 100%;
  position: relative;
  display: inline-block;
  max-width: none;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  float: left;
  padding: 0;
}

.Modern-Slider .item .img-fill {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height:95vh;
}

.Modern-Slider .item-1 .img-fill {
	background-image: url(../images/slide_01.jpg);
}

.Modern-Slider .item-2 .img-fill {
	background-image: url(../images/slide_02.jpg);
}

.Modern-Slider .item-3 .img-fill {
	background-image: url(../images/slide_03.jpg);
}

.Modern-Slider .NextArrow{
  position:absolute;
  top:50%;
  right:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
  cursor: pointer;
}

.Modern-Slider .NextArrow:before{
  content:'\f105';
}

.Modern-Slider .PrevArrow {
  position:absolute;
  top:50%;
  left:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
  cursor: pointer;
}

.Modern-Slider .PrevArrow:before{
  content:'\f104';
}

ul.slick-dots {
  display: none!important;
}

.Modern-Slider .text-content {
	text-align: left;
  	width: 75%;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

.Modern-Slider .item h6 {
  margin-bottom: 15px;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  color:#6D28D9;
  animation:fadeOutRight 1s both;
}

.Modern-Slider .item h4 {
  margin-bottom: 30px;
  text-transform: uppercase;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color:#FFF;
  overflow:hidden;
  animation:fadeOutLeft 1s both;
}

.Modern-Slider .item p {
	max-width: 570px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	line-height: 30px;
	margin-bottom: 40px;
}

.Modern-Slider .item a {
  margin: 0 5px;
}

.Modern-Slider .item.slick-active h6{
  animation:fadeInDown 1s both 1s;
}

.Modern-Slider .item.slick-active h4{
  animation:fadeInLeft 1s both 1.5s;
}

.Modern-Slider .item.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

.Modern-Slider .buttons {
  position: relative;
}

.Modern-Slider {background:#000;}


/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}




/* Request Form */

.request-form {
	background-color: #6D28D9;
	padding: 40px 0px;
	color: #fff;
}

.request-form h4 {
	font-size: 22px;
	font-weight: 600;
}

.request-form span {
	font-size: 15px;
	font-weight: 400;
	display: inline-block;
	margin-top: 10px;
}

.request-form a.border-button {
	margin-top: 12px;
	float: right;
}




/* Services */

.services {
	margin-top: 140px;
}

.service-item img {
	width: 100%;
	overflow: hidden;
}

.service-item .down-content {
	background-color: #F8FAFC;
	padding: 30px;
}

.service-item .down-content h4 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.25px;
	margin-bottom: 15px;
}

.service-item .down-content p {
	margin-bottom: 20px;
}



/* Fun Facts */

.fun-facts {
	margin-top: 140px;
	background-image: url(../images/fun-facts-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding: 140px 0px;
	color: #fff;
}

.fun-facts span {
	text-transform: uppercase;
	font-size: 15px;
	color: #fff;
	letter-spacing: 1px;
	margin-bottom: 10px;
	display: block;
}

.fun-facts h2 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 35px;
}

.fun-facts em {
	font-style: normal;
	color: #6D28D9;
}

.fun-facts p {
	color: #fff;
	margin-bottom: 40px;
}

.fun-facts .left-content {
	margin-right: 45px;
}

.count-area-content {
	text-align: center;
	background-color: rgba(250,250,250,0.1);
	padding: 25px 30px 35px 30px;
	margin: 15px 0px;
}

.count-digit {
    margin: 5px 0px;
    color: #6D28D9;
    font-weight: 700;
    font-size: 36px;
}
.count-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
}



/* More Info */

.more-info {
	margin-top: 140px;
}

.more-info .left-image img {
	width: 100%;
	overflow: hidden;
}

.more-info .more-info-content {
	background-color: #F8FAFC;
}

.about-info .more-info-content {
	background-color: transparent;
}

.about-info .right-content {
	padding: 0px!important;
	margin-right: 30px;
}

.more-info .right-content {
	padding: 45px 45px 45px 30px;
}

.more-info .right-content span {
	text-transform: uppercase;
	font-size: 15px;
	color: #666;
	letter-spacing: 1px;
	margin-bottom: 10px;
	display: block;
}

.more-info .right-content h2 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 35px;
}

.more-info .right-content em {
	font-style: normal;
	color: #6D28D9;
}

.more-info .right-content p {
	margin-bottom: 30px;
}


/* Testimonials Style */

.about-testimonials {
	margin-top: 0px!important;
}

.testimonials {
	margin-top: 140px;
	background-color: #F8FAFC;
	padding: 140px 0px;
}
.testimonial-item .inner-content {
	text-align: center;
	background-color: #fff;	
	padding: 30px;
	border-radius: 5px;
}
.testimonial-item p {
	font-size: 14px;
	font-weight: 400;
}
.testimonial-item h4 {
	font-size: 19px;
	font-weight: 700;
	color: #1e1e1e;
	letter-spacing: 0.5px;
	margin-bottom: 0px;
}
.testimonial-item span {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	font-size: 14px;
	color: #6D28D9;
}
.testimonial-item img {
	max-width: 60px;
	border-radius: 50%;
	margin: 25px auto 0px auto;
}




/* Call Back Style */

.callback-services {
	border-top: 1px solid #eee;
	padding-top: 140px;
}

.contact-us {
	background-color: #F8FAFC;
	padding: 140px 0px;
}

.contact-us .contact-form {
	background-color: transparent!important;
	padding: 0!important;
}

.callback-form {
	margin-top: 140px;
}

.callback-form .contact-form {
	background-color: #6D28D9;
	padding: 60px;
	border-radius: 5px;
	text-align: center;
}

.callback-form .contact-form input {
	border-radius: 20px;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	padding: 0px 15px;
	color: #475569;
	font-size: 13px;
	text-transform: none;
	box-shadow: none;
	border: none;
	margin-bottom: 35px;
}

.callback-form .contact-form input:focus {
	outline: none;
	box-shadow: none;
	border: none;
}

.callback-form .contact-form textarea {
	border-radius: 20px;
	height: 120px;
	max-height: 200px;
	min-height: 120px;
	display: inline-block;
	padding: 15px;
	color: #475569;
	font-size: 13px;
	text-transform: none;
	box-shadow: none;
	border: none;
	margin-bottom: 35px;
}

.callback-form .contact-form textarea:focus {
	outline: none;
	box-shadow: none;
	border: none;
}

.callback-form .contact-form ::-webkit-input-placeholder { /* Edge */
  color: #aaa;
}
.callback-form .contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #aaa;
}
.callback-form .contact-form ::placeholder {
  color: #aaa;
}

.callback-form .contact-form button.border-button {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 10px 28px;
	border-radius: 30px;
	display: inline-block;
	transition: all 0.3s;
	outline: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
}

.callback-form .contact-form button.border-button:hover {
	background-color: #fff;
	color: #6D28D9;
}

.contact-us .contact-form button.filled-button {
	background-color: #6D28D9;
	color: #fff;
	border: none;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 12px 30px;
	border-radius: 30px;
	display: inline-block;
	transition: all 0.3s;
	outline: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
}

.contact-us .contact-form button.filled-button:hover {
	background-color: #fff;
	color: #6D28D9;
}



/* Partners Style */

.contact-partners {
	margin-top: -8px!important;
}

.partners {
	margin-top: 140px;
	background-color: #F8FAFC;
	padding: 60px 0px;
}

.partners .owl-item {
	text-align: center;
	cursor: pointer;
}

.partners .partner-item img {
	max-width: 156px;
	margin: auto;
}



/* Footer Style */

footer {
	background-color: #232323;
	padding: 80px 0px;
	color: #fff;
}

footer h4 {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.25px;
	margin-bottom: 35px;
}
footer p {
	color: #fff;
}

footer ul.social-icons {
	margin-top: 25px;
}

footer ul.social-icons li {
	display: inline-block;
	margin-right: 5px;
}

footer ul.social-icons li:last-child {
	margin-right: 0px;
}

footer ul.social-icons li a {
	width: 34px;
	height: 34px;
	display: inline-block;
	line-height: 34px;
	text-align: center;
	background-color: #fff;
	color: #232323;
	border-radius: 50%;
	transition: all 0.3s;
}

footer ul.social-icons li a:hover {
	background-color: #6D28D9;
}

footer ul.menu-list li {
	margin-bottom: 13px;
}

footer ul.menu-list li:last-child {
	margin-bottom: 0px;
}

footer ul.menu-list li a {
	font-size: 14px;
	color: #fff;
	transition: all 0.3s;
}

footer ul.menu-list li a:hover {
	color: #6D28D9;
}

footer .contact-form input {
	border-radius: 20px;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	padding: 0px 15px;
	color: #aaa!important;
	background-color: #343434;
	font-size: 13px;
	text-transform: none;
	box-shadow: none;
	border: none;
	margin-bottom: 15px;
}

footer .contact-form input:focus {
	outline: none;
	box-shadow: none;
	border: none;
	background-color: #343434;
}

footer .contact-form textarea {
	border-radius: 20px;
	height: 120px;
	max-height: 200px;
	min-height: 120px;
	display: inline-block;
	padding: 15px;
	color: #aaa!important;
	background-color: #343434;
	font-size: 13px;
	text-transform: none;
	box-shadow: none;
	border: none;
	margin-bottom: 15px;
}

footer .contact-form textarea:focus {
	outline: none;
	box-shadow: none;
	border: none;
	background-color: #343434;
}

footer .contact-form ::-webkit-input-placeholder { /* Edge */
  color: #aaa;
}
footer .contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #aaa;
}
footer .contact-form ::placeholder {
  color: #aaa;
}

footer .contact-form button.filled-button {
	background-color: transparent;
	color: #fff;
	background-color: #6D28D9;
	border: none;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 12px 30px;
	border-radius: 30px;
	display: inline-block;
	transition: all 0.3s;
	outline: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
}

footer .contact-form button.filled-button:hover {
	background-color: #fff;
	color: #6D28D9;
}



/* Sub-footer Style */

.sub-footer {
	background-color: #343434;
	text-align: center;
	padding: 25px 0px;
}

.sub-footer p {
	color: #fff;
	font-weight: 300;
	letter-spacing: 0.5px;
}

.sub-footer a {
	color: #fff;
}


.page-heading {
	position: relative;
	text-align: center;
	background-image: url(../images/page-heading-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 230px 0px 150px 0px;
	color: #fff;
	overflow: hidden;
}

/* Overlay schiarito: il vecchio fondo era troppo scuro.
   Gradiente delicato che lascia leggere l'immagine ma mantiene il contrasto del testo. */
.page-heading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(76,29,149,0.34) 0%, rgba(30,20,60,0.28) 55%, rgba(20,14,40,0.16) 100%);
	z-index: 0;
}
.page-heading > .container { position: relative; z-index: 1; }

.page-heading h1 {
	text-transform: none;
	font-size: clamp(60px, 8vw, 92px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
	color: #fff; /* la regola globale h1..h6 (#0F172A) rendeva il titolo illeggibile sullo sfondo scuro */
	text-shadow: 0 2px 18px rgba(15,23,42,0.45);
	perspective: 700px; /* per l'autocomposizione 3D delle lettere */
}

.page-heading span {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	display: block;
}

/* Sottotitolo hero spostato a destra (vedi brief): blocco allineato a destra,
   animato da GSAP. Su mobile torna centrato. */
.page-heading .page-heading-sub {
	display: block;
	text-align: right;
	max-width: 620px;
	margin-left: auto;
	margin-top: 8px;
	padding: 12px 18px;
	background: rgba(20,14,40,0.30);
	border-right: 3px solid #A78BFA;
	border-radius: 8px 0 0 8px;
	backdrop-filter: blur(2px);
	font-size: 15px;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
}
@media (max-width: 768px) {
	.page-heading .page-heading-sub {
		text-align: center;
		margin: 8px auto 0;
		border-right: none;
		border-bottom: 3px solid #A78BFA;
		border-radius: 8px;
	}
}

/* Lettere autocomposte (effetto gsap.com): contenitore 3D + span per-lettera.
   Le lettere stanno dentro span .hero-word nowrap: la riga si interrompe
   solo tra parole intere, mai in mezzo a una parola. */
.page-heading .page-heading-sub { perspective: 600px; }
.page-heading .hero-word {
	display: inline-block;
	white-space: nowrap;
}
.page-heading .hero-ch {
	display: inline-block;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* CTA contatti: messaggio con accento che cattura l'attenzione */
.page-heading .contact-hero-cta {
	background: linear-gradient(120deg, rgba(76,29,149,0.55), rgba(109,40,217,0.40));
	border-right: 3px solid #F5C87A;
	padding: 16px 20px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: none;
	font-size: 17px;
	line-height: 1.5;
}
.page-heading .contact-hero-cta .cta-free {
	display: inline-block;
	font-style: normal;
	font-weight: 700;
	color: #FBD98A;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* team */

.team {
	background-color: #F8FAFC;
	margin-top: 140px;
	margin-bottom: -140px;
	padding: 120px 0px;
}

.team-item img {
	width: 100%;
	overflow: hidden;
}

.team-item .down-content {
	background-color: #fff;
	padding: 30px;
}

.team-item .down-content h4 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.25px;
	margin-bottom: 10px;
}

.team-item .down-content span {
	color: #6D28D9;
	font-weight: 600;
	font-size: 14px;
	display: block;
	margin-bottom: 15px;
}

.team-item .down-content p {
	margin-bottom: 20px;
}


/* Single Service */

.single-services {
	margin-top: 140px;
}

#tabs ul {
  margin: 0;
  padding: 0;
}
#tabs ul li {
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}
#tabs ul li:last-child {
  margin-bottom: 0px;
}
/* Pulsanti servizi ridisegnati: pill-card chiare ed eleganti, niente blocchi pieni stonati.
   Default = card bianca con bordo morbido; hover = sollevamento; attiva = gradiente brand. */
#tabs ul li a {
	text-transform: capitalize;
	width: 100%;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	border: 1px solid #E7E3F5;
	border-left: 4px solid #C4B5FD;
	border-radius: 14px;
	box-shadow: 0 1px 4px rgba(76,29,149,0.06);
  	font-size: 17px;
  	color: #3B2A63;
  	letter-spacing: 0.3px;
  	font-weight: 600;
  	transition: all 0.3s ease;
}
#tabs ul li a:hover {
	background-color: #F6F2FE;
	border-left-color: #6D28D9;
	transform: translateX(6px);
	box-shadow: 0 8px 22px rgba(109,40,217,0.14);
}
#tabs ul li a i {
	margin-left: 12px;
	color: #A78BFA;
	font-size: 18px;
	transition: all 0.3s ease;
}
#tabs ul li a:hover i { color: #6D28D9; transform: translateX(3px); }
#tabs ul .ui-tabs-active a {
	background-image: var(--nexo-grad-blue);
	background-color: #6D28D9;
	border-color: transparent;
	border-left-color: #4C1D95;
	color: #fff;
	box-shadow: 0 10px 26px rgba(109,40,217,0.28);
	transform: translateX(6px);
}
#tabs ul .ui-tabs-active a i { color: #fff; }
#tabs ul .ui-tabs-active span { background: transparent; border: none; }
.tabs-content {
	margin-left: 30px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}
.tabs-content img {
	max-width: 100%;
	overflow: hidden;
}
.tabs-content h4 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.25px;
	margin-bottom: 15px;
	margin-top: 30px;
}
.tabs-content p {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 0px;
}



/* Contact Information */

.contact-information {
	margin-top: 140px;
}

.contact-information .contact-item {
	padding: 60px 30px;
	background-color: #F8FAFC;
	text-align: center;
}

.contact-information .contact-item i {
	color: #6D28D9;
	font-size: 48px;
	margin-bottom: 40px;
}

.contact-information .contact-item h4 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.25px;
	margin-bottom: 15px;
}

.contact-information .contact-item p {
	margin-bottom: 20px;
}

.contact-information .contact-item a {
	font-weight: 600;
	color: #6D28D9;
	font-size: 15px;
}




/* Responsive Style */
@media (max-width: 768px) {
	.sub-header {
		display: none;
	}
	.Modern-Slider .item h6 {
	  margin-bottom: 15px;
	  font-size: 18px;
	}
	.Modern-Slider .item h4 {
	  margin-bottom: 25px;
	  font-size: 28px;
	  line-height: 36px;
	  letter-spacing: 1px;
	}
	.Modern-Slider .item p {
		max-width: 570px;
		line-height: 25px;
		margin-bottom: 30px;
	}
	.Modern-Slider .NextArrow{
	  right:5px;
	}
	.Modern-Slider .PrevArrow {
	  left:5px;
	}
	.request-form {
		text-align: center;
	}
	.request-form a.border-button {
		float: none;
		margin-top: 30px;
	}
	.services .service-item {
		margin-bottom: 30px;
	}
	.fun-facts .left-content {
		margin-right: 0px;
		margin-bottom: 30px;
	}
	.more-info .right-content  {
		padding: 30px;
	}
	footer {
		padding: 80px 0px 20px 0px;
	}
	footer .footer-item {
		border-bottom: 1px solid #343434;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}
	footer .last-item {
		border-bottom: none;
	}
	.about-info .right-content {
		margin-right: 0px;
		margin-bottom: 30px;
	}
	.team .team-item {
		margin-bottom: 30px;
	}
	.tabs-content {
		margin-left: 0px;
		margin-top: 30px;
	}
	.contact-item {
		margin-bottom: 30px;
	}
}

/* REV.17: 992px è il breakpoint di navbar-expand-lg; il layout mobile del
   menu deve fermarsi a 991.98 altrimenti a esattamente 992 collide con il
   layout desktop full-bleed (collapse absolute vs flex). */
@media (max-width: 991.98px) {
	.navbar .navbar-brand {
		position: absolute;
		left: 30px;
		top: 10px;
	}
	.navbar .navbar-brand {
		width: auto;
	}
	.navbar:after {
		display: none;
	}
	#navbarResponsive {
	    z-index: 99999;
	    position: absolute;
	    top: 80px;
	    left: 0;
	    width: 100%;
	    text-align: center;
	    background-color: #fff;
	    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
	}
	.navbar .navbar-nav .nav-item {
		border-bottom: 1px solid #eee;
	}
	.navbar .navbar-nav .nav-item:last-child {
		border-bottom: none;
	}
	.navbar .navbar-nav a.nav-link {
		padding: 15px 0px;
		color: #1e1e1e!important;
	}
	.navbar .navbar-nav .nav-link:hover,
	.navbar .navbar-nav .active>.nav-link,
	.navbar .navbar-nav .nav-link.current,
	.navbar .navbar-nav .nav-link.show,
	.navbar .navbar-nav .show>.nav-link {
		color: #6D28D9!important;
		border-bottom: none!important;
	}
}
/* ==========================================================================
   NEXO GROUP SA — palette blu/viola e nuove sezioni
   Blu profondo (fiducia/finanza): #4C1D95 ~ PANTONE 281 C
   Blu tecnologico (primario):     #6D28D9
   Viola (AI/automazione):         #6D28D9 ~ PANTONE 2685 C
   ========================================================================== */

:root {
	--nexo-blue-deep: #4C1D95;
	--nexo-blue: #6D28D9;
	--nexo-violet: #6D28D9;
	--nexo-grad-blue: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
	--nexo-grad-violet: linear-gradient(135deg, #6D28D9 0%, #A78BFA 100%);
}

/* Barra superiore e pulsanti: gradiente blu */
.sub-header {
	background-image: var(--nexo-grad-blue);
	background-color: var(--nexo-blue-deep);
}
.filled-button,
.border-button {
	background-image: var(--nexo-grad-blue);
}
.border-button {
	background-image: none;
	background-color: transparent;
	border-color: #fff;
}
.services .service-item .down-content .filled-button,
.more-info .right-content .filled-button,
.fun-facts .left-content .filled-button {
	background-image: var(--nexo-grad-blue);
}

/* Striscia "Diagnosi gratuita": gradiente blu→viola (firma AI del brand) */
.request-form {
	background-image: var(--nexo-grad-violet);
}

/* Titoli di sezione: accento viola solo dove si parla di AI/automazione */
.callback-form .section-heading em,
.request-form h4 em {
	color: var(--nexo-violet);
}

/* ----- Sezione FAQ (home) ----- */
.faq {
	padding: 80px 0;
	background-color: #F8FAFC;
}
.faq-item {
	background: #fff;
	border-left: 4px solid var(--nexo-blue);
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(27, 42, 107, 0.08);
	padding: 24px 28px;
	margin-bottom: 24px;
}
.faq-item h4 {
	color: var(--nexo-blue-deep);
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 10px;
}
.faq-item p {
	color: #475569;
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
}

/* ----- Sezione "Come lavoriamo: 4 passi" (servizi) ----- */
.how-we-work {
	padding: 80px 0 40px;
}
.step-item {
	text-align: center;
	padding: 30px 20px;
	margin-bottom: 30px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(27, 42, 107, 0.08);
	border-top: 4px solid var(--nexo-blue);
}
.step-item .step-number {
	width: 52px;
	height: 52px;
	line-height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background-image: var(--nexo-grad-violet);
	color: #fff;
	font-size: 22px;
	font-weight: 800;
}
.step-item h4 {
	color: var(--nexo-blue-deep);
	font-size: 17px;
	font-weight: 700;
}
.step-item span {
	display: block;
	color: var(--nexo-violet);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.step-item p {
	color: #475569;
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}
.steps-note {
	text-align: center;
	color: var(--nexo-blue-deep);
	font-weight: 600;
	margin-top: 10px;
}

/* ----- Sezione "Per chi lavoriamo" (servizi) ----- */
.for-who {
	padding: 60px 0 80px;
	background-color: #F8FAFC;
}
.for-who .left-image img {
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(27, 42, 107, 0.15);
}
.for-who .right-content {
	padding-left: 30px;
}
.for-who .right-content span {
	color: var(--nexo-violet);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.for-who .right-content h2 {
	color: var(--nexo-blue-deep);
	font-size: 28px;
	font-weight: 800;
	margin: 10px 0 18px;
}
.for-who .right-content h2 em {
	font-style: normal;
	color: var(--nexo-blue);
}
.for-who .right-content p {
	color: #475569;
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 22px;
}

/* ----- Checkbox privacy nei moduli ----- */
.privacy-check {
	color: #475569;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}
.privacy-check input {
	margin-right: 8px;
}
.privacy-check a {
	color: var(--nexo-blue);
	text-decoration: underline;
}

/* ----- Pagine legali ----- */
.legal-page {
	padding: 70px 0 90px;
}
.legal-page h4 {
	color: var(--nexo-blue-deep);
	font-size: 18px;
	font-weight: 700;
	margin: 34px 0 12px;
}
.legal-page p {
	color: #475569;
	font-size: 14px;
	line-height: 1.9;
}
.legal-page a {
	color: var(--nexo-blue);
}
.legal-note {
	background: #fff7e6;
	border-left: 4px solid #e6a23c;
	padding: 14px 18px;
	border-radius: 4px;
}

/* ----- Select nei moduli (testo segnaposto) ----- */
.contact-form select.form-control {
	color: #475569;
	height: auto;
}
.contact-form select.form-control option {
	color: #1e1e1e;
}

/* ==========================================================================
   NEXO GROUP SA — UI/UX PRO MAX polish (rev. 2)
   Stile: Trust & Authority · Tipografia: IBM Plex Sans
   Scala: ink #0F172A · blue-800 #4C1D95 · blue-700 #6D28D9 · blue-600 #7C3AED
          violet-700 #6D28D9 · bg #F8FAFC · text #475569
   ========================================================================== */

/* Tipografia: corpo leggibile, titoli con peso */
body {
	font-family: 'IBM Plex Sans', sans-serif;
	color: #475569;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand h2,
.section-heading h2,
.count-digit {
	font-family: 'IBM Plex Sans', sans-serif;
	color: #0F172A;
	letter-spacing: -0.01em;
}
p { line-height: 1.75; }
.section-heading span,
.page-heading span { letter-spacing: 0.02em; }

/* Barra superiore: navy pieno, più premium del gradiente */
.sub-header {
	background-image: none;
	background-color: #0F172A;
}
.sub-header a { color: #CBD5E1; transition: color 200ms ease-out; }
.sub-header a:hover { color: #fff; }

/* Transizioni fluide 150-300ms su tutti gli elementi interattivi */
a, button, .filled-button, .border-button,
.navbar .navbar-nav a.nav-link,
.service-item, .team-item, .step-item, .faq-item,
.contact-item, .menu-list a, .social-icons a {
	transition: color 200ms ease-out, background-color 200ms ease-out,
	            border-color 200ms ease-out, box-shadow 250ms ease-out,
	            transform 250ms ease-out, opacity 200ms ease-out;
}

/* Pulsanti: feedback chiaro, nessun layout shift */
.filled-button, .border-button {
	cursor: pointer;
	border-radius: 4px;
}
.filled-button:hover {
	background-image: none;
	background-color: #4C1D95;
	box-shadow: 0 6px 18px rgba(109, 40, 217, 0.35);
	transform: translateY(-2px);
}
.border-button:hover {
	background-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

/* Focus visibile per navigazione da tastiera (WCAG) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .filled-button:focus-visible,
.border-button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.45);
	outline-offset: 2px;
}

/* Card: hover con sollevamento leggero (transform, niente shift di layout) */
.service-item, .team-item, .step-item {
	cursor: pointer;
	border-radius: 6px;
}
.service-item:hover, .team-item:hover, .step-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}
.faq-item:hover {
	border-left-color: #6D28D9;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}

/* Immagini contenuto: cornice coerente */
.service-item img, .team-item img,
.more-info .left-image img, .tabs-content img {
	border-radius: 6px 6px 0 0;
}
.more-info .left-image img, .for-who .left-image img, .tabs-content img {
	border-radius: 6px;
}

/* Navbar: ombra più morbida e brand navy */
.navbar .navbar-brand h2 { color: #0F172A; }
header.background-header { box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08); }

/* Contatori: più presenza */
.count-area-content {
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}
.count-digit { color: #6D28D9; }
.count-title { color: #475569; }

/* Moduli: stati coerenti */
.contact-form .form-control {
	border-radius: 4px;
	border: 1px solid #CBD5E1;
	color: #0F172A;
}
.contact-form .form-control::placeholder { color: #64748B; }
.contact-form .form-control:focus {
	border-color: #7C3AED;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Slider hero: leggibilità testo garantita */
.Modern-Slider .item .img-fill {
	background-blend-mode: multiply;
}
.main-banner .text-content h4 {
	text-shadow: 0 2px 14px rgba(2, 6, 23, 0.55);
}
.main-banner .text-content p {
	text-shadow: 0 1px 8px rgba(2, 6, 23, 0.6);
	max-width: 62ch;
}

/* Accessibilità: rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.Modern-Slider { autoplay: none; }
}

/* Responsive: titoli hero più leggibili su mobile */
@media (max-width: 767px) {
	.main-banner .text-content h4 { font-size: 26px; line-height: 1.3; }
	.main-banner .text-content p { font-size: 14px; }
	.section-heading h2 { font-size: 32px; }
}

/* Overlay di leggibilità sullo slider hero (foto chiare + testo bianco) */
.Modern-Slider .item .img-fill::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(2, 6, 23, 0.50) 0%, rgba(15, 23, 42, 0.74) 100%);
	z-index: 1;
}
.Modern-Slider .item .text-content {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   NEXO GROUP SA — PASTEL SOFT rev.3 (2026-09-06)
   UI/UX Pro Max + docs/ricerca/02-palette-pastello-e-contrasti.md
   Stesse tinte del brand (blue 221°, violet 262°, slate 247°) su step
   pastello 50–300 per superfici/gradienti; testo e CTA restano saturi.
   Tutti i pairing testo/sfondo >= 4.5:1 (WCAG 1.4.3, tabella nella ricerca).
   ========================================================================== */

:root {
	--nexo-pastel-blue-50: #EFF6FF;
	--nexo-pastel-blue-100: #DBEAFE;
	--nexo-pastel-blue-200: #BFDBFE;
	--nexo-pastel-blue-300: #C4B5FD;
	--nexo-pastel-violet-50: #F5F3FF;
	--nexo-pastel-violet-100: #EDE9FE;
	--nexo-pastel-violet-200: #DDD6FE;
	--nexo-pastel-violet-300: #C4B5FD;
	--nexo-grad-pastel: linear-gradient(135deg, #DBEAFE 0%, #EDE9FE 100%);
	--nexo-duotone: linear-gradient(135deg, rgba(76, 29, 149, 0.90) 0%, rgba(76, 29, 149, 0.86) 100%);
}

/* Hero: kicker pastello leggibile sull'overlay scuro (prima era blu saturo) */
.Modern-Slider .item h6 {
	color: var(--nexo-pastel-blue-300);
}

/* ----- Banda "Diagnosi gratuita": pastello tenue, testo navy (prima: blu→viola saturo) ----- */
.request-form {
	background-image: var(--nexo-grad-pastel);
	background-color: var(--nexo-pastel-blue-100);
	color: #0F172A;
}
.request-form h4 {
	color: #4C1D95;
}
.request-form span {
	color: #475569;
}
.request-form a.border-button {
	background-image: none;
	background-color: #6D28D9;
	border: 2px solid #6D28D9;
	color: #fff;
	box-shadow: 0 6px 18px rgba(109, 40, 217, 0.25);
}
.request-form a.border-button:hover {
	background-color: #4C1D95;
	border-color: #4C1D95;
	color: #fff;
}

/* ----- "Il gruppo in numeri": velo duotone pastello-scuro + testo chiaro ----- */
.fun-facts {
	background-image: var(--nexo-duotone), url(../images/fun-facts-bg.jpg);
}
.fun-facts span {
	color: var(--nexo-pastel-blue-200);
}
.fun-facts h2 {
	color: #FFFFFF;
}
.fun-facts em {
	color: var(--nexo-pastel-blue-300);
}
.fun-facts p {
	color: #E2E8F0;
}

/* Card numeri: vetro pastello su duotone, pronte per count-up GSAP */
.count-area-content {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(191, 219, 254, 0.35);
	border-radius: 16px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(2, 6, 23, 0.25);
	padding: 32px 24px;
	transition: transform 250ms ease-out, border-color 250ms ease-out, box-shadow 250ms ease-out;
}
.count-area-content:hover {
	transform: translateY(-4px);
	border-color: rgba(191, 219, 254, 0.65);
	box-shadow: 0 14px 40px rgba(2, 6, 23, 0.35);
}
.count-digit {
	color: var(--nexo-pastel-blue-200);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.count-title {
	color: #E2E8F0;
	font-size: 15px;
	font-weight: 500;
}

/* ----- "Chi siamo": il blocco diventa una card delineata (fine blocco visibile) ----- */
.more-info .more-info-content {
	background-color: var(--nexo-pastel-blue-50);
	border: 1px solid var(--nexo-pastel-blue-100);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(76, 29, 149, 0.12);
}
.more-info .left-image,
.more-info .left-image img {
	height: 100%;
}
.more-info .left-image img {
	object-fit: cover;
	border-radius: 0;
}
.more-info .right-content span {
	color: #6D28D9;
}
.more-info .right-content p {
	color: #475569;
}

/* ----- "Impegni": sezione a fondo pastello viola→blu (stacca dal bianco sopra/sotto) ----- */
.testimonials {
	background-color: var(--nexo-pastel-violet-50);
	background-image: linear-gradient(180deg, var(--nexo-pastel-violet-50) 0%, var(--nexo-pastel-blue-50) 100%);
}
.testimonial-item .inner-content {
	background: #FFFFFF;
	border: 1px solid var(--nexo-pastel-violet-100);
	border-radius: 16px;
	padding: 38px 30px 30px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(76, 29, 149, 0.08);
	transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.testimonial-item .inner-content::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--nexo-pastel-blue-200), var(--nexo-pastel-violet-200));
}
.testimonial-item:hover .inner-content {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(76, 29, 149, 0.14);
}
.testimonial-item h4 {
	color: #4C1D95;
}
.testimonial-item span {
	color: #6D28D9;
}
.testimonial-item p {
	color: #475569;
}
/* Chip icona pastello al posto dei vecchi avatar a lettera */
.commit-icon {
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 50%;
	margin: 25px auto 0;
	font-size: 22px;
	background: var(--nexo-pastel-blue-100);
	color: #4C1D95;
}
.testimonial-item:nth-child(even) .commit-icon {
	background: var(--nexo-pastel-violet-100);
	color: #6D28D9;
}

/* ----- FAQ: fondo bianco (contrasta la sezione pastello precedente) ----- */
.faq {
	background-color: #FFFFFF;
}
.faq-item {
	background: #FFFFFF;
	border: 1px solid var(--nexo-pastel-blue-100);
	border-left: 4px solid var(--nexo-pastel-blue-300);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(76, 29, 149, 0.06);
}
.faq-item:hover {
	border-left-color: var(--nexo-pastel-violet-300);
	box-shadow: 0 8px 24px rgba(76, 29, 149, 0.10);
}

/* ----- Form diagnosi: card pastello con bordo morbido (prima: blu saturo pieno) ----- */
.callback-form .contact-form {
	background-image: var(--nexo-grad-pastel);
	background-color: var(--nexo-pastel-blue-100);
	border: 1px solid var(--nexo-pastel-blue-200);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(76, 29, 149, 0.12);
}
.callback-form .contact-form input,
.callback-form .contact-form textarea {
	background: #FFFFFF;
}
.callback-form .contact-form button.border-button {
	background-color: #6D28D9;
	border: 2px solid #6D28D9;
	color: #fff;
}
.callback-form .contact-form button.border-button:hover {
	background-color: #4C1D95;
	border-color: #4C1D95;
	color: #fff;
}

/* ==========================================================================
   NEXO GROUP SA — BLOCCHI PULITI rev.4 (2026-09-06, feedback cliente)
   Niente card flottanti: sezioni a tutto blocco su bande pastello tenui,
   testo scuro leggibile (contrasti da docs/ricerca/02).
   ========================================================================== */

/* ----- "Il gruppo in numeri": banda pastello chiara, senza foto né box ----- */
.fun-facts {
	background-image: linear-gradient(135deg, var(--nexo-pastel-blue-100) 0%, var(--nexo-pastel-violet-100) 100%);
	background-attachment: scroll;
	color: #4C1D95;
}
.fun-facts span {
	color: #6D28D9;
}
.fun-facts h2 {
	color: #4C1D95;
}
.fun-facts em {
	color: #6D28D9;
}
.fun-facts p {
	color: #475569;
}
/* Numeri liberi sul blocco, nessuna card */
.count-area-content {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 25px 15px;
	transition: none;
}
.count-area-content:hover {
	transform: none;
	border-color: transparent;
	box-shadow: none;
}
.count-digit {
	color: #6D28D9;
	font-size: 48px;
}
.count-title {
	color: #475569;
}

/* ----- "Chi siamo" (home e pagina Chi Siamo): banda piena, niente card ----- */
.more-info {
	background-image: linear-gradient(135deg, var(--nexo-pastel-blue-50) 0%, var(--nexo-pastel-violet-50) 100%);
	padding: 100px 0;
}
.more-info .more-info-content {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.more-info .left-image,
.more-info .left-image img {
	height: auto;
}
.more-info .left-image img {
	border-radius: 8px;
}
.more-info .right-content span {
	color: #6D28D9;
}
.more-info .right-content h2 {
	color: #0F172A;
}
.more-info .right-content p {
	color: #475569;
}

/* ----- Impegni / principi: blocchi puliti sulla banda, senza card bianche ----- */
.testimonial-item .inner-content {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 30px 15px;
}
.testimonial-item .inner-content::before {
	display: none;
}
.testimonial-item:hover .inner-content {
	transform: none;
	box-shadow: none;
}

/* ----- FAQ: voci pulite, solo filetto verticale pastello ----- */
.faq-item {
	background: transparent;
	border: 0;
	border-left: 3px solid var(--nexo-pastel-blue-200);
	border-radius: 0;
	box-shadow: none;
	padding: 8px 0 8px 24px;
}
.faq-item:hover {
	border-left-color: var(--nexo-pastel-violet-200);
	box-shadow: none;
}

/* ----- Form diagnosi: banda piena pastello, niente box arrotondato ----- */
.callback-form {
	background-image: linear-gradient(135deg, var(--nexo-pastel-blue-50) 0%, var(--nexo-pastel-violet-50) 100%);
	padding: 100px 0;
	margin-top: 0;
}
.callback-form .contact-form {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* ==========================================================================
   NEXO GROUP SA — rev.5: medaglioni per i soli numeri (richiesta cliente)
   Forme non rettangolari: cerchi e blob organici alternati.
   ========================================================================== */
.count-area-content {
	padding: 10px 15px 25px;
}
.count-digit {
	width: 128px;
	height: 128px;
	line-height: 126px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: linear-gradient(145deg, #FFFFFF 0%, #F5F3FF 100%);
	border: 1px solid var(--nexo-pastel-blue-200);
	box-shadow: 0 12px 32px rgba(76, 29, 149, 0.14);
	font-size: 40px;
	color: #6D28D9;
	transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}

.count-area-content:hover .count-digit {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 18px 40px rgba(76, 29, 149, 0.18);
}
.count-title {
	max-width: 190px;
	margin: 0 auto;
}

/* =========================================================
   REV.7 — LOGO ANIMATO "NASALIZATION" (sera 06-09)
   Wordmark vettoriale estratto dai glifi del font: artwork
   fissato, nessun file font servito (EULA Typodermic desktop-
   compliant; il webfont richiederebbe licenza separata).
   ========================================================= */
.navbar .navbar-brand {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
}
.nexo-logo-svg {
	display: block;
	height: 30px;
	width: auto;
	color: #fff;
	transition: color .3s ease;
}
.nexo-logo-svg .nx-l { fill: currentColor; }
.nexo-logo-svg .nx-sa { fill: #A78BFA; transition: fill .3s ease; }
.background-header .nexo-logo-svg { color: #6D28D9; }
.background-header .nexo-logo-svg .nx-sa { fill: #A78BFA; }
.navbar-brand:focus-visible {
	outline: 2px solid #C4B5FD;
	outline-offset: 4px;
	border-radius: 4px;
}
.nx-shine { opacity: 0; pointer-events: none; }
@media (max-width: 992px) {
	.nexo-logo-svg { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.nexo-logo-svg, .nexo-logo-svg .nx-sa { transition: none; }
}

/* ==========================================================================
   NEXO GROUP SA — REV.8 (2026-09-07, feedback cliente da screenshot)
   1. Colore brand: viola "SA" del logo → CTA/bottoni #6D28D9,
      accenti (em dei titoli) lilla #A78BFA.
   2. Servizi home: 3 blocchi orizzontali impilati, immagine grande + testo.
   3. Contatori: widget a tutta larghezza su foto business, numeri grandi.
   4. "Chi siamo": immagine full-size a sinistra, testo espanso a destra.
   5. Impegni: griglia 2×2, ogni blocco con la sua foto di sfondo.
   ========================================================================== */

/* ----- 1. Accenti lilla (come la "SA" del logo) ----- */
.section-heading em,
.more-info .right-content h2 em,
.more-info .right-content em,
.for-who .right-content h2 em,
.fun-facts h2 em {
	color: #A78BFA;
}
.fun-facts h2 em {
	color: #C4B5FD; /* lilla più chiaro sullo sfondo foto scuro */
}

/* ----- 2. Servizi home: desktop = 3 blocchi affiancati (carosello statico),
      mobile = 3 blocchi impilati. Immagine grande, testo sotto. ----- */
.services .service-item-wide {
	margin-bottom: 40px;
}
.services .service-item-wide img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}
.services .service-item-wide .down-content {
	text-align: center;
	padding: 35px 20px 30px;
}
.services .service-item-wide .down-content h4 {
	font-size: 24px;
}
.services .service-item-wide .down-content p {
	font-size: 15px;
}
/* Su mobile (max-width 991px) le card vanno a tutta larghezza impilate */
@media (max-width: 991px) {
	.services .service-item-wide img { height: 320px; }
	.services .service-item-wide .down-content { padding: 30px 20px 40px; }
}

/* ----- 3. Contatori: widget fotografico stile "numeri grandi su immagine" ----- */
.fun-facts {
	background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 27, 75, 0.85) 45%, rgba(46, 16, 101, 0.55) 75%, rgba(15, 23, 42, 0.92) 100%),
	                  url(../images/nexo-numeri-bg.jpg);
	background-size: cover;
	background-position: center;
	text-align: center;
}
.fun-facts span {
	color: #C4B5FD;
}
.fun-facts h2 {
	color: #FFFFFF;
}
.fun-facts p {
	color: #E2E8F0;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.fun-facts .filled-button {
	margin-top: 10px;
}
/* Numeri liberi e grandi: niente medaglioni, stile Contatori.png */
.fun-facts .count-area-content {
	padding: 20px 10px 35px;
}
.fun-facts .count-digit {
	width: auto;
	height: auto;
	line-height: 1.1;
	margin: 0 0 14px;
	border-radius: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 84px;
	font-weight: 800;
	color: #FFFFFF;
	text-shadow: 0 4px 24px rgba(2, 6, 23, 0.45);
}
.fun-facts .count-area-content:hover .count-digit {
	transform: none;
	box-shadow: none;
}
.fun-facts .count-title {
	max-width: 260px;
	margin: 0 auto;
	color: #E2E8F0;
	font-size: 16px;
}
.fun-facts .counters-row {
	margin-top: 60px;
}
@media (max-width: 991px) {
	.fun-facts .count-digit { font-size: 60px; }
}

/* ----- 4. "Chi siamo": due macro-blocchi a tutta larghezza — immagine full-size
      a sinistra (alta quanto il blocco), testo espanso a destra ----- */
.more-info {
	padding: 0;
}
.more-info .container {
	width: 100%;
	max-width: none;
	padding: 0;
}
/* REV.17: il container full-bleed ha padding 0, quindi i margini negativi
   bootstrap della .row (-15px) sforavano di 15px a destra (scroll orizzontale).
   Azzeriamo margini della row e padding della colonna in questo container. */
.more-info .container > .row { margin: 0; }
.more-info .container > .row > [class*="col-"] { padding: 0; }
.more-info .more-info-content > .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
}
.more-info .more-info-content > .row > .col-img {
	padding: 0;
}
.more-info .left-image {
	position: relative;
	min-height: 560px;
	height: 100%;
}
.more-info .left-image img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}
.more-info .right-content {
	padding: 80px 7%;
	align-self: center;
}
.more-info .right-content h2 {
	font-size: 36px;
}
.more-info .right-content p {
	font-size: 16px;
	line-height: 1.9;
}
@media (max-width: 991px) {
	.more-info .left-image { min-height: 340px; }
	.more-info .right-content { padding: 60px 8%; }
}

/* ----- 5. Impegni: griglia 2×2, ogni blocco con foto a tutto blocco ----- */
.testimonials .commitment-item {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	min-height: 380px;
	margin-bottom: 30px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
	transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.testimonials .commitment-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
}
.testimonials .commitment-item::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.88) 100%);
}
.testimonials .commitment-riservatezza { background-image: url(../images/nexo-impegno-riservatezza.jpg); }
.testimonials .commitment-risultati   { background-image: url(../images/nexo-impegno-risultati.jpg); }
.testimonials .commitment-passi       { background-image: url(../images/nexo-impegno-passi.jpg); }
.testimonials .commitment-formazione  { background-image: url(../images/nexo-impegno-formazione.jpg); }
.testimonials .commitment-content {
	position: relative;
	z-index: 1;
	padding: 40px;
	width: 100%;
}
.testimonials .commitment-content .commit-icon {
	margin: 0 0 18px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(196, 181, 253, 0.55);
	color: #C4B5FD;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.testimonials .commitment-content h4 {
	color: #FFFFFF;
	font-size: 24px;
	margin-bottom: 6px;
}
.testimonials .commitment-content span {
	display: block;
	color: #C4B5FD;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 14px;
}
.testimonials .commitment-content p {
	color: #E2E8F0;
	font-size: 15px;
	line-height: 1.75;
	margin: 0;
}
@media (max-width: 767px) {
	.testimonials .commitment-item { min-height: 320px; }
	.testimonials .commitment-content { padding: 28px; }
}

/* ==========================================================================
   CHI SIAMO — "Il nostro modo di lavorare": sezione divisa in due blocchi
   orizzontali (sinistra/destra), ciascuno con la propria immagine di sfondo.
   ========================================================================== */
.modo-lavorare-split {
	padding: 120px 0;
	background-color: #F8FAFC;
}
.modo-lavorare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
.modo-block {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	box-shadow: 0 12px 34px rgba(15, 23, 42, 0.20);
	transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}
.modo-block:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 50px rgba(15, 23, 42, 0.30);
}
.modo-block::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,23,42,0.20) 0%, rgba(15,23,42,0.55) 45%, rgba(20,14,40,0.90) 100%);
}
.modo-concretezza   { background-image: url(../images/nexo-impegno-risultati.jpg); }
.modo-riservatezza  { background-image: url(../images/nexo-impegno-riservatezza.jpg); }
.modo-block-content {
	position: relative;
	z-index: 1;
	padding: 44px;
	width: 100%;
}
.modo-block-content .commit-icon {
	margin: 0 0 20px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(196,181,253,0.55);
	color: #C4B5FD;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.modo-block-content h4 {
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 6px;
}
.modo-block-content .modo-tag {
	display: block;
	color: #C4B5FD;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
}
.modo-block-content p {
	color: #E2E8F0;
	font-size: 15px;
	line-height: 1.8;
	margin: 0;
}
@media (max-width: 991px) {
	.modo-lavorare-grid { grid-template-columns: 1fr; }
	.modo-block { min-height: 360px; }
}
@media (max-width: 767px) {
	.modo-lavorare-split { padding: 70px 0; }
	.modo-block { min-height: 320px; }
	.modo-block-content { padding: 28px; }
}

/* ==========================================================================
   SERVIZI — "Per chi lavoriamo": blocco orizzontale, immagine full a sinistra
   e box di testo a destra.
   ========================================================================== */
.split-feature {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
	margin: 40px 15px 80px;
}
.split-feature-media {
	flex: 0 0 46%;
	/* l'immagine riempie tutto il suo box, a pieno formato, non 16:9 */
	min-height: 480px;
	align-self: stretch;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.split-feature-body {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 50px 50px;
}
.split-feature-body .right-content span {
	display: block;
	color: var(--nexo-violet);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
}
.split-feature-body .right-content h2 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 20px;
	color: #1E293B;
}
.split-feature-body .right-content h2 em { color: var(--nexo-violet); font-style: normal; }
.split-feature-body .right-content p {
	color: #475569;
	font-size: 15px;
	line-height: 1.85;
	margin-bottom: 28px;
}
@media (max-width: 991px) {
	.split-feature { flex-direction: column; }
	.split-feature-media { flex: none; width: 100%; min-height: 300px; }
	.split-feature-body { padding: 40px 30px; }
}
/* rev.12: il media della sezione "Per chi lavoriamo" diventa
   un'infografica animata su fondo pastello, non più un'immagine di sfondo. */
.split-feature-media--infographic {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 30px;
	background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
}
.split-feature-media--infographic svg.nexo-infographic {
	box-shadow: none;
	background: transparent;
	max-width: 460px;
}

/* ==========================================================================
   COOKIE PAGE — biscotto animato
   ========================================================================== */
.cookie-hero-row { margin-bottom: 30px; }
.cookie-stage {
	position: relative;
	display: inline-block;
	padding: 20px;
}
#nexo-cookie {
	width: 240px;
	max-width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 14px 24px rgba(120, 72, 20, 0.28));
}
.cookie-stage .crumb {
	position: absolute;
	border-radius: 50%;
	background: #D59A52;
	opacity: 0;
}
.cookie-stage .crumb-1 { width: 10px; height: 10px; right: 26px; top: 38px; }
.cookie-stage .crumb-2 { width: 7px;  height: 7px;  right: 8px;  top: 70px; background: #B0763A; }
.cookie-stage .crumb-3 { width: 5px;  height: 5px;  right: 40px; top: 16px; }
@media (max-width: 767px) {
	#nexo-cookie { width: 180px; margin: 0 auto 20px; }
}

/* =====================================================
   Nexo rev.11 — pre-analisi a pagamento, menu 3 aree,
   footer CTA, modulo unico, semaforo, consenso mappa
   ===================================================== */

/* CTA nel menu di navigazione */
.navbar .navbar-nav .nav-cta .nav-link {
	background-color: #6D28D9;
	color: #fff !important;
	border-radius: 30px;
	padding: 8px 20px !important;
	margin-left: 12px;
	font-weight: 600;
}
.navbar .navbar-nav .nav-cta .nav-link:hover {
	background-color: #4C1D95;
}
.navbar .navbar-nav .nav-cta.active .nav-link {
	background-color: #4C1D95;
}
@media (max-width: 991px) {
	.navbar .navbar-nav .nav-cta .nav-link {
		display: inline-block;
		margin: 10px 0 4px 0;
	}
}

/* Fascia prezzo accanto alle CTA (prezzo visibile prima del clic) */
.price-tag {
	display: inline-block;
	margin-left: 14px;
	font-size: 15px;
	font-weight: 600;
	color: #4C1D95;
	vertical-align: middle;
}
.price-tag-light { color: #EDE9FE; }
@media (max-width: 767px) {
	.price-tag { display: block; margin: 10px 0 0 0; }
}

/* Footer: CTA al posto del vecchio modulo */
.footer-cta p { font-size: 14px; line-height: 22px; margin-bottom: 16px; }
.footer-cta .filled-button { display: inline-block; margin-bottom: 12px; }
.footer-cta .footer-mail { display: block; font-size: 14px; color: #C4B5FD; }
.footer-cta .footer-mail:hover { color: #fff; }

/* Modulo unico: honeypot e messaggio di stato */
.nexo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}
.nexo-form-status {
	margin-top: 18px;
	padding: 16px 20px;
	background: #EDE9FE;
	border-left: 4px solid #6D28D9;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.6;
	color: #2E1065;
}
.contact-us .nexo-form-status,
.callback-services .nexo-form-status { background: #fff; }

/* Semaforo esito pre-analisi */
.semaforo-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; }
.semaforo-card {
	flex: 1 1 260px;
	border-radius: 10px;
	padding: 28px 26px;
	background: #fff;
	box-shadow: 0px 4px 18px rgba(46, 16, 101, 0.08);
	border-top: 5px solid #ccc;
}
.semaforo-card .semaforo-dot {
	display: inline-block;
	width: 18px; height: 18px;
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}
.semaforo-verde { border-top-color: #16a34a; }
.semaforo-verde .semaforo-dot { background: #16a34a; }
.semaforo-giallo { border-top-color: #d97706; }
.semaforo-giallo .semaforo-dot { background: #d97706; }
.semaforo-rosso { border-top-color: #dc2626; }
.semaforo-rosso .semaforo-dot { background: #dc2626; }
.semaforo-card h4 { margin-bottom: 12px; }
.semaforo-note {
	margin-top: 18px;
	font-size: 13px;
	color: #6b6b6b;
	font-style: italic;
}

/* Percorso: pre-analisi -> analisi completa -> micro-pilota -> dipartimento
   REV.20: la timeline verticale rev.11 (.percorso-steps / .percorso-step) è
   sostituita dal rail orizzontale a 4 tappe — vedi blocco "REV.20" in coda. */

/* Consenso mappa */
#map .map-placeholder {
	height: 500px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #F5F3FF;
	padding: 30px;
}
#map .map-placeholder p { max-width: 520px; margin-bottom: 18px; color: #4C1D95; }
#map iframe[hidden] { display: none; }

/* Sezioni aree di offerta (services) */
.area-section { padding: 70px 0; }
/* rev.12: nth-of-type non agganciava la sezione giusta (section annidate);
   alternanza esplicita con classe dedicata sulla sezione #soluzioni */
.area-section--alt { background: #EDF1FA; }
.area-section--alt .service-item { box-shadow: 0 8px 22px rgba(30, 58, 138, .10); }

/* ============================================================
   REV.12 — dropdown menu, infografiche animate, tipografia
   ============================================================ */

/* --- Menu dropdown "Le tre aree in cui lavoriamo" --- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle .nav-caret {
	font-size: 10px;
	margin-left: 6px;
	transition: transform .25s ease;
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #EEF2FF;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(30, 58, 138, .16);
	z-index: 1000;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-link {
	display: block;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	color: #1E3A8A;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus {
	background: #F5F3FF;
	color: #6D28D9;
	text-decoration: none;
}
@media (min-width: 992px) {
	.nav-dropdown:hover .nav-dropdown-menu,
	.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
	.nav-dropdown:hover .nav-caret,
	.nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
	.nav-dropdown-menu { margin-top: 8px; }
	/* Ponte invisibile per non perdere l'hover tra toggle e menu */
	.nav-dropdown-menu::before {
		content: '';
		position: absolute;
		top: -10px;
		left: 0;
		right: 0;
		height: 10px;
	}
}
@media (max-width: 991.98px) {
	.nav-dropdown-menu {
		position: static;
		box-shadow: none;
		border: none;
		border-left: 3px solid #DDD6FE;
		border-radius: 0;
		margin: 2px 0 6px 18px;
		background: transparent;
	}
	/* Su mobile il pannello vive dentro #navbarResponsive (sfondo bianco):
	   i link restano scuri come le altre voci, non bianchi. */
	.nav-dropdown-link { padding: 8px 14px; color: #1e1e1e; }
	.nav-dropdown-link:hover,
	.nav-dropdown-link:focus { background: transparent; color: #6D28D9; }
}

/* --- Infografiche animate (sostituiscono le immagini stock) --- */
svg.nexo-infographic {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
	box-shadow: 0 10px 24px rgba(76, 29, 149, .10);
}
.service-item-wide svg.nexo-infographic {
	margin-bottom: 25px;
	height: 320px;
}
/* Le tre card home mantengono lo stesso peso visivo delle foto precedenti */
.services .service-item-wide svg.nexo-infographic {
	max-width: 100%;
	object-fit: contain;
}
@media (max-width: 991px) {
	.service-item-wide svg.nexo-infographic { height: 260px; }
}
svg.nexo-infographic text {
	font-family: 'IBM Plex Sans', sans-serif;
	fill: #1E3A8A;
}

/* --- Tipografia rev.12 --- */
.right-content p,
.more-info-content p,
.area-section p,
.area-section li,
.service-item p,
.for-who p,
.signals li {
	line-height: 1.75;
}
.section-heading h2,
.right-content h2,
.area-section h3,
.for-who h2,
.service-item h4 {
	letter-spacing: -0.01em;
}
.section-heading h2,
.right-content h2,
.for-who h2 {
	text-wrap: balance;
}
.area-section h3 { font-size: 26px; font-weight: 700; color: #2E1065; margin-bottom: 14px; }
.area-section .area-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #6D28D9;
	margin-bottom: 10px;
}
.area-section img { border-radius: 10px; }

/* ============================================================
   REV.13 — Aree di applicazione: home infografiche ricche,
   split video 50/50 aree, titoli hero ingranditi, headroom
   ============================================================ */
.page-heading { padding: 200px 0 150px; }
.page-heading .page-heading-sub { font-size: clamp(17px, 2.2vw, 22px); max-width: 720px; }
.service-item-wide .ig-steps { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; }
.service-item-wide .ig-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: #334155; margin-bottom: 8px; }
.service-item-wide .ig-steps .ig-num { flex: 0 0 24px; height: 24px; border-radius: 50%; background: #2563EB; color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.service-item-wide .ig-steps li:nth-child(2) .ig-num { background: #6D28D9; }
.service-item-wide .ig-steps li:nth-child(3) .ig-num { background: #1E3A8A; }
.service-item-wide .ig-kpi { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6D28D9; background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; }
.services .service-item-wide { transition: transform .35s ease, box-shadow .35s ease; }
.services .service-item-wide:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(30,58,138,.16); }
.area-split { display: flex; gap: 28px; align-items: stretch; margin: 26px 0 34px; }
.area-split-media, .area-split-info { flex: 1 1 50%; min-width: 0; }
.nexo-video { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(30,58,138,.18); background: #0F172A; min-height: 320px; }
.nexo-video video { display: block; width: 100%; height: 100%; min-height: 320px; max-height: 460px; object-fit: cover; }
.nexo-video figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 12.5px; color: #fff; background: rgba(15,23,42,.62); padding: 6px 12px; border-radius: 999px; }
.area-split-info svg.nexo-infographic { height: 100%; min-height: 320px; }
.area-points { list-style: none; margin: 14px 0 0; padding: 0; }
.area-points li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 14.5px; line-height: 1.6; color: #334155; }
.area-points li::before { content: '\2713'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #ECFDF5; color: #059669; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #A7F3D0; }
@media (max-width: 991px) { .area-split { flex-direction: column; } .nexo-video video, .area-split-info svg.nexo-infographic { min-height: 240px; } .page-heading { padding: 150px 0 110px; } }
.site-header { transition: transform .35s ease; }
.site-header.headroom--pinned { transform: translateY(0); }
.site-header.headroom--unpinned { transform: translateY(-110%); }

/* REV.14 — titoli dominanti + split video full-box (rif. struttura-sezioni.pptx) */
.page-heading { padding: 220px 0 160px; }
.page-heading .page-heading-sub { font-size: clamp(18px, 2.4vw, 24px); max-width: 760px; }
.area-split-media { display: flex; }
.area-split-media .nexo-video { flex: 1; display: flex; flex-direction: column; }
.area-split-media .nexo-video video { flex: 1; width: 100%; height: 100%; min-height: 380px; max-height: none; object-fit: cover; }
.split-feature--video { align-items: stretch; }
.split-feature-media--video { display: flex; padding: 0; }
.nexo-video--full { flex: 1; border-radius: 0; min-height: 380px; }
.nexo-video--full video { min-height: 380px; max-height: none; height: 100%; }
.nexo-infographic--inline { margin: 18px 0 22px; }
@media (max-width: 991px) { .area-split-media .nexo-video video, .nexo-video--full video { min-height: 260px; } }

/* REV.15 — struttura sezioni conforme a struttura-sezioni.pptx:
   SINISTRA 50% = video che occupa tutta la box, autoplay allo scroll;
   DESTRA 50% = testi, infografiche animate, card. */
/* REV.16 — layout da struttura-sezioni.pptx + annotazioni visive:
   il video NON è incapsulato in nessuna box: occupa l'intera METÀ SINISTRA
   dello schermo (50vw, full-bleed dal bordo), rettangolo orizzontale 16:9.
   A destra i contenuti restano allineati alla griglia del sito. */
.area-section .container { max-width: none; width: 100%; padding: 0; }
.area-block { display: flex; gap: 0; align-items: stretch; margin: 0; }
.area-block-media { flex: 0 0 50%; min-width: 0; display: flex; }
.area-block-media .nexo-video { flex: 1; display: flex; min-height: 340px; height: 100%; border-radius: 0; box-shadow: none; }
.area-block-media .nexo-video video { flex: 1; width: 100%; height: 100%; min-height: 340px; max-height: none; object-fit: cover; }
.area-block-body { flex: 1; min-width: 0; padding: 44px 56px 10px; }
.area-block-body p, .area-block-body .area-points li, .area-block-body .down-content p { text-align: justify; }
.area-below { margin-left: 50%; padding: 0 56px 44px; }
.area-below p { text-align: justify; }
.area-below .area-cards { margin-top: 0; }
.area-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0 0; }
.area-duo svg.nexo-infographic { width: 100%; margin: 0; max-height: 172px; }
.area-cards .service-item { padding: 20px 22px; }
.area-cards .down-content h4 { font-size: 17px; margin-bottom: 10px; }
.area-cards .down-content p { font-size: 12.5px; line-height: 1.55; margin: 0; }
.area-block-body { flex: 1 1 50%; min-width: 0; }
.area-block-body h3 { font-size: 34px; font-weight: 800; color: #1E293B; margin: 6px 0 12px; line-height: 1.2; }
.area-block-body > p { font-size: 15.5px; line-height: 1.75; color: #475569; margin-bottom: 14px; }
.area-block-body svg.nexo-infographic { width: 100%; max-width: 480px; margin: 18px 0 6px; }
.area-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 18px; }
.area-cards .service-item { width: 100%; margin: 0; }
.area-cards .service-item svg.nexo-infographic { width: 100%; }

/* Sezione "Per chi lavoriamo": ridimensionata — blocco contenuto max 1180px,
   video a sinistra con altezza proporzionata (non più full-bleed). */
/* Sezione "Per chi lavoriamo": video grande nella metà sinistra dello
   schermo (50vw, full-bleed), 16:9, nessuna box; testi a destra. */
.split-feature--video { max-width: none; width: 100%; margin: 40px 0 80px; align-items: stretch; border-radius: 0; box-shadow: none; }
.split-feature-media--video { flex: 0 0 50%; min-height: 0; display: flex; padding: 0; }
.nexo-video--full { flex: 1; border-radius: 0; min-height: 400px; box-shadow: none; }
.nexo-video--full video { width: 100%; height: 100%; min-height: 400px; max-height: none; object-fit: cover; }
.split-feature--video .split-feature-body { flex: 1; padding: 48px max(calc((100vw - 1140px) / 2), 30px) 48px 56px; }
.split-feature--video .split-feature-body { flex: 1 1 50%; padding: 44px 44px; }

@media (max-width: 991px) {
  .area-block { flex-direction: column; gap: 0; }
  .area-block-media { flex: none; width: 100%; }
  .area-block-media .nexo-video, .area-block-media .nexo-video video { min-height: 240px; }
  .area-block-body { padding: 30px 20px 10px; }
  .area-below { margin-left: 0; padding: 0 20px 30px; }
  .split-feature--video { margin: 30px 0 60px; }
  .split-feature-media--video { flex: none; width: 100%; }
  .nexo-video--full, .nexo-video--full video { min-height: 240px; }
  .split-feature--video .split-feature-body { padding: 36px 26px; }
}
@media (max-width: 576px) { .area-cards { grid-template-columns: 1fr; } .area-duo { grid-template-columns: 1fr; } .area-block-body h3 { font-size: 27px; } }


/* ============================================================
   REV.17 — Header full-bleed + voci di menu su UNA riga
   (feedback cliente 24-09: "occupa tutto l'header, non centrare;
   logo più a sinistra; parole e CTA non spezzate su due righe")
   Riferimenti: ui-ux-pro-max ux-guidelines #116 (Compact Label
   Overflow: le etichette/pill restano su una riga, nowrap) e
   #2/#100 (nav sticky non oscura contenuti/focus).
   ============================================================ */
@media (min-width: 992px) {
	/* Il contenitore dell'header occupa TUTTA la larghezza: il logo
	   parte dal margine sinistro della viewport, il menu arriva al
	   margine destro. Niente più box 1140px centrato. */
	.sub-header .container,
	.site-header .navbar > .container {
		max-width: none;
		width: 100%;
	}
	.sub-header .container { padding-left: 28px; padding-right: 28px; }
	.site-header .navbar > .container {
		padding-left: 28px;
		padding-right: 28px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	/* Logo ancorato a sinistra (non più rientrato dal container). */
	.navbar .navbar-brand {
		position: static;
		flex: 0 0 auto;
		margin: 10px 0 0 0;
	}
	/* Il menu occupa tutto lo spazio residuo fino al bordo destro. */
	#navbarResponsive {
		display: flex !important;
		flex: 1 1 0%;   /* basis 0: occupa esattamente lo spazio residuo, mai overflow */
		min-width: 0;
		margin-left: 36px;
	}
	#navbarResponsive .navbar-nav {
		width: 100%;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		/* REV.18: voci RAVVICINATE in un gruppo compatto (gap standard 24-40px),
		   non più sparse su tutta la larghezza. Pattern moderno: logo sx,
		   gruppo voci centrato, CTA a dx. */
		gap: clamp(20px, 2.4vw, 40px);
	}
	.navbar .navbar-nav .nav-item { margin: 0; }
	/* I due margini auto centrano il gruppo Home…Contatti nello spazio tra
	   logo e CTA, e ancorano la CTA al bordo destro. */
	.navbar .navbar-nav .nav-item:first-child { margin-left: auto; }
	.navbar .navbar-nav .nav-cta { margin-left: auto; }
	/* Voci e CTA mai spezzate su due righe. */
	.navbar .navbar-nav a.nav-link,
	.navbar .navbar-nav .nav-cta .nav-link { white-space: nowrap; }
	.navbar .navbar-nav .nav-cta .nav-link { margin-left: 0; }
}
/* Desktop stretto: si compatta per restare su una riga senza overflow. */
@media (min-width: 992px) and (max-width: 1299px) {
	.site-header .navbar > .container { padding-left: 20px; padding-right: 20px; }
	.nexo-logo-svg { height: 24px; }
	#navbarResponsive { margin-left: 20px; }
	.navbar .navbar-nav a.nav-link { font-size: 13.5px; }
	.navbar .navbar-nav .nav-cta .nav-link { padding: 7px 14px !important; }
	#navbarResponsive .navbar-nav { gap: 18px; }
}

/* ============================================================
   REV.20 — "Il percorso completo" (pre-analisi.html)
   Rail di avanzamento a 4 tappe: nodi numerati su una linea che
   si riempie con lo scroll (GSAP ScrollTrigger, scrub) e card
   allineate sotto ogni nodo.
   Riferimenti: persona UI Designer (agency-agents) · ui-ux-pro-max
   landing pattern "funnel-step-conversion" (progress indicator,
   mini-CTA sulla tappa corrente, colori di stato per tappa) ·
   motion.csv "Scroll Reveal / Standard" (400-600ms, power2.out,
   stagger ≤ 8 figli) · gsap-core (matchMedia + reduced motion).
   Progressive enhancement: senza JS/GSAP nessun elemento è nascosto
   e il rail risulta già pieno (stato finale = stato corretto).
   ============================================================ */
.percorso {
	--rail-gap: 22px;
	margin-top: 140px;
	padding: 96px 0 100px;
	background:
		radial-gradient(900px 380px at 10% -10%, #F5F3FF 0%, rgba(245, 243, 255, 0) 70%),
		radial-gradient(780px 340px at 94% 0%, #EFF6FF 0%, rgba(239, 246, 255, 0) 72%),
		linear-gradient(180deg, #FBFCFF 0%, #F2F5FC 100%);
	overflow: hidden;
}
.percorso .section-heading { margin-bottom: 56px; }
.percorso .section-heading .percorso-eyebrow {
	margin: 0 0 12px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	color: #6D28D9;
}
.percorso .section-heading > span:last-child { color: #475569; }

/* --- Rail: linea + nodi numerati (solo ≥ 1200px) --- */
.percorso-rail { position: relative; padding-bottom: 34px; }
.percorso-rail-line {
	position: absolute;
	top: 25px;
	/* centro del 1° e dell'ultimo nodo: colw/2 con colw = (100% - 3 gap)/4 */
	left: calc((100% - 3 * var(--rail-gap)) / 8);
	right: calc((100% - 3 * var(--rail-gap)) / 8);
	height: 4px;
	border-radius: 4px;
	background: #E4DEF8;
}
.percorso-rail-fill {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, #6D28D9 0%, #2563EB 38%, #1E3A8A 68%, #059669 100%);
	transform-origin: 0 50%;
}
.percorso-rail-spark {
	position: absolute;
	top: -4px; left: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(109, 40, 217, .26), 0 0 14px rgba(109, 40, 217, .5);
	opacity: 0; /* acceso solo dall'animazione GSAP */
}
.percorso-dots {
	position: relative;
	display: grid;
	/* minmax(0,1fr): colonne sempre uguali, anche se un badge nowrap spinge */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rail-gap);
	list-style: none;
	margin: 0; padding: 0;
}
.percorso-dot {
	--dot: #DDD6FE;
	--dot-ink: #4C1D95;
	position: relative;
	justify-self: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border: 3px solid var(--dot);
	color: var(--dot-ink);
	box-shadow: 0 8px 20px rgba(76, 29, 149, .14);
	z-index: 1;
}
.percorso-dot-num { font-size: 19px; font-weight: 800; line-height: 1; }
.percorso-dot:nth-child(1) { --dot: #6D28D9; }
.percorso-dot:nth-child(2) { --dot: #2563EB; }
.percorso-dot:nth-child(3) { --dot: #1E3A8A; }
.percorso-dot:nth-child(4) { --dot: #059669; }
.percorso-dot-pulse {
	position: absolute;
	top: -3px; left: -3px; right: -3px; bottom: -3px;
	border-radius: 50%;
	border: 2px solid #6D28D9;
	opacity: .45;
}

/* --- Griglia card (stesse colonne dei nodi) --- */
.percorso-grid-wrap { position: relative; }
.percorso-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rail-gap);
	align-items: stretch;
	list-style: none;
	margin: 0; padding: 0;
}
.percorso-grid-line { display: none; }
.percorso-card {
	--accent: #6D28D9;
	--accent-soft: #EDE9FE;
	--accent-ink: #4C1D95;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ECE7FA;
	border-top: 4px solid var(--accent);
	border-radius: 18px;
	padding: 26px 24px 24px;
	box-shadow: 0 12px 30px rgba(76, 29, 149, .08);
	transition: transform .35s ease, box-shadow .35s ease;
}
.percorso-card:nth-child(2) { --accent: #2563EB; --accent-soft: #DBEAFE; --accent-ink: #1E3A8A; }
.percorso-card:nth-child(3) { --accent: #1E3A8A; --accent-soft: #E0E7FF; --accent-ink: #1E3A8A; }
.percorso-card:nth-child(4) { --accent: #059669; --accent-soft: #ECFDF5; --accent-ink: #065F46; }
/* Connettore nodo -> card */
.percorso-card::before {
	content: '';
	position: absolute;
	top: -34px; left: 50%;
	width: 2px; height: 34px;
	margin-left: -1px;
	background: linear-gradient(180deg, var(--accent) 0%, rgba(255, 255, 255, 0) 100%);
	opacity: .5;
	transform-origin: 50% 0;
	/* --conn viene portato 0 -> 1 da GSAP (senza JS resta 1 = visibile) */
	transform: scaleY(var(--conn, 1));
}
.percorso-card:hover { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(76, 29, 149, .16); }
.percorso-card:hover .percorso-icon { transform: scale(1.07) rotate(-3deg); }
.percorso-card--now {
	background: linear-gradient(180deg, #FFFFFF 0%, #FBFAFF 100%);
	border-color: #C4B5FD;
	box-shadow: 0 0 0 1px #C4B5FD, 0 18px 44px rgba(109, 40, 217, .18);
}
.percorso-card-top { margin-bottom: 14px; }
.percorso-title {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin-bottom: 14px;
}
.percorso-title h3 { margin: 0; }
.percorso-icon {
	flex: 0 0 46px;
	width: 46px; height: 46px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: var(--accent-soft);
	color: var(--accent);
	transition: transform .35s ease;
}
.percorso-icon svg { display: block; width: 24px; height: 24px; }
.percorso .step-badge {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--accent-ink);
	background: var(--accent-soft);
	border-radius: 999px;
	padding: 6px 12px;
	margin: 0;
	white-space: nowrap; /* ux-guidelines #116: etichetta mai spezzata */
}
.percorso .step-badge strong { font-weight: 800; }
.percorso-card h3 {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #1E293B;
	margin-bottom: 12px;
	text-wrap: balance;
}
.percorso-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.percorso-meta li {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #475569;
	background: #F6F7FC;
	border: 1px solid #E7E9F4;
	border-radius: 8px;
	padding: 5px 9px;
}
.percorso-meta li.percorso-meta-price {
	color: var(--accent-ink);
	background: var(--accent-soft);
	border-color: transparent;
	font-weight: 800;
}
.percorso-card p {
	font-size: 13.5px;
	line-height: 1.72;
	color: #475569;
	margin: 0 0 18px;
	text-align: left;
}
.percorso-tag {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px dashed #E4DEF8;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--accent-ink);
}
.percorso-tag::before {
	content: '\2713';
	flex: 0 0 20px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.percorso-cta {
	margin-top: auto;
	align-self: flex-start;
	padding: 11px 18px;
	font-size: 11.5px;
	white-space: nowrap; /* una riga anche nella colonna da 4 */
}
.percorso-hint {
	margin-top: 10px;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	color: #6D28D9;
}
.percorso-cardnum { display: none; }
.percorso-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 46px;
	padding-top: 30px;
	border-top: 1px solid #E7E3F6;
	text-align: center;
}
.percorso-foot p {
	max-width: 620px;
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #475569;
}

/* Tablet: 2x2, rail sostituito dal medaglione numerato nella card */
@media (max-width: 1199px) {
	.percorso { margin-top: 100px; padding: 76px 0 80px; }
	.percorso .section-heading { margin-bottom: 40px; }
	.percorso-rail { display: none; }
	.percorso-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.percorso-card { padding: 24px 22px 22px; }
	.percorso-card::before { display: none; }
	.percorso-card-top { padding-right: 54px; }
	.percorso-cardnum {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 16px; right: 16px;
		width: 38px; height: 38px;
		border-radius: 50%;
		background: var(--accent-soft);
		color: var(--accent-ink);
		font-size: 16px; font-weight: 800; line-height: 1;
	}
}

/* Mobile: timeline verticale con linea disegnata allo scroll */
@media (max-width: 767px) {
	.percorso { margin-top: 70px; padding: 58px 0 64px; }
	.percorso .section-heading { margin-bottom: 34px; }
	.percorso-grid { grid-template-columns: 1fr; gap: 16px; }
	.percorso-grid-line {
		display: block;
		position: absolute;
		left: 19px; top: 26px; bottom: 26px;
		width: 2px;
		border-radius: 2px;
		background: linear-gradient(180deg, #6D28D9 0%, #2563EB 38%, #1E3A8A 68%, #059669 100%);
		opacity: .4;
		transform-origin: 50% 0;
	}
	.percorso-card { margin-left: 56px; padding: 22px 20px 20px; }
	.percorso-card-top { padding-right: 0; }
	.percorso-cardnum {
		top: 20px; left: -56px; right: auto;
		width: 40px; height: 40px;
		background: var(--accent);
		color: #fff;
		font-size: 17px;
		box-shadow: 0 6px 16px rgba(76, 29, 149, .22);
	}
	.percorso-card h3 { font-size: 18px; }
	.percorso-foot { flex-direction: column; gap: 14px; margin-top: 32px; padding-top: 24px; }
	.percorso-foot .filled-button { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.percorso-card, .percorso-icon { transition: none; }
	.percorso-card:hover { transform: none; }
	.percorso-rail-spark, .percorso-dot-pulse { display: none; }
}

/* --- REV.20 — Contatti: mappa Google visibile subito ---
   Niente più maschera con pulsante: l'iframe carica con la pagina.
   Barra indirizzo sopra la mappa (gradiente brand) e nota di
   trasparenza nLPD art. 19 sotto. Il CSS di .map-placeholder resta
   disponibile per ripristinare il consenso (vedi commento in contact.html). */
#map { position: relative; background: #F5F3FF; }
#map iframe { display: block; width: 100%; height: 480px; border: 0; }
.map-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 28px;
	background-image: linear-gradient(135deg, #4C1D95 0%, #6D28D9 100%);
	color: #fff;
}
.map-bar-text { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: #fff; }
.map-bar-text span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #DDD6FE;
}
.map-bar .filled-button {
	flex: 0 0 auto;
	background: #fff;
	background-image: none;
	color: #4C1D95;
}
.map-bar .filled-button:hover { background: #EDE9FE; color: #4C1D95; }
.map-note {
	margin: 0;
	padding: 14px 28px;
	background: #fff;
	border-top: 1px solid #EDE9FE;
	font-size: 12.5px;
	line-height: 1.7;
	color: #64748B;
}
.map-note a { color: #6D28D9; font-weight: 600; }
.map-note a:hover { color: #4C1D95; }
@media (max-width: 767px) {
	#map iframe { height: 340px; }
	.map-bar { padding: 18px 20px; }
	.map-bar-text { font-size: 15px; }
	.map-bar .filled-button { width: 100%; text-align: center; }
	.map-note { padding: 12px 20px; }
}


/* ============================================================
   REV.19 — Home, "Le tre aree in cui lavoriamo": card unificate.
   Feedback cliente 24-09: i tre testi sotto le infografiche
   avevano disposizione e raggruppamento confusi (lista prima del
   contesto, allineamenti misti, fondi diversi, altezze disuguali).
   Nuova composizione per card:
     1. infografica e testi nella STESSA superficie (una sola
        ombra, un solo raggio: il gruppo si legge come un oggetto);
     2. ordine di lettura corretto: titolo -> promessa (che cosa
        facciamo) -> percorso in 3 passi (come) -> CTA;
     3. i 3 passi diventano un percorso verticale: rail gradiente
        che si disegna allo scroll (GSAP) + nodi numerati;
     4. accento cromatico per area (blu / viola / notte) su indice,
        rail, nodi e CTA: le tre card sono una famiglia ma ognuna
        resta identificabile;
     5. altezze equalizzate e CTA agganciata al fondo: le tre
        colonne terminano allineate, niente fondi sfalsati.
   Rif. ui-ux-pro-max: landing "feature-rich-showcase" (un messaggio
   chiave per card), ux-guidelines hover states, motion.csv
   "Stagger List / Scroll Reveal" (stagger 0.1s, ease power2.out).
   ============================================================ */
.services .row > [class*="col-"] { display: flex; }
.services .area-card {
	--accent: #2563EB;
	--accent-soft: #EFF6FF;
	--accent-line: rgba(37, 99, 235, .30);
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 30px;
	background: #FFFFFF;
	border: 1px solid #E7EBF3;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(30, 58, 138, .08);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.services .area-card[data-accent="viola"] { --accent: #6D28D9; --accent-soft: #F5F3FF; --accent-line: rgba(109, 40, 217, .30); }
.services .area-card[data-accent="notte"] { --accent: #1E3A8A; --accent-soft: #EEF2FF; --accent-line: rgba(30, 58, 138, .30); }
.services .area-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 48px rgba(30, 58, 138, .16);
	border-color: var(--accent-line);
}
/* --- testa della card: infografica dentro la stessa superficie --- */
.area-card-media { position: relative; }
.area-card-media svg.nexo-infographic {
	position: relative;
	z-index: 1;
	height: 250px;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	background: linear-gradient(168deg, var(--accent-soft) 0%, #FFFFFF 92%);
}
.area-card-index {
	position: absolute;
	top: 10px;
	right: 14px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	z-index: 2;
	color: var(--accent);
	opacity: .16;
	pointer-events: none;
	user-select: none;
}
/* --- corpo: un solo blocco testo, allineamento unico a sinistra --- */
.services .service-item-wide.area-card .down-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background: #FFFFFF;
	padding: 26px 26px 24px;
}
.services .service-item-wide.area-card .down-content h4 {
	position: relative;
	margin: 0 0 10px;
	padding-left: 14px;
	font-size: 22px;
	color: #1E293B;
}
.services .service-item-wide.area-card .down-content h4::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 4px;
	border-radius: 2px;
	background: var(--accent);
}
.area-card-lead {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.65;
	color: #475569;
}
/* --- percorso in 3 passi: rail + nodi, non più lista slegata --- */
.area-steps { position: relative; width: 100%; margin-bottom: 22px; }
.area-steps-rail {
	position: absolute;
	left: 13px;
	top: 18px;
	bottom: 18px;
	width: 2px;
	border-radius: 1px;
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-line) 72%, rgba(255, 255, 255, 0) 100%);
}
.area-card .ig-steps { position: relative; margin: 0; padding: 0; }
.area-card .ig-steps li {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 14px;
}
.area-card .ig-steps li:last-child { margin-bottom: 0; }
.services .area-card .ig-steps li .ig-num {
	flex: 0 0 28px;
	height: 28px;
	z-index: 1;
	background: #FFFFFF;
	color: var(--accent);
	border: 2px solid var(--accent);
	box-shadow: 0 0 0 4px #FFFFFF;
	font-size: 13px;
	font-weight: 800;
}
.services .area-card .ig-steps li:last-child .ig-num {
	background: var(--accent);
	color: #FFFFFF;
}
.ig-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ig-step-text strong {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #1E293B;
}
.ig-step-text > span { font-size: 13.5px; line-height: 1.55; color: #556274; }
/* --- CTA secondaria: pill tenue che si accende al hover --- */
.area-card-cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
}
.area-card-cta .area-cta-arrow { transition: transform .25s ease; }
.area-card-cta:hover,
.area-card-cta:focus-visible {
	background: var(--accent);
	color: #FFFFFF;
	text-decoration: none;
}
.area-card-cta:hover .area-cta-arrow { transform: translateX(4px); }
@media (max-width: 991px) {
	.area-card-media svg.nexo-infographic { height: 220px; }
	.services .service-item-wide.area-card .down-content { padding: 22px 20px 22px; }
	.area-card-index { font-size: 38px; top: 8px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.area-card-cta .area-cta-arrow,
	.services .area-card { transition: none; }
}


/* ============================================================
   REV.21 — Home, "Le tre aree in cui lavoriamo": blocco centrato.
   Feedback cliente 24-09: «centrare l'intero blocco e portare la
   parte relativa alla pre-analisi al centro della sezione».
   1. Il richiamo alla pre-analisi non è più una coda del
      sottotitolo: diventa un band centrato (.areas-preanalisi)
      collocato al centro della sezione, tra intestazione e card.
   2. L'intero blocco è centrato: intestazione, band e contenuti
      interni delle tre card (titolo, promessa, percorso, CTA)
      sull'asse verticale centrale; il percorso numerato resta
      leggibile ma è centrato come gruppo.
   ============================================================ */
.services .section-heading { margin-bottom: 34px; }
.areas-preanalisi {
	width: min(720px, 100%);
	margin: 0 auto 56px;
	padding: 22px 30px;
	text-align: center;
	background: linear-gradient(135deg, #F5F3FF 0%, #EFF6FF 100%);
	border: 1px solid #DDD6FE;
	border-radius: 16px;
}
.areas-preanalisi-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #6D28D9;
	margin-bottom: 6px;
}
.areas-preanalisi-text {
	margin: 0 auto 14px;
	max-width: 560px;
	font-size: 15px;
	line-height: 1.6;
	color: #475569;
}
.areas-preanalisi-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	border-radius: 999px;
	background: #6D28D9;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	transition: background .25s ease, transform .25s ease;
}
.areas-preanalisi-cta:hover,
.areas-preanalisi-cta:focus-visible {
	background: #4C1D95;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-2px);
}
.areas-preanalisi-cta .area-cta-arrow { transition: transform .25s ease; }
.areas-preanalisi-cta:hover .area-cta-arrow { transform: translateX(4px); }
/* --- card: tutto il contenuto sull'asse centrale --- */
.services .service-item-wide.area-card .down-content {
	align-items: center;
	text-align: center;
}
.services .service-item-wide.area-card .down-content h4 {
	padding-left: 0;
	margin: 0 0 14px;
}
.services .service-item-wide.area-card .down-content h4::before {
	left: 50%;
	transform: translateX(-50%);
	top: -12px;
	bottom: auto;
	width: 44px;
	height: 4px;
	border-radius: 2px;
}
.area-card-lead {
	max-width: 34ch;
	margin-left: auto;
	margin-right: auto;
}
.area-steps {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
.area-card-cta { align-self: center; }
@media (max-width: 991px) {
	.areas-preanalisi { margin-bottom: 40px; padding: 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.areas-preanalisi-cta,
	.areas-preanalisi-cta .area-cta-arrow { transition: none; }
}


/* ============================================================
   REV.21 — Lockup di testata: marchio ufficiale + lettering.
   Il simbolo ufficiale (asset/Logo-Pack, sfondo rimosso per posa
   su fondo chiaro/scuro) affianca il lettering "NEXO GROUP SA"
   ricavato dai glifi Nasalization (rev.7): stessa altezza ottica,
   passo fisso 12px, nessun ridimensionamento deformante.
   ============================================================ */
.navbar .navbar-brand { gap: 12px; }
.brand-mark {
	display: block;
	height: 34px;
	width: auto;
	flex: 0 0 auto;
}
@media (max-width: 992px) {
	.navbar .navbar-brand { gap: 9px; }
	.brand-mark { height: 27px; }
}

/* REV.21 — lockup su schermi stretti: il marchio ufficiale occupa
   spazio nuovo, quindi il lettering scende a 20px per restare
   intero accanto al toggler (verificato a 420 e 360px). */
@media (max-width: 575px) {
	.navbar .navbar-brand { gap: 8px; }
	.brand-mark { height: 24px; }
	.nexo-logo-svg { height: 20px; }
}

/* REV.21 — sotto i 400px il lockup si compatta ulteriormente. */
@media (max-width: 400px) {
	.navbar .navbar-brand { gap: 7px; }
	.brand-mark { height: 22px; }
	.nexo-logo-svg { height: 18px; }
}