:root{
  --primary-1: #007BFF;
  --primary-2: #00C2FF;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#fff;color:#222;}
.navbar-brand{font-weight:700;color:var(--primary-1) !important;}
.site-hero{background-size:cover;background-position:center;border-radius:8px;position:relative;margin-bottom:20px;padding:80px 0 60px;color:#fff}
.hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.12));padding:40px;border-radius:8px}
.site-hero h1{color:#fff;text-shadow:0 4px 18px rgba(0,0,0,0.35)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-items:stretch}
.tile{display:block;overflow:hidden;border-radius:8px;position:relative;box-shadow:0 8px 24px rgba(3,7,18,0.06);transition:transform .25s ease,box-shadow .25s ease;border:4px solid transparent}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.tile:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(3,7,18,0.12);border-color:rgba(0,123,255,0.12)}
.tile:hover img{transform:scale(1.06)}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.82);z-index:1050;padding:20px}
.lightbox[aria-hidden="false"]{display:flex}
.lb-content{max-width:1100px;width:100%;max-height:90vh;overflow:auto;text-align:center}
.lb-content img{max-width:100%;max-height:80vh;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,0.6)}
.lb-close{position:fixed;right:20px;top:20px;background:transparent;border:0;color:#fff;font-size:36px;cursor:pointer}
.lb-caption{color:#fff;margin-top:10px;font-size:14px}

/* responsive */
@media (max-width:576px){
  .site-hero{padding:40px 0}
  .gallery-grid{gap:10px}
}