/* variables & base */
:root {
  --dark-bg: #10121a;
  --dark-light: #1c1f2a;
  --accent: #00e5ff;
  --text-light: #f4f4f4;
  --transition: 0.3s ease;
}
*,
*::before,
*::after { box-sizing: border-box; }
body { margin:0; font-family:'Cairo','Segoe UI',Tahoma,sans-serif; background:var(--dark-bg); color:var(--text-light); line-height:1.6; }
a { color:var(--accent); text-decoration:none; }
.container { width:90%; max-width:1200px; margin:0 auto; }

/* header */
.site-header { position:sticky; top:0; background:var(--dark-light); z-index:1000; }
.header-content { display:flex; align-items:center; justify-content:space-between; padding:0.45rem 0; }
.logo { display:inline-flex; align-items:center; }
.site-header .logo .site-logo-img { display:block; width:88px !important; height:auto !important; }
.contact-btn { background:var(--accent); color:var(--dark-bg); padding:0.5rem 1rem; border:none; border-radius:4px; cursor:pointer; transition:background var(--transition); }
.contact-btn:hover { background:#00b8d4; }

/* intro */
.intro { text-align:center; padding:2.4rem 0 1.8rem; }
.intro-title {
  max-width:920px;
  margin:0 auto;
  font-size:clamp(1.35rem, 2.8vw, 2.2rem);
  line-height:1.55;
  font-weight:700;
  letter-spacing:0.2px;
}
.intro-sub {
  max-width:760px;
  margin:0 auto;
  font-size:clamp(1rem, 2.2vw, 1.25rem);
  line-height:1.85;
  color:#d1d8e5;
}

/* portfolio copy */
.portfolio-copy {
  text-align:center;
  max-width:760px;
  margin:0 auto;
}
.portfolio-title {
  margin:0 0 0.8rem;
  font-size:clamp(1.85rem, 3.5vw, 2.6rem);
  line-height:1.33;
}
.portfolio-sub {
  margin:0;
  font-size:clamp(1rem, 2vw, 1.2rem);
  line-height:1.85;
  color:#c7ceda;
}
.accent-text {
  color:#ff7f1f;
  text-shadow:0 0 14px rgba(255, 127, 31, 0.25);
}

/* gallery/filter */
.filter-bar { text-align:center; margin:2rem 0 1rem; }
.filter-btn { background:transparent; border:2px solid var(--accent); color:var(--accent); padding:0.4rem 1rem; margin:0 0.25rem; cursor:pointer; transition:background var(--transition); border-radius:20px; }
.filter-btn.active, .filter-btn:hover { background:var(--accent); color:var(--dark-bg); }
.gallery { display:grid; grid-template-columns:1fr; gap:0.75rem; }
.grid-item {
  position:relative;
  cursor:pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.grid-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:6px;
  transition:transform var(--transition);
}
.grid-item:hover img {
  transform:scale(1.05);
}
.play-icon {
  position:absolute;
  top:50%;
  left:50%;
  width:40px;
  height:40px;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.5) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="24,16 24,48 48,32" fill="%23ffffff"/></svg>') no-repeat center;
  background-size:50%;
  border-radius:50%;
  opacity:0;
  transition:opacity var(--transition);
}
.grid-item:hover .play-icon {
  opacity:1;
}
.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 6px;
  background: #161a24;
  color: #b8c0d4;
}

/* modal */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; z-index:2000; }
.modal.open { display:flex; }
.modal-content { position:relative; width:90%; max-width:800px; }
.close-btn { position:absolute; top:-30px; right:0; font-size:2rem; color:var(--text-light); cursor:pointer; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper #modal-video { position:absolute; inset:0; }
.video-wrapper iframe { position:absolute; width:100%; height:100%; border:none; }

/* footer */
.footer { background:var(--dark-light); padding:1rem 0; }
.footer-content { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.social-links a { display:inline-block; background:var(--accent); color:var(--dark-bg); padding:0.3rem 0.6rem; border-radius:4px; margin:0 0.3rem; transition:opacity var(--transition); }
.social-links a:hover { opacity:0.8; }

/* responsive grid */
@media(min-width:600px) { .gallery { grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px) { .gallery { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px) { .gallery { grid-template-columns:repeat(4,1fr); } }
@media(max-width:600px) {
  .site-header .logo .site-logo-img { width:74px !important; }
  .intro-title { margin-bottom:0.7rem; }
  .filter-bar { margin-top:1.6rem; }
}