PageSourceSearch

https://vocalremovers.ai/contact/

html vocalremovers.ai collected 2026-10-05 14:08:11 UTC 31,990 bytes, 570 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>Contact Us - AI Vocal Remover</title>
7  <meta name="description" content="Get in touch with the AI Vocal Remover team for support, feature requests, business inquiries, or general feedback." />
8<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico?v=1.0">
9  <link rel="canonical" href="https://vocalremovers.ai/contact" />
10  <!-- Preconnect & Google Fonts -->
11  <link rel="preconnect" href="https://fonts.googleapis.com" />
12  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
14  
15  <!-- Font Awesome 6 Free Icons -->
16  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
17  
18  <!-- Tailwind CSS CDN -->
19  
19<script src="https://cdn.tailwindcss.com"></script>
19
20  
20<script>
21    tailwind.config = {
22      theme: {
23        extend: {
24          fontFamily: {
25            sans: ["Inter", "sans-serif"],
26            outfit: ["Outfit", "sans-serif"]
27          },
28          boxShadow: {
29            "neon-indigo": "0 0 20px rgba(99, 102, 241, 0.15)",
30            "neon-purple": "0 0 20px rgba(168, 85, 247, 0.15)",
31            "glass-hover": "0 20px 40px rgba(0, 0, 0, 0.3)"
32          }
33        }
34      }
35    };
36  </script>
36
37  
38  <!-- Custom Styling for Interactive Elements -->
39  <style>
40    body {
41      background-color: #080a13;
42      background-image: 
43        radial-gradient(circle at 15% 25%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
44        radial-gradient(circle at 85% 75%, rgba(168, 85, 247, 0.08) 0%, transparent 40%);
45      background-attachment: fixed;
46    }
47    
48    .glass-card {
49      background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
50      backdrop-filter: blur(16px);
51      -webkit-backdrop-filter: blur(16px);
52      border: 1px solid rgba(255, 255, 255, 0.06);
53    }
54    
55    .glass-card-hover:hover {
56      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
57      border-color: rgba(129, 140, 248, 0.3);
58      box-shadow: 0 20px 45px rgba(99, 102, 241, 0.15);
59    }
60
61    .header-gradient {
62      background: linear-gradient(90deg, #4154a1 0%, #614d9f 100%);
63    }
64
65    /* Opaque Mobile Navigation Menu */
66    #mobileMenu {
67      background-color: #0b1021 !important;
68      opacity: 1 !important;
69    }
70
71    /* Subtle animation for background glows */
72    @keyframes pulse-slow {
73      0%, 100% { transform: scale(1); opacity: 0.8; }
74      50% { transform: scale(1.05); opacity: 1; }
75    }
76    .animate-glow {
77      animation: pulse-slow 8s ease-in-out infinite;
78    }
79  </style>
80</head>
81<body class="text-slate-100 font-sans antialiased min-h-screen flex flex-col pt-20">
82
83  <!-- ================= HEADER NAVIGATION ================= -->
84  <!-- ================= HEADER SECTION ================= -->
85<header class="header-gradient w-full shadow-lg fixed top-0 left-0 right-0 z-50">
86  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
87    
88    <!-- Logo Container -->
89    <a href="/" class="flex items-center gap-3.5 group select-none cursor-pointer" id="mainlogo">
90      <!-- Logo Icon: Rounded rectangle with a music note -->
91      <div class="h-10 w-10 flex items-center justify-center rounded-xl bg-white/15 border border-white/10 shadow-inner group-hover:scale-105 transition-transform duration-200">
92        <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
93          <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
94        </svg>
95      </div>
96      <!-- Logo Text -->
97      <span class="font-outfit text-xl font-bold tracking-tight text-white flex items-center gap-1.5">
98        AI Vocal <span class="text-[#c084fc] drop-shadow-sm">Remover</span>
99      </span>
100    </a>
101
102    <!-- Desktop Navigation Menu -->
103    <nav class="hidden md:flex items-center gap-8 lg:gap-10">
104      <div class="relative group/nav py-2">
105        <button class="text-sm font-semibold tracking-wide text-white/90 group-hover/nav:text-white flex items-center gap-1.5 transition-colors duration-200 cursor-pointer">
106          TOOLS <i class="fas fa-chevron-down text-[10px] opacity-70 group-hover/nav:rotate-180 transition-transform duration-200"></i>
107        </button>
108        <div class="absolute top-full left-1/2 -translate-x-1/2 pt-2 hidden group-hover/nav:block z-50">
109          <div class="w-56 bg-slate-950/95 border border-white/10 rounded-2xl shadow-2xl p-2 backdrop-blur-xl flex flex-col gap-1">
110            <a href="/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
111              <i class="fa-solid fa-microphone-slash text-purple-400 w-4"></i> Vocal Remover
112            </a>
113            <a href="/bpm-finder/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
114              <i class="fa-solid fa-drum text-indigo-400 w-4"></i> BPM & Key Finder
115            </a>
116            <a href="/key-finder/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
117              <i class="fa-solid fa-compact-disc text-[#c084fc] w-4"></i> Key Finder & Camelot
118            </a>
119            <a href="/voice-recorder/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
120              <i class="fa-solid fa-microphone-lines text-rose-400 w-4"></i> Voice Recorder
121            </a>
122            <a href="/audio-cutter/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
123              <i class="fa-solid fa-scissors text-blue-400 w-4"></i> Audio Cutter
124            </a>
125            <a href="/audio-joiner/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
126              <i class="fa-solid fa-layer-group text-emerald-400 w-4"></i> Audio Joiner
127            </a>
128            <a href="/audio-converter/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
129              <i class="fa-solid fa-arrows-rotate text-cyan-400 w-4"></i> Audio Converter
130            </a>
131            <a href="/equalizer/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
132              <i class="fa-solid fa-sliders text-teal-400 w-4"></i> Audio Equalizer
133            </a>
134            <a href="/pitch-changer/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
135              <i class="fa-solid fa-music text-cyan-400 w-4"></i> Pitch Changer
136            </a>
137            <a href="/bass-booster/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
138              <i class="fa-solid fa-volume-high text-cyan-400 w-4"></i> Bass Booster
139            </a>
140            <a href="/noise-reducer/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
141              <i class="fa-solid fa-wand-magic-sparkles text-emerald-400 w-4"></i> Noise Reducer
142            </a>
143            <a href="/audio-effects/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
144              <i class="fa-solid fa-wand-magic text-violet-400 w-4"></i> Audio Effects
145            </a>
146            <a href="/mp3-tag-editor/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all">
147              <i class="fa-solid fa-tags text-amber-400 w-4"></i> MP3 Tag Editor
148            </a>
149          </div>
150        </div>
151      </div>
152      <a href="/#features" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">FEATURES</a>
153      <a href="/#howitworks" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">HOW IT WORKS</a>
154      <a href="/#faqs" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">FAQS</a>
155      <a href="/contact/" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">CONTACT</a>
156    </nav>
157
158    <!-- Mobile Hamburger Button -->
159    <button id="menuToggle" class="md:hidden p-2 rounded-lg text-white hover:bg-white/10 transition-colors focus:outline-none" aria-label="Toggle navigation menu">
160      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
161        <path id="menuIcon" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h18M4 18h18" />
162      </svg>
163    </button>
164    
165  </div>
166
167  <!-- Mobile Dropdown Menu -->
168  <div id="mobileMenu" class="hidden md:hidden absolute top-full left-0 w-full bg-[#0b1021] border-t border-white/10 shadow-2xl transition-all duration-200 ease-in-out max-h-[calc(100vh-70px)] overflow-y-auto custom-scrollbar">
169    <div class="px-4 py-3 space-y-2">
170      
171      <!-- Section: Audio Tools -->
172      <div class="flex flex-col gap-1">
173        <a href="/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
174          <i class="fa-solid fa-microphone-slash text-purple-400 w-
1745 text-center text-sm"></i> Vocal Remover
175        </a>
176        <a href="/bpm-finder/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
177          <i class="fa-solid fa-drum text-indigo-400 w-5 text-center text-sm"></i> BPM & Key Finder
178        </a>
179        <a href="/key-finder/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
180          <i class="fa-solid fa-compact-disc text-[#c084fc] w-5 text-center text-sm"></i> Key Finder & Camelot
181        </a>
182        <a href="/voice-recorder/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
183          <i class="fa-solid fa-microphone-lines text-rose-400 w-5 text-center text-sm"></i> Voice Recorder
184        </a>
185        <a href="/audio-cutter/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
186          <i class="fa-solid fa-scissors text-blue-400 w-5 text-center text-sm"></i> Audio Cutter
187        </a>
188        <a href="/audio-joiner/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
189          <i class="fa-solid fa-layer-group text-emerald-400 w-5 text-center text-sm"></i> Audio Joiner
190        </a>
191        <a href="/audio-converter/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
192          <i class="fa-solid fa-arrows-rotate text-cyan-400 w-5 text-center text-sm"></i> Audio Converter
193        </a>
194        <a href="/equalizer/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
195          <i class="fa-solid fa-sliders text-teal-400 w-5 text-center text-sm"></i> Audio Equalizer
196        </a>
197        <a href="/pitch-changer/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
198          <i class="fa-solid fa-music text-cyan-400 w-5 text-center text-sm"></i> Pitch Changer
199        </a>
200        <a href="/bass-booster/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
201          <i class="fa-solid fa-volume-high text-cyan-400 w-5 text-center text-sm"></i> Bass Booster
202        </a>
203        <a href="/noise-reducer/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
204          <i class="fa-solid fa-wand-magic-sparkles text-emerald-400 w-5 text-center text-sm"></i> Noise Reducer
205        </a>
206        <a href="/audio-effects/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
207          <i class="fa-solid fa-wand-magic text-violet-400 w-5 text-center text-sm"></i> Audio Effects
208        </a>
209        <a href="/mp3-tag-editor/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all">
210          <i class="fa-solid fa-tags text-amber-400 w-5 text-center text-sm"></i> MP3 Tag Editor
211        </a>
212      </div>
213
214      <!-- Section Divider -->
215      <div class="h-px bg-white/10"></div>
216
217      <!-- Section: General Navigation -->
218      <nav class="grid grid-cols-2 gap-2 text-xs font-semibold">
219        <a href="/#features" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2">
220          <i class="fa-solid fa-star text-amber-400 text-[10px]"></i> Features
221        </a>
222        <a href="/#howitworks" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2">
223          <i class="fa-solid fa-circle-play text-cyan-400 text-[10px]"></i> How It Works
224        </a>
225        <a href="/#faqs" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2">
226          <i class="fa-solid fa-circle-question text-purple-400 text-[10px]"></i> FAQs
227        </a>
228        <a href="/contact/" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2">
229          <i class="fa-solid fa-envelope text-emerald-400 text-[10px]"></i> Contact
230        </a>
231      </nav>
232
233    </div>
234  </div>
235</header>
236
237<!-- Mobile Hamburger Toggle Script -->
238<script>
239  (function() {
240    function initMobileMenuToggle() {
241      var menuToggle = document.getElementById('menuToggle');
242      var mobileMenu = document.getElementById('mobileMenu');
243      var menuIcon = document.getElementById('menuIcon');
244      if (!menuToggle || !mobileMenu) return;
245
246      menuToggle.onclick = function(e) {
247        e.stopPropagation();
248        var isClosed = mobileMenu.classList.contains('hidden');
249        if (isClosed) {
250          mobileMenu.classList.remove('hidden');
251          if (menuIcon) menuIcon.setAttribute('d', 'M6 18L18 6M6 6l12 12');
252        } else {
253          mobileMenu.classList.add('hidden');
254          if (menuIcon) menuIcon.setAttribute('d', 'M4 6h16M4 12h18M4 18h18');
255        }
256      };
257
258      // Close on clicking outside
259      document.addEventListener('click', function(e) {
260        if (!mobileMenu.classList.contains('hidden') && !mobileMenu.contains(e.target) && !menuToggle.contains(e.target)) {
261          mobileMenu.classList.add('hidden');
262          if (menuIcon) menuIcon.setAttribute('d', 'M4 6h16M4 12h18M4 18h18');
263        }
264      });
265
266      // Close when clicking any link
267      mobileMenu.querySelectorAll('a').forEach(function(link) {
268        link.addEventListener('click', function() {
269          mobileMenu.classList.add('hidden');
270          if (menuIcon) menuIcon.setAttribute('d', 'M4 6h16M4 12h18M4 18h18');
271        });
272      });
273    }
274
275    if (document.readyState === 'loading') {
276      document.addEventListener('DOMContentLoaded', initMobileMenuToggle);
277    } else {
278      initMobileMenuToggle();
279    }
280  })();
281</script>
281
282
283  <!-- ================= MAIN BODY CONTENT ================= -->
284  <main class="flex-grow max-w-4xl mx-auto px-6 py-16 md:py-24 relative w-full overflow-hidden flex flex-col justify-center items-center">
285    
286    <!-- Decorative Glowing Mesh Elements in Background -->
287    <div class="absolute top-20 -left-48 w-96 h-96 bg-indigo-600/10 rounded-full blur-[100px] animate-glow pointer-events-none"></div>
288    <div class="absolute bottom-20 -right-48 w-96 h-96 bg-purple-600/10 rounded-full blur-[100px] animate-glow pointer-events-none"></div>
289
290    <!-- Hero Header -->
291    <div class="text-center max-w-2xl mx-auto mb-12">
292      <span class="text-xs md:text-sm font-bold tracking-widest text-[#a78bfa] uppercase px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 inline-block mb-4">GET IN TOUCH</span>
293      <h1 class="font-outfit text-4xl md:text-5xl font-extrabold text-white tracking-tight leading-tight">
294        We'd love to <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#a78bfa] to-[#c084fc]">hear from you</span>.
295      </h1>
296      <p class="mt-4 text-sm md:text-base text-slate-400 leading-relaxed">
297        Have feedback, technical questions, API requests, or business proposals? Drop us an email and our team will get back to you as soon as possible.
298      </p>
299    </div>
300
301    <!-- Centralized Email Communication Card (Premium Glassmorphism) -->
302    <div class="w-full max-w-2xl glass-card rounded-3xl p-8 md:p-12 hover:shadow-neon-indigo transition-all duration-300 relative overflow-hidden group">
303      <div class="absolute -right-20 -top-20 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl group-hover:bg-indigo-500/20 transition-all duration-300"></div>
304      
305      <div class="flex flex-col items-center text-center">
306        <!-- Icon -->
307        <div class="h-14 w-14 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-6 border border-indigo-500/20 text-[#a78bfa] group-hover:scale-105 transition-transform duration-300">
308          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
309            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
310          </svg>
311        </div>
312        
313        <h2 class="font-outfit text-2xl font-bold text-white mb-3">Direct Support Email</h2>
314        <p class="text-slate-400 text-sm leading-relaxed max-w-md mb-8">
315          Send your messages directly to our inbox. We systematically review incoming messages and typical response time is within 4 to 24 hours.
316        </p>
317        
318        <!-- Interactive Email Block -->
319        <div class="w-full max-w-md bg-slate-950/60 border border-white/5 rounded-2xl p-5 flex items-center justify-between gap-4 group/email hover:border-indigo-500/25 transition-all">
320          <div class="truncate text-left">
321            <span class="text-xs text-slate-500 uppercase tracking-wider block mb-0.5 font-bold">Official Outreach</span>
322            <a href="/cdn-cgi/l/email-protection#5f3c30312b3e3c2b1f29303c3e332d3a3230293a2d2c713e36" class="text-[#a78bfa] hover:text-white font-semibold font-outfit text-base md:text-xl transition-colors truncate block">
323              <span class="__cf_email__" data-cfemail="10737f7e6471736450667f73717c62757d7f667562633e7179">[email&#160;protected]</span>
324            </a>
325          </div>
326          
327          <button id="copyEmailBtn" class="flex-shrink-0 h-12 w-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 active:scale-95 transition-all duration-150 relative" aria-label="Copy email to clipboard">
328            <!-- Copy SVG -->
329            <svg id="copyIcon" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
330              <path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
331            </svg>
332            <!-- Checkmark SVG (hidden by default) -->
333            <svg id="checkIcon" class="h-5 w-5 text-emerald-400 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
334              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
335            </svg>
336            <!-- Tooltip -->
337            <span id="tooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-950 text-white text-xs py-1.5 px-3 rounded-lg opacity-0 pointer-events-none transition-opacity duration-200 whitespace-nowrap border border-white/10 shadow-lg">Copied to Clipboard!</span>
338          </button>
339        </div>
340      </div>
341      
342      <!-- Card Footer Stats -->
343      <div class="mt-10 pt-6 border-t border-white/5 flex flex-wrap justify-center gap-8 text-xs text-slate-500">
344        <div class="flex items-center gap-2">
345          <span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
346          <span>Inboxes Active 24/7</span>
347        </div>
348        <div class="flex items-center gap-2">
349          <svg class="h-4 w-4 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
350          <span>No Ads or Spam</span>
351        </div>
352      </div>
353    </div>
354    
355    <!-- FAQ Quicklink -->
356    <p class="mt-8 text-xs text-slate-500 text-center">
357      Looking for generic support? Check out our 
358      <a href="/#faqs" class="text-[#a78bfa] hover:text-white underline transition-colors font-semibold">Frequently Asked Questions</a>.
359    </p>
360
361  </main>
362
363  <!-- ================= FOOTER SECTION ================= -->
364  <footer class="footer-glass mt-0 py-12 relative z-10">
365  <div class="container mx-auto px-4 max-w-7xl">
366    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-10">
367      <!-- Brand Column -->
368      <div class="sm:col-span-2 lg:col-span-1">
369        <a href="/" class="flex items-center gap-3 mb-4 group inline-flex select-none">
370          <div class="w-10 h-10 glass rounded-xl flex items-center justify-center text-white bg-white/10 border border-white/10 group-hover:scale-105 transition-transform duration-200 shadow-inner">
371            <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
372              <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
373            </svg>
374          </div>
375          <span class="footer-logo text-2xl font-extrabold font-outfit">Vocal Remover</span>
376        </a>
377        <p class="text-white/70 text-sm leading-relaxed mb-4">
378          Professional in-browser audio workstation & AI stem separation suite for musicians, producers, sound engineers, and podcasters.
379        </p>
380        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-400 font-medium">
381          <i class="fa-solid fa-shield-halved text-xs"></i> 100% In-Browser Privacy
382        </div>
383      </div>
384
385      <!-- Column 2: Audio Tools (AI & DSP Engines) -->
386      <div>
387        <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Audio Tools</h2>
388        <ul class="space-y-2.5">
389          <li><a href="https://vocalremovers.ai/#dropsec" class="footer-link text-sm">Free AI Vocal Remover</a></li>
390          <li><a href="/bpm-finder/" class="footer-link text-sm">BPM & Key Finder</a></li>
391          <li><a href="/key-finder/" class="footer-link text-sm">Key Finder & Camelot</a></li>
392          <li><a href="/pitch-changer/" class="footer-link text-sm">Pitch Changer</a></li>
393          <li><a href="/bass-booster/" class="footer-link text-sm">Bass Booster</a></li>
394          <li><a href="/noise-reducer/" class="footer-link text-sm">Noise Reducer</a></li>
395          <li><a href="/audio-effects/" class="footer-link text-sm">Audio Effects</a></li>
396        </ul>
397      </div>
398
399      <!-- Column 3: Audio Utilities (Editing & Conversion) -->
400      <div>
401        <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Audio Utilities</h2>
402        <ul class="space-y-2.5">
403          <li><a href="/mp3-tag-editor/" class="footer-link text-sm">MP3 Tag Editor</a></li>
404          <li><a href="/audio-converter/" class="footer-link text-sm">Audio Converter</a></li>
405          <li><a href="/audio-cutter/" class="footer-link text-sm">Audio Cutter</a></li>
406          <li><a href="/audio-joiner/" class="footer-link text-sm">Audio Joiner</a></li>
407          <li><a href="/equalizer/" class="footer-link text-sm">Audio Equalizer</a></li>
408          <li><a href="/voice-recorder/" class="footer-link text-sm">Voice Recorder</a></li>
409        </ul>
410      </div>
411
412      <!-- Column 4: Platform & Guide -->
413      <div>
414        <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Platform</h2>
415        <ul class="space-y-2.5">
416          <li><a href="/#features" class="footer-link text-sm">Features</a></li>
417          <li><a href="/#how-it-works" class="footer-link text-sm">How It Works</a></li>
418          <li><a href="/#faqs" class="footer-link text-sm">Studio FAQs</a></li>
419          <li><a href="/contact/" class="footer-link text-sm">Help Center</a></li>
420        </ul>
421      </div>
422
423      <!-- Column 5: Company & Legal -->
424      <div>
425        <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Company</h2>
426        <ul class="space-y-2.5">
427          <li><a href="/about/" class="footer-link text-sm">About Us</a></li>
428          <li><a href="/contact/" class="footer-link text-sm">Contact Us</a></li>
429          <li><a href="/privacy-policy/" class="footer-link text-sm">Privacy Policy</a></li>
430          <li><a href="/disclaimer/" class="footer-link text-sm">Disclaimer</a></li>
431        </ul>
432      </div>
433    </div>
434
435    <!-- Divider -->
436    <div class="h-px bg-white/10 mb-8"></div>
437
438    <!-- Bottom Footer -->
439    <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
440      <div class="text-white/60 text-xs sm:text-sm text-center sm:text-left">
441        &copy; 2026 VocalRemovers.ai. All rights reserved. Zero audio data stored on servers.
442      </div>
443
444      <!-- Legal Links -->
445      <div class="flex items-center gap-6 text-xs sm:text-sm">
446        <a href="/privacy-policy/" class="footer-link">Privacy Policy</a>
447        <a href="/disclaimer/" class="footer-link">Disclaimer</a>
448        <a href="/contact/" class="footer-link">Contact</a>
449      </div>
450    </div>
451  </div>
452</footer>
vendor: 115 bytes, lines 452-454
452
453	    
454<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
454<script>
455        const CONFIG = {
456            clientId: '658101237139-kgekg6onkp1g1ckmp8q5mbf28i3bjaq0.apps.googleusercontent.com',
457            apiKey: 'AIzaSyB_MWxjdXxwB9z_hXZH5_f0YPQhjG4M9Bw',
458            appId: '658101237139', 
459            scope: 'https://www.googleapis.com/auth/drive.file',
460            discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
461        };
462
463        let tokenClient;
464        let accessToken = null;
465        let pickerInited = false;
466        let gisInited = false;
467
468        function onApiLoad() {
469            gapi.load('client:picker', initializePicker);
470        }
471
472        function gisLoaded() {
473            tokenClient = google.accounts.oauth2.initTokenClient({
474                client_id: CONFIG.clientId,
475                scope: CONFIG.scope,
476                callback: '', 
477            });
478            gisInited = true;
479        }
480        function initializePicker() {
481            gapi.client.init({
482                apiKey: CONFIG.apiKey,
483                discoveryDocs: CONFIG.discoveryDocs
484            }).then(function() {
485                pickerInited = true;
486            });
487        }
488
489        function loadGoogleDriveOnDemand(callback) {
490            if (window.gapi && window.google && pickerInited && gisInited) {
491                if (callback) callback();
492                return;
493            }
494            const s1 = document.createElement('script');
495            s1.src = 'https://apis.google.com/js/api.js';
496            s1.onload = () => {
497                gapi.load('client:picker', () => {
498                    initializePicker();
499                    const s2 = document.createElement('script');
500                    s2.src = 'https://accounts.google.com/gsi/client';
501                    s2.onload = () => {
502                        gisLoaded();
503                        if (callback) callback();
504                    };
505                    document.head.appendChild(s2);
506                });
507            };
508            document.head.appendChild(s1);
509        }
510</script>
510
511    
512    <!-- Load jQuery early to ensure script blocks work correctly -->
513    
513<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
513
514
515<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="7vdgy4nz22i09tq" async></script>
vendor: 1 bytes, line 515
515
516<script src="https://js.live.net/v7.2/OneDrive.js" async></script>
516
517    
517<script src="https://unpkg.com/[email protected]/dist/wavesurfer.js" defer></script>
517
518   <!-- 
518<script src="/js/main.js?v=4.3" defer></script>
518 -->
519   
519<script src="/js/gdrive.js?v=5.2" defer></script>
519
520<link rel="preload" href="/css/modern_css.css?v=1.1" as="style" onload="this.rel='stylesheet'">
521<noscript><link rel="stylesheet" href="/css/modern_css.css?v=1.1"></noscript>
522<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" as="style" onload="this.rel='stylesheet'">
523<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"></noscript>
524<script defer src="https://cdn.tailwindcss.com"></script>
524
525<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 525-526
525
526<script async src="https://www.googletagmanager.com/gtag/js?id=
526G-FHELE5QWPR
vendor: 12 bytes, line 526
526"></script>
527<script>
528  
vendor: 134 bytes, lines 528-532
528window.dataLayer = window.dataLayer || [];
529  function gtag(){dataLayer.push(arguments);}
530  gtag('js', new Date());
531
532  gtag('config', '
532G-FHELE5QWPR
vendor: 4 bytes, line 532
532');
533</script>
vendor: 1 bytes, line 533
533
534<script>
535function processSubpage(filename, url){
536   loadFromRemoteUrl(url, filename);
537}
538</script>
538
539
540  <!-- Copy to Clipboard Script -->
541  
541<script>
542    // Copy to clipboard function
543    const copyBtn = document.getElementById('copyEmailBtn');
544    const copyIcon = document.getElementById('copyIcon');
545    const checkIcon = document.getElementById('checkIcon');
546    const tooltip = document.getElementById('tooltip');
547
548    copyBtn.addEventListener('click', () => {
549      const emailText = '[email protected]';
550      navigator.clipboard.writeText(emailText).then(() => {
551        // Toggle icons
552        copyIcon.classList.add('hidden');
553        checkIcon.classList.remove('hidden');
554        
555        // Show tooltip
556        tooltip.classList.remove('opacity-0');
557        tooltip.classList.add('opacity-100');
558
559        setTimeout(() => {
560          // Reset state
561          copyIcon.classList.remove('hidden');
562          checkIcon.classList.add('hidden');
563          tooltip.classList.add('opacity-0');
564          tooltip.classList.remove('opacity-100');
565        }, 2000);
566      });
567    });
568  </script>
568
569</body>
570</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.