body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #fff;
  color: #111;
  transition: all 0.5s ease-in-out;
}

body.glitch-mode {
  background: #000;
  color: #0f0;
  font-family: 'Courier New', monospace;
  animation: flicker 0.2s infinite;
}

.hero, .content, .nav {
  padding: 1rem;
  transition: filter 0.5s;
}

body.glitch-mode .hero,
body.glitch-mode .content,
body.glitch-mode .nav {
  filter: contrast(200%) brightness(80%) hue-rotate(180deg);
}

.hidden {
  display: none;
}

#glitch-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 1s ease-in-out forwards;
  font-family: monospace;
  text-align: center;
}

#glitch-layer button {
  background: none;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 0.5rem 1rem;
  font-family: inherit;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s;
}

#glitch-layer button:hover {
  background: #0f0;
  color: #000;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.85; }
  100% { opacity: 1; }
}