/* ---------- Navigation ---------- */
    .nav-container {
      position: sticky; top: 0;
      display: flex; 
      align-items: center; 
      justify-content: space-between;
      padding: 14px 24px;
      background: rgba(20,20,20,0.55);
      backdrop-filter: blur(6px) saturate(120%);
      -webkit-backdrop-filter: blur(6px) saturate(120%);
      border-radius: 10px;
      width: min(1100px, calc(100% - 32px));
      margin: 16px auto;
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
      animation: fadeDown .8s ease;
      z-index: 99;
    }
    .logo {
      font-weight: 900; font-size: 1.6rem; color: #fff;
      text-decoration: none;
      transition: color .3s ease;
    }
    .logo:hover { color: rgb(255,0,200); }

    .nav-container ul {
      display: flex; gap: 20px; list-style: none; margin: 0; padding: 0;
    }
    .nav-container a {
      color: #f5f5f5; text-decoration: none; font-weight: 700;
      position: relative; padding: 4px 0;
      transition: color .3s ease;
    }
    .nav-container a::after {
      content:""; position: absolute; left: 0; right: 0; bottom: -4px;
      height: 2px; background: rgb(255,0,200);
      transform: scaleX(0); transform-origin: left;
      transition: transform .3s ease;
    }
    .nav-container a:hover { color: rgb(255,0,200); }
    .nav-container a:hover::after { transform: scaleX(1); }