diff --git a/dist/css/styles.css b/dist/css/styles.css
index af02dec..dc939c2 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -1,1379 +1,1973 @@
-[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);
-    --primary: #818cf8;
-    --primary-hover: #a5b4fc;
-    --primary-light: #c7d2fe;
-    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .4), 0 1px 2px -1px rgb(0 0 0 / .4);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .4);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .4), 0 8px 10px -6px rgb(0 0 0 / .4);
-    --shadow-focus: 0 0 0 3px rgb(129 140 248 / .2)
+/* ===== 1. CSS VARIABLES & THEMING ===== */
+:root {
+  /* Core Colors */
+  --primary: #6366f1;
+  --primary-hover: #4f46e5;
+  --primary-light: #a5b4fc;
+  --primary-dark: #3730a3;
+  --accent: #8b5cf6;
+  --success: #10b981;
+  --warning: #66512e;
+  --error: #ef4444;
+  --info: #2c6ace;
+
+  /* Grayscale */
+  --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 Colors */
+  --text-primary: var(--gray-900);
+  --text-secondary: var(--gray-600);
+  --text-tertiary: var(--gray-500);
+  --text-muted: var(--gray-400);
+
+  /* Background Colors */
+  --bg-primary: #fff;
+  --bg-secondary: var(--gray-50);
+  --bg-tertiary: var(--gray-100);
+  --bg-elevated: #fff;
+
+  /* Borders */
+  --border-primary: var(--gray-200);
+  --border-secondary: var(--gray-300);
+  --border-focus: var(--primary);
+
+  /* Layout */
+  --container-max: 1400px;
+  --header-height: 5rem;
+  --content-max: 1200px;
+
+  /* Spacing (using CSS custom properties for consistency) */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 0.75rem;
+  --space-lg: 1rem;
+  --space-xl: 1.25rem;
+  --space-2xl: 1.5rem;
+  --space-3xl: 2rem;
+  --space-4xl: 2.5rem;
+  --space-5xl: 3rem;
+  --space-6xl: 4rem;
+  --space-7xl: 5rem;
+  --space-8xl: 6rem;
+
+  /* Typography */
+  --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;
+  --text-6xl: 3.75rem;
+
+  /* Font Weights */
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+
+  /* Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --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.15);
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
 }
 
-img,
-video,
-canvas {
-    max-width: 100%;
-    height: auto
+/* Dark Theme Variables */
+[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);
+  --primary: #818cf8;
+  --primary-hover: #a5b4fc;
+  --primary-light: #c7d2fe;
+  --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);
+}
+
+/* ===== 2. RESET & BASE STYLES ===== */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+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;
+  font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv11';
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  min-height: 100vh;
+  margin: 0;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+img, video, canvas {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
 }
 
 a:hover {
-    color: var(--primary-hover)
+  color: var(--primary-hover);
+}
+
+:focus {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
 }
 
 :focus:not(:focus-visible) {
-    outline: none
+  outline: none;
+}
+
+/* Accessibility */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
 }
 
 .skip-link:focus {
-    position: fixed;
-    left: var(--space-lg);
-    top: var(--space-lg);
-    width: auto;
-    height: auto;
-    padding: var(--space-sm) var(--space-md);
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    border: 2px solid var(--border-focus);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
-    z-index: 9999
+  position: fixed;
+  left: var(--space-lg);
+  top: var(--space-lg);
+  width: auto;
+  height: auto;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border: 2px solid var(--border-focus);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  z-index: 9999;
+}
+
+/* Layout */
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: 0 var(--space-2xl);
+  width: 100%;
+}
+
+.content-container {
+  max-width: var(--content-max);
+  margin: 0 auto;
+}
+
+/* ===== 3. HEADER & NAVIGATION ===== */
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(16px) saturate(180%);
+  border-bottom: 1px solid var(--border-primary);
+  height: var(--header-height);
 }
 
 [data-theme="dark"] .site-header {
-    background: rgba(15, 23, 42, .85)
+  background: rgba(15, 23, 42, 0.85);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative; /* Important for containing absolutely positioned children */
+  height: var(--header-height);
+  gap: var(--space-4xl);
+}
+
+.site-title {
+  display: flex;
+  flex-shrink: 0; /* Prevent shrinking */
+  align-items: center;
+  gap: var(--space-md);
+  font-size: var(--text-xl);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
+  text-decoration: none;
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-fast);
 }
 
 .site-title:hover {
-    color: var(--primary);
-    background: var(--bg-secondary);
-    transform: translateY(-1px)
+  color: var(--primary);
+  background: var(--bg-secondary);
+  transform: translateY(-1px);
 }
 
 .logo-icon {
-    transition: transform var(--transition-normal)
+  width: 28px;
+  height: 28px;
+  color: var(--primary);
+  transition: transform var(--transition-normal);
 }
 
 .site-title:hover .logo-icon {
-    transform: rotate(-5deg) scale(1.1)
+  transform: rotate(-5deg) scale(1.1);
+}
+
+/* Main Navigation (Desktop) */
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  /* Fix for potential flexbox glitches with absolutely positioned children */
+  position: relative;
+  z-index: 1; /* Ensure it's above other header content but below mobile nav */
 }
 
 .nav-link {
-    transition: all var(--transition-fast)
-}
-
-/* Active state (scrollspy) */
-.nav-link.active {
-    color: var(--primary);
-    background: var(--bg-secondary);
-    font-weight: var(--font-semibold);
-}
-
-/* Improved hover/focus visible states */
-.nav-link:focus-visible, .btn:focus-visible, .referral-card:focus-visible, .speed-card:focus-visible, .status-card:focus-visible, .benefit-card:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(99 102 241 / .25);
-}
-
-.nav-link:hover:not(.active) {
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-md) var(--space-xl);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  border-radius: var(--radius-lg);
+  white-space: nowrap;
+  transition: all var(--transition-fast);
 }
 
 .nav-link::before {
-    transition: all var(--transition-fast)
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: var(--primary);
+  border-radius: var(--radius-full);
+  transform: translateX(-50%);
+  transition: all var(--transition-fast);
 }
 
 .nav-link:hover {
-    color: var(--primary);
-    background: var(--bg-secondary)
+  color: var(--primary);
+  background: var(--bg-secondary);
 }
 
 .nav-link:hover::before {
-    width: 80%
+  width: 80%;
 }
 
+.nav-link.active {
+  color: var(--primary);
+  background: var(--bg-secondary);
+  font-weight: var(--font-semibold);
+}
+
+/* Focus Styles */
+.nav-link:focus-visible,
+.btn:focus-visible,
+.referral-card:focus-visible,
+.speed-card:focus-visible,
+.status-card:focus-visible,
+.benefit-card:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(99 102 241 / 0.25);
+}
+
+.nav-link:hover:not(.active) {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+/* Dark Mode Toggle */
 .dark-mode-toggle {
-    cursor: pointer;
-    transition: all var(--transition-fast)
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 2px solid var(--border-primary);
+  border-radius: var(--radius-full);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  flex-shrink: 0; /* Prevent shrinking */
+  cursor: pointer;
+  transition: all var(--transition-fast);
 }
 
 .dark-mode-toggle:hover {
-    background: var(--bg-secondary);
-    border-color: var(--primary);
-    transform: scale(1.05)
+  background: var(--bg-secondary);
+  border-color: var(--primary);
+  transform: scale(1.05);
 }
 
-/* Mobile navigation toggle */
-.nav-toggle {
-    display: none;
-    flex-direction: column;
-    justify-content: center;
-    gap: 5px;
-    width: 48px;
-    height: 48px;
-    background: var(--bg-primary);
-    border: 2px solid var(--border-primary);
-    border-radius: var(--radius-full);
-    cursor: pointer;
-    position: relative;
-    transition: all var(--transition-fast);
-}
-.nav-toggle-bar {
-    width: 22px;
-    height: 2px;
-    background: var(--text-primary);
-    border-radius: 2px;
-    transition: all var(--transition-fast);
-    margin: 0 auto;
-}
-.nav-open .nav-toggle-bar:nth-child(1){transform: translateY(7px) rotate(45deg);}
-.nav-open .nav-toggle-bar:nth-child(2){opacity:0;}
-.nav-open .nav-toggle-bar:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
-
-body:not(.js-ready) .header-nav {transition:none !important;}
-
-.nav-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,.4);
-    backdrop-filter: blur(2px);
-    z-index: 90;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity .3s;
-}
-.nav-open #navOverlay {
-    opacity: 1;
-    visibility: visible;
+.sun-icon,
+.moon-icon {
+  width: 20px;
+  height: 20px;
+  transition: opacity var(--transition-fast);
 }
 
-/* Mobile nav panel */
-@media (max-width: 900px) {
-    .nav-toggle {display: inline-flex;}
-    .header-nav {
-        position: fixed;
-        top: var(--header-height);
-        right: 0;
-        width: min(320px, 80%);
-        background: var(--bg-primary);
-        border-left: 1px solid var(--border-primary);
-        border-bottom: 1px solid var(--border-primary);
-        box-shadow: var(--shadow-lg);
-        padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-sm);
-        max-height: calc(100vh - var(--header-height));
-        overflow-y: auto;
-    transform: translate3d(100%,0,0);
-    transition: transform .4s cubic-bezier(.65,.05,.36,1);
-        z-index: 120;
-    }
-    .header-nav[data-open="true"] {
-    transform: translate3d(0,0,0);
-    }
-    body.nav-open {overflow:hidden;}
-    .nav-link {font-size: var(--text-base); padding: var(--space-md) var(--space-lg);}    
-    .nav-link::before {display:none;}
-    .dark-mode-toggle {order: 3;}
-}
-
-/* Hero meta badges */
-.hero-meta {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: var(--space-sm);
-    margin-bottom: var(--space-3xl);
-}
-.hero-badge {
-    --badge-bg: linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));
-    display: inline-flex;
-    align-items: center;
-    gap: .4ch;
-    padding: var(--space-sm) var(--space-md);
-    font-size: var(--text-xs);
-    font-weight: var(--font-medium);
-    letter-spacing: .05em;
-    text-transform: uppercase;
-    background: var(--badge-bg);
-    color: var(--text-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-full);
-    position: relative;
-    overflow: hidden;
-}
-.hero-badge::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%);
-    opacity: .4;
-    pointer-events: none;
-}
-
-/* Performance: hint GPU for frequently animated elements */
-.btn, .nav-toggle, .header-nav, .back-to-top, .benefit-card, .status-card, .referral-card, .speed-card {will-change: transform;}
-
-/* Reduced motion adjustments */
-@media (prefers-reduced-motion: reduce) {
-    .header-nav, .nav-toggle-bar, .btn::before, .benefit-card, .status-card, .referral-card, .speed-card, .back-to-top {transition: none !important; animation: none !important;}
-}
-
-@media (max-width: 600px) {
-    .hero-meta {margin-bottom: var(--space-2xl);}    
-    .hero-badge {font-size: 10px;}
+.moon-icon {
+  display: none;
 }
 
 [data-theme="dark"] .sun-icon {
-    display: none
+  display: none;
 }
 
 [data-theme="dark"] .moon-icon {
-    display: block
+  display: block;
+}
+
+/* Mobile Navigation Toggle */
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 48px;
+  height: 48px;
+  background: var(--bg-primary);
+  border: 2px solid var(--border-primary);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  position: relative;
+  transition: all var(--transition-fast);
+  flex-shrink: 0; /* Prevent shrinking */
+  z-index: 110; /* Ensure it's clickable above other elements */
+}
+
+.nav-toggle-bar {
+  width: 22px;
+  height: 2px;
+  background: var(--text-primary);
+  border-radius: 2px;
+  transition: all var(--transition-fast);
+  margin: 0 auto;
+  transform-origin: center;
+}
+
+.nav-open .nav-toggle-bar:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.nav-open .nav-toggle-bar:nth-child(2) {
+  opacity: 0;
+}
+
+.nav-open .nav-toggle-bar:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+/* Mobile Navigation Menu */
+.header-nav {
+  /* Default styles for desktop */
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+/* Mobile Navigation Overlay */
+.nav-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+  z-index: 90; /* Below the nav menu */
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease;
+  pointer-events: none; /* Prevent interaction when hidden */
+}
+
+.nav-open #navOverlay {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto; /* Allow interaction when visible */
+}
+
+/* Mobile Styles (Critical Fix Area) */
+@media (max-width: 900px) {
+  .nav-toggle {
+    display: inline-flex; /* Show the toggle button */
+  }
+
+  /* Hide desktop navigation links by default on mobile */
+  .header-nav {
+    display: none;
+  }
+
+  /* Active state for mobile navigation - Show the menu */
+  .nav-open .header-nav {
+    display: flex; /* Make it visible */
+    position: fixed;
+    top: var(--header-height);
+    right: 0;
+    width: min(320px, 80%);
+    background: var(--bg-primary);
+    border-left: 1px solid var(--border-primary);
+    border-bottom: 1px solid var(--border-primary);
+    box-shadow: var(--shadow-lg);
+    padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
+    flex-direction: column;
+    gap: var(--space-sm);
+    max-height: calc(100vh - var(--header-height));
+    overflow-y: auto;
+    /* Critical Fix: Use translate3d for hardware acceleration and isolation */
+    transform: translate3d(100%, 0, 0);
+    transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
+    z-index: 120; /* Above overlay */
+    /* Ensure it doesn't affect the flex layout of header-content */
+    position: fixed;
+    /* Isolate the animation context */
+    will-change: transform;
+  }
+
+  /* Active state for the menu being open */
+  .nav-open .header-nav[data-open="true"] {
+    transform: translate3d(0, 0, 0);
+  }
+
+  /* Prevent body scroll when menu is open */
+  body.nav-open {
+    overflow: hidden;
+  }
+
+  /* Style links for mobile */
+  .nav-open .nav-link {
+    font-size: var(--text-base);
+    padding: var(--space-md) var(--space-lg);
+    width: 100%;
+    text-align: left;
+  }
+
+  /* Hide the underline pseudo-element on mobile */
+  .nav-open .nav-link::before {
+    display: none;
+  }
+
+  /* Ensure the dark mode toggle is correctly placed in the header flex container */
+  .dark-mode-toggle {
+    display: flex;
+    flex: 0 0 auto; /* Don't grow or shrink, keep original size */
+    width: 44px;
+    height: 44px;
+    order: 3; /* Move it to the end if needed by layout */
+    align-self: center; /* Align within the flex line */
+    z-index: 110; /* Ensure it's clickable */
+  }
+
+  /* Disable transitions initially to prevent glitches on page load */
+  body:not(.js-ready) .header-nav,
+  body:not(.js-ready) .nav-toggle-bar,
+  body:not(.js-ready) .nav-overlay {
+    transition: none !important;
+  }
+}
+
+/* ===== 4. MAIN CONTENT SECTIONS ===== */
+/* Hero Section */
+.hero-section {
+  position: relative;
+  padding: var(--space-8xl) 0 var(--space-7xl);
+  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.08) 0%, transparent 50%),
+    radial-gradient(circle at 70% 80%, rgb(139 92 246 / 0.05) 0%, transparent 50%);
 }
 
 [data-theme="dark"] .hero-section::before {
-    background: radial-gradient(circle at 30% 20%, rgb(129 140 248 / .12) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgb(196 181 253 / .08) 0%, transparent 50%)
+  background:
+    radial-gradient(circle at 30% 20%, rgb(129 140 248 / 0.12) 0%, transparent 50%),
+    radial-gradient(circle at 70% 80%, rgb(196 181 253 / 0.08) 0%, transparent 50%);
+}
+
+.hero-content {
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto;
+  position: relative;
+  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-2xl);
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 [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
+  background: linear-gradient(135deg, var(--primary-light) 0%, #c4b5fd 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.btn::before {
-    transition: left .5s
+.hero-description {
+  font-size: clamp(var(--text-lg), 4vw, var(--text-xl));
+  color: var(--text-secondary);
+  margin: 0 0 var(--space-5xl);
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.6;
 }
 
-.btn:hover::before {
-    left: 100%
+.hero-actions {
+  display: flex;
+  gap: var(--space-lg);
+  justify-content: center;
+  margin-bottom: var(--space-6xl);
+  flex-wrap: wrap;
 }
 
-.btn-primary:hover {
-    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg)
+.hero-stats {
+  display: flex;
+  gap: var(--space-5xl);
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
-.btn-secondary:hover {
-    border-color: var(--primary);
-    color: var(--primary);
-    background: var(--bg-secondary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md)
+.stat-item {
+  text-align: center;
+  position: relative;
+}
+
+.stat-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  right: calc(-1 * var(--space-2xl));
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 50px;
+  background: var(--border-primary);
+}
+
+.stat-number {
+  display: block;
+  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
+  font-weight: var(--font-extrabold);
+  margin-bottom: var(--space-sm);
+  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.stat-label {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: var(--font-medium);
+}
+
+/* Section General Styles */
+.section {
+  padding: var(--space-6xl) 0;
+  position: relative;
 }
 
 .section:nth-child(even) {
-    background: var(--bg-secondary)
+  background: var(--bg-secondary);
 }
 
+.section-header {
+  text-align: center;
+  margin-bottom: var(--space-2xl);
+}
+
+.section-title {
+  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
+  font-weight: var(--font-extrabold);
+  margin: 0 0 var(--space-2xl);
+  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: 800px;
+  margin-inline: auto;
+  line-height: 1.7;
+}
+
+.meta-chips {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: center;
+  margin-top: var(--space-xl);
+  flex-wrap: wrap;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--radius-full);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-primary);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ===== 5. COMPONENTS ===== */
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-lg) var(--space-3xl);
+  border: 2px solid transparent;
+  border-radius: var(--radius-xl);
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  min-width: 160px;
+  justify-content: center;
+  transition: all var(--transition-fast);
+  will-change: transform;
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(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: white;
+  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-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);
+}
+
+/* Benefit Cards */
 .features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: var(--space-lg)
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--space-lg);
 }
 
 .benefit-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: var(--space-2xl);
-    background: var(--bg-elevated);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-lg);
-    transition: all var(--transition-normal);
-    min-height: 160px;
-    justify-content: center
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: var(--space-2xl);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-normal);
+  min-height: 160px;
+  justify-content: center;
+  will-change: transform;
 }
 
 .benefit-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);
 }
 
 .benefit-card .icon-badge {
-    width: 40px;
-    height: 40px;
-    color: var(--primary);
-    margin-bottom: var(--space-lg);
-    transition: transform var(--transition-normal)
+  width: 40px;
+  height: 40px;
+  color: var(--primary);
+  margin-bottom: var(--space-lg);
+  transition: transform var(--transition-normal);
 }
 
 .benefit-card:hover .icon-badge {
-    transform: scale(1.05)
+  transform: scale(1.05);
 }
 
 .benefit-card h3 {
-    margin: 0 0 var(--space-sm);
-    font-size: var(--text-base);
-    font-weight: var(--font-semibold);
-    color: var(--text-primary)
+  margin: 0 0 var(--space-sm);
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
 }
 
 .benefit-card p {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--text-xs);
-    line-height: 1.4
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  line-height: 1.4;
 }
 
+/* Alerts */
 .alert {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-md);
-    padding: var(--space-xl);
-    border-radius: var(--radius-xl);
-    margin: var(--space-xl) 0;
-    border: 1px solid var(--border-primary)
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-xl);
+  border-radius: var(--radius-xl);
+  margin: var(--space-xl) 0;
+  border: 1px solid var(--border-primary);
 }
 
 .alert-info {
-    background: rgba(59, 130, 246, .08);
-    border-color: rgba(59, 130, 246, .2);
-    color: var(--info)
+  background: rgba(59, 130, 246, 0.08);
+  border-color: rgba(59, 130, 246, 0.2);
+  color: var(--info);
 }
 
 .alert-warning {
-    background: rgba(245, 158, 11, .08);
-    border-color: rgba(44, 35, 19, .2);
-    color: var(--warning)
+  background: rgba(245, 158, 11, 0.08);
+  border-color: rgba(44, 35, 19, 0.2);
+  color: var(--warning);
 }
 
 .alert-icon {
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-    margin-top: 2px
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin-top: 2px;
 }
 
+/* Speed Section */
 .speed-section {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-2xl);
-    border: 1px solid var(--border-primary);
-    padding: var(--space-4xl);
-    margin: var(--space-3xl) 0
+  background: var(--bg-secondary);
+  border-radius: var(--radius-2xl);
+  border: 1px solid var(--border-primary);
+  padding: var(--space-4xl);
+  margin: var(--space-3xl) 0;
 }
 
 .speed-header {
-    text-align: center;
-    margin-bottom: var(--space-3xl)
+  text-align: center;
+  margin-bottom: var(--space-3xl);
 }
 
 .speed-header h3 {
-    margin: 0 0 var(--space-md);
-    font-size: var(--text-2xl);
-    font-weight: var(--font-bold);
-    color: var(--text-primary)
+  margin: 0 0 var(--space-md);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
 }
 
 .speed-header p {
-    margin: 0;
-    color: var(--text-secondary);
-    max-width: 600px;
-    margin-inline: auto
+  margin: 0;
+  color: var(--text-secondary);
+  max-width: 600px;
+  margin-inline: auto;
 }
 
 .speed-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--space-lg)
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-lg);
 }
 
 .speed-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-sm);
-    padding: var(--space-xl);
-    background: var(--bg-primary);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-lg);
-    text-decoration: none;
-    transition: all var(--transition-normal);
-    min-height: 120px
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-xl);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  transition: all var(--transition-normal);
+  min-height: 120px;
+  will-change: transform;
 }
 
 .speed-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);
 }
 
 .speed-card .service-name {
-    font-weight: var(--font-semibold);
-    color: var(--text-primary);
-    font-size: var(--text-base)
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  font-size: var(--text-base);
 }
 
 .speed-card .speed-test-label {
-    font-size: var(--text-sm);
-    color: var(--text-secondary)
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
 }
 
+/* Important Notes */
 .important-notes-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: var(--space-xl)
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: var(--space-xl);
 }
 
 .note-card {
-    display: flex;
-    gap: var(--space-lg);
-    padding: var(--space-2xl);
-    background: var(--bg-elevated);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-lg);
-    transition: all var(--transition-normal)
+  display: flex;
+  gap: var(--space-lg);
+  padding: var(--space-2xl);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-normal);
 }
 
 .note-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);
 }
 
 .note-icon {
-    width: 24px;
-    height: 24px;
-    color: var(--primary);
-    flex-shrink: 0;
-    margin-top: 2px
+  width: 24px;
+  height: 24px;
+  color: var(--primary);
+  flex-shrink: 0;
+  margin-top: 2px;
 }
 
 .note-content h3 {
-    margin: 0 0 var(--space-sm);
-    font-size: var(--text-lg);
-    font-weight: var(--font-semibold);
-    color: var(--text-primary)
+  margin: 0 0 var(--space-sm);
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
 }
 
 .note-content p {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    line-height: 1.5
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.5;
 }
 
+/* Resources */
 .resources-categories {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-    gap: var(--space-5xl)
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: var(--space-5xl);
 }
 
 .resource-category {
-    background: var(--bg-elevated);
-    border-radius: var(--radius-2xl);
-    padding: var(--space-4xl);
-    border: 1px solid var(--border-primary);
-    box-shadow: var(--shadow-sm)
+  background: var(--bg-elevated);
+  border-radius: var(--radius-2xl);
+  padding: var(--space-4xl);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-sm);
 }
 
 .resource-category h3 {
-    margin: 0 0 var(--space-2xl);
-    font-size: var(--text-2xl);
-    font-weight: var(--font-bold);
-    color: var(--primary);
-    display: flex;
-    align-items: center;
-    gap: var(--space-md)
+  margin: 0 0 var(--space-2xl);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
 }
 
 .resource-category-icon {
-    width: 28px;
-    height: 28px
+  width: 28px;
+  height: 28px;
 }
 
 .resource-list {
-    display: grid;
-    gap: var(--space-lg)
+  display: grid;
+  gap: var(--space-lg);
 }
 
 .resource-item {
-    display: block;
-    padding: var(--space-xl);
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-lg);
-    text-decoration: none;
-    transition: all var(--transition-normal)
+  display: block;
+  padding: var(--space-xl);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  transition: all var(--transition-normal);
 }
 
 .resource-item:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-    border-color: var(--primary);
-    background: var(--bg-primary)
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--primary);
+  background: var(--bg-primary);
 }
 
 .resource-item strong {
-    display: block;
-    color: var(--text-primary);
-    font-weight: var(--font-semibold);
-    margin-bottom: var(--space-sm);
-    font-size: var(--text-base)
+  display: block;
+  color: var(--text-primary);
+  font-weight: var(--font-semibold);
+  margin-bottom: var(--space-sm);
+  font-size: var(--text-base);
 }
 
 .resource-item span {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    line-height: 1.5
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.5;
 }
 
+/* Data Tables */
 .data-table-container {
-    background: var(--bg-elevated);
-    border-radius: var(--radius-2xl);
-    box-shadow: var(--shadow-lg);
-    border: 1px solid var(--border-primary);
-    margin: var(--space-3xl) 0;
-    overflow: hidden
+  background: var(--bg-elevated);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid var(--border-primary);
+  margin: var(--space-3xl) 0;
+  overflow: hidden;
 }
 
 .table-wrapper {
-    overflow-x: auto;
-    border-radius: var(--radius-2xl)
+  overflow-x: auto;
+  border-radius: var(--radius-2xl);
 }
 
 table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--text-sm);
-    min-width: 600px
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  min-width: 600px;
 }
 
 th,
 td {
-    padding: var(--space-lg) var(--space-xl);
-    text-align: left;
-    border-bottom: 1px solid var(--border-primary)
+  padding: var(--space-lg) var(--space-xl);
+  text-align: left;
+  border-bottom: 1px solid var(--border-primary);
 }
 
 th {
-    background: var(--primary);
-    color: white;
-    font-weight: var(--font-semibold);
-    text-transform: uppercase;
-    letter-spacing: .05em;
-    font-size: var(--text-xs);
-    position: sticky;
-    top: 0;
-    z-index: 10
+  background: var(--primary);
+  color: white;
+  font-weight: var(--font-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: var(--text-xs);
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
 tr:hover {
-    background: var(--bg-secondary)
+  background: var(--bg-secondary);
 }
 
 .pricing-table .service-name {
-    color: inherit;
+  color: inherit;
 }
 
 #file-hosts-table tr:nth-child(even),
 .enhanced-table tr:nth-child(even),
 .pricing-table tr:nth-child(even) {
-    background-color: var(--bg-tertiary);
+  background-color: var(--bg-tertiary);
 }
 
 #file-hosts-table th:first-child,
 #file-hosts-table td:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 2;
-    box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .06);
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  box-shadow: 2px 0 6px -4px rgba(0, 0, 0, 0.06);
 }
 
 #file-hosts-table td:first-child {
-    background-color: var(--bg-primary);
+  background-color: var(--bg-primary);
 }
 
 .filter-results {
-    text-align: center;
-    padding: .1em;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    font-family: 'Courier New', Courier, monospace;
+  text-align: center;
+  padding: 0.1em;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  font-family: 'Courier New', Courier, monospace;
 }
 
+/* Search */
 .search-section {
-    margin-bottom: var(--space-4xl)
+  margin-bottom: var(--space-4xl);
 }
 
 .search-container {
-    position: relative;
-    max-width: 500px;
-    margin: 0 auto
+  position: relative;
+  max-width: 500px;
+  margin: 0 auto;
 }
 
 .search-icon {
-    position: absolute;
-    left: var(--space-lg);
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--text-tertiary);
-    width: 20px;
-    height: 20px
+  position: absolute;
+  left: var(--space-lg);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-tertiary);
+  width: 20px;
+  height: 20px;
 }
 
 .search-input {
-    width: 100%;
-    padding: var(--space-lg) var(--space-5xl) var(--space-lg) var(--space-5xl);
-    border: 2px solid var(--border-primary);
-    border-radius: var(--radius-full);
-    font-size: var(--text-base);
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    outline: none;
-    transition: all var(--transition-fast)
+  width: 100%;
+  padding: var(--space-lg) var(--space-5xl) var(--space-lg) var(--space-5xl);
+  border: 2px solid var(--border-primary);
+  border-radius: var(--radius-full);
+  font-size: var(--text-base);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  outline: none;
+  transition: all var(--transition-fast);
 }
 
 .search-input:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1)
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
 .clear-icon {
-    position: absolute;
-    right: var(--space-lg);
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: var(--text-tertiary);
-    cursor: pointer;
-    padding: var(--space-sm);
-    border-radius: var(--radius-md);
-    opacity: 0;
-    visibility: hidden;
-    transition: all var(--transition-fast);
-    width: 20px;
-    height: 20px
+  position: absolute;
+  right: var(--space-lg);
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: var(--space-sm);
+  border-radius: var(--radius-md);
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-fast);
+  width: 20px;
+  height: 20px;
 }
 
-.search-input:not(:placeholder-shown)+.clear-icon {
-    opacity: 1;
-    visibility: visible
+.search-input:not(:placeholder-shown) + .clear-icon {
+  opacity: 1;
+  visibility: visible;
 }
 
 .clear-icon:hover {
-    background: var(--bg-secondary);
-    color: var(--text-primary)
+  background: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
+/* Status Grid */
 .status-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: var(--space-xl)
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-xl);
 }
 
 .status-card {
-    display: flex;
-    flex-direction: column;
-    padding: var(--space-2xl);
-    background: var(--bg-primary);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-xl);
-    text-decoration: none;
-    transition: all var(--transition-normal);
-    min-height: 120px
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-2xl);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-xl);
+  text-decoration: none;
+  transition: all var(--transition-normal);
+  min-height: 120px;
+  will-change: transform;
 }
 
 .status-card:hover {
-    border-color: var(--primary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg)
+  border-color: var(--primary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
 }
 
 .status-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--space-md)
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-md);
 }
 
 .service-name {
-    font-weight: var(--font-semibold);
-    color: var(--text-primary)
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
 }
 
 .service-status-indicator {
-    width: 12px;
-    height: 12px;
-    border-radius: var(--radius-full);
-    background: var(--success);
-    box-shadow: 0 0 0 2px rgba(16, 185, 129, .2)
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  background: var(--success);
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
 }
 
 .status-card p {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    line-height: 1.5
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.5;
 }
 
+/* Referral Section */
 .referral-section {
-    margin: var(--space-6xl) 0;
-    padding: var(--space-4xl);
-    background: var(--bg-secondary);
-    border-radius: var(--radius-2xl);
-    border: 1px solid var(--border-primary);
-    text-align: center
+  margin: var(--space-6xl) 0;
+  padding: var(--space-4xl);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-2xl);
+  border: 1px solid var(--border-primary);
+  text-align: center;
 }
 
 .referral-header h3 {
-    margin: 0 0 var(--space-md);
-    color: var(--text-primary);
-    font-size: var(--text-2xl);
-    font-weight: var(--font-bold)
+  margin: 0 0 var(--space-md);
+  color: var(--text-primary);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
 }
 
 .referral-header p {
-    margin: 0 auto var(--space-2xl);
-    color: var(--text-secondary);
-    max-width: 600px
+  margin: 0 auto var(--space-2xl);
+  color: var(--text-secondary);
+  max-width: 600px;
 }
 
 .referral-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: var(--space-lg);
-    justify-items: center
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-lg);
+  justify-items: center;
 }
 
 .referral-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-sm);
-    padding: var(--space-xl);
-    background: var(--bg-primary);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-lg);
-    text-decoration: none;
-    width: 100%;
-    max-width: 200px;
-    transition: all var(--transition-normal);
-    min-height: 100px
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-xl);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  width: 100%;
+  max-width: 200px;
+  transition: all var(--transition-normal);
+  min-height: 100px;
+  will-change: transform;
 }
 
 .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);
 }
 
 .referral-card .service-name {
-    font-weight: var(--font-semibold);
-    color: var(--text-primary);
-    font-size: var(--text-base)
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  font-size: var(--text-base);
 }
 
 .referral-badge,
 .speed-test-label {
-    font-size: var(--text-xs);
-    color: var(--primary);
-    background: rgba(99, 102, 241, .1);
-    padding: var(--space-xs) var(--space-sm);
-    border-radius: var(--radius-md);
-    font-weight: var(--font-medium);
-    text-transform: uppercase;
-    letter-spacing: .05em
+  font-size: var(--text-xs);
+  color: var(--primary);
+  background: rgba(99, 102, 241, 0.1);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-md);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
+/* Compare Section */
 .compare-controls {
-    display: flex;
-    align-items: end;
-    gap: var(--space-2xl);
-    margin-bottom: var(--space-4xl);
-    flex-wrap: wrap
+  display: flex;
+  align-items: end;
+  gap: var(--space-2xl);
+  margin-bottom: var(--space-4xl);
+  flex-wrap: wrap;
 }
 
 .compare-select-group {
-    flex: 1;
-    min-width: 250px
+  flex: 1;
+  min-width: 250px;
 }
 
 .compare-select-group label {
-    display: block;
-    margin-bottom: var(--space-sm);
-    font-weight: var(--font-medium);
-    color: var(--text-primary)
+  display: block;
+  margin-bottom: var(--space-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
 }
 
 .select-wrapper {
-    position: relative
+  position: relative;
 }
 
 select {
-    width: 100%;
-    padding: var(--space-md) var(--space-4xl) var(--space-md) var(--space-lg);
-    border: 2px solid var(--border-primary);
-    border-radius: var(--radius-lg);
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    font-size: var(--text-base);
-    cursor: pointer;
-    appearance: none;
-    transition: all var(--transition-fast)
+  width: 100%;
+  padding: var(--space-md) var(--space-4xl) var(--space-md) var(--space-lg);
+  border: 2px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: var(--text-base);
+  cursor: pointer;
+  appearance: none;
+  transition: all var(--transition-fast);
 }
 
 select:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1)
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
 .select-wrapper::after {
-    content: '';
-    position: absolute;
-    right: var(--space-lg);
-    top: 50%;
-    transform: translateY(-50%);
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid var(--text-tertiary);
-    pointer-events: none
+  content: '';
+  position: absolute;
+  right: var(--space-lg);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--text-tertiary);
+  pointer-events: none;
 }
 
 .compare-vs {
-    flex-shrink: 0;
-    font-size: var(--text-lg);
-    font-weight: var(--font-bold);
-    color: var(--primary);
-    background: var(--bg-secondary);
-    padding: var(--space-md) var(--space-xl);
-    border-radius: var(--radius-lg);
-    border: 2px solid var(--border-primary);
-    margin-bottom: var(--space-sm)
+  flex-shrink: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--font-bold);
+  color: var(--primary);
+  background: var(--bg-secondary);
+  padding: var(--space-md) var(--space-xl);
+  border-radius: var(--radius-lg);
+  border: 2px solid var(--border-primary);
+  margin-bottom: var(--space-sm);
 }
 
 .empty-state {
-    text-align: center;
-    padding: var(--space-6xl)
+  text-align: center;
+  padding: var(--space-6xl);
 }
 
 .empty-state-icon {
-    width: 64px;
-    height: 64px;
-    color: var(--text-tertiary);
-    margin: 0 auto var(--space-xl)
+  width: 64px;
+  height: 64px;
+  color: var(--text-tertiary);
+  margin: 0 auto var(--space-xl);
 }
 
 .empty-state h3 {
-    margin: 0 0 var(--space-md);
-    font-size: var(--text-xl);
-    color: var(--text-primary);
-    font-weight: var(--font-semibold)
+  margin: 0 0 var(--space-md);
+  font-size: var(--text-xl);
+  color: var(--text-primary);
+  font-weight: var(--font-semibold);
 }
 
 .empty-state p {
-    margin: 0;
-    color: var(--text-secondary)
+  margin: 0;
+  color: var(--text-secondary);
 }
 
 .loading-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-5xl);
-    color: var(--text-secondary)
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-5xl);
+  color: var(--text-secondary);
 }
 
 .loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid var(--border-primary);
-    border-top: 3px solid var(--primary);
-    border-radius: var(--radius-full);
-    animation: spin 1s linear infinite;
-    margin-bottom: var(--space-lg)
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--border-primary);
+  border-top: 3px solid var(--primary);
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
+  margin-bottom: var(--space-lg);
 }
 
 @keyframes spin {
-    0% {
-        transform: rotate(0deg)
-    }
-
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
-        /* Footer */
-        .site-footer {
-            background: var(--bg-secondary);
-            border-top: 1px solid var(--border-primary);
-            padding: var(--space-7xl) 0 var(--space-4xl);
-            margin-top: auto;
-        }
-
-        .footer-content {
-            display: grid;
-            grid-template-columns: 2fr 1fr 1fr 1fr;
-            gap: var(--space-5xl);
-            margin-bottom: var(--space-5xl);
-        }
-
-        .footer-section h4,
-        .footer-section h5 {
-            margin: 0 0 var(--space-xl);
-            font-size: var(--text-lg);
-            font-weight: var(--font-semibold);
-            color: var(--text-primary);
-        }
-
-        .footer-section h5 {
-            font-size: var(--text-base);
-            margin-bottom: var(--space-lg);
-        }
-
-        .footer-brand {
-            display: flex;
-            align-items: center;
-            gap: var(--space-md);
-            margin-bottom: var(--space-lg);
-        }
-
-        .footer-logo {
-            width: 32px;
-            height: 32px;
-            color: var(--primary);
-        }
-
-        .footer-brand h4 {
-            margin: 0;
-            font-size: var(--text-xl);
-            font-weight: var(--font-bold);
-        }
-
-        .footer-description {
-            margin: 0 0 var(--space-xl);
-            color: var(--text-secondary);
-            line-height: 1.6;
-            max-width: 300px;
-        }
-
-        .footer-stats {
-            display: flex;
-            gap: var(--space-lg);
-            flex-wrap: wrap;
-        }
-
-        .footer-stat {
-            display: inline-flex;
-            align-items: center;
-            padding: var(--space-xs) var(--space-md);
-            background: var(--bg-primary);
-            border: 1px solid var(--border-primary);
-            border-radius: var(--radius-full);
-            font-size: var(--text-xs);
-            font-weight: var(--font-medium);
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .footer-links {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .footer-links li {
-            margin-bottom: var(--space-md);
-        }
-
-        .footer-links a {
-            color: var(--text-secondary);
-            text-decoration: none;
-            transition: color var(--transition-fast);
-            font-size: var(--text-sm);
-            line-height: 1.5;
-        }
-
-        .footer-links a:hover {
-            color: var(--primary);
-        }
-
-        .footer-bottom {
-            padding-top: var(--space-4xl);
-            border-top: 1px solid var(--border-primary);
-        }
-
-        .footer-bottom-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-            gap: var(--space-3xl);
-        }
-
-        .footer-left p {
-            margin: 0 0 var(--space-sm);
-            color: var(--text-tertiary);
-            font-size: var(--text-sm);
-        }
-
-        .footer-disclaimer {
-            font-size: var(--text-xs) !important;
-            color: var(--text-muted) !important;
-            font-style: italic;
-        }
-
-        .footer-left a {
-            color: var(--primary);
-            text-decoration: none;
-        }
-
-        .footer-left a:hover {
-            text-decoration: underline;
-        }
-
-        .footer-right {
-            text-align: right;
-        }
-
-        .footer-meta {
-            display: flex;
-            align-items: center;
-            gap: var(--space-lg);
-        }
-
-        .last-updated {
-            font-size: var(--text-xs);
-            color: var(--text-muted);
-        }
-
-        .github-link {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 36px;
-            height: 36px;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-primary);
-            border-radius: var(--radius-md);
-            color: var(--text-secondary);
-            text-decoration: none;
-            transition: all var(--transition-fast);
-        }
-
-        .github-link:hover {
-            background: var(--primary);
-            color: white;
-            border-color: var(--primary);
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-md);
-        }.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)
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
+/* Comparison Specific Styles */
 .comparison-header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-lg);
-    padding: var(--space-2xl);
-    background: var(--bg-elevated);
-    border: 1px solid var(--border-primary);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-2xl)
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  padding: var(--space-2xl);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-2xl);
 }
 
 .comparison-header h3 {
-    margin: 0;
-    font-size: var(--text-xl);
-    font-weight: var(--font-semibold);
-    color: var(--text-primary);
-    text-align: center
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  text-align: center;
 }
 
 .comparison-stats {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-2xl);
-    flex-wrap: wrap
+  display: flex;
+  justify-content: center;
+  gap: var(--space-2xl);
+  flex-wrap: wrap;
 }
 
 .comparison-stats .stat {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    min-width: 80px
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  min-width: 80px;
 }
 
 .comparison-stats .stat-label {
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    margin-bottom: var(--space-xs);
-    text-transform: uppercase;
-    letter-spacing: .05em;
-    font-weight: var(--font-medium)
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: var(--font-medium);
 }
 
 .comparison-stats .stat-value {
-    font-size: var(--text-lg);
-    font-weight: var(--font-bold);
-    color: var(--primary)
+  font-size: var(--text-lg);
+  font-weight: var(--font-bold);
+  color: var(--primary);
 }
 
 .comparison-actions {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-md)
+  display: flex;
+  justify-content: center;
+  gap: var(--space-md);
 }
 
 .comparison-actions .btn {
-    padding: var(--space-sm) var(--space-lg);
-    font-size: var(--text-sm);
-    min-width: auto
+  padding: var(--space-sm) var(--space-lg);
+  font-size: var(--text-sm);
+  min-width: auto;
 }
 
 .comparison-filters {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-lg);
-    padding: var(--space-lg);
-    background: var(--bg-secondary);
-    border-radius: var(--radius-md);
-    margin-bottom: var(--space-2xl);
-    flex-wrap: wrap
+  display: flex;
+  justify-content: center;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-2xl);
+  flex-wrap: wrap;
 }
 
 .comparison-filters .filter-option {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    cursor: pointer;
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-    color: var(--text-secondary);
-    transition: color var(--transition-fast)
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  transition: color var(--transition-fast);
 }
 
 .comparison-filters .filter-option:hover {
-    color: var(--text-primary)
+  color: var(--text-primary);
 }
 
 .comparison-filters input[type="radio"] {
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    cursor: pointer
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
 }
 
-.comparison-filters input[type="radio"]:checked+span {
-    color: var(--primary);
-    font-weight: var(--font-semibold)
+.comparison-filters input[type="radio"]:checked + span {
+  color: var(--primary);
+  font-weight: var(--font-semibold);
 }
 
 .comparison-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: var(--space-lg)
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: var(--space-lg);
 }
 
 .comparison-table th,
 .comparison-table td {
-    padding: var(--space-md);
-    text-align: center;
-    border-bottom: 1px solid var(--border-primary)
+  padding: var(--space-md);
+  text-align: center;
+  border-bottom: 1px solid var(--border-primary);
 }
 
 .comparison-table th {
-    background: var(--bg-secondary);
-    font-weight: var(--font-semibold);
-    color: var(--text-primary)
+  background: var(--bg-secondary);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
 }
 
 .comparison-table .provider-header {
-    font-size: var(--text-lg);
-    font-weight: var(--font-bold)
+  font-size: var(--text-lg);
+  font-weight: var(--font-bold);
 }
 
 .comparison-row:hover {
-    background: var(--bg-secondary)
+  background: var(--bg-secondary);
 }
 
 .comparison-hiding {
-    opacity: 0;
-    transform: scale(.95);
-    transition: all var(--transition-normal)
+  opacity: 0;
+  transform: scale(0.95);
+  transition: all var(--transition-normal);
 }
 
-@media (max-width:1024px) {
-    .resources-categories {
-        grid-template-columns: 1fr
-    }
+/* ===== 6. FOOTER ===== */
+.site-footer {
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-primary);
+  padding: var(--space-7xl) 0 var(--space-4xl);
+  margin-top: auto;
 }
 
-@media (max-width:768px) {
-    .features-grid {
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-        gap: var(--space-md)
-    }
-
-    .benefit-card {
-        padding: var(--space-lg);
-        min-height: 140px
-    }
-
-    .benefit-card .icon-badge {
-        width: 32px;
-        height: 32px;
-        margin-bottom: var(--space-md)
-    }
-
-    .benefit-card h3 {
-        font-size: var(--text-sm)
-    }
-
-    .comparison-header {
-        padding: var(--space-lg);
-        gap: var(--space-md)
-    }
-
-    .comparison-stats {
-        gap: var(--space-lg)
-    }
-
-    .comparison-filters {
-        flex-direction: column;
-        gap: var(--space-md);
-        align-items: center
-    }
-
-    .compare-controls {
-        flex-direction: column;
-        gap: var(--space-xl)
-    }
-
-    .compare-select-group {
-        min-width: 100%
-    }
-
-    .important-notes-grid {
-        grid-template-columns: 1fr
-    }
-
-    .age-verification-actions {
-        flex-direction: column
-    }
-
-    .stepper li {
-        flex-direction: column;
-        text-align: center;
-        gap: var(--space-md)
-    }
-
-    .footer-content {
-        grid-template-columns: repeat(2, 1fr);
-        gap: var(--space-xl)
-    }
-
-    .footer-brand h3 {
-        font-size: var(--text-lg)
-    }
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: var(--space-5xl);
+  margin-bottom: var(--space-5xl);
 }
 
-@media (max-width:480px) {
-    .features-grid {
-        grid-template-columns: 1fr;
-        gap: var(--space-lg)
-    }
-
-    .benefit-card {
-        padding: var(--space-xl);
-        min-height: auto
-    }
-
-    .comparison-header h3 {
-        font-size: var(--text-lg)
-    }
-
-    .comparison-stats {
-        flex-direction: column;
-        gap: var(--space-md)
-    }
-
-    .comparison-filters {
-        gap: var(--space-sm)
-    }
-
-    .footer-content {
-        grid-template-columns: 1fr;
-        gap: var(--space-lg)
-    }
-
-    .footer-brand {
-        text-align: center;
-        padding-bottom: var(--space-lg);
-        border-bottom: 1px solid rgba(var(--text-rgb), 0.1);
-        margin-bottom: var(--space-lg)
-    }
-
-    .footer-links {
-        justify-content: center
-    }
-
-    .footer-links h4 {
-        text-align: center;
-        margin-bottom: var(--space-md)
-    }
-
-    .footer-bottom {
-        text-align: center
-    }
+.footer-section h4,
+.footer-section h5 {
+  margin: 0 0 var(--space-xl);
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
 }
 
+.footer-section h5 {
+  font-size: var(--text-base);
+  margin-bottom: var(--space-lg);
+}
+
+.footer-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+}
+
+.footer-logo {
+  width: 32px;
+  height: 32px;
+  color: var(--primary);
+}
+
+.footer-brand h4 {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: var(--font-bold);
+}
+
+.footer-description {
+  margin: 0 0 var(--space-xl);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  max-width: 300px;
+}
+
+.footer-stats {
+  display: flex;
+  gap: var(--space-lg);
+  flex-wrap: wrap;
+}
+
+.footer-stat {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: var(--space-md);
+}
+
+.footer-links a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.footer-links a:hover {
+  color: var(--primary);
+}
+
+.footer-bottom {
+  padding-top: var(--space-4xl);
+  border-top: 1px solid var(--border-primary);
+}
+
+.footer-bottom-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: var(--space-3xl);
+}
+
+.footer-left p {
+  margin: 0 0 var(--space-sm);
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+}
+
+.footer-disclaimer {
+  font-size: var(--text-xs) !important;
+  color: var(--text-muted) !important;
+  font-style: italic;
+}
+
+.footer-left a {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.footer-left a:hover {
+  text-decoration: underline;
+}
+
+.footer-right {
+  text-align: right;
+}
+
+.footer-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+.last-updated {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.github-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all var(--transition-fast);
+}
+
+.github-link:hover {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+/* ===== 7. UTILITY & GLOBAL COMPONENTS ===== */
+/* Back to Top Button */
+.back-to-top {
+  position: fixed;
+  bottom: var(--space-2xl);
+  right: var(--space-2xl);
+  width: 48px;
+  height: 48px;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  z-index: 50;
+  transition: all var(--transition-normal);
+  will-change: transform;
+}
+
+.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);
+}
+
+/* ===== 8. MEDIA QUERIES ===== */
+/* Large Desktop */
+@media (max-width: 1024px) {
+  .container {
+    padding: 0 var(--space-xl);
+  }
+
+  .resources-categories {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Tablet */
+@media (max-width: 768px) {
+  .header-nav {
+    display: none;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .hero-stats {
+    gap: var(--space-2xl);
+  }
+
+  .features-grid {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--space-md);
+  }
+
+  .benefit-card {
+    padding: var(--space-lg);
+    min-height: 140px;
+  }
+
+  .benefit-card .icon-badge {
+    width: 32px;
+    height: 32px;
+    margin-bottom: var(--space-md);
+  }
+
+  .benefit-card h3 {
+    font-size: var(--text-sm);
+  }
+
+  .comparison-header {
+    padding: var(--space-lg);
+    gap: var(--space-md);
+  }
+
+  .comparison-stats {
+    gap: var(--space-lg);
+  }
+
+  .comparison-filters {
+    flex-direction: column;
+    gap: var(--space-md);
+    align-items: center;
+  }
+
+  .compare-controls {
+    flex-direction: column;
+    gap: var(--space-xl);
+  }
+
+  .compare-select-group {
+    min-width: 100%;
+  }
+
+  .important-notes-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-content {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-xl);
+  }
+
+  .footer-brand h3 {
+    font-size: var(--text-lg);
+  }
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  .container {
+    padding: 0 var(--space-lg);
+  }
+
+  .section {
+    padding: var(--space-4xl) 0;
+  }
+
+  .stat-item:not(:last-child)::after {
+    display: none;
+  }
+
+  .features-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+  }
+
+  .benefit-card {
+    padding: var(--space-xl);
+    min-height: auto;
+  }
+
+  .comparison-header h3 {
+    font-size: var(--text-lg);
+  }
+
+  .comparison-stats {
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .comparison-filters {
+    gap: var(--space-sm);
+  }
+
+  .footer-content {
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+  }
+
+  .footer-brand {
+    text-align: center;
+    padding-bottom: var(--space-lg);
+    border-bottom: 1px solid rgba(var(--text-rgb), 0.1);
+    margin-bottom: var(--space-lg);
+  }
+
+  .footer-links {
+    justify-content: center;
+  }
+
+  .footer-links h4 {
+    text-align: center;
+    margin-bottom: var(--space-md);
+  }
+
+  .footer-bottom {
+    text-align: center;
+  }
+
+  .hero-meta {
+    margin-bottom: var(--space-2xl);
+  }
+
+  .hero-badge {
+    font-size: 10px;
+  }
+}
+
+/* Print Styles */
 @media print {
+  .site-header,
+  .hero-section,
+  .referral-section,
+  .site-footer,
+  .back-to-top,
+  .dark-mode-toggle {
+    display: none !important;
+  }
 
-    .site-header,
-    .hero-section,
-    .referral-section,
-    .site-footer,
-    .back-to-top,
-    .dark-mode-toggle {
-        display: none !important
-    }
-
-    .section {
-        page-break-inside: avoid
-    }
+  .section {
+    page-break-inside: avoid;
+  }
 }
 
-@media (pointer:coarse) {
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 
-    .nav-link:hover,
-    .btn:hover,
-    .status-card:hover,
-    .benefit-card:hover {
-        transform: none
-    }
+  html {
+    scroll-behavior: auto;
+  }
+
+  .header-nav,
+  .nav-toggle-bar,
+  .btn::before,
+  .benefit-card,
+  .status-card,
+  .referral-card,
+  .speed-card,
+  .back-to-top {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* High Contrast */
+@media (prefers-contrast: high) {
+  :root {
+    --border-primary: #000;
+    --text-secondary: #000;
+  }
+}
+
+/* Coarse Pointer (Touch Devices) */
+@media (pointer: coarse) {
+  .nav-link:hover,
+  .btn:hover,
+  .status-card:hover,
+  .benefit-card:hover {
+    transform: none;
+  }
 }
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index 18aefc8..36543ef 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,73 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Debrid Services Comparison - Compare Pricing & Hosts</title>
-  <meta name="description" content="Compare pricing and supported hosts across AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid & Deepbrid.">
-  <meta name="robots" content="index, follow">
-  <meta name="author" content="Fynks">
-  <meta name="google-site-verification" content="nlH9UKmiZsYOuMXXnRc9pKL-AW5rECWikqcUqzri-yQ">
-  <link rel="canonical" href="https://debrid-services-comparison.netlify.app/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <!-- Theme color per scheme -->
-  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
+    <title>Debrid Services Comparison - Compare Pricing & Hosts</title>
+    <meta name="description"
+        content="Compare pricing and supported hosts across AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid & Deepbrid.">
+    <meta name="robots" content="index, follow">
+    <meta name="author" content="Fynks">
+    <meta name="google-site-verification" content="nlH9UKmiZsYOuMXXnRc9pKL-AW5rECWikqcUqzri-yQ">
+    <link rel="canonical" href="https://debrid-services-comparison.netlify.app/">
 
-  <!-- Favicons -->
-  <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-  <link rel="icon" href="/favicon.ico" sizes="any">
-  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
-  <link rel="manifest" href="/site.webmanifest">
+    <!-- Theme color per scheme -->
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
 
-  <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" onload="this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"></noscript>
+    <!-- Favicons -->
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
 
-  <!-- Open Graph -->
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="https://debrid-services-comparison.netlify.app/">
-  <meta property="og:title" content="Debrid Services Comparison">
-  <meta property="og:description" content="Compare pricing and supported hosts across major debrid services. Find the best premium download service for your needs.">
-  <meta property="og:image" content="https://debrid-services-comparison.netlify.app/image.png">
-  <meta property="og:site_name" content="Debrid Services Comparison">
-  <meta property="og:locale" content="en_US">
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" as="style"
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+        onload="this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+    </noscript>
 
-  <!-- Twitter -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:url" content="https://debrid-services-comparison.netlify.app/">
-  <meta name="twitter:title" content="Debrid Services Comparison">
-  <meta name="twitter:description" content="Compare pricing and supported hosts across major debrid services. Find the best premium download service for your needs.">
-  <meta name="twitter:image" content="https://debrid-services-comparison.netlify.app/image.png">
-
-  <!-- Prefetch data for quick subsequent use (non-blocking) -->
-  <link rel="prefetch" href="/json/file-hosts.json" crossorigin>
-  <link rel="prefetch" href="/json/adult-hosts.json" crossorigin>
-  <link rel="prefetch" href="/json/pricing.json" crossorigin>
+    <!-- Prefetch data for quick subsequent use (non-blocking) -->
+    <link rel="prefetch" href="/json/file-hosts.json" crossorigin>
+    <link rel="prefetch" href="/json/adult-hosts.json" crossorigin>
+    <link rel="prefetch" href="/json/pricing.json" crossorigin>
+    <link as="style" rel="preload" href="css/styles.css">
 
     <script>
-        (function(){ 
-            try{ 
-                const saved=localStorage.getItem('theme'); 
-                const prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches; 
-                const theme=saved || (prefersDark ? 'dark' : 'light'); 
-                document.documentElement.setAttribute('data-theme', theme); 
-                document.documentElement.style.colorScheme=theme;
-            } catch(e){}
+        (function () {
+            try {
+                const saved = localStorage.getItem('theme');
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                const theme = saved || (prefersDark ? 'dark' : 'light');
+                document.documentElement.setAttribute('data-theme', theme);
+                document.documentElement.style.colorScheme = theme;
+            } catch (e) { }
         })(); 
     </script>
-    <style>
-        :root{--primary: #6366f1;--primary-hover: #4f46e5;--primary-light: #a5b4fc;--primary-dark: #3730a3;--accent: #8b5cf6;--success: #10b981;--warning: #66512e;--error: #ef4444;--info: #2c6ace;--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);--container-max: 1400px;--header-height: 5rem;--content-max: 1200px;--space-xs: 0.25rem;--space-sm: 0.5rem;--space-md: 0.75rem;--space-lg: 1rem;--space-xl: 1.25rem;--space-2xl: 1.5rem;--space-3xl: 2rem;--space-4xl: 2.5rem;--space-5xl: 3rem;--space-6xl: 4rem;--space-7xl: 5rem;--space-8xl: 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;--text-6xl: 3.75rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--radius-sm: 0.25rem;--radius-md: 0.5rem;--radius-lg: 0.75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);--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.15)}*,*::before,*::after{box-sizing:border-box}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;font-feature-settings:'cv01','cv03','cv04','cv11';background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;margin:0;overflow-x:hidden}svg{max-width:100%;height:auto}a{color:var(--primary);text-decoration:none}:focus{outline:2px solid var(--border-focus);outline-offset:2px}.page-wrapper{min-height:100vh;display:flex;flex-direction:column}.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-2xl);width:100%}.content-container{max-width:var(--content-max);margin:0 auto}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.85);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--border-primary);height:var(--header-height)}.header-content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-4xl)}.site-title{display:flex;align-items:center;gap:var(--space-md);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);text-decoration:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg)}.logo-icon{width:28px;height:28px;color:var(--primary)}.header-nav{display:flex;align-items:center;gap:var(--space-xs)}.nav-link{position:relative;display:inline-flex;align-items:center;padding:var(--space-md) var(--space-xl);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-lg);white-space:nowrap}.nav-link::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--primary);border-radius:var(--radius-full);transform:translateX(-50%)}.dark-mode-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--border-primary);border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary)}.sun-icon,.moon-icon{width:20px;height:20px}.moon-icon{display:none}.hero-section{position:relative;padding:var(--space-8xl) 0 var(--space-7xl);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.08) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(139 92 246 / 0.05) 0%,transparent 50%)}.hero-content{text-align:center;max-width:900px;margin:0 auto;position:relative;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-2xl);color:var(--text-primary);letter-spacing:-0.02em}.gradient-text{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 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-5xl);max-width:700px;margin-left:auto;margin-right:auto;line-height:1.6}.hero-actions{display:flex;gap:var(--space-lg);justify-content:center;margin-bottom:var(--space-6xl);flex-wrap:wrap}.hero-stats{display:flex;gap:var(--space-5xl);justify-content:center;flex-wrap:wrap}.stat-item{text-align:center;position:relative}.stat-item:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * var(--space-2xl));top:50%;transform:translateY(-50%);width:1px;height:50px;background:var(--border-primary)}.stat-number{display:block;font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--font-extrabold);margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.1em;font-weight:var(--font-medium)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-lg) var(--space-3xl);border:2px solid transparent;border-radius:var(--radius-xl);font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;position:relative;overflow:hidden;min-width:160px;justify-content:center}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent)}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:white;box-shadow:var(--shadow-md)}.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-primary)}.section{padding:var(--space-6xl) 0;position:relative}.section:nth-child(even){background:var(--bg-secondary)}.section-header{text-align:center;margin-bottom:var(--space-2xl)}.section-title{font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--font-extrabold);margin:0 0 var(--space-2xl);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:800px;margin-inline:auto;line-height:1.7}.meta-chips{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-xl);flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-primary);font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:0.05em}.back-to-top{position:fixed;bottom:var(--space-2xl);right:var(--space-2xl);width:48px;height:48px;background:var(--primary);color:white;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(20px);z-index:50}@media (max-width:1024px){.container{padding:0 var(--space-xl)}}@media (max-width:768px){.header-nav{display:none}.hero-actions{flex-direction:column;align-items:center}.hero-stats{gap:var(--space-2xl)}}@media (max-width:480px){.container{padding:0 var(--space-lg)}.section{padding:var(--space-4xl) 0}.stat-item:not(:last-child)::after{display:none}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}}@media (prefers-contrast:high){:root{--border-primary: #000;--text-secondary: #000}}
-    </style>
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://debrid-services-comparison.netlify.app/">
+    <meta property="og:title" content="Debrid Services Comparison">
+    <meta property="og:description"
+        content="Compare pricing and supported hosts across major debrid services. Find the best premium download service for your needs.">
+    <meta property="og:image" content="https://debrid-services-comparison.netlify.app/image.png">
+    <meta property="og:site_name" content="Debrid Services Comparison">
+    <meta property="og:locale" content="en_US">
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="https://debrid-services-comparison.netlify.app/">
+    <meta name="twitter:title" content="Debrid Services Comparison">
+    <meta name="twitter:description"
+        content="Compare pricing and supported hosts across major debrid services. Find the best premium download service for your needs.">
+    <meta name="twitter:image" content="https://debrid-services-comparison.netlify.app/image.png">
+
 
     <link rel="stylesheet" href="css/styles.css">
-      <script src="js/app.js" defer></script>
+
+    <script src="js/app.js" defer></script>
 
 </head>
+
 <body>
     <a class="skip-link" href="#main-content">Skip to main content</a>
     <div class="page-wrapper">
@@ -76,11 +87,12 @@
                 <div class="header-content">
                     <a href="/" class="site-title">
                         <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                         </svg>
                         Debrid Comparison
                     </a>
-                    <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" aria-controls="primary-navigation" aria-expanded="false" type="button">
+                    <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
+                        aria-controls="primary-navigation" aria-expanded="false" type="button">
                         <span class="nav-toggle-bar"></span>
                         <span class="nav-toggle-bar"></span>
                         <span class="nav-toggle-bar"></span>
@@ -98,11 +110,12 @@
                     </nav>
                     <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
                         <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <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"/>
+                            <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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                         </svg>
                     </button>
                 </div>
@@ -119,7 +132,8 @@
                             Compare Premium <span class="gradient-text">Debrid Services</span>
                         </h1>
                         <p class="hero-description">
-                            A community-driven, up-to-date comparison of premium debrid services: pricing, host support, refund policies, and performance.
+                            A community-driven, up-to-date comparison of premium debrid services: pricing, host support,
+                            refund policies, and performance.
                         </p>
                         <div class="hero-actions">
                             <a href="#pricing" class="btn btn-primary">View Pricing</a>
@@ -146,7 +160,8 @@
                         <div class="section-header">
                             <h2 id="what-title" class="section-title">What are Debrid Services?</h2>
                             <p class="section-description">
-                                Debrid services (a.k.a. premium link generators) act as a high‑speed intermediary: they fetch the file from a host, then serve you a fast, ad‑free direct link.
+                                Debrid services (a.k.a. premium link generators) act as a high‑speed intermediary: they
+                                fetch the file from a host, then serve you a fast, ad‑free direct link.
                             </p>
                             <div class="meta-chips" aria-label="Key traits">
                                 <span class="chip">Premium link generator</span>
@@ -158,42 +173,39 @@
 
                         <div class="features-grid">
                             <article class="benefit-card" role="article">
-                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                                 </svg>
                                 <h3>Maximum Speeds</h3>
                                 <p>Bypass host throttling with direct links</p>
                             </article>
                             <article class="benefit-card" role="article">
-                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
-                                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+                                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
                                 </svg>
                                 <h3>Multi‑Host Access</h3>
                                 <p>One subscription supports hundreds of hosts</p>
                             </article>
                             <article class="benefit-card" role="article">
-                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <circle cx="12" cy="12" r="10"/>
-                                    <polygon points="10,8 16,12 10,16 10,8"/>
-                                </svg>
-                                <h3>Streaming Ready</h3>
-                                <p>Instant playback on supported hosts</p>
-                            </article>
-                            <article class="benefit-card" role="article">
-                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
-                                    <polyline points="7.5,4.21 12,6.81 16.5,4.21"/>
-                                    <polyline points="7.5,19.79 7.5,14.6 3,12"/>
-                                    <polyline points="21,12 16.5,14.6 16.5,19.79"/>
+                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path
+                                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                                    <polyline points="7.5,4.21 12,6.81 16.5,4.21" />
+                                    <polyline points="7.5,19.79 7.5,14.6 3,12" />
+                                    <polyline points="21,12 16.5,14.6 16.5,19.79" />
                                 </svg>
                                 <h3>Torrent‑to‑Link</h3>
                                 <p>Add magnet/torrent and get a direct URL</p>
                             </article>
                             <article class="benefit-card" role="article">
-                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
-                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                                 </svg>
                                 <h3>Ad‑Free</h3>
                                 <p>No popups, countdowns, or captchas</p>
@@ -201,11 +213,13 @@
                         </div>
 
                         <div class="alert alert-info" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <circle cx="12" cy="12" r="10"/>
-                                <path d="M12 16v-4M12 8h.01"/>
+                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M12 16v-4M12 8h.01" />
                             </svg>
-                            <div>Think of a debrid service as a "premium proxy" between you and hosts like Rapidgator, Mega, or Uptobox.</div>
+                            <div>Think of a debrid service as a "premium proxy" between you and hosts like Rapidgator,
+                                Mega, or Uptobox.</div>
                         </div>
                     </div>
                 </div>
@@ -217,50 +231,60 @@
                     <div class="content-container">
                         <div class="section-header">
                             <h2 id="pricing-title" class="section-title">Pricing Comparison</h2>
-                            <p class="section-description">Compare subscription plans across all major debrid services</p>
+                            <p class="section-description">Compare subscription plans across all major debrid services
+                            </p>
                         </div>
 
                         <div class="pricing-container">
-                            <div id="pricing-table-container" class="data-table-container" role="region" aria-live="polite" aria-label="Pricing table">
+                            <div id="pricing-table-container" class="data-table-container" role="region"
+                                aria-live="polite" aria-label="Pricing table">
                                 <div class="loading-state" aria-busy="true">
                                     <div class="loading-spinner" aria-hidden="true"></div>
                                     <p>Loading pricing data...</p>
                                 </div>
                             </div>
-                            
+
                             <div class="alert alert-info" role="alert">
-                                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <circle cx="12" cy="12" r="10"/>
-                                    <path d="M12 16v-4M12 8h.01"/>
+                                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <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.</div>
+                                <div><strong>Important:</strong> Pricing can change frequently. Always verify current
+                                    pricing on official websites before purchasing.</div>
                             </div>
                         </div>
 
                         <div class="referral-section" aria-labelledby="referral-title">
                             <div class="referral-header">
                                 <h3 id="referral-title">Support This Project</h3>
-                                <p>Consider using our referral links - it helps maintain this project at no extra cost to you!</p>
+                                <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" target="_blank" rel="noopener noreferrer sponsored">
+                                <a href="https://alldebrid.com/?uid=3wvya&lang=en" class="referral-card" target="_blank"
+                                    rel="noopener noreferrer sponsored">
                                     <span class="service-name">AllDebrid</span>
                                     <span class="referral-badge">Referral Link</span>
                                 </a>
-                                <a href="https://real-debrid.com/?id=10990901" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
+                                <a href="https://real-debrid.com/?id=10990901" class="referral-card" target="_blank"
+                                    rel="noopener noreferrer sponsored">
                                     <span class="service-name">Real-Debrid</span>
                                     <span class="referral-badge">Referral Link</span>
                                 </a>
-                                
-                                <a href="https://linksnappy.com/?ref=774668" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
+
+                                <a href="https://linksnappy.com/?ref=774668" class="referral-card" target="_blank"
+                                    rel="noopener noreferrer sponsored">
                                     <span class="service-name">LinkSnappy</span>
                                     <span class="referral-badge">Referral Link</span>
                                 </a>
-                                <a href="https://debrid-link.com/id/7B3BO" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
+                                <a href="https://debrid-link.com/id/7B3BO" class="referral-card" target="_blank"
+                                    rel="noopener noreferrer sponsored">
                                     <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" target="_blank" rel="noopener noreferrer sponsored">
+                                <a href="https://www.deepbrid.com/aff/go/upward1971" class="referral-card"
+                                    target="_blank" rel="noopener noreferrer sponsored">
                                     <span class="service-name">Deepbrid</span>
                                     <span class="referral-badge">Referral Link</span>
                                 </a>
@@ -276,28 +300,33 @@
                     <div class="content-container">
                         <div class="section-header">
                             <h2 id="hosts-title" class="section-title">Supported File Hosts</h2>
-                            <p class="section-description">Browse and search through 300+ supported file hosting services</p>
+                            <p class="section-description">Browse and search through 300+ supported file hosting
+                                services</p>
                         </div>
 
                         <div class="search-section">
-                            <form class="search-container" role="search" aria-label="Search file hosts" onsubmit="return false">
-                                <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <circle cx="11" cy="11" r="8"/>
-                                    <path d="M21 21l-4.35-4.35"/>
+                            <form class="search-container" role="search" aria-label="Search file hosts"
+                                onsubmit="return false">
+                                <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <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">
+                                <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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <line x1="18" y1="6" x2="6" y2="18"/>
-                                        <line x1="6" y1="6" x2="18" y2="18"/>
+                                        <line x1="18" y1="6" x2="6" y2="18" />
+                                        <line x1="6" y1="6" x2="18" y2="18" />
                                     </svg>
                                 </button>
                             </form>
                         </div>
 
-                        <div id="file-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
+                        <div id="file-hosts-table-container" class="data-table-container" role="region"
+                            aria-live="polite">
                             <div class="loading-state" aria-busy="true">
                                 <div class="loading-spinner"></div>
                                 <p>Loading file hosts...</p>
@@ -313,7 +342,8 @@
                     <div class="content-container">
                         <div class="section-header">
                             <h2 id="compare-title" class="section-title">Compare Services</h2>
-                            <p class="section-description">Select two services to see a detailed side-by-side comparison</p>
+                            <p class="section-description">Select two services to see a detailed side-by-side comparison
+                            </p>
                         </div>
 
                         <div class="compare-controls">
@@ -338,11 +368,12 @@
 
                         <div id="compare-table-container" class="data-table-container" role="region" aria-live="polite">
                             <div class="empty-state">
-                                <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M9 12l2 2 4-4"></path>
-    <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
-    <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"></path>
-</svg>
+                                <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M9 12l2 2 4-4"></path>
+                                    <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
+                                    <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"></path>
+                                </svg>
                                 <h3>Ready to Compare</h3>
                                 <p>Select two services above to see a detailed comparison</p>
                             </div>
@@ -358,28 +389,35 @@
                         <div class="section-header">
                             <h2 id="adult-hosts-title" class="section-title">Adult Content Hosts</h2>
                             <p class="section-description">
-                                Support for adult content varies significantly across debrid services. Some platforms actively support major adult file hosts, while others exclude them entirely due to policy or legal considerations.
+                                Support for adult content varies significantly across debrid services. Some platforms
+                                actively support major adult file hosts, while others exclude them entirely due to
+                                policy or legal considerations.
                             </p>
                         </div>
 
                         <div class="search-section">
-                            <form class="search-container" role="search" aria-label="Search adult hosts" onsubmit="return false">
-                                <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <circle cx="11" cy="11" r="8"/>
-                                    <path d="M21 21l-4.35-4.35"/>
+                            <form class="search-container" role="search" aria-label="Search adult hosts"
+                                onsubmit="return false">
+                                <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <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">
+                                <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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <line x1="18" y1="6" x2="6" y2="18"/>
-                                        <line x1="6" y1="6" x2="18" y2="18"/>
+                                        <line x1="18" y1="6" x2="6" y2="18" />
+                                        <line x1="6" y1="6" x2="18" y2="18" />
                                     </svg>
                                 </button>
                             </form>
                         </div>
 
-                        <div id="adult-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
+                        <div id="adult-hosts-table-container" class="data-table-container" role="region"
+                            aria-live="polite">
                             <div class="loading-state" aria-busy="true">
                                 <div class="loading-spinner"></div>
                                 <p>Loading adult hosts...</p>
@@ -389,14 +427,15 @@
                 </div>
             </section>
 
-                        <!-- Speed Test Section -->
+            <!-- Speed Test Section -->
             <section id="speed-test" class="section" aria-labelledby="speed-title">
                 <div class="container">
                     <div class="content-container">
                         <div class="section-header">
                             <h2 id="speed-title" class="section-title">Speed Test</h2>
                             <p class="section-description">
-                                Actual speeds vary by location, time of day, host performance, and load. Test before committing to a long plan.
+                                Actual speeds vary by location, time of day, host performance, and load. Test before
+                                committing to a long plan.
                             </p>
                         </div>
 
@@ -406,32 +445,38 @@
                                 <p>Test download speeds directly from service providers</p>
                             </div>
                             <div class="speed-grid">
-                                <a href="https://real-debrid.com/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
+                                <a href="https://real-debrid.com/speedtest" class="speed-card" target="_blank"
+                                    rel="noopener noreferrer">
                                     <span class="service-name">Real‑Debrid</span>
                                     <span class="speed-test-label">Speed Test</span>
                                 </a>
-                                <a href="https://www.premiumize.me/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
+                                <a href="https://www.premiumize.me/speedtest" class="speed-card" target="_blank"
+                                    rel="noopener noreferrer">
                                     <span class="service-name">Premiumize</span>
                                     <span class="speed-test-label">Speed Test</span>
                                 </a>
-                                <a href="https://www.torbox.app/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
+                                <a href="https://www.torbox.app/speedtest" class="speed-card" target="_blank"
+                                    rel="noopener noreferrer">
                                     <span class="service-name">TorBox</span>
                                     <span class="speed-test-label">Speed Test</span>
                                 </a>
-                                <a href="https://debrid-link.com/webapp/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
+                                <a href="https://debrid-link.com/webapp/speedtest" class="speed-card" target="_blank"
+                                    rel="noopener noreferrer">
                                     <span class="service-name">Debrid‑Link</span>
                                     <span class="speed-test-label">Speed Test</span>
                                 </a>
-                                <a href="https://www.mega-debrid.eu/index.php?page=network" class="speed-card" target="_blank" rel="noopener noreferrer">
+                                <a href="https://www.mega-debrid.eu/index.php?page=network" class="speed-card"
+                                    target="_blank" rel="noopener noreferrer">
                                     <span class="service-name">Mega‑Debrid</span>
                                     <span class="speed-test-label">Network Test</span>
                                 </a>
                             </div>
-                            
+
                             <div class="alert alert-info" role="alert">
-                                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <circle cx="12" cy="12" r="10"/>
-                                    <path d="M12 16v-4M12 8h.01"/>
+                                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <circle cx="12" cy="12" r="10" />
+                                    <path d="M12 16v-4M12 8h.01" />
                                 </svg>
                                 <div>These tests are best‑case scenarios from the provider's own network.</div>
                             </div>
@@ -451,56 +496,64 @@
                         </div>
 
                         <div class="status-grid">
-                            <a href="https://alldebrid.com/status/" class="status-card" target="_blank" rel="noopener noreferrer">
+                            <a href="https://alldebrid.com/status/" class="status-card" target="_blank"
+                                rel="noopener noreferrer">
                                 <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" target="_blank" rel="noopener noreferrer">
+                            <a href="https://real-debrid.com/compare" class="status-card" target="_blank"
+                                rel="noopener noreferrer">
                                 <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" target="_blank" rel="noopener noreferrer">
+                            <a href="https://torbox.app/hosters" class="status-card" target="_blank"
+                                rel="noopener noreferrer">
                                 <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" target="_blank" rel="noopener noreferrer">
+                            <a href="https://www.premiumize.me/services" class="status-card" target="_blank"
+                                rel="noopener noreferrer">
                                 <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" target="_blank" rel="noopener noreferrer">
+                            <a href="https://linksnappy.com/myaccount/status" class="status-card" target="_blank"
+                                rel="noopener noreferrer">
                                 <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" target="_blank" rel="noopener noreferrer">
+                            <a href="https://debrid-link.com/webapp/status" class="status-card" target="_blank"
+                                rel="noopener noreferrer">
                                 <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" target="_blank" rel="noopener noreferrer">
+                            <a href="https://www.mega-debrid.eu/index.php?page=hebergeurs" class="status-card"
+                                target="_blank" rel="noopener noreferrer">
                                 <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" target="_blank" rel="noopener noreferrer">
+                            <a href="https://www.deepbrid.com/status" class="status-card" target="_blank"
+                                rel="noopener noreferrer">
                                 <div class="status-header">
                                     <span class="service-name">Deepbrid</span>
                                     <span class="service-status-indicator online" aria-label="Online"></span>
@@ -510,11 +563,13 @@
                         </div>
 
                         <div class="alert alert-info" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <circle cx="12" cy="12" r="10"/>
-                                <path d="M12 16v-4M12 8h.01"/>
+                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M12 16v-4M12 8h.01" />
                             </svg>
-                            <div><strong>💡 Tip:</strong> Bookmark these pages to verify if a failed link is due to a temporary host outage rather than a service limitation.</div>
+                            <div><strong>💡 Tip:</strong> Bookmark these pages to verify if a failed link is due to a
+                                temporary host outage rather than a service limitation.</div>
                         </div>
                     </div>
                 </div>
@@ -528,82 +583,101 @@
                         <div class="section-header">
                             <h2 id="notes-title" class="section-title">Important Notes</h2>
                             <p class="section-description">
-                                This project aims to provide accurate and up-to-date information, but the debrid service landscape is dynamic.
+                                This project aims to provide accurate and up-to-date information, but the debrid service
+                                landscape is dynamic.
                             </p>
                         </div>
 
                         <div class="important-notes-grid">
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
+                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path
+                                        d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                                 </svg>
                                 <div class="note-content">
                                     <h3>Services change frequently</h3>
-                                    <p>Pricing, host support, refund policies, and features may be updated without notice. Always verify details on the <strong>official service websites</strong> before purchasing.</p>
+                                    <p>Pricing, host support, refund policies, and features may be updated without
+                                        notice. Always verify details on the <strong>official service websites</strong>
+                                        before purchasing.</p>
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
+                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                                 </svg>
                                 <div class="note-content">
                                     <h3>Final cost may vary</h3>
-                                    <p>Displayed prices are subject to exchange rates, regional taxes, or payment processing fees. Your actual charge may differ slightly.</p>
+                                    <p>Displayed prices are subject to exchange rates, regional taxes, or payment
+                                        processing fees. Your actual charge may differ slightly.</p>
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                                    <polyline points="14,2 14,8 20,8"/>
-                                    <line x1="16" y1="13" x2="8" y2="13"/>
-                                    <line x1="16" y1="17" x2="8" y2="17"/>
+                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                                    <polyline points="14,2 14,8 20,8" />
+                                    <line x1="16" y1="13" x2="8" y2="13" />
+                                    <line x1="16" y1="17" x2="8" y2="17" />
                                 </svg>
                                 <div class="note-content">
                                     <h3>Data accuracy</h3>
-                                    <p>While we strive for completeness, this comparison reflects community reports and public information. We do <strong>not guarantee</strong> uptime, speed, download success, or feature availability.</p>
+                                    <p>While we strive for completeness, this comparison reflects community reports and
+                                        public information. We do <strong>not guarantee</strong> uptime, speed, download
+                                        success, or feature availability.</p>
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
-                                    <circle cx="9" cy="7" r="4"/>
-                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
+                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                                    <circle cx="9" cy="7" r="4" />
+                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
                                 </svg>
                                 <div class="note-content">
                                     <h3>No affiliation</h3>
-                                    <p>This project is independent and <strong>not affiliated</strong> with any listed service.</p>
+                                    <p>This project is independent and <strong>not affiliated</strong> with any listed
+                                        service.</p>
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M9 12l2 2 4-4"></path>
-    <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
-    <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"></path>
-</svg>
+                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M9 12l2 2 4-4"></path>
+                                    <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
+                                    <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"></path>
+                                </svg>
                                 <div class="note-content">
                                     <h3>Use at your own discretion</h3>
-                                    <p>Choosing a debrid service involves personal judgment. Test short-term plans first and review terms carefully.</p>
+                                    <p>Choosing a debrid service involves personal judgment. Test short-term plans first
+                                        and review terms carefully.</p>
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
-                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                                 </svg>
                                 <div class="note-content">
                                     <h3>Legal responsibility</h3>
-                                    <p>Debrid services are tools. You are responsible for complying with copyright laws and terms of use when accessing content.</p>
+                                    <p>Debrid services are tools. You are responsible for complying with copyright laws
+                                        and terms of use when accessing content.</p>
                                 </div>
                             </div>
                         </div>
 
                         <div class="alert alert-warning" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <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"/>
-                                <line x1="12" y1="9" x2="12" y2="13"/>
-                                <line x1="12" y1="17" x2="12.01" y2="17"/>
+                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <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" />
+                                <line x1="12" y1="9" x2="12" y2="13" />
+                                <line x1="12" y1="17" x2="12.01" y2="17" />
                             </svg>
-                            <div><strong>This is an open-source, community-maintained guide. It does not endorse or promote unauthorized file sharing.</strong></div>
+                            <div><strong>This is an open-source, community-maintained guide. It does not endorse or
+                                    promote unauthorized file sharing.</strong></div>
                         </div>
                     </div>
                 </div>
@@ -615,73 +689,91 @@
                     <div class="content-container">
                         <div class="section-header">
                             <h2 id="resources-title" class="section-title">Useful Resources and Community</h2>
-                            <p class="section-description">Enhance your debrid experience with these trusted tools, guides, and communities</p>
+                            <p class="section-description">Enhance your debrid experience with these trusted tools,
+                                guides, and communities</p>
                         </div>
 
                         <div class="resources-categories">
                             <div class="resource-category">
                                 <h3>
-                                    <svg class="resource-category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
+                                    <svg class="resource-category-icon" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2">
+                                        <path
+                                            d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
                                     </svg>
                                     Tools and Integrations
                                 </h3>
                                 <div class="resource-list">
-                                    <a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item" target="_blank" rel="noopener noreferrer">
+                                    <a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item"
+                                        target="_blank" rel="noopener noreferrer">
                                         <strong>Awesome-Debrid</strong>
-                                        <span>Curated list of debrid-compatible apps, browser extensions, and automation tools</span>
+                                        <span>Curated list of debrid-compatible apps, browser extensions, and automation
+                                            tools</span>
                                     </a>
-                                    <a href="https://github.com/debridmediamanager/debrid-media-manager" class="resource-item" target="_blank" rel="noopener noreferrer">
+                                    <a href="https://github.com/debridmediamanager/debrid-media-manager"
+                                        class="resource-item" target="_blank" rel="noopener noreferrer">
                                         <strong>Debrid Media Manager</strong>
                                         <span>Easily download movies and TV shows directly to your Debrid library</span>
                                     </a>
-                                    <a href="https://github.com/rogerfar/rdt-client" class="resource-item" target="_blank" rel="noopener noreferrer">
+                                    <a href="https://github.com/rogerfar/rdt-client" class="resource-item"
+                                        target="_blank" rel="noopener noreferrer">
                                         <strong>Real-Debrid Torrent Client</strong>
-                                        <span>Web interface to manage your torrents on Real-Debrid, AllDebrid, Premiumize TorBox or DebridLink</span>
+                                        <span>Web interface to manage your torrents on Real-Debrid, AllDebrid,
+                                            Premiumize TorBox or DebridLink</span>
                                     </a>
-                                    <a href="https://github.com/g0ldyy/comet" class="resource-item" target="_blank" rel="noopener noreferrer">
+                                    <a href="https://github.com/g0ldyy/comet" class="resource-item" target="_blank"
+                                        rel="noopener noreferrer">
                                         <strong>Comet</strong>
                                         <span>Stremio's torrent/debrid search add-on</span>
                                     </a>
-                                    <a href="https://github.com/jackett/jackett" class="resource-item" target="_blank" rel="noopener noreferrer">
+                                    <a href="https://github.com/jackett/jackett" class="resource-item" target="_blank"
+                                        rel="noopener noreferrer">
                                         <strong>Jackett + Prowlarr</strong>
-                                        <span>Indexer proxies that work seamlessly with debrid services for automation</span>
+                                        <span>Indexer proxies that work seamlessly with debrid services for
+                                            automation</span>
                                     </a>
                                 </div>
                             </div>
 
                             <div class="resource-category">
                                 <h3>
-                                    <svg class="resource-category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
-                                        <circle cx="9" cy="7" r="4"/>
-                                        <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
+                                    <svg class="resource-category-icon" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2">
+                                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                                        <circle cx="9" cy="7" r="4" />
+                                        <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
                                     </svg>
                                     Community and Support
                                 </h3>
                                 <div class="resource-list">
                                     <div class="resource-item">
                                         <strong>Reddit</strong>
-                                        <span>Active discussions on r/Debrid, r/Piracy and service-specific threads</span>
+                                        <span>Active discussions on r/Debrid, r/Piracy and service-specific
+                                            threads</span>
                                     </div>
                                     <div class="resource-item">
                                         <strong>Discord</strong>
-                                        <span>Many services offer official Discord servers for real-time support and status updates</span>
+                                        <span>Many services offer official Discord servers for real-time support and
+                                            status updates</span>
                                     </div>
                                     <div class="resource-item">
                                         <strong>GitHub Issues</strong>
-                                        <span>Report inaccuracies or suggest improvements here — this project thrives on community input!</span>
+                                        <span>Report inaccuracies or suggest improvements here — this project thrives on
+                                            community input!</span>
                                     </div>
                                 </div>
                             </div>
                         </div>
 
                         <div class="alert alert-info" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <circle cx="12" cy="12" r="10"/>
-                                <path d="M12 16v-4M12 8h.01"/>
+                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M12 16v-4M12 8h.01" />
                             </svg>
-                            <div><strong>💡 Pro Tip:</strong> Combine your debrid service with automation tools like <strong>Debrid Media Manager (DMM)</strong> or <strong>Overseerr</strong> for a seamless media experience.</div>
+                            <div><strong>💡 Pro Tip:</strong> Combine your debrid service with automation tools like
+                                <strong>Debrid Media Manager (DMM)</strong> or <strong>Overseerr</strong> for a seamless
+                                media experience.</div>
                         </div>
                     </div>
                 </div>
@@ -695,13 +787,14 @@
                     <div class="footer-content">
                         <div class="footer-section">
                             <div class="footer-brand">
-                                <svg class="footer-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                                <svg class="footer-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                                 </svg>
                                 <h4>Debrid Comparison</h4>
                             </div>
                             <p class="footer-description">
-                                A comprehensive, community-driven comparison of premium debrid services. 
+                                A comprehensive, community-driven comparison of premium debrid services.
                                 Compare pricing, features, and host support to find the best service for your needs.
                             </p>
                             <div class="footer-stats">
@@ -709,7 +802,7 @@
                                 <span class="footer-stat">300+ Hosts</span>
                             </div>
                         </div>
-                        
+
                         <div class="footer-section">
                             <h5>Quick Links</h5>
                             <ul class="footer-links">
@@ -720,40 +813,55 @@
                                 <li><a href="#live-status">Service Status</a></li>
                             </ul>
                         </div>
-                        
+
                         <div class="footer-section">
                             <h5>Resources</h5>
                             <ul class="footer-links">
-                                <li><a href="https://github.com/debridmediamanager/awesome-debrid" target="_blank" rel="noopener noreferrer">Awesome Debrid</a></li>
-                                <li><a href="https://github.com/debridmediamanager/debrid-media-manager" target="_blank" rel="noopener noreferrer">DMM Tool</a></li>
-                                <li><a href="https://github.com/rogerfar/rdt-client" target="_blank" rel="noopener noreferrer">RDT Client</a></li>
-                                <li><a href="https://github.com/g0ldyy/comet" target="_blank" rel="noopener noreferrer">Comet Addon</a></li>
+                                <li><a href="https://github.com/debridmediamanager/awesome-debrid" target="_blank"
+                                        rel="noopener noreferrer">Awesome Debrid</a></li>
+                                <li><a href="https://github.com/debridmediamanager/debrid-media-manager" target="_blank"
+                                        rel="noopener noreferrer">DMM Tool</a></li>
+                                <li><a href="https://github.com/rogerfar/rdt-client" target="_blank"
+                                        rel="noopener noreferrer">RDT Client</a></li>
+                                <li><a href="https://github.com/g0ldyy/comet" target="_blank"
+                                        rel="noopener noreferrer">Comet Addon</a></li>
                             </ul>
                         </div>
-                        
+
                         <div class="footer-section">
                             <h5>Project</h5>
                             <ul class="footer-links">
-                                <li><a href="https://github.com/fynks/debrid-services-comparison" target="_blank" rel="noopener noreferrer">Source Code</a></li>
-                                <li><a href="https://github.com/fynks/debrid-services-comparison/issues" target="_blank" rel="noopener noreferrer">Report Issues</a></li>
-                                <li><a href="https://github.com/fynks/debrid-services-comparison/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contribute</a></li>
-                                <li><a href="https://github.com/fynks/debrid-services-comparison/releases" target="_blank" rel="noopener noreferrer">Changelog</a></li>
+                                <li><a href="https://github.com/fynks/debrid-services-comparison" target="_blank"
+                                        rel="noopener noreferrer">Source Code</a></li>
+                                <li><a href="https://github.com/fynks/debrid-services-comparison/issues" target="_blank"
+                                        rel="noopener noreferrer">Report Issues</a></li>
+                                <li><a href="https://github.com/fynks/debrid-services-comparison/blob/main/CONTRIBUTING.md"
+                                        target="_blank" rel="noopener noreferrer">Contribute</a></li>
+                                <li><a href="https://github.com/fynks/debrid-services-comparison/releases"
+                                        target="_blank" rel="noopener noreferrer">Changelog</a></li>
                             </ul>
                         </div>
                     </div>
-                    
+
                     <div class="footer-bottom">
                         <div class="footer-bottom-content">
                             <div class="footer-left">
-                                <p>&copy; 2025 Debrid Services Comparison. Made with ❤️ by <a href="https://github.com/fynks" target="_blank" rel="noopener noreferrer">Fynks</a></p>
-                                <p class="footer-disclaimer">This is an independent, open-source project not affiliated with any debrid service.</p>
+                                <p>&copy; 2025 Debrid Services Comparison. Made with ❤️ by <a
+                                        href="https://github.com/fynks" target="_blank"
+                                        rel="noopener noreferrer">Fynks</a></p>
+                                <p class="footer-disclaimer">This is an independent, open-source project not affiliated
+                                    with any debrid service.</p>
                             </div>
                             <div class="footer-right">
                                 <div class="footer-meta">
-                                    <span class="last-updated">Last updated: <time datetime="2025-08-22">August 22, 2025</time></span>
-                                    <a href="https://github.com/fynks/debrid-services-comparison" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="View source on GitHub">
+                                    <span class="last-updated">Last updated: <time datetime="2025-08-22">August 22,
+                                            2025</time></span>
+                                    <a href="https://github.com/fynks/debrid-services-comparison" target="_blank"
+                                        rel="noopener noreferrer" class="github-link"
+                                        aria-label="View source on GitHub">
                                         <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                                            <path
+                                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                                         </svg>
                                     </a>
                                 </div>
@@ -767,7 +875,7 @@
         <!-- 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">
-                <path d="M18 15l-6-6-6 6"/>
+                <path d="M18 15l-6-6-6 6" />
             </svg>
         </button>
     </div>
@@ -785,88 +893,88 @@
             let lastFocusedBeforeMenu = null;
 
             // Mark JS ready to enable transitions after initial paint (prevents slide-in glitch)
-            requestAnimationFrame(()=> bodyEl.classList.add('js-ready'));
+            requestAnimationFrame(() => bodyEl.classList.add('js-ready'));
 
             function trapFocus(container) {
                 const focusables = Array.from(container.querySelectorAll(focusableSelectors));
-                if (!focusables.length) return;            
+                if (!focusables.length) return;
                 let first = focusables[0];
                 let last = focusables[focusables.length - 1];
-                function handle(e){
-                    if(e.key==='Tab') {
-                        if(e.shiftKey && document.activeElement===first){e.preventDefault();last.focus();}
-                        else if(!e.shiftKey && document.activeElement===last){e.preventDefault();first.focus();}
+                function handle(e) {
+                    if (e.key === 'Tab') {
+                        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+                        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
                     }
                 }
                 container.addEventListener('keydown', handle);
             }
 
-            function updateNavAria(){
-                if(!nav) return;
-                if(window.innerWidth <= 900){
+            function updateNavAria() {
+                if (!nav) return;
+                if (window.innerWidth <= 900) {
                     nav.setAttribute('aria-hidden', bodyEl.classList.contains('nav-open') ? 'false' : 'true');
                 } else {
                     nav.removeAttribute('aria-hidden');
                 }
             }
 
-            function openMenu(){
+            function openMenu() {
                 lastFocusedBeforeMenu = document.activeElement;
                 bodyEl.classList.add('nav-open');
-                navToggle.setAttribute('aria-expanded','true');
+                navToggle.setAttribute('aria-expanded', 'true');
                 navOverlay.hidden = false;
-                nav.setAttribute('data-open','true');
+                nav.setAttribute('data-open', 'true');
                 const firstLink = nav.querySelector('a');
                 firstLink && firstLink.focus();
                 trapFocus(nav);
                 updateNavAria();
             }
-            function closeMenu(){
+            function closeMenu() {
                 bodyEl.classList.remove('nav-open');
-                navToggle.setAttribute('aria-expanded','false');
+                navToggle.setAttribute('aria-expanded', 'false');
                 navOverlay.hidden = true;
                 nav.removeAttribute('data-open');
                 lastFocusedBeforeMenu && lastFocusedBeforeMenu.focus();
                 updateNavAria();
             }
-            if(navToggle){
-                navToggle.addEventListener('click', ()=>{
-                    if(bodyEl.classList.contains('nav-open')) closeMenu(); else openMenu();
+            if (navToggle) {
+                navToggle.addEventListener('click', () => {
+                    if (bodyEl.classList.contains('nav-open')) closeMenu(); else openMenu();
                 });
             }
-            if(navOverlay){
+            if (navOverlay) {
                 navOverlay.addEventListener('click', closeMenu);
             }
-            window.addEventListener('keydown', (e)=>{
-                if(e.key==='Escape' && bodyEl.classList.contains('nav-open')) closeMenu();
+            window.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && bodyEl.classList.contains('nav-open')) closeMenu();
             });
 
             // Handle resize (debounced via rAF)
             let resizeRaf;
-            window.addEventListener('resize', ()=>{
-                if(resizeRaf) cancelAnimationFrame(resizeRaf);
+            window.addEventListener('resize', () => {
+                if (resizeRaf) cancelAnimationFrame(resizeRaf);
                 resizeRaf = requestAnimationFrame(updateNavAria);
             });
             updateNavAria();
 
             // Scrollspy for active nav link
-            const sectionIds = Array.from(nav?.querySelectorAll('a[href^="#"]')||[]).map(a=>a.getAttribute('href')).filter(Boolean);
-            const sections = sectionIds.map(id=>document.querySelector(id)).filter(Boolean);
-            if('IntersectionObserver' in window && sections.length){
-                const observer = new IntersectionObserver(entries=>{
-                    entries.forEach(entry=>{
-                        const id = '#'+entry.target.id;
+            const sectionIds = Array.from(nav?.querySelectorAll('a[href^="#"]') || []).map(a => a.getAttribute('href')).filter(Boolean);
+            const sections = sectionIds.map(id => document.querySelector(id)).filter(Boolean);
+            if ('IntersectionObserver' in window && sections.length) {
+                const observer = new IntersectionObserver(entries => {
+                    entries.forEach(entry => {
+                        const id = '#' + entry.target.id;
                         const link = nav.querySelector(`a[href="${id}"]`);
-                        if(link){
-                            if(entry.isIntersecting){
-                                nav.querySelectorAll('.nav-link.active').forEach(l=>{l.classList.remove('active'); l.removeAttribute('aria-current');});
+                        if (link) {
+                            if (entry.isIntersecting) {
+                                nav.querySelectorAll('.nav-link.active').forEach(l => { l.classList.remove('active'); l.removeAttribute('aria-current'); });
                                 link.classList.add('active');
-                                link.setAttribute('aria-current','page');
+                                link.setAttribute('aria-current', 'page');
                             }
                         }
                     });
-                }, {rootMargin: '-40% 0px -50% 0px', threshold: [0,0.25,0.5,1]});
-                sections.forEach(sec=>observer.observe(sec));
+                }, { rootMargin: '-40% 0px -50% 0px', threshold: [0, 0.25, 0.5, 1] });
+                sections.forEach(sec => observer.observe(sec));
             }
             if (btn) {
                 const getTheme = () => document.documentElement.getAttribute('data-theme') || 'light';
@@ -890,14 +998,14 @@
                     const id = anchor.getAttribute('href');
                     const target = id && document.querySelector(id);
                     if (!target) return;
-                    
+
                     e.preventDefault();
-                    if(bodyEl.classList.contains('nav-open')) closeMenu();
-                    target.scrollIntoView({ 
-                        behavior: prefersReduced ? 'auto' : 'smooth', 
+                    if (bodyEl.classList.contains('nav-open')) closeMenu();
+                    target.scrollIntoView({
+                        behavior: prefersReduced ? 'auto' : 'smooth',
                         block: 'start'
                     });
-                    
+
                     const focusEl = target.querySelector('h1,h2,h3,h4,h5,h6') || target;
                     focusEl.setAttribute('tabindex', '-1');
                     focusEl.focus({ preventScroll: true });
@@ -927,7 +1035,7 @@
             // Search functionality for file hosts
             const hostSearchInput = document.getElementById('host-search-input');
             const clearHostSearch = document.getElementById('clear-host-search');
-            
+
             if (clearHostSearch) {
                 clearHostSearch.addEventListener('click', () => {
                     hostSearchInput.value = '';
@@ -939,7 +1047,7 @@
             // Search functionality for adult hosts
             const adultHostSearchInput = document.getElementById('adult-host-search-input');
             const clearAdultHostSearch = document.getElementById('clear-adult-host-search');
-            
+
             if (clearAdultHostSearch) {
                 clearAdultHostSearch.addEventListener('click', () => {
                     adultHostSearchInput.value = '';
@@ -965,7 +1073,7 @@
             if (provider1Select && provider2Select) {
                 // Populate select options (mock data)
                 const services = ['AllDebrid', 'Real-Debrid', 'TorBox', 'Premiumize', 'LinkSnappy', 'Debrid-Link', 'Mega-Debrid', 'Deepbrid'];
-                
+
                 services.forEach(service => {
                     const option1 = new Option(service, service.toLowerCase());
                     const option2 = new Option(service, service.toLowerCase());
@@ -977,7 +1085,7 @@
                 const updateComparison = () => {
                     const service1 = provider1Select.value;
                     const service2 = provider2Select.value;
-                    
+
                     if (service1 && service2 && service1 !== service2) {
                         compareContainer.style.display = 'block';
                         compareContainer.classList.add('comparison-visible');
@@ -1003,16 +1111,19 @@
         });
     </script>
 
-    <noscript>
-        <div class="container" style="margin-top: var(--space-lg);">
-            <div class="alert alert-info" role="alert">
-                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"/>
-                    <path d="M12 16v-4M12 8h.01"/>
+            <!-- Noscript warning for core interactive features -->
+        <noscript>
+            <div class="alert alert-warning"
+                style="margin: 20px; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 1000;">
+                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    aria-hidden="true">
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="8" x2="12" y2="12" />
+                    <line x1="12" y1="16" x2="12.01" y2="16" />
                 </svg>
                 <div>JavaScript is disabled. Interactive comparison and filtering won't work.</div>
             </div>
-        </div>
-    </noscript>
+        </noscript>
 </body>
+
 </html>
\ No newline at end of file