:root{
  /* Palette aggiornata (coerente col logo turchese-viola) */
  --bg:#333947;          /* blu-notte */
  --bg2:#1b1338;         /* viola scuro */
  --fg:#e6e6e6;
  --muted:#b9c0ca;
  --accent:#00d4ff;      /* turchese */
  --accent2:#b56dff;     /* viola */
  --card:#121722;
  --card-border:#1b2231;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 10% -10%, #2a3145, var(--bg)) fixed;
}

.container{ width:min(1100px,92%); margin:0 auto; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,14,20,.75); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg); font-weight:650; letter-spacing:.2px; }
.logo{ width:36px; height:36px; }

.nav{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.nav a{ color:var(--muted); text-decoration:none; padding:.5rem .6rem; border-radius:.6rem; }
.nav a:hover, .nav a.active{ color:var(--fg); background:#121722; }

.nav-toggle{ display:none; }
@media (max-width:760px){
  .nav{ display:none; flex-direction:column; background:var(--card); padding:.5rem; border:1px solid var(--card-border); position:absolute; right:4%; top:52px; border-radius:.8rem; }
  .nav.show{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .7rem; border:1px solid var(--card-border); border-radius:.6rem; background:#0f1420; color:var(--fg); }
}

/* ---------- HERO ANIMATA ---------- */
.hero{
  position:relative;
  display:grid; place-items:center;
  min-height:58vh; text-align:center;
  padding:4rem 0 3rem;
  overflow:hidden;
  border-radius:1.2rem;
  background: linear-gradient(120deg, var(--bg), var(--bg2));
}
/* bagliori morbidi */
.hero::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(1000px 800px at 10% -10%, rgba(181,109,255,.15), transparent 60%),
    radial-gradient(900px 700px  at 90% 110%, rgba(0,212,255,.12), transparent 60%);
  filter: blur(30px);
  animation: floatGlow 18s ease-in-out infinite;
}
@keyframes floatGlow{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(-2%,1%,0) scale(1.03); }
}

/* canvas delle particelle neurali */
#neural-bg{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.45;
}

/* contenuto hero */
.hero-inner{
  position:relative; z-index:1;
  display:grid; gap:.9rem; justify-items:center;
  animation: fadeUp .8s ease-out both;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

.hero-logo{
  width: clamp(110px, 16vw, 170px);
  filter: drop-shadow(0 6px 20px rgba(0,212,255,.25));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.hero h1{ font-size:clamp(2rem,3.6vw,3rem); margin:.3rem 0 .4rem; letter-spacing:.5px; }
.hero p{ color:var(--muted); max-width:62ch; margin:0 auto 1.2rem; }

/* Button */
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:.8rem; border:1px solid var(--card-border);
  background:linear-gradient(180deg,#1a2030,#121722); color:var(--fg); text-decoration:none; font-weight:600;
  box-shadow:0 8px 24px rgba(0,212,255,.08), inset 0 0 0 1px rgba(0,212,255,.12);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,212,255,.12), inset 0 0 0 1px rgba(181,109,255,.25); }

/* Cards & sections */
.cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); margin:2rem 0 3rem; }
.card{ background:var(--card); border:1px solid var(--card-border); border-radius:1rem; padding:1rem 1.1rem; }
.card h2{ margin-top:.2rem; margin-bottom:.2rem; }
.card p{ color:var(--muted); }
.card-link{ text-decoration:none; color:var(--accent); }

.lede{ color:var(--muted); max-width:68ch; }

.people-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; margin:1rem 0 2rem; }
.person{ background:var(--card); border:1px solid var(--card-border); border-radius:1rem; padding:1rem; }
.person img{ width:100%; border-radius:.8rem; border:1px solid var(--card-border); }
.role{ color:var(--muted); margin-top:0; }

.accordions details{ background:var(--card); border:1px solid var(--card-border); border-radius:.8rem; padding:.8rem 1rem; margin:.7rem 0; }
.accordions summary{ cursor:pointer; }

.publist{ line-height:1.8; }
.publist .authors{ font-weight:600; }
.publist .title{ font-style:italic; }
.publist a{ color:var(--accent); text-decoration:none; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; margin-bottom:1rem; }
.contact-form{ background:var(--card); border:1px solid var(--card-border); padding:1rem; border-radius:.8rem; display:grid; gap:.7rem; }
.contact-form label{ display:grid; gap:.4rem; }
.contact-form input, .contact-form textarea{
  width:100%; padding:.6rem .7rem; border-radius:.6rem; border:1px solid var(--card-border); background:#0f1420; color:var(--fg);
}
.form-note{ color:var(--muted); font-size:.9rem; }


/* Footer */
.site-footer{ border-top:1px solid var(--card-border); margin-top:3rem; }
.footer-inner{ padding:1rem 0 2rem; color:var(--muted); }


/* Footer links */
.site-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

/* ——— People layout ——— */
.people-grid{
  max-width: 980px;           /* evita la card “a tutta pagina” */
  margin-inline: auto;
}

/* Card: due colonne = sinistra (foto+link), destra (testo) */
.people-grid .person{
  display: grid;
  grid-template-columns: clamp(120px, 20vw, 220px) 1fr;
  column-gap: 2rem;
  row-gap: 0;
  align-items: start;
}

/* Colonna sinistra: foto + link sotto */
.person-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Avatar quadrato, niente deformazioni */
.person-left img{
  width: clamp(120px, 20vw, 220px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Link sotto la foto */
.person-left .person-links{
  margin: 0;
  font-size: 0.95rem;
}

/* Colonna destra: nome, ruolo, bio uno sotto l’altro */
.person-right h2{
  margin: 0 0 0.2rem 0;
}

.person-right .role{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.9;
}

.person-right .bio{
  margin: 0.5rem 0 0 0;
  line-height: 1.55;
  max-width: 75ch;
}

/* Mobile: impila ma mantiene i blocchi coerenti */
@media (max-width: 720px){
  .people-grid .person{
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .person-left{
    align-items: center;
    text-align: center;
  }

  .person-right{
    text-align: left;
  }
}

/* ——— Colore link (stesso celeste della mail) ——— */
:root{ --accent-link: #6EC3FF; } /* regola qui se il tuo “celeste mail” è diverso */

.people-grid .person a,
.people-grid .person a:visited{
  color: var(--accent-link);
  text-decoration: none;
}

.people-grid .person a:hover{
  text-decoration: underline;
  filter: brightness(1.1);
}

.site-footer a:hover {
  text-decoration: underline;
}