From 8912cc259531ebd27a0344817f4076548dd1d251 Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Fri, 22 Aug 2025 19:27:38 +0500
Subject: [PATCH] improved index

---
 dist/css/styles.css | 2950 ++++++++++++++++++-------------------------
 dist/index.html     |   69 +-
 2 files changed, 1271 insertions(+), 1748 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index 3316d62..2aabe57 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -1,1756 +1,1238 @@
-
-        :root {
-            /* Color System */
-            --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;
-            
-            /* Semantic Colors */
-            --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);
-            
-            /* Layout */
-            --container-max: 1400px;
-            --header-height: 5rem;
-            --content-max: 1200px;
-            
-            /* Spacing */
-            --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-light: 300;
-            --font-normal: 400;
-            --font-medium: 500;
-            --font-semibold: 600;
-            --font-bold: 700;
-            --font-extrabold: 800;
-            
-            /* Effects */
-            --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);
-            
-            --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        [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);
-        }
-
-        /* 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;
-        }
-
-        img, svg, video, canvas {
-            max-width: 100%;
-            height: auto;
-        }
-
-        a {
-            color: var(--primary);
-            text-decoration: none;
-            transition: color var(--transition-fast);
-        }
-
-        a:hover {
-            color: var(--primary-hover);
-        }
-
-        :focus {
-            outline: 2px solid var(--border-focus);
-            outline-offset: 2px;
-        }
-
-        :focus:not(:focus-visible) {
-            outline: none;
-        }
-
-        /* 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;
-        }
-
-        /* Skip Link */
-        .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;
-        }
-
-        /* Header */
-        .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);
-            transition: all var(--transition-normal);
-        }
-
-        [data-theme="dark"] .site-header {
-            background: rgba(15, 23, 42, 0.85);
-        }
-
-        .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;
-            transition: all var(--transition-normal);
-            padding: var(--space-sm) var(--space-lg);
-            border-radius: var(--radius-lg);
-        }
-
-        .site-title:hover {
-            color: var(--primary);
-            background: var(--bg-secondary);
-            transform: translateY(-1px);
-        }
-
-        .logo-icon {
-            width: 28px;
-            height: 28px;
-            color: var(--primary);
-            transition: transform var(--transition-normal);
-        }
-
-        .site-title:hover .logo-icon {
-            transform: rotate(-5deg) scale(1.1);
-        }
-
-        .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);
-            transition: all var(--transition-fast);
-            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);
-            transition: all var(--transition-fast);
-            transform: translateX(-50%);
-        }
-
-        .nav-link:hover {
-            color: var(--primary);
-            background: var(--bg-secondary);
-        }
-
-        .nav-link:hover::before {
-            width: 80%;
-        }
-
-        .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);
-            cursor: pointer;
-            transition: all var(--transition-fast);
-        }
-
-        .dark-mode-toggle:hover {
-            background: var(--bg-secondary);
-            border-color: var(--primary);
-            transform: scale(1.05);
-        }
-
-        .sun-icon, .moon-icon {
-            width: 20px;
-            height: 20px;
-            transition: all var(--transition-fast);
-        }
-
-        .moon-icon {
-            display: none;
-        }
-
-        [data-theme="dark"] .sun-icon {
-            display: none;
-        }
-
-        [data-theme="dark"] .moon-icon {
-            display: block;
-        }
-
-        /* 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%);
-            pointer-events: none;
-        }
-
-        [data-theme="dark"] .hero-section::before {
-            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;
-        }
-
-        .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);
-        }
-
-        /* 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;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            min-width: 160px;
-            justify-content: center;
-            transition: all var(--transition-fast);
-        }
-
-        .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);
-        }
-
-        /* Sections */
-        .section {
-            padding: var(--space-8xl) 0;
-            position: relative;
-        }
-
-        .section:nth-child(even) {
-            background: var(--bg-secondary);
-        }
-
-        .section-header {
-            text-align: center;
-            margin-bottom: var(--space-6xl);
-        }
-
-        .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;
-        }
-
-            /* Features Grid - Improved */
-        .features-grid {
-            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;
-        }
-
-        .benefit-card:hover {
-            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);
-        }
-
-        .benefit-card:hover .icon-badge {
-            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);
-        }
-
-        .benefit-card p {
-            margin: 0;
-            color: var(--text-secondary);
-            font-size: var(--text-xs);
-            line-height: 1.4;
-        }
-
-        /* Meta Chips */
-        .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;
-        }
-
-        /* Alert Components */
-        .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);
-        }
-
-        .alert-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, 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;
-        }
-
-        /* Speed Test Section - Improved with Project Support Styles */
-        .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;
-        }
-
-        .speed-header {
-            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);
-        }
-
-        .speed-header p {
-            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);
-        }
-
-        .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;
-        }
-
-        .speed-card:hover {
-            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);
-        }
-
-        .speed-card .speed-test-label {
-            font-size: var(--text-sm);
-            color: var(--text-secondary);
-        }
-
-        /* Real-World Test - Improved */
-        .real-world-test {
-            background: var(--bg-elevated);
-            border-radius: var(--radius-2xl);
-            border: 1px solid var(--border-primary);
-            padding: var(--space-4xl);
-            margin: var(--space-3xl) 0;
-            box-shadow: var(--shadow-sm);
-        }
-
-        .real-world-header {
-            text-align: center;
-            margin-bottom: var(--space-3xl);
-        }
-
-        .real-world-header h3 {
-            margin: 0 0 var(--space-md);
-            font-size: var(--text-2xl);
-            font-weight: var(--font-bold);
-            color: var(--text-primary);
-        }
-
-        .stepper {
-            counter-reset: step;
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            display: grid;
-            gap: var(--space-xl);
-        }
-
-        .stepper li {
-            display: flex;
-            align-items: flex-start;
-            gap: var(--space-lg);
-            padding: var(--space-xl);
-            background: var(--bg-secondary);
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--border-primary);
-            transition: all var(--transition-normal);
-        }
-
-        .stepper li:hover {
-            border-color: var(--primary);
-            transform: translateX(4px);
-        }
-
-        .stepper li::before {
-            counter-increment: step;
-            content: counter(step);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border-radius: var(--radius-full);
-            background: var(--primary);
-            color: white;
-            font-size: var(--text-sm);
-            font-weight: var(--font-bold);
-            flex-shrink: 0;
-        }
-
-        .step-content {
-            flex: 1;
-        }
-
-        .step-content strong {
-            display: block;
-            color: var(--text-primary);
-            font-weight: var(--font-semibold);
-            margin-bottom: var(--space-xs);
-        }
-
-        .step-description {
-            color: var(--text-secondary);
-            font-size: var(--text-sm);
-            line-height: 1.5;
-        }
-
-        /* Accordion - Improved */
-        .accordion {
-            border: 1px solid var(--border-primary);
-            border-radius: var(--radius-xl);
-            background: var(--bg-elevated);
-            margin: var(--space-lg) 0;
-            overflow: hidden;
-            transition: all var(--transition-normal);
-        }
-
-        .accordion:hover {
-            border-color: var(--primary);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .accordion > summary {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: var(--space-md);
-            padding: var(--space-xl);
-            font-weight: var(--font-semibold);
-            cursor: pointer;
-            list-style: none;
-            background: var(--bg-primary);
-            transition: all var(--transition-fast);
-        }
-
-        .accordion > summary::-webkit-details-marker {
-            display: none;
-        }
-
-        .accordion > summary:hover {
-            background: var(--bg-secondary);
-        }
-
-        .accordion[open] > summary {
-            background: var(--bg-secondary);
-            border-bottom: 1px solid var(--border-primary);
-        }
-
-        .chevron {
-            width: 20px;
-            height: 20px;
-            color: var(--text-tertiary);
-            transition: transform var(--transition-normal);
-        }
-
-        .accordion[open] .chevron {
-            transform: rotate(180deg);
-        }
-
-        .accordion-content {
-            padding: var(--space-xl);
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-
-
-
-        /* Important Notes - Minimal Design */
-        .important-notes-grid {
-            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);
-        }
-
-        .note-card:hover {
-            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;
-        }
-
-        .note-content h3 {
-            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;
-        }
-
-        /* Resources Section - Better Layout */
-        .resources-categories {
-            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);
-        }
-
-        .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);
-        }
-
-        .resource-category-icon {
-            width: 28px;
-            height: 28px;
-        }
-
-        .resource-list {
-            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);
-        }
-
-        .resource-item:hover {
-            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);
-        }
-
-        .resource-item span {
-            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;
-        }
-
-        .table-wrapper {
-            overflow-x: auto;
-            border-radius: var(--radius-2xl);
-        }
-
-        table {
-            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);
-        }
-
-        th {
-            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);
-        }
-.pricing-table .service-name{
-         color: inherit;
+[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)
+}
+
+img,
+video,
+canvas {
+    max-width: 100%;
+    height: auto
+}
+
+a:hover {
+    color: var(--primary-hover)
+}
+
+:focus:not(:focus-visible) {
+    outline: none
+}
+
+.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
+}
+
+[data-theme="dark"] .site-header {
+    background: rgba(15, 23, 42, .85)
+}
+
+.site-title:hover {
+    color: var(--primary);
+    background: var(--bg-secondary);
+    transform: translateY(-1px)
+}
+
+.logo-icon {
+    transition: transform var(--transition-normal)
+}
+
+.site-title:hover .logo-icon {
+    transform: rotate(-5deg) scale(1.1)
+}
+
+.nav-link {
+    transition: all var(--transition-fast)
+}
+
+.nav-link::before {
+    transition: all var(--transition-fast)
+}
+
+.nav-link:hover {
+    color: var(--primary);
+    background: var(--bg-secondary)
+}
+
+.nav-link:hover::before {
+    width: 80%
+}
+
+.dark-mode-toggle {
+    cursor: pointer;
+    transition: all var(--transition-fast)
+}
+
+.dark-mode-toggle:hover {
+    background: var(--bg-secondary);
+    border-color: var(--primary);
+    transform: scale(1.05)
+}
+
+[data-theme="dark"] .sun-icon {
+    display: none
+}
+
+[data-theme="dark"] .moon-icon {
+    display: block
+}
+
+[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%)
+}
+
+[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
+}
+
+.btn::before {
+    transition: left .5s
+}
+
+.btn:hover::before {
+    left: 100%
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg)
+}
+
+.btn-secondary:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+    background: var(--bg-secondary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md)
+}
+
+.section:nth-child(even) {
+    background: var(--bg-secondary)
+}
+
+.features-grid {
+    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
+}
+
+.benefit-card:hover {
+    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)
+}
+
+.benefit-card:hover .icon-badge {
+    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)
+}
+
+.benefit-card p {
+    margin: 0;
+    color: var(--text-secondary);
+    font-size: var(--text-xs);
+    line-height: 1.4
+}
+
+.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)
+}
+
+.alert-info {
+    background: rgba(59, 130, 246, .08);
+    border-color: rgba(59, 130, 246, .2);
+    color: var(--info)
+}
+
+.alert-warning {
+    background: rgba(245, 158, 11, .08);
+    border-color: rgba(44, 35, 19, .2);
+    color: var(--warning)
+}
+
+.alert-icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    margin-top: 2px
+}
+
+.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
+}
+
+.speed-header {
+    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)
+}
+
+.speed-header p {
+    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)
+}
+
+.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
+}
+
+.speed-card:hover {
+    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)
+}
+
+.speed-card .speed-test-label {
+    font-size: var(--text-sm);
+    color: var(--text-secondary)
+}
+
+.real-world-test {
+    background: var(--bg-elevated);
+    border-radius: var(--radius-2xl);
+    border: 1px solid var(--border-primary);
+    padding: var(--space-4xl);
+    margin: var(--space-3xl) 0;
+    box-shadow: var(--shadow-sm)
+}
+
+.real-world-header {
+    text-align: center;
+    margin-bottom: var(--space-3xl)
+}
+
+.real-world-header h3 {
+    margin: 0 0 var(--space-md);
+    font-size: var(--text-2xl);
+    font-weight: var(--font-bold);
+    color: var(--text-primary)
+}
+
+.stepper {
+    counter-reset: step;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    gap: var(--space-xl)
+}
+
+.stepper li {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-lg);
+    padding: var(--space-xl);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-primary);
+    transition: all var(--transition-normal)
+}
+
+.stepper li:hover {
+    border-color: var(--primary);
+    transform: translateX(4px)
+}
+
+.stepper li::before {
+    counter-increment: step;
+    content: counter(step);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-full);
+    background: var(--primary);
+    color: white;
+    font-size: var(--text-sm);
+    font-weight: var(--font-bold);
+    flex-shrink: 0
+}
+
+.step-content {
+    flex: 1
+}
+
+.step-content strong {
+    display: block;
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--space-xs)
+}
+
+.step-description {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: 1.5
+}
+
+.accordion {
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-xl);
+    background: var(--bg-elevated);
+    margin: var(--space-lg) 0;
+    overflow: hidden;
+    transition: all var(--transition-normal)
+}
+
+.accordion:hover {
+    border-color: var(--primary);
+    box-shadow: var(--shadow-sm)
+}
+
+.accordion>summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-md);
+    padding: var(--space-xl);
+    font-weight: var(--font-semibold);
+    cursor: pointer;
+    list-style: none;
+    background: var(--bg-primary);
+    transition: all var(--transition-fast)
+}
+
+.accordion>summary::-webkit-details-marker {
+    display: none
+}
+
+.accordion>summary:hover {
+    background: var(--bg-secondary)
+}
+
+.accordion[open]>summary {
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-primary)
+}
+
+.chevron {
+    width: 20px;
+    height: 20px;
+    color: var(--text-tertiary);
+    transition: transform var(--transition-normal)
+}
+
+.accordion[open] .chevron {
+    transform: rotate(180deg)
+}
+
+.accordion-content {
+    padding: var(--space-xl);
+    color: var(--text-secondary);
+    line-height: 1.6
+}
+
+.important-notes-grid {
+    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)
+}
+
+.note-card:hover {
+    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
+}
+
+.note-content h3 {
+    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
+}
+
+.resources-categories {
+    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)
+}
+
+.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)
+}
+
+.resource-category-icon {
+    width: 28px;
+    height: 28px
+}
+
+.resource-list {
+    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)
+}
+
+.resource-item:hover {
+    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)
+}
+
+.resource-item span {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: 1.5
+}
+
+.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
+}
+
+.table-wrapper {
+    overflow-x: auto;
+    border-radius: var(--radius-2xl)
+}
+
+table {
+    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)
+}
+
+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
+}
+
+tr:hover {
+    background: var(--bg-secondary)
+}
+
+.pricing-table .service-name {
+    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);
-
 }
+
 #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,0.06);
+    box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .06);
 }
+
 #file-hosts-table td:first-child {
     background-color: var(--bg-primary);
 }
 
-.filter-results{
+.filter-results {
     text-align: center;
-    padding: 0.1em;
+    padding: .1em;
     font-size: var(--text-sm);
     color: var(--text-secondary);
     font-family: 'Courier New', Courier, monospace;
 }
-        /* Search */
-        .search-section {
-            margin-bottom: var(--space-4xl);
-        }
-
-        .search-container {
-            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;
-        }
-
-        .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);
-        }
-
-        .search-input:focus {
-            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;
-        }
-
-        .search-input:not(:placeholder-shown) + .clear-icon {
-            opacity: 1;
-            visibility: visible;
-        }
-
-        .clear-icon:hover {
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-        }
-
-        /* Status Cards */
-        .status-grid {
-            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;
-        }
-
-        .status-card:hover {
-            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);
-        }
-
-        .service-name {
-            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, 0.2);
-        }
-
-        .status-card p {
-            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;
-        }
-
-        .referral-header h3 {
-            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;
-        }
-
-        .referral-grid {
-            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;
-        }
-
-        .referral-card:hover {
-            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);
-        }
-
-        .referral-badge, .speed-test-label {
-            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;
-        }
-
-        .compare-select-group {
-            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);
-        }
-
-        .select-wrapper {
-            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);
-        }
-
-        select:focus {
-            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;
-        }
-
-        .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);
-        }
-
-        /* Empty States */
-        .empty-state {
-            text-align: center;
-            padding: var(--space-6xl);
-        }
-
-        .empty-state-icon {
-            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);
-        }
-
-        .empty-state p {
-            margin: 0;
-            color: var(--text-secondary);
-        }
-
-        /* Loading States */
-        .loading-state {
-            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);
-        }
-
-        @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-6xl) 0 var(--space-3xl);
-            margin-top: auto;
-        }
-
-        .footer-content {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: var(--space-4xl);
-            margin-bottom: var(--space-4xl);
-        }
-
-        .footer-section h4 {
-            margin: 0 0 var(--space-xl);
-            font-size: var(--text-lg);
-            font-weight: var(--font-semibold);
-            color: var(--text-primary);
-        }
-
-        .footer-section p {
-            margin: 0;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-
-        .footer-section ul {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .footer-section li {
-            margin-bottom: var(--space-sm);
-        }
-
-        .footer-section a {
-            color: var(--text-secondary);
-            transition: color var(--transition-fast);
-        }
-
-        .footer-section a:hover {
-            color: var(--primary);
-        }
-
-        .footer-bottom {
-            text-align: center;
-            padding-top: var(--space-3xl);
-            border-top: 1px solid var(--border-primary);
-        }
-
-        .footer-bottom p {
-            margin: 0;
-            color: var(--text-tertiary);
-            font-size: var(--text-sm);
-        }
-
-        .footer-bottom a {
-            color: var(--primary);
-        }
-
-        /* Back to Top */
-        .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);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: var(--shadow-lg);
-            transition: all var(--transition-normal);
-            opacity: 0;
-            visibility: hidden;
-            transform: translateY(20px);
-            z-index: 50;
-        }
-
-        .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);
-        }
-
-        /* Comparison 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);
-        }
-
-        .comparison-header h3 {
-            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;
-        }
-
-        .comparison-stats .stat {
-            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: 0.05em;
-            font-weight: var(--font-medium);
-        }
-
-        .comparison-stats .stat-value {
-            font-size: var(--text-lg);
-            font-weight: var(--font-bold);
-            color: var(--primary);
-        }
-
-        .comparison-actions {
-            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;
-        }
-
-        .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;
-        }
-
-        .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);
-        }
-
-        .comparison-filters .filter-option:hover {
-            color: var(--text-primary);
-        }
-
-        .comparison-filters input[type="radio"] {
-            width: 16px;
-            height: 16px;
-            margin: 0;
-            cursor: pointer;
-        }
-
-        .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);
-        }
-
-        .comparison-table th,
-        .comparison-table td {
-            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);
-        }
-
-        .comparison-table .provider-header {
-            font-size: var(--text-lg);
-            font-weight: var(--font-bold);
-        }
-
-        .comparison-row:hover {
-            background: var(--bg-secondary);
-        }
-
-        .comparison-hiding {
-            opacity: 0;
-            transform: scale(0.95);
-            transition: all var(--transition-normal);
-        }
-
-        /* Responsive Design */
-        @media (max-width: 1024px) {
-            .container {
-                padding: 0 var(--space-xl);
-            }
-             .resources-categories {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        @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;
-            }
-
-            .age-verification-actions {
-                flex-direction: column;
-            }
-
-            .stepper li {
-                flex-direction: column;
-                text-align: center;
-                gap: var(--space-md);
-            }
-        }
-
-        @media (max-width: 480px) {
-            .container {
-                padding: 0 var(--space-lg);
-            }
-
-            .section {
-                padding: var(--space-5xl) 0;
-            }
-
-            .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);
-            }
-
-            .stat-item:not(:last-child)::after {
-                display: none;
-            }
-        }
-
-        /* Print Styles */
-        @media print {
-            .site-header, .hero-section, .referral-section, 
-            .site-footer, .back-to-top, .dark-mode-toggle {
-                display: none !important;
-            }
-            
-            .section {
-                page-break-inside: avoid;
-            }
-        }
-
-        /* Accessibility */
-        @media (prefers-reduced-motion: reduce) {
-            *, *::before, *::after {
-                animation-duration: 0.01ms !important;
-                animation-iteration-count: 1 !important;
-                transition-duration: 0.01ms !important;
-            }
-            
-            html {
-                scroll-behavior: auto;
-            }
-        }
-
-        @media (prefers-contrast: high) {
-            :root {
-                --border-primary: #000;
-                --text-secondary: #000;
-            }
-            
-            [data-theme="dark"] {
-                --border-primary: #fff;
-                --text-secondary: #fff;
-            }
-        }
-
-        /* Touch Device Optimizations */
-        @media (pointer: coarse) {
-            .nav-link:hover, .btn:hover, 
-            .status-card:hover, .benefit-card:hover {
-                transform: none;
-            }
-        }
-   
\ No newline at end of file
+
+.search-section {
+    margin-bottom: var(--space-4xl)
+}
+
+.search-container {
+    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
+}
+
+.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)
+}
+
+.search-input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, .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
+}
+
+.search-input:not(:placeholder-shown)+.clear-icon {
+    opacity: 1;
+    visibility: visible
+}
+
+.clear-icon:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary)
+}
+
+.status-grid {
+    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
+}
+
+.status-card:hover {
+    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)
+}
+
+.service-name {
+    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)
+}
+
+.status-card p {
+    margin: 0;
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: 1.5
+}
+
+.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
+}
+
+.referral-header h3 {
+    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
+}
+
+.referral-grid {
+    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
+}
+
+.referral-card:hover {
+    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)
+}
+
+.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
+}
+
+.compare-controls {
+    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
+}
+
+.compare-select-group label {
+    display: block;
+    margin-bottom: var(--space-sm);
+    font-weight: var(--font-medium);
+    color: var(--text-primary)
+}
+
+.select-wrapper {
+    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)
+}
+
+select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, .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
+}
+
+.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)
+}
+
+.empty-state {
+    text-align: center;
+    padding: var(--space-6xl)
+}
+
+.empty-state-icon {
+    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)
+}
+
+.empty-state p {
+    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)
+}
+
+.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)
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg)
+    }
+
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+.site-footer {
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border-primary);
+    padding: var(--space-6xl) 0 var(--space-3xl);
+    margin-top: auto
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-4xl);
+    margin-bottom: var(--space-4xl)
+}
+
+.footer-section h4 {
+    margin: 0 0 var(--space-xl);
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary)
+}
+
+.footer-section p {
+    margin: 0;
+    color: var(--text-secondary);
+    line-height: 1.6
+}
+
+.footer-section ul {
+    list-style: none;
+    padding: 0;
+    margin: 0
+}
+
+.footer-section li {
+    margin-bottom: var(--space-sm)
+}
+
+.footer-section a {
+    color: var(--text-secondary);
+    transition: color var(--transition-fast)
+}
+
+.footer-section a:hover {
+    color: var(--primary)
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: var(--space-3xl);
+    border-top: 1px solid var(--border-primary)
+}
+
+.footer-bottom p {
+    margin: 0;
+    color: var(--text-tertiary);
+    font-size: var(--text-sm)
+}
+
+.footer-bottom a {
+    color: var(--primary)
+}
+
+.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)
+}
+
+.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)
+}
+
+.comparison-header h3 {
+    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
+}
+
+.comparison-stats .stat {
+    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)
+}
+
+.comparison-stats .stat-value {
+    font-size: var(--text-lg);
+    font-weight: var(--font-bold);
+    color: var(--primary)
+}
+
+.comparison-actions {
+    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
+}
+
+.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
+}
+
+.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)
+}
+
+.comparison-filters .filter-option:hover {
+    color: var(--text-primary)
+}
+
+.comparison-filters input[type="radio"] {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    cursor: pointer
+}
+
+.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)
+}
+
+.comparison-table th,
+.comparison-table td {
+    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)
+}
+
+.comparison-table .provider-header {
+    font-size: var(--text-lg);
+    font-weight: var(--font-bold)
+}
+
+.comparison-row:hover {
+    background: var(--bg-secondary)
+}
+
+.comparison-hiding {
+    opacity: 0;
+    transform: scale(.95);
+    transition: all var(--transition-normal)
+}
+
+@media (max-width:1024px) {
+    .resources-categories {
+        grid-template-columns: 1fr
+    }
+}
+
+@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)
+    }
+}
+
+@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)
+    }
+}
+
+@media print {
+
+    .site-header,
+    .hero-section,
+    .referral-section,
+    .site-footer,
+    .back-to-top,
+    .dark-mode-toggle {
+        display: none !important
+    }
+
+    .section {
+        page-break-inside: avoid
+    }
+}
+
+@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 77cf6fb..364cd76 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,20 +1,54 @@
 <!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">
-    <link rel="canonical" href="https://debrid-services-comparison.netlify.app/">
-    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <script src="js/app.js"></script>
-    <link rel="stylesheet" href="css/styles.css">
+  <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/">
+
+  <!-- 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)">
+
+  <!-- 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">
+
+  <!-- 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>
+
+  <!-- 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">
+
+  <!-- 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>
+
     <script>
         (function(){ 
             try{ 
@@ -26,6 +60,13 @@
             } 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-8xl) 0;position:relative}.section:nth-child(even){background:var(--bg-secondary)}.section-header{text-align:center;margin-bottom:var(--space-6xl)}.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-5xl) 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>
+
+    <link rel="stylesheet" href="css/styles.css">
+      <script src="js/app.js" defer></script>
+      
 </head>
 <body>
     <a class="skip-link" href="#main-content">Skip to main content</a>