{"id":30,"date":"2026-05-28T01:36:21","date_gmt":"2026-05-28T01:36:21","guid":{"rendered":"https:\/\/aiscamhunter.com\/?page_id=30"},"modified":"2026-06-11T21:06:34","modified_gmt":"2026-06-11T21:06:34","slug":"aiscamhunter-smart-protection-real-peace-of-mind","status":"publish","type":"page","link":"https:\/\/aiscamhunter.com\/es\/","title":{"rendered":"AIScamHunter : Smart Protection, Real Peace of Mind"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\n\n\n \n \n AIScamHunter \u2013 AI-Powered Scam Protection<\/title>\n <meta name=\"description\" content=\"Browser extension powered by AI that protects against phishing, crypto drainers, and trackers in real-time.\">\n\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n dark: { 800: '#0d1117', 900: '#060a13', 950: '#030712' },\n neon: '#00ff88',\n 'neon-blue': '#00d4ff',\n 'neon-purple': '#a855f7',\n 'neon-pink': '#ec4899',\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n mono: ['JetBrains Mono', 'monospace'],\n },\n },\n },\n };\n <\/script>\n\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/react@18.2.0\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/react-dom@18.2.0\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n transition: background-color 0.5s ease, color 0.5s ease;\n }\n html.dark body { background-color: #030712; color: #e2e8f0; }\n html:not(.dark) body { background-color: #f8fafc; color: #1e293b; }\n\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n html.dark ::-webkit-scrollbar-track { background: #060a13; }\n html.dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00ff88, #00d4ff); border-radius: 3px; }\n html:not(.dark) ::-webkit-scrollbar-track { background: #f1f5f9; }\n html:not(.dark) ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #059669, #0891b2); border-radius: 3px; }\n\n .gradient-text {\n background: linear-gradient(135deg, #00ff88, #00d4ff, #a855f7, #00ff88);\n background-size: 300% 300%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: gradientShift 4s ease infinite;\n }\n .gradient-text-static {\n background: linear-gradient(135deg, #00ff88, #00d4ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n html:not(.dark) .gradient-text {\n background: linear-gradient(135deg, #047857, #0e7490, #7c3aed, #047857);\n background-size: 300% 300%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: gradientShift 4s ease infinite;\n }\n html:not(.dark) .gradient-text-static {\n background: linear-gradient(135deg, #047857, #0e7490);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n @keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }\n @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }\n @keyframes floatReverse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(15px); } }\n @keyframes shieldPulse {\n 0%,100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(0,255,136,0.3)); }\n 50% { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(0,255,136,0.6)); }\n }\n @keyframes morphBlob {\n 0%,100% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; }\n 50% { border-radius: 50% 60% 30% 60% \/ 30% 60% 70% 40%; }\n }\n @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }\n @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\n @keyframes pulseRing { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }\n @keyframes borderGlow {\n 0%,100% { border-color: rgba(0,255,136,0.15); }\n 50% { border-color: rgba(0,255,136,0.4); }\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeInScale {\n from { opacity: 0; transform: scale(0.97); }\n to { opacity: 1; transform: scale(1); }\n }\n @keyframes pulseSoft {\n 0%,100% { opacity: 0.85; }\n 50% { opacity: 1; }\n }\n @keyframes langFloat {\n 0%,100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-12px) rotate(2deg); }\n }\n @keyframes glowPulse {\n 0%,100% { box-shadow: 0 0 20px rgba(0,255,136,0.3), 0 0 40px rgba(0,255,136,0.1); }\n 50% { box-shadow: 0 0 40px rgba(0,255,136,0.6), 0 0 80px rgba(0,255,136,0.2); }\n }\n @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n @keyframes gridDrift { 0% { background-position: 0 0, 0 0; } 100% { background-position: 60px 60px, 60px 0; } }\n @keyframes scanPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }\n\n .animate-float { animation: float 6s ease-in-out infinite; }\n .animate-float-d { animation: float 6s ease-in-out 2s infinite; }\n .animate-float-r { animation: floatReverse 7s ease-in-out infinite; }\n .animate-shield { animation: shieldPulse 3s ease-in-out infinite; }\n .animate-morph { animation: morphBlob 15s ease-in-out infinite; }\n .animate-blink { animation: blink 1s step-end infinite; }\n .animate-border-glow { animation: borderGlow 3s ease-in-out infinite; }\n\n html.dark .grid-bg {\n background-image: linear-gradient(rgba(0,255,136,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0,255,136,0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n }\n html:not(.dark) .grid-bg {\n background-image: linear-gradient(rgba(5,150,105,0.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(5,150,105,0.05) 1px, transparent 1px);\n background-size: 60px 60px;\n }\n\n .feature-card { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }\n .feature-card::before {\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(0,255,136,0.04), transparent);\n transition: left 0.6s ease;\n }\n .feature-card:hover::before { left: 100%; }\n html.dark .feature-card:hover { transform: translateY(-6px); box-shadow: 0 25px 60px -12px rgba(0,255,136,0.15); }\n html:not(.dark) .feature-card:hover { transform: translateY(-6px); box-shadow: 0 25px 60px -12px rgba(5,150,105,0.15); }\n\n .btn-primary { position: relative; overflow: hidden; transition: all 0.3s ease; }\n .btn-primary::before {\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transition: left 0.5s ease;\n }\n .btn-primary:hover::before { left: 100%; }\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(0,255,136,0.4); }\n\n html.dark .section-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(0,255,136,0.15), rgba(0,212,255,0.15), transparent);\n }\n html:not(.dark) .section-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(5,150,105,0.2), rgba(8,145,178,0.2), transparent);\n }\n\n .marquee-track { display: flex; animation: marqueeScroll 40s linear infinite; }\n .marquee-track:hover { animation-play-state: paused; }\n\n .browser-card { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }\n .browser-card:hover { transform: translateY(-8px) scale(1.05); }\n\n .feature-module-card { transition: all 0.4s ease; position: relative; overflow: hidden; }\n .feature-module-card::after {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(circle at 30% 20%, rgba(0,255,136,0.03), transparent 80%);\n pointer-events: none; opacity: 0; transition: opacity 0.4s ease;\n }\n .feature-module-card:hover::after { opacity: 1; }\n\n .step-card { transition: all 0.5s cubic-bezier(0.4,0,0.2,1); }\n .step-card:hover { transform: translateY(-8px); }\n\n .category-tab { transition: all 0.3s ease; backdrop-filter: blur(4px); }\n\n .noise-overlay {\n position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.012;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n }\n\n \/* =============================================\n LEFT VERTICAL NAV PILL \u2014 HELP CENTER STYLE\n ============================================= *\/\n .nav-pill {\n position: fixed;\n left: 24px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10000;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 14px 10px;\n border-radius: 28px;\n backdrop-filter: blur(40px) saturate(180%);\n -webkit-backdrop-filter: blur(40px) saturate(180%);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n user-select: none;\n }\n html.dark .nav-pill {\n background: rgba(6, 11, 24, 0.85);\n border: 1px solid rgba(16, 185, 129, 0.22);\n box-shadow: 0 25px 60px -15px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04) inset;\n }\n html:not(.dark) .nav-pill {\n background: rgba(255, 255, 255, 0.92);\n border: 1px solid rgba(15, 23, 42, 0.1);\n box-shadow: 0 20px 50px -12px rgba(15,23,42,0.15), 0 0 0 1px rgba(255,255,255,0.8) inset;\n }\n .nav-pill::before {\n content: ''; position: absolute; inset: -2px; border-radius: 30px; padding: 1px;\n background: linear-gradient(180deg, #10b981, transparent 40%, transparent 60%, #2dd4bf);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor; mask-composite: exclude;\n opacity: 0.3; pointer-events: none; transition: opacity 0.4s;\n }\n .nav-pill:hover::before { opacity: 0.7; }\n .nav-pill::after {\n content: ''; position: absolute; inset: -8px; border-radius: 36px;\n background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.35), transparent 70%);\n opacity: 0; z-index: -1; filter: blur(20px);\n transition: opacity 0.5s; pointer-events: none;\n }\n .nav-pill:hover::after { opacity: 0.5; }\n\n .nav-pill-logo {\n width: 48px; height: 48px; display: flex; align-items: center;\n justify-content: center; background: transparent; border: none;\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n cursor: pointer; text-decoration: none; position: relative; margin-bottom: 4px;\n }\n .nav-pill-logo:hover { transform: scale(1.12) rotate(-4deg); }\n .nav-pill-logo img {\n width: 48px; height: 48px; object-fit: contain;\n filter: drop-shadow(0 4px 12px rgba(16,185,129,0.35));\n transition: filter 0.35s;\n }\n .nav-pill-logo:hover img {\n filter: drop-shadow(0 6px 18px #10b981) drop-shadow(0 0 8px #2dd4bf);\n }\n\n .nav-pill-divider {\n width: 28px; height: 1px; margin: 4px 0;\n background: linear-gradient(90deg, transparent, rgba(16,185,129,0.4), transparent);\n }\n\n .nav-item {\n position: relative; width: 46px; height: 46px; border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n text-decoration: none; border: 1px solid transparent;\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n }\n html.dark .nav-item { color: rgba(232,240,255,0.65); background: rgba(255,255,255,0.03); }\n html:not(.dark) .nav-item { color: #475569; background: rgba(15,23,42,0.04); }\n .nav-item::before {\n content: ''; position: absolute; inset: 0; border-radius: 14px;\n background: linear-gradient(135deg, #10b981, #2dd4bf);\n opacity: 0; transition: opacity 0.3s; z-index: 0;\n }\n .nav-item i {\n position: relative; z-index: 1; font-size: 1rem; transition: transform 0.3s;\n }\n .nav-item:hover {\n color: #fff !important;\n border-color: rgba(16,185,129,0.4);\n transform: translateX(2px);\n box-shadow: 0 6px 18px -4px rgba(16,185,129,0.35);\n }\n .nav-item:hover::before { opacity: 1; }\n .nav-item:hover i { transform: scale(1.15); }\n\n .nav-item-label {\n position: absolute; left: calc(100% + 14px); top: 50%;\n transform: translateY(-50%) translateX(-8px); white-space: nowrap;\n padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 700;\n letter-spacing: 0.3px; pointer-events: none; opacity: 0;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 100;\n }\n html.dark .nav-item-label {\n background: rgba(10,15,27,0.96); color: #e2e8f0;\n border: 1px solid rgba(16,185,129,0.22);\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n }\n html:not(.dark) .nav-item-label {\n background: rgba(255,255,255,0.98); color: #0f172a;\n border: 1px solid rgba(15,23,42,0.1);\n box-shadow: 0 10px 30px rgba(15,23,42,0.1);\n }\n .nav-item-label::before {\n content: ''; position: absolute; left: -5px; top: 50%;\n transform: translateY(-50%) rotate(45deg); width: 10px; height: 10px;\n }\n html.dark .nav-item-label::before {\n background: rgba(10,15,27,0.96);\n border-left: 1px solid rgba(16,185,129,0.22);\n border-bottom: 1px solid rgba(16,185,129,0.22);\n }\n html:not(.dark) .nav-item-label::before {\n background: rgba(255,255,255,0.98);\n border-left: 1px solid rgba(15,23,42,0.1);\n border-bottom: 1px solid rgba(15,23,42,0.1);\n }\n .nav-item:hover .nav-item-label { opacity: 1; transform: translateY(-50%) translateX(0); }\n\n \/* =============================================\n RIGHT THEME PILL \u2014 HELP CENTER STYLE\n ============================================= *\/\n .theme-pill {\n position: fixed; right: 24px; top: 50%; transform: translateY(-50%);\n z-index: 10000; display: flex; flex-direction: column; align-items: center;\n gap: 12px; backdrop-filter: blur(40px) saturate(180%);\n -webkit-backdrop-filter: blur(40px) saturate(180%);\n border-radius: 40px; padding: 16px 12px; cursor: pointer;\n transition: all 0.4s; user-select: none;\n }\n html.dark .theme-pill {\n background: rgba(6,11,24,0.85);\n border: 1px solid rgba(16,185,129,0.22);\n box-shadow: 0 25px 60px -15px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04) inset;\n }\n html:not(.dark) .theme-pill {\n background: rgba(255,255,255,0.92);\n border: 1px solid rgba(15,23,42,0.1);\n box-shadow: 0 20px 50px -12px rgba(15,23,42,0.15), 0 0 0 1px rgba(255,255,255,0.8) inset;\n }\n .theme-pill:hover {\n border-color: rgba(16,185,129,0.4) !important;\n box-shadow: 0 0 35px rgba(16,185,129,0.35) !important;\n }\n .pill-track {\n width: 28px; height: 56px; border-radius: 14px; position: relative; overflow: hidden;\n transition: background 0.3s;\n }\n html.dark .pill-track { background: #1e293b; }\n html:not(.dark) .pill-track { background: #cbd5e1; }\n .pill-knob {\n width: 24px; height: 24px; border-radius: 50%;\n position: absolute; top: 2px; left: 2px;\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: 0 2px 8px rgba(0,0,0,0.25);\n }\n html.dark .pill-knob { background: #e2e8f0; }\n html:not(.dark) .pill-knob { background: #fff; top: 30px; }\n .theme-pill span { font-size: 1.1rem; transition: opacity 0.3s; }\n .theme-pill:active { transform: translateY(-50%) scale(0.97); }\n\n \/* =============================================\n FOOTER \u2014 HELP CENTER STYLE (FULL WIDTH FIXED)\n ============================================= *\/\n .site-footer {\n position: relative;\n margin-top: 0;\n margin-left: 0 !important;\n margin-right: 0 !important;\n padding: 5rem 0 2.2rem;\n border-top: none;\n overflow: hidden;\n isolation: isolate;\n width: 100vw !important;\n max-width: 100vw !important;\n left: 50%;\n right: 50%;\n margin-left: -50vw !important;\n margin-right: -50vw !important;\n display: block;\n }\n .site-footer * { box-sizing: border-box; }\n .site-footer::before {\n content: ''; position: absolute; inset: 0;\n background:\n linear-gradient(180deg, transparent 0%, rgba(16,185,129,0.025) 40%, rgba(16,185,129,0.04) 100%),\n radial-gradient(ellipse 80% 60% at 50% 100%, rgba(16,185,129,0.06), transparent 70%);\n z-index: -2; pointer-events: none;\n }\n html:not(.dark) .site-footer::before {\n background:\n linear-gradient(180deg, transparent 0%, rgba(5,150,105,0.02) 40%, rgba(5,150,105,0.035) 100%),\n radial-gradient(ellipse 80% 60% at 50% 100%, rgba(5,150,105,0.05), transparent 70%);\n }\n .site-footer::after {\n content: ''; position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(16,185,129,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(16,185,129,0.04) 1px, transparent 1px);\n background-size: 60px 60px;\n mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);\n -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);\n opacity: 0.5; z-index: -1;\n animation: gridDrift 40s linear infinite; pointer-events: none;\n }\n html:not(.dark) .site-footer::after {\n background-image:\n linear-gradient(rgba(5,150,105,0.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(5,150,105,0.05) 1px, transparent 1px);\n opacity: 0.4;\n }\n .footer-top-line {\n position: absolute; top: 0; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg,\n transparent 0%, rgba(16,185,129,0.1) 25%,\n rgba(16,185,129,0.5) 50%,\n rgba(16,185,129,0.1) 75%, transparent 100%);\n animation: scanPulse 5s ease-in-out infinite;\n }\n html:not(.dark) .footer-top-line {\n background: linear-gradient(90deg,\n transparent 0%, rgba(5,150,105,0.08) 25%,\n rgba(5,150,105,0.35) 50%,\n rgba(5,150,105,0.08) 75%, transparent 100%);\n }\n .footer-inner {\n max-width: 1100px !important;\n margin: 0 auto !important;\n padding: 0 24px !important;\n text-align: center !important;\n position: relative;\n z-index: 1;\n display: block !important;\n width: 100%;\n }\n .footer-brand {\n display: inline-block !important;\n margin: 0 auto 1.5rem !important;\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n filter: drop-shadow(0 6px 18px rgba(16,185,129,0.35));\n text-decoration: none;\n }\n .footer-brand:hover {\n transform: translateY(-3px) scale(1.03);\n filter: drop-shadow(0 10px 24px #10b981) drop-shadow(0 0 10px #2dd4bf);\n }\n .footer-brand img {\n height: 48px !important;\n width: auto !important;\n max-width: 220px !important;\n object-fit: contain !important;\n display: block !important;\n margin: 0 auto !important;\n }\n .footer-links {\n display: flex !important;\n flex-wrap: wrap !important;\n gap: 0.5rem 2rem !important;\n justify-content: center !important;\n align-items: center !important;\n margin: 1.5rem auto 2rem !important;\n padding: 0 !important;\n width: 100%;\n }\n .footer-links a {\n position: relative;\n font-size: 0.9rem !important;\n font-weight: 500 !important;\n transition: color 0.25s;\n text-decoration: none !important;\n padding: 0.3rem 0 !important;\n }\n html.dark .footer-links a { color: #9fb3c8 !important; }\n html:not(.dark) .footer-links a { color: #475569 !important; }\n .footer-links a::after {\n content: ''; position: absolute; left: 0; bottom: 0;\n width: 0; height: 2px;\n background: linear-gradient(90deg, #10b981, #2dd4bf);\n transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: 2px;\n }\n html.dark .footer-links a:hover { color: #e2e8f0 !important; }\n html:not(.dark) .footer-links a:hover { color: #1e293b !important; }\n .footer-links a:hover::after { width: 100%; }\n .footer-divider {\n width: 60% !important;\n max-width: 400px !important;\n height: 1px !important;\n background: linear-gradient(90deg, transparent, rgba(16,185,129,0.4), transparent) !important;\n margin: 1.5rem auto !important;\n border: none !important;\n display: block !important;\n }\n html:not(.dark) .footer-divider {\n background: linear-gradient(90deg, transparent, rgba(5,150,105,0.35), transparent) !important;\n }\n .footer-copy {\n font-size: 0.82rem !important;\n letter-spacing: 0.2px;\n text-align: center !important;\n margin: 0 auto !important;\n }\n html.dark .footer-copy { color: #9fb3c8; }\n html:not(.dark) .footer-copy { color: #475569; }\n .footer-copy strong {\n font-weight: 700;\n background: linear-gradient(135deg, #10b981, #2dd4bf);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n \/* =============================================\n SCENARIO TABS\n ============================================= *\/\n .scenario-tab {\n position: relative; display: flex; align-items: center;\n gap: 12px; padding: 14px 18px; border-radius: 16px;\n cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden; background: transparent; border: none;\n width: 100%; text-align: left; font-family: inherit;\n }\n html.dark .scenario-tab { color: #94a3b8; }\n html:not(.dark) .scenario-tab { color: #475569; }\n .scenario-tab::before {\n content: ''; position: absolute; inset: 0; border-radius: 16px;\n background: linear-gradient(135deg, rgba(0,255,136,0.08), rgba(0,212,255,0.08));\n opacity: 0; transition: opacity 0.4s; z-index: 0;\n }\n html:not(.dark) .scenario-tab::before {\n background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(8,145,178,0.08));\n }\n .scenario-tab:hover::before { opacity: 1; }\n html.dark .scenario-tab:hover { color: #fff; }\n html:not(.dark) .scenario-tab:hover { color: #0f172a; }\n .scenario-tab.is-active::before { opacity: 1; }\n html.dark .scenario-tab.is-active { color: #fff; }\n html:not(.dark) .scenario-tab.is-active { color: #0f172a; }\n .scenario-tab.is-active::after {\n content: ''; position: absolute; left: 0; top: 50%;\n transform: translateY(-50%); width: 4px; height: 60%;\n border-radius: 0 4px 4px 0;\n background: linear-gradient(180deg, #00ff88, #00d4ff);\n box-shadow: 0 0 16px rgba(0,255,136,0.6);\n }\n html:not(.dark) .scenario-tab.is-active::after {\n background: linear-gradient(180deg, #059669, #0891b2);\n box-shadow: 0 0 16px rgba(5,150,105,0.4);\n }\n .scenario-tab > * { position: relative; z-index: 1; }\n .scenario-tab-icon {\n flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px; transition: all 0.4s;\n }\n html.dark .scenario-tab-icon { background: rgba(255,255,255,0.04); }\n html:not(.dark) .scenario-tab-icon { background: rgba(0,0,0,0.04); }\n .scenario-tab.is-active .scenario-tab-icon {\n background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,212,255,0.15));\n box-shadow: 0 4px 16px rgba(0,255,136,0.2); transform: scale(1.05);\n }\n html:not(.dark) .scenario-tab.is-active .scenario-tab-icon {\n background: linear-gradient(135deg, rgba(5,150,105,0.18), rgba(8,145,178,0.18));\n box-shadow: 0 4px 16px rgba(5,150,105,0.2);\n }\n .scenario-tab-label { font-size: 13px; font-weight: 600; line-height: 1.3; }\n .scenario-tab-sub { font-size: 10px; opacity: 0.6; margin-top: 2px; font-family: 'JetBrains Mono', monospace; }\n\n @media (max-width: 1023px) {\n .scenario-tab {\n flex-shrink: 0; flex-direction: column;\n text-align: center; padding: 12px 14px; min-width: 110px;\n }\n .scenario-tab.is-active::after {\n top: auto; bottom: 0; left: 50%;\n transform: translateX(-50%);\n width: 60%; height: 3px;\n border-radius: 4px 4px 0 0;\n }\n .scenario-tab-icon { width: 36px; height: 36px; }\n .scenario-tab-label { font-size: 11px; }\n .scenario-tab-sub { display: none; }\n }\n\n \/* =============================================\n BROWSER MOCKUP\n ============================================= *\/\n .browser-mockup {\n position: relative; width: 100%; border-radius: 18px; overflow: hidden;\n box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);\n transition: all 0.5s cubic-bezier(0.4,0,0.2,1);\n animation: fadeInScale 0.5s ease;\n }\n html:not(.dark) .browser-mockup {\n box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);\n }\n .browser-addressbar {\n display: flex; align-items: center; gap: 14px; padding: 14px 18px;\n position: relative; z-index: 2;\n }\n html.dark .browser-addressbar {\n background: linear-gradient(180deg, #1a2030, #141a26);\n border-bottom: 1px solid rgba(255,255,255,0.05);\n }\n html:not(.dark) .browser-addressbar {\n background: linear-gradient(180deg, #f8fafc, #f1f5f9);\n border-bottom: 1px solid rgba(0,0,0,0.06);\n }\n .browser-traffic-lights { display: flex; gap: 7px; flex-shrink: 0; }\n .browser-traffic-lights span {\n width: 12px; height: 12px; border-radius: 50%;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);\n }\n .browser-traffic-lights span:nth-child(1) { background: #ff5f56; }\n .browser-traffic-lights span:nth-child(2) { background: #ffbd2e; }\n .browser-traffic-lights span:nth-child(3) { background: #27c93f; }\n .browser-url-pill {\n flex: 1; display: flex; align-items: center; gap: 10px;\n padding: 10px 16px; border-radius: 999px;\n font-family: 'JetBrains Mono', monospace; font-size: 13px;\n min-width: 0; transition: all 0.3s;\n }\n html.dark .browser-url-pill {\n background: #0d121d; border: 1px solid rgba(255,255,255,0.04); color: #cbd5e1;\n }\n html:not(.dark) .browser-url-pill {\n background: #fff; border: 1px solid rgba(0,0,0,0.08);\n color: #334155; box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n }\n .browser-url-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .browser-status-badge {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 8px 14px; border-radius: 999px;\n font-size: 11px; font-weight: 800;\n text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;\n animation: pulseSoft 2s ease-in-out infinite;\n }\n .browser-status-badge.blocked {\n background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(220,38,38,0.22));\n color: #fca5a5; border: 1px solid rgba(239,68,68,0.3);\n box-shadow: 0 4px 16px rgba(239,68,68,0.2);\n }\n html:not(.dark) .browser-status-badge.blocked {\n background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(220,38,38,0.18));\n color: #b91c1c; border: 1px solid rgba(239,68,68,0.25);\n }\n .browser-status-badge .dot {\n width: 6px; height: 6px; border-radius: 50%;\n background: #ef4444; box-shadow: 0 0 8px #ef4444;\n }\n .browser-content { position: relative; width: 100%; overflow: hidden; }\n html.dark .browser-content { background: #0a0f1a; }\n html:not(.dark) .browser-content { background: #f8fafc; }\n .browser-content img { display: block; width: 100%; height: auto; object-fit: cover; }\n .browser-empty {\n width: 100%; min-height: 380px;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n padding: 50px 30px; position: relative; overflow: hidden;\n }\n html.dark .browser-empty {\n background: radial-gradient(ellipse at top, rgba(0,255,136,0.05), transparent 60%),\n radial-gradient(ellipse at bottom, rgba(0,212,255,0.05), transparent 60%), #0a0f1a;\n }\n html:not(.dark) .browser-empty {\n background: radial-gradient(ellipse at top, rgba(5,150,105,0.06), transparent 60%),\n radial-gradient(ellipse at bottom, rgba(8,145,178,0.06), transparent 60%), #f8fafc;\n }\n .browser-empty-icon {\n width: 100px; height: 100px; border-radius: 26px;\n display: flex; align-items: center; justify-content: center;\n font-size: 48px; margin-bottom: 20px; position: relative;\n box-shadow: 0 20px 50px rgba(0,0,0,0.3);\n }\n .browser-empty-icon::before {\n content: ''; position: absolute; inset: -3px;\n border-radius: 28px; background: inherit;\n filter: blur(20px); opacity: 0.6; z-index: -1;\n }\n .browser-glow {\n position: absolute; inset: -50px; border-radius: 30px;\n filter: blur(90px); opacity: 0.35; z-index: -1;\n pointer-events: none; transition: all 0.6s;\n }\n html:not(.dark) .browser-glow { opacity: 0.18; }\n .browser-mockup-wrap { position: relative; }\n .browser-mockup:hover { transform: translateY(-4px); }\n\n .threat-detail-row {\n display: flex; align-items: center; gap: 14px;\n padding: 14px 16px; border-radius: 14px;\n transition: all 0.3s; animation: fadeIn 0.4s ease both;\n }\n html.dark .threat-detail-row {\n background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.12);\n }\n html:not(.dark) .threat-detail-row {\n background: rgba(254,242,242,0.8); border: 1px solid rgba(239,68,68,0.18);\n }\n .threat-detail-row:hover { transform: translateX(4px); }\n html.dark .threat-detail-row:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); }\n .threat-detail-icon {\n flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n background: rgba(239,68,68,0.15);\n }\n\n @media (max-width: 640px) {\n .browser-addressbar { padding: 10px 12px; gap: 8px; }\n .browser-traffic-lights span { width: 10px; height: 10px; }\n .browser-traffic-lights { gap: 5px; }\n .browser-url-pill { padding: 8px 12px; font-size: 11px; }\n .browser-status-badge { padding: 6px 10px; font-size: 9px; }\n }\n\n \/* =============================================\n LANGUAGES ORBITAL\n ============================================= *\/\n .lang-orbit-container {\n position: relative; width: 100%; max-width: 720px;\n margin: 0 auto; aspect-ratio: 1 \/ 1; max-height: 720px;\n }\n .lang-orbit-center {\n position: absolute; top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n width: 180px; height: 180px; border-radius: 50%;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n z-index: 5;\n background: radial-gradient(circle at 30% 30%, rgba(0,255,136,0.3), transparent 60%),\n radial-gradient(circle at 70% 70%, rgba(0,212,255,0.3), transparent 60%),\n rgba(3,7,18,0.92);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(0,255,136,0.3);\n animation: glowPulse 3s ease-in-out infinite;\n overflow: hidden;\n }\n html:not(.dark) .lang-orbit-center {\n background: radial-gradient(circle at 30% 30%, rgba(5,150,105,0.3), transparent 60%),\n radial-gradient(circle at 70% 70%, rgba(8,145,178,0.3), transparent 60%),\n rgba(255,255,255,0.95);\n border-color: rgba(5,150,105,0.3);\n }\n .lang-orbit-center img { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0,255,136,0.6)); z-index: 2; }\n html:not(.dark) .lang-orbit-center img { filter: drop-shadow(0 0 10px rgba(5,150,105,0.5)); }\n .lang-orbit-center::before {\n content: ''; position: absolute; inset: -10px; border-radius: 50%;\n background: linear-gradient(135deg, #00ff88, #00d4ff, #a855f7);\n opacity: 0.3; filter: blur(30px); z-index: -1;\n }\n .lang-ring {\n position: absolute; top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%; border: 1px dashed rgba(0,255,136,0.15); pointer-events: none;\n }\n html:not(.dark) .lang-ring { border-color: rgba(5,150,105,0.2); }\n .lang-ring.ring-1 { width: 380px; height: 380px; animation: spin 60s linear infinite; }\n .lang-ring.ring-2 { width: 560px; height: 560px; animation: spin 90s linear infinite reverse; }\n .lang-ring.ring-3 { width: 700px; height: 700px; animation: spin 120s linear infinite; }\n .lang-chip {\n position: absolute; top: 50%; left: 50%;\n width: 64px; height: 64px; margin-left: -32px; margin-top: -32px;\n border-radius: 18px; backdrop-filter: blur(20px);\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 4; overflow: hidden;\n }\n html.dark .lang-chip { background: rgba(10,15,26,0.85); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }\n html:not(.dark) .lang-chip { background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }\n .lang-chip::before {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,212,255,0.15));\n opacity: 0; transition: opacity 0.3s;\n }\n .lang-chip:hover { transform: scale(1.25); z-index: 20; }\n html.dark .lang-chip:hover { box-shadow: 0 16px 50px rgba(0,255,136,0.5); border-color: rgba(0,255,136,0.6); }\n html:not(.dark) .lang-chip:hover { box-shadow: 0 16px 50px rgba(5,150,105,0.35); border-color: rgba(5,150,105,0.5); }\n .lang-chip:hover::before { opacity: 1; }\n .lang-chip-flag { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); position: relative; z-index: 1; }\n .lang-chip-code { font-size: 8px; font-weight: 800; letter-spacing: 0.5px; font-family: 'JetBrains Mono', monospace; margin-top: 4px; text-transform: uppercase; position: relative; z-index: 1; }\n html.dark .lang-chip-code { color: rgba(255,255,255,0.6); }\n html:not(.dark) .lang-chip-code { color: rgba(0,0,0,0.55); }\n .lang-chip-tooltip {\n position: absolute; bottom: 100%; left: 50%;\n transform: translateX(-50%) translateY(-8px);\n padding: 6px 12px; border-radius: 8px;\n font-size: 11px; font-weight: 600; white-space: nowrap;\n opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 30;\n }\n html.dark .lang-chip-tooltip { background: #0a0f1a; color: #e2e8f0; border: 1px solid rgba(0,255,136,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }\n html:not(.dark) .lang-chip-tooltip { background: #fff; color: #0f172a; border: 1px solid rgba(5,150,105,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }\n .lang-chip:hover .lang-chip-tooltip { opacity: 1; transform: translateX(-50%) translateY(-12px); }\n .lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 480px; margin: 0 auto; }\n .lang-grid-chip {\n aspect-ratio: 1; border-radius: 18px; backdrop-filter: blur(20px);\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative; overflow: hidden; cursor: pointer;\n animation: langFloat 4s ease-in-out infinite;\n }\n html.dark .lang-grid-chip { background: rgba(10,15,26,0.7); border: 1px solid rgba(255,255,255,0.08); }\n html:not(.dark) .lang-grid-chip { background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }\n .lang-grid-chip:hover { transform: scale(1.08) translateY(-4px); }\n html.dark .lang-grid-chip:hover { border-color: rgba(0,255,136,0.5); box-shadow: 0 12px 30px rgba(0,255,136,0.3); }\n html:not(.dark) .lang-grid-chip:hover { border-color: rgba(5,150,105,0.5); box-shadow: 0 12px 30px rgba(5,150,105,0.2); }\n .lang-grid-chip-flag { font-size: 32px; margin-bottom: 4px; }\n .lang-grid-chip-name { font-size: 10px; font-weight: 700; }\n html.dark .lang-grid-chip-name { color: rgba(255,255,255,0.65); }\n html:not(.dark) .lang-grid-chip-name { color: rgba(0,0,0,0.6); }\n .lang-detect-pulse {\n width: 50px; height: 50px; border-radius: 50%;\n background: linear-gradient(135deg, #00ff88, #00d4ff);\n display: flex; align-items: center; justify-content: center;\n font-size: 22px; box-shadow: 0 0 30px rgba(0,255,136,0.6); position: relative;\n }\n .lang-detect-pulse::before {\n content: ''; position: absolute; inset: -6px; border-radius: 50%;\n border: 2px solid #00ff88; animation: pulseRing 2s ease-out infinite;\n }\n .lang-detect-pulse::after {\n content: ''; position: absolute; inset: -6px; border-radius: 50%;\n border: 2px solid #00d4ff; animation: pulseRing 2s ease-out 1s infinite;\n }\n\n \/* =============================================\n RESPONSIVE PILLS\n ============================================= *\/\n @media (max-width: 768px) {\n .nav-pill {\n left: 50%; top: auto; bottom: 14px;\n transform: translateX(-50%); flex-direction: row;\n padding: 9px 11px; gap: 6px; border-radius: 22px;\n }\n .nav-pill-logo { width: 38px; height: 38px; margin-bottom: 0; margin-right: 4px; }\n .nav-pill-logo img { width: 38px; height: 38px; }\n .nav-pill-divider { width: 1px; height: 26px; margin: 0 4px;\n background: linear-gradient(180deg, transparent, rgba(16,185,129,0.4), transparent); }\n .nav-item { width: 38px; height: 38px; border-radius: 11px; }\n .nav-item-label { display: none; }\n .theme-pill {\n right: 14px; top: 14px; bottom: auto; transform: none;\n flex-direction: row; padding: 7px 11px; gap: 8px; border-radius: 22px;\n }\n .theme-pill:hover { transform: none; }\n .pill-track { width: 42px; height: 22px; border-radius: 12px; }\n .pill-knob { width: 18px; height: 18px; top: 2px; left: 2px; }\n html:not(.dark) .pill-knob { top: 2px; left: 22px; }\n .theme-pill span { font-size: 0.9rem; }\n .site-footer { padding: 4rem 0 95px; }\n }\n @media (max-width: 480px) {\n .nav-pill { padding: 8px 9px; gap: 4px; border-radius: 20px; }\n .nav-pill-logo { width: 34px; height: 34px; }\n .nav-pill-logo img { width: 34px; height: 34px; }\n .nav-item { width: 34px; height: 34px; border-radius: 10px; }\n .nav-item i { font-size: 0.9rem; }\n .theme-pill { padding: 6px 9px; gap: 6px; border-radius: 20px; }\n .pill-track { width: 36px; height: 20px; }\n .pill-knob { width: 16px; height: 16px; }\n html:not(.dark) .pill-knob { top: 2px; left: 18px; }\n .theme-pill span { font-size: 0.8rem; }\n .site-footer { padding: 2.5rem 0 90px; }\n .footer-brand img { height: 36px; }\n .footer-links { flex-direction: column; gap: 0.7rem; align-items: center; }\n }\n\n .browser-soon-overlay {\n position: absolute; inset: 0;\n display: flex; align-items: flex-end; justify-content: center;\n padding-bottom: 2px; z-index: 10; pointer-events: none;\n }\n .browser-soon-badge {\n font-size: 8px; font-weight: 800; letter-spacing: 0.5px;\n padding: 2px 8px; border-radius: 6px;\n text-transform: uppercase; line-height: 1.4;\n }\n\n \/* NEW PREVIEW TABS STYLES (added only for the replacement) *\/\n .preview-tab {\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 24px;\n border-radius: 48px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n background: transparent;\n border: 1px solid transparent;\n font-weight: 600;\n font-size: 0.95rem;\n backdrop-filter: blur(8px);\n }\n html.dark .preview-tab { color: #94a3b8; background: rgba(255,255,255,0.02); }\n html:not(.dark) .preview-tab { color: #475569; background: rgba(0,0,0,0.02); }\n .preview-tab.is-active {\n background: linear-gradient(135deg, rgba(0,255,136,0.12), rgba(0,212,255,0.12));\n border-color: rgba(0,255,136,0.3);\n color: #fff;\n box-shadow: 0 8px 20px rgba(0,255,136,0.2);\n }\n html:not(.dark) .preview-tab.is-active {\n background: linear-gradient(135deg, rgba(5,150,105,0.15), rgba(8,145,178,0.15));\n border-color: rgba(5,150,105,0.4);\n color: #0f172a;\n box-shadow: 0 8px 20px rgba(5,150,105,0.15);\n }\n .preview-tab-icon { font-size: 1.2rem; margin-right: 6px; }\n @media (max-width: 640px) {\n .preview-tab { padding: 10px 16px; gap: 8px; font-size: 0.8rem; }\n }\n .marquee-track-ext {\n display: flex;\n animation: marqueeScroll 45s linear infinite;\n width: max-content;\n will-change: transform;\n }\n .carousel-container:hover .marquee-track-ext { animation-play-state: paused; }\n .preview-image-card {\n flex-shrink: 0;\n width: 360px;\n margin: 0 14px;\n border-radius: 28px;\n overflow: hidden;\n transition: transform 0.3s ease, box-shadow 0.3s;\n box-shadow: 0 20px 35px -12px rgba(0,0,0,0.4);\n }\n .preview-image-card img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.4s; }\n .preview-image-card:hover { transform: scale(1.02); box-shadow: 0 28px 45px -12px rgba(0,255,136,0.25); }\n @media (max-width: 640px) { .preview-image-card { width: 280px; margin: 0 10px; } }\n .single-preview {\n border-radius: 32px;\n overflow: hidden;\n box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);\n transition: transform 0.4s;\n max-width: 880px;\n margin: 0 auto;\n }\n .single-preview img { width: 100%; height: auto; display: block; }\n .single-preview:hover { transform: translateY(-5px); }\n <\/style>\n<\/head>\n<body>\n <div class=\"noise-overlay\"><\/div>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\" data-presets=\"react\">\n\n function useScrollY() {\n const [y, setY] = React.useState(0);\n React.useEffect(() => {\n const h = () => setY(window.scrollY);\n window.addEventListener('scroll', h, { passive: true });\n return () => window.removeEventListener('scroll', h);\n }, []);\n return y;\n }\n\n function useInView(opts = {}) {\n const ref = React.useRef(null);\n const [v, setV] = React.useState(false);\n React.useEffect(() => {\n const el = ref.current; if (!el) return;\n const o = new IntersectionObserver(\n ([e]) => { if (e.isIntersecting) { setV(true); o.unobserve(el); } },\n { threshold: 0.1, ...opts }\n );\n o.observe(el);\n return () => o.disconnect();\n }, []);\n return [ref, v];\n }\n\n function useTyping(text, speed = 35, delay = 300) {\n const [t, setT] = React.useState('');\n const [done, setDone] = React.useState(false);\n React.useEffect(() => {\n const to = setTimeout(() => {\n let i = 0;\n const iv = setInterval(() => {\n setT(text.slice(0, i + 1)); i++;\n if (i >= text.length) { clearInterval(iv); setDone(true); }\n }, speed);\n }, delay);\n return () => clearTimeout(to);\n }, [text, speed, delay]);\n return [t, done];\n }\n\n function useCounter(end, duration = 2000) {\n const [count, setCount] = React.useState(0);\n const [ref, visible] = useInView();\n const started = React.useRef(false);\n React.useEffect(() => {\n if (!visible || started.current) return;\n started.current = true;\n const startTime = Date.now();\n const tick = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed \/ duration, 1);\n const eased = 1 - Math.pow(1 - progress, 3);\n setCount(Math.floor(eased * end));\n if (progress < 1) requestAnimationFrame(tick);\n };\n requestAnimationFrame(tick);\n }, [visible, end, duration]);\n return [ref, count];\n }\n\n function useWindowWidth() {\n const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1024);\n React.useEffect(() => {\n const onResize = () => setW(window.innerWidth);\n window.addEventListener('resize', onResize);\n return () => window.removeEventListener('resize', onResize);\n }, []);\n return w;\n }\n\n const ThemeContext = React.createContext();\n function ThemeProvider({ children }) {\n const [dark, setDark] = React.useState(true);\n React.useEffect(() => {\n const stored = localStorage.getItem('aiscamhunter-theme');\n if (stored === 'light') { setDark(false); document.documentElement.classList.remove('dark'); }\n else { document.documentElement.classList.add('dark'); }\n }, []);\n const toggle = () => {\n setDark(p => {\n const next = !p;\n if (next) { document.documentElement.classList.add('dark'); localStorage.setItem('aiscamhunter-theme', 'dark'); }\n else { document.documentElement.classList.remove('dark'); localStorage.setItem('aiscamhunter-theme', 'light'); }\n return next;\n });\n };\n return React.createElement(ThemeContext.Provider, { value: { dark, toggle } }, children);\n }\n function useTheme() { return React.useContext(ThemeContext); }\n\n function Anim({ children, className = '', delay = 0 }) {\n const [ref, v] = useInView();\n return React.createElement('div', {\n ref, className,\n style: {\n opacity: v ? 1 : 0,\n transform: v ? 'none' : 'translateY(40px)',\n transition: `all 0.7s cubic-bezier(0.4,0,0.2,1) ${delay}ms`\n }\n }, children);\n }\n\n function getLogoUrl(dark) {\n return dark\n ? 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/05\/icon128-dark.png'\n : 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/05\/icon128.png';\n }\n\n function getLogoTextUrl(dark) {\n return 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/logo-dark.png';\n }\n\n const fallbackLogoSvg = `\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n style=\"width:100%;height:100%\">\n <path d=\"M12 2L3 7v5c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5z\"\/>\n <\/svg>`;\n\n function LogoImage({ dark, className, style }) {\n const [imgError, setImgError] = React.useState(false);\n const url = getLogoUrl(dark);\n return imgError ? (\n <div className={className} style={style} dangerouslySetInnerHTML={{ __html: fallbackLogoSvg }} title=\"AIScamHunter\" \/>\n ) : (\n <img src={url} alt=\"AIScamHunter\" className={className} style={style} onError={() => setImgError(true)} \/>\n );\n }\n\n \/* =============================================\n VERTICAL NAV PILL \u2014 HELP CENTER STYLE\n ============================================= *\/\n function NavPill() {\n const { dark } = useTheme();\n return (\n <nav className=\"nav-pill\" aria-label=\"Main navigation\">\n <a href=\"https:\/\/aiscamhunter.com\/\" className=\"nav-pill-logo\" title=\"AIScamHunter Home\" aria-label=\"AIScamHunter Home\">\n <img\n src={dark\n ? 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/05\/icon128-dark.png'\n : 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/05\/icon128.png'}\n alt=\"AIScamHunter\"\n \/>\n <\/a>\n <div className=\"nav-pill-divider\" aria-hidden=\"true\" \/>\n <a href=\"https:\/\/aiscamhunter.com\/documentation\/\" className=\"nav-item\" aria-label=\"Documentation\">\n <i className=\"fas fa-book\" aria-hidden=\"true\"><\/i>\n <span className=\"nav-item-label\">Documentation<\/span>\n <\/a>\n <a href=\"https:\/\/aiscamhunter.com\/help-center\/\" className=\"nav-item\" aria-label=\"Help Center\">\n <i className=\"fas fa-circle-question\" aria-hidden=\"true\"><\/i>\n <span className=\"nav-item-label\">Help Center<\/span>\n <\/a>\n <a href=\"https:\/\/aiscamhunter.com\/faq-community\/\" className=\"nav-item\" aria-label=\"FAQ & Community\">\n <i className=\"fas fa-comments\" aria-hidden=\"true\"><\/i>\n <span className=\"nav-item-label\">FAQ & Community<\/span>\n <\/a>\n <a href=\"https:\/\/aiscamhunter.com\/contact\/\" className=\"nav-item\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Submit Ticket\">\n <i className=\"fas fa-ticket\" aria-hidden=\"true\"><\/i>\n <span className=\"nav-item-label\">Submit Ticket<\/span>\n <\/a>\n <\/nav>\n );\n }\n\n \/* =============================================\n FOOTER \u2014 HELP CENTER STYLE\n ============================================= *\/\n function SiteFooter() {\n return (\n <footer className=\"site-footer\">\n <span className=\"footer-top-line\" aria-hidden=\"true\"><\/span>\n <div className=\"footer-inner\">\n <a href=\"https:\/\/aiscamhunter.com\/\" className=\"footer-brand\" aria-label=\"AIScamHunter Home\">\n <img decoding=\"async\" src=\"https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/logo-dark.png\" alt=\"AIScamHunter\" \/>\n <\/a>\n <nav className=\"footer-links\" aria-label=\"Footer\">\n <a href=\"https:\/\/aiscamhunter.com\/help-center\/\" target=\"_blank\" rel=\"noopener noreferrer\">Help Center<\/a>\n <a href=\"https:\/\/aiscamhunter.com\/faq-community\/\" target=\"_blank\" rel=\"noopener noreferrer\">FAQ & Community<\/a>\n <a href=\"https:\/\/aiscamhunter.com\/privacy\/\" target=\"_blank\" rel=\"noopener noreferrer\">Privacy Policy<\/a>\n <a href=\"https:\/\/aiscamhunter.com\/terms\/\" target=\"_blank\" rel=\"noopener noreferrer\">Terms & Conditions<\/a>\n <\/nav>\n <hr className=\"footer-divider\" aria-hidden=\"true\" \/>\n <p className=\"footer-copy\"><strong>AIScamHunter v1.0.3<\/strong> \u00a9 2026 All rights reserved.<\/p>\n <\/div>\n <\/footer>\n );\n }\n\n \/* =============================================\n PARTICLE BACKGROUND\n ============================================= *\/\n function ParticleBG() {\n const canvasRef = React.useRef(null);\n const { dark } = useTheme();\n React.useEffect(() => {\n const c = canvasRef.current; if (!c) return;\n const ctx = c.getContext('2d'); let id;\n const ps = [];\n function resize() { c.width = window.innerWidth; c.height = window.innerHeight; }\n resize(); window.addEventListener('resize', resize);\n class P {\n constructor() { this.reset(); }\n reset() {\n this.x = Math.random() * c.width; this.y = Math.random() * c.height;\n this.s = Math.random() * 1.5 + 0.5;\n this.sx = (Math.random() - 0.5) * 0.3; this.sy = (Math.random() - 0.5) * 0.3;\n this.o = Math.random() * 0.4 + 0.1; this.h = Math.random() > 0.5 ? 150 : 190;\n }\n update() {\n this.x += this.sx; this.y += this.sy;\n if (this.x < 0 || this.x > c.width) this.sx *= -1;\n if (this.y < 0 || this.y > c.height) this.sy *= -1;\n }\n draw() {\n ctx.beginPath(); ctx.arc(this.x, this.y, this.s, 0, Math.PI * 2);\n ctx.fillStyle = dark\n ? `hsla(${this.h},100%,65%,${this.o})`\n : `hsla(${this.h},70%,35%,${this.o * 0.4})`;\n ctx.fill();\n }\n }\n for (let i = 0; i < 40; i++) ps.push(new P());\n function anim() {\n ctx.clearRect(0, 0, c.width, c.height);\n for (let i = 0; i < ps.length; i++) {\n ps[i].update(); ps[i].draw();\n for (let j = i + 1; j < ps.length; j++) {\n const dx = ps[i].x - ps[j].x, dy = ps[i].y - ps[j].y;\n const d = Math.sqrt(dx * dx + dy * dy);\n if (d < 120) {\n ctx.beginPath(); ctx.moveTo(ps[i].x, ps[i].y); ctx.lineTo(ps[j].x, ps[j].y);\n ctx.strokeStyle = dark\n ? `rgba(0,255,136,${0.04 * (1 - d \/ 120)})`\n : `rgba(5,150,105,${0.06 * (1 - d \/ 120)})`;\n ctx.lineWidth = 0.5; ctx.stroke();\n }\n }\n }\n id = requestAnimationFrame(anim);\n }\n anim();\n return () => { cancelAnimationFrame(id); window.removeEventListener('resize', resize); };\n }, [dark]);\n return React.createElement('canvas', { ref: canvasRef, className: 'fixed inset-0 pointer-events-none z-0' });\n }\n\n function ScrollProgress() {\n const [p, setP] = React.useState(0);\n React.useEffect(() => {\n const h = () => {\n const t = document.documentElement.scrollHeight - window.innerHeight;\n setP(t > 0 ? (window.scrollY \/ t) * 100 : 0);\n };\n window.addEventListener('scroll', h, { passive: true });\n return () => window.removeEventListener('scroll', h);\n }, []);\n return (\n <div className=\"fixed top-0 left-0 right-0 h-[2px] z-[60]\">\n <div className=\"h-full transition-all duration-100\" style={{\n width: `${p}%`,\n background: 'linear-gradient(90deg,#00ff88,#00d4ff,#a855f7)'\n }} \/>\n <\/div>\n );\n }\n\n function ThemePill() {\n const { dark, toggle } = useTheme();\n const handleClick = () => toggle();\n const handleKey = (e) => {\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); }\n };\n return (\n <div className=\"theme-pill\" onClick={handleClick}\n onKeyDown={handleKey} role=\"button\" tabIndex={0} aria-label=\"Toggle dark\/light theme\">\n <span aria-hidden=\"true\">\ud83c\udf19<\/span>\n <div className=\"pill-track\"><div className=\"pill-knob\"><\/div><\/div>\n <span aria-hidden=\"true\">\u2600\ufe0f<\/span>\n <\/div>\n );\n }\n\n function BackToTop() {\n const y = useScrollY();\n const vis = y > 500;\n const { dark } = useTheme();\n return (\n <button\n onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}\n className={`fixed bottom-5 z-50 w-12 h-12 rounded-xl flex items-center justify-center\n transition-all duration-300 border backdrop-blur-xl shadow-lg\n ${vis ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}\n ${dark\n ? 'bg-dark-900\/90 border-neon\/20 text-neon hover:bg-neon\/10'\n : 'bg-white\/90 border-emerald-200 text-emerald-600 hover:bg-emerald-50'}`}\n style={{ left: '50%', transform: vis ? 'translateX(-50%)' : 'translateX(-50%) translateY(1rem)' }}\n aria-label=\"Back to top\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\">\n <path d=\"M18 15l-6-6-6 6\"\/>\n <\/svg>\n <\/button>\n );\n }\n\n \/* =============================================\n DATA\n ============================================= *\/\n const browserData = [\n { name: 'Google Chrome', logo: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/8\/87\/Google_Chrome_icon_%282011%29.png', color: '#4285F4' },\n { name: 'Microsoft Edge', logo: 'https:\/\/cdn-icons-png.flaticon.com\/128\/5968\/5968890.png', color: '#0078D4' },\n { name: 'Brave', logo: 'https:\/\/uxwing.com\/wp-content\/themes\/uxwing\/download\/brands-and-social-media\/brave-browser-icon.png', color: '#FB542B' },\n { name: 'Opera', logo: 'https:\/\/cdn-icons-png.flaticon.com\/128\/3670\/3670363.png', color: '#FF1B2D' },\n { name: 'Opera GX', logo: 'https:\/\/img.utdstc.com\/icon\/849\/63b\/84963b584d71369760a9537331fe27a4dbbf9d28a2baf9a31b47de94a8261b92:600', color: '#EE2950' },\n { name: 'Vivaldi', logo: 'https:\/\/static.wikia.nocookie.net\/logopedia\/images\/0\/03\/Vivaldi_macOS_icon.png\/revision\/latest\/scale-to-width-down\/250?cb=20231031182158', color: '#EF3939' },\n { name: 'Arc', logo: 'https:\/\/iconlogovector.com\/uploads\/images\/2025\/05\/lg-682bbb984f6c1-Arc-Browser.webp', color: '#6E5AE6' },\n { name: 'Chromium', logo: 'https:\/\/cdn-icons-png.flaticon.com\/128\/6124\/6124999.png', color: '#4587F3' },\n { name: 'Yandex', logo: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/1a\/Yandex_browser_old_logo.png', color: '#FC3F1D' },\n { name: 'Whale', logo: 'https:\/\/packagestore.com\/wp-content\/uploads\/2024\/12\/20859EE0432E23AAA5CEC01A53AB6D5B.png', color: '#05C46B' },\n { name: 'C\u1ed1c C\u1ed1c', logo: 'https:\/\/images.icon-icons.com\/2552\/PNG\/512\/coc_coc_browser_logo_icon_153003.png', color: '#00A859' },\n { name: 'Maxthon', logo: 'https:\/\/cdn-icons-png.flaticon.com\/128\/518\/518712.png', color: '#005BAC' },\n { name: 'Kiwi Browser', logo: 'https:\/\/static.wikia.nocookie.net\/logopedia\/images\/f\/f9\/Kiwi_Browser.png\/', color: '#7BC67E' },\n { name: 'Comodo Dragon', logo: 'https:\/\/www.techspot.com\/images2\/downloads\/topdownload\/2021\/07\/2021-07-01-ts3_thumbs-db2.png', color: '#47A447' },\n { name: 'Samsung Internet', logo: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/59\/Samsung_Internet_logo_2025.svg', color: '#6A4FD7', partial: true },\n { name: 'Firefox', logo: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/16\/Firefox_logo%2C_2017.png', color: '#FF9500', soon: true },\n ];\n\n const allFeatures = [\n { name:'Real-Time Site Analysis',desc:'Every URL scanned instantly before interaction',icon:'\ud83c\udf10',cat:'detection' },\n { name:'Typosquatting Detection',desc:'Catches lookalike domains like paypa1.com',icon:'\ud83d\udd24',cat:'detection' },\n { name:'DGA Domain Detection',desc:'Identifies algorithmically generated domains',icon:'\ud83e\uddec',cat:'detection' },\n { name:'Unicode & Homoglyph Guard',desc:'Decodes Cyrillic & deceptive characters',icon:'\ud83c\udf0d',cat:'detection' },\n { name:'DNS Reputation Check',desc:'Validates DNS trust levels & history',icon:'\ud83d\udce1',cat:'detection' },\n { name:'SSL Certificate Analysis',desc:'Alerts on new\/suspicious certificates',icon:'\ud83d\udcdc',cat:'detection' },\n { name:'Redirect & Cloaking Scan',desc:'Detects hidden redirects & URL cloaking',icon:'\ud83d\udd17',cat:'detection' },\n { name:'Dangerous TLD Monitoring',desc:'Flags .xyz .top .shop .click abuse',icon:'\ud83d\udcdb',cat:'detection' },\n { name:'Obfuscated Script Detection',desc:'Catches hidden JS payloads & eval()',icon:'\ud83d\udce6',cat:'detection' },\n { name:'Risk Score Engine',desc:'Dynamic 0-100 score per website',icon:'\ud83d\udcca',cat:'detection' },\n { name:'Crypto Drainer Guard',desc:'Blocks wallet-draining smart contracts',icon:'\ud83d\udc8e',cat:'protection' },\n { name:'Clipboard Hijack Protection',desc:'Prevents crypto address swapping',icon:'\ud83d\udccb',cat:'protection' },\n { name:'Fake Login Page Detection',desc:'Catches cloned Google\/PayPal\/bank pages',icon:'\ud83e\uddfe',cat:'protection' },\n { name:'Fake Shop Detection',desc:'Spots fraudulent e-commerce sites',icon:'\ud83d\uded2',cat:'protection' },\n { name:'Tech Support Scam Block',desc:'Blocks fake Microsoft\/Apple alerts',icon:'\ud83d\udcde',cat:'protection' },\n { name:'QR Phishing Detection',desc:'Scans QR codes for phishing links',icon:'\ud83d\udcf7',cat:'protection' },\n { name:'Giveaway Scam Detection',desc:'Catches fake airdrops & crypto scams',icon:'\ud83c\udf81',cat:'protection' },\n { name:'Fake Wallet Protection',desc:'Detects cloned MetaMask\/Coinbase portals',icon:'\ud83d\udc5b',cat:'protection' },\n { name:'Dangerous Download Blocking',desc:'Blocks .exe .bat .scr .apk threats',icon:'\u26d4',cat:'protection' },\n { name:'Safe Download Protection',desc:'Scans files before they can be opened',icon:'\ud83d\udcc1',cat:'protection' },\n { name:'Security Warning Pages',desc:'Detailed threat info before access',icon:'\ud83d\udea8',cat:'protection' },\n { name:'Tracker & Ad Blocker',desc:'Blocks 100+ trackers & fingerprinting',icon:'\ud83d\udeab',cat:'privacy' },\n { name:'Privacy Cleaner',desc:'Wipes cache, cookies, history & storage',icon:'\ud83e\uddf9',cat:'privacy' },\n { name:'Privacy-First Architecture',desc:'No URLs sent to external servers',icon:'\ud83d\udd12',cat:'privacy' },\n { name:'Incognito Mode Support',desc:'Works in private with telemetry off',icon:'\ud83d\udc64',cat:'privacy' },\n { name:'Safe Mode',desc:'Aggressive blocking & HTTP upgrade',icon:'\u2699\ufe0f',cat:'privacy' },\n { name:'Strict Private Mode',desc:'WebRTC leak prevention & DoH enforcement',icon:'\ud83d\udd12\ud83d\udd12',cat:'privacy' },\n { name:'Total Privacy Mode',desc:'Blocks third\u2011party cookies & disables Web Workers',icon:'\ud83d\udd75\ufe0f',cat:'privacy' },\n { name:'Manual URL Scanner',desc:'Analyze any URL on demand',icon:'\ud83d\udd0e',cat:'tools' },\n { name:'Password Generator',desc:'Create strong customizable passwords',icon:'\ud83d\udd11',cat:'tools' },\n { name:'Allow & Block Lists',desc:'Custom trusted & blocked domains',icon:'\ud83d\udcdc',cat:'tools' },\n { name:'Context Menu Scan',desc:'Right-click to scan any link',icon:'\ud83d\uddb1\ufe0f',cat:'tools' },\n { name:'Activity Dashboard',desc:'Full threat history & statistics',icon:'\ud83d\udcc8',cat:'tools' },\n { name:'Smart Notifications',desc:'Non-intrusive security alerts',icon:'\ud83d\udd14',cat:'tools' },\n { name:'Tool Center',desc:'All security tools in one dashboard',icon:'\ud83e\uddf0',cat:'tools' },\n ];\n\n const protectionScenarios = [\n { title:'Phishing Detection',shortTitle:'Phishing',desc:'Real-time blocking of fake login pages cloning PayPal, banks, Google.',icon:'\ud83c\udfa3',color:'from-red-500 to-rose-500',glow:'rgba(239,68,68,0.5)',url:'https:\/\/www.paypal-secure-verification.com\/',displayUrl:'https:\/\/www.paypal-secure-verification.com\/',screenshotDark:'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PHISHING-DETECTION-EXAMPLE-D.jpg',screenshotLight:'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PHISHING-DETECTION-EXAMPLE.jpg',details:['Typosquatting: paypa1 \u2192 paypal','SSL cert: 2 hours old','Fake login form detected','AI confidence: 99.7%'] },\n { title:'Crypto Drainer Block',shortTitle:'Crypto Drainer',desc:'Wallet drain scripts & malicious smart contracts intercepted instantly.',icon:'\ud83d\udc8e',color:'from-amber-500 to-orange-500',glow:'rgba(245,158,11,0.5)',url:'http:\/\/www.coinbase-wallet-validate.net\/',displayUrl:'http:\/\/www.coinbase-wallet-validate.net\/',screenshotDark:'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/CRYPTO-DRAINER-EXAMPLE-D.jpg',screenshotLight:'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/CRYPTO-DRAINER-EXAMPLE.jpg',details:['setApprovalForAll() detected','eth_sendTransaction blocked','Domain age: 4 hours','AI confidence: 98.9%'] },\n { title:'Tracker Blocking',shortTitle:'Trackers',desc:'Invasive trackers, fingerprinting & advertising scripts neutralized.',icon:'\ud83d\udeab',color:'from-blue-500 to-indigo-500',glow:'rgba(59,130,246,0.5)',url:'https:\/\/coveryourtracks.eff.org\/',displayUrl:'coveryourtracks.eff.org \u2014 Fingerprint test',screenshotDark:'##',screenshotLight:'#',details:['14 tracking scripts removed','28 cookies prevented','Fingerprinting blocked','Page load +42% faster'] },\n { title:'Fake Shop Alert',shortTitle:'Fake Shop',desc:'Fraudulent e-commerce sites with fake pricing & no company info.',icon:'\ud83d\uded2',color:'from-purple-500 to-violet-500',glow:'rgba(168,85,247,0.5)',url:'https:\/\/www.scamadviser.com\/check-website',displayUrl:'scamadviser.com \u2014 Fake shop checker',screenshotDark:'##',screenshotLight:'#',details:['Domain age: 12 days','Prices 80% below market','Only crypto payments','No company registration'] },\n { title:'Tech Support Scam',shortTitle:'Tech Support',desc:'Fake browser lock pages and scam call center popups blocked.',icon:'\ud83d\udcde',color:'from-pink-500 to-rose-500',glow:'rgba(236,72,153,0.5)',url:'https:\/\/www.malwarebytes.com\/blog\/news\/2024\/01\/tech-support-scams',displayUrl:'malwarebytes.com \u2014 Tech support scam examples',screenshotDark:'##',screenshotLight:'#',details:['Fake fullscreen lock detected','Audio scareware blocked','Scam phone number flagged','Known scam template match'] },\n { title:'Clipboard Hijack',shortTitle:'Clipboard',desc:'Malware silently swapping copied crypto wallet addresses.',icon:'\ud83d\udccb',color:'from-teal-500 to-cyan-500',glow:'rgba(20,184,166,0.5)',url:'https:\/\/www.bleepingcomputer.com\/news\/security\/clipboard-hijacking-malware\/',displayUrl:'bleepingcomputer.com \u2014 Clipboard hijack report',screenshotDark:'##',screenshotLight:'#',details:['Clipboard write intercepted','BTC address swap blocked','Original address preserved','Malware script quarantined'] },\n { title:'Fake Wallet Portal',shortTitle:'Fake Wallet',desc:'Cloned MetaMask, Coinbase & Ledger login pages detected.',icon:'\ud83d\udc5b',color:'from-orange-500 to-red-500',glow:'rgba(249,115,22,0.5)',url:'https:\/\/cryptoscamdb.org\/scams\/?type=wallet_phishing',displayUrl:'cryptoscamdb.org \u2014 Wallet phishing list',screenshotDark:'##',screenshotLight:'#',details:['MetaMask UI clone detected','Seed phrase harvester found','Domain not official','Known wallet phishing kit'] },\n { title:'Dangerous Download',shortTitle:'Bad Download',desc:'Suspicious executables blocked before they reach your system.',icon:'\u26d4',color:'from-red-600 to-pink-600',glow:'rgba(220,38,38,0.5)',url:'https:\/\/www.virustotal.com\/gui\/home\/url',displayUrl:'virustotal.com \u2014 File\/URL scanner',screenshotDark:'##',screenshotLight:'#',details:['.exe file intercepted','Signature not verified','Domain reputation: Low','File flagged as trojan'] },\n { title:'QR Code Phishing',shortTitle:'QR Phishing',desc:'Malicious QR codes redirecting to phishing or malware sites.',icon:'\ud83d\udcf7',color:'from-violet-500 to-purple-600',glow:'rgba(139,92,246,0.5)',url:'https:\/\/www.qrcode-tiger.com\/blog\/qr-code-phishing',displayUrl:'qrcode-tiger.com \u2014 QR phishing explained',screenshotDark:'##',screenshotLight:'#',details:['QR redirect analyzed','Destination is phishing site','Payment page is fake','Redirect chain: 3 hops'] },\n { title:'Giveaway Scam',shortTitle:'Giveaway',desc:'Fake crypto giveaways and airdrop scams caught instantly.',icon:'\ud83c\udf81',color:'from-yellow-500 to-amber-500',glow:'rgba(234,179,8,0.5)',url:'https:\/\/cryptoscamdb.org\/scams\/?type=giveaway',displayUrl:'cryptoscamdb.org \u2014 Giveaway scam list',screenshotDark:'##',screenshotLight:'#',details:['Fake Elon Musk branding','Send-to-receive scheme','Countdown manipulation','Known scam wallet address'] },\n { title:'Unicode Domain Spoof',shortTitle:'Unicode',desc:'Cyrillic and homoglyph characters in domains detected.',icon:'\ud83c\udf0d',color:'from-emerald-500 to-teal-500',glow:'rgba(16,185,129,0.5)',url:'https:\/\/www.irongeek.com\/homoglyph-attack-generator.php',displayUrl:'irongeek.com \u2014 Homoglyph attack generator',screenshotDark:'##',screenshotLight:'#',details:['Cyrillic char in domain','Visual match: apple.com','IDN homoglyph attack','Punycode decoded & flagged'] },\n ];\n\n const supportedLanguages = [\n { code:'ar',name:'Arabic',native:'\u0627\u0644\u0639\u0631\u0628\u064a\u0629',flag:'\ud83c\uddf8\ud83c\udde6' },\n { code:'de',name:'German',native:'Deutsch',flag:'\ud83c\udde9\ud83c\uddea' },\n { code:'en',name:'English',native:'English',flag:'\ud83c\uddec\ud83c\udde7' },\n { code:'es',name:'Spanish',native:'Espa\u00f1ol',flag:'\ud83c\uddea\ud83c\uddf8' },\n { code:'es_419',name:'Spanish (LatAm)',native:'Espa\u00f1ol 419',flag:'\ud83c\uddf2\ud83c\uddfd' },\n { code:'fr',name:'French',native:'Fran\u00e7ais',flag:'\ud83c\uddeb\ud83c\uddf7' },\n { code:'hi',name:'Hindi',native:'\u0939\u093f\u0928\u094d\u0926\u0940',flag:'\ud83c\uddee\ud83c\uddf3' },\n { code:'id',name:'Indonesian',native:'Indonesia',flag:'\ud83c\uddee\ud83c\udde9' },\n { code:'it',name:'Italian',native:'Italiano',flag:'\ud83c\uddee\ud83c\uddf9' },\n { code:'nl',name:'Dutch',native:'Nederlands',flag:'\ud83c\uddf3\ud83c\uddf1' },\n { code:'pt',name:'Portuguese',native:'Portugu\u00eas',flag:'\ud83c\uddf5\ud83c\uddf9' },\n { code:'pt_BR',name:'Portuguese (Brazil)',native:'Portugu\u00eas BR',flag:'\ud83c\udde7\ud83c\uddf7' },\n { code:'ru',name:'Russian',native:'\u0420\u0443\u0441\u0441\u043a\u0438\u0439',flag:'\ud83c\uddf7\ud83c\uddfa' },\n { code:'tr',name:'Turkish',native:'T\u00fcrk\u00e7e',flag:'\ud83c\uddf9\ud83c\uddf7' },\n { code:'vi',name:'Vietnamese',native:'Ti\u1ebfng Vi\u1ec7t',flag:'\ud83c\uddfb\ud83c\uddf3' },\n ];\n\n \/* =============================================\n HERO\n ============================================= *\/\n function HeroSection() {\n const [typedText, done] = useTyping('Your AI-Powered Scam Protection', 35, 300);\n const { dark } = useTheme();\n return (\n <section className=\"relative min-h-screen flex flex-col justify-center overflow-hidden pt-8 pb-12\">\n <div className=\"absolute inset-0 grid-bg\" \/>\n <div className={`absolute top-20 left-[10%] w-[500px] h-[500px] rounded-full blur-[120px] animate-morph ${dark ? 'bg-neon\/[0.04]' : 'bg-emerald-400\/[0.08]'}`} \/>\n <div className={`absolute bottom-20 right-[10%] w-[400px] h-[400px] rounded-full blur-[100px] animate-morph ${dark ? 'bg-neon-blue\/[0.03]' : 'bg-cyan-400\/[0.06]'}`} style={{ animationDelay: '-5s' }} \/>\n <div className={`absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[600px] h-[600px] rounded-full blur-[180px] ${dark ? 'bg-neon-purple\/[0.02]' : 'bg-violet-400\/[0.04]'}`} \/>\n <div className=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex flex-col lg:flex-row items-center gap-12 lg:gap-20\">\n <div className=\"flex-1 text-center lg:text-left max-w-2xl\">\n <Anim>\n <div className={`inline-flex items-center gap-2.5 px-4 py-2 rounded-full border mb-8 backdrop-blur-sm\n ${dark ? 'bg-neon\/[0.06] border-neon\/20' : 'bg-emerald-50 border-emerald-300'}`}>\n <div className=\"relative w-2 h-2\">\n <div className={`absolute inset-0 rounded-full animate-ping opacity-75 ${dark ? 'bg-neon' : 'bg-emerald-500'}`} \/>\n <div className={`relative rounded-full w-2 h-2 ${dark ? 'bg-neon' : 'bg-emerald-500'}`} \/>\n <\/div>\n <span className={`text-xs font-mono tracking-wider ${dark ? 'text-neon\/80' : 'text-emerald-700'}`}>\n AI-Powered Protection\n <\/span>\n <span className={`text-[10px] px-2 py-0.5 rounded-full font-bold\n ${dark ? 'bg-neon\/10 text-neon' : 'bg-emerald-200 text-emerald-800'}`}>v1.0.3 NEW<\/span>\n <\/div>\n <\/Anim>\n <Anim delay={100}>\n <h1 className=\"text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black tracking-tight leading-[1.05] mb-6\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>{typedText}<\/span>\n {!done && <span className={`animate-blink ${dark ? 'text-neon' : 'text-emerald-500'}`}>|<\/span>}\n <\/h1>\n <\/Anim>\n <Anim delay={200}>\n <p className={`text-base sm:text-lg max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed\n ${dark ? 'text-slate-400' : 'text-gray-600'}`}>\n A browser extension that{' '}\n <span className={`font-semibold ${dark ? 'text-white' : 'text-gray-900'}`}>\n analyzes every site in real-time\n <\/span>\n , blocks phishing, crypto drainers and trackers \u2014 without slowing your browsing.\n <br \/><span className=\"text-sm block mt-2\">Version 1.0.3 introduces <strong>Strict Private Mode<\/strong> (WebRTC leak prevention, DoH enforcement, auto\u2011clean private tabs) and <strong>Total Privacy Mode<\/strong> (blocks third\u2011party cookies, disables Web Workers).<\/span>\n <\/p>\n <\/Anim>\n <Anim delay={300}>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8\">\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/aiscamhunter\/bhdadphnnkjjdnpkoflgdodofdaaioio\" target=\"_blank\" rel=\"noopener noreferrer\"\n className=\"btn-primary group inline-flex items-center justify-center gap-3 px-8 py-4\n bg-gradient-to-r from-neon via-emerald-400 to-neon-blue rounded-2xl\n text-sm font-bold text-dark-950 shadow-lg shadow-neon\/20\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n Add to Chrome \u2014 Free\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\"\n className=\"group-hover:translate-x-1 transition-transform\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <a href=\"#features\"\n className={`inline-flex items-center justify-center gap-2 px-8 py-4 border rounded-2xl\n text-sm font-semibold transition-all\n ${dark\n ? 'border-white\/10 text-slate-300 hover:bg-white\/5 hover:border-white\/20'\n : 'border-gray-300 text-gray-700 hover:bg-gray-100 hover:border-gray-400'}`}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <polygon points=\"10 8 16 12 10 16 10 8\" fill=\"currentColor\"\/>\n <\/svg>\n See All Features\n <\/a>\n <\/div>\n <\/Anim>\n <Anim delay={400}>\n <div className={`flex flex-wrap items-center gap-4 justify-center lg:justify-start text-xs\n ${dark ? 'text-slate-500' : 'text-gray-500'}`}>\n {['10s install', 'Zero data collected', 'Full security suite'].map((t, i) => (\n <span key={i} className=\"flex items-center gap-1.5\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke={dark ? '#00ff88' : '#059669'} strokeWidth=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M9 12l2 2 4-4\"\/>\n <\/svg>\n {t}\n <\/span>\n ))}\n <\/div>\n <\/Anim>\n <\/div>\n\n <Anim delay={200} className=\"flex-shrink-0 relative\">\n <div className=\"relative w-72 h-72 sm:w-80 sm:h-80 lg:w-[440px] lg:h-[440px]\">\n <div className={`absolute inset-0 rounded-full border ${dark ? 'border-neon\/[0.08]' : 'border-emerald-400\/[0.15]'}`}\n style={{ animation: 'spin 20s linear infinite' }} \/>\n <div className={`absolute inset-6 rounded-full border ${dark ? 'border-neon-blue\/[0.06]' : 'border-cyan-400\/[0.12]'}`}\n style={{ animation: 'spin 30s linear infinite reverse' }} \/>\n <div className={`absolute inset-12 rounded-full border ${dark ? 'border-neon-purple\/[0.05]' : 'border-violet-400\/[0.1]'}`}\n style={{ animation: 'spin 40s linear infinite' }} \/>\n <div className=\"absolute inset-0\" style={{ animation: 'spin 20s linear infinite' }}>\n <div className={`absolute top-0 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-3 h-3 rounded-full shadow-lg\n ${dark ? 'bg-neon\/60 shadow-neon\/30' : 'bg-emerald-500\/80 shadow-emerald-500\/30'}`} \/>\n <\/div>\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-shield\">\n <LogoImage dark={dark} className=\"w-48 h-48 lg:w-56 lg:h-56 object-contain\" \/>\n <\/div>\n <\/div>\n <div className=\"absolute top-8 right-8 lg:top-12 lg:right-4 animate-float\">\n <div className={`px-3 py-2 rounded-xl border text-[11px] font-mono flex items-center gap-2 backdrop-blur-xl\n ${dark ? 'bg-dark-950\/60 border-neon\/20' : 'bg-white\/90 border-emerald-300 shadow-lg shadow-emerald-500\/10'}`}>\n <div className={`w-1.5 h-1.5 rounded-full animate-pulse ${dark ? 'bg-neon' : 'bg-emerald-500'}`} \/>\n <span className={dark ? 'text-neon' : 'text-emerald-700 font-semibold'}>Active<\/span>\n <\/div>\n <\/div>\n <div className=\"absolute bottom-12 left-4 lg:bottom-16 lg:left-0 animate-float-d\">\n <div className={`px-3 py-2 rounded-xl border text-[11px] font-mono flex items-center gap-2 backdrop-blur-xl\n ${dark ? 'bg-dark-950\/60 border-red-500\/20' : 'bg-white\/90 border-red-300 shadow-lg shadow-red-500\/10'}`}>\n <span className=\"text-red-400\">\u26a0<\/span>\n <span className={dark ? 'text-red-400' : 'text-red-600 font-semibold'}>3 blocked<\/span>\n <\/div>\n <\/div>\n <div className=\"absolute top-1\/2 -left-4 lg:-left-8 animate-float-r hidden lg:block\">\n <div className={`px-3 py-2 rounded-xl border text-[10px] font-mono flex items-center gap-2 backdrop-blur-xl\n ${dark ? 'bg-dark-950\/60 border-neon-blue\/20' : 'bg-white\/90 border-cyan-300 shadow-lg shadow-cyan-500\/10'}`}>\n <span className={dark ? 'text-neon-blue' : 'text-cyan-700 font-semibold'}>\ud83d\udd0d Scanning...<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/Anim>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n BROWSER SECTION\n ============================================= *\/\n function BrowserSection() {\n const { dark } = useTheme();\n const allBrowsers = [...browserData, ...browserData];\n return (\n <section className=\"relative py-20 lg:py-28 overflow-hidden\">\n <div className={`absolute inset-0 ${dark\n ? 'bg-gradient-to-b from-dark-950 via-dark-900\/30 to-dark-950'\n : 'bg-gradient-to-b from-slate-50 via-white to-slate-50'}`} \/>\n <div className=\"absolute inset-0 grid-bg opacity-30\" \/>\n <div className=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <Anim className=\"text-center mb-16\">\n <div className={`inline-flex items-center gap-2 px-5 py-2 rounded-full border mb-6\n ${dark ? 'bg-neon\/[0.06] border-neon\/20' : 'bg-emerald-50 border-emerald-300'}`}>\n <span className=\"text-lg\">\ud83c\udf10<\/span>\n <span className={`text-xs font-mono tracking-wider ${dark ? 'text-neon\/80' : 'text-emerald-700'}`}>\n UNIVERSAL COMPATIBILITY\n <\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight mb-4\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>Works on <\/span>\n <span className=\"gradient-text\">every browser<\/span>\n <\/h2>\n <p className={`text-base sm:text-lg max-w-2xl mx-auto ${dark ? 'text-slate-400' : 'text-gray-600'}`}>\n One lightweight extension. Instant protection on all Chromium browsers.\n <\/p>\n <\/Anim>\n <div className=\"overflow-hidden\">\n <div className=\"marquee-track flex gap-6 w-max\" style={{ animationDuration: '50s' }}>\n {allBrowsers.map((b, idx) => (\n <div key={idx} className={`relative flex-shrink-0 flex flex-col items-center gap-2 p-4 rounded-2xl\n border backdrop-blur-sm browser-card\n ${dark ? 'bg-white\/[0.02] border-white\/[0.06]' : 'bg-white border-gray-200 shadow-sm'}`}>\n <div className=\"relative\">\n <img src={b.logo} alt={b.name}\n className={`w-12 h-12 lg:w-14 lg:h-14 object-contain drop-shadow-lg\n ${b.soon ? 'opacity-[0.55]' : ''} ${b.partial ? 'opacity-75' : ''}`}\n loading=\"lazy\" onError={(e) => { e.target.style.display = 'none'; }} \/>\n {b.soon && (\n <div className=\"browser-soon-overlay\">\n <span className=\"browser-soon-badge bg-orange-500\/95 text-white\">Coming Soon<\/span>\n <\/div>\n )}\n {b.partial && (\n <div className=\"browser-soon-overlay\">\n <span className=\"browser-soon-badge bg-yellow-500\/95 text-dark-950\">Partial<\/span>\n <\/div>\n )}\n <\/div>\n <span className={`text-xs lg:text-sm font-semibold text-center whitespace-nowrap\n ${b.soon\n ? (dark ? 'text-slate-500' : 'text-gray-400')\n : (dark ? 'text-slate-300' : 'text-gray-700')}`}>\n {b.name}\n <\/span>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n STATS\n ============================================= *\/\n function StatsSection() {\n const { dark } = useTheme();\n const stats = [\n { end:90,suffix:'%',label:'of hacks start with phishing',color:'from-red-500 to-red-600',icon:'\ud83c\udfa3',src:'Verizon DBIR 2024' },\n { end:3,suffix:'.4B$',label:'lost to crypto scams in 2023',color:'from-amber-500 to-orange-500',icon:'\ud83d\udcb0',src:'FBI IC3 Report' },\n { end:1,suffix:'.35M',label:'phishing sites created monthly',color:'from-pink-500 to-rose-500',icon:'\ud83c\udf10',src:'APWG Report' },\n { end:25,suffix:'%',label:'clicked a phishing link this year',color:'from-purple-500 to-violet-500',icon:'\ud83d\udc46',src:'KnowBe4 Study' },\n ];\n return (\n <section className=\"relative py-24 overflow-hidden\">\n <div className={`absolute inset-0 ${dark\n ? 'bg-gradient-to-b from-dark-950 via-dark-900\/50 to-dark-950'\n : 'bg-gradient-to-b from-white via-red-50\/20 to-white'}`} \/>\n <div className=\"absolute inset-0 grid-bg opacity-30\" \/>\n <div className=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <Anim>\n <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border mb-6\n ${dark ? 'bg-red-500\/10 border-red-500\/20' : 'bg-red-50 border-red-300'}`}>\n <div className=\"w-2 h-2 rounded-full bg-red-500 animate-pulse\" \/>\n <span className={`text-xs font-mono ${dark ? 'text-red-400\/80' : 'text-red-700'}`}>REAL-TIME THREAT DATA<\/span>\n <span className={`text-[9px] px-1.5 py-0.5 rounded-full ml-1 ${dark ? 'bg-neon\/20 text-neon' : 'bg-emerald-200 text-emerald-800'}`}>v1.0.3<\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight mb-4\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>The threats are <\/span>\n <span className=\"bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent\">very real<\/span>\n <\/h2>\n <p className={`text-sm sm:text-base max-w-xl mx-auto mb-14 ${dark ? 'text-slate-500' : 'text-gray-600'}`}>\n A simple ad blocker is not enough. You need intelligent protection.\n <\/p>\n <\/Anim>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5\">\n {stats.map((s, i) => {\n const [ref, count] = useCounter(s.end, 2500);\n return (\n <Anim key={i} delay={i * 120}>\n <div ref={ref} className={`feature-card p-7 rounded-3xl border text-center h-full group\n ${dark ? 'bg-white\/[0.02] border-white\/[0.06] backdrop-blur-sm' : 'bg-white border-gray-200 shadow-md'}`}>\n <div className=\"text-3xl mb-3 group-hover:scale-125 transition-transform duration-300\">{s.icon}<\/div>\n <div className={`text-4xl lg:text-5xl font-black bg-gradient-to-r ${s.color} bg-clip-text text-transparent mb-3`}>\n {count}{s.suffix}\n <\/div>\n <p className={`text-sm leading-relaxed mb-2 ${dark ? 'text-slate-400' : 'text-gray-600'}`}>{s.label}<\/p>\n <p className={`text-[10px] font-mono ${dark ? 'text-slate-600' : 'text-gray-400'}`}>{s.src}<\/p>\n <\/div>\n <\/Anim>\n );\n })}\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n FEATURES\n ============================================= *\/\n function FeaturesSection() {\n const { dark } = useTheme();\n const [cat, setCat] = React.useState('all');\n const cats = [\n { id:'all',label:'All Modules',icon:'\ud83d\udd2e' },\n { id:'detection',label:'Detection',icon:'\ud83d\udd0d' },\n { id:'protection',label:'Protection',icon:'\ud83d\udee1\ufe0f' },\n { id:'tools',label:'Tools',icon:'\ud83d\udd27' },\n { id:'privacy',label:'Privacy',icon:'\ud83d\udd12' },\n ];\n const filtered = cat === 'all' ? allFeatures : allFeatures.filter(f => f.cat === cat);\n const grads = [\n 'from-emerald-500\/20 to-teal-500\/20',\n 'from-cyan-500\/20 to-blue-500\/20',\n 'from-violet-500\/20 to-purple-500\/20',\n 'from-amber-500\/20 to-orange-500\/20',\n 'from-pink-500\/20 to-rose-500\/20',\n ];\n return (\n <section id=\"features\" className=\"relative py-24 lg:py-32 overflow-hidden\">\n <div className=\"absolute inset-0 grid-bg\" \/>\n <div className=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <Anim className=\"text-center\">\n <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border mb-6\n ${dark ? 'bg-neon\/[0.06] border-neon\/20' : 'bg-emerald-50 border-emerald-300'}`}>\n <span className={`text-xs font-mono ${dark ? 'text-neon\/80' : 'text-emerald-700'}`}>\u26a1 Complete Security Suite<\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight mb-4\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>Every module you need.<\/span><br\/>\n <span className=\"gradient-text\">Nothing you don't.<\/span>\n <\/h2>\n <p className={`text-base max-w-2xl mx-auto mb-10 ${dark ? 'text-slate-400' : 'text-gray-600'}`}>\n {allFeatures.length} security modules working together.\n <\/p>\n <\/Anim>\n <Anim delay={100} className=\"flex flex-wrap justify-center gap-2 mb-12\">\n {cats.map(c => {\n const count = c.id === 'all' ? allFeatures.length : allFeatures.filter(f => f.cat === c.id).length;\n return (\n <button key={c.id} onClick={() => setCat(c.id)}\n className={`category-tab px-5 py-2.5 rounded-2xl text-sm font-medium transition-all duration-300\n border backdrop-blur-sm\n ${cat === c.id\n ? (dark ? 'bg-neon\/10 border-neon\/30 text-neon shadow-lg shadow-neon\/10' : 'bg-white border-emerald-400 text-emerald-800 shadow-lg shadow-emerald-500\/15')\n : (dark ? 'bg-white\/[0.02] border-white\/5 text-slate-400 hover:text-white hover:bg-white\/5' : 'bg-white border-gray-200 text-gray-600 hover:text-gray-900 hover:bg-gray-50 hover:border-gray-300')}`}>\n {c.icon} {c.label}\n <span className={`ml-1.5 text-[10px] px-1.5 py-0.5 rounded-full\n ${cat === c.id\n ? (dark ? 'bg-neon\/20 text-neon' : 'bg-emerald-200 text-emerald-800')\n : (dark ? 'bg-white\/5 text-slate-500' : 'bg-gray-100 text-gray-500')}`}>\n {count}\n <\/span>\n <\/button>\n );\n })}\n <\/Anim>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4\">\n {filtered.map((f, i) => (\n <Anim key={f.name} delay={Math.min(i * 30, 300)}>\n <div className={`feature-module-card group p-5 rounded-2xl border h-full transition-all duration-300\n ${dark ? 'bg-white\/[0.02] border-white\/[0.06] hover:border-neon\/20 backdrop-blur-sm' : 'bg-white border-gray-200 shadow-sm hover:border-emerald-400 hover:shadow-lg'}`}>\n <div className={`w-12 h-12 rounded-2xl bg-gradient-to-br ${grads[i % 5]}\n flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>\n <span className=\"text-xl\">{f.icon}<\/span>\n <\/div>\n <h3 className={`text-sm font-bold mb-1.5 leading-tight ${dark ? 'text-white' : 'text-gray-900'}`}>{f.name}<\/h3>\n <p className={`text-xs leading-relaxed ${dark ? 'text-slate-500' : 'text-gray-500'}`}>{f.desc}<\/p>\n <\/div>\n <\/Anim>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n HOW IT WORKS\n ============================================= *\/\n function HowItWorks() {\n const { dark } = useTheme();\n const steps = [\n { num:'01',title:'Install in 10 seconds',desc:'Add from Chrome Web Store. Zero config.',icon:'\u2b07\ufe0f',grad:'from-neon to-emerald-400' },\n { num:'02',title:'Browse normally',desc:'AI analyzes every page in background.',icon:'\ud83c\udf10',grad:'from-neon-blue to-cyan-400' },\n { num:'03',title:'Threats blocked',desc:'Phishing, drainers, trackers intercepted.',icon:'\ud83d\udee1\ufe0f',grad:'from-neon-purple to-violet-400' },\n { num:'04',title:'Stay in control',desc:'Custom lists, manual scan, privacy tools.',icon:'\u2699\ufe0f',grad:'from-neon-pink to-rose-400' },\n ];\n return (\n <section id=\"how-it-works\" className=\"relative py-24 lg:py-32 overflow-hidden\">\n <div className=\"absolute inset-0 grid-bg\" \/>\n <div className=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <Anim className=\"text-center mb-20\">\n <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border mb-6\n ${dark ? 'bg-neon-blue\/[0.06] border-neon-blue\/20' : 'bg-cyan-50 border-cyan-300'}`}>\n <span className={`text-xs font-mono ${dark ? 'text-neon-blue\/80' : 'text-cyan-700'}`}>\ud83d\ude80 Zero Configuration<\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight mb-4\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>How it <\/span>\n <span className=\"gradient-text\">works<\/span>\n <\/h2>\n <\/Anim>\n <div className=\"relative\">\n <div className={`hidden lg:block absolute top-1\/2 left-0 right-0 h-px\n ${dark ? 'bg-gradient-to-r from-transparent via-neon\/20 to-transparent' : 'bg-gradient-to-r from-transparent via-emerald-400\/30 to-transparent'}`} \/>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\n {steps.map((s, i) => (\n <Anim key={i} delay={i * 150}>\n <div className={`step-card relative p-8 rounded-3xl border h-full text-center transition-all duration-500\n ${dark ? 'bg-gradient-to-br from-white\/[0.03] to-white\/[0.01] border-white\/[0.08] hover:border-neon\/40' : 'bg-white border-gray-200 shadow-md hover:shadow-xl hover:border-emerald-400'}`}>\n <div className={`absolute -top-5 left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl\n bg-gradient-to-br ${s.grad} flex items-center justify-center\n text-white font-black text-sm shadow-lg animate-border-glow`}>{s.num}<\/div>\n <div className=\"w-20 h-20 mx-auto mt-4 mb-6 rounded-3xl bg-white\/[0.03] flex items-center justify-center\">\n <span className=\"text-4xl\">{s.icon}<\/span>\n <\/div>\n <h3 className={`text-lg font-bold mb-3 ${dark ? 'text-white' : 'text-gray-900'}`}>{s.title}<\/h3>\n <p className={`text-sm leading-relaxed ${dark ? 'text-slate-400' : 'text-gray-600'}`}>{s.desc}<\/p>\n <\/div>\n <\/Anim>\n ))}\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n PROTECTION DEMO \u2014 REPLACED WITH NEW EXTENSION PREVIEW\n ============================================= *\/\n function ProtectionDemo() {\n const { dark } = useTheme();\n const [activeTab, setActiveTab] = React.useState('main');\n\n const darkImages = [\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T1D-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T2D-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T3D-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T4D-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T5D-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T6D-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T7D-ENG.png'\n ];\n const lightImages = [\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T1-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T2-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T3-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T4-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T5-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T6-ENG.png',\n 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/T7-ENG.png'\n ];\n const currentImages = dark ? darkImages : lightImages;\n const duplicatedImages = [...currentImages, ...currentImages];\n\n const toolsDark = 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PTOOLSD-ENG.png';\n const toolsLight = 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PTOOLS-ENG.png';\n const privacyDark = 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PSETTD-ENG.png';\n const privacyLight = 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PSETT-ENG.png';\n const blockedDark = 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PSAFED-ENG.png';\n const blockedLight = 'https:\/\/aiscamhunter.com\/wp-content\/uploads\/2026\/06\/PSAFE-ENG.png';\n\n const getSingleSrc = () => {\n if (activeTab === 'tools') return dark ? toolsDark : toolsLight;\n if (activeTab === 'privacy') return dark ? privacyDark : privacyLight;\n if (activeTab === 'blocked') return dark ? blockedDark : blockedLight;\n return '';\n };\n\n return (\n <section className=\"relative py-24 lg:py-32 overflow-hidden\" id=\"extension-preview\">\n <div className=\"absolute inset-0 grid-bg\" \/>\n <div className=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <Anim>\n <div className=\"text-center mb-12\">\n <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border mb-6 ${dark ? 'bg-neon\/[0.06] border-neon\/20' : 'bg-emerald-50 border-emerald-300'}`}>\n <div className=\"w-2 h-2 rounded-full bg-neon animate-pulse\" \/>\n <span className={`text-xs font-mono ${dark ? 'text-neon\/80' : 'text-emerald-700'}`}>EXTENSION PREVIEW<\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight mb-4\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>Explore the <\/span>\n <span className=\"gradient-text\">full interface<\/span>\n <\/h2>\n <p className={`text-base max-w-2xl mx-auto ${dark ? 'text-slate-400' : 'text-gray-600'}`}>\n See how AIScamHunter protects you. Browse the main dashboard, tools, privacy controls, and warning screens.\n <\/p>\n <\/div>\n <\/Anim>\n <Anim delay={100}>\n <div className=\"w-full max-w-6xl mx-auto\">\n <div className=\"flex flex-wrap justify-center gap-3 mb-12\" role=\"tablist\">\n {[\n { id: 'main', label: 'Main Extension', icon: '\ud83d\udee1\ufe0f' },\n { id: 'tools', label: 'Tools Center', icon: '\ud83e\uddf0' },\n { id: 'privacy', label: 'Privacy Settings', icon: '\ud83d\udd12' },\n { id: 'blocked', label: 'Blocked Page', icon: '\ud83d\udeab' }\n ].map(tab => (\n <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`preview-tab ${activeTab === tab.id ? 'is-active' : ''}`}>\n <span className=\"preview-tab-icon\">{tab.icon}<\/span>\n <span>{tab.label}<\/span>\n <\/button>\n ))}\n <\/div>\n <div className=\"relative\">\n {activeTab === 'main' && (\n <div className=\"carousel-container overflow-hidden rounded-3xl py-4\">\n <div className=\"marquee-track-ext\">\n {duplicatedImages.map((url, idx) => (\n <div key={`${idx}-${dark}`} className=\"preview-image-card\">\n <img src={url} alt={`Extension preview ${idx + 1}`} loading=\"lazy\" className=\"w-full rounded-2xl shadow-2xl\" \/>\n <\/div>\n ))}\n <\/div>\n <div className=\"text-center mt-5 text-xs font-mono opacity-60\"><i className=\"fas fa-mouse-pointer mr-1\"><\/i> Hover to pause slideshow<\/div>\n <\/div>\n )}\n {activeTab === 'tools' && (\n <div className=\"single-preview\" style={{ animation: 'fadeInScale 0.4s ease' }} key=\"tools\">\n <img src={getSingleSrc()} alt=\"Tools Center dashboard\" className=\"w-full rounded-3xl shadow-2xl\" \/>\n <\/div>\n )}\n {activeTab === 'privacy' && (\n <div className=\"single-preview\" style={{ animation: 'fadeInScale 0.4s ease' }} key=\"privacy\">\n <img src={getSingleSrc()} alt=\"Privacy Settings panel\" className=\"w-full rounded-3xl shadow-2xl\" \/>\n <\/div>\n )}\n {activeTab === 'blocked' && (\n <div className=\"single-preview\" style={{ animation: 'fadeInScale 0.4s ease' }} key=\"blocked\">\n <img src={getSingleSrc()} alt=\"Blocked page example\" className=\"w-full rounded-3xl shadow-2xl\" \/>\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/Anim>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n LANGUAGES (FULLY ORIGINAL)\n ============================================= *\/\n function LanguagesSection() {\n const { dark } = useTheme();\n const ww = useWindowWidth();\n const useOrbit = ww >= 768;\n const ring1Count = 8, ring2Count = 7;\n const ring1Radius = 190, ring2Radius = 290;\n const ring1Langs = supportedLanguages.slice(0, ring1Count);\n const ring2Langs = supportedLanguages.slice(ring1Count);\n return (\n <section id=\"languages\" className=\"relative py-24 lg:py-32 overflow-hidden\">\n <div className=\"absolute inset-0 grid-bg\" \/>\n <div className={`absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[700px] h-[700px] rounded-full blur-[120px] ${dark ? 'bg-neon\/[0.04]' : 'bg-emerald-400\/[0.06]'}`} \/>\n <div className={`absolute top-1\/4 right-1\/4 w-[400px] h-[400px] rounded-full blur-[100px] ${dark ? 'bg-neon-purple\/[0.03]' : 'bg-violet-400\/[0.05]'}`} \/>\n <div className=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <Anim className=\"text-center mb-16\">\n <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border mb-6\n ${dark ? 'bg-neon-purple\/[0.08] border-neon-purple\/30' : 'bg-violet-50 border-violet-300'}`}>\n <span className=\"text-base\">\ud83c\udf0d<\/span>\n <span className={`text-xs font-mono tracking-wider ${dark ? 'text-neon-purple\/90' : 'text-violet-700'}`}>GLOBAL REACH<\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-6xl font-black tracking-tight mb-4 leading-[1.05]\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>Available in <\/span>\n <span className=\"gradient-text\">{supportedLanguages.length} languages<\/span>\n <\/h2>\n <p className={`text-base sm:text-lg max-w-2xl mx-auto mb-3 ${dark ? 'text-slate-400' : 'text-gray-600'}`}>\n Auto-detected from your browser language \u2014 no setup needed.\n <\/p>\n <\/Anim>\n <Anim delay={150}>\n {useOrbit ? (\n <div className=\"lang-orbit-container\">\n <div className=\"lang-ring ring-1\"><\/div>\n <div className=\"lang-ring ring-2\"><\/div>\n <div className=\"lang-ring ring-3\"><\/div>\n <div className=\"lang-orbit-center\">\n <LogoImage dark={dark} style={{ width: '80px', height: '80px' }} \/>\n <\/div>\n {ring1Langs.map((lang, i) => {\n const angle = (i \/ ring1Count) * 2 * Math.PI - Math.PI \/ 2;\n const x = Math.cos(angle) * ring1Radius;\n const y = Math.sin(angle) * ring1Radius;\n return (\n <div key={lang.code} className=\"lang-chip\" style={{ transform: `translate(${x}px, ${y}px)`, animationDelay: `${i * 0.15}s` }}>\n <div className=\"lang-chip-tooltip\">{lang.name} \u00b7 {lang.native}<\/div>\n <div className=\"lang-chip-flag\">{lang.flag}<\/div>\n <div className=\"lang-chip-code\">{lang.code}<\/div>\n <\/div>\n );\n })}\n {ring2Langs.map((lang, i) => {\n const angle = (i \/ ring2Count) * 2 * Math.PI - Math.PI \/ 2 + Math.PI \/ ring2Count;\n const x = Math.cos(angle) * ring2Radius;\n const y = Math.sin(angle) * ring2Radius;\n return (\n <div key={lang.code} className=\"lang-chip\" style={{ transform: `translate(${x}px, ${y}px)`, animationDelay: `${(i + ring1Count) * 0.15}s` }}>\n <div className=\"lang-chip-tooltip\">{lang.name} \u00b7 {lang.native}<\/div>\n <div className=\"lang-chip-flag\">{lang.flag}<\/div>\n <div className=\"lang-chip-code\">{lang.code}<\/div>\n <\/div>\n );\n })}\n <\/div>\n ) : (\n <div>\n <div className=\"flex flex-col items-center mb-10\">\n <div className=\"lang-detect-pulse mb-3\">\n <LogoImage dark={dark} style={{ width: '40px', height: '40px' }} \/>\n <\/div>\n <div className={`text-xs font-mono font-bold uppercase tracking-widest ${dark ? 'text-neon' : 'text-emerald-700'}`}>Auto-Detect<\/div>\n <\/div>\n <div className=\"lang-grid\">\n {supportedLanguages.map((lang, i) => (\n <div key={lang.code} className=\"lang-grid-chip\" style={{ animationDelay: `${i * 0.1}s` }} title={`${lang.name} \u00b7 ${lang.native}`}>\n <div className=\"lang-grid-chip-flag\">{lang.flag}<\/div>\n <div className=\"lang-grid-chip-name\">{lang.code.toUpperCase()}<\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n )}\n <\/Anim>\n <Anim delay={400}>\n <div className=\"mt-16 lg:mt-24 grid grid-cols-2 sm:grid-cols-4 gap-4 max-w-3xl mx-auto\">\n {[\n { label:'Languages',value:supportedLanguages.length + '+',icon:'\ud83c\udf10' },\n { label:'Continents',value:'6',icon:'\ud83d\uddfa\ufe0f' },\n { label:'Native UI',value:'100%',icon:'\u2728' },\n { label:'Auto-Detect',value:'On',icon:'\u26a1' },\n ].map((s, i) => (\n <div key={i} className={`p-5 rounded-2xl border text-center backdrop-blur-sm\n ${dark ? 'bg-white\/[0.02] border-white\/[0.06]' : 'bg-white border-gray-200 shadow-sm'}`}>\n <div className=\"text-2xl mb-2\">{s.icon}<\/div>\n <div className=\"gradient-text-static text-2xl font-black mb-1\">{s.value}<\/div>\n <div className={`text-[10px] font-mono uppercase tracking-wider ${dark ? 'text-slate-500' : 'text-gray-500'}`}>{s.label}<\/div>\n <\/div>\n ))}\n <\/div>\n <\/Anim>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n TESTIMONIALS (ORIGINAL)\n ============================================= *\/\n function TestimonialsSection() {\n const { dark } = useTheme();\n const all = [\n { name:'Sophie M.',role:'Freelance Designer',avatar:'\ud83d\udc69\u200d\ud83d\udcbc',text:'AIScamHunter saved me from a fake PayPal site. Essential!' },\n { name:'Thomas K.',role:'Crypto Trader',avatar:'\ud83d\udc68\u200d\ud83d\udcbb',text:'A crypto drainer blocked in my first week. Prevented a malicious transaction.' },\n { name:'Marie L.',role:'Teacher',avatar:'\ud83d\udc69\u200d\ud83c\udfeb',text:'Simple, zero slowdown. Installed on my kids\\' browsers. Peace of mind.' },\n { name:'Antoine R.',role:'Web Developer',avatar:'\ud83e\uddd1\u200d\ud83d\udcbb',text:'Impressed by the homoglyph detection. Remarkable tech for free.' },\n { name:'Nadia B.',role:'E-commerce Manager',avatar:'\ud83d\udc69\u200d\ud83d\udcbc',text:'200+ trackers blocked in one week. Finally rid of targeted ads.' },\n { name:'Lucas D.',role:'Student',avatar:'\ud83e\uddd1\u200d\ud83c\udf93',text:'The QR scan saved me from a phishing site at the library.' },\n { name:'Emma W.',role:'Marketing Director',avatar:'\ud83d\udc69\u200d\ud83d\udcbc',text:'Best security extension ever. Incredibly accurate alerts.' },\n { name:'James P.',role:'IT Consultant',avatar:'\ud83d\udc68\u200d\ud83d\udcbc',text:'DGA detection catches domains others miss. Recommended to all clients.' },\n { name:'Sarah H.',role:'Journalist',avatar:'\ud83d\udc69\u200d\ud83d\udcbc',text:'Clicks hundreds of links daily. Caught 3 phishing attempts this month.' },\n { name:'Michael C.',role:'DeFi Investor',avatar:'\ud83d\udc68\u200d\ud83d\udcbb',text:'Inferno Drainer detection blocked a legit-looking wallet-draining dApp.' },\n { name:'Lisa T.',role:'Online Seller',avatar:'\ud83d\udc69\u200d\ud83d\udcbc',text:'Caught a fake payment gateway. Literally saved my business.' },\n { name:'David N.',role:'Cybersecurity Analyst',avatar:'\ud83e\uddd1\u200d\ud83d\udcbb',text:'SSL cert age check is enterprise-grade. Impressive for an extension.' },\n { name:'Rachel F.',role:'Parent',avatar:'\ud83d\udc69',text:'Finally trust my kids to browse safely. Essential for families.' },\n { name:'Alex G.',role:'Startup Founder',avatar:'\ud83d\udc68\u200d\ud83d\udcbc',text:'Deployed team-wide. Form interception prevented credential theft.' },\n { name:'Julia S.',role:'Graphic Designer',avatar:'\ud83d\udc69\u200d\ud83c\udfa8',text:'Clean interface. Notifications are smart, never annoying.' },\n { name:'Chris M.',role:'NFT Collector',avatar:'\ud83d\udc68\u200d\ud83d\udcbb',text:'Three fake airdrops blocked. Clipboard protection caught address swap.' },\n { name:'Anna K.',role:'Professor',avatar:'\ud83d\udc69\u200d\ud83c\udfeb',text:'Installed on all lab computers. Students protected during research.' },\n { name:'Robert W.',role:'Retired Engineer',avatar:'\ud83d\udc74',text:'Simple for non-tech people. Blocked a fake tech support popup.' },\n { name:'Diana L.',role:'Travel Blogger',avatar:'\ud83d\udc69\u200d\ud83d\udcbc',text:'Public wifi everywhere. Warns about unsafe sites before loading.' },\n { name:'Kevin Z.',role:'Game Developer',avatar:'\ud83e\uddd1\u200d\ud83d\udcbb',text:'Password generator is great. Privacy cleaner removes everything.' },\n { name:'Olivia P.',role:'HR Manager',avatar:'\ud83d\udc69\u200d\ud83d\udcbc',text:'Company-wide after catching a spear-phishing email link.' },\n ];\n const row1 = all.slice(0, 7), row2 = all.slice(7, 14), row3 = all.slice(14, 21);\n function Card({ t }) {\n return (\n <div className={`flex-shrink-0 w-[340px] p-5 rounded-2xl border mx-2 transition-all hover:-translate-y-1\n ${dark ? 'bg-white\/[0.02] border-white\/[0.06] hover:border-neon\/20 backdrop-blur-sm' : 'bg-white border-gray-200 shadow-md hover:shadow-xl hover:border-emerald-300'}`}>\n <div className=\"flex items-center gap-1 mb-3\">\n {[1,2,3,4,5].map(j => <span key={j} className=\"text-amber-400 text-sm\">\u2605<\/span>)}\n <\/div>\n <p className={`text-sm leading-relaxed mb-4 ${dark ? 'text-slate-300' : 'text-gray-700'}`}>\"{t.text}\"<\/p>\n <div className={`flex items-center gap-3 pt-3 border-t ${dark ? 'border-white\/5' : 'border-gray-100'}`}>\n <div className={`w-9 h-9 rounded-full flex items-center justify-center text-base\n ${dark ? 'bg-neon\/5 border border-white\/10' : 'bg-emerald-100 border border-emerald-200'}`}>{t.avatar}<\/div>\n <div>\n <div className={`text-sm font-semibold ${dark ? 'text-white' : 'text-gray-900'}`}>{t.name}<\/div>\n <div className={`text-xs ${dark ? 'text-slate-500' : 'text-gray-500'}`}>{t.role}<\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n }\n function Row({ items, dur, rev }) {\n const doubled = [...items, ...items];\n return (\n <div className=\"overflow-hidden py-2\">\n <div className=\"flex marquee-track\" style={{ animationDuration: `${dur}s`, animationDirection: rev ? 'reverse' : 'normal' }}>\n {doubled.map((t, i) => <Card key={i} t={t} \/>)}\n <\/div>\n <\/div>\n );\n }\n return (\n <section id=\"testimonials\" className=\"relative py-24 lg:py-32 overflow-hidden\">\n <div className={`absolute inset-0 ${dark ? 'bg-gradient-to-b from-dark-950 via-dark-900\/30 to-dark-950' : 'bg-gradient-to-b from-slate-50 via-white to-slate-50'}`} \/>\n <div className=\"relative z-10\">\n <Anim className=\"text-center mb-12 px-4\">\n <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border mb-6\n ${dark ? 'bg-amber-500\/10 border-amber-500\/20' : 'bg-amber-50 border-amber-300'}`}>\n <span className={`text-xs font-mono ${dark ? 'text-amber-400\/80' : 'text-amber-700'}`}>\u2b50 Trusted by thousands<\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight mb-4\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>Loved by <\/span>\n <span className=\"gradient-text\">users worldwide<\/span>\n <\/h2>\n <p className={`text-base max-w-xl mx-auto ${dark ? 'text-slate-400' : 'text-gray-600'}`}>\n Real stories from real people who avoided real threats.\n <\/p>\n <\/Anim>\n <div className=\"space-y-2\">\n <Row items={row1} dur={60} rev={false} \/>\n <Row items={row2} dur={55} rev={true} \/>\n <Row items={row3} dur={65} rev={false} \/>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n PRICING (ORIGINAL)\n ============================================= *\/\n function PricingSection() {\n const { dark } = useTheme();\n const [annual, setAnnual] = React.useState(true);\n return (\n <section id=\"pricing\" className=\"relative py-24 lg:py-32 overflow-hidden\">\n <div className=\"absolute inset-0 grid-bg\" \/>\n <div className={`absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[600px] h-[600px] rounded-full blur-[150px] ${dark ? 'bg-neon\/[0.03]' : 'bg-emerald-400\/[0.06]'}`} \/>\n <div className=\"relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8\">\n <Anim className=\"text-center mb-12\">\n <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border mb-6\n ${dark ? 'bg-neon\/[0.06] border-neon\/20' : 'bg-emerald-50 border-emerald-300'}`}>\n <span className={`text-xs font-mono ${dark ? 'text-neon\/80' : 'text-emerald-700'}`}>\ud83d\udc8e Simple Pricing<\/span>\n <\/div>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight leading-tight mb-2\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>Free forever.<\/span>\n <\/h2>\n <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight leading-tight mb-4\">\n <span className=\"gradient-text\">Premium when you want more.<\/span>\n <\/h2>\n <p className={`text-base max-w-xl mx-auto mb-8 ${dark ? 'text-slate-400' : 'text-gray-600'}`}>No auto-billing. No tricks. You stay in control.<\/p>\n <div className={`inline-flex items-center gap-1 p-1.5 rounded-2xl border ${dark ? 'bg-white\/[0.03] border-white\/5' : 'bg-gray-100 border-gray-200'}`}>\n <button onClick={() => setAnnual(false)}\n className={`px-6 py-2.5 rounded-xl text-sm font-medium transition-all\n ${!annual ? (dark ? 'bg-neon\/10 text-neon border border-neon\/20' : 'bg-white text-emerald-800 border border-emerald-300 shadow-sm') : (dark ? 'text-slate-400' : 'text-gray-500')}`}>\n Monthly\n <\/button>\n <button onClick={() => setAnnual(true)}\n className={`px-6 py-2.5 rounded-xl text-sm font-medium transition-all flex items-center gap-2\n ${annual ? (dark ? 'bg-neon\/10 text-neon border border-neon\/20' : 'bg-white text-emerald-800 border border-emerald-300 shadow-sm') : (dark ? 'text-slate-400' : 'text-gray-500')}`}>\n Annual\n <span className={`text-[10px] px-2 py-0.5 rounded-full font-bold ${dark ? 'bg-neon\/20 text-neon' : 'bg-emerald-200 text-emerald-800'}`}>-33%<\/span>\n <\/button>\n <\/div>\n <\/Anim>\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-4xl mx-auto\">\n <Anim>\n <div className={`h-full flex flex-col p-8 lg:p-10 rounded-3xl border transition-all duration-300 hover:scale-[1.02]\n ${dark ? 'bg-white\/[0.02] border-white\/[0.08] hover:border-neon\/30 backdrop-blur-sm' : 'bg-white border-gray-200 shadow-lg hover:shadow-2xl hover:border-emerald-400'}`}>\n <div className=\"flex items-center gap-3 mb-6\">\n <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${dark ? 'bg-white\/5' : 'bg-gray-100'}`}><span className=\"text-2xl\">\ud83d\udee1\ufe0f<\/span><\/div>\n <div>\n <h3 className={`text-xl font-bold ${dark ? 'text-white' : 'text-gray-900'}`}>Free<\/h3>\n <p className={`text-xs ${dark ? 'text-slate-500' : 'text-gray-500'}`}>Essential protection<\/p>\n <\/div>\n <\/div>\n <div className=\"flex items-baseline gap-1 mb-8\">\n <span className={`text-6xl font-black ${dark ? 'text-white' : 'text-gray-900'}`}>$0<\/span>\n <span className={`text-sm ${dark ? 'text-slate-500' : 'text-gray-500'}`}>\/ forever<\/span>\n <\/div>\n <ul className=\"space-y-3 mb-8 flex-1\">\n {['Real-time phishing protection','Typosquatting detection','Tracker blocker (100+)','Crypto drainer detection','Password generator','Manual URL scanner','Smart notifications',`All ${allFeatures.length} security modules`].map((f, i) => (\n <li key={i} className={`flex items-start gap-3 text-sm ${dark ? 'text-slate-300' : 'text-gray-700'}`}>\n <div className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${dark ? 'bg-neon\/10' : 'bg-emerald-100'}`}>\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={dark ? '#00ff88' : '#059669'} strokeWidth=\"3\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\n <\/div>\n {f}\n <\/li>\n ))}\n <\/ul>\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/aiscamhunter\/bhdadphnnkjjdnpkoflgdodofdaaioio\" target=\"_blank\" rel=\"noopener noreferrer\" className={`flex items-center justify-center gap-2 w-full py-4 border rounded-2xl text-sm font-bold transition-all\n ${dark ? 'border-white\/10 text-white hover:bg-white\/5 hover:border-neon\/20' : 'border-gray-300 text-gray-900 hover:bg-emerald-50 hover:border-emerald-400'}`}>\n Install Free\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/Anim>\n <Anim delay={150}>\n <div className={`h-full flex flex-col relative p-8 lg:p-10 rounded-3xl border transition-all duration-300 hover:scale-[1.02] animate-border-glow\n ${dark ? 'border-neon\/30' : 'border-emerald-400 shadow-xl shadow-emerald-500\/10'}`}\n style={{ background: dark ? 'linear-gradient(135deg, rgba(0,255,136,0.04), rgba(0,212,255,0.04))' : 'linear-gradient(135deg, rgba(5,150,105,0.06), rgba(8,145,178,0.06))' }}>\n <div className=\"absolute -top-3.5 left-1\/2 -translate-x-1\/2 px-5 py-1.5 bg-gradient-to-r from-neon to-neon-blue rounded-full text-xs font-bold text-dark-950 shadow-lg shadow-neon\/20\">\n \u2b50 Recommended\n <\/div>\n <div className=\"flex items-center gap-3 mb-6\">\n <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${dark ? 'bg-neon\/10' : 'bg-emerald-100'}`}><span className=\"text-2xl\">\ud83d\udc8e<\/span><\/div>\n <div>\n <h3 className={`text-xl font-bold ${dark ? 'text-white' : 'text-gray-900'}`}>Premium<\/h3>\n <p className={`text-xs ${dark ? 'text-slate-500' : 'text-gray-500'}`}>Maximum protection + support<\/p>\n <\/div>\n <\/div>\n <div className=\"flex items-baseline gap-1 mb-1\">\n <span className=\"text-6xl font-black gradient-text-static\">{annual ? '$3.33' : '$4.99'}<\/span>\n <span className={`text-sm ${dark ? 'text-slate-500' : 'text-gray-500'}`}>\/ month<\/span>\n <\/div>\n {annual && (\n <p className={`text-xs mb-8 ${dark ? 'text-neon\/60' : 'text-emerald-700'}`}>\n Billed $39.99\/year{' '}\n <span className={dark ? 'text-slate-600 line-through' : 'text-gray-400 line-through'}>$59.88<\/span>\n <\/p>\n )}\n {!annual && <p className={`text-xs mb-8 ${dark ? 'text-slate-500' : 'text-gray-500'}`}>No commitment<\/p>}\n <ul className=\"space-y-3 mb-8 flex-1\">\n {['Everything in Free','Full cookie\/localStorage cleanup','Batch scan (100 URLs)','Detailed threat history','Advanced custom rules','Priority support (phone\/WhatsApp)','\"Protected\" profile badge','Early access to updates'].map((f, i) => (\n <li key={i} className={`flex items-start gap-3 text-sm ${dark ? 'text-slate-300' : 'text-gray-700'}`}>\n <div className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${dark ? 'bg-neon\/10' : 'bg-emerald-100'}`}>\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={dark ? '#00ff88' : '#059669'} strokeWidth=\"3\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\n <\/div>\n {f}\n <\/li>\n ))}\n <\/ul>\n <a href=\"#pricing\" className=\"btn-primary flex items-center justify-center gap-2 w-full py-4 bg-gradient-to-r from-neon to-neon-blue rounded-2xl text-sm font-bold text-dark-950\">\n Upgrade to Premium\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/Anim>\n <\/div>\n <Anim delay={300}>\n <div className=\"text-center mt-10 space-y-1\">\n <p className={`text-xs ${dark ? 'text-slate-600' : 'text-gray-500'}`}>\ud83d\udd12 Premium activation via phone\/WhatsApp \u2014 no automatic billing.<\/p>\n <p className={`text-xs ${dark ? 'text-slate-600' : 'text-gray-500'}`}>30-day money-back guarantee.<\/p>\n <\/div>\n <\/Anim>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n CTA (ORIGINAL)\n ============================================= *\/\n function CTASection() {\n const { dark } = useTheme();\n return (\n <section id=\"install\" className=\"relative py-24 lg:py-32 overflow-hidden\">\n <div className=\"absolute inset-0 grid-bg\" \/>\n <div className={`absolute inset-0 ${dark ? 'bg-gradient-to-b from-dark-950 via-neon\/[0.02] to-dark-950' : 'bg-gradient-to-b from-white via-emerald-50\/40 to-white'}`} \/>\n <div className={`absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[800px] h-[800px] rounded-full blur-[200px] ${dark ? 'bg-neon\/[0.04]' : 'bg-emerald-400\/[0.08]'}`} \/>\n <div className=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 pointer-events-none\">\n {[1,2,3].map(i => (\n <div key={i} className={`absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 rounded-full border ${dark ? 'border-neon\/10' : 'border-emerald-400\/15'}`}\n style={{ width: `${200 + i * 200}px`, height: `${200 + i * 200}px`, animation: `pulseRing ${3 + i}s ease-out infinite`, animationDelay: `${i * 0.8}s` }} \/>\n ))}\n <\/div>\n <div className=\"relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <Anim>\n <div className=\"inline-flex items-center justify-center w-20 h-20 mb-6\">\n <LogoImage dark={dark} className=\"w-16 h-16 object-contain\" \/>\n <\/div>\n <\/Anim>\n <Anim delay={100}>\n <h2 className=\"text-4xl sm:text-5xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.05]\">\n <span className={dark ? 'text-white' : 'text-gray-900'}>Browse <\/span>\n <span className=\"gradient-text\">without fear<\/span>\n <\/h2>\n <\/Anim>\n <Anim delay={200}>\n <p className={`text-lg sm:text-xl max-w-2xl mx-auto mb-12 leading-relaxed ${dark ? 'text-slate-400' : 'text-gray-600'}`}>\n The internet is more dangerous than ever. AIScamHunter is your{' '}\n <span className={`font-semibold ${dark ? 'text-white' : 'text-gray-900'}`}>last line of defense<\/span>.\n <\/p>\n <\/Anim>\n <Anim delay={300}>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center mb-10\">\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/aiscamhunter\/bhdadphnnkjjdnpkoflgdodofdaaioio\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"btn-primary inline-flex items-center justify-center gap-3 px-10 py-5 bg-gradient-to-r from-neon via-emerald-400 to-neon-blue rounded-2xl text-base font-bold text-dark-950 shadow-lg shadow-neon\/20\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n Add to Chrome \u2014 Free\n <\/a>\n <a href=\"#pricing\" className={`inline-flex items-center justify-center gap-2 px-8 py-5 border rounded-2xl text-base font-semibold transition-all\n ${dark ? 'border-neon\/20 text-neon hover:bg-neon\/5 hover:border-neon\/40' : 'border-emerald-400 text-emerald-800 hover:bg-emerald-50 hover:border-emerald-500'}`}>\n \u2728 Upgrade to Premium\n <\/a>\n <\/div>\n <\/Anim>\n <Anim delay={400}>\n <div className={`flex flex-wrap items-center justify-center gap-6 text-xs ${dark ? 'text-slate-500' : 'text-gray-500'}`}>\n {['10s install','Zero data collected','No account needed'].map((t, i) => (\n <span key={i} className=\"flex items-center gap-1.5\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={dark ? '#00ff88' : '#059669'} strokeWidth=\"2\">\n <path d=\"M20 6L9 17l-5-5\"\/>\n <\/svg>\n {t}\n <\/span>\n ))}\n <\/div>\n <\/Anim>\n <\/div>\n <\/section>\n );\n }\n\n \/* =============================================\n APP ROOT\n ============================================= *\/\n function App() {\n return (\n <ThemeProvider>\n <AppContent \/>\n <\/ThemeProvider>\n );\n }\n\n function AppContent() {\n const { dark } = useTheme();\n return (\n <div className={`relative min-h-screen transition-colors duration-500 ${dark ? 'bg-dark-950' : 'bg-slate-50'}`}>\n <ScrollProgress \/>\n <ParticleBG \/>\n <NavPill \/>\n <ThemePill \/>\n <BackToTop \/>\n <div className=\"relative z-10\">\n <HeroSection \/>\n <div className=\"section-divider\" \/>\n <BrowserSection \/>\n <div className=\"section-divider\" \/>\n <StatsSection \/>\n <div className=\"section-divider\" \/>\n <FeaturesSection \/>\n <div className=\"section-divider\" \/>\n <HowItWorks \/>\n <div className=\"section-divider\" \/>\n <ProtectionDemo \/> {\/* \u2190 REPLACED with new extension preview *\/}\n <div className=\"section-divider\" \/>\n <LanguagesSection \/>\n <div className=\"section-divider\" \/>\n <TestimonialsSection \/>\n <div className=\"section-divider\" \/>\n <PricingSection \/>\n <div className=\"section-divider\" \/>\n <CTASection \/>\n <SiteFooter \/>\n <\/div>\n <\/div>\n );\n }\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(React.createElement(App));\n <\/script>\n\n <script>\n(function () {\n const INTERNAL_DOMAINS = [\n 'aiscamhunter.com',\n 'www.aiscamhunter.com'\n ];\n\n const LANGUAGE_PREFIXES = [\n 'ar',\n 'de',\n 'en',\n 'es',\n 'es-419',\n 'es_419',\n 'fr',\n 'hi',\n 'id',\n 'it',\n 'nl',\n 'pt',\n 'pt-br',\n 'pt_BR',\n 'ru',\n 'tr',\n 'vi'\n ];\n\n function getFirstPathPart(pathname) {\n return (pathname || '\/').split('\/').filter(Boolean)[0] || '';\n }\n\n function getCurrentLanguagePrefix() {\n const firstPart = getFirstPathPart(window.location.pathname);\n const firstPartLower = firstPart.toLowerCase();\n\n const supported = LANGUAGE_PREFIXES.map(lang => lang.toLowerCase());\n\n if (supported.includes(firstPartLower)) {\n return '\/' + firstPart;\n }\n\n return '';\n }\n\n function urlAlreadyHasLanguagePrefix(pathname) {\n const firstPart = getFirstPathPart(pathname);\n const firstPartLower = firstPart.toLowerCase();\n\n const supported = LANGUAGE_PREFIXES.map(lang => lang.toLowerCase());\n\n return supported.includes(firstPartLower);\n }\n\n function normalizePath(path) {\n return path.replace(\/\\\/{2,}\/g, '\/');\n }\n\n function localizeInternalUrl(href) {\n if (!href) return href;\n\n const originalHref = href.trim();\n\n if (\n originalHref.startsWith('#') ||\n \/^mailto:\/i.test(originalHref) ||\n \/^tel:\/i.test(originalHref) ||\n \/^sms:\/i.test(originalHref) ||\n \/^javascript:\/i.test(originalHref) ||\n \/^data:\/i.test(originalHref) ||\n \/^chrome:\/i.test(originalHref) ||\n \/^chrome-extension:\/i.test(originalHref)\n ) {\n return href;\n }\n\n let cleanHref = originalHref;\n\n \/*\n Safety fix in case some links were accidentally pasted as Markdown:\n [https:\/\/aiscamhunter.com\/help-center\/](https:\/\/aiscamhunter.com\/help-center\/)\n *\/\n const markdownMatch = cleanHref.match(\/^\\[([^\\]]+)\\]\\(([^)]+)\\)$\/);\n if (markdownMatch) {\n cleanHref = markdownMatch[2];\n }\n\n let url;\n\n try {\n url = new URL(cleanHref, window.location.origin);\n } catch (e) {\n return href;\n }\n\n const hostname = url.hostname.toLowerCase();\n\n if (!INTERNAL_DOMAINS.includes(hostname)) {\n return cleanHref;\n }\n\n const langPrefix = getCurrentLanguagePrefix();\n\n \/*\n English\/root version:\n https:\/\/aiscamhunter.com\/\n Keep links normal.\n *\/\n if (!langPrefix) {\n return cleanHref;\n }\n\n \/*\n Avoid double prefix:\n \/es\/help-center\/ should not become \/es\/es\/help-center\/\n *\/\n if (urlAlreadyHasLanguagePrefix(url.pathname)) {\n return url.href;\n }\n\n if (url.pathname === '\/') {\n url.pathname = langPrefix + '\/';\n } else {\n url.pathname = normalizePath(langPrefix + url.pathname);\n }\n\n return url.href;\n }\n\n function applyLocalizedLinks(root) {\n const scope = root || document;\n\n scope.querySelectorAll('a[href]').forEach(anchor => {\n \/*\n Do not rewrite TranslatePress \/ language switcher links.\n This allows English to go back to https:\/\/aiscamhunter.com\/\n *\/\n if (\n anchor.closest('.trp-language-switcher') ||\n anchor.closest('.trp_language_switcher_shortcode') ||\n anchor.closest('.trp-ls-shortcode-current-language') ||\n anchor.closest('.trp-ls-shortcode-language') ||\n anchor.closest('[class*=\"trp-language\"]') ||\n anchor.closest('[class*=\"trp_\"]') ||\n anchor.closest('[id*=\"trp\"]') ||\n anchor.closest('.language-switcher') ||\n anchor.closest('.wpml-ls') ||\n anchor.closest('.pll-language-switcher')\n ) {\n return;\n }\n\n \/*\n Extra safety: do not rewrite English language links.\n *\/\n const hreflang = anchor.getAttribute('hreflang');\n const text = anchor.textContent.trim().toLowerCase();\n\n if (\n hreflang === 'en' ||\n hreflang === 'en-US' ||\n text === 'english' ||\n text === 'en'\n ) {\n return;\n }\n\n const oldHref = anchor.getAttribute('href');\n const newHref = localizeInternalUrl(oldHref);\n\n if (newHref && newHref !== oldHref) {\n anchor.setAttribute('href', newHref);\n }\n});\n }\n\n function startLinkLocalization() {\n applyLocalizedLinks(document);\n\n \/*\n React may re-render links later, so this keeps fixing them.\n *\/\n const observer = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList') {\n mutation.addedNodes.forEach(node => {\n if (node.nodeType !== 1) return;\n\n if (node.matches && node.matches('a[href]')) {\n applyLocalizedLinks(node.parentNode || node);\n } else {\n applyLocalizedLinks(node);\n }\n });\n }\n\n if (\n mutation.type === 'attributes' &&\n mutation.target &&\n mutation.target.matches &&\n mutation.target.matches('a[href]')\n) {\n const anchor = mutation.target;\n\n if (\n anchor.closest('.trp-language-switcher') ||\n anchor.closest('.trp_language_switcher_shortcode') ||\n anchor.closest('.trp-ls-shortcode-current-language') ||\n anchor.closest('.trp-ls-shortcode-language') ||\n anchor.closest('[class*=\"trp-language\"]') ||\n anchor.closest('[class*=\"trp_\"]') ||\n anchor.closest('[id*=\"trp\"]') ||\n anchor.closest('.language-switcher') ||\n anchor.closest('.wpml-ls') ||\n anchor.closest('.pll-language-switcher')\n ) {\n return;\n }\n\n const hreflang = anchor.getAttribute('hreflang');\n const text = anchor.textContent.trim().toLowerCase();\n\n if (\n hreflang === 'en' ||\n hreflang === 'en-US' ||\n text === 'english' ||\n text === 'en'\n ) {\n return;\n }\n\n const oldHref = anchor.getAttribute('href');\n const newHref = localizeInternalUrl(oldHref);\n\n if (newHref && newHref !== oldHref) {\n anchor.setAttribute('href', newHref);\n }\n}\n });\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['href']\n });\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', startLinkLocalization);\n } else {\n startLinkLocalization();\n }\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AIScamHunter \u2013 Protecci\u00f3n contra estafas impulsada por IA<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":115,"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":570,"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/pages\/30\/revisions\/570"}],"wp:attachment":[{"href":"https:\/\/aiscamhunter.com\/es\/wp-json\/wp\/v2\/media?parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}