@media screen and (max-width: 991px) {
  #header .header-content {
    width: 100%;
    padding: 12px 20px;
  }
  .nav-toggle {
    display: block !important;
  }
  .navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(9, 10, 15, 0.98);
    border-bottom: 2px solid var(--retro-cyan, #00f0ff);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 15px 0;
    display: block !important;
    z-index: 99999;
  }
  .navigation.open {
    visibility: visible;
    opacity: 1;
  }
  .navigation .primary-nav {
    position: relative;
    top: 0;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .navigation li {
    display: block;
    margin: 6px 0;
  }
  .navigation a {
    display: block;
    font-size: 13px !important;
    margin: 0;
    text-align: center;
    padding: 10px 0;
    color: #fff !important;
  }
}

@media screen and (max-width: 768px) { 
  .banner-text {
    margin-top: 10%;
  }
  .banner-text h1 {
    font-size: 32px !important;
  }
  .banner-subtitle {
    font-size: 18px !important;
    padding: 6px 12px;
  }
  .char-portrait {
    height: 220px;
  }
}

@media screen and (max-width: 480px) {
  .banner-text h1 {
    font-size: 24px !important;
  }
  .btn-retro {
    padding: 10px 18px !important;
    font-size: 10px !important;
  }
}