/* Reset & Base */
* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Segoe UI', sans-serif; color:#333; line-height:1.6; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }

/* Navbar */
.navbar { display:flex; justify-content:space-between; align-items:center;
  background:#1f1f1f; padding:1rem 2rem; position:sticky; top:0; z-index:100;
}
.logo { font-size:1.5rem; font-weight:bold; color:#f5f5f5; }
.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-links li { position:relative; }
.nav-links a { display:block; padding:.5rem; color:#f5f5f5; transition:color .3s; }
.nav-links a:hover { color:#ffcc00; }
.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger span { width:25px; height:3px; background:#f5f5f5; margin:4px 0; transition:.3s; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Dropdown */
.dropdown-menu { display:none; position:absolute; top:100%; left:0;
  background:#2a2a2a; border-radius:4px; overflow:hidden;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.nav-links li:hover > .dropdown-menu { display:block; }
.dropdown-menu a { padding:.5rem 1rem; color:#ddd; }
.dropdown-menu a:hover { background:#333; color:#fff; }

/* Responsive Nav */
@media(max-width:768px){
  .nav-links { position:fixed; top:0; right:-100%; height:100vh; background:#1f1f1f;
    flex-direction:column; gap:1rem; padding-top:5rem; transition:right .3s;
  }
  .nav-links.open { right:0; }
  .hamburger { display:flex; }
}
.site-footer {
  background:black;
  color: #f0f0f0;
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 4rem;
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.footer-links a {
  color: #ffcc00;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #ffd933;
}

.footer-credit {
  opacity: 0.7;
  margin-top: 1rem;
}