/* ================= NAVBAR ================= */
.navbar{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  height:70px; padding:0 2rem;
  background:#000;                       /* always black */
  z-index:1000; transition:background .3s ease, box-shadow .3s ease;
}
header a{ color:#fff; text-decoration:none; }

/* Logo */
.navbar .logo img{ height:60px; margin-top:5px; display:block }

/* Desktop links */
.navbar nav{ display:flex; align-items:center; gap:1.5rem; }
.navbar nav a{
  position:relative; padding:.25rem 0; font-weight:600; opacity:.95;
}
.navbar nav a::after{
  content:""; position:absolute; left:50%; bottom:-4px; height:2px; width:0;
  background:linear-gradient(90deg,#33b5df,#2a8bb2);
  transform:translateX(-50%); transition:width .25s ease;
}
.navbar nav a:hover::after, .navbar nav a.active::after{ width:100%; }




/* Scrolled state */
.navbar.scrolled{
  background:#000;
  backdrop-filter:blur(8px);
  box-shadow:0 0 20px rgba(51,181,223,.28);
}

/* ================= FOOTER (compact) ================= */
footer{
  background:#000; padding:3rem 2rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem;
}
footer h3{ margin:0 0 1rem; color:#33b5df; }
footer a{ display:block; color:#aaa; margin:.25rem 0; font-size:.95rem; }
footer a:hover{ color:#fff; }
.footer-bottom{
  grid-column:1/-1; text-align:center; color:#666; margin-top:2rem;
  border-top:1px solid rgba(255,255,255,.12); padding-top:1rem; font-size:.85rem;
}

/* ================= MOBILE ================= */
.hamburger{
  display:none; background:none; border:0; color:#fff;
  font-size:1.8rem; line-height:1; cursor:pointer;
}
.mobile-menu{ display:none !important; }

@media (max-width: 900px){
  .navbar nav{ display:none; }
  .hamburger{ display:block; }

  .mobile-menu{
    display:flex !important; position:fixed; top:70px; left:0; right:0;
    flex-direction:column; gap:1rem; padding:1.25rem 1.5rem 2rem;
    background:rgba(10,10,11,.96); backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.1);
    opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease; z-index:999;
  }
  .mobile-menu a{
    color:#fff; text-align:center; font-size:1.05rem; padding:.5rem 0;
  }
  .mobile-menu.open{
    opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto;
  }
}
body.menu-open{ overflow:hidden; }