diff --git a/dist/css/styles.css b/dist/css/styles.css
index 490da20..fbacbb7 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -1301,50 +1301,72 @@ select:focus {
   flex-shrink: 0;
   margin-top: 2px;
 }
-
+/* Referral Section */
 .referral-section {
-  margin-top: var(--space-16);
-  padding: var(--space-8);
-  background: var(--bg-secondary);
-  border-radius: var(--radius-xl);
-  border: 1px solid var(--border-primary);
+    margin-block: var(--space-16);
+    padding: var(--space-8);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--border-primary);
+    text-align: center;
 }
 
-.referral-section h3 {
-  margin: 0 0 var(--space-2);
-  text-align: center;
-  color: var(--text-primary);
+.referral-header h3 {
+    margin: 0 0 var(--space-2);
+    color: var(--text-primary);
+    font-size: var(--text-2xl);
+    font-weight: var(--font-bold);
 }
 
-.referral-section p {
-  text-align: center;
-  color: var(--text-secondary);
-  margin-bottom: var(--space-6);
+.referral-header p {
+    margin: 0 auto var(--space-6);
+    color: var(--text-secondary);
+    max-width: var(--content-max-width);
 }
 
 .referral-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--space-4);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--space-4);
+    justify-items: center;
 }
 
 .referral-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-4);
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
-  text-decoration: none;
-  transition: all var(--transition-fast);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-4) var(--space-3);
+    background: var(--bg-primary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-lg);
+    text-decoration: none;
+    transition: var(--transition-all);
+    width: 100%;
+    max-width: 200px;
+    box-shadow: var(--shadow-sm);
 }
 
 .referral-card:hover {
-  border-color: var(--primary);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+    border-color: var(--primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.service-name {
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+}
+
+.referral-badge {
+    font-size: var(--text-xs);
+    color: var(--primary);
+    background: rgb(99 102 241 / 0.1);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-md);
+    font-weight: var(--font-medium);
 }
 
 .service-name {
@@ -1352,14 +1374,6 @@ select:focus {
   color: var(--text-primary);
 }
 
-.referral-badge {
-  font-size: var(--text-xs);
-  color: var(--primary);
-  background: rgb(99 102 241 / 0.1);
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-md);
-}
-
 .status-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -1436,103 +1450,6 @@ select:focus {
   }
 }
 
-/* Notifications */
-.notification-container {
-  position: fixed;
-  top: var(--space-6);
-  right: var(--space-6);
-  z-index: var(--z-tooltip);
-  max-width: 400px;
-  width: 100%;
-}
-
-.notification {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  margin-bottom: var(--space-3);
-  opacity: 0;
-  transform: translateX(100%);
-  transition: all var(--transition-normal);
-}
-
-.notification--visible {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.notification--dismissing {
-  opacity: 0;
-  transform: translateX(100%);
-}
-
-.notification__content {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
-  padding: var(--space-4);
-}
-
-.notification__icon {
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-.notification__message {
-  flex: 1;
-  font-size: var(--text-sm);
-  color: var(--text-primary);
-}
-
-.notification__close {
-  background: none;
-  border: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  padding: var(--space-1);
-  border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
-  flex-shrink: 0;
-}
-
-.notification__close:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-}
-
-.notification--success {
-  border-color: var(--success);
-}
-
-.notification--success .notification__icon {
-  color: var(--success);
-}
-
-.notification--error {
-  border-color: var(--error);
-}
-
-.notification--error .notification__icon {
-  color: var(--error);
-}
-
-.notification--warning {
-  border-color: var(--warning);
-}
-
-.notification--warning .notification__icon {
-  color: var(--warning);
-}
-
-.notification--info {
-  border-color: var(--info);
-}
-
-.notification--info .notification__icon {
-  color: var(--info);
-}
-
 /* Footer */
 .site-footer {
   background: var(--bg-secondary);
@@ -1736,9 +1653,6 @@ select:focus {
     grid-template-columns: 1fr;
   }
 
-  .referral-grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  }
 
   .footer-content {
     grid-template-columns: 1fr;
@@ -1808,24 +1722,6 @@ select:focus {
     font-size: var(--text-xs);
   }
 
-  .notification-container {
-    left: var(--space-4);
-    right: var(--space-4);
-    max-width: none;
-  }
-
-  .notification {
-    transform: translateY(-100%);
-  }
-
-  .notification--visible {
-    transform: translateY(0);
-  }
-
-  .notification--dismissing {
-    transform: translateY(-100%);
-  }
-
   th,
   td {
     padding: var(--space-3) var(--space-4);
@@ -1928,7 +1824,6 @@ select:focus {
   .site-footer,
   .back-to-top,
   .dark-mode-toggle,
-  .notification-container,
   .comparison-filters,
   .comparison-actions,
   #close-compare {
@@ -1971,10 +1866,6 @@ select:focus {
   html {
     scroll-behavior: auto;
   }
-
-  .notification {
-    transition: none;
-  }
 }
 
 /* High Contrast */
diff --git a/dist/index.html b/dist/index.html
index cd8e5a8..8199d14 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -42,7 +43,7 @@
     <meta property="twitter:image" content="https://debrid-services-comparison.netlify.app/image.png">
 
     <style>
-:root{ --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #a5b4fc; --primary-dark: #3730a3; --secondary: #64748b; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-tertiary: var(--gray-500); --text-muted: var(--gray-400); --bg-primary: #fff; --bg-secondary: var(--gray-50); --bg-tertiary: var(--gray-100); --bg-elevated: #fff; --border-primary: var(--gray-200); --border-secondary: var(--gray-300); --border-focus: var(--primary); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-focus: 0 0 0 3px rgb(99 102 241 / 0.1); --transition-all: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --container-max-width: 1280px; --header-height: 4.5rem; --z-sticky: 1020; --z-modal: 1050; --z-tooltip: 1090}[data-theme="dark"]{ --text-primary: var(--gray-50); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --text-muted: var(--gray-500); --bg-primary: var(--gray-900); --bg-secondary: var(--gray-800); --bg-tertiary: var(--gray-700); --bg-elevated: var(--gray-800); --border-primary: var(--gray-700); --border-secondary: var(--gray-600); --border-focus: var(--primary-light); --primary: #818cf8; --primary-hover: #a5b4fc; --primary-light: #c7d2fe; --primary-dark: #6366f1; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4); --shadow-focus: 0 0 0 3px rgb(129 140 248 / 0.2)}*, ::before, ::after{ box-sizing: border-box; margin: 0; padding: 0}html{ scroll-behavior: smooth; font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%}body{ font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); transition: background-color var(--transition-normal), color var(--transition-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden}:focus{ outline: 2px solid var(--border-focus); outline-offset: 2px}:focus:not(:focus-visible){ outline: none}:focus-visible{ outline: 2px solid var(--border-focus); outline-offset: 2px}h1, h2, h3, h4, h5, h6{ font-weight: var(--font-bold); line-height: 1.25; letter-spacing: -0.025em; color: var(--text-primary)}h1{ font-size: var(--text-4xl); font-weight: var(--font-extrabold)}h2{ font-size: var(--text-3xl); font-weight: var(--font-bold)}h3{ font-size: var(--text-2xl); font-weight: var(--font-semibold)}p{ line-height: 1.75; margin-bottom: var(--space-4)}a{ color: var(--primary); text-decoration: none; transition: var(--transition-all)}a:hover{ color: var(--primary-hover); text-decoration: none}.page-wrapper{ min-height: 100vh; display: flex; flex-direction: column; position: relative}.container{ max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--space-6); width: 100%}.main-content{ flex: 1; position: relative}.site-header{ position: sticky; top: 0; z-index: var(--z-sticky); background: rgb(255 255 255 / 0.8); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border-primary); height: var(--header-height); transition: var(--transition-all)}[data-theme="dark"] .site-header{ background: rgb(15 23 42 / 0.8)}.header-content{ display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: var(--space-8)}.site-title{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); text-decoration: none; transition: var(--transition-all); position: relative}.site-title:hover{ color: var(--primary); transform: translateY(-1px)}.site-title:focus-visible{ border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2))}.logo-icon{ font-size: var(--text-2xl); filter: drop-shadow(0 2px 4px rgb(99 102 241 / 0.2)); transition: var(--transition-all)}.site-title:hover .logo-icon{ transform: rotate(-5deg) scale(1.1)}.header-nav{ display: flex; align-items: center; gap: var(--space-6)}.nav-link{ position: relative; display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-lg); transition: var(--transition-all); white-space: nowrap}.nav-link::before{ content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: var(--primary); border-radius: var(--radius-full); transition: var(--transition-all); transform: translateX(-50%)}.nav-link:hover{ color: var(--primary); background: var(--bg-secondary); transform: translateY(-1px)}.nav-link:hover::before{ width: 70%}.nav-link:focus-visible{ box-shadow: var(--shadow-focus)}.dark-mode-toggle{ display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--border-primary); border-radius: var(--radius-full); background: var(--bg-primary); color: var(--text-primary); cursor: pointer; transition: var(--transition-all); position: relative; overflow: hidden}.dark-mode-toggle:hover{ background: var(--bg-secondary); border-color: var(--primary); transform: scale(1.05); box-shadow: var(--shadow-md)}.dark-mode-toggle:focus-visible{ box-shadow: var(--shadow-focus)}.sun-icon,.moon-icon{ transition: var(--transition-all); position: absolute}.moon-icon{ display: none; transform: rotate(180deg)}[data-theme="dark"] .sun-icon{ display: none}[data-theme="dark"] .moon-icon{ display: block; transform: rotate(0deg)}.hero-section{ position: relative; padding: var(--space-24) 0 var(--space-20); background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); overflow: hidden}.hero-section::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgb(99 102 241 / 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgb(99 102 241 / 0.05) 0%, transparent 50%); pointer-events: none}[data-theme="dark"] .hero-section{ background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)}[data-theme="dark"] .hero-section::before{ background: radial-gradient(circle at 30% 20%, rgb(129 140 248 / 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgb(129 140 248 / 0.08) 0%, transparent 50%)}.hero-content{ text-align: center; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; animation: fadeInUp 0.8s ease-out}@keyframes fadeInUp{ from{ opacity: 0; transform: translateY(30px);} to{ opacity: 1; transform: translateY(0);}}.hero-title{ font-size: clamp(var(--text-3xl), 8vw, var(--text-6xl)); font-weight: var(--font-extrabold); line-height: 1.1; margin: 0 0 var(--space-6); color: var(--text-primary); letter-spacing: -0.02em}.gradient-text{ background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative}[data-theme="dark"] .gradient-text{ background: linear-gradient(135deg, var(--primary-light) 0%, #c4b5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text}.hero-description{ font-size: clamp(var(--text-lg), 4vw, var(--text-xl)); color: var(--text-secondary); margin: 0 0 var(--space-10); max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.6}.hero-actions{ display: flex; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-16); flex-wrap: wrap}.btn{ display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); border: 2px solid transparent; border-radius: var(--radius-xl); font-size: var(--text-base); font-weight: var(--font-semibold); text-decoration: none; cursor: pointer; transition: var(--transition-all); white-space: nowrap; position: relative; overflow: hidden; text-align: center; min-width: 140px; justify-content: center}.btn::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent); transition: left 0.5s}.btn:hover::before{ left: 100%}.btn-primary{ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; box-shadow: var(--shadow-md)}.btn-primary:hover{ background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%); transform: translateY(-2px); box-shadow: var(--shadow-lg)}.btn-primary:focus-visible{ box-shadow: var(--shadow-focus), var(--shadow-lg)}.btn-secondary{ background: transparent; color: var(--text-primary); border: 2px solid var(--border-primary)}.btn-secondary:hover{ border-color: var(--primary); color: var(--primary); background: var(--bg-secondary); transform: translateY(-2px); box-shadow: var(--shadow-md)}.btn-secondary:focus-visible{ box-shadow: var(--shadow-focus)}.quick-nav{ padding: var(--space-20) 0; background: var(--bg-primary); position: relative}.quick-nav-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8)}.quick-nav-card{ display: block; padding: var(--space-8); background: var(--bg-elevated); border: 2px solid var(--border-primary); border-radius: var(--radius-2xl); text-decoration: none; transition: var(--transition-all); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px)}.quick-nav-card::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary) 0%, transparent 100%); opacity: 0; transition: var(--transition-all); z-index: 0}.quick-nav-card:hover::before{ opacity: 0.08}.quick-nav-card:hover{ border-color: var(--primary); transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-xl)}.quick-nav-card:focus-visible{ box-shadow: var(--shadow-focus), var(--shadow-lg)}.quick-nav-card >*{ position: relative; z-index: 1}.quick-nav-icon{ font-size: var(--text-4xl); margin-bottom: var(--space-4); display: block; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.1)); transition: var(--transition-all)}.quick-nav-card:hover .quick-nav-icon{ transform: scale(1.1) rotate(-5deg)}.quick-nav-card h3{ margin: 0 0 var(--space-3); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary)}.quick-nav-card p{ margin: 0; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.6}.quick-nav-card a:hover{ text-decoration: none}.section{ padding: var(--space-24) 0; position: relative}.section:nth-child(even){ background: var(--bg-secondary)}.section-header{ text-align: center; margin-bottom: var(--space-20); animation: fadeInUp 0.6s ease-out}.section-title{ font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); font-weight: var(--font-extrabold); margin: 0 0 var(--space-6); color: var(--text-primary); letter-spacing: -0.02em}.section-description{ font-size: clamp(var(--text-base), 3vw, var(--text-xl)); color: var(--text-secondary); margin: 0; max-width: 700px; margin-inline: auto; line-height: 1.7}.back-to-top{ position: fixed; bottom: var(--space-6); right: var(--space-6); width: 48px; height: 48px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: all var(--transition-normal); opacity: 0; visibility: hidden; transform: translateY(20px); z-index: var(--z-docked)}.back-to-top.visible{ opacity: 1; visibility: visible; transform: translateY(0)}.back-to-top:hover{ background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-xl)}@media (width <=768px){ .header-nav{ display: none;} .hero-title{ font-size: var(--text-3xl);} .hero-description{ font-size: var(--text-lg);} .hero-actions{ flex-direction: column; align-items: center;} .section-title{ font-size: var(--text-3xl);} .quick-nav-grid{ grid-template-columns: 1fr;} .footer-content{ grid-template-columns: 1fr; text-align: center;} .back-to-top{ width: 40px; height: 40px;}}
+ :root{ --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #a5b4fc; --primary-dark: #3730a3; --secondary: #64748b; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-tertiary: var(--gray-500); --text-muted: var(--gray-400); --bg-primary: #fff; --bg-secondary: var(--gray-50); --bg-tertiary: var(--gray-100); --bg-elevated: #fff; --border-primary: var(--gray-200); --border-secondary: var(--gray-300); --border-focus: var(--primary); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-focus: 0 0 0 3px rgb(99 102 241 / 0.1); --transition-all: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --container-max-width: 1280px; --header-height: 4.5rem; --z-sticky: 1020; --z-modal: 1050; --z-tooltip: 1090} [data-theme="dark"]{ --text-primary: var(--gray-50); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --text-muted: var(--gray-500); --bg-primary: var(--gray-900); --bg-secondary: var(--gray-800); --bg-tertiary: var(--gray-700); --bg-elevated: var(--gray-800); --border-primary: var(--gray-700); --border-secondary: var(--gray-600); --border-focus: var(--primary-light); --primary: #818cf8; --primary-hover: #a5b4fc; --primary-light: #c7d2fe; --primary-dark: #6366f1; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4); --shadow-focus: 0 0 0 3px rgb(129 140 248 / 0.2)} *, ::before, ::after{ box-sizing: border-box; margin: 0; padding: 0} html{ scroll-behavior: smooth; font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%} body{ font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); transition: background-color var(--transition-normal), color var(--transition-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden} :focus{ outline: 2px solid var(--border-focus); outline-offset: 2px} :focus:not(:focus-visible){ outline: none} :focus-visible{ outline: 2px solid var(--border-focus); outline-offset: 2px} h1, h2, h3, h4, h5, h6{ font-weight: var(--font-bold); line-height: 1.25; letter-spacing: -0.025em; color: var(--text-primary)} h1{ font-size: var(--text-4xl); font-weight: var(--font-extrabold)} h2{ font-size: var(--text-3xl); font-weight: var(--font-bold)} h3{ font-size: var(--text-2xl); font-weight: var(--font-semibold)} p{ line-height: 1.75; margin-bottom: var(--space-4)} a{ color: var(--primary); text-decoration: none; transition: var(--transition-all)} a:hover{ color: var(--primary-hover); text-decoration: none} .page-wrapper{ min-height: 100vh; display: flex; flex-direction: column; position: relative} .container{ max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--space-6); width: 100%} .main-content{ flex: 1; position: relative} .site-header{ position: sticky; top: 0; z-index: var(--z-sticky); background: rgb(255 255 255 / 0.8); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border-primary); height: var(--header-height); transition: var(--transition-all)} [data-theme="dark"] .site-header{ background: rgb(15 23 42 / 0.8)} .header-content{ display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: var(--space-8)} .site-title{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); text-decoration: none; transition: var(--transition-all); position: relative} .site-title:hover{ color: var(--primary); transform: translateY(-1px)} .site-title:focus-visible{ border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2))} .logo-icon{ font-size: var(--text-2xl); filter: drop-shadow(0 2px 4px rgb(99 102 241 / 0.2)); transition: var(--transition-all)} .site-title:hover .logo-icon{ transform: rotate(-5deg) scale(1.1)} .header-nav{ display: flex; align-items: center; gap: var(--space-6)} .nav-link{ position: relative; display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-lg); transition: var(--transition-all); white-space: nowrap} .nav-link::before{ content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: var(--primary); border-radius: var(--radius-full); transition: var(--transition-all); transform: translateX(-50%)} .nav-link:hover{ color: var(--primary); background: var(--bg-secondary); transform: translateY(-1px)} .nav-link:hover::before{ width: 70%} .nav-link:focus-visible{ box-shadow: var(--shadow-focus)} .dark-mode-toggle{ display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--border-primary); border-radius: var(--radius-full); background: var(--bg-primary); color: var(--text-primary); cursor: pointer; transition: var(--transition-all); position: relative; overflow: hidden} .dark-mode-toggle:hover{ background: var(--bg-secondary); border-color: var(--primary); transform: scale(1.05); box-shadow: var(--shadow-md)} .dark-mode-toggle:focus-visible{ box-shadow: var(--shadow-focus)} .sun-icon, .moon-icon{ transition: var(--transition-all); position: absolute} .moon-icon{ display: none; transform: rotate(180deg)} [data-theme="dark"] .sun-icon{ display: none} [data-theme="dark"] .moon-icon{ display: block; transform: rotate(0deg)} .hero-section{ position: relative; padding: var(--space-24) 0 var(--space-20); background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); overflow: hidden} .hero-section::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgb(99 102 241 / 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgb(99 102 241 / 0.05) 0%, transparent 50%); pointer-events: none} [data-theme="dark"] .hero-section{ background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)} [data-theme="dark"] .hero-section::before{ background: radial-gradient(circle at 30% 20%, rgb(129 140 248 / 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgb(129 140 248 / 0.08) 0%, transparent 50%)} .hero-content{ text-align: center; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; animation: fadeInUp 0.8s ease-out} @keyframes fadeInUp{ from{ opacity: 0; transform: translateY(30px);} to{ opacity: 1; transform: translateY(0);}} .hero-title{ font-size: clamp(var(--text-3xl), 8vw, var(--text-6xl)); font-weight: var(--font-extrabold); line-height: 1.1; margin: 0 0 var(--space-6); color: var(--text-primary); letter-spacing: -0.02em} .gradient-text{ background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative} [data-theme="dark"] .gradient-text{ background: linear-gradient(135deg, var(--primary-light) 0%, #c4b5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text} .hero-description{ font-size: clamp(var(--text-lg), 4vw, var(--text-xl)); color: var(--text-secondary); margin: 0 0 var(--space-10); max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.6} .hero-actions{ display: flex; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-16); flex-wrap: wrap} .btn{ display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); border: 2px solid transparent; border-radius: var(--radius-xl); font-size: var(--text-base); font-weight: var(--font-semibold); text-decoration: none; cursor: pointer; transition: var(--transition-all); white-space: nowrap; position: relative; overflow: hidden; text-align: center; min-width: 140px; justify-content: center} .btn::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent); transition: left 0.5s} .btn:hover::before{ left: 100%} .btn-primary{ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; box-shadow: var(--shadow-md)} .btn-primary:hover{ background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%); transform: translateY(-2px); box-shadow: var(--shadow-lg)} .btn-primary:focus-visible{ box-shadow: var(--shadow-focus), var(--shadow-lg)} .btn-secondary{ background: transparent; color: var(--text-primary); border: 2px solid var(--border-primary)} .btn-secondary:hover{ border-color: var(--primary); color: var(--primary); background: var(--bg-secondary); transform: translateY(-2px); box-shadow: var(--shadow-md)} .btn-secondary:focus-visible{ box-shadow: var(--shadow-focus)} .quick-nav{ padding: var(--space-20) 0; background: var(--bg-primary); position: relative} .quick-nav-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8)} .quick-nav-card{ display: block; padding: var(--space-8); background: var(--bg-elevated); border: 2px solid var(--border-primary); border-radius: var(--radius-2xl); text-decoration: none; transition: var(--transition-all); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px)} .quick-nav-card::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary) 0%, transparent 100%); opacity: 0; transition: var(--transition-all); z-index: 0} .quick-nav-card:hover::before{ opacity: 0.08} .quick-nav-card:hover{ border-color: var(--primary); transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-xl)} .quick-nav-card:focus-visible{ box-shadow: var(--shadow-focus), var(--shadow-lg)} .quick-nav-card>*{ position: relative; z-index: 1} .quick-nav-icon{ font-size: var(--text-4xl); margin-bottom: var(--space-4); display: block; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.1)); transition: var(--transition-all)} .quick-nav-card:hover .quick-nav-icon{ transform: scale(1.1) rotate(-5deg)} .quick-nav-card h3{ margin: 0 0 var(--space-3); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary)} .quick-nav-card p{ margin: 0; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.6} .quick-nav-card a:hover{ text-decoration: none} .section{ padding: var(--space-24) 0; position: relative} .section:nth-child(even){ background: var(--bg-secondary)} .section-header{ text-align: center; margin-bottom: var(--space-20); animation: fadeInUp 0.6s ease-out} .section-title{ font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); font-weight: var(--font-extrabold); margin: 0 0 var(--space-6); color: var(--text-primary); letter-spacing: -0.02em} .section-description{ font-size: clamp(var(--text-base), 3vw, var(--text-xl)); color: var(--text-secondary); margin: 0; max-width: 700px; margin-inline: auto; line-height: 1.7} .back-to-top{ position: fixed; bottom: var(--space-6); right: var(--space-6); width: 48px; height: 48px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: all var(--transition-normal); opacity: 0; visibility: hidden; transform: translateY(20px); z-index: var(--z-docked)} .back-to-top.visible{ opacity: 1; visibility: visible; transform: translateY(0)} .back-to-top:hover{ background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-xl)} @media (width <=768px){ .header-nav{ display: none;} .hero-title{ font-size: var(--text-3xl);} .hero-description{ font-size: var(--text-lg);} .hero-actions{ flex-direction: column; align-items: center;} .section-title{ font-size: var(--text-3xl);} .quick-nav-grid{ grid-template-columns: 1fr;} .footer-content{ grid-template-columns: 1fr; text-align: center;} .back-to-top{ width: 40px; height: 40px;}}
     </style>
 </head>
 
@@ -61,12 +62,15 @@
                         <a href="#compare" class="nav-link">Compare</a>
                     </nav>
                     <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
-                        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                            <circle cx="12" cy="12" r="5"/>
-                            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+                        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                            <circle cx="12" cy="12" r="5" />
+                            <path
+                                d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
                         </svg>
-                        <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                        <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                         </svg>
                     </button>
                 </div>
@@ -82,7 +86,8 @@
                             Compare Premium <span class="gradient-text">Debrid Services</span>
                         </h1>
                         <p class="hero-description">
-                            Find the perfect premium download service for your needs. Compare pricing, features, and supported hosts across all major debrid providers.
+                            Find the perfect premium download service for your needs. Compare pricing, features, and
+                            supported hosts across all major debrid providers.
                         </p>
                         <div class="hero-actions">
                             <a href="#pricing" class="btn btn-primary">View Pricing</a>
@@ -146,31 +151,39 @@
                         </div>
                         <div class="pricing-note">
                             <div class="alert alert-info" role="alert">
-                                <svg class="alert-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                                    <circle cx="12" cy="12" r="10"/>
-                                    <path d="M12 16v-4M12 8h.01"/>
+                                <svg class="alert-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                                    stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                    <circle cx="12" cy="12" r="10" />
+                                    <path d="M12 16v-4M12 8h.01" />
                                 </svg>
                                 <div>
-                                    <strong>Important:</strong> Pricing can change frequently. Always verify current pricing on official websites before purchasing.
+                                    <strong>Important:</strong> Pricing can change frequently. Always verify current
+                                    pricing on official websites before purchasing.
                                 </div>
                             </div>
                         </div>
                     </div>
-                    
-                    <!-- Referral Links -->
+
+                    <!-- Referral Section -->
                     <div class="referral-section">
-                        <h3>Support This Project</h3>
-                        <p>Consider using our referral links - it helps maintain this project at no extra cost to you!</p>
+                        <div class="referral-header">
+                            <h3>Support This Project</h3>
+                            <p>Consider using our referral links - it helps maintain this project at no extra cost to
+                                you!</p>
+                        </div>
                         <div class="referral-grid">
-                            <a href="https://alldebrid.com/?uid=3wvya&lang=en" class="referral-card" rel="noopener sponsored">
+                            <a href="https://alldebrid.com/?uid=3wvya&lang=en" class="referral-card"
+                                rel="noopener sponsored">
                                 <span class="service-name">AllDebrid</span>
                                 <span class="referral-badge">Referral Link</span>
                             </a>
-                            <a href="http://real-debrid.com/?id=10990901" class="referral-card" rel="noopener sponsored">
+                            <a href="http://real-debrid.com/?id=10990901" class="referral-card"
+                                rel="noopener sponsored">
                                 <span class="service-name">Real-Debrid</span>
                                 <span class="referral-badge">Referral Link</span>
                             </a>
-                            <a href="https://torbox.app/subscription?referral=47eece72-46b8-483b-8b7a-79d6c16dedf2" class="referral-card" rel="noopener sponsored">
+                            <a href="https://torbox.app/subscription?referral=47eece72-46b8-483b-8b7a-79d6c16dedf2"
+                                class="referral-card" rel="noopener sponsored">
                                 <span class="service-name">TorBox</span>
                                 <span class="referral-badge">Referral Link</span>
                             </a>
@@ -182,191 +195,203 @@
                                 <span class="service-name">Debrid-Link</span>
                                 <span class="referral-badge">Referral Link</span>
                             </a>
-                            <a href="https://www.deepbrid.com/aff/go/upward1971" class="referral-card" rel="noopener sponsored">
+                            <a href="https://www.deepbrid.com/aff/go/upward1971" class="referral-card"
+                                rel="noopener sponsored">
                                 <span class="service-name">DeepBird</span>
                                 <span class="referral-badge">Referral Link</span>
                             </a>
                         </div>
                     </div>
-                </div>
-            </section>
 
-            <!-- File Hosts Section -->
-            <section id="file-hosts" class="section">
-                <div class="container">
-                    <div class="section-header">
-                        <h2 class="section-title">Supported File Hosts</h2>
-                        <p class="section-description">Browse and search through 300+ supported file hosting services</p>
-                    </div>
-                    
-                    <div class="search-section">
-                        <div class="search-container enhanced">
-                            <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                                <circle cx="11" cy="11" r="8"/>
-                                <path d="M21 21l-4.35-4.35"/>
-                            </svg>
-                            <input type="search" id="host-search-input" class="search-input" 
-                                   placeholder="Search file hosts (e.g., Mega, Rapidgator...)" 
-                                   aria-label="Search file hosts" autocomplete="off" />
-                            <button id="clear-host-search" class="clear-icon" aria-label="Clear search" type="button">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                                    <line x1="18" y1="6" x2="6" y2="18"/>
-                                    <line x1="6" y1="6" x2="18" y2="18"/>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
+                    <!-- File Hosts Section -->
+                    <section id="file-hosts" class="section">
+                        <div class="container">
+                            <div class="section-header">
+                                <h2 class="section-title">Supported File Hosts</h2>
+                                <p class="section-description">Browse and search through 300+ supported file hosting
+                                    services
+                                </p>
+                            </div>
 
-                    <div id="file-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
-                        <div class="loading-state">
-                            <div class="loading-spinner" aria-hidden="true"></div>
-                            <p>Loading file hosts...</p>
-                        </div>
-                    </div>
-                </div>
-            </section>
+                            <div class="search-section">
+                                <div class="search-container enhanced">
+                                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                        <circle cx="11" cy="11" r="8" />
+                                        <path d="M21 21l-4.35-4.35" />
+                                    </svg>
+                                    <input type="search" id="host-search-input" class="search-input"
+                                        placeholder="Search file hosts (e.g., Mega, Rapidgator...)"
+                                        aria-label="Search file hosts" autocomplete="off" />
+                                    <button id="clear-host-search" class="clear-icon" aria-label="Clear search"
+                                        type="button">
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                            <line x1="18" y1="6" x2="6" y2="18" />
+                                            <line x1="6" y1="6" x2="18" y2="18" />
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
 
-            <!-- Comparison Section -->
-            <section id="compare" class="section">
-                <div class="container">
-                    <div class="section-header">
-                        <h2 class="section-title">Compare Services</h2>
-                        <p class="section-description">Select two services to see a detailed side-by-side comparison</p>
-                    </div>
-                    
-                    <div class="compare-controls">
-                        <div class="compare-select-group">
-                            <label for="provider1">First Service</label>
-                            <div class="select-wrapper">
-                                <select id="provider1" aria-label="Select first provider to compare">
-                                    <option value="">Choose a service...</option>
-                                </select>
+                            <div id="file-hosts-table-container" class="data-table-container" role="region"
+                                aria-live="polite">
+                                <div class="loading-state">
+                                    <div class="loading-spinner" aria-hidden="true"></div>
+                                    <p>Loading file hosts...</p>
+                                </div>
                             </div>
                         </div>
-                        <div class="compare-vs" aria-hidden="true">VS</div>
-                        <div class="compare-select-group">
-                            <label for="provider2">Second Service</label>
-                            <div class="select-wrapper">
-                                <select id="provider2" aria-label="Select second provider to compare">
-                                    <option value="">Choose a service...</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div id="compare-table-container" class="data-table-container comparison-table" role="region" aria-live="polite">
-                        <div class="empty-state">
-                            <div class="empty-state-icon" aria-hidden="true">⚖️</div>
-                            <h3>Ready to Compare</h3>
-                            <p>Select two services above to see a detailed comparison</p>
-                        </div>
-                    </div>
-                </div>
-            </section>
+                    </section>
 
-            <!-- Adult Hosts Section -->
-            <section id="adult-hosts" class="section">
-                <div class="container">
-                    <div class="section-header">
-                        <h2 class="section-title">Adult Content Hosts</h2>
-                        <p class="section-description">Supported adult content hosting services</p>
-                    </div>
-                    
-                    <div class="search-section">
-                        <div class="search-container enhanced">
-                            <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                                <circle cx="11" cy="11" r="8"/>
-                                <path d="M21 21l-4.35-4.35"/>
-                            </svg>
-                            <input type="search" id="adult-host-search-input" class="search-input" 
-                                   placeholder="Search adult hosts..." 
-                                   aria-label="Search adult hosts" autocomplete="off" />
-                            <button id="clear-adult-host-search" class="clear-icon" aria-label="Clear search" type="button">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                                    <line x1="18" y1="6" x2="6" y2="18"/>
-                                    <line x1="6" y1="6" x2="18" y2="18"/>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
+                    <!-- Comparison Section -->
+                    <section id="compare" class="section">
+                        <div class="container">
+                            <div class="section-header">
+                                <h2 class="section-title">Compare Services</h2>
+                                <p class="section-description">Select two services to see a detailed side-by-side
+                                    comparison</p>
+                            </div>
 
-                    <div id="adult-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
-                        <div class="loading-state">
-                            <div class="loading-spinner" aria-hidden="true"></div>
-                            <p>Loading adult hosts...</p>
-                        </div>
-                    </div>
-                </div>
-            </section>
+                            <div class="compare-controls">
+                                <div class="compare-select-group">
+                                    <label for="provider1">First Service</label>
+                                    <div class="select-wrapper">
+                                        <select id="provider1" aria-label="Select first provider to compare">
+                                            <option value="">Choose a service...</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="compare-vs" aria-hidden="true">VS</div>
+                                <div class="compare-select-group">
+                                    <label for="provider2">Second Service</label>
+                                    <div class="select-wrapper">
+                                        <select id="provider2" aria-label="Select second provider to compare">
+                                            <option value="">Choose a service...</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
 
-            <!-- Status Section -->
-            <section id="live-status" class="section">
-                <div class="container">
-                    <div class="section-header">
-                        <h2 class="section-title">Service Status</h2>
-                        <p class="section-description">Check real-time status and official host lists</p>
-                    </div>
-                    
-                    <div class="status-grid">
-                        <a href="https://alldebrid.com/status/" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">AllDebrid</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
+                            <div id="compare-table-container" class="data-table-container comparison-table"
+                                role="region" aria-live="polite">
+                                <div class="empty-state">
+                                    <div class="empty-state-icon" aria-hidden="true">⚖️</div>
+                                    <h3>Ready to Compare</h3>
+                                    <p>Select two services above to see a detailed comparison</p>
+                                </div>
                             </div>
-                            <p>View live status and supported hosts</p>
-                        </a>
-                        <a href="https://real-debrid.com/compare" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">Real-Debrid</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
+                        </div>
+                    </section>
+
+                    <!-- Adult Hosts Section -->
+                    <section id="adult-hosts" class="section">
+                        <div class="container">
+                            <div class="section-header">
+                                <h2 class="section-title">Adult Content Hosts</h2>
+                                <p class="section-description">Supported adult content hosting services</p>
                             </div>
-                            <p>Check service status and host comparison</p>
-                        </a>
-                        <a href="https://torbox.app/hosters" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">TorBox</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
+
+                            <div class="search-section">
+                                <div class="search-container enhanced">
+                                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                        <circle cx="11" cy="11" r="8" />
+                                        <path d="M21 21l-4.35-4.35" />
+                                    </svg>
+                                    <input type="search" id="adult-host-search-input" class="search-input"
+                                        placeholder="Search adult hosts..." aria-label="Search adult hosts"
+                                        autocomplete="off" />
+                                    <button id="clear-adult-host-search" class="clear-icon" aria-label="Clear search"
+                                        type="button">
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                            <line x1="18" y1="6" x2="6" y2="18" />
+                                            <line x1="6" y1="6" x2="18" y2="18" />
+                                        </svg>
+                                    </button>
+                                </div>
                             </div>
-                            <p>View supported hosters and status</p>
-                        </a>
-                        <a href="https://www.premiumize.me/services" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">Premiumize</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
+
+                            <div id="adult-hosts-table-container" class="data-table-container" role="region"
+                                aria-live="polite">
+                                <div class="loading-state">
+                                    <div class="loading-spinner" aria-hidden="true"></div>
+                                    <p>Loading adult hosts...</p>
+                                </div>
                             </div>
-                            <p>Check service availability and features</p>
-                        </a>
-                        <a href="https://linksnappy.com/myaccount/status" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">LinkSnappy</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
+                        </div>
+                    </section>
+
+                    <!-- Status Section -->
+                    <section id="live-status" class="section">
+                        <div class="container">
+                            <div class="section-header">
+                                <h2 class="section-title">Service Status</h2>
+                                <p class="section-description">Check real-time status and official host lists</p>
                             </div>
-                            <p>Monitor service status and hosts</p>
-                        </a>
-                        <a href="https://debrid-link.com/webapp/status" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">Debrid-Link</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
+
+                            <div class="status-grid">
+                                <a href="https://alldebrid.com/status/" class="status-card" rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">AllDebrid</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>View live status and supported hosts</p>
+                                </a>
+                                <a href="https://real-debrid.com/compare" class="status-card" rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">Real-Debrid</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>Check service status and host comparison</p>
+                                </a>
+                                <a href="https://torbox.app/hosters" class="status-card" rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">TorBox</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>View supported hosters and status</p>
+                                </a>
+                                <a href="https://www.premiumize.me/services" class="status-card" rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">Premiumize</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>Check service availability and features</p>
+                                </a>
+                                <a href="https://linksnappy.com/myaccount/status" class="status-card" rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">LinkSnappy</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>Monitor service status and hosts</p>
+                                </a>
+                                <a href="https://debrid-link.com/webapp/status" class="status-card" rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">Debrid-Link</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>View current status and host list</p>
+                                </a>
+                                <a href="https://www.mega-debrid.eu/index.php?page=hebergeurs" class="status-card"
+                                    rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">Mega-Debrid</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>Check supported file hosts</p>
+                                </a>
+                                <a href="https://www.deepbrid.com/status" class="status-card" rel="noopener">
+                                    <div class="status-header">
+                                        <span class="service-name">DeepBird</span>
+                                        <span class="service-status-indicator online" aria-label="Online"></span>
+                                    </div>
+                                    <p>Check supported file hosts</p>
+                                </a>
                             </div>
-                            <p>View current status and host list</p>
-                        </a>
-                        <a href="https://www.mega-debrid.eu/index.php?page=hebergeurs" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">Mega-Debrid</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
-                            </div>
-                            <p>Check supported file hosts</p>
-                        </a>
-                        <a href="https://www.deepbrid.com/status" class="status-card" rel="noopener">
-                            <div class="status-header">
-                                <span class="service-name">DeepBird</span>
-                                <span class="service-status-indicator online" aria-label="Online"></span>
-                            </div>
-                            <p>Check supported file hosts</p>
-                        </a>
-                    </div>
-                </div>
-            </section>
+                        </div>
+                    </section>
         </main>
 
         <footer class="site-footer" role="contentinfo">
@@ -379,8 +404,10 @@
                     <div class="footer-section">
                         <h4>Resources</h4>
                         <ul>
-                            <li><a href="https://github.com/debridmediamanager/awesome-debrid" rel="noopener">Awesome Debrid</a></li>
-                            <li><a href="https://github.com/fynks/debrid-services-comparison" rel="noopener">Source Code</a></li>
+                            <li><a href="https://github.com/debridmediamanager/awesome-debrid" rel="noopener">Awesome
+                                    Debrid</a></li>
+                            <li><a href="https://github.com/fynks/debrid-services-comparison" rel="noopener">Source
+                                    Code</a></li>
                         </ul>
                     </div>
                     <div class="footer-section">
@@ -397,8 +424,9 @@
 
     <!-- Back to Top Button -->
     <button id="backToTop" class="back-to-top" aria-label="Back to top" type="button">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-            <path d="M18 15l-6-6-6 6"/>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            aria-hidden="true">
+            <path d="M18 15l-6-6-6 6" />
         </svg>
     </button>
 
@@ -407,21 +435,21 @@
         document.addEventListener('DOMContentLoaded', () => {
             const darkModeToggle = document.getElementById('darkModeToggle');
             const backToTopBtn = document.getElementById('backToTop');
-            
+
             // Theme management
             const savedTheme = localStorage.getItem('theme');
             const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
             const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
-            
+
             document.documentElement.setAttribute('data-theme', initialTheme);
-            
+
             darkModeToggle.addEventListener('click', () => {
                 const currentTheme = document.documentElement.getAttribute('data-theme');
                 const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                 document.documentElement.setAttribute('data-theme', newTheme);
                 localStorage.setItem('theme', newTheme);
             });
-            
+
             // Back to top functionality with performance optimization
             let ticking = false;
             const handleScroll = () => {
@@ -433,23 +461,23 @@
                     ticking = true;
                 }
             };
-            
+
             window.addEventListener('scroll', handleScroll, { passive: true });
-            
+
             backToTopBtn.addEventListener('click', () => {
                 window.scrollTo({ top: 0, behavior: 'smooth' });
             });
-            
+
             // Smooth scrolling for navigation links with accessibility
             document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                 anchor.addEventListener('click', function (e) {
                     e.preventDefault();
                     const targetId = this.getAttribute('href');
                     const target = document.querySelector(targetId);
-                    
+
                     if (target) {
                         target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                        
+
                         // Focus management for accessibility
                         const targetFocus = target.querySelector('h1, h2, h3, h4, h5, h6') || target;
                         targetFocus.setAttribute('tabindex', '-1');
@@ -459,7 +487,7 @@
             });
         });
     </script>
-      
+
     <script>
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', () => {
@@ -470,4 +498,5 @@
         }
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/dist/js/app.js b/dist/js/app.js
index 48c27f4..88af086 100644
--- a/dist/js/app.js
+++ b/dist/js/app.js
@@ -3,29 +3,31 @@
  * Modern, feature-rich JavaScript with performance optimizations and professional UX
  */
 
-// Modern utility functions with optimized arrow syntax
+// Modern utility functions
 const Utils = {
   // Enhanced debounce with immediate option
   debounce: (func, delay = 300, immediate = false) => {
-    let timeoutId;
-    return (...args) => {
+    let timeout;
+    return function executedFunction(...args) {
       const later = () => {
-        timeoutId = null;
-        if (!immediate) func(...args);
+        timeout = null;
+        if (!immediate) func.apply(this, args);
       };
-      const callNow = immediate && !timeoutId;
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(later, delay);
-      if (callNow) func(...args);
+      const callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, delay);
+      if (callNow) func.apply(this, args);
     };
   },
 
   // Throttle function for scroll events
   throttle: (func, limit) => {
     let inThrottle;
-    return function(...args) {
+    return function() {
+      const args = arguments;
+      const context = this;
       if (!inThrottle) {
-        func.apply(this, args);
+        func.apply(context, args);
         inThrottle = true;
         setTimeout(() => inThrottle = false, limit);
       }
@@ -34,10 +36,9 @@ const Utils = {
 
   // Animate elements with Intersection Observer
   animateOnScroll: (elements, options = {}) => {
-    const observerOptions = {
+    const defaultOptions = {
       threshold: 0.1,
-      rootMargin: '0px 0px -50px 0px',
-      ...options
+      rootMargin: '0px 0px -50px 0px'
     };
     
     const observer = new IntersectionObserver((entries) => {
@@ -47,108 +48,23 @@ const Utils = {
           observer.unobserve(entry.target);
         }
       });
-    }, observerOptions);
+    }, { ...defaultOptions, ...options });
 
     elements.forEach(el => observer.observe(el));
   }
 };
 
-// Enhanced notification system with optimized DOM handling
-class NotificationManager {
-  constructor() {
-    this.container = this.createContainer();
-    this.notifications = new Map();
-  }
-
-  createContainer() {
-    const container = document.createElement('div');
-    container.className = 'notification-container';
-    container.setAttribute('aria-live', 'polite');
-    document.body.appendChild(container);
-    return container;
-  }
-
-  show(message, type = 'info', duration = 4000) {
-    const id = Date.now().toString();
-    const notification = document.createElement('div');
-    
-    notification.className = `notification notification--${type}`;
-    notification.setAttribute('role', 'alert');
-    notification.innerHTML = `
-      <div class="notification__content">
-        <svg class="notification__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          ${this.getIcon(type)}
-        </svg>
-        <span class="notification__message">${message}</span>
-        <button class="notification__close" aria-label="Close notification">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-      </div>
-    `;
-
-    this.container.appendChild(notification);
-    this.notifications.set(id, notification);
-
-    // Auto dismiss
-    const timeoutId = setTimeout(() => this.dismiss(id), duration);
-    notification.dataset.timeoutId = timeoutId;
-
-    // Manual dismiss
-    notification.querySelector('.notification__close').addEventListener('click', () => {
-      this.dismiss(id);
-    });
-
-    // Animate in
-    requestAnimationFrame(() => {
-      notification.classList.add('notification--visible');
-    });
-
-    return id;
-  }
-
-  getIcon(type) {
-    const icons = {
-      success: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline>',
-      error: '<circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>',
-      warning: '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line>',
-      info: '<circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>'
-    };
-    return icons[type] || icons.info;
-  }
-
-  dismiss(id) {
-    const notification = this.notifications.get(id);
-    if (!notification) return;
-
-    notification.classList.add('notification--dismissing');
-    this.notifications.delete(id);
-    
-    // Clear auto-dismiss timeout
-    const timeoutId = notification.dataset.timeoutId;
-    if (timeoutId) clearTimeout(parseInt(timeoutId, 10));
-    
-    setTimeout(() => {
-      if (notification.parentNode) {
-        this.container.removeChild(notification);
-      }
-    }, 300);
-  }
-}
-
-// Enhanced loading manager with optimized DOM handling
+// Enhanced loading manager
 class LoadingManager {
   constructor() {
-    this.activeLoaders = new Map();
+    this.activeLoaders = new Set();
   }
 
   show(target, text = 'Loading...') {
     const loaderId = Date.now().toString();
     const loader = document.createElement('div');
     loader.className = 'loading-overlay';
-    loader.dataset.loaderId = loaderId;
+    loader.setAttribute('data-loader-id', loaderId);
     loader.innerHTML = `
       <div class="loading-content">
         <div class="loading-spinner">
@@ -160,10 +76,13 @@ class LoadingManager {
       </div>
     `;
 
-    const targetElement = typeof target === 'string' ? document.querySelector(target) : target;
-    targetElement.style.position = 'relative';
-    targetElement.appendChild(loader);
-    this.activeLoaders.set(loaderId, { element: loader, target: targetElement });
+    if (typeof target === 'string') {
+      target = document.querySelector(target);
+    }
+
+    target.style.position = 'relative';
+    target.appendChild(loader);
+    this.activeLoaders.add(loaderId);
 
     requestAnimationFrame(() => {
       loader.classList.add('loading-overlay--visible');
@@ -173,34 +92,39 @@ class LoadingManager {
   }
 
   hide(target, loaderId) {
-    const targetElement = typeof target === 'string' ? document.querySelector(target) : target;
-    const loader = targetElement.querySelector(`[data-loader-id="${loaderId}"]`);
-    
+    if (typeof target === 'string') {
+      target = document.querySelector(target);
+    }
+
+    const loader = target.querySelector(`[data-loader-id="${loaderId}"]`);
     if (loader) {
       loader.classList.add('loading-overlay--hiding');
       this.activeLoaders.delete(loaderId);
       
       setTimeout(() => {
         if (loader.parentNode) {
-          targetElement.removeChild(loader);
+          target.removeChild(loader);
         }
       }, 300);
     }
   }
 
   hideAll() {
-    this.activeLoaders.forEach(({ element, target }, id) => {
-      this.hide(target, id);
+    this.activeLoaders.forEach(id => {
+      const loader = document.querySelector(`[data-loader-id="${id}"]`);
+      if (loader) {
+        this.hide(loader.parentNode, id);
+      }
     });
   }
 }
 
-// Enhanced table manager with optimized rendering
+// Enhanced table manager with advanced features
 class TableManager {
   constructor(containerId, searchInputId, clearIconId, options = {}) {
-    this.container = document.getElementById(containerId);
-    this.searchInput = document.getElementById(searchInputId);
-    this.clearIcon = document.getElementById(clearIconId);
+    this.container = document.querySelector(`#${containerId}`);
+    this.searchInput = document.querySelector(`#${searchInputId}`);
+    this.clearIcon = document.querySelector(`#${clearIconId}`);
     this.options = {
       sortable: true,
       filterable: true,
@@ -269,7 +193,7 @@ class TableManager {
       <tr data-host="${host.toLowerCase()}" role="row">
         <td class="service-cell" role="gridcell">
           <div class="service-info">
-            <span class="service-name">${this._escapeHtml(host)}</span>
+            <span class="service-name">${host}</span>
           </div>
         </td>
         ${providers.map(provider => `
@@ -287,17 +211,6 @@ class TableManager {
     `).join('');
   }
 
-  _escapeHtml(text) {
-    const map = {
-      '&': '&amp;',
-      '<': '<',
-      '>': '>',
-      '"': '&quot;',
-      "'": '&#039;'
-    };
-    return text.replace(/[&<>"']/g, m => map[m]);
-  }
-
   _setupSearchFunctionality() {
     const handleSearch = Utils.debounce(() => {
       const searchTerm = this.searchInput.value.toLowerCase().trim();
@@ -375,7 +288,7 @@ class TableManager {
   }
 
   _handleSort(header) {
-    const column = header.dataset.column;
+    const column = header.getAttribute('data-column');
     const currentDirection = this.currentSort.column === column ? this.currentSort.direction : 'asc';
     const newDirection = currentDirection === 'asc' ? 'desc' : 'asc';
     
@@ -460,12 +373,12 @@ class TableManager {
   }
 }
 
-// Enhanced comparison manager with optimized rendering
+// Enhanced comparison manager
 class ComparisonManager {
   constructor(containerId, select1Id, select2Id, data) {
-    this.container = document.getElementById(containerId);
-    this.select1 = document.getElementById(select1Id);
-    this.select2 = document.getElementById(select2Id);
+    this.container = document.querySelector(`#${containerId}`);
+    this.select1 = document.querySelector(`#${select1Id}`);
+    this.select2 = document.querySelector(`#${select2Id}`);
     this.data = data;
     this.isComparing = false;
 
@@ -524,18 +437,18 @@ class ComparisonManager {
     
     this.container.innerHTML = `
       <div class="comparison-header">
-        <h3>Comparing ${this._escapeHtml(provider1)} vs ${this._escapeHtml(provider2)}</h3>
+        <h3>Comparing ${provider1} vs ${provider2}</h3>
         <div class="comparison-stats">
           <div class="stat">
             <span class="stat-label">Shared Support</span>
             <span class="stat-value">${comparisonData.shared}</span>
           </div>
           <div class="stat">
-            <span class="stat-label">${this._escapeHtml(provider1)} Only</span>
+            <span class="stat-label">${provider1} Only</span>
             <span class="stat-value">${comparisonData.provider1Only}</span>
           </div>
           <div class="stat">
-            <span class="stat-label">${this._escapeHtml(provider2)} Only</span>
+            <span class="stat-label">${provider2} Only</span>
             <span class="stat-value">${comparisonData.provider2Only}</span>
           </div>
         </div>
@@ -569,8 +482,8 @@ class ComparisonManager {
           <thead>
             <tr>
               <th>Service Name</th>
-              <th class="provider-header ${provider1.toLowerCase()}">${this._escapeHtml(provider1)}</th>
-              <th class="provider-header ${provider2.toLowerCase()}">${this._escapeHtml(provider2)}</th>
+              <th class="provider-header ${provider1.toLowerCase()}">${provider1}</th>
+              <th class="provider-header ${provider2.toLowerCase()}">${provider2}</th>
               <th>Status</th>
             </tr>
           </thead>
@@ -614,7 +527,7 @@ class ComparisonManager {
 
       return `
         <tr class="comparison-row ${statusClass}" data-status="${statusClass}">
-          <td class="service-name">${this._escapeHtml(host)}</td>
+          <td class="service-name">${host}</td>
           <td class="support-status ${support1 ? 'supported' : 'not-supported'}">
             <span class="status-indicator" aria-label="${support1 ? 'Supported' : 'Not supported'}">
               ${support1 ? 
@@ -632,24 +545,13 @@ class ComparisonManager {
             </span>
           </td>
           <td class="status-text">
-            <span class="status-badge ${statusClass}">${this._escapeHtml(statusText)}</span>
+            <span class="status-badge ${statusClass}">${statusText}</span>
           </td>
         </tr>
       `;
     }).join('');
   }
 
-  _escapeHtml(text) {
-    const map = {
-      '&': '&amp;',
-      '<': '<',
-      '>': '>',
-      '"': '&quot;',
-      "'": '&#039;'
-    };
-    return text.replace(/[&<>"']/g, m => map[m]);
-  }
-
   _calculateComparisonStats(provider1, provider2) {
     let shared = 0;
     let provider1Only = 0;
@@ -685,7 +587,7 @@ class ComparisonManager {
     const rows = this.container.querySelectorAll('.comparison-row');
     
     rows.forEach(row => {
-      const status = row.dataset.status;
+      const status = row.getAttribute('data-status');
       let show = true;
       
       switch (filter) {
@@ -776,10 +678,10 @@ class ComparisonManager {
   }
 }
 
-// Enhanced pricing manager with optimized rendering
+// Enhanced pricing manager
 class PricingManager {
   constructor(containerId) {
-    this.container = document.getElementById(`${containerId}-table-container`);
+    this.container = document.querySelector(`#${containerId}-table-container`);
     this.currentData = null;
   }
 
@@ -801,7 +703,7 @@ class PricingManager {
               ${services.map(service => `
                 <th class="service-column">
                   <div class="service-header">
-                    <span class="service-name">${this._escapeHtml(service)}</span>
+                    <span class="service-name">${service}</span>
                   </div>
                 </th>
               `).join('')}
@@ -811,7 +713,7 @@ class PricingManager {
             ${data.plans.map((plan, index) => `
               <tr class="pricing-row ${index % 2 === 0 ? 'even' : 'odd'}">
                 <td class="plan-name">
-                  <strong>${this._escapeHtml(plan.name)}</strong>
+                  <strong>${plan.name}</strong>
                 </td>
                 ${services.map(service => {
                   const price = plan[service];
@@ -820,7 +722,7 @@ class PricingManager {
                   return `
                     <td class="price-cell ${isNumeric ? 'numeric-price' : 'text-price'}">
                       <div class="price-content">
-                        <span class="price-value">${this._escapeHtml(price)}</span>
+                        <span class="price-value">${price}</span>
                         ${isNumeric ? '<span class="price-period">/month</span>' : ''}
                       </div>
                     </td>
@@ -836,17 +738,6 @@ class PricingManager {
     this._setupPricingFeatures();
   }
 
-  _escapeHtml(text) {
-    const map = {
-      '&': '&amp;',
-      '<': '<',
-      '>': '>',
-      '"': '&quot;',
-      "'": '&#039;'
-    };
-    return text.replace(/[&<>"']/g, m => map[m]);
-  }
-
   _setupPricingFeatures() {
     // Add hover effects for better UX
     const priceCells = this.container.querySelectorAll('.price-cell');
@@ -874,7 +765,7 @@ class PricingManager {
   }
 }
 
-// Performance monitor with optimized metrics collection
+// Performance monitor
 class PerformanceMonitor {
   constructor() {
     this.metrics = {
@@ -904,11 +795,10 @@ class PerformanceMonitor {
 }
 
 // Global instances
-const notificationManager = new NotificationManager();
 const loadingManager = new LoadingManager();
 const performanceMonitor = new PerformanceMonitor();
 
-// Enhanced application initialization with optimized async handling
+// Enhanced application initialization
 document.addEventListener('DOMContentLoaded', async () => {
   performanceMonitor.markDOMReady();
 
@@ -963,7 +853,6 @@ document.addEventListener('DOMContentLoaded', async () => {
       new ComparisonManager('compare-table-container', 'provider1', 'provider2', fileHostsData.value);
     } else {
       loadingManager.hide('#file-hosts-table-container', loaderId1);
-      notificationManager.show('Failed to load file hosts data', 'error');
       console.error('File hosts error:', fileHostsData.reason);
     }
 
@@ -972,7 +861,6 @@ document.addEventListener('DOMContentLoaded', async () => {
       adultHostsTable.generateTable(adultHostsData.value);
     } else {
       loadingManager.hide('#adult-hosts-table-container', loaderId2);
-      notificationManager.show('Failed to load adult hosts data', 'error');
       console.error('Adult hosts error:', adultHostsData.reason);
     }
 
@@ -981,7 +869,6 @@ document.addEventListener('DOMContentLoaded', async () => {
       pricingManager.generatePricingTable(pricingData.value);
     } else {
       loadingManager.hide('#pricing-table-container', loaderId3);
-      notificationManager.show('Failed to load pricing data', 'error');
       console.error('Pricing error:', pricingData.reason);
     }
 
@@ -995,11 +882,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     setupOfflineDetection();
     
     performanceMonitor.markFullyLoaded();
-    notificationManager.show('Application loaded successfully', 'success', 2000);
 
   } catch (error) {
     console.error('Critical error initializing application:', error);
-    notificationManager.show('Failed to initialize application', 'error');
     loadingManager.hideAll();
   }
 });
@@ -1012,8 +897,8 @@ function setupURLComparison() {
   
   if (provider1 && provider2) {
     setTimeout(() => {
-      const select1 = document.getElementById('provider1');
-      const select2 = document.getElementById('provider2');
+      const select1 = document.querySelector('#provider1');
+      const select2 = document.querySelector('#provider2');
       
       if (select1 && select2) {
         select1.value = provider1;
@@ -1033,22 +918,20 @@ function setupScrollAnimations() {
 // Offline detection
 function setupOfflineDetection() {
   window.addEventListener('online', () => {
-    notificationManager.show('Connection restored', 'success', 3000);
+    console.log('Connection restored');
   });
 
   window.addEventListener('offline', () => {
-    notificationManager.show('You are offline. Some features may not work.', 'warning', 5000);
+    console.log('You are offline. Some features may not work.');
   });
 }
 
 // Enhanced error boundary
 window.addEventListener('error', (event) => {
   console.error('Global error:', event.error);
-  notificationManager.show('An unexpected error occurred', 'error');
 });
 
 window.addEventListener('unhandledrejection', (event) => {
   console.error('Unhandled promise rejection:', event.reason);
-  notificationManager.show('A network error occurred', 'error');
   event.preventDefault();
 });
\ No newline at end of file