:root{
  --brand:#2f5ca2;
  --brand-dark:#21477f;
  --white:#ffffff;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--brand);
  background:#edf3f8;
}

a{
  text-decoration:none;
  color:inherit;
}

/* HEADER */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px clamp(24px,5vw,70px);
  background:transparent;
  transition:.35s ease;
}

.site-header.scrolled{
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.header-logo img{
  height:58px;
  width:auto;
  display:block;
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.18));
  transition:.35s ease;
}

.header-logo:hover img{
  transform:scale(1.05);
}

.menu{
  display:flex;
  gap:45px;
  align-items:center;
}

.menu a{
  color:var(--brand);
  font-size:18px;
  font-weight:600;
  position:relative;
  transition:.3s ease;
  text-shadow:0 1px 8px rgba(255,255,255,.55);
}

.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  background:var(--brand);
  transition:.35s ease;
}

.menu a:hover::after,
.menu a.active::after{
  width:100%;
}

.menu a:hover{
  color:var(--brand-dark);
}

/* HERO GENERALE */
.hero{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items:center;
  padding:120px 24px 55px;
  overflow:hidden;
  background-image:url("assets/sfondo.jpg");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}

/* SFUMATURA BIANCA DESKTOP */
.bg-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.76) 32%,
      rgba(255,255,255,.38) 62%,
      rgba(255,255,255,.10) 100%
    );
}

/* HOME */
.home-content{
  position:relative;
  z-index:2;
  width:min(900px,94vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-top:20px;
}

.main-logo{
  width:min(620px,80vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.22));
}

.services-line{
  margin-top:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
  color:var(--brand);
  font-size:clamp(18px,1.7vw,26px);
  font-weight:700;
  white-space:nowrap;
  letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(255,255,255,.95);
}

.services-line span{
  display:inline-flex;
  align-items:center;
  gap:18px;
}

.services-line span:not(:last-child)::after{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand);
  opacity:.78;
}

/* ANIMAZIONE */
.reveal{
  opacity:0;
  transform:translateY(28px) scale(.97);
  animation:revealIn 1.05s ease forwards .20s;
}

@keyframes revealIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* CONTATTI */
.contacts-content{
  position:relative;
  z-index:2;
  width:min(980px,94vw);
  text-align:center;
  color:var(--brand);
}

.contact-overlay{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.66) 52%,
      rgba(255,255,255,.34) 100%
    );
}

.company-info{
  margin-bottom:54px;
  color:var(--brand);
  text-shadow:0 2px 14px rgba(255,255,255,.96),0 8px 22px rgba(0,0,0,.12);
}

.company-info h1{
  margin:0 0 12px;
  font-size:clamp(27px,4vw,46px);
  line-height:1.08;
  font-weight:800;
}

.company-info p{
  margin:5px 0;
  font-size:clamp(19px,2.3vw,28px);
  font-weight:600;
}

.people-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(230px,1fr));
  gap:clamp(36px,7vw,92px);
  align-items:start;
  margin:0 auto 46px;
}

.person-card{
  background:rgba(255,255,255,.38);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:22px 18px 26px;
  border-radius:24px;
  box-shadow:0 24px 60px rgba(20,45,80,.14);
  transition:.35s ease;
}

.person-card:hover{
  transform:translateY(-7px);
  background:rgba(255,255,255,.58);
}

.person-card img{
  width:min(230px,54vw);
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  margin:0 auto 18px;
  border-radius:18px;
  box-shadow:0 18px 38px rgba(13,32,62,.25);
}

.person-card h2{
  margin:0 0 9px;
  color:var(--brand);
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.person-card a,
.pec{
  color:var(--brand);
  font-size:clamp(20px,2.2vw,26px);
  font-weight:500;
  text-shadow:0 2px 12px rgba(255,255,255,.95);
}

.person-card a:hover,
.pec:hover{
  color:var(--brand-dark);
}

.pec{
  display:inline-block;
  font-weight:700;
}

/* MOBILE */
@media (max-width:768px){
  .site-header{
    padding:16px 20px;
  }

  .header-logo img{
    height:42px;
  }

  .menu{
    gap:22px;
  }

  .menu a{
    font-size:15px;
  }

  .hero{
    padding-top:105px;
    background-image:url("assets/sfondo-mobile.png");
    background-position:center;
  }

  .bg-overlay{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.76) 0%,
        rgba(255,255,255,.48) 38%,
        rgba(255,255,255,.16) 100%
      );
  }

  .home-content{
    width:94vw;
    margin-top:0;
    transform:translateY(-10px);
  }

  .main-logo{
    width:min(310px,82vw);
  }

.services-line{
    margin-top:26px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;

    flex-wrap:nowrap;

    width:max-content;
    max-width:95%;

    padding:18px 34px;

    border-radius:18px;

    background:rgba(255,255,255,.45);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.65);

    box-shadow:
        0 12px 40px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.9);

    color:#2f5ca2;

    font-size:clamp(22px,1.8vw,30px);

    font-weight:700;

    letter-spacing:.02em;

    text-shadow:
        0 1px 0 #fff,
        0 0 10px rgba(255,255,255,.9);
}

.services-line span{
    display:flex;
    align-items:center;
    gap:22px;
}

.services-line span:not(:last-child)::after{
    content:"•";
    color:#2f5ca2;
    font-size:24px;
    font-weight:700;
    margin-left:2px;
}

@media (max-width:768px){

    .services-line{

        flex-direction:column;

        gap:10px;

        width:90%;

        padding:16px 18px;

        font-size:18px;

        text-align:center;

        white-space:normal;
    }

    .services-line span::after{
        display:none;
    }

}

  .people-grid{
    grid-template-columns:1fr;
    max-width:420px;
  }

  .company-info{
    margin-bottom:36px;
  }

  .company-info h1{
    font-size:26px;
  }

  .company-info p{
    font-size:18px;
  }
}