:root{

  --bg:#0b1220;

  --panel:#0f1b33;

  --card:#111f3a;

  --text:#eaf0ff;

  --muted:#b7c3e6;

  --brand:#4fd1c5;

  --brand2:#60a5fa;

  --border:rgba(255,255,255,.10);

  --shadow: 0 12px 30px rgba(0,0,0,.35);

  --radius: 16px;

  --max: 1100px;

  --link:#9dd6ff;

  --linkHover:#c8ecff;

  --focus: 0 0 0 3px rgba(79,209,197,.25);

  color-scheme: dark;

}



*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:

    radial-gradient(900px 500px at 10% -10%, rgba(96,165,250,.25), transparent 60%),

    radial-gradient(900px 500px at 90% 0%, rgba(79,209,197,.22), transparent 55%),

    linear-gradient(180deg, var(--bg), #070b14 70%);

  color:var(--text);

  line-height:1.55;

}



a{color:var(--link); text-decoration:none}

a:hover{color:var(--linkHover)}

a:focus-visible, button:focus-visible, input:focus-visible{outline:none; box-shadow:var(--focus); border-radius:10px}



.container{max-width:var(--max); margin:0 auto; padding: 0 18px}



.topbar{

  position:sticky; top:0; z-index:50;

  backdrop-filter: blur(10px);

  background: rgba(10,16,30,.65);

  border-bottom:1px solid var(--border);

}

.topbar-inner{

  display:flex; align-items:center; justify-content:space-between;

  gap:14px; padding:14px 0;

}

.brand{

  display:flex; align-items:center; gap:10px;

}



.brand-title{

  font-weight:800; letter-spacing:.3px; line-height:1.1;

}

.brand-sub{font-size:12px; color:var(--muted)}



.nav{

  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;

}

.nav a{

  padding:10px 12px;

  border:1px solid transparent;

  border-radius: 999px;

  color:var(--text);

  font-weight:600;

  font-size:14px;

  opacity:.92;

}

.nav a:hover{border-color: var(--border); background: rgba(255,255,255,.05)}

.nav a.active{border-color: rgba(79,209,197,.35); background: rgba(79,209,197,.10)}



.hero{

  padding: 34px 0 18px;

}

.hero-grid{

  display:grid; gap:18px;

  grid-template-columns: 1.3fr .7fr;

}

@media (max-width: 900px){

  .hero-grid{grid-template-columns:1fr}

}

.card{

  background: rgba(17,31,58,.70);

  border:1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}

.card-pad{padding:18px}

h1,h2,h3{margin:0 0 10px}

h1{font-size:34px; letter-spacing:.2px}

@media (max-width: 520px){ h1{font-size:28px} }

.lead{color:var(--muted); margin:0; font-size:16px}



.kpi{

  display:grid; grid-template-columns:1fr; gap:10px;

}

.pill{

  display:flex; align-items:flex-start; gap:10px;

  padding:12px;

  border-radius:14px;

  background: rgba(255,255,255,.04);

  border:1px solid var(--border);

}

.pill b{display:block}

.pill small{color:var(--muted)}



.section{padding: 16px 0 34px}

.section-head{

  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;

  margin-bottom:12px;

}

.section-head h2{font-size:20px}

.section-head p{margin:0; color:var(--muted); font-size:14px}



.grid{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap:14px;

}

@media (max-width: 900px){ .grid{grid-template-columns: repeat(2,1fr)} }

@media (max-width: 560px){ .grid{grid-template-columns: 1fr} }



.tile{

  display:flex; flex-direction:column; gap:10px;

  padding:16px;

  border-radius: var(--radius);

  background: rgba(255,255,255,.04);

  border:1px solid var(--border);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;

}

.tile:hover{transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18)}

.tile h3{font-size:16px; margin:0}

.tile p{margin:0; color:var(--muted); font-size:14px}

.tile .cta{margin-top:auto; font-weight:700}



.breadcrumb{

  font-size:13px;

  color:var(--muted);

  margin: 14px 0 0;

}

.breadcrumb a{color:var(--muted)}

.breadcrumb a:hover{color:var(--text)}



.gallery{

  display:grid;

  grid-template-columns: repeat(4, 1fr);

  gap:10px;

}

@media (max-width: 980px){ .gallery{grid-template-columns: repeat(3,1fr)} }

@media (max-width: 680px){ .gallery{grid-template-columns: repeat(2,1fr)} }



.g-item{

  position:relative;

  overflow:hidden;

  border-radius: 14px;

  border:1px solid var(--border);

  background: rgba(255,255,255,.03);

  cursor:pointer;

  min-height: 120px;

}

.g-item img{

  width:100%; height:100%;

  object-fit:cover;

  display:block;

  transform: scale(1.02);

  transition: transform .18s ease, opacity .18s ease;

  opacity:.95;

}

.g-item:hover img{transform: scale(1.06); opacity:1}



.g-cap{

  position:absolute; left:10px; right:10px; bottom:10px;

  padding:8px 10px;

  border-radius: 12px;

  background: rgba(0,0,0,.45);

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

  font-size:12px;

  color: rgba(255,255,255,.92);

  backdrop-filter: blur(6px);

}



.footer{

  padding: 26px 0 34px;

  border-top:1px solid var(--border);

  color:var(--muted);

  font-size:13px;

}



/* Lightbox */

.lightbox{

  position:fixed; inset:0; z-index:100;

  display:none;

  align-items:center; justify-content:center;

  background: rgba(0,0,0,.78);

  padding: 22px;

}

.lightbox.open{display:flex}

.lb-inner{

  width:min(1100px, 100%);

  background: rgba(10,16,30,.92);

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

  border-radius: 18px;

  overflow:hidden;

  box-shadow: 0 30px 70px rgba(0,0,0,.6);

}

.lb-bar{

  display:flex; align-items:center; justify-content:space-between;

  gap:10px;

  padding: 10px 12px;

  border-bottom:1px solid rgba(255,255,255,.10);

}

.lb-title{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.lb-actions{display:flex; gap:8px}

.lb-btn{

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

  background: rgba(255,255,255,.06);

  color:var(--text);

  padding: 8px 10px;

  border-radius: 12px;

  cursor:pointer;

  font-weight:700;

}

.lb-btn:hover{background: rgba(255,255,255,.10)}

.lb-media{

  display:flex; align-items:center; justify-content:center;

  background: rgba(0,0,0,.22);

}

.lb-media img{

  width:100%;

  height:auto;

  max-height: 78vh;

  object-fit:contain;

  display:block;

}





/* ===== LOGO NAVBAR ===== */



.brand-badge{

  display: flex;

  align-items: center;

  justify-content: center;

  background: none;

}



.brand-logo{

  height: 100px;   /* puoi cambiare dimensione qui */

  width: auto;

  display: block;

}



.footer-inner{

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

}