:root {
            --nav-bg: #fff;
            --nav-fg: #222;
            --nav-border: #eee;
            --primary: #FF385C;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            --radius: 12px;
          }

          /* === Base Nav === */
          .top-nav {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: var(--nav-bg);
            border: 1px solid var(--nav-border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            z-index: 9999;
            padding: 10px 24px;
            opacity: 1;
            transition: opacity 0.4s ease, transform 0.4s ease;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 16px;
          }

          .top-nav__menu {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 20px;
            justify-content: center;
          }

          .top-nav__menu a {
            text-decoration: none;
            color: var(--nav-fg);
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 8px;
            transition: background-color 0.3s ease, opacity 0.3s ease;
          }

          .top-nav__menu a:hover {
            background-color: #f7f7f7;
          }

          .btn-primary {
            color: #fff !important;
            background: var(--primary);
            font-weight: 600;
          }

          .btn-primary:hover {
            opacity: 0.9;
          }

          /* === Hide Entire Nav on Mobile === */
          @media (max-width: 720px) {
            .top-nav {
              display: none !important;
            }
          }