/* GLOBAL */
:root{
  --bg: #0f1724;
  --card: #1b2430;
  --muted: #aab3c2;
  --accent: #00ff99;
  --text: #ffffff;
  --glass: rgba(255,255,255,0.04);
}
*{ box-sizing: border-box; margin:0; padding:0; }
html,body{
     height:100%;
      font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
       background:var(--bg); color:var(--text);
        -webkit-font-smoothing:antialiased; 
    }

/* NAVBAR */
.navbar{
  position:sticky;
   top:0;
    z-index:60;
   display:flex;
   align-items:center;
   justify-content:space-between;
   padding:12px 20px;
   gap:12px;
  background:linear-gradient(180deg, rgba(10,12,16,0.9), rgba(12,14,18,0.75));
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.logo{ color:var(--accent);
     font-weight:800;
      font-size:20px;
       letter-spacing:1px;
    }
.nav-links{ list-style:none; 
    display:flex; 
    gap:18px; 
    align-items:center;
}
.nav-links a{ color:var(--text);
     text-decoration:none;
      font-size:15px;
       opacity:0.95;
    }
#theme-toggle{ background:transparent; 
    border:1px solid rgba(255,255,255,0.06);
     padding:8px 10px;
      border-radius:8px; 
      cursor:pointer;
       color:var(--text);
     }

/* HERO */
.hero{ position:relative;
     height:60vh;
      min-height:380px;
       display:flex;
        align-items:center; 
        justify-content:center; 
        overflow:hidden; 
    }
.hero-bg{ position:absolute;
     inset:0;
      background: linear-gradient(120deg,#10202b,#132f3e 40%, #0b1320); 
      filter:blur(0px); 
      transform-origin:center; 
      transition:transform 0.2s ease; 
      z-index:0;
       opacity:0.9;
     }
.slider{ position:absolute;
     inset:0; 
     z-index:1; 
     overflow:hidden;
     }
.slide{ position:absolute; 
    inset:0; 
    width:100%;
     height:100%; 
     object-fit:cover; 
     opacity:0; 
     transition:opacity 1s ease; 
    }
.slide.active{ opacity:1;
 }
.hero-content{ position:relative;
     z-index:3; 
     text-align:center;
      padding:10px 24px;
       max-width:1100px; 
    }
.main-heading{ font-size:clamp(28px,6vw,56px); 
    font-weight:800; 
    text-transform:uppercase; 
    letter-spacing:2px;
  background:linear-gradient(45deg,#ffd54f,#00ff99,#00aaff); 
  -webkit-background-clip:text; 
  color:transparent; 
}
.underline{ height:6px; 
    width:0;
     background:var(--accent); 
     margin:12px auto;
      border-radius:6px;
       animation:underlineGrow 1s forwards 0.2s; 
    }
.sub-text{ color:rgba(255,255,255,0.85);
     margin-top:10px;
      font-size:15px;
     }

/* HERO DOTS */
.dots{ margin-top:18px;
     display:flex;
      gap:8px;
       justify-content:center;
     }
.dot{ width:12px;
     height:12px;
      background:rgba(255,255,255,0.2);
      border-radius:50%;
      border:none;
      cursor:pointer;
      transition:transform .2s ease, background .2s ease;
         }
.dot.active{ background:var(--accent);
     transform:scale(1.25);
     }

/* FILTER BAR (sticky) */
.filter-bar{ position:sticky;
     top:72px;
      z-index:55;
       display:flex;
        justify-content:space-between;
         align-items:center;
          gap:12px;
           padding:12px 20px;
            background:linear-gradient(180deg, rgba(12,14,18,0.6), rgba(12,14,18,0.3)); backdrop-filter: blur(6px);
             border-bottom:1px solid rgba(255,255,255,0.02);
             }
.chips{ display:flex;
     gap:8px;
      flex-wrap:wrap;
       align-items:center;
     }
.filter-btn{ background:transparent;
     color:var(--text);
      border:1px solid rgba(255,255,255,0.04);
       padding:8px 12px;
        border-radius:999px;
         cursor:pointer;
          font-weight:600; 
        }
.filter-btn.active{ background:var(--accent);
     color:#002;
      box-shadow:0 6px 18px rgba(0,255,153,0.08);
     }
#search{ padding:8px 12px; 
    border-radius:8px;
     border:1px solid rgba(255,255,255,0.06); 
     background:transparent; 
     color:var(--text); 
     min-width:200px;
     }

/* SECTION LABEL */
.section-label{ text-align:center;
     color:var(--accent);
      font-size:22px;
       margin:24px 0 8px; 
       font-weight:700;
     }

/* GALLERY (card grid) */
.gallery{ width:90%; max-width:1200px;
     margin:10px auto 60px; 
     display:grid; 
     grid-template-columns:repeat(3,1fr);
      gap:18px;
       align-items:start;
        padding:0 10px;
     }
.card{ background:var(--card);
     border-radius:12px; 
     overflow:hidden;
      box-shadow:0 8px 30px rgba(2,6,12,0.6);
       transform:translateY(8px); 
       transition:transform .28s ease, box-shadow .28s ease, opacity .35s ease; opacity:0; 
    }
.card.visible{ opacity:1;
     transform:none; 
    }
.card-media{ position:relative;
     height:200px;
      overflow:hidden;
     }
.card-media img{ width:100%;
     height:100%; 
     object-fit:cover;
      display:block;
       transition:transform .45s ease;
     }
.card:hover .card-media img{ 
    transform:scale(1.06);
 }
.card-overlay{ position:absolute;
     inset:0; 
     display:flex;
      align-items:end;
       justify-content:center; 
       padding:12px;
        pointer-events:none;
     }
.open-lightbox{ background:linear-gradient(90deg,var(--accent),#00aaff);
     color:#001;
      padding:10px 14px; 
      border-radius:10px; 
      border:none;
       cursor:pointer; 
       font-weight:700; 
       pointer-events:auto;
        opacity:0.95;
         box-shadow:0 6px 14px rgba(0,255,153,0.08); 
        }
.card-body{ padding:12px 14px; display:flex;
     gap:10px; align-items:center;
      justify-content:space-between;
     }
.card-title{ font-size:16px;
     font-weight:700; 
    }
.card-cat{
     color:var(--muted);
      font-size:13px; 
    }

/* LIGHTBOX */
.lightbox{ position:fixed;
     inset:0;
     display:none;
      align-items:center;
       justify-content:center; 
       background:rgba(2,4,8,0.85); 
       z-index:120;
        padding:20px; 
    }
.lightbox.show{
     display:flex; 
    }
.lb-content{ max-width:1100px;
     width:100%; 
     display:flex;
      gap:20px;
       align-items:center; 
       justify-content:center; 
       flex-direction:column;
     }
.lb-content img{ max-width:90%;
     max-height:70vh;
      border-radius:10px;
       object-fit:contain; 
       box-shadow:0 18px 45px rgba(0,0,0,0.7); 
    }
.lb-caption{ text-align:center;
     color:var(--text);
      margin-top:12px; 
    }
.lb-caption h3{
     margin-bottom:6px; 
    }
.lb-download{ margin-top:8px;
     display:inline-block;
      background:var(--accent); 
      color:#001;
       padding:10px 14px; 
       border-radius:8px; 
       text-decoration:none; 
       font-weight:700;
     }

/* lightbox arrows & close */
.lb-close{
     position:absolute; 
     top:20px;
      right:22px;
       background:transparent; 
       border:none; 
       color:var(--text); 
       font-size:22px;
        cursor:pointer; 
    }
.lb-arrow{ position:absolute;
     top:50%;
      transform:translateY(-50%); 
      background:transparent; 
      border:none; 
      color:var(--text);
       font-size:40px;
        cursor:pointer;
     }
#lb-prev{ 
    left:18px;
 } 
 #lb-next{ 
    right:18px; 
}

/* ABOUT */
.about-section{
     width:90%;
      max-width:900px;
       margin:40px auto 80px; 
       text-align:center;
        background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
        padding:20px; 
        border-radius:12px;
     }

/* RESPONSIVE */
@media (max-width:980px){
  .gallery{
     grid-template-columns:repeat(2,1fr); 
}
  .hero{ 
    height:50vh; 
}
  .filter-bar{
    top:66px;
 }
}
@media (max-width:560px){
  .gallery{
     grid-template-columns:1fr;
     }
  .card-media{ 
    height:240px;
 }
  .nav-links{ 
    display:none; 
}
  #search{ 
    min-width:120px; 
    width:120px;
 }
}

/* ANIMATIONS */
@keyframes underlineGrow{ from{ width:0 } to{ width:200px } }