:root {
      --nav-bg: #360a36;
      --nav-border: rgba(255, 255, 255, 0.09);
      --text: #B824D1;
      --muted: #a0abc2;
      --cyan: #B824D1;
      --purple: #9570ff;
    }

/* ===== NAVBAR ===== */
    .navbar {
      position: fixed;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;

      width: calc(100% - 36px);
      max-width: 1320px;
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;

      background: var(--nav-bg);
      border: 1px solid #3F0949;
      border-radius: 22px;

      -webkit-backdrop-filter: blur(22px);
      backdrop-filter: blur(22px);

      box-shadow:
        0 12px 45px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

      transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        top 0.3s ease;
    }

    .navbar.scrolled {
      top: 8px;
      background: rgba(5, 10, 23, 0.96);
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
    }

    /* ===== LOGO ===== */
    .nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      text-decoration: none;
      color: var(--text);
    }

    .logo-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 14px;

      color: #06101d;
      font-size: 19px;
      font-weight: 900;

      background: #ec3ed8;
background: linear-gradient(90deg, rgba(236, 62, 216, 1) 0%, rgba(130, 39, 179, 1) 100%);background: #ec3ed8;
background: linear-gradient(90deg, rgba(236, 62, 216, 1) 0%, rgba(130, 39, 179, 1) 100%);
color: #F9D6FF;
      );

      box-shadow: 0 0 24px rgba(83, 229, 255, 0.19);
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .logo-name {
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -0.6px;
      line-height: 1;
    }

    .logo-name span {
      color: var(--cyan);
    }

    .logo-caption {
      color: var(--muted);
      font-size: 9px;
      letter-spacing: 2px;
      font-weight: 600;
    }

    /* ===== MENU DESKTOP ===== */
    .nav-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      list-style: none;
    }

    .nav-menu a {
      position: relative;
      display: block;
      padding: 12px 13px;

      color: #b5bfd3;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;

      transition: color 0.25s ease;
    }

    .nav-menu a::after {
      content: "";
      position: absolute;
      bottom: 4px;
      left: 13px;
      width: 0;
      height: 2px;
      border-radius: 10px;

      background: linear-gradient(90deg, var(--cyan), var(--purple));
      transition: width 0.25s ease;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
      color: #ffffff;
    }

    .nav-menu a:hover::after,
    .nav-menu a.active::after {
      width: calc(100% - 26px);
    }

    /* ===== CTA BUTTON ===== */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .nav-status {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #aab6cb;
      font-size: 11px;
      white-space: nowrap;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #42edaa;
      box-shadow: 0 0 12px rgba(66, 237, 170, 0.8);
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin-right: 30px;
      padding: 13px 17px;
      border-radius: 13px;

     background: #ec3ed8;
background: linear-gradient(90deg, rgba(236, 62, 216, 1) 0%, rgba(130, 39, 179, 1) 100%);background: #ec3ed8;
background: linear-gradient(90deg, rgba(236, 62, 216, 1) 0%, rgba(130, 39, 179, 1) 100%);
color: #F9D6FF;
      text-decoration: none;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;

      box-shadow: 0 5px 22px rgba(83, 229, 255, 0.12);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(83, 229, 255, 0.26);
    }

    .nav-cta svg {
      width: 15px;
      height: 15px;
    }

    /* ===== HAMBURGER ===== */
    .nav-toggle {
      width: 43px;
      height: 43px;
      display: none;
      place-items: center;
      margin-left: -38px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid #3F0949;
      border-radius: 12px;
      cursor: pointer;
    }

    .hamburger {
      width: 19px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .hamburger span {
      width: 100%;
      height: 2px;
      border-radius: 5px;
      background: #F9D6FF;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* ===== RESPONSIVE TABLET ===== */
    @media (max-width: 1100px) {
      .navbar {
        padding: 0 20px;
        gap: 12px;
      }

      .nav-menu a {
        padding: 12px 9px;
        font-size: 12px;
      }

      .nav-menu a::after {
        left: 9px;
      }

      .nav-menu a:hover::after,
      .nav-menu a.active::after {
        width: calc(100% - 18px);
      }

      .nav-status {
        display: none;
      }
    }

    /* ===== RESPONSIVE MOBILE ===== */
    @media (max-width: 850px) {
      .navbar {
        top: 10px;
        width: calc(100% - 24px);
        min-height: 70px;
        padding: 0 15px;
        border-radius: 18px;
      }

      .logo-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
      }

      .logo-name {
        font-size: 17px;
      }

      .logo-caption {
        font-size: 8px;
      }

      .nav-toggle {
        display: grid;
        flex-shrink: 0;
      }

      .nav-actions {
        margin-left: auto;
      }

      .nav-cta {
        padding: 12px;
        font-size: 11px;
      }

      .nav-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;

        padding: 12px;
        border: 1px solid var(--nav-border);
        border-radius: 18px;

        background: rgba(8, 13, 29, 0.98);
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);

        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);

        transition:
          opacity 0.25s ease,
          visibility 0.25s ease,
          transform 0.25s ease;
      }

      .nav-menu.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }

      .nav-menu a {
        padding: 14px 15px;
        border-radius: 10px;
        font-size: 13px;
      }

      .nav-menu a::after {
        display: none;
      }

      .nav-menu a:hover,
      .nav-menu a.active {
        background: rgba(83, 229, 255, 0.08);
        color: var(--cyan);
      }
    }

    @media (max-width: 390px) {
      .navbar {
        gap: 8px;
        padding: 0 10px;
      }

      .logo-icon {
        width: 37px;
        height: 37px;
        border-radius: 11px;
      }

      .logo-name {
        font-size: 15px;
      }

      .logo-caption {
        letter-spacing: 1.3px;
      }

      .nav-cta {
        padding: 11px 9px;
        gap: 5px;
        font-size: 10px;
      }

      .nav-toggle {
        width: 38px;
        height: 38px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }