/* STILE AGGIORNATO – HERO COMPATTO */

:root{
  --blue-dark:#094b6b;
  --blue:#1f8ac0;
  --blue-light:#5cc2ea;
  --accent:#f39c12;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Segoe UI,Arial,sans-serif;
  background:#fff;
  color:#1c1c1c;
}

/* NAV */
.main-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  padding:14px;
  background:#0b5f8a;
}
.main-nav a{
  color:#fff;
  background:var(--accent);
  padding:8px 16px;
  border-radius:14px;
  font-weight:600;
  text-decoration:none;
}

/* HERO */
.hero{
  position:relative;
  text-align:center;
  color:#fff;
  background:linear-gradient(180deg,#0b5f8a,#1f8ac0);
}
.hero.compact{
  padding:32px 20px 140px; /* altezza standard unica */
  min-height:320px;
}
.hero-logos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.logo-hero{
  width:200px;
  max-width:90%;
}

/* WAVES */
.waves,.waves-footer{
  position:absolute;
  left:0;
  width:100%;
  height:80px;
  overflow:hidden;
  pointer-events:none;
}
.waves{bottom:0}
.waves-footer{top:-80px}
.waves svg,.waves-footer svg{
  width:300%;
  height:100%;
}
.wave{animation:waveMove linear infinite}
.wave.back{fill:var(--blue-light);animation-duration:40s}
.wave.mid{fill:var(--blue);animation-duration:26s}
.wave.front{fill:var(--blue-dark);animation-duration:18s}

@keyframes waveMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* BOX */
.focus-grid{
  max-width:1200px;
  margin:0 auto;
  padding:32px 20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.focus-box{
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 8px 20px rgba(0,0,0,.1);
  display:flex;
  flex-direction:column;
  animation:boxIn .5s ease both;
}
@keyframes boxIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.focus-box:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(11,95,138,.3);
}

.focus-box a{
  margin-top:auto;
  background:#0b5f8a;
  color:#fff;
  padding:10px 14px;
  border-radius:14px;
  text-align:center;
}
.focus-box a+a{margin-top:10px}

.focus-box.highlight{
  border-top:5px solid var(--accent);
}

/* FOOTER */
footer{
  background:#0b5f8a;
  color:#fff;
  text-align:center;
  padding:28px 20px;
}


/* HERO COMPACT UNIFICATO – FIX DEFINITIVO */
.waves{
  height:100px;
}
@media (max-width:768px){
  .hero.compact{
    min-height:300px;
    padding-bottom:160px;
  }
}