:root {
  --glass: rgba(255,255,255,0.06);
}

* { box-sizing: border-box; }
html,body { margin:0; background:#000; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text"; -webkit-font-smoothing:antialiased; }

.header {
  position:fixed; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  background: rgba(0,0,0,0.55);
  z-index:50;
}

.logo { font-weight:600; }
.contact-link { cursor:pointer; color:#9aa0a6; }

.container { max-width:1200px; margin:0 auto; padding:100px 20px 80px; }
.hero-title { margin:0 0 10px; font-size:40px; }
.hero-subtext { color:#888; max-width:700px; }

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
@media(max-width:960px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid{grid-template-columns:1fr;} }

.card { background:var(--glass); border-radius:12px; padding:10px; border:1px solid rgba(255,255,255,0.04); transition:transform .22s ease; }
.card:hover { transform:translateY(-6px); }

.img-wrap { position:relative; border-radius:10px; overflow:hidden; background:#0d0d0d; aspect-ratio:16/9; }
.card-img { width:100%; height:100%; object-fit:cover; display:block; }

.card-img, .modal-img { opacity:1; transition:none; }

.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.65); z-index:200; }
.modal-inner { max-width:1000px; max-height:85vh; overflow-y:auto; padding:20px; background:#111; border-radius:12px; }

@media(max-width:600px){
  .modal-inner { width:92%; max-height:80vh; padding:14px; }
  .card { padding:8px; }
}

.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.modal-img { width:100%; border-radius:10px; }

.lightbox { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.92); z-index:300; }
.lightbox img { max-width:94%; max-height:94%; border-radius:10px; margin-top:40px; }

.modal-card {
  background: rgba(20,20,20,0.72);
  backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,0.12);
  padding:28px 34px;
  border-radius:14px;
  text-align:center;
}

.email-link { color:#fff; text-decoration:none; opacity:.95; }

.modal-close-btn {
  padding:10px 20px;
  border-radius:8px;
  border:0;
  background:rgba(255,255,255,0.12);
  color:#fff;
  cursor:pointer;
  margin-bottom:12px;
}

.top-right {
  position:absolute;
  top:12px;
  right:12px;
}

.footer { padding:30px 0; text-align:center; color:#888; font-size:14px; border-top:1px solid rgba(255,255,255,0.05); }

.load-more-btn { padding:10px 14px; border-radius:8px; border:none; background:rgba(255,255,255,0.06); color:#fff; cursor:pointer; }
.loader { padding:14px 0; color:#9aa0a6; }