/* === GLOBAL RESET === */
html { scroll-behavior:smooth; font-size:16px; box-sizing:border-box; }
*, *::before, *::after { box-sizing:inherit; margin:0; padding:0; }

/* === BODY === */
body {
  margin:0;
  min-height:100vh;
  background:#111217;
  color:#63ffa6;
  font-family:'Share Tech Mono', monospace;
  overflow-x:hidden;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* === HEADER / NAV === */
header {
  width:100%;
  background:rgba(0,0,0,0.85);
  border-bottom:1px solid #40ffa9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem 2.4rem;
  box-shadow:0 0 18px #59ffdecc;
  position:fixed;
  top:0;
  z-index:10;
  flex-wrap:wrap;
}

.logo {
  font-size:clamp(1.5rem,6vw,2.5rem);
  font-weight:bold;
  color:#63ffa6;
  text-transform:uppercase;
  letter-spacing:2px;
  filter:drop-shadow(0 0 12px #2afef0);
  text-decoration:none;
}

nav {
  display:flex;
  gap:2rem;
  font-size:clamp(1rem,2.5vw,1.07rem);
  flex-wrap:wrap;
}
nav a {
  color:#63ffa6;
  text-decoration:none;
  font-weight:bold;
  letter-spacing:1.2px;
  cursor:pointer;
}
nav a:hover {
  color:#b684ff;
}

/* === FOOTER === */
footer {
  text-align:center;
  font-size:clamp(0.85rem,2vw,0.95rem);
  padding:1.1rem;
  margin-top:3rem;
  background:#191d22;
  color:#304040;
  border-top:1px solid #63ffa6;
  letter-spacing:1px;
}

/* === RESPONSIVE === */
@media(max-width:768px){
  header{flex-direction:column;align-items:flex-start;padding:1rem;}
  .logo{font-size:clamp(1.3rem,8vw,2rem);margin-bottom:0.6rem;}
  nav{flex-direction:column;gap:1rem;width:100%;}
  nav a{display:block;font-size:clamp(1rem,5vw,1.1rem);}
}