.container { max-width:1400px; margin:0 auto; padding:0 2rem; }
.section { padding:100px 0; position:relative; background:var(--bg-void); }
.section-header { text-align:center; margin-bottom:60px; }
.section-title { font-family:var(--font-display); font-size:2.2rem; margin-bottom:1rem; color:var(--text-main); }
.text-muted-label { color:var(--text-muted); font-family:var(--font-heading); letter-spacing:3px; font-size:0.8rem; text-transform:uppercase; }
.text-gradient { background:linear-gradient(135deg,var(--neon-cyan) 0%,#003366 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
[data-aos] { opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease-out-expo),transform 0.8s var(--ease-out-expo); }
[data-aos].active { opacity:1; transform:translateY(0); }

/* GALLERY */
.gallery-section { background:var(--bg-deep); padding:100px 0; }
.gallery-section .section-header::after { content:''; display:block; width:60px; height:3px; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-gold)); margin:18px auto 0; border-radius:2px; }

.gallery-filters { display:flex; justify-content:center; gap:12px; margin-bottom:50px; flex-wrap:wrap; }
.filter-btn { padding:0.55rem 1.5rem; border-radius:50px; border:1.5px solid var(--glass-border); background:#fff; color:var(--text-muted); font-family:var(--font-heading); font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all 0.3s; box-shadow:0 4px 12px rgba(0,0,0,0.04); }
.filter-btn:hover, .filter-btn.active { background:var(--neon-cyan); color:#fff; border-color:var(--neon-cyan); box-shadow:0 8px 20px rgba(0,124,195,0.25); transform:translateY(-2px); }

/* MASONRY — respects natural aspect ratios */
.gallery-grid { columns:3; column-gap:16px; }
@media(max-width:900px){ .gallery-grid { columns:2; } }
@media(max-width:500px){ .gallery-grid { columns:1; } }

.gallery-item {
  position:relative; overflow:hidden; cursor:pointer;
  border-radius:14px; margin-bottom:16px;
  break-inside:avoid;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
  border:1px solid var(--glass-border);
  opacity:0; transform:translateY(28px);
  transition:opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo), box-shadow 0.4s ease, border-color 0.4s ease;
}
.gallery-item.visible { opacity:1; transform:translateY(0); }
.gallery-item:hover { box-shadow:0 20px 50px rgba(0,124,195,0.2); border-color:rgba(0,124,195,0.3); }

.gallery-item img {
  width:100%; display:block;
  transform:scale(1.04);
  transition:transform 0.7s var(--ease-out-expo);
}
.gallery-item:hover img { transform:scale(1); }

.overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,20,55,0.88) 0%,rgba(0,40,90,0.2) 50%,transparent 100%);
  opacity:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem;
  transition:opacity 0.45s, transform 0.45s var(--ease-out-expo);
  transform:translateY(10px);
}
.gallery-item:hover .overlay { opacity:1; transform:translateY(0); }

.overlay-title { font-family:var(--font-heading); font-size:1rem; font-weight:700; color:#fff; letter-spacing:1px; text-transform:uppercase; transform:translateY(10px); transition:transform 0.45s var(--ease-out-expo) 0.05s; }
.gallery-item:hover .overlay-title { transform:translateY(0); }

.overlay-meta { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:#00c3ff; margin-top:5px; font-family:var(--font-heading); font-weight:600; transform:translateY(8px); opacity:0; transition:transform 0.45s var(--ease-out-expo) 0.1s,opacity 0.45s 0.1s; }
.gallery-item:hover .overlay-meta { transform:translateY(0); opacity:1; }

.gallery-item::before { content:''; position:absolute; inset:0; border:2px solid var(--neon-cyan); opacity:0; z-index:2; border-radius:14px; transform:scale(1.04); transition:opacity 0.4s,transform 0.5s var(--ease-out-expo); pointer-events:none; }
.gallery-item:hover::before { opacity:0.4; transform:scale(1); }

/* =========================================
   LIGHTBOX — FIXED close button
   ========================================= */
.lightbox {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.lightbox-backdrop {
  position:absolute; inset:0;
  background:rgba(5,15,40,0); backdrop-filter:blur(0px);
  transition:background 0.6s var(--ease-out-expo),backdrop-filter 0.6s;
}
.lightbox.open .lightbox-backdrop {
  background:rgba(5,15,40,0.94); backdrop-filter:blur(14px); pointer-events:all;
}

/* Wrapper constrains the image + puts close btn INSIDE the visible area */
.lightbox-wrapper {
  position:relative; z-index:2;
  width:min(88vw, 1000px);
  max-height:90vh;
  display:flex; flex-direction:column;
  transform:scale(0.6) translateY(60px); opacity:0;
  transition:transform 0.7s var(--ease-out-expo),opacity 0.5s;
  pointer-events:none;
}
.lightbox.open .lightbox-wrapper { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }

/* Close button — top-right INSIDE wrapper, always visible */
.lightbox-close {
  position:absolute; top:12px; right:12px; z-index:10;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  background:rgba(5,15,40,0.75);
  border:1.5px solid rgba(255,255,255,0.35);
  border-radius:50%;
  transition:background 0.3s, border-color 0.3s, transform 0.4s var(--ease-out-expo);
  backdrop-filter:blur(6px);
}
.lightbox-close:hover { background:rgba(0,124,195,0.8); border-color:var(--neon-cyan); transform:rotate(90deg) scale(1.1); }
.lightbox-close svg { stroke:#fff; width:16px; height:16px; }

.lightbox-img {
  width:100%;
  position:relative; overflow:hidden; border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  border:1px solid rgba(0,124,195,0.25);
  flex-shrink:0;
  line-height:0;
}

/* Curtain reveal */
.lightbox-curtain {
  position:absolute; inset:0; background:var(--bg-deep);
  transform-origin:left; transform:scaleX(1); z-index:2;
  transition:transform 0.7s var(--ease-out-expo) 0.15s;
}
.lightbox.open .lightbox-curtain { transform:scaleX(0); transform-origin:right; }

.lightbox-img img {
  width:100%;
  max-height:calc(90vh - 80px);
  object-fit:cover;
  display:block;
  background:transparent;
}

.lightbox-info {
  margin-top:12px; padding:0 4px;
  display:flex; justify-content:space-between; align-items:center;
  opacity:0; transform:translateY(12px);
  transition:opacity 0.5s 0.5s,transform 0.5s var(--ease-out-expo) 0.5s;
  flex-shrink:0;
}
.lightbox.open .lightbox-info { opacity:1; transform:translateY(0); }

.lightbox-title { font-family:var(--font-display); font-size:1rem; color:#fff; letter-spacing:2px; }
.lightbox-num { font-family:var(--font-heading); font-size:0.95rem; font-weight:700; color:var(--neon-cyan); letter-spacing:0.15em; }

/* Prev/Next — positioned on sides of the wrapper */
.lb-prev, .lb-next {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border:1.5px solid rgba(255,255,255,0.2);
  background:rgba(5,15,40,0.6); backdrop-filter:blur(6px);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff;
  transition:border-color 0.3s,background 0.3s,transform 0.4s var(--ease-out-expo);
  z-index:10;
}
.lb-prev { left:-60px; }
.lb-next { right:-60px; }
.lb-prev:hover { border-color:var(--neon-cyan); background:rgba(0,124,195,0.2); transform:translateY(-50%) translateX(-4px); }
.lb-next:hover { border-color:var(--neon-cyan); background:rgba(0,124,195,0.2); transform:translateY(-50%) translateX(4px); }
.lb-prev svg, .lb-next svg { width:18px; height:18px; stroke:currentColor; fill:none; }

/* Progress bar */
.lightbox-progress { height:2px; background:rgba(255,255,255,0.1); margin-top:10px; border-radius:2px; flex-shrink:0; opacity:0; transition:opacity 0.5s 0.5s; }
.lightbox.open .lightbox-progress { opacity:1; }
.lightbox-progress-bar { height:100%; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-gold)); border-radius:2px; transition:width 0.5s var(--ease-out-expo); }


/* RESPONSIVE */
@media(max-width:768px){
  .nav-links { display:none; flex-direction:column; position:fixed; top:80px; left:0; width:100%; background:white; padding:2rem; z-index:999; max-height:80vh; overflow-y:auto; }
  .nav-links.active { display:flex; }
  .mobile-menu-btn { display:block; }
  .hero-title { font-size:2.8rem; }
  .lb-prev { left:-12px; } .lb-next { right:-12px; }
  .footer-content { grid-template-columns:1fr; text-align:center; }
  .socials { justify-content:center; }
}