{"id":10,"date":"2026-03-18T15:09:27","date_gmt":"2026-03-18T15:09:27","guid":{"rendered":"https:\/\/deeppink-alpaca-465783.hostingersite.com\/?page_id=10"},"modified":"2026-03-18T15:11:56","modified_gmt":"2026-03-18T15:11:56","slug":"funnel","status":"publish","type":"page","link":"https:\/\/judyaureada.com\/?page_id=10","title":{"rendered":"Funnel"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nJudy \u2014 AI-Powered Funnel Marketing<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n<style>\r\n :root {\r\n --bg-deep: #05070F;\r\n --bg-dark: #0B0F1A;\r\n --bg-card: rgba(255,255,255,0.04);\r\n --border: rgba(255,255,255,0.08);\r\n --border-bright: rgba(255,255,255,0.15);\r\n --cyan: #00F5FF;\r\n --violet: #7C3AED;\r\n --indigo: #4F46E5;\r\n --text-primary: #F0F4FF;\r\n --text-secondary: rgba(240,244,255,0.55);\r\n --text-muted: rgba(240,244,255,0.3);\r\n --glow-cyan: 0 0 40px rgba(0,245,255,0.25);\r\n --glow-violet: 0 0 40px rgba(124,58,237,0.3);\r\n --glow-indigo: 0 0 60px rgba(79,70,229,0.2);\r\n }\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { scroll-behavior: smooth; }\r\n body {\r\n background: var(--bg-deep);\r\n color: var(--text-primary);\r\n font-family: 'DM Sans', sans-serif;\r\n font-weight: 400;\r\n overflow-x: hidden;\r\n cursor: none;\r\n }\r\n\r\n \/* CUSTOM CURSOR *\/\r\n #cursor {\r\n position: fixed; top: 0; left: 0; width: 12px; height: 12px;\r\n background: var(--cyan); border-radius: 50%; pointer-events: none;\r\n z-index: 9999; transform: translate(-50%,-50%);\r\n transition: transform 0.1s, background 0.3s;\r\n mix-blend-mode: screen;\r\n }\r\n #cursor-ring {\r\n position: fixed; top: 0; left: 0; width: 36px; height: 36px;\r\n border: 1px solid rgba(0,245,255,0.4); border-radius: 50%;\r\n pointer-events: none; z-index: 9998; transform: translate(-50%,-50%);\r\n transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94), width 0.3s, height 0.3s;\r\n }\r\n\r\n \/* NAV *\/\r\n nav {\r\n position: fixed; top: 0; width: 100%; z-index: 100;\r\n padding: 20px 60px;\r\n display: flex; align-items: center; justify-content: space-between;\r\n backdrop-filter: blur(20px);\r\n background: rgba(5,7,15,0.6);\r\n border-bottom: 1px solid var(--border);\r\n transition: all 0.3s;\r\n }\r\n .nav-logo {\r\n font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 22px;\r\n background: linear-gradient(90deg, #00F5FF, #4F46E5);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n letter-spacing: -0.5px;\r\n }\r\n .nav-links { display: flex; gap: 36px; list-style: none; }\r\n .nav-links a {\r\n color: var(--text-secondary); text-decoration: none; font-size: 14px;\r\n font-weight: 400; letter-spacing: 0.02em;\r\n transition: color 0.2s;\r\n }\r\n .nav-links a:hover { color: var(--text-primary); }\r\n .nav-cta {\r\n padding: 10px 24px; background: linear-gradient(135deg, #4F46E5, #7C3AED);\r\n border: none; color: #fff; border-radius: 8px; font-size: 14px;\r\n font-family: 'DM Sans', sans-serif; font-weight: 500; cursor: none;\r\n transition: all 0.3s; box-shadow: 0 0 20px rgba(79,70,229,0.3);\r\n }\r\n .nav-cta:hover { box-shadow: 0 0 35px rgba(79,70,229,0.6); transform: translateY(-1px); }\r\n\r\n \/* HERO *\/\r\n #hero {\r\n position: relative; height: 100vh; overflow: hidden;\r\n display: flex; align-items: center; justify-content: center;\r\n background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,70,229,0.12) 0%, transparent 70%);\r\n }\r\n #hero-canvas {\r\n position: absolute; inset: 0; width: 100%; height: 100%;\r\n }\r\n .hero-content {\r\n position: relative; z-index: 10; text-align: center;\r\n max-width: 820px; padding: 0 24px;\r\n }\r\n .hero-badge {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 7px 16px; border-radius: 100px;\r\n background: rgba(0,245,255,0.08); border: 1px solid rgba(0,245,255,0.2);\r\n font-size: 12px; font-weight: 500; color: var(--cyan);\r\n letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 28px;\r\n }\r\n .hero-badge span { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; animation: pulse-dot 1.5s infinite; }\r\n @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.6)} }\r\n .hero-headline {\r\n font-family: 'Outfit', sans-serif; font-weight: 800;\r\n font-size: clamp(42px, 6vw, 78px); line-height: 1.05;\r\n letter-spacing: -0.04em; margin-bottom: 20px;\r\n }\r\n .hero-headline .gradient-text {\r\n background: linear-gradient(135deg, #00F5FF 0%, #4F46E5 50%, #7C3AED 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n }\r\n .hero-sub {\r\n font-size: clamp(16px, 2vw, 19px); color: var(--text-secondary);\r\n line-height: 1.65; max-width: 560px; margin: 0 auto 40px;\r\n font-weight: 300;\r\n }\r\n .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\r\n .btn-primary {\r\n padding: 16px 36px;\r\n background: linear-gradient(135deg, #4F46E5, #7C3AED);\r\n color: #fff; border: none; border-radius: 10px;\r\n font-size: 15px; font-weight: 600; font-family: 'Outfit', sans-serif;\r\n cursor: none; transition: all 0.3s;\r\n box-shadow: 0 0 30px rgba(79,70,229,0.4), inset 0 1px 0 rgba(255,255,255,0.15);\r\n }\r\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 50px rgba(79,70,229,0.7), inset 0 1px 0 rgba(255,255,255,0.2); }\r\n .btn-secondary {\r\n padding: 16px 36px;\r\n background: rgba(255,255,255,0.05); border: 1px solid var(--border-bright);\r\n color: var(--text-primary); border-radius: 10px;\r\n font-size: 15px; font-weight: 500; font-family: 'Outfit', sans-serif;\r\n cursor: none; transition: all 0.3s; backdrop-filter: blur(10px);\r\n }\r\n .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(0,245,255,0.3); box-shadow: var(--glow-cyan); }\r\n\r\n \/* SCROLL INDICATOR *\/\r\n .scroll-hint {\r\n position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);\r\n display: flex; flex-direction: column; align-items: center; gap: 8px;\r\n color: var(--text-muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;\r\n animation: bounce-up 2s infinite;\r\n }\r\n .scroll-hint-line {\r\n width: 1px; height: 40px;\r\n background: linear-gradient(to bottom, var(--cyan), transparent);\r\n }\r\n @keyframes bounce-up { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }\r\n\r\n \/* SECTION BASICS *\/\r\n section { position: relative; padding: 120px 60px; }\r\n .section-label {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n font-size: 11px; font-weight: 600; letter-spacing: 0.14em;\r\n text-transform: uppercase; color: var(--cyan); margin-bottom: 16px;\r\n }\r\n .section-label::before {\r\n content: ''; display: block; width: 20px; height: 1px;\r\n background: var(--cyan);\r\n }\r\n .section-title {\r\n font-family: 'Outfit', sans-serif; font-weight: 800;\r\n font-size: clamp(32px, 4vw, 52px); line-height: 1.1;\r\n letter-spacing: -0.03em;\r\n }\r\n .section-sub {\r\n color: var(--text-secondary); font-size: 17px; line-height: 1.7;\r\n max-width: 540px; font-weight: 300; margin-top: 16px;\r\n }\r\n .container { max-width: 1200px; margin: 0 auto; }\r\n\r\n \/* STATS BAR *\/\r\n #stats {\r\n padding: 0; background: rgba(255,255,255,0.02);\r\n border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);\r\n }\r\n .stats-grid {\r\n max-width: 1200px; margin: 0 auto;\r\n display: grid; grid-template-columns: repeat(4,1fr);\r\n divide-x: 1px solid var(--border);\r\n }\r\n .stat-item {\r\n padding: 44px 40px; text-align: center;\r\n border-right: 1px solid var(--border);\r\n position: relative; overflow: hidden;\r\n }\r\n .stat-item:last-child { border-right: none; }\r\n .stat-item::before {\r\n content: ''; position: absolute; inset: 0;\r\n background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(79,70,229,0.06) 0%, transparent 70%);\r\n opacity: 0; transition: opacity 0.4s;\r\n }\r\n .stat-item:hover::before { opacity: 1; }\r\n .stat-num {\r\n font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 46px;\r\n line-height: 1; letter-spacing: -0.04em;\r\n background: linear-gradient(135deg, var(--cyan), var(--indigo));\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n }\r\n .stat-label { color: var(--text-secondary); font-size: 13px; margin-top: 8px; font-weight: 400; }\r\n\r\n \/* FUNNEL SECTION *\/\r\n #funnel {\r\n background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(10,15,44,0.8) 0%, var(--bg-deep) 100%);\r\n min-height: 100vh; padding: 100px 60px;\r\n }\r\n .funnel-header { text-align: center; margin-bottom: 80px; }\r\n .funnel-layout {\r\n max-width: 1100px; margin: 0 auto;\r\n display: grid; grid-template-columns: 1fr 480px 1fr; gap: 0;\r\n align-items: start; position: relative;\r\n }\r\n .funnel-stages-left, .funnel-stages-right {\r\n display: flex; flex-direction: column; gap: 0; padding-top: 20px;\r\n }\r\n\r\n \/* FUNNEL VISUAL *\/\r\n .funnel-visual {\r\n position: relative; display: flex; flex-direction: column;\r\n align-items: center; gap: 0; padding: 0 20px;\r\n }\r\n .funnel-ring-wrap {\r\n width: 100%; display: flex; justify-content: center;\r\n position: relative; cursor: none;\r\n }\r\n .funnel-ring {\r\n border-radius: 50%; border: 2px solid transparent;\r\n display: flex; align-items: center; justify-content: center;\r\n position: relative; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);\r\n backdrop-filter: blur(8px);\r\n }\r\n .funnel-ring::before {\r\n content: ''; position: absolute; inset: -2px;\r\n border-radius: 50%; z-index: -1;\r\n transition: all 0.4s;\r\n }\r\n .funnel-connector {\r\n width: 2px; height: 28px;\r\n background: linear-gradient(to bottom, rgba(79,70,229,0.4), rgba(0,245,255,0.4));\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Ring 1 \u2013 Awareness *\/\r\n .ring-1 { width: 440px; height: 100px; background: rgba(0,245,255,0.04); border-color: rgba(0,245,255,0.25); }\r\n .ring-1::before { background: linear-gradient(135deg, rgba(0,245,255,0.15), rgba(79,70,229,0.1)); opacity: 0; }\r\n .ring-1.active { border-color: rgba(0,245,255,0.8); box-shadow: 0 0 60px rgba(0,245,255,0.25), inset 0 0 30px rgba(0,245,255,0.06); }\r\n .ring-1.active::before { opacity: 1; }\r\n\r\n .ring-2 { width: 370px; height: 90px; background: rgba(79,70,229,0.04); border-color: rgba(79,70,229,0.25); }\r\n .ring-2.active { border-color: rgba(79,70,229,0.8); box-shadow: 0 0 50px rgba(79,70,229,0.3), inset 0 0 25px rgba(79,70,229,0.08); }\r\n\r\n .ring-3 { width: 290px; height: 80px; background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.25); }\r\n .ring-3.active { border-color: rgba(124,58,237,0.8); box-shadow: 0 0 45px rgba(124,58,237,0.35), inset 0 0 20px rgba(124,58,237,0.08); }\r\n\r\n .ring-4 { width: 210px; height: 70px; background: rgba(167,139,250,0.04); border-color: rgba(167,139,250,0.25); }\r\n .ring-4.active { border-color: rgba(167,139,250,0.8); box-shadow: 0 0 40px rgba(167,139,250,0.4), inset 0 0 18px rgba(167,139,250,0.1); }\r\n\r\n .ring-5 { width: 130px; height: 60px; background: rgba(196,181,253,0.05); border-color: rgba(196,181,253,0.3); }\r\n .ring-5.active { border-color: rgba(196,181,253,0.9); box-shadow: 0 0 35px rgba(196,181,253,0.5), inset 0 0 15px rgba(196,181,253,0.1); }\r\n\r\n .ring-label {\r\n font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px;\r\n letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);\r\n transition: color 0.4s;\r\n }\r\n .funnel-ring.active .ring-label { color: var(--text-primary); }\r\n\r\n \/* STAGE CARDS *\/\r\n .stage-card {\r\n padding: 28px 24px; border-radius: 16px;\r\n background: var(--bg-card); border: 1px solid var(--border);\r\n backdrop-filter: blur(12px); margin: 10px;\r\n opacity: 0.35; transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);\r\n position: relative; overflow: hidden;\r\n }\r\n .stage-card.active {\r\n opacity: 1; border-color: var(--border-bright);\r\n box-shadow: 0 8px 40px rgba(0,0,0,0.4), var(--glow-indigo);\r\n transform: scale(1.02);\r\n }\r\n .stage-card::before {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(0,245,255,0.5), transparent);\r\n opacity: 0; transition: opacity 0.4s;\r\n }\r\n .stage-card.active::before { opacity: 1; }\r\n .stage-card-label {\r\n font-size: 10px; font-weight: 600; letter-spacing: 0.14em;\r\n text-transform: uppercase; margin-bottom: 6px;\r\n }\r\n .stage-card h4 {\r\n font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px;\r\n margin-bottom: 10px; line-height: 1.3;\r\n }\r\n .stage-card p {\r\n font-size: 13px; color: var(--text-secondary); line-height: 1.6; font-weight: 300;\r\n }\r\n .stage-card-dot {\r\n width: 8px; height: 8px; border-radius: 50%;\r\n margin-bottom: 12px; transition: box-shadow 0.4s;\r\n }\r\n .stage-card.active .stage-card-dot {\r\n box-shadow: 0 0 12px currentColor;\r\n }\r\n .left-card { text-align: right; }\r\n .right-card { text-align: left; }\r\n\r\n \/* Stage color coding *\/\r\n .color-1 { color: #00F5FF; }\r\n .color-2 { color: #4F46E5; }\r\n .color-3 { color: #7C3AED; }\r\n .color-4 { color: #A78BFA; }\r\n .color-5 { color: #C4B5FD; }\r\n .bg-dot-1 { background: #00F5FF; }\r\n .bg-dot-2 { background: #4F46E5; }\r\n .bg-dot-3 { background: #7C3AED; }\r\n .bg-dot-4 { background: #A78BFA; }\r\n .bg-dot-5 { background: #C4B5FD; }\r\n\r\n \/* Left cards align dots right *\/\r\n .left-card { display: flex; flex-direction: column; align-items: flex-end; }\r\n .left-card .stage-card-dot { margin-left: auto; }\r\n .right-card { display: flex; flex-direction: column; align-items: flex-start; }\r\n\r\n \/* Stage nav dots *\/\r\n .funnel-nav {\r\n display: flex; justify-content: center; gap: 10px; margin-top: 40px;\r\n }\r\n .fnav-dot {\r\n width: 8px; height: 8px; border-radius: 50%; background: var(--border-bright);\r\n transition: all 0.3s; cursor: none;\r\n }\r\n .fnav-dot.active { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transform: scale(1.3); }\r\n\r\n \/* SERVICES SECTION *\/\r\n #services { background: var(--bg-dark); }\r\n .services-grid {\r\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\r\n margin-top: 64px;\r\n }\r\n .service-card {\r\n padding: 36px 32px; border-radius: 20px;\r\n background: var(--bg-card); border: 1px solid var(--border);\r\n backdrop-filter: blur(16px); position: relative; overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);\r\n cursor: none;\r\n }\r\n .service-card:hover {\r\n transform: translateY(-6px);\r\n border-color: var(--border-bright);\r\n box-shadow: 0 24px 60px rgba(0,0,0,0.5);\r\n }\r\n .service-card::after {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\r\n opacity: 0; transition: opacity 0.4s; border-radius: 20px 20px 0 0;\r\n }\r\n .service-card:hover::after { opacity: 1; }\r\n .sc-1::after { background: linear-gradient(90deg, #00F5FF, transparent); }\r\n .sc-2::after { background: linear-gradient(90deg, #4F46E5, transparent); }\r\n .sc-3::after { background: linear-gradient(90deg, #7C3AED, transparent); }\r\n .sc-4::after { background: linear-gradient(90deg, #A78BFA, transparent); }\r\n .sc-5::after { background: linear-gradient(90deg, #C4B5FD, transparent); }\r\n .sc-6::after { background: linear-gradient(90deg, #00F5FF, #7C3AED); }\r\n\r\n .service-icon {\r\n width: 52px; height: 52px; border-radius: 14px;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 20px; font-size: 22px;\r\n position: relative;\r\n }\r\n .service-stage-tag {\r\n display: inline-block; font-size: 10px; font-weight: 600;\r\n letter-spacing: 0.1em; text-transform: uppercase;\r\n padding: 4px 10px; border-radius: 100px; margin-bottom: 12px;\r\n }\r\n .service-card h3 {\r\n font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px;\r\n margin-bottom: 12px; line-height: 1.3;\r\n }\r\n .service-card p {\r\n font-size: 14px; color: var(--text-secondary); line-height: 1.65;\r\n font-weight: 300;\r\n }\r\n .service-arrow {\r\n margin-top: 20px; font-size: 18px; color: var(--text-muted);\r\n transition: all 0.3s; display: inline-block;\r\n }\r\n .service-card:hover .service-arrow { color: var(--cyan); transform: translateX(4px); }\r\n\r\n \/* CASE STUDIES *\/\r\n #cases { background: var(--bg-deep); overflow: hidden; }\r\n .cases-header { max-width: 600px; margin-bottom: 64px; }\r\n .cases-scroll-track {\r\n display: flex; gap: 24px; overflow-x: auto;\r\n padding-bottom: 20px; scrollbar-width: none;\r\n -webkit-overflow-scrolling: touch;\r\n scroll-snap-type: x mandatory;\r\n }\r\n .cases-scroll-track::-webkit-scrollbar { display: none; }\r\n .case-card {\r\n min-width: 380px; padding: 36px; border-radius: 20px;\r\n background: var(--bg-card); border: 1px solid var(--border);\r\n backdrop-filter: blur(16px); scroll-snap-align: start;\r\n transition: all 0.4s; position: relative; overflow: hidden; cursor: none;\r\n }\r\n .case-card::before {\r\n content: ''; position: absolute; inset: 0;\r\n background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(79,70,229,0.08), transparent);\r\n transition: opacity 0.4s; opacity: 0;\r\n }\r\n .case-card:hover { transform: translateY(-4px); border-color: var(--border-bright); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }\r\n .case-card:hover::before { opacity: 1; }\r\n .case-client {\r\n display: flex; align-items: center; gap: 12px; margin-bottom: 24px;\r\n }\r\n .case-avatar {\r\n width: 42px; height: 42px; border-radius: 10px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px; font-weight: 700; font-family: 'Outfit', sans-serif;\r\n }\r\n .case-client-name { font-weight: 600; font-size: 15px; }\r\n .case-client-industry { font-size: 12px; color: var(--text-muted); }\r\n .case-metrics {\r\n display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;\r\n margin-bottom: 24px;\r\n }\r\n .metric {\r\n padding: 14px 12px; border-radius: 10px;\r\n background: rgba(255,255,255,0.03); border: 1px solid var(--border);\r\n text-align: center;\r\n }\r\n .metric-val {\r\n font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 22px;\r\n line-height: 1; letter-spacing: -0.03em;\r\n }\r\n .metric-key { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em; }\r\n .case-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.65; font-weight: 300; }\r\n .case-tag {\r\n display: inline-block; margin-top: 16px; font-size: 11px;\r\n padding: 4px 12px; border-radius: 100px; font-weight: 500;\r\n }\r\n\r\n \/* PROCESS SECTION *\/\r\n #process { background: var(--bg-dark); }\r\n .process-grid {\r\n display: grid; grid-template-columns: repeat(4,1fr); gap: 2px;\r\n margin-top: 64px; position: relative;\r\n }\r\n .process-grid::before {\r\n content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%;\r\n height: 1px; background: linear-gradient(90deg, transparent, var(--indigo), var(--cyan), var(--indigo), transparent);\r\n z-index: 0;\r\n }\r\n .process-step {\r\n padding: 32px 24px; text-align: center; position: relative; z-index: 1;\r\n }\r\n .process-num {\r\n width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-bright);\r\n display: flex; align-items: center; justify-content: center;\r\n font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 18px;\r\n margin: 0 auto 20px; background: var(--bg-deep);\r\n transition: all 0.4s;\r\n }\r\n .process-step:hover .process-num {\r\n border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan);\r\n }\r\n .process-step h4 {\r\n font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 10px;\r\n }\r\n .process-step p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; font-weight: 300; }\r\n\r\n \/* ROI CALCULATOR *\/\r\n #calculator {\r\n background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,70,229,0.1), transparent 60%), var(--bg-deep);\r\n padding: 120px 60px;\r\n }\r\n .calc-wrap {\r\n max-width: 900px; margin: 0 auto;\r\n background: var(--bg-card); border: 1px solid var(--border);\r\n border-radius: 28px; padding: 60px; backdrop-filter: blur(20px);\r\n position: relative; overflow: hidden;\r\n }\r\n .calc-wrap::before {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--cyan), var(--indigo), var(--violet), transparent);\r\n }\r\n .calc-header { text-align: center; margin-bottom: 48px; }\r\n .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }\r\n .calc-inputs { display: flex; flex-direction: column; gap: 24px; }\r\n .calc-field label {\r\n display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em;\r\n text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px;\r\n }\r\n .calc-field input, .calc-field select {\r\n width: 100%; padding: 14px 18px;\r\n background: rgba(255,255,255,0.05); border: 1px solid var(--border-bright);\r\n border-radius: 10px; color: var(--text-primary); font-size: 16px;\r\n font-family: 'Outfit', sans-serif; font-weight: 600;\r\n outline: none; transition: all 0.3s; cursor: none;\r\n }\r\n .calc-field input:focus, .calc-field select:focus {\r\n border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,245,255,0.1);\r\n }\r\n .calc-field select option { background: #1a1f36; }\r\n .calc-results { display: flex; flex-direction: column; justify-content: space-between; }\r\n .calc-result-card {\r\n padding: 24px; border-radius: 14px;\r\n background: rgba(0,245,255,0.04); border: 1px solid rgba(0,245,255,0.15);\r\n margin-bottom: 16px;\r\n }\r\n .calc-result-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }\r\n .calc-result-val {\r\n font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 32px;\r\n color: var(--cyan); letter-spacing: -0.03em;\r\n }\r\n .calc-cta {\r\n width: 100%; padding: 16px;\r\n background: linear-gradient(135deg, #4F46E5, #7C3AED);\r\n color: #fff; border: none; border-radius: 12px; font-size: 15px;\r\n font-weight: 600; font-family: 'Outfit', sans-serif; cursor: none;\r\n transition: all 0.3s; box-shadow: 0 0 30px rgba(79,70,229,0.3);\r\n margin-top: auto;\r\n }\r\n .calc-cta:hover { box-shadow: 0 0 50px rgba(79,70,229,0.6); transform: translateY(-1px); }\r\n\r\n \/* TESTIMONIALS *\/\r\n #testimonials { background: var(--bg-dark); padding: 120px 60px; }\r\n .testi-grid {\r\n display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px;\r\n }\r\n .testi-card {\r\n padding: 32px 28px; border-radius: 18px;\r\n background: var(--bg-card); border: 1px solid var(--border);\r\n transition: all 0.4s; cursor: none;\r\n }\r\n .testi-card:hover { border-color: var(--border-bright); transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,0.4); }\r\n .testi-stars { color: #F59E0B; font-size: 14px; margin-bottom: 16px; letter-spacing: 2px; }\r\n .testi-quote { font-size: 15px; line-height: 1.7; color: var(--text-secondary); font-weight: 300; font-style: italic; margin-bottom: 24px; }\r\n .testi-author { display: flex; align-items: center; gap: 12px; }\r\n .testi-av {\r\n width: 38px; height: 38px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 700; font-size: 14px; font-family: 'Outfit', sans-serif;\r\n }\r\n .testi-name { font-weight: 600; font-size: 14px; }\r\n .testi-role { font-size: 12px; color: var(--text-muted); }\r\n\r\n \/* FINAL CTA *\/\r\n #final-cta {\r\n background: var(--bg-deep);\r\n position: relative; overflow: hidden; text-align: center; padding: 160px 60px;\r\n }\r\n #final-cta::before {\r\n content: ''; position: absolute; top: 50%; left: 50%;\r\n transform: translate(-50%,-50%);\r\n width: 800px; height: 800px; border-radius: 50%;\r\n background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, rgba(0,245,255,0.05) 40%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n .cta-headline {\r\n font-family: 'Outfit', sans-serif; font-weight: 800;\r\n font-size: clamp(40px, 5vw, 68px); line-height: 1.1;\r\n letter-spacing: -0.04em; margin-bottom: 20px; position: relative; z-index: 1;\r\n }\r\n .cta-sub {\r\n color: var(--text-secondary); font-size: 18px; line-height: 1.6;\r\n max-width: 500px; margin: 0 auto 44px; font-weight: 300; position: relative; z-index: 1;\r\n }\r\n .cta-buttons { display: flex; gap: 16px; justify-content: center; position: relative; z-index: 1; flex-wrap: wrap; }\r\n .btn-large {\r\n padding: 20px 48px; font-size: 16px; border-radius: 12px;\r\n }\r\n\r\n \/* FOOTER *\/\r\n footer {\r\n background: rgba(0,0,0,0.4); border-top: 1px solid var(--border);\r\n padding: 48px 60px; display: flex; align-items: center; justify-content: space-between;\r\n }\r\n .footer-logo {\r\n font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px;\r\n background: linear-gradient(90deg, #00F5FF, #4F46E5);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n }\r\n .footer-links { display: flex; gap: 28px; }\r\n .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; transition: color 0.2s; }\r\n .footer-links a:hover { color: var(--text-secondary); }\r\n .footer-copy { font-size: 13px; color: var(--text-muted); }\r\n\r\n \/* PARTICLES *\/\r\n #particles-canvas {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 0;\r\n opacity: 0.4;\r\n }\r\n\r\n \/* GLOW ORBS *\/\r\n .orb {\r\n position: absolute; border-radius: 50%; filter: blur(80px);\r\n pointer-events: none; animation: orb-float 8s ease-in-out infinite;\r\n }\r\n @keyframes orb-float {\r\n 0%,100%{transform:translate(0,0)} 33%{transform:translate(20px,-15px)} 66%{transform:translate(-15px,20px)}\r\n }\r\n\r\n \/* SCROLL ANIMATIONS *\/\r\n .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.34,1.2,0.64,1); }\r\n .fade-up.visible { opacity: 1; transform: translateY(0); }\r\n .fade-up-d1 { transition-delay: 0.1s; }\r\n .fade-up-d2 { transition-delay: 0.2s; }\r\n .fade-up-d3 { transition-delay: 0.3s; }\r\n .fade-up-d4 { transition-delay: 0.4s; }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 900px) {\r\n nav { padding: 16px 24px; }\r\n .nav-links { display: none; }\r\n section { padding: 80px 24px; }\r\n .funnel-layout { grid-template-columns: 1fr; }\r\n .funnel-stages-left, .funnel-stages-right { display: none; }\r\n .services-grid { grid-template-columns: 1fr; }\r\n .testi-grid { grid-template-columns: 1fr; }\r\n .calc-grid { grid-template-columns: 1fr; }\r\n .process-grid { grid-template-columns: 1fr 1fr; }\r\n .stats-grid { grid-template-columns: repeat(2,1fr); }\r\n footer { flex-direction: column; gap: 20px; text-align: center; }\r\n .ring-1{width:280px;height:80px} .ring-2{width:234px;height:72px} .ring-3{width:188px;height:64px}\r\n .ring-4{width:140px;height:55px} .ring-5{width:90px;height:48px}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<canvas id=\"particles-canvas\"><\/canvas>\r\n<div id=\"cursor\"><\/div>\r\n<div id=\"cursor-ring\"><\/div>\r\n\r\n<!-- NAV -->\r\n<nav id=\"navbar\">\r\n <div class=\"nav-logo\">Judy<\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#funnel\">Funnel<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#cases\">Results<\/a><\/li>\r\n <li><a href=\"#calculator\">ROI Calculator<\/a><\/li>\r\n <\/ul>\r\n <button class=\"nav-cta\" onclick=\"scrollToSection('final-cta')\">Book a Call<\/button>\r\n<\/nav>\r\n\r\n<!-- HERO -->\r\n<section id=\"hero\">\r\n <canvas id=\"hero-canvas\"><\/canvas>\r\n <div class=\"orb\" style=\"width:600px;height:600px;background:rgba(79,70,229,0.08);top:-200px;left:-100px;animation-duration:10s;\"><\/div>\r\n <div class=\"orb\" style=\"width:400px;height:400px;background:rgba(0,245,255,0.05);bottom:-100px;right:-50px;animation-duration:12s;animation-delay:-4s;\"><\/div>\r\n <div class=\"hero-content\" id=\"heroContent\">\r\n <div class=\"hero-badge\"><span><\/span>AI-Powered Growth Engine<\/div>\r\n <h1 class=\"hero-headline\">\r\n Turn Traffic Into Clients<br>\r\n <span class=\"gradient-text\">\u2014 With Smart Funnels<\/span>\r\n <\/h1>\r\n <p class=\"hero-sub\">AvPeri builds intelligent marketing funnels that transform strangers into high-ticket clients \u2014 using AI, precision targeting, and conversion science.<\/p>\r\n <div class=\"hero-buttons\">\r\n <button class=\"btn-primary\" onclick=\"scrollToSection('funnel')\">Explore the Funnel<\/button>\r\n <button class=\"btn-secondary\" onclick=\"scrollToSection('final-cta')\">Book Strategy Call \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"scroll-hint\">\r\n <span>Scroll<\/span>\r\n <div class=\"scroll-hint-line\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- STATS -->\r\n<section id=\"stats\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item fade-up\">\r\n <div class=\"stat-num\" data-target=\"340\">0<\/div>\r\n <div class=\"stat-label\">% Average ROI Delivered<\/div>\r\n <\/div>\r\n <div class=\"stat-item fade-up fade-up-d1\">\r\n <div class=\"stat-num\" data-target=\"120\">0<\/div>\r\n <div class=\"stat-label\">+ Funnels Built & Deployed<\/div>\r\n <\/div>\r\n <div class=\"stat-item fade-up fade-up-d2\">\r\n <div class=\"stat-num\" data-target=\"98\">0<\/div>\r\n <div class=\"stat-label\">% Client Satisfaction Rate<\/div>\r\n <\/div>\r\n <div class=\"stat-item fade-up fade-up-d3\">\r\n <div class=\"stat-num\" data-target=\"12\">0<\/div>\r\n <div class=\"stat-label\">M+ in Revenue Generated<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- INTERACTIVE FUNNEL SECTION -->\r\n<section id=\"funnel\">\r\n <div class=\"funnel-header\">\r\n <div class=\"section-label\">How We Convert<\/div>\r\n <h2 class=\"section-title\">The AvPeri <span style=\"background:linear-gradient(135deg,#00F5FF,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;\">Conversion Funnel<\/span><\/h2>\r\n <p class=\"section-sub\" style=\"margin:16px auto 0;text-align:center;\">Every click, impression, and interaction is engineered to guide your prospect toward becoming a paying client.<\/p>\r\n <\/div>\r\n\r\n <div class=\"funnel-layout\">\r\n <!-- LEFT STAGE CARDS -->\r\n <div class=\"funnel-stages-left\" id=\"leftCards\">\r\n <div class=\"stage-card left-card\" data-stage=\"1\">\r\n <div class=\"stage-card-label color-1\">Stage 1<\/div>\r\n <div class=\"stage-card-dot bg-dot-1\"><\/div>\r\n <h4>They don't know you exist<\/h4>\r\n <p>Your ideal clients are out there \u2014 but you're invisible to them. Every day without visibility is revenue lost.<\/p>\r\n <\/div>\r\n <div class=\"stage-card left-card\" data-stage=\"2\">\r\n <div class=\"stage-card-label color-2\">Stage 2<\/div>\r\n <div class=\"stage-card-dot bg-dot-2\"><\/div>\r\n <h4>They're curious but uncommitted<\/h4>\r\n <p>They found you \u2014 now they're watching. Most brands lose them here with bland content and zero follow-up.<\/p>\r\n <\/div>\r\n <div class=\"stage-card left-card\" data-stage=\"3\">\r\n <div class=\"stage-card-label color-3\">Stage 3<\/div>\r\n <div class=\"stage-card-dot bg-dot-3\"><\/div>\r\n <h4>They're comparing you to rivals<\/h4>\r\n <p>Decision time. Without compelling proof and authority, they'll choose your competitor every time.<\/p>\r\n <\/div>\r\n <div class=\"stage-card left-card\" data-stage=\"4\">\r\n <div class=\"stage-card-label color-4\">Stage 4<\/div>\r\n <div class=\"stage-card-dot bg-dot-4\"><\/div>\r\n <h4>They want to buy but hesitate<\/h4>\r\n <p>So close. A single friction point, unanswered objection, or slow response kills the deal at this stage.<\/p>\r\n <\/div>\r\n <div class=\"stage-card left-card\" data-stage=\"5\">\r\n <div class=\"stage-card-label color-5\">Stage 5<\/div>\r\n <div class=\"stage-card-dot bg-dot-5\"><\/div>\r\n <h4>The moment of decision<\/h4>\r\n <p>This is where revenue is made or lost. Most businesses leave money on the table with broken checkout flows.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FUNNEL VISUAL CENTER -->\r\n <div class=\"funnel-visual\" id=\"funnelVisual\">\r\n <div class=\"funnel-ring-wrap\" data-stage=\"1\">\r\n <div class=\"funnel-ring ring-1 active\" id=\"ring-1\">\r\n <span class=\"ring-label\">Awareness<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"funnel-connector\"><\/div>\r\n <div class=\"funnel-ring-wrap\" data-stage=\"2\">\r\n <div class=\"funnel-ring ring-2\" id=\"ring-2\">\r\n <span class=\"ring-label\">Interest<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"funnel-connector\"><\/div>\r\n <div class=\"funnel-ring-wrap\" data-stage=\"3\">\r\n <div class=\"funnel-ring ring-3\" id=\"ring-3\">\r\n <span class=\"ring-label\">Consideration<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"funnel-connector\"><\/div>\r\n <div class=\"funnel-ring-wrap\" data-stage=\"4\">\r\n <div class=\"funnel-ring ring-4\" id=\"ring-4\">\r\n <span class=\"ring-label\">Intent<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"funnel-connector\"><\/div>\r\n <div class=\"funnel-ring-wrap\" data-stage=\"5\">\r\n <div class=\"funnel-ring ring-5\" id=\"ring-5\">\r\n <span class=\"ring-label\">Conversion<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"funnel-nav\" id=\"funnelNav\">\r\n <div class=\"fnav-dot active\" data-stage=\"1\"><\/div>\r\n <div class=\"fnav-dot\" data-stage=\"2\"><\/div>\r\n <div class=\"fnav-dot\" data-stage=\"3\"><\/div>\r\n <div class=\"fnav-dot\" data-stage=\"4\"><\/div>\r\n <div class=\"fnav-dot\" data-stage=\"5\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT STAGE CARDS -->\r\n <div class=\"funnel-stages-right\" id=\"rightCards\">\r\n <div class=\"stage-card right-card active\" data-stage=\"1\">\r\n <div class=\"stage-card-label color-1\">Our Solution<\/div>\r\n <div class=\"stage-card-dot bg-dot-1\"><\/div>\r\n <h4>AI-Driven Awareness Campaigns<\/h4>\r\n <p>We launch multi-channel campaigns using Google, Meta, and TikTok \u2014 precision-targeted to your exact buyer.<\/p>\r\n <\/div>\r\n <div class=\"stage-card right-card\" data-stage=\"2\">\r\n <div class=\"stage-card-label color-2\">Our Solution<\/div>\r\n <div class=\"stage-card-dot bg-dot-2\"><\/div>\r\n <h4>Content That Hooks & Educates<\/h4>\r\n <p>Automated email sequences, video content, and social proof that builds trust on autopilot \u2014 24\/7.<\/p>\r\n <\/div>\r\n <div class=\"stage-card right-card\" data-stage=\"3\">\r\n <div class=\"stage-card-label color-3\">Our Solution<\/div>\r\n <div class=\"stage-card-dot bg-dot-3\"><\/div>\r\n <h4>Authority-Building Assets<\/h4>\r\n <p>Case studies, comparison pages, and social proof systems that make choosing you a no-brainer.<\/p>\r\n <\/div>\r\n <div class=\"stage-card right-card\" data-stage=\"4\">\r\n <div class=\"stage-card-label color-4\">Our Solution<\/div>\r\n <div class=\"stage-card-dot bg-dot-4\"><\/div>\r\n <h4>Smart Retargeting & Follow-Up<\/h4>\r\n <p>AI-powered retargeting ads and personalized follow-up sequences that re-engage warm leads automatically.<\/p>\r\n <\/div>\r\n <div class=\"stage-card right-card\" data-stage=\"5\">\r\n <div class=\"stage-card-label color-5\">Our Solution<\/div>\r\n <div class=\"stage-card-dot bg-dot-5\"><\/div>\r\n <h4>Frictionless Conversion Pages<\/h4>\r\n <p>Optimized landing pages and checkout flows that eliminate every barrier between interest and revenue.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- SERVICES -->\r\n<section id=\"services\">\r\n <div class=\"container\">\r\n <div class=\"section-label\">What We Do<\/div>\r\n <h2 class=\"section-title\">Full-Funnel <span style=\"background:linear-gradient(135deg,#4F46E5,#00F5FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;\">Services<\/span><\/h2>\r\n <p class=\"section-sub\">Every service maps to a specific stage in your funnel \u2014 engineered to maximize conversions at every step.<\/p>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card sc-1 fade-up\">\r\n <div class=\"service-icon\" style=\"background:rgba(0,245,255,0.1);\">\ud83d\udd0d<\/div>\r\n <div class=\"service-stage-tag\" style=\"background:rgba(0,245,255,0.1);color:#00F5FF;\">Awareness<\/div>\r\n <h3>SEO & Organic Search<\/h3>\r\n <p>Dominate search rankings and bring highly-qualified traffic to your funnel before your competition does.<\/p>\r\n <div class=\"service-arrow\">\u2192<\/div>\r\n <\/div>\r\n <div class=\"service-card sc-2 fade-up fade-up-d1\">\r\n <div class=\"service-icon\" style=\"background:rgba(79,70,229,0.1);\">\ud83d\udce3<\/div>\r\n <div class=\"service-stage-tag\" style=\"background:rgba(79,70,229,0.1);color:#818CF8;\">Awareness<\/div>\r\n <h3>Paid Advertising<\/h3>\r\n <p>AI-optimized ad campaigns across Google, Meta, and TikTok that put you in front of buyers at the right moment.<\/p>\r\n <div class=\"service-arrow\">\u2192<\/div>\r\n <\/div>\r\n <div class=\"service-card sc-3 fade-up fade-up-d2\">\r\n <div class=\"service-icon\" style=\"background:rgba(124,58,237,0.1);\">\u270d\ufe0f<\/div>\r\n <div class=\"service-stage-tag\" style=\"background:rgba(124,58,237,0.1);color:#A78BFA;\">Interest<\/div>\r\n <h3>Content Strategy<\/h3>\r\n <p>Educational content that builds authority, nurtures relationships, and keeps your brand top of mind.<\/p>\r\n <div class=\"service-arrow\">\u2192<\/div>\r\n <\/div>\r\n <div class=\"service-card sc-4 fade-up\">\r\n <div class=\"service-icon\" style=\"background:rgba(167,139,250,0.1);\">\ud83d\udce7<\/div>\r\n <div class=\"service-stage-tag\" style=\"background:rgba(167,139,250,0.1);color:#C4B5FD;\">Consideration<\/div>\r\n <h3>Email Automation<\/h3>\r\n <p>Intelligent email sequences that guide leads through the consideration phase with the right message at the right time.<\/p>\r\n <div class=\"service-arrow\">\u2192<\/div>\r\n <\/div>\r\n <div class=\"service-card sc-5 fade-up fade-up-d1\">\r\n <div class=\"service-icon\" style=\"background:rgba(99,102,241,0.1);\">\ud83c\udfaf<\/div>\r\n <div class=\"service-stage-tag\" style=\"background:rgba(99,102,241,0.1);color:#6366F1;\">Intent<\/div>\r\n <h3>Retargeting & CRO<\/h3>\r\n <p>Capture high-intent leads who almost converted and bring them back with precision-timed offers that close deals.<\/p>\r\n <div class=\"service-arrow\">\u2192<\/div>\r\n <\/div>\r\n <div class=\"service-card sc-6 fade-up fade-up-d2\">\r\n <div class=\"service-icon\" style=\"background:rgba(0,245,255,0.06);\">\u26a1<\/div>\r\n <div class=\"service-stage-tag\" style=\"background:linear-gradient(135deg,rgba(0,245,255,0.1),rgba(124,58,237,0.1));color:#A78BFA;\">Full-Funnel<\/div>\r\n <h3>AI Funnel Automation<\/h3>\r\n <p>End-to-end funnel automation powered by AI \u2014 from first touch to signed contract, running 24\/7 without you.<\/p>\r\n <div class=\"service-arrow\">\u2192<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CASE STUDIES -->\r\n<section id=\"cases\">\r\n <div class=\"container\">\r\n <div class=\"cases-header\">\r\n <div class=\"section-label fade-up\">Proof of Results<\/div>\r\n <h2 class=\"section-title fade-up fade-up-d1\">Client <span style=\"background:linear-gradient(135deg,#00F5FF,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;\">Success Stories<\/span><\/h2>\r\n <p class=\"section-sub fade-up fade-up-d2\">Real numbers, real businesses, real ROI. See what a properly engineered funnel does to a business.<\/p>\r\n <\/div>\r\n <div class=\"cases-scroll-track\">\r\n <div class=\"case-card\">\r\n <div class=\"case-client\">\r\n <div class=\"case-avatar\" style=\"background:rgba(0,245,255,0.12);color:#00F5FF;\">FS<\/div>\r\n <div>\r\n <div class=\"case-client-name\">FitStart Pro<\/div>\r\n <div class=\"case-client-industry\">Health & Fitness SaaS<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"case-metrics\">\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#00F5FF;\">4.2\u00d7<\/div><div class=\"metric-key\">ROAS<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#A78BFA;\">+312%<\/div><div class=\"metric-key\">Leads<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#6366F1;\">-44%<\/div><div class=\"metric-key\">CAC<\/div><\/div>\r\n <\/div>\r\n <p class=\"case-desc\">Rebuilt their entire acquisition funnel from scratch. Launched AI-targeted Meta ads with an automated email nurture sequence that tripled qualified trial sign-ups in 90 days.<\/p>\r\n <div class=\"case-tag\" style=\"background:rgba(0,245,255,0.08);color:#00F5FF;\">Full-Funnel Overhaul<\/div>\r\n <\/div>\r\n <div class=\"case-card\">\r\n <div class=\"case-client\">\r\n <div class=\"case-avatar\" style=\"background:rgba(124,58,237,0.12);color:#A78BFA;\">TL<\/div>\r\n <div>\r\n <div class=\"case-client-name\">TalentLink Agency<\/div>\r\n <div class=\"case-client-industry\">B2B HR Tech<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"case-metrics\">\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#A78BFA;\">$1.2M<\/div><div class=\"metric-key\">Pipeline<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#00F5FF;\">+580%<\/div><div class=\"metric-key\">Demos<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#6366F1;\">8mo<\/div><div class=\"metric-key\">Timeframe<\/div><\/div>\r\n <\/div>\r\n <p class=\"case-desc\">Deployed an end-to-end B2B funnel with LinkedIn targeting, automated outreach, and a CRO-optimized demo booking flow that generated over $1.2M in qualified pipeline.<\/p>\r\n <div class=\"case-tag\" style=\"background:rgba(124,58,237,0.08);color:#A78BFA;\">B2B Lead Engine<\/div>\r\n <\/div>\r\n <div class=\"case-card\">\r\n <div class=\"case-client\">\r\n <div class=\"case-avatar\" style=\"background:rgba(79,70,229,0.12);color:#818CF8;\">NC<\/div>\r\n <div>\r\n <div class=\"case-client-name\">NovaCraft Studio<\/div>\r\n <div class=\"case-client-industry\">E-commerce Design<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"case-metrics\">\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#818CF8;\">+218%<\/div><div class=\"metric-key\">Revenue<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#00F5FF;\">3.8\u00d7<\/div><div class=\"metric-key\">CVR<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#A78BFA;\">60d<\/div><div class=\"metric-key\">To Results<\/div><\/div>\r\n <\/div>\r\n <p class=\"case-desc\">Re-engineered checkout and post-purchase flow with AI-personalized upsell sequences. Conversion rate jumped 3.8\u00d7 in 60 days with zero increase in ad spend.<\/p>\r\n <div class=\"case-tag\" style=\"background:rgba(79,70,229,0.08);color:#818CF8;\">BOFU Optimization<\/div>\r\n <\/div>\r\n <div class=\"case-card\">\r\n <div class=\"case-client\">\r\n <div class=\"case-avatar\" style=\"background:rgba(0,245,255,0.08);color:#67E8F9;\">WV<\/div>\r\n <div>\r\n <div class=\"case-client-name\">WaveVault Finance<\/div>\r\n <div class=\"case-client-industry\">FinTech Startup<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"case-metrics\">\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#67E8F9;\">10k<\/div><div class=\"metric-key\">Users\/Mo<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#A78BFA;\">+445%<\/div><div class=\"metric-key\">Signups<\/div><\/div>\r\n <div class=\"metric\"><div class=\"metric-val\" style=\"color:#6366F1;\">$0.80<\/div><div class=\"metric-key\">CPA<\/div><\/div>\r\n <\/div>\r\n <p class=\"case-desc\">Built a viral referral loop combined with SEO-optimized content and retargeting. Scaled from 800 to 10,000 monthly sign-ups while dropping CPA below $1.00.<\/p>\r\n <div class=\"case-tag\" style=\"background:rgba(0,245,255,0.06);color:#67E8F9;\">Growth Loop System<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- PROCESS -->\r\n<section id=\"process\">\r\n <div class=\"container\">\r\n <div style=\"text-align:center;margin-bottom:0;\">\r\n <div class=\"section-label\" style=\"justify-content:center;\">How It Works<\/div>\r\n <h2 class=\"section-title fade-up\">Our 4-Step Process<\/h2>\r\n <p class=\"section-sub fade-up\" style=\"margin:16px auto 0;text-align:center;\">From discovery to results in weeks, not months.<\/p>\r\n <\/div>\r\n <div class=\"process-grid\">\r\n <div class=\"process-step fade-up\">\r\n <div class=\"process-num\">01<\/div>\r\n <h4>Funnel Audit<\/h4>\r\n <p>We map your existing customer journey and identify where you're losing money at each stage.<\/p>\r\n <\/div>\r\n <div class=\"process-step fade-up fade-up-d1\">\r\n <div class=\"process-num\">02<\/div>\r\n <h4>Strategy Design<\/h4>\r\n <p>Custom funnel architecture built around your audience, offer, and growth goals \u2014 no templates.<\/p>\r\n <\/div>\r\n <div class=\"process-step fade-up fade-up-d2\">\r\n <div class=\"process-num\">03<\/div>\r\n <h4>Build & Launch<\/h4>\r\n <p>We deploy campaigns, automations, and conversion assets \u2014 fully integrated and tested before launch.<\/p>\r\n <\/div>\r\n <div class=\"process-step fade-up fade-up-d3\">\r\n <div class=\"process-num\">04<\/div>\r\n <h4>Optimize & Scale<\/h4>\r\n <p>Continuous A\/B testing, data analysis, and iteration to compound results month after month.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ROI CALCULATOR -->\r\n<section id=\"calculator\">\r\n <div class=\"calc-wrap fade-up\">\r\n <div class=\"calc-header\">\r\n <div class=\"section-label\" style=\"justify-content:center;\">Interactive Tool<\/div>\r\n <h2 class=\"section-title\" style=\"font-size:clamp(28px,3vw,42px);\">Calculate Your Potential <span style=\"background:linear-gradient(135deg,#00F5FF,#4F46E5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;\">ROI<\/span><\/h2>\r\n <p style=\"color:var(--text-secondary);font-size:15px;margin-top:10px;\">See what a properly engineered funnel could mean for your business.<\/p>\r\n <\/div>\r\n <div class=\"calc-grid\">\r\n <div class=\"calc-inputs\">\r\n <div class=\"calc-field\">\r\n <label>Monthly Website Visitors<\/label>\r\n <input type=\"number\" id=\"calcVisitors\" value=\"5000\" min=\"100\">\r\n <\/div>\r\n <div class=\"calc-field\">\r\n <label>Current Conversion Rate (%)<\/label>\r\n <input type=\"number\" id=\"calcCVR\" value=\"1.2\" min=\"0.1\" max=\"100\" step=\"0.1\">\r\n <\/div>\r\n <div class=\"calc-field\">\r\n <label>Average Deal Value ($)<\/label>\r\n <input type=\"number\" id=\"calcDeal\" value=\"2500\" min=\"1\">\r\n <\/div>\r\n <div class=\"calc-field\">\r\n <label>Industry<\/label>\r\n <select id=\"calcIndustry\">\r\n <option value=\"2.5\">SaaS \/ Software<\/option>\r\n <option value=\"3\">E-commerce<\/option>\r\n <option value=\"2.2\">Professional Services<\/option>\r\n <option value=\"2.8\">Health & Wellness<\/option>\r\n <option value=\"2\">Finance<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"calc-results\">\r\n <div>\r\n <div class=\"calc-result-card\">\r\n <div class=\"calc-result-label\">Current Monthly Revenue<\/div>\r\n <div class=\"calc-result-val\" id=\"calcCurrentRev\">$0<\/div>\r\n <\/div>\r\n <div class=\"calc-result-card\" style=\"background:rgba(124,58,237,0.06);border-color:rgba(124,58,237,0.2);\">\r\n <div class=\"calc-result-label\">Projected With AvPeri<\/div>\r\n <div class=\"calc-result-val\" id=\"calcProjected\" style=\"color:#A78BFA;\">$0<\/div>\r\n <\/div>\r\n <div class=\"calc-result-card\" style=\"background:rgba(79,70,229,0.05);border-color:rgba(79,70,229,0.15);\">\r\n <div class=\"calc-result-label\">Additional Revenue \/ Month<\/div>\r\n <div class=\"calc-result-val\" id=\"calcGain\" style=\"color:#818CF8;\">$0<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"calc-cta\" onclick=\"scrollToSection('final-cta')\">Get My Free Funnel Audit \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TESTIMONIALS -->\r\n<section id=\"testimonials\">\r\n <div class=\"container\">\r\n <div style=\"text-align:center;margin-bottom:0;\">\r\n <div class=\"section-label\" style=\"justify-content:center;\">Social Proof<\/div>\r\n <h2 class=\"section-title fade-up\">What Our Clients Say<\/h2>\r\n <\/div>\r\n <div class=\"testi-grid\">\r\n <div class=\"testi-card fade-up\">\r\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-quote\">\"AvPeri completely transformed our acquisition funnel. We went from burning cash on ads to a self-sustaining growth machine. Best investment we've made.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-av\" style=\"background:rgba(0,245,255,0.1);color:#00F5FF;\">JK<\/div>\r\n <div>\r\n <div class=\"testi-name\">James Kwon<\/div>\r\n <div class=\"testi-role\">CEO, FitStart Pro<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card fade-up fade-up-d1\">\r\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-quote\">\"The funnel audit alone was worth thousands. They identified leaks we'd been ignoring for years. Within 3 months, our demo bookings were up 580%.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-av\" style=\"background:rgba(124,58,237,0.1);color:#A78BFA;\">SR<\/div>\r\n <div>\r\n <div class=\"testi-name\">Sarah Ramos<\/div>\r\n <div class=\"testi-role\">CMO, TalentLink Agency<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card fade-up fade-up-d2\">\r\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-quote\">\"I was skeptical about AI-driven marketing. AvPeri changed my mind completely. The ROI is undeniable and the automation saves us 20+ hours a week.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-av\" style=\"background:rgba(79,70,229,0.1);color:#818CF8;\">MP<\/div>\r\n <div>\r\n <div class=\"testi-name\">Marcus Patel<\/div>\r\n <div class=\"testi-role\">Founder, NovaCraft Studio<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FINAL CTA -->\r\n<section id=\"final-cta\">\r\n <div style=\"position:relative;z-index:1;\">\r\n <div class=\"section-label\" style=\"justify-content:center;\">Ready to Grow?<\/div>\r\n <h2 class=\"cta-headline\">Build Your Funnel<br><span style=\"background:linear-gradient(135deg,#00F5FF,#4F46E5,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;\">With AvPeri<\/span><\/h2>\r\n <p class=\"cta-sub\">Stop leaving revenue on the table. Let's engineer a conversion machine specifically built for your business, audience, and goals.<\/p>\r\n <div class=\"cta-buttons\">\r\n <button class=\"btn-primary btn-large\">Book Free Strategy Call<\/button>\r\n <button class=\"btn-secondary btn-large\">View Pricing \u2192<\/button>\r\n <\/div>\r\n <p style=\"margin-top:28px;font-size:13px;color:var(--text-muted);\">No commitment required \u00b7 30-minute session \u00b7 Custom funnel roadmap included<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n <div class=\"footer-logo\">AvPeri<\/div>\r\n <div class=\"footer-links\">\r\n <a href=\"#\">Services<\/a>\r\n <a href=\"#\">Case Studies<\/a>\r\n <a href=\"#\">About<\/a>\r\n <a href=\"#\">Blog<\/a>\r\n <a href=\"#\">Contact<\/a>\r\n <\/div>\r\n <div class=\"footer-copy\">\u00a9 2025 AvPeri. All rights reserved.<\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/\/ ===== CURSOR =====\r\nconst cursor = document.getElementById('cursor');\r\nconst cursorRing = document.getElementById('cursor-ring');\r\nlet mx = 0, my = 0, rx = 0, ry = 0;\r\ndocument.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });\r\nfunction animCursor() {\r\n rx += (mx - rx) * 0.15; ry += (my - ry) * 0.15;\r\n cursor.style.left = mx + 'px'; cursor.style.top = my + 'px';\r\n cursorRing.style.left = rx + 'px'; cursorRing.style.top = ry + 'px';\r\n requestAnimationFrame(animCursor);\r\n}\r\nanimCursor();\r\ndocument.querySelectorAll('button, a, [data-stage]').forEach(el => {\r\n el.addEventListener('mouseenter', () => {\r\n cursor.style.transform = 'translate(-50%,-50%) scale(2)';\r\n cursorRing.style.width = '56px'; cursorRing.style.height = '56px';\r\n cursorRing.style.borderColor = 'rgba(0,245,255,0.6)';\r\n });\r\n el.addEventListener('mouseleave', () => {\r\n cursor.style.transform = 'translate(-50%,-50%) scale(1)';\r\n cursorRing.style.width = '36px'; cursorRing.style.height = '36px';\r\n cursorRing.style.borderColor = 'rgba(0,245,255,0.4)';\r\n });\r\n});\r\n\r\n\/\/ ===== HERO CANVAS \u2013 PARTICLE FIELD =====\r\nconst hCanvas = document.getElementById('hero-canvas');\r\nconst hCtx = hCanvas.getContext('2d');\r\nlet hW, hH, hParticles = [];\r\nfunction resizeHero() {\r\n hW = hCanvas.width = hCanvas.offsetWidth;\r\n hH = hCanvas.height = hCanvas.offsetHeight;\r\n}\r\nresizeHero(); window.addEventListener('resize', resizeHero);\r\n\r\nclass HParticle {\r\n constructor() { this.reset(); }\r\n reset() {\r\n this.x = Math.random() * hW; this.y = Math.random() * hH;\r\n this.vx = (Math.random()-0.5)*0.3; this.vy = (Math.random()-0.5)*0.3;\r\n this.r = Math.random()*1.5+0.5;\r\n this.alpha = Math.random()*0.5+0.1;\r\n this.color = Math.random()>0.5 ? '0,245,255' : '79,70,229';\r\n }\r\n update() {\r\n this.x += this.vx; this.y += this.vy;\r\n if(this.x<0||this.x>hW||this.y<0||this.y>hH) this.reset();\r\n }\r\n draw() {\r\n hCtx.beginPath(); hCtx.arc(this.x,this.y,this.r,0,Math.PI*2);\r\n hCtx.fillStyle = `rgba(${this.color},${this.alpha})`; hCtx.fill();\r\n }\r\n}\r\n\r\nfor(let i=0;i<120;i++) hParticles.push(new HParticle());\r\n\r\n\/\/ Draw connecting lines between nearby particles\r\nfunction drawConnections() {\r\n for(let i=0;i<hParticles.length;i++){\r\n for(let j=i+1;j<hParticles.length;j++){\r\n const dx = hParticles[i].x-hParticles[j].x;\r\n const dy = hParticles[i].y-hParticles[j].y;\r\n const dist = Math.sqrt(dx*dx+dy*dy);\r\n if(dist<100){\r\n hCtx.beginPath();\r\n hCtx.moveTo(hParticles[i].x,hParticles[i].y);\r\n hCtx.lineTo(hParticles[j].x,hParticles[j].y);\r\n hCtx.strokeStyle = `rgba(79,70,229,${0.08*(1-dist\/100)})`;\r\n hCtx.lineWidth = 0.5; hCtx.stroke();\r\n }\r\n }\r\n }\r\n}\r\n\r\nlet hAnim = true;\r\nfunction animHero() {\r\n if(!hAnim) return;\r\n hCtx.clearRect(0,0,hW,hH);\r\n drawConnections();\r\n hParticles.forEach(p => { p.update(); p.draw(); });\r\n requestAnimationFrame(animHero);\r\n}\r\nanimHero();\r\n\r\n\/\/ Hero content entrance animation\r\nconst heroEl = document.getElementById('heroContent');\r\nheroEl.style.opacity = '0'; heroEl.style.transform = 'translateY(40px)';\r\nsetTimeout(() => {\r\n heroEl.style.transition = 'all 1.2s cubic-bezier(0.34,1.2,0.64,1)';\r\n heroEl.style.opacity = '1'; heroEl.style.transform = 'translateY(0)';\r\n}, 100);\r\n\r\n\/\/ ===== SCROLL ANIMATIONS =====\r\nfunction scrollToSection(id) {\r\n document.getElementById(id).scrollIntoView({behavior:'smooth'});\r\n}\r\n\r\nconst fadeEls = document.querySelectorAll('.fade-up');\r\nconst obs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('visible'); } });\r\n}, { threshold: 0.15 });\r\nfadeEls.forEach(el => obs.observe(el));\r\n\r\n\/\/ ===== COUNTER ANIMATIONS =====\r\nconst counterObs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if(e.isIntersecting) {\r\n const el = e.target;\r\n const target = parseInt(el.getAttribute('data-target'));\r\n const suffix = el.parentElement.querySelector('.stat-label').textContent.includes('%') ? '%' :\r\n el.parentElement.querySelector('.stat-label').textContent.includes('+') ? '+' : '';\r\n let current = 0;\r\n const step = target \/ 60;\r\n const timer = setInterval(() => {\r\n current = Math.min(current + step, target);\r\n el.textContent = Math.floor(current) + suffix;\r\n if(current >= target) { el.textContent = target + suffix; clearInterval(timer); }\r\n }, 25);\r\n counterObs.unobserve(el);\r\n }\r\n });\r\n}, { threshold: 0.5 });\r\ndocument.querySelectorAll('[data-target]').forEach(el => counterObs.observe(el));\r\n\r\n\/\/ ===== INTERACTIVE FUNNEL =====\r\nlet currentStage = 1;\r\nconst rings = [null, ...document.querySelectorAll('.funnel-ring')];\r\nconst leftCards = [null, ...document.querySelectorAll('#leftCards .stage-card')];\r\nconst rightCards = [null, ...document.querySelectorAll('#rightCards .stage-card')];\r\nconst navDots = document.querySelectorAll('.fnav-dot');\r\n\r\nfunction setStage(n) {\r\n currentStage = n;\r\n rings.forEach((r,i) => { if(r) r.classList.toggle('active', i<=n); });\r\n leftCards.forEach((c,i) => { if(c) c.classList.toggle('active', i===n); });\r\n rightCards.forEach((c,i) => { if(c) c.classList.toggle('active', i===n); });\r\n navDots.forEach((d,i) => d.classList.toggle('active', i===n-1));\r\n}\r\n\r\ndocument.querySelectorAll('.funnel-ring-wrap').forEach(wrap => {\r\n wrap.addEventListener('click', () => setStage(parseInt(wrap.getAttribute('data-stage'))));\r\n wrap.addEventListener('mouseenter', () => setStage(parseInt(wrap.getAttribute('data-stage'))));\r\n});\r\nnavDots.forEach(dot => {\r\n dot.addEventListener('click', () => setStage(parseInt(dot.getAttribute('data-stage'))));\r\n});\r\n\r\n\/\/ Auto-cycle funnel on scroll into view\r\nlet funnelCycleTimer = null;\r\nconst funnelObs = new IntersectionObserver(entries => {\r\n entries.forEach(e => {\r\n if(e.isIntersecting) {\r\n let s = 1;\r\n funnelCycleTimer = setInterval(() => {\r\n s = s >= 5 ? 1 : s + 1;\r\n setStage(s);\r\n }, 2000);\r\n } else {\r\n clearInterval(funnelCycleTimer);\r\n }\r\n });\r\n}, { threshold: 0.3 });\r\nconst funnelSection = document.getElementById('funnelVisual');\r\nif(funnelSection) funnelObs.observe(funnelSection);\r\nsetStage(1);\r\n\r\n\/\/ ===== ROI CALCULATOR =====\r\nfunction calcROI() {\r\n const visitors = parseFloat(document.getElementById('calcVisitors').value) || 0;\r\n const cvr = parseFloat(document.getElementById('calcCVR').value) || 0;\r\n const deal = parseFloat(document.getElementById('calcDeal').value) || 0;\r\n const mult = parseFloat(document.getElementById('calcIndustry').value) || 2.5;\r\n\r\n const currentClients = visitors * (cvr\/100);\r\n const currentRev = currentClients * deal;\r\n const newCVR = cvr * mult;\r\n const newClients = visitors * (newCVR\/100);\r\n const projected = newClients * deal;\r\n const gain = projected - currentRev;\r\n\r\n const fmt = n => '$' + Math.round(n).toLocaleString();\r\n animCount('calcCurrentRev', currentRev, fmt);\r\n animCount('calcProjected', projected, fmt);\r\n animCount('calcGain', gain, fmt);\r\n}\r\n\r\nfunction animCount(id, target, fmt) {\r\n const el = document.getElementById(id);\r\n let current = 0; const step = target\/40;\r\n const t = setInterval(() => {\r\n current = Math.min(current+step, target);\r\n el.textContent = fmt(current);\r\n if(current>=target) clearInterval(t);\r\n }, 30);\r\n}\r\n\r\ndocument.querySelectorAll('#calcVisitors,#calcCVR,#calcDeal,#calcIndustry').forEach(el => {\r\n el.addEventListener('input', calcROI);\r\n});\r\ncalcROI();\r\n\r\n\/\/ ===== NAVBAR SCROLL EFFECT =====\r\nwindow.addEventListener('scroll', () => {\r\n const nav = document.getElementById('navbar');\r\n nav.style.background = window.scrollY > 50 ? 'rgba(5,7,15,0.92)' : 'rgba(5,7,15,0.6)';\r\n});\r\n\r\n\/\/ ===== GLOBAL PARTICLES CANVAS (subtle) =====\r\nconst pCanvas = document.getElementById('particles-canvas');\r\nconst pCtx = pCanvas.getContext('2d');\r\nlet pW, pH;\r\nfunction resizeP() { pW = pCanvas.width = window.innerWidth; pH = pCanvas.height = window.innerHeight; }\r\nresizeP(); window.addEventListener('resize', resizeP);\r\nconst pDots = Array.from({length:60},()=>({\r\n x:Math.random()*window.innerWidth, y:Math.random()*window.innerHeight,\r\n vy: -0.15-Math.random()*0.15, vx:(Math.random()-0.5)*0.1,\r\n r:Math.random()*1+0.3, alpha:Math.random()*0.2+0.05\r\n}));\r\nfunction animP() {\r\n pCtx.clearRect(0,0,pW,pH);\r\n pDots.forEach(p => {\r\n p.y+=p.vy; p.x+=p.vx;\r\n if(p.y<0){p.y=pH; p.x=Math.random()*pW;}\r\n pCtx.beginPath(); pCtx.arc(p.x,p.y,p.r,0,Math.PI*2);\r\n pCtx.fillStyle=`rgba(79,70,229,${p.alpha})`; pCtx.fill();\r\n });\r\n requestAnimationFrame(animP);\r\n}\r\nanimP();\r\n\r\nconsole.log('\ud83d\ude80 AvPeri \u2014 AI Funnel Marketing Agency');\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Judy \u2014 AI-Powered Funnel Marketing Judy Funnel Services Results ROI Calculator Book a Call AI-Powered Growth Engine Turn Traffic Into Clients \u2014 With Smart Funnels AvPeri builds intelligent marketing funnels that transform strangers into high-ticket clients \u2014 using AI, precision targeting, and conversion science. Explore the Funnel Book Strategy Call \u2192 Scroll 0 % Average […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/judyaureada.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/judyaureada.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/judyaureada.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/judyaureada.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/judyaureada.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":7,"href":"https:\/\/judyaureada.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/judyaureada.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/judyaureada.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}