*,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Lato", sans-serif;
        background: #060e22;
        color: #fff;
        min-height: 100vh;
        overflow-x: hidden;
      }

      
      .page {
        display: none;
        min-height: 100vh;
        padding-top: 70px;
      }
      .page.active {
        display: block;
      }

      
      .graphic-wrap {
        width: 100%;
        aspect-ratio: 16/9;
        position: relative;
        overflow: hidden;
      }
      .graphic-wrap svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      
      .nav-btn {
        position: relative;
        overflow: hidden;
      }
      .nav-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(245, 216, 126, 0.08);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }
      .nav-btn:hover::before {
        transform: translateX(0);
      }
      .nav-btn:hover {
        border-color: rgba(245, 216, 126, 0.85) !important;
        color: #f5d87e !important;
      }

      
      .nav-btn.active {
        background: rgba(245, 216, 126, 0.12) !important;
        border-color: #f5d87e !important;
        color: #f5d87e !important;
        animation: goldGlow 3s ease-in-out infinite;
      }

      

      
      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(32px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

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

      
      @keyframes goldGlow {
        0%,
        100% {
          box-shadow:
            0 0 0 0 rgba(245, 216, 126, 0),
            inset 0 0 0 0 rgba(245, 216, 126, 0);
        }
        50% {
          box-shadow:
            0 0 14px 2px rgba(245, 216, 126, 0.28),
            inset 0 0 8px 0 rgba(245, 216, 126, 0.08);
        }
      }

      
      @keyframes borderShimmer {
        0%,
        100% {
          border-color: rgba(245, 216, 126, 0.35);
        }
        50% {
          border-color: rgba(245, 216, 126, 0.75);
        }
      }

      
      @keyframes breathe {
        0%,
        100% {
          opacity: 0.55;
        }
        50% {
          opacity: 0.85;
        }
      }

      
      nav {
        animation: slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .page.active .graphic-wrap {
        opacity: 0;
        animation: fadeUp 0.75s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }
      .page.active .fullscreen-btn {
        opacity: 0;
        animation: fadeUp 0.5s 0.55s ease forwards;
      }
      .page.active .page-label {
        opacity: 0;
        animation: fadeIn 0.6s 0.85s ease forwards;
      }

      
      .nav-btn:not(.active) {
        animation: borderShimmer 4s 1.2s ease-in-out infinite;
      }
      .fullscreen-btn {
        animation: breathe 4s 1.5s ease-in-out infinite;
      }