Anas \u00b7 Frontend Developer<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;700;900&family=Syne:wght@300;400;600;700&family=JetBrains+Mono:wght@300;400&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/*\r\nTheme Name: Anas Portfolio\r\nAuthor: Anas Rajput\r\nDescription: My HTML Portfolio converted to WordPress\r\nVersion: 1.0\r\n*\/\r\n\r\n :root {\r\n --c-bg: #04060f;\r\n --c-surface: #080d1c;\r\n --c-surface2: #0c1227;\r\n --c-border: rgba(0, 245, 255, 0.12);\r\n --c-text: #e8eef8;\r\n --c-muted: #6b7a99;\r\n --c-accent: #00f5ff;\r\n --c-accent2: #9b59ff;\r\n --c-accent3: #ff6b35;\r\n --c-glow: rgba(0, 245, 255, 0.25);\r\n --c-glow2: rgba(155, 89, 255, 0.2);\r\n --font-display: \"Orbitron\", monospace;\r\n --font-body: \"Syne\", sans-serif;\r\n --font-mono: \"JetBrains Mono\", monospace;\r\n --radius: 16px;\r\n --radius-sm: 8px;\r\n --shadow-glow:\r\n 0 0 40px rgba(0, 245, 255, 0.15), 0 0 80px rgba(0, 245, 255, 0.05);\r\n --shadow-card:\r\n 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);\r\n --transition: cubic-bezier(0.16, 1, 0.3, 1);\r\n --dur: 0.7s;\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --c-bg: #f0f4ff;\r\n --c-surface: #ffffff;\r\n --c-surface2: #e8eeff;\r\n --c-border: rgba(0, 100, 200, 0.15);\r\n --c-text: #0a0e1a;\r\n --c-muted: #5a6480;\r\n --c-accent: #0066ff;\r\n --c-accent2: #7b2fff;\r\n --c-accent3: #ff5500;\r\n --c-glow: rgba(0, 102, 255, 0.2);\r\n --c-glow2: rgba(123, 47, 255, 0.15);\r\n --shadow-glow:\r\n 0 0 40px rgba(0, 102, 255, 0.1), 0 0 80px rgba(0, 102, 255, 0.05);\r\n --shadow-card:\r\n 0 8px 32px rgba(0, 50, 180, 0.08),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n \/* ============================================================\r\n RESET & BASE\r\n============================================================ *\/\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: var(--font-body);\r\n background: var(--c-bg);\r\n color: var(--c-text);\r\n overflow-x: hidden;\r\n cursor: none;\r\n transition:\r\n background 0.5s var(--transition),\r\n color 0.5s var(--transition);\r\n }\r\n\r\n \/* Restore normal cursor on interactive elements so they work even when custom cursor fails *\/\r\n a,\r\n button,\r\n input,\r\n textarea,\r\n select,\r\n label,\r\n [role=\"button\"] {\r\n cursor: pointer;\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"email\"],\r\n textarea {\r\n cursor: text;\r\n }\r\n\r\n ::selection {\r\n background: var(--c-accent);\r\n color: #000;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n button {\r\n cursor: pointer;\r\n border: none;\r\n background: none;\r\n font-family: inherit;\r\n }\r\n\r\n img {\r\n display: block;\r\n max-width: 100%;\r\n }\r\n\r\n \/* ============================================================\r\n CUSTOM CURSOR\r\n============================================================ *\/\r\n #cursor-dot {\r\n position: fixed;\r\n width: 8px;\r\n height: 8px;\r\n background: var(--c-accent);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9999;\r\n transform: translate(-50%, -50%);\r\n transition:\r\n transform 0.1s,\r\n background 0.3s;\r\n box-shadow:\r\n 0 0 10px var(--c-accent),\r\n 0 0 20px var(--c-accent);\r\n }\r\n\r\n #cursor-ring {\r\n position: fixed;\r\n width: 36px;\r\n height: 36px;\r\n border: 1.5px solid var(--c-accent);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9998;\r\n transform: translate(-50%, -50%);\r\n transition:\r\n width 0.3s var(--transition),\r\n height 0.3s var(--transition),\r\n border-color 0.3s,\r\n opacity 0.3s;\r\n opacity: 0.6;\r\n }\r\n\r\n #cursor-ring.hovering {\r\n width: 60px;\r\n height: 60px;\r\n border-color: var(--c-accent2);\r\n opacity: 1;\r\n background: rgba(155, 89, 255, 0.08);\r\n }\r\n\r\n \/* ============================================================\r\n PRELOADER\r\n============================================================ *\/\r\n #preloader {\r\n position: fixed;\r\n inset: 0;\r\n background: #020408;\r\n z-index: 99999;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n transition:\r\n opacity 0.8s var(--transition),\r\n visibility 0.8s;\r\n }\r\n\r\n #preloader.done {\r\n opacity: 0;\r\n visibility: hidden;\r\n }\r\n\r\n .preloader-logo {\r\n font-family: var(--font-display);\r\n font-size: clamp(2rem, 6vw, 4rem);\r\n font-weight: 900;\r\n letter-spacing: 0.1em;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: preloaderPulse 1.5s ease-in-out infinite;\r\n }\r\n\r\n .preloader-bar-wrap {\r\n width: 200px;\r\n height: 2px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 2px;\r\n margin-top: 32px;\r\n overflow: hidden;\r\n }\r\n\r\n .preloader-bar {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));\r\n border-radius: 2px;\r\n animation: preloaderBar 1.8s var(--transition) forwards;\r\n }\r\n\r\n .preloader-text {\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.3em;\r\n color: var(--c-muted);\r\n margin-top: 16px;\r\n animation: fadeInUp 0.5s ease 0.3s both;\r\n }\r\n\r\n @keyframes preloaderPulse {\r\n 0%,\r\n 100% {\r\n filter: brightness(1);\r\n }\r\n\r\n 50% {\r\n filter: brightness(1.4);\r\n }\r\n }\r\n\r\n @keyframes preloaderBar {\r\n 0% {\r\n width: 0;\r\n }\r\n\r\n 100% {\r\n width: 100%;\r\n }\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(10px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n CANVAS BACKGROUND\r\n============================================================ *\/\r\n #bg-canvas {\r\n position: fixed;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n opacity: 0.6;\r\n transition: opacity 0.5s;\r\n }\r\n\r\n [data-theme=\"light\"] #bg-canvas {\r\n opacity: 0.25;\r\n }\r\n\r\n \/* ============================================================\r\n NAVIGATION\r\n============================================================ *\/\r\n nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 1000;\r\n padding: 20px 0;\r\n transition:\r\n background 0.4s,\r\n backdrop-filter 0.4s,\r\n padding 0.4s;\r\n }\r\n\r\n nav.scrolled {\r\n background: rgba(4, 6, 15, 0.7);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n padding: 14px 0;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n\r\n [data-theme=\"light\"] nav.scrolled {\r\n background: rgba(240, 244, 255, 0.8);\r\n }\r\n\r\n .nav-inner {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .nav-logo {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: 1.2rem;\r\n letter-spacing: 0.08em;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 36px;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n font-family: var(--font-mono);\r\n font-size: 0.8rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n transition: color 0.3s;\r\n position: relative;\r\n }\r\n\r\n .nav-links a::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n right: 100%;\r\n height: 1px;\r\n background: var(--c-accent);\r\n transition: right 0.3s var(--transition);\r\n }\r\n\r\n .nav-links a:hover {\r\n color: var(--c-text);\r\n }\r\n\r\n .nav-links a:hover::after {\r\n right: 0;\r\n }\r\n\r\n .nav-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n\r\n \/* Theme Toggle *\/\r\n .theme-toggle {\r\n position: relative;\r\n width: 52px;\r\n height: 28px;\r\n background: var(--c-surface2);\r\n border-radius: 14px;\r\n cursor: pointer;\r\n border: 1px solid var(--c-border);\r\n transition: all 0.3s;\r\n }\r\n\r\n .theme-toggle::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 3px;\r\n left: 3px;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n transition: transform 0.4s var(--transition);\r\n box-shadow: 0 0 10px var(--c-glow);\r\n }\r\n\r\n [data-theme=\"light\"] .theme-toggle::before {\r\n transform: translateX(24px);\r\n }\r\n\r\n .theme-icon-sun,\r\n .theme-icon-moon {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 10px;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .theme-icon-sun {\r\n right: 7px;\r\n opacity: 0;\r\n }\r\n\r\n .theme-icon-moon {\r\n left: 7px;\r\n opacity: 1;\r\n }\r\n\r\n [data-theme=\"light\"] .theme-icon-sun {\r\n opacity: 1;\r\n }\r\n\r\n [data-theme=\"light\"] .theme-icon-moon {\r\n opacity: 0;\r\n }\r\n\r\n .nav-cta {\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n padding: 10px 22px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n color: #000 !important;\r\n border-radius: 6px;\r\n font-weight: 700;\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n -webkit-text-fill-color: #000 !important;\r\n }\r\n\r\n .nav-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 30px var(--c-glow);\r\n }\r\n\r\n \/* Hamburger *\/\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n padding: 4px;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 24px;\r\n height: 2px;\r\n background: var(--c-text);\r\n border-radius: 2px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .hamburger.active span:nth-child(1) {\r\n transform: translateY(7px) rotate(45deg);\r\n }\r\n\r\n .hamburger.active span:nth-child(2) {\r\n opacity: 0;\r\n }\r\n\r\n .hamburger.active span:nth-child(3) {\r\n transform: translateY(-7px) rotate(-45deg);\r\n }\r\n\r\n \/* Mobile nav *\/\r\n .mobile-nav {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n top: 70px;\r\n background: rgba(4, 6, 15, 0.97);\r\n backdrop-filter: blur(20px);\r\n z-index: 999;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 32px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.4s;\r\n }\r\n\r\n .mobile-nav.open {\r\n opacity: 1;\r\n pointer-events: all;\r\n }\r\n\r\n .mobile-nav a {\r\n font-family: var(--font-display);\r\n font-size: 1.8rem;\r\n letter-spacing: 0.08em;\r\n color: var(--c-muted);\r\n transition:\r\n color 0.3s,\r\n transform 0.3s;\r\n }\r\n\r\n .mobile-nav a:hover {\r\n color: var(--c-accent);\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* ============================================================\r\n SECTIONS GENERAL\r\n============================================================ *\/\r\n section {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n }\r\n\r\n .section-label {\r\n font-family: var(--font-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.35em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .section-label::before {\r\n content: \"\";\r\n width: 32px;\r\n height: 1px;\r\n background: var(--c-accent);\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(2rem, 4vw, 3.2rem);\r\n font-weight: 900;\r\n letter-spacing: -0.02em;\r\n line-height: 1.1;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .gradient-text {\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-accent) 0%,\r\n var(--c-accent2) 50%,\r\n var(--c-accent3) 100%\r\n );\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 1.05rem;\r\n color: var(--c-muted);\r\n line-height: 1.7;\r\n max-width: 560px;\r\n }\r\n\r\n \/* Reveal animations *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition:\r\n opacity 0.8s var(--transition),\r\n transform 0.8s var(--transition);\r\n }\r\n\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n\r\n .reveal-delay-1 {\r\n transition-delay: 0.1s;\r\n }\r\n\r\n .reveal-delay-2 {\r\n transition-delay: 0.2s;\r\n }\r\n\r\n .reveal-delay-3 {\r\n transition-delay: 0.3s;\r\n }\r\n\r\n .reveal-delay-4 {\r\n transition-delay: 0.4s;\r\n }\r\n\r\n \/* ============================================================\r\n HERO SECTION\r\n============================================================ *\/\r\n \/* ============================================================\r\n HERO \u2014 HOLOGRAPHIC HUD + SPLIT LAYOUT (MERGED)\r\n============================================================ *\/\r\n #hero {\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n padding: 110px 0 90px;\r\n }\r\n\r\n \/* ---- Perspective Grid Floor ---- *\/\r\n .hero-grid-floor {\r\n position: absolute;\r\n bottom: 0;\r\n left: -20%;\r\n right: -20%;\r\n height: 55%;\r\n pointer-events: none;\r\n z-index: 0;\r\n perspective: 300px;\r\n }\r\n\r\n .hero-grid-floor-inner {\r\n width: 100%;\r\n height: 100%;\r\n background-image:\r\n linear-gradient(rgba(0, 245, 255, 0.1) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 245, 255, 0.1) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n transform: rotateX(65deg) translateY(0px);\r\n transform-origin: bottom center;\r\n mask-image: linear-gradient(to top, black 0%, transparent 80%);\r\n -webkit-mask-image: linear-gradient(to top, black 0%, transparent 80%);\r\n animation: gridPulse 4s ease-in-out infinite;\r\n }\r\n\r\n [data-theme=\"light\"] .hero-grid-floor-inner {\r\n background-image:\r\n linear-gradient(rgba(0, 100, 255, 0.08) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 100, 255, 0.08) 1px, transparent 1px);\r\n }\r\n\r\n @keyframes gridPulse {\r\n 0%,\r\n 100% {\r\n opacity: 0.6;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- Scanline sweep ---- *\/\r\n .hero-scanline {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 1;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-scanline::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(0, 245, 255, 0.45),\r\n rgba(0, 245, 255, 0.75),\r\n rgba(0, 245, 255, 0.45),\r\n transparent\r\n );\r\n animation: scanMove 7s linear infinite;\r\n box-shadow:\r\n 0 0 20px rgba(0, 245, 255, 0.35),\r\n 0 0 40px rgba(0, 245, 255, 0.12);\r\n }\r\n\r\n @keyframes scanMove {\r\n 0% {\r\n top: -2px;\r\n opacity: 0;\r\n }\r\n\r\n 5% {\r\n opacity: 1;\r\n }\r\n\r\n 95% {\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n top: 100%;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* ---- HUD Corner brackets ---- *\/\r\n .hero-hud-tl,\r\n .hero-hud-tr,\r\n .hero-hud-bl,\r\n .hero-hud-br {\r\n position: absolute;\r\n width: 50px;\r\n height: 50px;\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n .hero-hud-tl {\r\n top: 24px;\r\n left: 32px;\r\n border-top: 2px solid var(--c-accent);\r\n border-left: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-tr {\r\n top: 24px;\r\n right: 32px;\r\n border-top: 2px solid var(--c-accent);\r\n border-right: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-bl {\r\n bottom: 24px;\r\n left: 32px;\r\n border-bottom: 2px solid var(--c-accent);\r\n border-left: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-br {\r\n bottom: 24px;\r\n right: 32px;\r\n border-bottom: 2px solid var(--c-accent);\r\n border-right: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-tl::after,\r\n .hero-hud-tr::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 4px;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n box-shadow: 0 0 10px var(--c-accent);\r\n }\r\n\r\n .hero-hud-tl::after {\r\n right: -3px;\r\n }\r\n\r\n .hero-hud-tr::after {\r\n left: -3px;\r\n }\r\n\r\n .hero-hud-bl::before,\r\n .hero-hud-br::before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 4px;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent2);\r\n box-shadow: 0 0 10px var(--c-accent2);\r\n }\r\n\r\n .hero-hud-bl::before {\r\n right: -3px;\r\n }\r\n\r\n .hero-hud-br::before {\r\n left: -3px;\r\n }\r\n\r\n .hero-hud-label-tl {\r\n position: absolute;\r\n top: 30px;\r\n left: 94px;\r\n z-index: 2;\r\n font-family: var(--font-mono);\r\n font-size: 0.58rem;\r\n letter-spacing: 0.25em;\r\n color: var(--c-accent);\r\n opacity: 0.65;\r\n animation: hudBlink 3s ease-in-out infinite;\r\n }\r\n\r\n .hero-hud-label-tr {\r\n position: absolute;\r\n top: 30px;\r\n right: 94px;\r\n z-index: 2;\r\n font-family: var(--font-mono);\r\n font-size: 0.58rem;\r\n letter-spacing: 0.25em;\r\n color: var(--c-muted);\r\n opacity: 0.65;\r\n text-align: right;\r\n }\r\n\r\n @keyframes hudBlink {\r\n 0%,\r\n 100% {\r\n opacity: 0.65;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- Neon beams ---- *\/\r\n .hero-beam {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 0;\r\n height: 1px;\r\n animation: beamFade 5s ease-in-out infinite;\r\n }\r\n\r\n .hero-beam-1 {\r\n top: 28%;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent 0%,\r\n rgba(0, 245, 255, 0.12) 30%,\r\n rgba(0, 245, 255, 0.35) 50%,\r\n rgba(0, 245, 255, 0.12) 70%,\r\n transparent 100%\r\n );\r\n }\r\n\r\n .hero-beam-2 {\r\n top: 68%;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent 0%,\r\n rgba(155, 89, 255, 0.1) 30%,\r\n rgba(155, 89, 255, 0.28) 50%,\r\n rgba(155, 89, 255, 0.1) 70%,\r\n transparent 100%\r\n );\r\n animation-delay: 2.5s;\r\n }\r\n\r\n @keyframes beamFade {\r\n 0%,\r\n 100% {\r\n opacity: 0.3;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- TWO-COLUMN HERO LAYOUT ---- *\/\r\n .hero-inner {\r\n position: relative;\r\n z-index: 4;\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n \/* ---- LEFT: Content ---- *\/\r\n .hero-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n \/* Status badge *\/\r\n .hero-status {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 6px 18px;\r\n border: 1px solid rgba(0, 245, 255, 0.22);\r\n border-radius: 99px;\r\n background: rgba(0, 245, 255, 0.05);\r\n backdrop-filter: blur(10px);\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n margin-bottom: 28px;\r\n animation: fadeInDown 0.6s ease 0.3s both;\r\n }\r\n\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-14px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n\r\n .hero-status-dot {\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n animation: pulseDot 2s ease infinite;\r\n box-shadow: 0 0 0 0 var(--c-glow);\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%,\r\n 100% {\r\n box-shadow: 0 0 0 0 var(--c-glow);\r\n }\r\n\r\n 50% {\r\n box-shadow: 0 0 0 6px transparent;\r\n }\r\n }\r\n\r\n \/* Glitch Name \u2014 left-aligned, slightly smaller *\/\r\n .hero-glitch-wrap {\r\n position: relative;\r\n margin-bottom: 10px;\r\n animation: fadeInUp 0.7s ease 0.45s both;\r\n isolation: isolate;\r\n }\r\n\r\n .hero-glitch-name {\r\n font-family: var(--font-display);\r\n font-size: clamp(4rem, 9vw, 8rem);\r\n font-weight: 900;\r\n letter-spacing: -0.04em;\r\n line-height: 0.9;\r\n color: transparent;\r\n -webkit-text-stroke: 1.5px rgba(0, 245, 255, 0.5);\r\n position: relative;\r\n user-select: none;\r\n }\r\n\r\n .hero-glitch-name::before {\r\n content: \"ANAS\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-text) 0%,\r\n var(--c-accent) 45%,\r\n var(--c-accent2) 75%,\r\n var(--c-text) 100%\r\n );\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n background-size: 200% 200%;\r\n animation: nameShimmer 4s ease-in-out infinite;\r\n }\r\n\r\n .hero-glitch-name::after {\r\n content: \"ANAS\";\r\n position: absolute;\r\n inset: 0;\r\n color: var(--c-accent);\r\n clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);\r\n animation: glitchSlice 9s step-end infinite;\r\n opacity: 0.7;\r\n }\r\n\r\n @keyframes nameShimmer {\r\n 0% {\r\n background-position: 0% 50%;\r\n }\r\n\r\n 50% {\r\n background-position: 100% 50%;\r\n }\r\n\r\n 100% {\r\n background-position: 0% 50%;\r\n }\r\n }\r\n\r\n @keyframes glitchSlice {\r\n 0%,\r\n 85%,\r\n 100% {\r\n transform: none;\r\n opacity: 0;\r\n }\r\n\r\n 86% {\r\n transform: translateX(-4px);\r\n opacity: 0.8;\r\n clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);\r\n }\r\n\r\n 88% {\r\n transform: translateX(4px);\r\n opacity: 0.6;\r\n clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);\r\n }\r\n\r\n 90% {\r\n transform: translateX(-2px);\r\n opacity: 0.7;\r\n clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%);\r\n }\r\n\r\n 92% {\r\n transform: none;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n .hero-glitch-shadow {\r\n position: absolute;\r\n inset: 0;\r\n font-family: var(--font-display);\r\n font-size: clamp(4rem, 9vw, 8rem);\r\n font-weight: 900;\r\n letter-spacing: -0.04em;\r\n line-height: 0.9;\r\n color: var(--c-accent2);\r\n opacity: 0;\r\n pointer-events: none;\r\n animation: glitchShadow 9s step-end infinite;\r\n }\r\n\r\n @keyframes glitchShadow {\r\n 0%,\r\n 83%,\r\n 100% {\r\n opacity: 0;\r\n transform: none;\r\n }\r\n\r\n 84% {\r\n opacity: 0.35;\r\n transform: translateX(5px) skewX(-3deg);\r\n }\r\n\r\n 86% {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* Role typewriter *\/\r\n .hero-role-line {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 24px;\r\n animation: fadeInUp 0.7s ease 0.6s both;\r\n }\r\n\r\n .hero-role-sep {\r\n width: 32px;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, var(--c-accent));\r\n }\r\n\r\n .hero-role-sep-r {\r\n width: 32px;\r\n height: 1px;\r\n background: linear-gradient(90deg, var(--c-accent), transparent);\r\n }\r\n\r\n .hero-role-text {\r\n font-family: var(--font-mono);\r\n font-size: clamp(0.68rem, 1.4vw, 0.88rem);\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n }\r\n\r\n #hero-type-display {\r\n color: var(--c-accent);\r\n min-width: 180px;\r\n display: inline-block;\r\n }\r\n\r\n \/* Tagline *\/\r\n .hero-tag-line {\r\n font-size: clamp(0.88rem, 1.5vw, 1rem);\r\n color: var(--c-muted);\r\n line-height: 1.75;\r\n max-width: 480px;\r\n margin-bottom: 40px;\r\n animation: fadeInUp 0.7s ease 0.75s both;\r\n }\r\n\r\n .hero-tag-line strong {\r\n color: var(--c-text);\r\n font-weight: 600;\r\n }\r\n\r\n \/* CTA group *\/\r\n .hero-cta-group {\r\n display: flex;\r\n gap: 14px;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.7s ease 0.9s both;\r\n }\r\n\r\n \/* ---- RIGHT: Visual \/ Orb ---- *\/\r\n \/* --- 1. MAIN CONTAINER & ANIMATIONS --- *\/\r\n .hero-visual {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n animation: fadeInRight 0.8s ease 0.5s both;\r\n }\r\n\r\n @keyframes fadeInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(40px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n\r\n .hero-orb-container {\r\n position: relative;\r\n width: 440px;\r\n height: 440px;\r\n }\r\n\r\n \/* Ambient glow (Background layer) *\/\r\n .hero-orb {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(\r\n circle at 35% 35%,\r\n var(--c-accent2) 0%,\r\n transparent 55%\r\n ),\r\n radial-gradient(\r\n circle at 65% 65%,\r\n var(--c-accent) 0%,\r\n transparent 55%\r\n );\r\n opacity: 0.14;\r\n animation: orbPulse 6s ease-in-out infinite;\r\n filter: blur(44px);\r\n z-index: 0;\r\n }\r\n\r\n @keyframes orbPulse {\r\n 0%,\r\n 100% {\r\n transform: scale(1) rotate(0deg);\r\n opacity: 0.14;\r\n }\r\n\r\n 33% {\r\n transform: scale(1.12) rotate(120deg);\r\n opacity: 0.2;\r\n }\r\n\r\n 66% {\r\n transform: scale(0.94) rotate(240deg);\r\n opacity: 0.14;\r\n }\r\n }\r\n\r\n \/* --- 2. ORBITAL RINGS (Back Layers) --- *\/\r\n .hero-orb-ring,\r\n .hero-orb-ring-2,\r\n .hero-orb-ring-3 {\r\n position: absolute;\r\n border-radius: 50%;\r\n z-index: 1;\r\n \/* Image ke peeche rahein gi *\/\r\n }\r\n\r\n .hero-orb-ring {\r\n inset: 10px;\r\n border: 1px solid rgba(0, 245, 255, 0.18);\r\n animation: spinRing 22s linear infinite;\r\n }\r\n\r\n .hero-orb-ring::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -5px;\r\n left: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n transform: translateX(-50%);\r\n box-shadow:\r\n 0 0 16px var(--c-accent),\r\n 0 0 32px rgba(0, 245, 255, 0.5);\r\n }\r\n\r\n .hero-orb-ring-2 {\r\n inset: 36px;\r\n border: 1px solid rgba(155, 89, 255, 0.2);\r\n animation: spinRing 15s linear infinite reverse;\r\n }\r\n\r\n .hero-orb-ring-2::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -5px;\r\n left: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: var(--c-accent2);\r\n transform: translateX(-50%);\r\n box-shadow:\r\n 0 0 16px var(--c-accent2),\r\n 0 0 32px rgba(155, 89, 255, 0.5);\r\n }\r\n\r\n .hero-orb-ring-3 {\r\n inset: 56px;\r\n border: 1px dashed rgba(255, 107, 53, 0.2);\r\n animation: spinRing 10s linear infinite;\r\n }\r\n\r\n @keyframes spinRing {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* --- 3. CENTER CIRCLE FRAME (Middle Layer) --- *\/\r\n .hero-avatar-wrap {\r\n position: absolute;\r\n inset: 65px;\r\n \/* Yeh aapka center circle frame hai *\/\r\n border-radius: 50%;\r\n border: 1px solid rgba(0, 245, 255, 0.2);\r\n z-index: 2;\r\n \/* Rings ke upar *\/\r\n box-shadow: 0 0 40px rgba(0, 245, 255, 0.12);\r\n overflow: visible;\r\n \/* Head bahar nikalne ke liye visible hona zaroori hai *\/\r\n }\r\n\r\n \/* HUD Lines on Frame *\/\r\n .hero-avatar-wrap::before,\r\n .hero-avatar-wrap::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n opacity: 0.5;\r\n z-index: 3;\r\n }\r\n\r\n .hero-avatar-wrap::before {\r\n top: 0;\r\n height: 2px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent),\r\n transparent\r\n );\r\n }\r\n\r\n .hero-avatar-wrap::after {\r\n bottom: 0;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent2),\r\n transparent\r\n );\r\n }\r\n\r\n \/* --- 4. THE POP-OUT AVATAR (Top Layer) --- *\/\r\n .avatar-letter {\r\n position: absolute;\r\n \/* 65px inset means circle bottom is at 65px height *\/\r\n bottom: 65px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n\r\n \/* Circle ka size roughly 310px (440 - 65 - 65) *\/\r\n width: 310px;\r\n height: auto;\r\n z-index: 10;\r\n \/* Sab se upar taake head bahar pop-out ho *\/\r\n\r\n \/* Magic mask: Niche se circle ke mutabiq cut-out, upar se khula *\/\r\n clip-path: ellipse(100% 100% at 50% 100%);\r\n\r\n pointer-events: none;\r\n display: block;\r\n }\r\n\r\n \/* --- 5. TECH BADGES (Aapka Original) --- *\/\r\n .hero-tech-badges {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 20;\r\n }\r\n\r\n .tech-badge {\r\n position: absolute;\r\n padding: 6px 14px;\r\n background: rgba(8, 13, 28, 0.85);\r\n border: 1px solid var(--c-border);\r\n border-radius: 99px;\r\n font-family: var(--font-mono);\r\n font-size: 0.66rem;\r\n color: var(--c-muted);\r\n backdrop-filter: blur(12px);\r\n white-space: nowrap;\r\n animation: techFloat 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes techFloat {\r\n 0%,\r\n 100% {\r\n transform: translateY(0);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-8px);\r\n }\r\n }\r\n\r\n \/* Badge Positionings *\/\r\n .tech-badge:nth-child(1) {\r\n top: 2%;\r\n left: -8%;\r\n }\r\n\r\n .tech-badge:nth-child(2) {\r\n top: 12%;\r\n right: -12%;\r\n }\r\n\r\n .tech-badge:nth-child(3) {\r\n bottom: 18%;\r\n right: -10%;\r\n }\r\n\r\n .tech-badge:nth-child(4) {\r\n bottom: 2%;\r\n left: -4%;\r\n }\r\n\r\n .tech-badge:nth-child(5) {\r\n top: 48%;\r\n left: -18%;\r\n }\r\n\r\n \/* Scroll indicator *\/\r\n .hero-scroll {\r\n position: absolute;\r\n bottom: 32px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n animation: fadeInUp 1s ease 1.4s both;\r\n z-index: 4;\r\n }\r\n\r\n .hero-scroll span {\r\n font-family: var(--font-mono);\r\n font-size: 0.6rem;\r\n letter-spacing: 0.35em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n }\r\n\r\n .scroll-line {\r\n width: 1px;\r\n height: 48px;\r\n background: linear-gradient(180deg, var(--c-accent), transparent);\r\n animation: scrollLine 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes scrollLine {\r\n 0% {\r\n opacity: 1;\r\n transform: scaleY(1) translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: scaleY(1) translateY(20px);\r\n }\r\n }\r\n\r\n .typewriter-cursor {\r\n display: inline-block;\r\n width: 2px;\r\n height: 0.9em;\r\n background: var(--c-accent);\r\n vertical-align: middle;\r\n margin-left: 3px;\r\n animation: blink 1s step-end infinite;\r\n }\r\n\r\n @keyframes blink {\r\n 0%,\r\n 100% {\r\n opacity: 1;\r\n }\r\n\r\n 50% {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1024px) {\r\n .hero-inner {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n\r\n .hero-content {\r\n align-items: center;\r\n }\r\n\r\n .hero-tag-line {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .hero-orb-container {\r\n width: 340px;\r\n height: 340px;\r\n }\r\n\r\n .hero-avatar-wrap {\r\n \/* Inset ko thora kam kiya taake pic badi ho sake *\/\r\n inset: 50px;\r\n overflow: visible;\r\n }\r\n\r\n \/* Image sizing for Tablet *\/\r\n .avatar-letter {\r\n bottom: 50px;\r\n \/* Inset ke barabar *\/\r\n width: 250px;\r\n \/* Size barha diya gaya hai *\/\r\n clip-path: ellipse(110% 100% at 50% 100%);\r\n }\r\n\r\n .hero-hud-tl,\r\n .hero-hud-tr,\r\n .hero-hud-bl,\r\n .hero-hud-br,\r\n .hero-hud-label-tl,\r\n .hero-hud-label-tr {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .hero-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .hero-orb-container {\r\n width: 280px;\r\n \/* Container chota kiya *\/\r\n height: 280px;\r\n }\r\n\r\n .hero-avatar-wrap {\r\n \/* Mobile par inset kam rakha taake circle bada rahe *\/\r\n inset: 40px;\r\n overflow: visible;\r\n }\r\n\r\n \/* Image sizing for Mobile *\/\r\n .avatar-letter {\r\n bottom: 40px;\r\n \/* Inset ke barabar *\/\r\n width: 210px;\r\n \/* Mobile screen ke hisab se best size *\/\r\n clip-path: ellipse(120% 100% at 50% 100%);\r\n }\r\n\r\n .hero-orb-ring-3 {\r\n display: none;\r\n }\r\n\r\n .tech-badge:nth-child(5) {\r\n display: none;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n BUTTON SYSTEM \u2014 Primary, Outline, All States\r\n (used across Hero, Services, Projects, Contact, Nav)\r\n============================================================ *\/\r\n\r\n \/* ---- PRIMARY: gradient fill, black text ---- *\/\r\n .btn-primary {\r\n position: relative;\r\n overflow: hidden;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 14px 32px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n color: #000 !important;\r\n -webkit-text-fill-color: #000 !important;\r\n font-family: var(--font-mono);\r\n font-size: 0.8rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n border-radius: 8px;\r\n border: none;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-primary::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(255, 255, 255, 0.18),\r\n transparent\r\n );\r\n transform: translateX(-100%);\r\n transition: transform 0.4s var(--transition);\r\n }\r\n\r\n .btn-primary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow:\r\n 0 12px 40px var(--c-glow),\r\n 0 4px 16px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .btn-primary:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* ---- OUTLINE: transparent bg, accent border ---- *\/\r\n .btn-outline {\r\n position: relative;\r\n overflow: hidden;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 13px 32px;\r\n background: rgba(0, 0, 0, 0.25);\r\n color: var(--c-text);\r\n font-family: var(--font-mono);\r\n font-size: 0.8rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n border-radius: 8px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n text-decoration: none;\r\n cursor: pointer;\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition:\r\n border-color 0.3s,\r\n color 0.3s,\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s,\r\n background 0.3s;\r\n white-space: nowrap;\r\n }\r\n\r\n [data-theme=\"light\"] .btn-outline {\r\n background: rgba(255, 255, 255, 0.7);\r\n border-color: var(--c-border);\r\n color: var(--c-text);\r\n }\r\n\r\n .btn-outline::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .btn-outline:hover::before {\r\n opacity: 0.08;\r\n }\r\n\r\n .btn-outline:hover {\r\n border-color: var(--c-accent);\r\n color: var(--c-accent);\r\n transform: translateY(-3px);\r\n box-shadow:\r\n 0 12px 40px var(--c-glow),\r\n 0 4px 16px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .btn-outline:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* Keep text on top of the ::before overlay *\/\r\n .btn-outline > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-primary > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ---- Submit \/ Form button variant ---- *\/\r\n button.btn-primary[type=\"submit\"],\r\n button.btn-primary {\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-accent),\r\n var(--c-accent2)\r\n ) !important;\r\n color: #000 !important;\r\n -webkit-text-fill-color: #000 !important;\r\n border: none !important;\r\n }\r\n\r\n button.btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 40px var(--c-glow) !important;\r\n }\r\n\r\n \/* ---- Light mode overrides ---- *\/\r\n [data-theme=\"light\"] .btn-primary {\r\n color: #000 !important;\r\n -webkit-text-fill-color: #000 !important;\r\n }\r\n\r\n \/* ---- Global safety: prevent gradient text from bleeding into buttons ---- *\/\r\n .btn-primary,\r\n .btn-primary span,\r\n .btn-outline span,\r\n .nav-cta,\r\n button[type=\"submit\"] {\r\n -webkit-text-fill-color: initial;\r\n }\r\n\r\n .btn-primary,\r\n .btn-primary span,\r\n .nav-cta,\r\n button[type=\"submit\"] {\r\n -webkit-text-fill-color: #000 !important;\r\n color: #000 !important;\r\n }\r\n\r\n .btn-outline span {\r\n -webkit-text-fill-color: inherit;\r\n color: inherit;\r\n }\r\n\r\n \/* ============================================================\r\n STATS SECTION\r\n============================================================ *\/\r\n #stats {\r\n padding: 80px 0;\r\n border-top: 1px solid var(--c-border);\r\n border-bottom: 1px solid var(--c-border);\r\n background: var(--c-surface);\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 1px;\r\n background: var(--c-border);\r\n }\r\n\r\n .stat-item {\r\n padding: 48px 40px;\r\n background: var(--c-surface);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n transition: background 0.3s;\r\n }\r\n\r\n .stat-item:hover {\r\n background: var(--c-surface2);\r\n }\r\n\r\n .stat-item::before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));\r\n transition: width 0.4s var(--transition);\r\n }\r\n\r\n .stat-item:hover::before {\r\n width: 80%;\r\n }\r\n\r\n .stat-number {\r\n font-family: var(--font-display);\r\n font-size: clamp(2.5rem, 5vw, 3.5rem);\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: -0.02em;\r\n line-height: 1;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.85rem;\r\n color: var(--c-muted);\r\n margin-top: 10px;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .stat-plus {\r\n color: var(--c-accent3);\r\n }\r\n\r\n \/* ============================================================\r\n ABOUT SECTION\r\n============================================================ *\/\r\n #about {\r\n padding: 120px 0;\r\n }\r\n\r\n .about-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n\r\n .about-visual {\r\n position: relative;\r\n }\r\n\r\n .about-image-frame {\r\n position: relative;\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-surface),\r\n var(--c-surface2)\r\n );\r\n border: 1px solid var(--c-border);\r\n aspect-ratio: 4\/5;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .about-avatar-bg {\r\n width: 100%;\r\n height: 100%;\r\n background:\r\n radial-gradient(\r\n circle at 30% 30%,\r\n rgba(0, 245, 255, 0.08) 0%,\r\n transparent 50%\r\n ),\r\n radial-gradient(\r\n circle at 70% 70%,\r\n rgba(155, 89, 255, 0.08) 0%,\r\n transparent 50%\r\n );\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-size: 8rem;\r\n font-weight: 900;\r\n }\r\n\r\n .about-avatar-bg img {\r\n max-width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n margin-top: 90px;\r\n }\r\n\r\n .about-frame-deco {\r\n position: absolute;\r\n inset: -20px;\r\n border: 1px solid var(--c-border);\r\n border-radius: calc(var(--radius) + 20px);\r\n pointer-events: none;\r\n z-index: -1;\r\n }\r\n\r\n .about-badges {\r\n position: absolute;\r\n right: -30px;\r\n top: 40px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .about-badge {\r\n padding: 10px 16px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n backdrop-filter: blur(10px);\r\n font-size: 0.8rem;\r\n font-family: var(--font-mono);\r\n color: var(--c-muted);\r\n white-space: nowrap;\r\n box-shadow: var(--shadow-card);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .about-badge-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n }\r\n\r\n .about-text p {\r\n color: var(--c-muted);\r\n line-height: 1.8;\r\n font-size: 1.02rem;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .about-text p strong {\r\n color: var(--c-text);\r\n font-weight: 600;\r\n }\r\n\r\n .about-values {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n margin-top: 32px;\r\n }\r\n\r\n .about-value {\r\n padding: 16px 20px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n font-size: 0.85rem;\r\n font-family: var(--font-mono);\r\n color: var(--c-text);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n transition:\r\n border-color 0.3s,\r\n background 0.3s;\r\n }\r\n\r\n .about-value:hover {\r\n border-color: var(--c-accent);\r\n background: rgba(0, 245, 255, 0.04);\r\n }\r\n\r\n .about-value-icon {\r\n color: var(--c-accent);\r\n font-size: 1.1rem;\r\n }\r\n\r\n \/* ============================================================\r\n SKILLS SECTION\r\n============================================================ *\/\r\n #skills {\r\n padding: 120px 0;\r\n background: var(--c-surface);\r\n }\r\n\r\n .skills-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n margin-bottom: 64px;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n }\r\n\r\n .skills-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .skill-card {\r\n padding: 32px 28px;\r\n background: var(--c-bg);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius);\r\n transition:\r\n border-color 0.3s,\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .skill-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(0, 245, 255, 0.04),\r\n rgba(155, 89, 255, 0.04)\r\n );\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .skill-card:hover {\r\n border-color: var(--c-accent);\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-glow);\r\n }\r\n\r\n .skill-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .skill-card-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .skill-icon {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 10px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.3rem;\r\n }\r\n\r\n .skill-pct {\r\n font-family: var(--font-display);\r\n font-size: 1.6rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .skill-name {\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .skill-desc {\r\n font-size: 0.78rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n letter-spacing: 0.05em;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .skill-bar-wrap {\r\n height: 4px;\r\n background: var(--c-surface);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .skill-bar {\r\n height: 100%;\r\n border-radius: 2px;\r\n background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));\r\n width: 0%;\r\n transition: width 1.5s var(--transition);\r\n position: relative;\r\n }\r\n\r\n .skill-bar::after {\r\n content: \"\";\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n box-shadow: 0 0 10px var(--c-accent);\r\n }\r\n\r\n \/* ============================================================\r\n PROJECTS SECTION\r\n============================================================ *\/\r\n #projects {\r\n padding: 120px 0;\r\n }\r\n\r\n .filter-bar {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .filter-btn {\r\n padding: 8px 20px;\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n border-radius: 6px;\r\n border: 1px solid var(--c-border);\r\n background: var(--c-surface);\r\n color: var(--c-muted);\r\n transition: all 0.3s;\r\n }\r\n\r\n .filter-btn:hover,\r\n .filter-btn.active {\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n border-color: transparent;\r\n color: #000;\r\n font-weight: 700;\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .project-card {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n transition:\r\n transform 0.4s var(--transition),\r\n box-shadow 0.4s,\r\n opacity 0.4s;\r\n cursor: default;\r\n }\r\n\r\n .project-card.hidden {\r\n opacity: 0;\r\n transform: scale(0.95);\r\n pointer-events: none;\r\n display: none;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow:\r\n 0 24px 60px rgba(0, 0, 0, 0.5),\r\n 0 0 0 1px var(--c-border);\r\n }\r\n\r\n .project-thumb {\r\n aspect-ratio: 16\/10;\r\n background: linear-gradient(135deg, var(--c-surface2), var(--c-bg));\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n }\r\n\r\n \/* Website screenshot inside thumb \u2014 scrolls top\u2192bottom on hover *\/\r\n .project-thumb-img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 220%;\r\n \/* taller than thumb so it can scroll *\/\r\n object-fit: cover;\r\n object-position: top center;\r\n top: 0;\r\n transform: translateY(0);\r\n transition: transform 4s ease;\r\n pointer-events: none;\r\n display: block;\r\n }\r\n\r\n .project-card:hover .project-thumb-img {\r\n transform: translateY(-54.5%);\r\n \/* scroll to bottom *\/\r\n }\r\n\r\n \/* Fallback emoji shown when no image *\/\r\n .project-thumb-emoji {\r\n position: relative;\r\n z-index: 1;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .project-thumb:has(.project-thumb-img) .project-thumb-emoji {\r\n display: none;\r\n }\r\n\r\n .project-thumb-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(4, 6, 15, 0.75);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n gap: 12px;\r\n z-index: 2;\r\n backdrop-filter: blur(2px);\r\n }\r\n\r\n .project-card:hover .project-thumb-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .project-body {\r\n padding: 24px;\r\n }\r\n\r\n .project-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 6px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .project-tag {\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n padding: 3px 10px;\r\n background: rgba(0, 245, 255, 0.08);\r\n border: 1px solid rgba(0, 245, 255, 0.15);\r\n border-radius: 99px;\r\n color: var(--c-accent);\r\n }\r\n\r\n .project-tag.purple {\r\n background: rgba(155, 89, 255, 0.08);\r\n border-color: rgba(155, 89, 255, 0.15);\r\n color: var(--c-accent2);\r\n }\r\n\r\n .project-tag.orange {\r\n background: rgba(255, 107, 53, 0.08);\r\n border-color: rgba(255, 107, 53, 0.15);\r\n color: var(--c-accent3);\r\n }\r\n\r\n .project-title {\r\n font-family: var(--font-display);\r\n font-size: 1rem;\r\n font-weight: 700;\r\n letter-spacing: 0.02em;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .project-desc {\r\n font-size: 0.85rem;\r\n color: var(--c-muted);\r\n line-height: 1.65;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .project-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .project-link {\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.1em;\r\n color: var(--c-accent);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n text-transform: uppercase;\r\n transition: gap 0.2s;\r\n }\r\n\r\n .project-link:hover {\r\n gap: 10px;\r\n }\r\n\r\n .project-metrics {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n color: var(--c-muted);\r\n }\r\n\r\n \/* ============================================================\r\n CASE STUDY MODAL\r\n============================================================ *\/\r\n .modal-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n backdrop-filter: blur(10px);\r\n z-index: 9000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 40px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.4s;\r\n }\r\n\r\n .modal-overlay.open {\r\n opacity: 1;\r\n pointer-events: all;\r\n }\r\n\r\n .modal {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: calc(var(--radius) * 1.5);\r\n max-width: 700px;\r\n width: 100%;\r\n max-height: 80vh;\r\n overflow-y: auto;\r\n padding: 48px;\r\n transform: scale(0.9) translateY(30px);\r\n transition: transform 0.4s var(--transition);\r\n position: relative;\r\n }\r\n\r\n .modal-overlay.open .modal {\r\n transform: none;\r\n }\r\n\r\n .modal-close {\r\n position: absolute;\r\n top: 24px;\r\n right: 24px;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.1rem;\r\n color: var(--c-muted);\r\n transition:\r\n color 0.2s,\r\n background 0.2s;\r\n }\r\n\r\n .modal-close:hover {\r\n color: var(--c-text);\r\n background: var(--c-border);\r\n }\r\n\r\n .modal-label {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n margin-bottom: 16px;\r\n }\r\n\r\n .modal-title {\r\n font-family: var(--font-display);\r\n font-size: 1.8rem;\r\n font-weight: 900;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .modal-meta {\r\n display: flex;\r\n gap: 24px;\r\n flex-wrap: wrap;\r\n margin-bottom: 32px;\r\n padding-bottom: 32px;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n\r\n .modal-meta-item {\r\n font-size: 0.85rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n }\r\n\r\n .modal-meta-item strong {\r\n color: var(--c-text);\r\n display: block;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .modal-body p {\r\n color: var(--c-muted);\r\n line-height: 1.8;\r\n margin-bottom: 20px;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .modal-results {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 16px;\r\n margin-top: 32px;\r\n }\r\n\r\n .modal-result {\r\n padding: 16px;\r\n background: var(--c-surface2);\r\n border-radius: var(--radius-sm);\r\n text-align: center;\r\n }\r\n\r\n .modal-result-number {\r\n font-family: var(--font-display);\r\n font-size: 1.5rem;\r\n font-weight: 900;\r\n color: var(--c-accent);\r\n }\r\n\r\n .modal-result-label {\r\n font-size: 0.75rem;\r\n color: var(--c-muted);\r\n margin-top: 4px;\r\n }\r\n\r\n \/* View All Projects button *\/\r\n .btn-view-all {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 16px 44px;\r\n background: transparent;\r\n border: 1px solid var(--c-accent);\r\n color: var(--c-accent);\r\n font-family: var(--font-mono);\r\n font-size: 0.82rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n border-radius: 10px;\r\n position: relative;\r\n overflow: hidden;\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s,\r\n color 0.3s;\r\n }\r\n\r\n .btn-view-all::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .btn-view-all:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .btn-view-all:hover {\r\n color: #000;\r\n transform: translateY(-3px);\r\n box-shadow:\r\n 0 0 30px var(--c-glow),\r\n 0 12px 40px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .btn-view-all > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-view-all svg {\r\n transition: transform 0.3s var(--transition);\r\n }\r\n\r\n .btn-view-all:hover svg {\r\n transform: translateX(5px);\r\n }\r\n\r\n \/* ============================================================\r\n TESTIMONIALS \u2014 INFINITE MARQUEE\r\n============================================================ *\/\r\n #testimonials {\r\n padding: 120px 0 100px;\r\n background: var(--c-surface);\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n #testimonials::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent),\r\n var(--c-accent2),\r\n transparent\r\n );\r\n }\r\n\r\n #testimonials::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent2),\r\n var(--c-accent),\r\n transparent\r\n );\r\n }\r\n\r\n \/* ---- SPOTLIGHT (Featured Quote) ---- *\/\r\n .testi-spotlight {\r\n max-width: 860px;\r\n margin: 0 auto 80px;\r\n text-align: center;\r\n position: relative;\r\n padding: 0 40px;\r\n }\r\n\r\n .testi-spotlight-quote-mark {\r\n font-family: var(--font-display);\r\n font-size: 8rem;\r\n line-height: 0.7;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n opacity: 0.18;\r\n display: block;\r\n margin-bottom: -24px;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n .testi-spotlight-text {\r\n font-family: var(--font-display);\r\n font-size: clamp(1.15rem, 2.2vw, 1.55rem);\r\n font-weight: 700;\r\n line-height: 1.55;\r\n letter-spacing: -0.01em;\r\n color: var(--c-text);\r\n margin-bottom: 28px;\r\n position: relative;\r\n }\r\n\r\n .testi-spotlight-text em {\r\n font-style: normal;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .testi-spotlight-author {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 12px 24px 12px 12px;\r\n background: var(--c-bg);\r\n border: 1px solid var(--c-border);\r\n border-radius: 99px;\r\n }\r\n\r\n .testi-spotlight-avatar {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 900;\r\n font-size: 1rem;\r\n color: #000;\r\n flex-shrink: 0;\r\n box-shadow: 0 0 16px var(--c-glow);\r\n }\r\n\r\n .testi-spotlight-name {\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .testi-spotlight-role {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n letter-spacing: 0.12em;\r\n color: var(--c-muted);\r\n }\r\n\r\n .testi-spotlight-stars {\r\n font-size: 0.75rem;\r\n letter-spacing: 3px;\r\n color: #ffd700;\r\n filter: drop-shadow(0 0 6px #ffd70066);\r\n }\r\n\r\n \/* ---- MARQUEE ROWS ---- *\/\r\n .testi-marquee-wrap {\r\n position: relative;\r\n margin: 0 -20px;\r\n }\r\n\r\n \/* fade edges *\/\r\n .testi-marquee-wrap::before,\r\n .testi-marquee-wrap::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 180px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n\r\n .testi-marquee-wrap::before {\r\n left: 0;\r\n background: linear-gradient(90deg, var(--c-surface), transparent);\r\n }\r\n\r\n .testi-marquee-wrap::after {\r\n right: 0;\r\n background: linear-gradient(-90deg, var(--c-surface), transparent);\r\n }\r\n\r\n .testi-row {\r\n display: flex;\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n overflow: hidden;\r\n }\r\n\r\n .testi-row:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n .testi-track {\r\n display: flex;\r\n gap: 20px;\r\n flex-shrink: 0;\r\n animation: marqueeLeft 35s linear infinite;\r\n }\r\n\r\n .testi-track-reverse {\r\n display: flex;\r\n gap: 20px;\r\n flex-shrink: 0;\r\n animation: marqueeRight 40s linear infinite;\r\n }\r\n\r\n .testi-row:hover .testi-track,\r\n .testi-row:hover .testi-track-reverse {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes marqueeLeft {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(-50%);\r\n }\r\n }\r\n\r\n @keyframes marqueeRight {\r\n 0% {\r\n transform: translateX(-50%);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n \/* ---- MARQUEE CARDS ---- *\/\r\n .testi-card {\r\n flex-shrink: 0;\r\n width: 360px;\r\n padding: 28px 28px 24px;\r\n background: var(--c-bg);\r\n border-radius: var(--radius);\r\n border: 1px solid var(--c-border);\r\n position: relative;\r\n overflow: hidden;\r\n cursor: default;\r\n transition:\r\n border-color 0.3s,\r\n box-shadow 0.3s,\r\n transform 0.3s var(--transition);\r\n }\r\n\r\n .testi-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n border-radius: var(--radius);\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(0, 245, 255, 0.04),\r\n rgba(155, 89, 255, 0.04)\r\n );\r\n }\r\n\r\n .testi-card:hover {\r\n border-color: var(--c-accent);\r\n box-shadow:\r\n 0 0 30px var(--c-glow),\r\n 0 8px 40px rgba(0, 0, 0, 0.4);\r\n transform: translateY(-4px) scale(1.01);\r\n z-index: 3;\r\n }\r\n\r\n .testi-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n \/* gradient border top accent *\/\r\n .testi-card-accent {\r\n position: absolute;\r\n top: 0;\r\n left: 20px;\r\n right: 20px;\r\n height: 2px;\r\n border-radius: 0 0 2px 2px;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .testi-card:hover .testi-card-accent {\r\n opacity: 1;\r\n }\r\n\r\n .accent-cyan {\r\n background: linear-gradient(90deg, var(--c-accent), transparent);\r\n }\r\n\r\n .accent-purple {\r\n background: linear-gradient(90deg, var(--c-accent2), transparent);\r\n }\r\n\r\n .accent-orange {\r\n background: linear-gradient(90deg, var(--c-accent3), transparent);\r\n }\r\n\r\n .testi-card-top {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .testi-card-stars {\r\n font-size: 0.72rem;\r\n letter-spacing: 3px;\r\n color: #ffd700;\r\n filter: drop-shadow(0 0 4px #ffd70055);\r\n }\r\n\r\n .testi-card-platform {\r\n font-family: var(--font-mono);\r\n font-size: 0.62rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n padding: 3px 10px;\r\n border-radius: 99px;\r\n border: 1px solid var(--c-border);\r\n color: var(--c-muted);\r\n }\r\n\r\n .testi-card-text {\r\n font-size: 0.88rem;\r\n line-height: 1.75;\r\n color: var(--c-muted);\r\n margin-bottom: 22px;\r\n position: relative;\r\n }\r\n\r\n .testi-card-text strong {\r\n color: var(--c-text);\r\n font-weight: 600;\r\n }\r\n\r\n .testi-card-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding-top: 18px;\r\n border-top: 1px solid var(--c-border);\r\n }\r\n\r\n .testi-card-avatar {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 800;\r\n font-size: 0.9rem;\r\n color: #000;\r\n flex-shrink: 0;\r\n }\r\n\r\n .av-cyan {\r\n background: linear-gradient(135deg, #00f5ff, #0066ff);\r\n box-shadow: 0 0 12px rgba(0, 245, 255, 0.4);\r\n }\r\n\r\n .av-purple {\r\n background: linear-gradient(135deg, #9b59ff, #ff6bff);\r\n box-shadow: 0 0 12px rgba(155, 89, 255, 0.4);\r\n }\r\n\r\n .av-orange {\r\n background: linear-gradient(135deg, #ff6b35, #ffd700);\r\n box-shadow: 0 0 12px rgba(255, 107, 53, 0.4);\r\n }\r\n\r\n .av-green {\r\n background: linear-gradient(135deg, #00ff9b, #00c2ff);\r\n box-shadow: 0 0 12px rgba(0, 255, 155, 0.35);\r\n }\r\n\r\n .av-pink {\r\n background: linear-gradient(135deg, #ff6b9d, #ff9b6b);\r\n box-shadow: 0 0 12px rgba(255, 107, 157, 0.4);\r\n }\r\n\r\n .testi-card-name {\r\n font-weight: 700;\r\n font-size: 0.88rem;\r\n line-height: 1.2;\r\n }\r\n\r\n .testi-card-role {\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n color: var(--c-muted);\r\n letter-spacing: 0.08em;\r\n margin-top: 2px;\r\n }\r\n\r\n \/* ---- TRUST BAR ---- *\/\r\n .testi-trust-bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 48px;\r\n margin-top: 64px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .testi-trust-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n\r\n .testi-trust-num {\r\n font-family: var(--font-display);\r\n font-size: 1.6rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n line-height: 1;\r\n }\r\n\r\n .testi-trust-label {\r\n font-size: 0.75rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n letter-spacing: 0.1em;\r\n }\r\n\r\n .testi-trust-sep {\r\n width: 1px;\r\n height: 40px;\r\n background: var(--c-border);\r\n }\r\n\r\n \/* slider-btn kept for compat but hidden now *\/\r\n .slider-btn {\r\n display: none;\r\n }\r\n\r\n .slider-dots {\r\n display: none;\r\n }\r\n\r\n .slider-controls {\r\n display: none;\r\n }\r\n\r\n \/* ============================================================\r\n SERVICES SECTION\r\n============================================================ *\/\r\n #services {\r\n padding: 120px 0;\r\n background: var(--c-bg);\r\n }\r\n\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n margin-top: 64px;\r\n }\r\n\r\n .service-card {\r\n position: relative;\r\n padding: 40px 32px 36px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n transition:\r\n transform 0.4s var(--transition),\r\n box-shadow 0.4s,\r\n border-color 0.4s;\r\n cursor: default;\r\n group: true;\r\n }\r\n\r\n .service-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(0, 245, 255, 0.05) 0%,\r\n rgba(155, 89, 255, 0.05) 100%\r\n );\r\n opacity: 0;\r\n transition: opacity 0.4s;\r\n border-radius: 20px;\r\n }\r\n\r\n .service-card:hover {\r\n transform: translateY(-8px);\r\n border-color: var(--c-accent);\r\n box-shadow:\r\n var(--shadow-glow),\r\n 0 24px 60px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .service-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n \/* Glow corner accent *\/\r\n .service-card-glow {\r\n position: absolute;\r\n top: -60px;\r\n right: -60px;\r\n width: 160px;\r\n height: 160px;\r\n border-radius: 50%;\r\n opacity: 0;\r\n transition: opacity 0.4s;\r\n pointer-events: none;\r\n }\r\n\r\n .service-card:hover .service-card-glow {\r\n opacity: 1;\r\n }\r\n\r\n .sg-cyan {\r\n background: radial-gradient(\r\n circle,\r\n rgba(0, 245, 255, 0.12),\r\n transparent 70%\r\n );\r\n }\r\n\r\n .sg-purple {\r\n background: radial-gradient(\r\n circle,\r\n rgba(155, 89, 255, 0.12),\r\n transparent 70%\r\n );\r\n }\r\n\r\n .sg-orange {\r\n background: radial-gradient(\r\n circle,\r\n rgba(255, 107, 53, 0.12),\r\n transparent 70%\r\n );\r\n }\r\n\r\n \/* Number label *\/\r\n .service-num {\r\n font-family: var(--font-display);\r\n font-size: 0.65rem;\r\n letter-spacing: 0.3em;\r\n color: var(--c-border);\r\n margin-bottom: 28px;\r\n transition: color 0.3s;\r\n }\r\n\r\n .service-card:hover .service-num {\r\n color: var(--c-accent);\r\n }\r\n\r\n \/* Icon *\/\r\n .service-icon-wrap {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 16px;\r\n border: 1px solid var(--c-border);\r\n background: var(--c-bg);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.8rem;\r\n margin-bottom: 28px;\r\n position: relative;\r\n transition:\r\n border-color 0.3s,\r\n background 0.3s,\r\n transform 0.4s var(--transition);\r\n }\r\n\r\n .service-card:hover .service-icon-wrap {\r\n border-color: var(--c-accent);\r\n background: rgba(0, 245, 255, 0.06);\r\n transform: scale(1.08) rotate(-3deg);\r\n }\r\n\r\n .service-title {\r\n font-family: var(--font-display);\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n letter-spacing: 0.01em;\r\n margin-bottom: 14px;\r\n transition: color 0.3s;\r\n }\r\n\r\n .service-card:hover .service-title {\r\n color: var(--c-accent);\r\n }\r\n\r\n .service-desc {\r\n font-size: 0.88rem;\r\n line-height: 1.75;\r\n color: var(--c-muted);\r\n margin-bottom: 28px;\r\n }\r\n\r\n .service-features {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-bottom: 32px;\r\n padding-top: 20px;\r\n border-top: 1px solid var(--c-border);\r\n }\r\n\r\n .service-feature {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-family: var(--font-mono);\r\n font-size: 0.73rem;\r\n letter-spacing: 0.05em;\r\n color: var(--c-muted);\r\n transition: color 0.3s;\r\n }\r\n\r\n .service-card:hover .service-feature {\r\n color: var(--c-text);\r\n }\r\n\r\n .service-feature-dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n flex-shrink: 0;\r\n box-shadow: 0 0 8px var(--c-glow);\r\n opacity: 0.5;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .service-card:hover .service-feature-dot {\r\n opacity: 1;\r\n }\r\n\r\n .service-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n transition:\r\n color 0.3s,\r\n gap 0.3s;\r\n }\r\n\r\n .service-card:hover .service-cta {\r\n color: var(--c-accent);\r\n gap: 12px;\r\n }\r\n\r\n \/* Popular badge *\/\r\n .service-badge {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n padding: 4px 12px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n border-radius: 99px;\r\n font-family: var(--font-mono);\r\n font-size: 0.6rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n color: #000;\r\n }\r\n\r\n \/* Process strip *\/\r\n .services-process {\r\n margin-top: 80px;\r\n padding: 48px 40px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: 24px;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .services-process::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 10%;\r\n right: 10%;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n var(--c-accent),\r\n var(--c-accent2),\r\n var(--c-accent3),\r\n var(--c-accent)\r\n );\r\n opacity: 0.2;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n }\r\n\r\n .process-step {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 16px;\r\n padding: 0 16px;\r\n position: relative;\r\n }\r\n\r\n .process-step:not(:last-child)::after {\r\n content: \"\u2192\";\r\n position: absolute;\r\n right: -10px;\r\n top: 24px;\r\n color: var(--c-accent);\r\n font-size: 1rem;\r\n opacity: 0.4;\r\n }\r\n\r\n .process-num {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: var(--c-bg);\r\n border: 2px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-size: 0.8rem;\r\n font-weight: 900;\r\n color: var(--c-accent);\r\n position: relative;\r\n z-index: 1;\r\n transition:\r\n border-color 0.3s,\r\n background 0.3s,\r\n transform 0.3s;\r\n }\r\n\r\n .process-step:hover .process-num {\r\n border-color: var(--c-accent);\r\n background: rgba(0, 245, 255, 0.08);\r\n transform: scale(1.12);\r\n }\r\n\r\n .process-label {\r\n font-family: var(--font-display);\r\n font-size: 0.78rem;\r\n font-weight: 700;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .process-desc {\r\n font-size: 0.78rem;\r\n color: var(--c-muted);\r\n line-height: 1.6;\r\n font-family: var(--font-mono);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .services-process {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 32px;\r\n }\r\n\r\n .services-process::before {\r\n display: none;\r\n }\r\n\r\n .process-step::after {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .services-process {\r\n grid-template-columns: 1fr;\r\n padding: 32px 24px;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n CONTACT SECTION\r\n============================================================ *\/\r\n #contact {\r\n padding: 120px 0;\r\n }\r\n\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: start;\r\n }\r\n\r\n .contact-info-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(1.6rem, 3vw, 2.4rem);\r\n font-weight: 900;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .contact-info-sub {\r\n color: var(--c-muted);\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .contact-details {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .contact-detail {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 16px 20px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n font-size: 0.9rem;\r\n transition: border-color 0.3s;\r\n }\r\n\r\n .contact-detail:hover {\r\n border-color: var(--c-accent);\r\n }\r\n\r\n .contact-detail-icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .contact-detail-label {\r\n font-size: 0.72rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n letter-spacing: 0.1em;\r\n }\r\n\r\n .contact-detail-value {\r\n font-weight: 600;\r\n }\r\n\r\n \/* Form *\/\r\n .contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .form-group {\r\n position: relative;\r\n }\r\n\r\n .form-input {\r\n width: 100%;\r\n padding: 16px 20px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n color: var(--c-text);\r\n font-family: var(--font-body);\r\n font-size: 0.95rem;\r\n transition:\r\n border-color 0.3s,\r\n box-shadow 0.3s;\r\n outline: none;\r\n resize: vertical;\r\n }\r\n\r\n .form-input:focus {\r\n border-color: var(--c-accent);\r\n box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.08);\r\n }\r\n\r\n .form-input::placeholder {\r\n color: var(--c-muted);\r\n }\r\n\r\n .form-label {\r\n position: absolute;\r\n top: -10px;\r\n left: 12px;\r\n padding: 0 6px;\r\n background: var(--c-bg);\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n }\r\n\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .form-error {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n color: #ff4444;\r\n margin-top: 4px;\r\n display: none;\r\n }\r\n\r\n .form-error.show {\r\n display: block;\r\n }\r\n\r\n .form-success {\r\n padding: 20px 24px;\r\n background: rgba(0, 245, 255, 0.08);\r\n border: 1px solid rgba(0, 245, 255, 0.2);\r\n border-radius: var(--radius-sm);\r\n font-family: var(--font-mono);\r\n font-size: 0.85rem;\r\n color: var(--c-accent);\r\n display: none;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .form-success.show {\r\n display: flex;\r\n }\r\n\r\n \/* ============================================================\r\n FOOTER\r\n============================================================ *\/\r\n footer {\r\n padding: 60px 0 40px;\r\n border-top: 1px solid var(--c-border);\r\n background: var(--c-surface);\r\n }\r\n\r\n .footer-inner {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 24px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .footer-logo {\r\n font-family: var(--font-display);\r\n font-size: 1.4rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .footer-links {\r\n display: flex;\r\n gap: 24px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .footer-links a {\r\n font-family: var(--font-mono);\r\n font-size: 0.78rem;\r\n letter-spacing: 0.1em;\r\n color: var(--c-muted);\r\n transition: color 0.3s;\r\n }\r\n\r\n .footer-links a:hover {\r\n color: var(--c-accent);\r\n }\r\n\r\n .footer-socials {\r\n display: flex;\r\n gap: 12px;\r\n }\r\n\r\n .social-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 8px;\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n color: var(--c-muted);\r\n transition: all 0.3s;\r\n }\r\n\r\n .social-btn:hover {\r\n background: var(--c-accent);\r\n color: #000;\r\n border-color: var(--c-accent);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .footer-bottom {\r\n border-top: 1px solid var(--c-border);\r\n padding-top: 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n }\r\n\r\n .footer-copy {\r\n font-size: 0.8rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n }\r\n\r\n .footer-made {\r\n font-size: 0.78rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n }\r\n\r\n .footer-made span {\r\n color: var(--c-accent);\r\n }\r\n\r\n \/* ============================================================\r\n SCROLL PROGRESS\r\n============================================================ *\/\r\n #scroll-progress {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 2px;\r\n background: linear-gradient(\r\n 90deg,\r\n var(--c-accent),\r\n var(--c-accent2),\r\n var(--c-accent3)\r\n );\r\n z-index: 9999;\r\n transition: width 0.1s;\r\n box-shadow: 0 0 8px var(--c-glow);\r\n }\r\n\r\n \/* ============================================================\r\n GLASS CARD UTILITY\r\n============================================================ *\/\r\n .glass {\r\n background: rgba(8, 13, 28, 0.6);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--c-border);\r\n }\r\n\r\n [data-theme=\"light\"] .glass {\r\n background: rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n \/* ============================================================\r\n DECORATIVE GRID LINES\r\n============================================================ *\/\r\n .grid-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n============================================================ *\/\r\n @media (max-width: 1024px) {\r\n .about-grid {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .skills-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .contact-grid {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .stats-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .testi-card {\r\n width: 300px;\r\n }\r\n\r\n .testi-trust-sep {\r\n display: none;\r\n }\r\n\r\n .testi-trust-bar {\r\n gap: 28px;\r\n }\r\n\r\n .about-badges {\r\n right: 10px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 0 24px;\r\n }\r\n\r\n .nav-inner {\r\n padding: 0 24px;\r\n }\r\n\r\n .nav-links,\r\n .nav-cta {\r\n display: none;\r\n }\r\n\r\n .hamburger {\r\n display: flex;\r\n }\r\n\r\n .mobile-nav {\r\n display: flex;\r\n }\r\n\r\n .about-visual {\r\n display: block;\r\n margin-bottom: 40px;\r\n max-width: 320px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .about-badges {\r\n right: -8px;\r\n top: 20px;\r\n }\r\n\r\n .about-badge {\r\n font-size: 0.65rem;\r\n padding: 7px 10px;\r\n }\r\n\r\n .skills-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .stats-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .stat-item {\r\n padding: 32px 20px;\r\n }\r\n\r\n .testi-card {\r\n width: 270px;\r\n }\r\n\r\n .modal-results {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .about-badges {\r\n display: none;\r\n }\r\n\r\n .footer-inner {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .footer-bottom {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .about-values {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .hero-cta-group {\r\n flex-direction: column;\r\n }\r\n\r\n .btn-primary,\r\n .btn-outline {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n FLOATING ACTION BUTTONS\r\n============================================================ *\/\r\n .fab-group {\r\n position: fixed;\r\n bottom: 32px;\r\n right: 32px;\r\n z-index: 5000;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n gap: 14px;\r\n }\r\n\r\n \/* --- Scroll to Top --- *\/\r\n .fab-top {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 14px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--c-accent);\r\n cursor: pointer;\r\n opacity: 0;\r\n transform: translateY(16px) scale(0.85);\r\n transition:\r\n opacity 0.4s var(--transition),\r\n transform 0.4s var(--transition),\r\n background 0.3s,\r\n border-color 0.3s,\r\n box-shadow 0.3s;\r\n pointer-events: none;\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .fab-top.visible {\r\n opacity: 1;\r\n transform: none;\r\n pointer-events: auto;\r\n }\r\n\r\n .fab-top:hover {\r\n background: var(--c-accent);\r\n border-color: var(--c-accent);\r\n color: #000;\r\n box-shadow:\r\n 0 0 24px var(--c-glow),\r\n 0 8px 32px rgba(0, 0, 0, 0.5);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .fab-top svg {\r\n transition: transform 0.3s var(--transition);\r\n }\r\n\r\n .fab-top:hover svg {\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* --- WhatsApp --- *\/\r\n .fab-wa {\r\n position: relative;\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 16px;\r\n background: #25d366;\r\n border: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow:\r\n 0 4px 24px rgba(37, 211, 102, 0.4),\r\n 0 8px 40px rgba(0, 0, 0, 0.35);\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n text-decoration: none;\r\n overflow: visible;\r\n }\r\n\r\n .fab-wa::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -3px;\r\n border-radius: 18px;\r\n background: linear-gradient(135deg, #25d366, #128c7e);\r\n opacity: 0;\r\n z-index: -1;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .fab-wa:hover {\r\n transform: translateY(-4px) scale(1.05);\r\n box-shadow:\r\n 0 0 32px rgba(37, 211, 102, 0.6),\r\n 0 12px 48px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .fab-wa:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .fab-wa svg {\r\n width: 28px;\r\n height: 28px;\r\n fill: #fff;\r\n flex-shrink: 0;\r\n transition: transform 0.3s var(--transition);\r\n }\r\n\r\n .fab-wa:hover svg {\r\n transform: scale(1.1) rotate(-5deg);\r\n }\r\n\r\n \/* Pulse ring on WhatsApp *\/\r\n .fab-wa-ping {\r\n position: absolute;\r\n inset: -6px;\r\n border-radius: 22px;\r\n border: 2px solid rgba(37, 211, 102, 0.5);\r\n animation: waPing 2.2s ease-out infinite;\r\n pointer-events: none;\r\n }\r\n\r\n .fab-wa-ping-2 {\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 28px;\r\n border: 1.5px solid rgba(37, 211, 102, 0.25);\r\n animation: waPing 2.2s ease-out 0.6s infinite;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes waPing {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n transform: scale(1.35);\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* Tooltip labels *\/\r\n .fab-tooltip {\r\n position: absolute;\r\n right: calc(100% + 14px);\r\n top: 50%;\r\n transform: translateY(-50%) translateX(6px);\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: 8px;\r\n padding: 6px 12px;\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n letter-spacing: 0.12em;\r\n color: var(--c-text);\r\n white-space: nowrap;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition:\r\n opacity 0.25s,\r\n transform 0.25s var(--transition);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .fab-tooltip::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: -5px;\r\n transform: translateY(-50%);\r\n width: 8px;\r\n height: 8px;\r\n background: var(--c-surface);\r\n border-right: 1px solid var(--c-border);\r\n border-top: 1px solid var(--c-border);\r\n clip-path: polygon(0 0, 100% 50%, 0 100%);\r\n }\r\n\r\n .fab-top:hover .fab-tooltip,\r\n .fab-wa:hover .fab-tooltip {\r\n opacity: 1;\r\n transform: translateY(-50%) translateX(0);\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .fab-group {\r\n bottom: 20px;\r\n right: 18px;\r\n gap: 10px;\r\n }\r\n\r\n .fab-wa {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 14px;\r\n }\r\n\r\n .fab-top {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 12px;\r\n }\r\n\r\n .fab-tooltip {\r\n display: none;\r\n }\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n \r\n <div id=\"scroll-progress\" style=\"width: 0%\"><\/div>\r\n\r\n \r\n <div id=\"cursor-dot\"><\/div>\r\n <div id=\"cursor-ring\"><\/div>\r\n\r\n \r\n <canvas id=\"bg-canvas\"><\/canvas>\r\n\r\n \r\n <div id=\"preloader\">\r\n <div class=\"preloader-logo\">ANAS<\/div>\r\n <div class=\"preloader-bar-wrap\">\r\n <div class=\"preloader-bar\"><\/div>\r\n <\/div>\r\n <div class=\"preloader-text\">Initializing Experience...<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n <nav id=\"navbar\">\r\n <div class=\"nav-inner\">\r\n <a href=\"#hero\" class=\"nav-logo\">AN\u00b7AS<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#skills\">Skills<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#testimonials\">Reviews<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-actions\">\r\n <button\r\n class=\"theme-toggle\"\r\n id=\"themeToggle\"\r\n aria-label=\"Toggle theme\"\r\n >\r\n <span class=\"theme-icon-moon\">\ud83c\udf19<\/span>\r\n <span class=\"theme-icon-sun\">\u2600\ufe0f<\/span>\r\n <\/button>\r\n <a href=\"#contact\" class=\"nav-cta\">Hire Me<\/a>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <nav class=\"mobile-nav\" id=\"mobileNav\">\r\n <a href=\"#about\" class=\"mobile-link\">About<\/a>\r\n <a href=\"#services\" class=\"mobile-link\">Services<\/a>\r\n <a href=\"#skills\" class=\"mobile-link\">Skills<\/a>\r\n <a href=\"#projects\" class=\"mobile-link\">Projects<\/a>\r\n <a href=\"#testimonials\" class=\"mobile-link\">Reviews<\/a>\r\n <a href=\"#contact\" class=\"mobile-link\">Contact<\/a>\r\n <\/nav>\r\n\r\n \r\n <section id=\"hero\">\r\n \r\n <div class=\"hero-grid-floor\">\r\n <div class=\"hero-grid-floor-inner\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-scanline\"><\/div>\r\n\r\n \r\n <div class=\"hero-beam hero-beam-1\"><\/div>\r\n <div class=\"hero-beam hero-beam-2\"><\/div>\r\n\r\n \r\n\r\n \r\n <div class=\"hero-inner\">\r\n \r\n <div class=\"hero-content\">\r\n <div class=\"hero-status\">\r\n <span class=\"hero-status-dot\"><\/span>\r\n Available for New Projects\r\n <\/div>\r\n\r\n <div class=\"hero-glitch-wrap\">\r\n <div class=\"hero-glitch-shadow\">ANAS RAJPUT<\/div>\r\n <h1 class=\"hero-glitch-name\">ANAS RAJPUT<\/h1>\r\n <\/div>\r\n\r\n <div class=\"hero-role-line\">\r\n <span class=\"hero-role-sep\"><\/span>\r\n <span class=\"hero-role-text\"\r\n ><span id=\"hero-type-display\"><\/span\r\n ><span class=\"typewriter-cursor\"><\/span\r\n ><\/span>\r\n <span class=\"hero-role-sep-r\"><\/span>\r\n <\/div>\r\n\r\n <p class=\"hero-tag-line\">\r\n <strong\r\n >Building Fast, SEO Ready, Conversion Focused Websites.<\/strong\r\n ><br \/>\r\n WordPress & Shopify Specialist \u00b7\r\n <strong>3+ Years<\/strong> delivering premium digital experiences\r\n that drive real business growth.\r\n <\/p>\r\n\r\n <div class=\"hero-cta-group\">\r\n <a href=\"#projects\" class=\"btn-primary\">\r\n <span>View My Work<\/span>\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#000\"\r\n stroke-width=\"2.5\"\r\n style=\"position: relative; z-index: 1\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#contact\" class=\"btn-outline\">\r\n <span>Let's Talk<\/span>\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n style=\"position: relative; z-index: 1\"\r\n >\r\n <path\r\n d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/anas.azfa.store\/wp-content\/uploads\/2026\/02\/Anas.pdf\"\r\n download=\"My_CV\"\r\n class=\"btn-outline\"\r\n >\r\n <span>Download CV<\/span>\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n style=\"position: relative; z-index: 1\"\r\n >\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4\"><\/path>\r\n <polyline points=\"7 10 12 15 17 10\"><\/polyline>\r\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-visual\">\r\n <div class=\"hero-orb-container\">\r\n <div class=\"hero-orb\"><\/div>\r\n\r\n <div class=\"hero-orb-ring\"><\/div>\r\n <div class=\"hero-orb-ring-2\"><\/div>\r\n <div class=\"hero-orb-ring-3\"><\/div>\r\n\r\n <div class=\"hero-avatar-wrap\">\r\n <div class=\"hud-line-top\"><\/div>\r\n <div class=\"hud-line-bottom\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-orb-container\">\r\n <div class=\"hero-avatar-wrap\"><\/div>\r\n <img decoding=\"async\" class=\"avatar-letter\" src=\".\/Hero 1.png\" \/>\r\n <\/div>\r\n\r\n <div class=\"hero-tech-badges\">\r\n <div class=\"tech-badge\">\u26a1 WordPress<\/div>\r\n <div class=\"tech-badge\">\ud83d\uded2 Shopify<\/div>\r\n <div class=\"tech-badge\">\ud83d\udcdd Content Wrintig<\/div>\r\n <div class=\"tech-badge\">\ud83d\udcc8 SEO<\/div>\r\n <div class=\"tech-badge\">\ud83c\udfa8 Graphic Design<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-scroll\">\r\n <span>Scroll<\/span>\r\n <div class=\"scroll-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"stats\">\r\n <div class=\"container\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item reveal\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"3\">0<\/span\r\n ><span class=\"stat-plus\">+<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Years of Experience<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal reveal-delay-1\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"80\">0<\/span\r\n ><span class=\"stat-plus\">+<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Projects Completed<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal reveal-delay-2\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"60\">0<\/span\r\n ><span class=\"stat-plus\">+<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Happy Clients<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal reveal-delay-3\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"100\">0<\/span\r\n ><span class=\"stat-plus\">%<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Client Satisfaction<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\">\r\n <div class=\"container\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-visual reveal\">\r\n <div class=\"about-image-frame\">\r\n <div class=\"about-avatar-bg\">\r\n <span class=\"gradient-text\"\r\n ><img decoding=\"async\" src=\".\/Hero 2.png\" alt=\"\"\r\n \/><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-frame-deco\"><\/div>\r\n <div class=\"about-badges\">\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #00f5ff\"\r\n ><\/span>\r\n Frontend Developer\r\n <\/div>\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #9b59ff\"\r\n ><\/span>\r\n WordPress Expert\r\n <\/div>\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #ff6b35\"\r\n ><\/span>\r\n Shopify Partner\r\n <\/div>\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #5d35ff\"\r\n ><\/span>\r\n Content Writer\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-text\">\r\n <div class=\"section-label reveal\">About Me<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Crafting Digital<br \/><span class=\"gradient-text\"\r\n >Experiences<\/span\r\n ><br \/>That Convert\r\n <\/h2>\r\n <div class=\"reveal reveal-delay-2\">\r\n <p>\r\n I'm <strong>Anas, <\/strong>a skilled frontend web developer,\r\n WordPress expert, and content writer who loves creating websites\r\n that look great and work perfectly. I have strong expertise in\r\n HTML, CSS, and JavaScript, which helps me build responsive and\r\n user-friendly websites that offer an amazing experience to\r\n users.\r\n <\/p>\r\n <p>\r\n Over the years, I\u2019ve worked on\r\n <strong>80+ websites, <\/strong>for different industries like\r\n e-commerce, education, and personal branding. My WordPress\r\n development skills allow me to create websites that are fully\r\n customized to fit the needs of each client. From clean designs\r\n to advanced features, I make sure every website stands out\r\n <\/p>\r\n <p>\r\n I\u2019m also experienced in <strong>content writing<\/strong> and\r\n specialize in creating SEO-friendly content that helps brands\r\n grow online. By combining my web development and writing skills,\r\n I ensure every project is engaging, effective, and aligned with\r\n my clients\u2019 goals. <br \/>I take pride in delivering high-quality\r\n work on time and meeting my clients\u2019 expectations. If you\u2019re\r\n looking for someone who can turn your ideas into a professional\r\n website or content that works, I\u2019m ready to help!\r\n <\/p>\r\n <\/div>\r\n <div class=\"about-values reveal reveal-delay-3\">\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\u26a1<\/span>Performance First\r\n <\/div>\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\ud83d\udd0d<\/span>SEO Optimized\r\n <\/div>\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\ud83d\udcf1<\/span>Mobile Responsive\r\n <\/div>\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\ud83c\udfaf<\/span>Conversion Focused\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"skills\">\r\n <div class=\"container\">\r\n <div class=\"skills-header\">\r\n <div>\r\n <div class=\"section-label reveal\">My Toolkit<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Skills & <span class=\"gradient-text\">Expertise<\/span>\r\n <\/h2>\r\n <\/div>\r\n <p class=\"section-subtitle reveal reveal-delay-2\">\r\n Mastery built through real-world projects and relentless learning.\r\n <\/p>\r\n <\/div>\r\n <div class=\"skills-grid\">\r\n <div class=\"skill-card reveal\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83c\udfa8<\/div>\r\n <div class=\"skill-pct\" data-pct=\"95\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">WordPress Development<\/div>\r\n <div class=\"skill-desc\">Custom Themes \u00b7 Plugins \u00b7 WooCommerce<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"95\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-1\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83d\uded2<\/div>\r\n <div class=\"skill-pct\" data-pct=\"92\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">Shopify Development<\/div>\r\n <div class=\"skill-desc\">Custom Themes \u00b7 Liquid \u00b7 Apps<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"92\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-2\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\u270d\ufe0f<\/div>\r\n <div class=\"skill-pct\" data-pct=\"88\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">Content Writing<\/div>\r\n <div class=\"skill-desc\">Blog Posts \u00b7 Articls \u00b7 CopyWriting<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"88\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-1\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83c\udfaf<\/div>\r\n <div class=\"skill-pct\" data-pct=\"90\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">HTML \/ CSS \/ JS<\/div>\r\n <div class=\"skill-desc\">Semantic HTML \u00b7 Tailwind \u00b7 Animations<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"90\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-2\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83d\udd0d<\/div>\r\n <div class=\"skill-pct\" data-pct=\"85\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">SEO Optimization<\/div>\r\n <div class=\"skill-desc\">\r\n Technical SEO \u00b7 Core Web Vitals \u00b7 Schema\r\n <\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"85\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-3\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83c\udfa8<\/div>\r\n <div class=\"skill-pct\" data-pct=\"87\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">Graphics Design<\/div>\r\n <div class=\"skill-desc\">\r\n Visual Identity \u00b7 Marketing & Advertising Design \u00b7 Motion Graphics\r\n <\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"87\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"services\">\r\n <div class=\"container\">\r\n <div\r\n style=\"\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n margin-bottom: 0;\r\n \"\r\n >\r\n <div>\r\n <div class=\"section-label reveal\">What I Offer<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Premium <span class=\"gradient-text\">Services<\/span>\r\n <\/h2>\r\n <p class=\"section-subtitle reveal reveal-delay-2\">\r\n End-to-end solutions designed to build, grow, and scale your\r\n digital presence.\r\n <\/p>\r\n <\/div>\r\n <a\r\n href=\"#contact\"\r\n class=\"btn-outline reveal reveal-delay-3\"\r\n style=\"align-self: flex-end\"\r\n >Get a Free Quote<\/a\r\n >\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n \r\n <div class=\"service-card reveal\">\r\n <div class=\"service-card-glow sg-cyan\"><\/div>\r\n <div class=\"service-num\">01<\/div>\r\n <div class=\"service-icon-wrap\">\ud83c\udfa8<\/div>\r\n <div class=\"service-title\">WordPress Development<\/div>\r\n <div class=\"service-desc\">\r\n Fully custom WordPress websites built from scratch \u2014 blazing fast,\r\n pixel-perfect, and built to rank. No page builders, no bloat.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Custom Theme\r\n Development\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>WooCommerce Stores\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Plugin Development &\r\n Integration\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Performance & Speed\r\n Optimization\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Migration & Redesign\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-card-glow sg-purple\"><\/div>\r\n <div class=\"service-badge\">Most Popular<\/div>\r\n <div class=\"service-num\">02<\/div>\r\n <div class=\"service-icon-wrap\">\ud83d\uded2<\/div>\r\n <div class=\"service-title\">Shopify Development<\/div>\r\n <div class=\"service-desc\">\r\n High-converting Shopify stores built for growth. Custom Liquid\r\n themes, seamless app integrations, and checkout flows that sell.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Custom Shopify Theme\r\n (Liquid)\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Shopify Plus\r\n Development\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>WooCommerce \u2192 Shopify\r\n Migration\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>App Integration &\r\n Development\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>CRO & Checkout\r\n Optimization\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-card-glow sg-orange\"><\/div>\r\n <div class=\"service-num\">03<\/div>\r\n <div class=\"service-icon-wrap\">\u270d\ufe0f<\/div>\r\n <div class=\"service-title\">Content Writing<\/div>\r\n <div class=\"service-desc\">\r\n Modern, high-performance content strategies using SEO and User\r\n Intent. Keyword research, Semantic writing, and Content systems\r\n built to rank.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>SEO Writing (Articles &\r\n Blogs)\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Copywriting\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Social Media Writing\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Technical Writing\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Creative Writing &\r\n Storytelling\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal\">\r\n <div class=\"service-card-glow sg-cyan\"><\/div>\r\n <div class=\"service-num\">04<\/div>\r\n <div class=\"service-icon-wrap\">\ud83d\udd0d<\/div>\r\n <div class=\"service-title\">SEO Optimization<\/div>\r\n <div class=\"service-desc\">\r\n Technical SEO audits and on-page optimization that push your site\r\n to the top of Google. Data-driven, results-guaranteed approach.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Technical SEO Audit\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Core Web Vitals\r\n Optimization\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Schema Markup &\r\n Structured Data\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Local SEO & Google\r\n Business\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>SEO-Friendly\r\n Architecture\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-card-glow sg-purple\"><\/div>\r\n <div class=\"service-num\">05<\/div>\r\n <div class=\"service-icon-wrap\">\u26a1<\/div>\r\n <div class=\"service-title\">Graphic Design<\/div>\r\n <div class=\"service-desc\">\r\n Modern, high-impact visual identities using Photoshop and\r\n Illustrator. Brand systems, UI components, and Vector assets built\r\n to scale.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Brand Identity (Logo\r\n Design)\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>UI\/UX Design\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Social Media Graphics\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Print Media & Packaging\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Motion Graphics\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-card-glow sg-orange\"><\/div>\r\n <div class=\"service-num\">06<\/div>\r\n <div class=\"service-icon-wrap\">\ud83d\udee1\ufe0f<\/div>\r\n <div class=\"service-title\">Maintenance & Support<\/div>\r\n <div class=\"service-desc\">\r\n Ongoing care plans to keep your site secure, updated, and\r\n performing at its peak \u2014 so you can focus on your business.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Monthly Security\r\n Updates\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Backup & Disaster\r\n Recovery\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Bug Fixes & Code\r\n Updates\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Uptime Monitoring 24\/7\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Priority Support\r\n Response\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"services-process reveal\">\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">01<\/div>\r\n <div class=\"process-label\">Discovery<\/div>\r\n <div class=\"process-desc\">\r\n Deep dive into your goals, audience, and competitors to form the\r\n perfect strategy.\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">02<\/div>\r\n <div class=\"process-label\">Design<\/div>\r\n <div class=\"process-desc\">\r\n Wireframes and visual concepts crafted around your brand and\r\n conversion goals.\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">03<\/div>\r\n <div class=\"process-label\">Development<\/div>\r\n <div class=\"process-desc\">\r\n Clean, fast, and scalable code built with best practices and\r\n tested across all devices.\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">04<\/div>\r\n <div class=\"process-label\">Launch & Grow<\/div>\r\n <div class=\"process-desc\">\r\n Deployed with SEO, analytics, and performance baked in \u2014 then we\r\n iterate and improve.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"projects\">\r\n <div class=\"container\">\r\n <div class=\"skills-header\">\r\n <div>\r\n <div class=\"section-label reveal\">Portfolio<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Selected <span class=\"gradient-text\">Works<\/span>\r\n <\/h2>\r\n <\/div>\r\n <div class=\"filter-bar reveal reveal-delay-2\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\r\n <button class=\"filter-btn\" data-filter=\"wordpress\">\r\n WordPress\r\n <\/button>\r\n <button class=\"filter-btn\" data-filter=\"shopify\">Shopify<\/button>\r\n <button class=\"filter-btn\" data-filter=\"content\">\r\n Content Writing\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"projects-grid\" id=\"projectsGrid\">\r\n \r\n <div\r\n class=\"project-card reveal\"\r\n data-category=\"wordpress\"\r\n data-case=\"azfa\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #0a0a1a\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-azfa-store-2026-04-25-19_52_00.png\"\r\n alt=\"AZFA Store screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #9b59ff; filter: drop-shadow(0 0 20px #9b59ff66)\"\r\n >\ud83d\udecd\ufe0f<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('azfa');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/azfa.store\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag orange\">WooCommerce<\/span>\r\n <\/div>\r\n <div class=\"project-title\">AZFA Store<\/div>\r\n <div class=\"project-desc\">\r\n Custom WooCommerce store with advanced product filtering, fast\r\n checkout, and full SEO optimization for maximum organic reach.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('azfa');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">Live & Ranking<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-1\"\r\n data-category=\"wordpress\"\r\n data-case=\"tsb\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #040e0c\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-signals2trade-2026-04-25-20_15_38.png\"\r\n alt=\"The Signals Bank screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #00f5ff; filter: drop-shadow(0 0 20px #00f5ff66)\"\r\n >\ud83d\udcc8<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('tsb');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/thesignalsbank.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag purple\">Forex \/ Finance<\/span>\r\n <\/div>\r\n <div class=\"project-title\">The Signals Bank<\/div>\r\n <div class=\"project-desc\">\r\n Professional trading signals platform built on WordPress with\r\n membership system, real-time signal delivery, and premium\r\n subscription tiers.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('tsb');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">500+ Members<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-2\"\r\n data-category=\"wordpress\"\r\n data-case=\"autocopy\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #0a0600\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-autocopyfx-2026-04-25-19_58_29.png\"\r\n alt=\"AutoCopyFX screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #ff6b35; filter: drop-shadow(0 0 20px #ff6b3566)\"\r\n >\u2699\ufe0f<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('autocopy');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/autocopyfx.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag orange\">FinTech<\/span>\r\n <\/div>\r\n <div class=\"project-title\">AutoCopyFX<\/div>\r\n <div class=\"project-desc\">\r\n Automated forex copy-trading platform with live account\r\n dashboard, MT4\/MT5 integration, and affiliate tracking system\r\n built on WordPress.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('autocopy');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">98 Lighthouse<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal\"\r\n data-category=\"shopify\"\r\n data-case=\"anasi\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #0c0c1e\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-anasi-mart-myshopify-2026-04-25-20_01_19.png\"\r\n alt=\"Anasi Mart screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #9b59ff; filter: drop-shadow(0 0 20px #9b59ff66)\"\r\n >\ud83d\uded2<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('anasi');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/anasi-mart.myshopify.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag purple\">Shopify<\/span>\r\n <span class=\"project-tag orange\">E-Commerce<\/span>\r\n <\/div>\r\n <div class=\"project-title\">Anasi Mart<\/div>\r\n <div class=\"project-desc\">\r\n Full-featured Shopify store with custom theme, product\r\n collections, optimized checkout, and mobile-first design for\r\n high conversion rates.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('anasi');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">+85% Conv.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-1\"\r\n data-category=\"shopify\"\r\n data-case=\"homify\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #040a14\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-hoomify-store-2026-04-25-20_03_47.png\"\r\n alt=\"Homify screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #4fc3f7; filter: drop-shadow(0 0 20px #4fc3f766)\"\r\n >\ud83c\udfe0<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('homify');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/homify102.myshopify.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag purple\">Shopify<\/span>\r\n <span class=\"project-tag\">Home & Living<\/span>\r\n <\/div>\r\n <div class=\"project-title\">Homify Store<\/div>\r\n <div class=\"project-desc\">\r\n Premium home d\u00e9cor Shopify store with curated collections, smart\r\n upsells, and a brand-forward design that drives repeat\r\n purchases.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('homify');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">4.9\u2605 Rating<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-2\"\r\n data-category=\"content\"\r\n data-case=\"content1\"\r\n >\r\n <div\r\n class=\"project-thumb\"\r\n style=\"background: linear-gradient(135deg, #0a0014, #12002a)\"\r\n >\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"\r\n color: #e040fb;\r\n filter: drop-shadow(0 0 20px #e040fb66);\r\n font-size: 3.5rem;\r\n \"\r\n >\u270d\ufe0f<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('content1');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/broker-affiliate-academy.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag purple\">Content Writing<\/span>\r\n <span class=\"project-tag orange\">SEO Blogs<\/span>\r\n <\/div>\r\n <div class=\"project-title\">\r\n Broker Affiliate Academy \u2014 SEO Content\r\n <\/div>\r\n <div class=\"project-desc\">\r\n Full SEO content strategy and blog writing for a forex education\r\n platform \u2014 keyword-targeted articles that grew organic traffic\r\n by 240%.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('content1');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">+240% Traffic<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <div style=\"text-align: center; margin-top: 56px\" class=\"reveal\">\r\n <a href=\"projects.html\" class=\"btn-view-all\">\r\n <span>View All Projects<\/span>\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/section>\r\n \r\n <div class=\"modal-overlay\" id=\"modalOverlay\" onclick=\"closeModal(event)\">\r\n <div class=\"modal\" id=\"modalContent\">\r\n <button class=\"modal-close\" onclick=\"closeModal(null, true)\">\u2715<\/button>\r\n <div id=\"modalBody\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"testimonials\">\r\n <div class=\"container\">\r\n <div style=\"text-align: center; margin-bottom: 56px\">\r\n <div class=\"section-label reveal\" style=\"justify-content: center\">\r\n Social Proof\r\n <\/div>\r\n <h2\r\n class=\"section-title reveal reveal-delay-1\"\r\n style=\"text-align: center\"\r\n >\r\n Trusted by <span class=\"gradient-text\">60+ Clients<\/span>\r\n <\/h2>\r\n <p\r\n class=\"section-subtitle reveal reveal-delay-2\"\r\n style=\"margin: 0 auto; text-align: center\"\r\n >\r\n Real words from real people who leveled up their digital presence.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-spotlight reveal reveal-delay-2\">\r\n <span class=\"testi-spotlight-quote-mark\">\"<\/span>\r\n <div class=\"testi-spotlight-text\">\r\n Working with Anas was a <em>game-changer<\/em> for our business. He\r\n didn't just build a website \u2014 he built a <em>sales machine<\/em>. Our\r\n conversions jumped 140% and we hit our first $100k month.\r\n <\/div>\r\n <div style=\"display: flex; justify-content: center\">\r\n <div class=\"testi-spotlight-author\">\r\n <div class=\"testi-spotlight-avatar\">S<\/div>\r\n <div style=\"text-align: left\">\r\n <div class=\"testi-spotlight-name\">Sarah Mitchell<\/div>\r\n <div class=\"testi-spotlight-role\">CEO \u00b7 Lux\u00e9Mode Fashion<\/div>\r\n <\/div>\r\n <div class=\"testi-spotlight-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-marquee-wrap reveal\">\r\n <div class=\"testi-row\">\r\n \r\n <div class=\"testi-track\" id=\"row1a\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our site now scores <strong>98 on Lighthouse<\/strong> and ranks\r\n #1 for our key terms. Delivered beyond expectations \u2014 on time,\r\n on budget, exceptional quality.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">J<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">James Forsythe<\/div>\r\n <div class=\"testi-card-role\">Director \u00b7 Apex Solutions<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The React dashboard handles real-time data beautifully. Code is\r\n <strong>clean, scalable, and documented<\/strong>. He's our go-to\r\n developer for all front-end work.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">A<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Aisha Rahman<\/div>\r\n <div class=\"testi-card-role\">CTO \u00b7 DataPulse Inc.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our subscription signups <strong>tripled in month one<\/strong>.\r\n The Shopify store tells our brand story perfectly. Mobile\r\n experience is absolutely flawless.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">M<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Marco Deluca<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 BrewCraft Coffee<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Patient enquiries from organic search went up\r\n <strong>320% in 3 months<\/strong>. An absolute expert in\r\n healthcare SEO and compliant web architecture.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">D<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Dr. Emily Chen<\/div>\r\n <div class=\"testi-card-role\">Practice Manager \u00b7 MediCore<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Next.js<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our SaaS landing page hit a\r\n <strong>12% conversion rate<\/strong> \u2014 3\u00d7 our previous best. The\r\n animations and copyflow he suggested were spot on.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">R<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Ryan Patel<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 LaunchPad Systems<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testi-track\" aria-hidden=\"true\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our site now scores <strong>98 on Lighthouse<\/strong> and ranks\r\n #1 for our key terms. Delivered beyond expectations \u2014 on time,\r\n on budget, exceptional quality.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">J<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">James Forsythe<\/div>\r\n <div class=\"testi-card-role\">Director \u00b7 Apex Solutions<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The React dashboard handles real-time data beautifully. Code is\r\n <strong>clean, scalable, and documented<\/strong>. He's our go-to\r\n developer for all front-end work.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">A<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Aisha Rahman<\/div>\r\n <div class=\"testi-card-role\">CTO \u00b7 DataPulse Inc.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our subscription signups <strong>tripled in month one<\/strong>.\r\n The Shopify store tells our brand story perfectly. Mobile\r\n experience is absolutely flawless.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">M<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Marco Deluca<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 BrewCraft Coffee<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Patient enquiries from organic search went up\r\n <strong>320% in 3 months<\/strong>. An absolute expert in\r\n healthcare SEO and compliant web architecture.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">D<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Dr. Emily Chen<\/div>\r\n <div class=\"testi-card-role\">Practice Manager \u00b7 MediCore<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Next.js<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our SaaS landing page hit a\r\n <strong>12% conversion rate<\/strong> \u2014 3\u00d7 our previous best. The\r\n animations and copyflow he suggested were spot on.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">R<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Ryan Patel<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 LaunchPad Systems<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-row\">\r\n <div class=\"testi-track-reverse\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WooCommerce<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n We went from 2 sales\/day to\r\n <strong>over 40 sales\/day<\/strong> after the redesign. The\r\n checkout UX and product pages are exactly what our customers\r\n needed.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">K<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Khalid Mansour<\/div>\r\n <div class=\"testi-card-role\">Owner \u00b7 TechGadgets Store<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify Plus<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Anas migrated our entire WooCommerce store to Shopify Plus with\r\n <strong>zero downtime and zero SEO loss<\/strong>. Absolutely\r\n incredible work and communication.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">L<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Laura Kim<\/div>\r\n <div class=\"testi-card-role\">\r\n E-Commerce Manager \u00b7 StyleHouse\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The custom WordPress theme he built is fast, beautiful, and easy\r\n to update. Our team manages content effortlessly.\r\n <strong>Page speed improved from 42 to 96.<\/strong>\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">T<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Thomas Webb<\/div>\r\n <div class=\"testi-card-role\">\r\n Marketing Director \u00b7 Veritas Group\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Hired Anas for a landing page refresh and ended up engaging him\r\n for our entire product suite.\r\n <strong>Best investment we made this year.<\/strong> Talent and\r\n professionalism unmatched.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">N<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Nadia Okonkwo<\/div>\r\n <div class=\"testi-card-role\">CPO \u00b7 Orbitech SaaS<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our bounce rate dropped from 78% to 31% after Anas redesigned\r\n our product pages.\r\n <strong>Revenue doubled in 60 days.<\/strong> He knows what\r\n converts and why.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">F<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Farah Al-Amin<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 GlowSkin Beauty<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testi-track-reverse\" aria-hidden=\"true\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WooCommerce<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n We went from 2 sales\/day to\r\n <strong>over 40 sales\/day<\/strong> after the redesign. The\r\n checkout UX and product pages are exactly what our customers\r\n needed.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">K<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Khalid Mansour<\/div>\r\n <div class=\"testi-card-role\">Owner \u00b7 TechGadgets Store<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify Plus<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Anas migrated our entire WooCommerce store to Shopify Plus with\r\n <strong>zero downtime and zero SEO loss<\/strong>. Absolutely\r\n incredible work and communication.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">L<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Laura Kim<\/div>\r\n <div class=\"testi-card-role\">\r\n E-Commerce Manager \u00b7 StyleHouse\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The custom WordPress theme he built is fast, beautiful, and easy\r\n to update. Our team manages content effortlessly.\r\n <strong>Page speed improved from 42 to 96.<\/strong>\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">T<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Thomas Webb<\/div>\r\n <div class=\"testi-card-role\">\r\n Marketing Director \u00b7 Veritas Group\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Hired Anas for a landing page refresh and ended up engaging him\r\n for our entire product suite.\r\n <strong>Best investment we made this year.<\/strong> Talent and\r\n professionalism unmatched.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">N<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Nadia Okonkwo<\/div>\r\n <div class=\"testi-card-role\">CPO \u00b7 Orbitech SaaS<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our bounce rate dropped from 78% to 31% after Anas redesigned\r\n our product pages.\r\n <strong>Revenue doubled in 60 days.<\/strong> He knows what\r\n converts and why.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">F<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Farah Al-Amin<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 GlowSkin Beauty<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"container\">\r\n <div class=\"testi-trust-bar reveal\">\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">60+<\/div>\r\n <div class=\"testi-trust-label\">Happy Clients<\/div>\r\n <\/div>\r\n <div class=\"testi-trust-sep\"><\/div>\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">5.0<\/div>\r\n <div class=\"testi-trust-label\">Average Rating<\/div>\r\n <\/div>\r\n <div class=\"testi-trust-sep\"><\/div>\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">100%<\/div>\r\n <div class=\"testi-trust-label\">Satisfaction Rate<\/div>\r\n <\/div>\r\n <div class=\"testi-trust-sep\"><\/div>\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">Top Rated<\/div>\r\n <div class=\"testi-trust-label\">Upwork & Fiverr<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\">\r\n <div class=\"container\">\r\n <div class=\"contact-grid\">\r\n <div>\r\n <div class=\"section-label reveal\">Get In Touch<\/div>\r\n <h2 class=\"contact-info-title reveal reveal-delay-1\">\r\n Let's Build Something <span class=\"gradient-text\">Amazing<\/span>\r\n <\/h2>\r\n <p class=\"contact-info-sub reveal reveal-delay-2\">\r\n Ready to take your website to the next level? Whether it's a fresh\r\n build, a redesign, or optimizing what you have \u2014 I'm here to help.\r\n <\/p>\r\n <div class=\"contact-details reveal reveal-delay-3\">\r\n <div class=\"contact-detail\">\r\n <div class=\"contact-detail-icon\">\ud83d\udce7<\/div>\r\n <div>\r\n <div class=\"contact-detail-label\">Email<\/div>\r\n <div class=\"contact-detail-value\">\r\n <a\r\n href=\"mailto:anasakbarsaqi8@gmail.com\"\r\n class=\"__cf_email__\"\r\n data-cfemail=\"345c5158585b74555a55471a505142\"\r\n >[email protected]<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-detail\">\r\n <div class=\"contact-detail-icon\">\ud83d\udcbc<\/div>\r\n <div>\r\n <div class=\"contact-detail-label\">Availability<\/div>\r\n <div class=\"contact-detail-value\">Open to Projects<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-detail\">\r\n <div class=\"contact-detail-icon\">\u23f1\ufe0f<\/div>\r\n <div>\r\n <div class=\"contact-detail-label\">Response Time<\/div>\r\n <div class=\"contact-detail-value\">Within 24 Hours<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-2\">\r\n <form class=\"contact-form\" id=\"contactForm\" novalidate>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Name<\/label>\r\n <input\r\n type=\"text\"\r\n name=\"name\"\r\n class=\"form-input\"\r\n placeholder=\"Your Name\"\r\n id=\"nameInput\"\r\n \/>\r\n <div class=\"form-error\" id=\"nameError\">\r\n Please enter your name.\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Email<\/label>\r\n <input\r\n type=\"email\"\r\n name=\"email\"\r\n class=\"form-input\"\r\n placeholder=\"your@email.com\"\r\n id=\"emailInput\"\r\n \/>\r\n <div class=\"form-error\" id=\"emailError\">\r\n Please enter a valid email.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Subject<\/label>\r\n <input\r\n type=\"text\"\r\n name=\"subject\"\r\n class=\"form-input\"\r\n placeholder=\"Project inquiry, redesign, etc.\"\r\n \/>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Select Services<\/label>\r\n <select\r\n name=\"Select Services\"\r\n class=\"form-input\"\r\n style=\"appearance: none; cursor: pointer\"\r\n >\r\n <option value=\"\" disabled selected>Select Services<\/option>\r\n <option>Web Development<\/option>\r\n <option>WordPress & Shopify<\/option>\r\n <option>Content Writing<\/option>\r\n <option>Graphic Design<\/option>\r\n <option>More<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Message<\/label>\r\n <textarea\r\n name=\"message\"\r\n class=\"form-input\"\r\n placeholder=\"Tell me about your project...\"\r\n rows=\"5\"\r\n id=\"messageInput\"\r\n ><\/textarea>\r\n <div class=\"form-error\" id=\"messageError\">\r\n Please enter your message.\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-success\" id=\"formSuccess\">\r\n \u2705 Message sent! I'll get back to you within 24 hours.\r\n <\/div>\r\n <button\r\n type=\"submit\"\r\n class=\"btn-primary\"\r\n style=\"\r\n align-self: flex-start;\r\n padding: 16px 36px;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-accent),\r\n var(--c-accent2)\r\n );\r\n color: #000;\r\n -webkit-text-fill-color: #000;\r\n \"\r\n >\r\n <span\r\n style=\"\r\n position: relative;\r\n z-index: 1;\r\n color: #000;\r\n -webkit-text-fill-color: #000;\r\n \"\r\n >Send Message<\/span\r\n >\r\n <svg\r\n style=\"position: relative; z-index: 1\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#000\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M22 2L11 13\" \/>\r\n <path d=\"M22 2L15 22l-4-9-9-4z\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer>\r\n <div class=\"container\">\r\n <div class=\"footer-inner\">\r\n <div>\r\n <div class=\"footer-logo\">AN\u00b7AS<\/div>\r\n <div\r\n style=\"\r\n font-size: 0.8rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n margin-top: 8px;\r\n \"\r\n >\r\n Frontend Developer \u00b7 WordPress \u00b7 Shopify\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-links\">\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#services\">Services<\/a>\r\n <a href=\"#skills\">Skills<\/a>\r\n <a href=\"#projects\">Projects<\/a>\r\n <a href=\"#testimonials\">Reviews<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <div class=\"footer-socials\">\r\n <a\r\n href=\"https:\/\/github.com\/anas-akbar-saqi\"\r\n class=\"social-btn\"\r\n aria-label=\"GitHub\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/www.linkedin.com\/in\/anasakbarsaqi\/\"\r\n class=\"social-btn\"\r\n aria-label=\"LinkedIn\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/web.facebook.com\/anasakbarsaqi21\"\r\n target=\"_blank\"\r\n class=\"social-btn\"\r\n aria-label=\"Facebook\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/www.behance.net\/anasakbarsaqi\"\r\n target=\"_blank\"\r\n class=\"social-btn\"\r\n aria-label=\"Behance\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M23.25 14.25h-8.5c.25 1.5 1.5 2.5 3 2.5 1.25 0 2.25-.5 2.75-1.25h2.75c-.75 2.25-2.75 4-5.5 4-3.5 0-6-2.5-6-6s2.5-6 6-6c3.25 0 5.5 2.5 5.5 6zm-5.5-3.5c-1.25 0-2.25.75-2.75 2h5.5c-.25-1.25-1.25-2-2.75-2zM8.25 13c0 1.25-1 2.25-2.25 2.25H2.5v-4.5h3.5c1.25 0 2.25 1 2.25 2.25zM9 7.75c0 1.25-1 2.25-2.25 2.25H2.5V5.5h4.25c1.25 0 2.25 1 2.25 2.25zM0 3.25v17.5h7.5c3.25 0 5.5-2 5.5-5.25 0-1.75-.75-3.25-2-4.25 1-.75 1.5-2.25 1.5-3.5C12.5 5 10.5 3.25 7.5 3.25H0zm14.25 4.75h8.5V6.5h-8.5v1.5z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <div class=\"footer-copy\">\u00a9 2026 Anas. All rights reserved.<\/div>\r\n <div class=\"footer-made\">\r\n Designed & Built with <span>\u2665<\/span> by Anas\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <div class=\"fab-group\">\r\n \r\n <button\r\n class=\"fab-top\"\r\n id=\"fabTop\"\r\n aria-label=\"Scroll to top\"\r\n onclick=\"window.scrollTo({ top: 0, behavior: 'smooth' })\"\r\n >\r\n <div class=\"fab-tooltip\">Back to Top<\/div>\r\n <svg\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M12 19V5M5 12l7-7 7 7\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n \r\n <a\r\n class=\"fab-wa\"\r\n href=\"https:\/\/wa.me\/923001234567\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n aria-label=\"Chat on WhatsApp\"\r\n >\r\n <div class=\"fab-wa-ping\"><\/div>\r\n <div class=\"fab-wa-ping-2\"><\/div>\r\n <div class=\"fab-tooltip\">WhatsApp Me<\/div>\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path\r\n d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <script>\r\n \/\/ ============================================================\r\n \/\/ UTILS\r\n \/\/ ============================================================\r\n const $ = (s, c = document) => c.querySelector(s);\r\n const $$ = (s, c = document) => [...c.querySelectorAll(s)];\r\n\r\n \/\/ ============================================================\r\n \/\/ PRELOADER\r\n \/\/ ============================================================\r\n window.addEventListener(\"load\", () => {\r\n setTimeout(() => {\r\n $(\"#preloader\").classList.add(\"done\");\r\n document.body.style.overflow = \"\";\r\n initReveal();\r\n }, 2000);\r\n });\r\n document.body.style.overflow = \"hidden\";\r\n\r\n \/\/ ============================================================\r\n \/\/ CURSOR\r\n \/\/ ============================================================\r\n const dot = $(\"#cursor-dot\"),\r\n ring = $(\"#cursor-ring\");\r\n let mx = -100,\r\n my = -100,\r\n rx = -100,\r\n ry = -100;\r\n document.addEventListener(\"mousemove\", (e) => {\r\n mx = e.clientX;\r\n my = e.clientY;\r\n });\r\n const hoverEls = () =>\r\n $$(\r\n \"a, button, .project-card, .skill-card, .filter-btn, .about-value, .contact-detail\",\r\n );\r\n function animateCursor() {\r\n rx += (mx - rx) * 0.12;\r\n ry += (my - ry) * 0.12;\r\n dot.style.left = mx + \"px\";\r\n dot.style.top = my + \"px\";\r\n ring.style.left = rx + \"px\";\r\n ring.style.top = ry + \"px\";\r\n requestAnimationFrame(animateCursor);\r\n }\r\n animateCursor();\r\n document.addEventListener(\"mouseover\", (e) => {\r\n if (\r\n e.target.closest(\r\n \"a, button, .project-card, .skill-card, .filter-btn, .about-value, .contact-detail, .social-btn, .slider-btn\",\r\n )\r\n )\r\n ring.classList.add(\"hovering\");\r\n else ring.classList.remove(\"hovering\");\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ CANVAS PARTICLES\r\n \/\/ ============================================================\r\n const canvas = $(\"#bg-canvas\");\r\n const ctx = canvas.getContext(\"2d\");\r\n let particles = [];\r\n const isDark = () => document.documentElement.dataset.theme !== \"light\";\r\n\r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n }\r\n resizeCanvas();\r\n window.addEventListener(\"resize\", resizeCanvas);\r\n\r\n class Particle {\r\n constructor() {\r\n this.reset();\r\n }\r\n reset() {\r\n this.x = Math.random() * canvas.width;\r\n this.y = Math.random() * canvas.height;\r\n this.size = Math.random() * 1.5 + 0.3;\r\n this.speedX = (Math.random() - 0.5) * 0.3;\r\n this.speedY = (Math.random() - 0.5) * 0.3;\r\n this.opacity = Math.random() * 0.5 + 0.1;\r\n this.color =\r\n Math.random() > 0.6\r\n ? \"#00F5FF\"\r\n : Math.random() > 0.5\r\n ? \"#9B59FF\"\r\n : \"#ffffff\";\r\n }\r\n update() {\r\n this.x += this.speedX;\r\n this.y += this.speedY;\r\n if (\r\n this.x < 0 ||\r\n this.x > canvas.width ||\r\n this.y < 0 ||\r\n this.y > canvas.height\r\n )\r\n this.reset();\r\n }\r\n draw() {\r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n ctx.fillStyle = this.color;\r\n ctx.globalAlpha = this.opacity;\r\n ctx.fill();\r\n ctx.globalAlpha = 1;\r\n }\r\n }\r\n\r\n \/\/ Lines between close particles\r\n function drawConnections() {\r\n for (let i = 0; i < particles.length; i++) {\r\n for (let j = i + 1; j < particles.length; j++) {\r\n const dx = particles[i].x - particles[j].x;\r\n const dy = particles[i].y - particles[j].y;\r\n const dist = Math.sqrt(dx * dx + dy * dy);\r\n if (dist < 100) {\r\n ctx.beginPath();\r\n ctx.moveTo(particles[i].x, particles[i].y);\r\n ctx.lineTo(particles[j].x, particles[j].y);\r\n ctx.strokeStyle = isDark()\r\n ? `rgba(0,245,255,${0.06 * (1 - dist \/ 100)})`\r\n : `rgba(0,102,255,${0.04 * (1 - dist \/ 100)})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n }\r\n\r\n for (let i = 0; i < 120; i++) particles.push(new Particle());\r\n\r\n function animateParticles() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n particles.forEach((p) => {\r\n p.update();\r\n p.draw();\r\n });\r\n drawConnections();\r\n requestAnimationFrame(animateParticles);\r\n }\r\n animateParticles();\r\n\r\n \/\/ ============================================================\r\n \/\/ THEME TOGGLE\r\n \/\/ ============================================================\r\n $(\"#themeToggle\").addEventListener(\"click\", () => {\r\n const html = document.documentElement;\r\n html.dataset.theme = html.dataset.theme === \"dark\" ? \"light\" : \"dark\";\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ NAVBAR SCROLL\r\n \/\/ ============================================================\r\n window.addEventListener(\"scroll\", () => {\r\n const nav = $(\"#navbar\");\r\n if (window.scrollY > 60) nav.classList.add(\"scrolled\");\r\n else nav.classList.remove(\"scrolled\");\r\n \/\/ scroll progress\r\n const prog =\r\n (window.scrollY \/\r\n (document.documentElement.scrollHeight - window.innerHeight)) *\r\n 100;\r\n $(\"#scroll-progress\").style.width = prog + \"%\";\r\n \/\/ fab top visibility\r\n if (window.scrollY > 400)\r\n document.getElementById(\"fabTop\")?.classList.add(\"visible\");\r\n else document.getElementById(\"fabTop\")?.classList.remove(\"visible\");\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ HAMBURGER\r\n \/\/ ============================================================\r\n $(\"#hamburger\").addEventListener(\"click\", () => {\r\n const hb = $(\"#hamburger\"),\r\n mn = $(\"#mobileNav\");\r\n hb.classList.toggle(\"active\");\r\n mn.classList.toggle(\"open\");\r\n if (mn.style.display !== \"flex\") mn.style.display = \"flex\";\r\n });\r\n $$(\".mobile-link\").forEach((l) => {\r\n l.addEventListener(\"click\", () => {\r\n $(\"#hamburger\").classList.remove(\"active\");\r\n $(\"#mobileNav\").classList.remove(\"open\");\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ TYPEWRITER\r\n \/\/ ============================================================\r\n const texts = [\r\n \"Frontend Developer\",\r\n \"WordPress Specialist\",\r\n \"Shopify Expert\",\r\n \"UI\/UX Craftsman\",\r\n \"SEO Architect\",\r\n ];\r\n let ti = 0,\r\n ci = 0,\r\n deleting = false;\r\n function type() {\r\n const current = texts[ti];\r\n const el = document.getElementById(\"hero-type-display\");\r\n if (!el) return;\r\n if (!deleting) {\r\n el.textContent = current.slice(0, ci + 1);\r\n ci++;\r\n if (ci === current.length) {\r\n deleting = true;\r\n setTimeout(type, 2000);\r\n return;\r\n }\r\n } else {\r\n el.textContent = current.slice(0, ci - 1);\r\n ci--;\r\n if (ci === 0) {\r\n deleting = false;\r\n ti = (ti + 1) % texts.length;\r\n }\r\n }\r\n setTimeout(type, deleting ? 60 : 110);\r\n }\r\n setTimeout(type, 2500);\r\n\r\n \/\/ ============================================================\r\n \/\/ REVEAL ON SCROLL\r\n \/\/ ============================================================\r\n function initReveal() {\r\n const observer = new IntersectionObserver(\r\n (entries) => {\r\n entries.forEach((e) => {\r\n if (e.isIntersecting) {\r\n e.target.classList.add(\"visible\");\r\n }\r\n });\r\n },\r\n { threshold: 0.12 },\r\n );\r\n $$(\".reveal\").forEach((el) => observer.observe(el));\r\n\r\n \/\/ Skill bars\r\n const skillObserver = new IntersectionObserver(\r\n (entries) => {\r\n entries.forEach((e) => {\r\n if (e.isIntersecting) {\r\n const bar = e.target.querySelector(\".skill-bar\");\r\n const pctEl = e.target.querySelector(\".skill-pct\");\r\n if (bar) {\r\n const w = bar.dataset.width;\r\n setTimeout(() => {\r\n bar.style.width = w + \"%\";\r\n }, 300);\r\n }\r\n if (pctEl) {\r\n const target = parseInt(pctEl.dataset.pct);\r\n let current = 0;\r\n const interval = setInterval(() => {\r\n current += 2;\r\n if (current >= target) {\r\n pctEl.textContent = target + \"%\";\r\n clearInterval(interval);\r\n return;\r\n }\r\n pctEl.textContent = current + \"%\";\r\n }, 20);\r\n }\r\n }\r\n });\r\n },\r\n { threshold: 0.3 },\r\n );\r\n $$(\".skill-card\").forEach((el) => skillObserver.observe(el));\r\n\r\n \/\/ Counters\r\n const counterObserver = new IntersectionObserver(\r\n (entries) => {\r\n entries.forEach((e) => {\r\n if (e.isIntersecting) {\r\n $$(\".counter\", e.target.closest(\"#stats\") || document).forEach(\r\n (c) => {\r\n const target = parseInt(c.dataset.target);\r\n let current = 0;\r\n const step = Math.ceil(target \/ 60);\r\n const interval = setInterval(() => {\r\n current += step;\r\n if (current >= target) {\r\n c.textContent = target;\r\n clearInterval(interval);\r\n return;\r\n }\r\n c.textContent = current;\r\n }, 25);\r\n },\r\n );\r\n counterObserver.disconnect();\r\n }\r\n });\r\n },\r\n { threshold: 0.5 },\r\n );\r\n const stats = $(\"#stats\");\r\n if (stats) counterObserver.observe(stats);\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ PROJECT FILTER\r\n \/\/ ============================================================\r\n $$(\".filter-btn\").forEach((btn) => {\r\n btn.addEventListener(\"click\", () => {\r\n $$(\".filter-btn\").forEach((b) => b.classList.remove(\"active\"));\r\n btn.classList.add(\"active\");\r\n const filter = btn.dataset.filter;\r\n $$(\".project-card\").forEach((card) => {\r\n const cat = card.dataset.category;\r\n if (filter === \"all\" || cat === filter) {\r\n card.classList.remove(\"hidden\");\r\n card.style.display = \"\";\r\n setTimeout(() => {\r\n card.style.opacity = \"1\";\r\n card.style.transform = \"\";\r\n }, 10);\r\n } else {\r\n card.style.opacity = \"0\";\r\n card.style.transform = \"scale(0.95)\";\r\n setTimeout(() => {\r\n card.style.display = \"none\";\r\n }, 400);\r\n }\r\n });\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ CASE STUDY MODALS\r\n \/\/ ============================================================\r\n const caseData = {\r\n azfa: {\r\n label: \"WordPress \u00b7 WooCommerce\",\r\n title: \"AZFA Store\",\r\n client: \"AZFA Store\",\r\n platform: \"WordPress + WooCommerce\",\r\n duration: \"6 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/azfa.store\/\",\r\n desc1:\r\n \"AZFA Store needed a professional WooCommerce store from scratch \u2014 fast, mobile-first, and built to rank on Google. The client required full product management, advanced filtering, and a seamless checkout experience that reduced cart abandonment.\",\r\n desc2:\r\n \"I built a fully custom WordPress theme with WooCommerce integration, lightning-fast page speed using caching and image optimization, structured data for product rich snippets, and a streamlined checkout. Full on-page SEO was implemented across all product and category pages to drive organic traffic from day one.\",\r\n results: [\r\n { num: \"0.9s\", label: \"Page Load Time\" },\r\n { num: \"96\", label: \"Lighthouse Score\" },\r\n { num: \"#1\", label: \"Google Rankings\" },\r\n ],\r\n },\r\n tsb: {\r\n label: \"WordPress \u00b7 Finance \/ Forex\",\r\n title: \"The Signals Bank\",\r\n client: \"The Signals Bank\",\r\n platform: \"WordPress + Membership\",\r\n duration: \"8 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/thesignalsbank.com\/\",\r\n desc1:\r\n \"The Signals Bank is a professional forex signals platform that needed a high-trust, feature-rich website to attract and retain paying subscribers. The site had to handle live signal delivery, user account management, and subscription billing \u2014 all within a secure WordPress environment.\",\r\n desc2:\r\n \"I developed a custom WordPress solution with a full membership system, gated premium content for subscribers, automated signal delivery notifications, and a performance-optimised frontend. The design communicates authority and trust \u2014 essential in the competitive forex space.\",\r\n results: [\r\n { num: \"500+\", label: \"Active Members\" },\r\n { num: \"98\", label: \"Lighthouse Score\" },\r\n { num: \"+180%\", label: \"Organic Traffic\" },\r\n ],\r\n },\r\n autocopy: {\r\n label: \"WordPress \u00b7 FinTech\",\r\n title: \"AutoCopyFX\",\r\n client: \"AutoCopyFX\",\r\n platform: \"WordPress + Custom API\",\r\n duration: \"7 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/autocopyfx.com\/\",\r\n desc1:\r\n \"AutoCopyFX is an automated forex copy-trading service that required a professional platform website to explain their product, onboard new traders, and integrate with MT4\/MT5 trading accounts. The site needed to be both technically impressive and easy to understand for non-technical users.\",\r\n desc2:\r\n \"I built a custom WordPress site with a live account dashboard, MT4\/MT5 copy-trade integration display, detailed feature pages, affiliate tracking system, and a smooth onboarding funnel. Full SEO implementation with schema markup and Core Web Vitals optimisation was included.\",\r\n results: [\r\n { num: \"98\", label: \"Lighthouse Score\" },\r\n { num: \"+220%\", label: \"Lead Conversions\" },\r\n { num: \"1.1s\", label: \"Load Time\" },\r\n ],\r\n },\r\n anasi: {\r\n label: \"Shopify \u00b7 E-Commerce\",\r\n title: \"Anasi Mart\",\r\n client: \"Anasi Mart\",\r\n platform: \"Shopify\",\r\n duration: \"5 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/anasi-mart.myshopify.com\/\",\r\n desc1:\r\n \"Anasi Mart needed a complete Shopify store built from the ground up \u2014 a multi-category e-commerce experience that felt premium, loaded fast, and converted browsers into buyers. The client wanted full control of their product listings, collections, and discount logic.\",\r\n desc2:\r\n \"I delivered a fully custom Shopify theme with an intuitive collection structure, dynamic product pages, an optimised checkout funnel, and mobile-first responsive design. Smart upsell widgets and a sticky cart were added to increase average order value, and full Shopify SEO setup was implemented.\",\r\n results: [\r\n { num: \"+85%\", label: \"Conversion Rate\" },\r\n { num: \"4.9\u2605\", label: \"Store Rating\" },\r\n { num: \"1.2s\", label: \"Mobile Load\" },\r\n ],\r\n },\r\n homify: {\r\n label: \"Shopify \u00b7 Home & Living\",\r\n title: \"Homify Store\",\r\n client: \"Homify\",\r\n platform: \"Shopify\",\r\n duration: \"5 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/homify102.myshopify.com\/\",\r\n desc1:\r\n \"Homify is a home d\u00e9cor and lifestyle brand that required a Shopify store with a warm, premium aesthetic that matched their product quality. The goal was to create an immersive shopping experience that built brand loyalty and encouraged repeat purchases.\",\r\n desc2:\r\n \"I designed and built a custom Shopify theme focused on visual storytelling \u2014 large imagery, curated collection pages, and smooth product discovery. Integrated smart product recommendations, a loyalty-encouraging wishlist feature, and structured data for Google Shopping integration.\",\r\n results: [\r\n { num: \"4.9\u2605\", label: \"Customer Rating\" },\r\n { num: \"+65%\", label: \"Repeat Purchases\" },\r\n { num: \"97\", label: \"Lighthouse Score\" },\r\n ],\r\n },\r\n content1: {\r\n label: \"Content Writing \u00b7 SEO\",\r\n title: \"Broker Affiliate Academy \u2014 SEO Content Strategy\",\r\n client: \"Broker Affiliate Academy\",\r\n platform: \"WordPress Blog + SEO\",\r\n duration: \"Ongoing\",\r\n year: \"2024\u20132025\",\r\n liveUrl: \"https:\/\/broker-affiliate-academy.com\/\",\r\n desc1:\r\n \"Broker Affiliate Academy is a forex education platform that needed a full content strategy to grow organic traffic and establish topical authority in the competitive forex niche. They needed long-form SEO articles, keyword-targeted blog posts, and landing page copy that converted readers into course students.\",\r\n desc2:\r\n \"I developed and executed a complete content calendar targeting high-intent forex and affiliate marketing keywords. Each article was written with E-E-A-T principles, proper internal linking, and semantic SEO structure. The content covered topics from MT4 basics to advanced affiliate strategies \u2014 building a library of 30+ in-depth articles that now rank on page one.\",\r\n results: [\r\n { num: \"+240%\", label: \"Organic Traffic\" },\r\n { num: \"30+\", label: \"Articles Written\" },\r\n { num: \"Page 1\", label: \"Google Rankings\" },\r\n ],\r\n },\r\n };\r\n\r\n function openModal(id) {\r\n const data = caseData[id];\r\n if (!data) return;\r\n const liveBtn = data.liveUrl\r\n ? `<a href=\"${data.liveUrl}\" target=\"_blank\" rel=\"noopener\"\r\n style=\"display:inline-flex;align-items:center;gap:8px;margin-top:16px;\r\n padding:12px 28px;background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));\r\n color:#000;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.15em;\r\n text-transform:uppercase;font-weight:700;border-radius:8px;text-decoration:none;\">\r\n View Live Site \u2197\r\n <\/a>`\r\n : \"\";\r\n const body = `\r\n <div class=\"modal-label\">${data.label}<\/div>\r\n <div class=\"modal-title\">${data.title}<\/div>\r\n <div class=\"modal-meta\">\r\n <div class=\"modal-meta-item\"><strong>${data.client}<\/strong>Client<\/div>\r\n <div class=\"modal-meta-item\"><strong>${data.platform}<\/strong>Platform<\/div>\r\n <div class=\"modal-meta-item\"><strong>${data.duration}<\/strong>Duration<\/div>\r\n <div class=\"modal-meta-item\"><strong>${data.year}<\/strong>Year<\/div>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <p>${data.desc1}<\/p>\r\n <p>${data.desc2}<\/p>\r\n <div class=\"modal-results\">\r\n ${data.results.map((r) => `<div class=\"modal-result\"><div class=\"modal-result-number\">${r.num}<\/div><div class=\"modal-result-label\">${r.label}<\/div><\/div>`).join(\"\")}\r\n <\/div>\r\n ${liveBtn}\r\n <\/div>\r\n `;\r\n $(\"#modalBody\").innerHTML = body;\r\n $(\"#modalOverlay\").classList.add(\"open\");\r\n document.body.style.overflow = \"hidden\";\r\n }\r\n function closeModal(e, force = false) {\r\n if (force || e?.target === $(\"#modalOverlay\")) {\r\n $(\"#modalOverlay\").classList.remove(\"open\");\r\n document.body.style.overflow = \"\";\r\n }\r\n }\r\n document.addEventListener(\"keydown\", (e) => {\r\n if (e.key === \"Escape\") closeModal(null, true);\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ TESTIMONIALS \u2014 CSS infinite marquee, no JS needed\r\n \/\/ ============================================================\r\n\r\n \/\/ ============================================================\r\n \/\/ CONTACT FORM\r\n \/\/ ============================================================\r\n $(\"#contactForm\")?.addEventListener(\"submit\", (e) => {\r\n e.preventDefault();\r\n let valid = true;\r\n const name = $(\"#nameInput\"),\r\n email = $(\"#emailInput\"),\r\n message = $(\"#messageInput\");\r\n const nameErr = $(\"#nameError\"),\r\n emailErr = $(\"#emailError\"),\r\n msgErr = $(\"#messageError\");\r\n nameErr.classList.remove(\"show\");\r\n emailErr.classList.remove(\"show\");\r\n msgErr.classList.remove(\"show\");\r\n if (!name.value.trim()) {\r\n nameErr.classList.add(\"show\");\r\n name.focus();\r\n valid = false;\r\n } else if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email.value)) {\r\n emailErr.classList.add(\"show\");\r\n email.focus();\r\n valid = false;\r\n } else if (!message.value.trim()) {\r\n msgErr.classList.add(\"show\");\r\n message.focus();\r\n valid = false;\r\n }\r\n if (!valid) return;\r\n const btn = e.target.querySelector('[type=\"submit\"]');\r\n btn.textContent = \"Sending...\";\r\n btn.style.opacity = \"0.7\";\r\n\r\n \/\/ Formspree Integration (Sirf yahan se change hai)\r\n const data = new FormData(e.target);\r\n fetch(\"https:\/\/formspree.io\/f\/mreadlae\", {\r\n method: \"POST\",\r\n body: data,\r\n headers: {\r\n Accept: \"application\/json\",\r\n },\r\n })\r\n .then((response) => {\r\n \/\/ Button ko wapis normal karna\r\n btn.textContent = \"Send Message\";\r\n btn.style.opacity = \"1\";\r\n\r\n if (response.ok) {\r\n \/\/ Aapka original success logic\r\n $(\"#formSuccess\").classList.add(\"show\");\r\n e.target.reset();\r\n setTimeout(\r\n () => $(\"#formSuccess\").classList.remove(\"show\"),\r\n 5000,\r\n );\r\n } else {\r\n alert(\"Oops! There was a problem submitting your form\");\r\n }\r\n })\r\n .catch((error) => {\r\n btn.textContent = \"Send Message\";\r\n btn.style.opacity = \"1\";\r\n alert(\"Oops! There was a problem submitting your form\");\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ PARALLAX (subtle)\r\n \/\/ ============================================================\r\n window.addEventListener(\"scroll\", () => {\r\n const sy = window.scrollY;\r\n const floor = document.querySelector(\".hero-grid-floor-inner\");\r\n if (floor)\r\n floor.style.transform = `rotateX(65deg) translateY(${sy * 0.06}px)`;\r\n const orbit = document.querySelector(\".hero-orbit\");\r\n if (orbit) orbit.style.transform = `rotate(${sy * 0.04}deg)`;\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ MAGNETIC BUTTONS\r\n \/\/ ============================================================\r\n $$(\".btn-primary, .btn-outline, .social-btn, .nav-cta\").forEach((btn) => {\r\n btn.addEventListener(\"mousemove\", (e) => {\r\n const r = btn.getBoundingClientRect();\r\n const x = e.clientX - r.left - r.width \/ 2;\r\n const y = e.clientY - r.top - r.height \/ 2;\r\n btn.style.transform = `translate(${x * 0.15}px, ${y * 0.2}px)`;\r\n });\r\n btn.addEventListener(\"mouseleave\", () => {\r\n btn.style.transform = \"\";\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ 3D CARD HOVER\r\n \/\/ ============================================================\r\n $$(\".skill-card, .project-card\").forEach((card) => {\r\n card.addEventListener(\"mousemove\", (e) => {\r\n const r = card.getBoundingClientRect();\r\n const x = (e.clientX - r.left) \/ r.width - 0.5;\r\n const y = (e.clientY - r.top) \/ r.height - 0.5;\r\n card.style.transform = `perspective(800px) rotateY(${x * 8}deg) rotateX(${-y * 8}deg) translateY(-4px)`;\r\n });\r\n card.addEventListener(\"mouseleave\", () => {\r\n card.style.transform = \"\";\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ SCROLL TO TOP + FAB VISIBILITY\r\n \/\/ ============================================================\r\n const fabTop = document.getElementById(\"fabTop\");\r\n if (fabTop) {\r\n fabTop.addEventListener(\"click\", function () {\r\n window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n });\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ SMOOTH SCROLL \u2014 only for real anchor targets, not # placeholders\r\n \/\/ ============================================================\r\n $$('a[href^=\"#\"]').forEach((a) => {\r\n a.addEventListener(\"click\", (e) => {\r\n const href = a.getAttribute(\"href\");\r\n if (!href || href === \"#\") return; \/\/ let onclick handle placeholder links\r\n const target = $(href);\r\n if (target) {\r\n e.preventDefault();\r\n const top = target.offsetTop - 80;\r\n window.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n });\r\n });\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n\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>Anas \u00b7 Frontend Developer ANAS Initializing Experience… AN\u00b7AS About Services Skills Projects Reviews Contact \ud83c\udf19 \u2600\ufe0f Hire Me About Services Skills Projects Reviews Contact Available for New Projects ANAS RAJPUT ANAS RAJPUT Building Fast, SEO Ready, Conversion Focused Websites. WordPress & Shopify Specialist \u00b7 3+ Years delivering premium digital experiences that drive real business growth. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":49,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n \r\n \r\n Anas \u00b7 Frontend Developer<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;700;900&family=Syne:wght@300;400;600;700&family=JetBrains+Mono:wght@300;400&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/*\r\nTheme Name: Anas Portfolio\r\nAuthor: Anas Rajput\r\nDescription: My HTML Portfolio converted to WordPress\r\nVersion: 1.0\r\n*\/\r\n\r\n :root {\r\n --c-bg: #04060f;\r\n --c-surface: #080d1c;\r\n --c-surface2: #0c1227;\r\n --c-border: rgba(0, 245, 255, 0.12);\r\n --c-text: #e8eef8;\r\n --c-muted: #6b7a99;\r\n --c-accent: #00f5ff;\r\n --c-accent2: #9b59ff;\r\n --c-accent3: #ff6b35;\r\n --c-glow: rgba(0, 245, 255, 0.25);\r\n --c-glow2: rgba(155, 89, 255, 0.2);\r\n --font-display: \"Orbitron\", monospace;\r\n --font-body: \"Syne\", sans-serif;\r\n --font-mono: \"JetBrains Mono\", monospace;\r\n --radius: 16px;\r\n --radius-sm: 8px;\r\n --shadow-glow:\r\n 0 0 40px rgba(0, 245, 255, 0.15), 0 0 80px rgba(0, 245, 255, 0.05);\r\n --shadow-card:\r\n 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);\r\n --transition: cubic-bezier(0.16, 1, 0.3, 1);\r\n --dur: 0.7s;\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --c-bg: #f0f4ff;\r\n --c-surface: #ffffff;\r\n --c-surface2: #e8eeff;\r\n --c-border: rgba(0, 100, 200, 0.15);\r\n --c-text: #0a0e1a;\r\n --c-muted: #5a6480;\r\n --c-accent: #0066ff;\r\n --c-accent2: #7b2fff;\r\n --c-accent3: #ff5500;\r\n --c-glow: rgba(0, 102, 255, 0.2);\r\n --c-glow2: rgba(123, 47, 255, 0.15);\r\n --shadow-glow:\r\n 0 0 40px rgba(0, 102, 255, 0.1), 0 0 80px rgba(0, 102, 255, 0.05);\r\n --shadow-card:\r\n 0 8px 32px rgba(0, 50, 180, 0.08),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n \/* ============================================================\r\n RESET & BASE\r\n============================================================ *\/\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: var(--font-body);\r\n background: var(--c-bg);\r\n color: var(--c-text);\r\n overflow-x: hidden;\r\n cursor: none;\r\n transition:\r\n background 0.5s var(--transition),\r\n color 0.5s var(--transition);\r\n }\r\n\r\n \/* Restore normal cursor on interactive elements so they work even when custom cursor fails *\/\r\n a,\r\n button,\r\n input,\r\n textarea,\r\n select,\r\n label,\r\n [role=\"button\"] {\r\n cursor: pointer;\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"email\"],\r\n textarea {\r\n cursor: text;\r\n }\r\n\r\n ::selection {\r\n background: var(--c-accent);\r\n color: #000;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n button {\r\n cursor: pointer;\r\n border: none;\r\n background: none;\r\n font-family: inherit;\r\n }\r\n\r\n img {\r\n display: block;\r\n max-width: 100%;\r\n }\r\n\r\n \/* ============================================================\r\n CUSTOM CURSOR\r\n============================================================ *\/\r\n #cursor-dot {\r\n position: fixed;\r\n width: 8px;\r\n height: 8px;\r\n background: var(--c-accent);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9999;\r\n transform: translate(-50%, -50%);\r\n transition:\r\n transform 0.1s,\r\n background 0.3s;\r\n box-shadow:\r\n 0 0 10px var(--c-accent),\r\n 0 0 20px var(--c-accent);\r\n }\r\n\r\n #cursor-ring {\r\n position: fixed;\r\n width: 36px;\r\n height: 36px;\r\n border: 1.5px solid var(--c-accent);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9998;\r\n transform: translate(-50%, -50%);\r\n transition:\r\n width 0.3s var(--transition),\r\n height 0.3s var(--transition),\r\n border-color 0.3s,\r\n opacity 0.3s;\r\n opacity: 0.6;\r\n }\r\n\r\n #cursor-ring.hovering {\r\n width: 60px;\r\n height: 60px;\r\n border-color: var(--c-accent2);\r\n opacity: 1;\r\n background: rgba(155, 89, 255, 0.08);\r\n }\r\n\r\n \/* ============================================================\r\n PRELOADER\r\n============================================================ *\/\r\n #preloader {\r\n position: fixed;\r\n inset: 0;\r\n background: #020408;\r\n z-index: 99999;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n transition:\r\n opacity 0.8s var(--transition),\r\n visibility 0.8s;\r\n }\r\n\r\n #preloader.done {\r\n opacity: 0;\r\n visibility: hidden;\r\n }\r\n\r\n .preloader-logo {\r\n font-family: var(--font-display);\r\n font-size: clamp(2rem, 6vw, 4rem);\r\n font-weight: 900;\r\n letter-spacing: 0.1em;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: preloaderPulse 1.5s ease-in-out infinite;\r\n }\r\n\r\n .preloader-bar-wrap {\r\n width: 200px;\r\n height: 2px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 2px;\r\n margin-top: 32px;\r\n overflow: hidden;\r\n }\r\n\r\n .preloader-bar {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));\r\n border-radius: 2px;\r\n animation: preloaderBar 1.8s var(--transition) forwards;\r\n }\r\n\r\n .preloader-text {\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.3em;\r\n color: var(--c-muted);\r\n margin-top: 16px;\r\n animation: fadeInUp 0.5s ease 0.3s both;\r\n }\r\n\r\n @keyframes preloaderPulse {\r\n 0%,\r\n 100% {\r\n filter: brightness(1);\r\n }\r\n\r\n 50% {\r\n filter: brightness(1.4);\r\n }\r\n }\r\n\r\n @keyframes preloaderBar {\r\n 0% {\r\n width: 0;\r\n }\r\n\r\n 100% {\r\n width: 100%;\r\n }\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(10px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n CANVAS BACKGROUND\r\n============================================================ *\/\r\n #bg-canvas {\r\n position: fixed;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n opacity: 0.6;\r\n transition: opacity 0.5s;\r\n }\r\n\r\n [data-theme=\"light\"] #bg-canvas {\r\n opacity: 0.25;\r\n }\r\n\r\n \/* ============================================================\r\n NAVIGATION\r\n============================================================ *\/\r\n nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 1000;\r\n padding: 20px 0;\r\n transition:\r\n background 0.4s,\r\n backdrop-filter 0.4s,\r\n padding 0.4s;\r\n }\r\n\r\n nav.scrolled {\r\n background: rgba(4, 6, 15, 0.7);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n padding: 14px 0;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n\r\n [data-theme=\"light\"] nav.scrolled {\r\n background: rgba(240, 244, 255, 0.8);\r\n }\r\n\r\n .nav-inner {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .nav-logo {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: 1.2rem;\r\n letter-spacing: 0.08em;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 36px;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n font-family: var(--font-mono);\r\n font-size: 0.8rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n transition: color 0.3s;\r\n position: relative;\r\n }\r\n\r\n .nav-links a::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n right: 100%;\r\n height: 1px;\r\n background: var(--c-accent);\r\n transition: right 0.3s var(--transition);\r\n }\r\n\r\n .nav-links a:hover {\r\n color: var(--c-text);\r\n }\r\n\r\n .nav-links a:hover::after {\r\n right: 0;\r\n }\r\n\r\n .nav-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n\r\n \/* Theme Toggle *\/\r\n .theme-toggle {\r\n position: relative;\r\n width: 52px;\r\n height: 28px;\r\n background: var(--c-surface2);\r\n border-radius: 14px;\r\n cursor: pointer;\r\n border: 1px solid var(--c-border);\r\n transition: all 0.3s;\r\n }\r\n\r\n .theme-toggle::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 3px;\r\n left: 3px;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n transition: transform 0.4s var(--transition);\r\n box-shadow: 0 0 10px var(--c-glow);\r\n }\r\n\r\n [data-theme=\"light\"] .theme-toggle::before {\r\n transform: translateX(24px);\r\n }\r\n\r\n .theme-icon-sun,\r\n .theme-icon-moon {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 10px;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .theme-icon-sun {\r\n right: 7px;\r\n opacity: 0;\r\n }\r\n\r\n .theme-icon-moon {\r\n left: 7px;\r\n opacity: 1;\r\n }\r\n\r\n [data-theme=\"light\"] .theme-icon-sun {\r\n opacity: 1;\r\n }\r\n\r\n [data-theme=\"light\"] .theme-icon-moon {\r\n opacity: 0;\r\n }\r\n\r\n .nav-cta {\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n padding: 10px 22px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n color: #000 !important;\r\n border-radius: 6px;\r\n font-weight: 700;\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n -webkit-text-fill-color: #000 !important;\r\n }\r\n\r\n .nav-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 30px var(--c-glow);\r\n }\r\n\r\n \/* Hamburger *\/\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n padding: 4px;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 24px;\r\n height: 2px;\r\n background: var(--c-text);\r\n border-radius: 2px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .hamburger.active span:nth-child(1) {\r\n transform: translateY(7px) rotate(45deg);\r\n }\r\n\r\n .hamburger.active span:nth-child(2) {\r\n opacity: 0;\r\n }\r\n\r\n .hamburger.active span:nth-child(3) {\r\n transform: translateY(-7px) rotate(-45deg);\r\n }\r\n\r\n \/* Mobile nav *\/\r\n .mobile-nav {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n top: 70px;\r\n background: rgba(4, 6, 15, 0.97);\r\n backdrop-filter: blur(20px);\r\n z-index: 999;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 32px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.4s;\r\n }\r\n\r\n .mobile-nav.open {\r\n opacity: 1;\r\n pointer-events: all;\r\n }\r\n\r\n .mobile-nav a {\r\n font-family: var(--font-display);\r\n font-size: 1.8rem;\r\n letter-spacing: 0.08em;\r\n color: var(--c-muted);\r\n transition:\r\n color 0.3s,\r\n transform 0.3s;\r\n }\r\n\r\n .mobile-nav a:hover {\r\n color: var(--c-accent);\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* ============================================================\r\n SECTIONS GENERAL\r\n============================================================ *\/\r\n section {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n }\r\n\r\n .section-label {\r\n font-family: var(--font-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.35em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .section-label::before {\r\n content: \"\";\r\n width: 32px;\r\n height: 1px;\r\n background: var(--c-accent);\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(2rem, 4vw, 3.2rem);\r\n font-weight: 900;\r\n letter-spacing: -0.02em;\r\n line-height: 1.1;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .gradient-text {\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-accent) 0%,\r\n var(--c-accent2) 50%,\r\n var(--c-accent3) 100%\r\n );\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 1.05rem;\r\n color: var(--c-muted);\r\n line-height: 1.7;\r\n max-width: 560px;\r\n }\r\n\r\n \/* Reveal animations *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition:\r\n opacity 0.8s var(--transition),\r\n transform 0.8s var(--transition);\r\n }\r\n\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n\r\n .reveal-delay-1 {\r\n transition-delay: 0.1s;\r\n }\r\n\r\n .reveal-delay-2 {\r\n transition-delay: 0.2s;\r\n }\r\n\r\n .reveal-delay-3 {\r\n transition-delay: 0.3s;\r\n }\r\n\r\n .reveal-delay-4 {\r\n transition-delay: 0.4s;\r\n }\r\n\r\n \/* ============================================================\r\n HERO SECTION\r\n============================================================ *\/\r\n \/* ============================================================\r\n HERO \u2014 HOLOGRAPHIC HUD + SPLIT LAYOUT (MERGED)\r\n============================================================ *\/\r\n #hero {\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n padding: 110px 0 90px;\r\n }\r\n\r\n \/* ---- Perspective Grid Floor ---- *\/\r\n .hero-grid-floor {\r\n position: absolute;\r\n bottom: 0;\r\n left: -20%;\r\n right: -20%;\r\n height: 55%;\r\n pointer-events: none;\r\n z-index: 0;\r\n perspective: 300px;\r\n }\r\n\r\n .hero-grid-floor-inner {\r\n width: 100%;\r\n height: 100%;\r\n background-image:\r\n linear-gradient(rgba(0, 245, 255, 0.1) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 245, 255, 0.1) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n transform: rotateX(65deg) translateY(0px);\r\n transform-origin: bottom center;\r\n mask-image: linear-gradient(to top, black 0%, transparent 80%);\r\n -webkit-mask-image: linear-gradient(to top, black 0%, transparent 80%);\r\n animation: gridPulse 4s ease-in-out infinite;\r\n }\r\n\r\n [data-theme=\"light\"] .hero-grid-floor-inner {\r\n background-image:\r\n linear-gradient(rgba(0, 100, 255, 0.08) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 100, 255, 0.08) 1px, transparent 1px);\r\n }\r\n\r\n @keyframes gridPulse {\r\n 0%,\r\n 100% {\r\n opacity: 0.6;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- Scanline sweep ---- *\/\r\n .hero-scanline {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 1;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-scanline::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(0, 245, 255, 0.45),\r\n rgba(0, 245, 255, 0.75),\r\n rgba(0, 245, 255, 0.45),\r\n transparent\r\n );\r\n animation: scanMove 7s linear infinite;\r\n box-shadow:\r\n 0 0 20px rgba(0, 245, 255, 0.35),\r\n 0 0 40px rgba(0, 245, 255, 0.12);\r\n }\r\n\r\n @keyframes scanMove {\r\n 0% {\r\n top: -2px;\r\n opacity: 0;\r\n }\r\n\r\n 5% {\r\n opacity: 1;\r\n }\r\n\r\n 95% {\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n top: 100%;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* ---- HUD Corner brackets ---- *\/\r\n .hero-hud-tl,\r\n .hero-hud-tr,\r\n .hero-hud-bl,\r\n .hero-hud-br {\r\n position: absolute;\r\n width: 50px;\r\n height: 50px;\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n .hero-hud-tl {\r\n top: 24px;\r\n left: 32px;\r\n border-top: 2px solid var(--c-accent);\r\n border-left: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-tr {\r\n top: 24px;\r\n right: 32px;\r\n border-top: 2px solid var(--c-accent);\r\n border-right: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-bl {\r\n bottom: 24px;\r\n left: 32px;\r\n border-bottom: 2px solid var(--c-accent);\r\n border-left: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-br {\r\n bottom: 24px;\r\n right: 32px;\r\n border-bottom: 2px solid var(--c-accent);\r\n border-right: 2px solid var(--c-accent);\r\n }\r\n\r\n .hero-hud-tl::after,\r\n .hero-hud-tr::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 4px;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n box-shadow: 0 0 10px var(--c-accent);\r\n }\r\n\r\n .hero-hud-tl::after {\r\n right: -3px;\r\n }\r\n\r\n .hero-hud-tr::after {\r\n left: -3px;\r\n }\r\n\r\n .hero-hud-bl::before,\r\n .hero-hud-br::before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 4px;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent2);\r\n box-shadow: 0 0 10px var(--c-accent2);\r\n }\r\n\r\n .hero-hud-bl::before {\r\n right: -3px;\r\n }\r\n\r\n .hero-hud-br::before {\r\n left: -3px;\r\n }\r\n\r\n .hero-hud-label-tl {\r\n position: absolute;\r\n top: 30px;\r\n left: 94px;\r\n z-index: 2;\r\n font-family: var(--font-mono);\r\n font-size: 0.58rem;\r\n letter-spacing: 0.25em;\r\n color: var(--c-accent);\r\n opacity: 0.65;\r\n animation: hudBlink 3s ease-in-out infinite;\r\n }\r\n\r\n .hero-hud-label-tr {\r\n position: absolute;\r\n top: 30px;\r\n right: 94px;\r\n z-index: 2;\r\n font-family: var(--font-mono);\r\n font-size: 0.58rem;\r\n letter-spacing: 0.25em;\r\n color: var(--c-muted);\r\n opacity: 0.65;\r\n text-align: right;\r\n }\r\n\r\n @keyframes hudBlink {\r\n 0%,\r\n 100% {\r\n opacity: 0.65;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- Neon beams ---- *\/\r\n .hero-beam {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 0;\r\n height: 1px;\r\n animation: beamFade 5s ease-in-out infinite;\r\n }\r\n\r\n .hero-beam-1 {\r\n top: 28%;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent 0%,\r\n rgba(0, 245, 255, 0.12) 30%,\r\n rgba(0, 245, 255, 0.35) 50%,\r\n rgba(0, 245, 255, 0.12) 70%,\r\n transparent 100%\r\n );\r\n }\r\n\r\n .hero-beam-2 {\r\n top: 68%;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent 0%,\r\n rgba(155, 89, 255, 0.1) 30%,\r\n rgba(155, 89, 255, 0.28) 50%,\r\n rgba(155, 89, 255, 0.1) 70%,\r\n transparent 100%\r\n );\r\n animation-delay: 2.5s;\r\n }\r\n\r\n @keyframes beamFade {\r\n 0%,\r\n 100% {\r\n opacity: 0.3;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- TWO-COLUMN HERO LAYOUT ---- *\/\r\n .hero-inner {\r\n position: relative;\r\n z-index: 4;\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n \/* ---- LEFT: Content ---- *\/\r\n .hero-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n \/* Status badge *\/\r\n .hero-status {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 6px 18px;\r\n border: 1px solid rgba(0, 245, 255, 0.22);\r\n border-radius: 99px;\r\n background: rgba(0, 245, 255, 0.05);\r\n backdrop-filter: blur(10px);\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n margin-bottom: 28px;\r\n animation: fadeInDown 0.6s ease 0.3s both;\r\n }\r\n\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-14px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n\r\n .hero-status-dot {\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n animation: pulseDot 2s ease infinite;\r\n box-shadow: 0 0 0 0 var(--c-glow);\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%,\r\n 100% {\r\n box-shadow: 0 0 0 0 var(--c-glow);\r\n }\r\n\r\n 50% {\r\n box-shadow: 0 0 0 6px transparent;\r\n }\r\n }\r\n\r\n \/* Glitch Name \u2014 left-aligned, slightly smaller *\/\r\n .hero-glitch-wrap {\r\n position: relative;\r\n margin-bottom: 10px;\r\n animation: fadeInUp 0.7s ease 0.45s both;\r\n isolation: isolate;\r\n }\r\n\r\n .hero-glitch-name {\r\n font-family: var(--font-display);\r\n font-size: clamp(4rem, 9vw, 8rem);\r\n font-weight: 900;\r\n letter-spacing: -0.04em;\r\n line-height: 0.9;\r\n color: transparent;\r\n -webkit-text-stroke: 1.5px rgba(0, 245, 255, 0.5);\r\n position: relative;\r\n user-select: none;\r\n }\r\n\r\n .hero-glitch-name::before {\r\n content: \"ANAS\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-text) 0%,\r\n var(--c-accent) 45%,\r\n var(--c-accent2) 75%,\r\n var(--c-text) 100%\r\n );\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n background-size: 200% 200%;\r\n animation: nameShimmer 4s ease-in-out infinite;\r\n }\r\n\r\n .hero-glitch-name::after {\r\n content: \"ANAS\";\r\n position: absolute;\r\n inset: 0;\r\n color: var(--c-accent);\r\n clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);\r\n animation: glitchSlice 9s step-end infinite;\r\n opacity: 0.7;\r\n }\r\n\r\n @keyframes nameShimmer {\r\n 0% {\r\n background-position: 0% 50%;\r\n }\r\n\r\n 50% {\r\n background-position: 100% 50%;\r\n }\r\n\r\n 100% {\r\n background-position: 0% 50%;\r\n }\r\n }\r\n\r\n @keyframes glitchSlice {\r\n 0%,\r\n 85%,\r\n 100% {\r\n transform: none;\r\n opacity: 0;\r\n }\r\n\r\n 86% {\r\n transform: translateX(-4px);\r\n opacity: 0.8;\r\n clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);\r\n }\r\n\r\n 88% {\r\n transform: translateX(4px);\r\n opacity: 0.6;\r\n clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);\r\n }\r\n\r\n 90% {\r\n transform: translateX(-2px);\r\n opacity: 0.7;\r\n clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%);\r\n }\r\n\r\n 92% {\r\n transform: none;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n .hero-glitch-shadow {\r\n position: absolute;\r\n inset: 0;\r\n font-family: var(--font-display);\r\n font-size: clamp(4rem, 9vw, 8rem);\r\n font-weight: 900;\r\n letter-spacing: -0.04em;\r\n line-height: 0.9;\r\n color: var(--c-accent2);\r\n opacity: 0;\r\n pointer-events: none;\r\n animation: glitchShadow 9s step-end infinite;\r\n }\r\n\r\n @keyframes glitchShadow {\r\n 0%,\r\n 83%,\r\n 100% {\r\n opacity: 0;\r\n transform: none;\r\n }\r\n\r\n 84% {\r\n opacity: 0.35;\r\n transform: translateX(5px) skewX(-3deg);\r\n }\r\n\r\n 86% {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* Role typewriter *\/\r\n .hero-role-line {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 24px;\r\n animation: fadeInUp 0.7s ease 0.6s both;\r\n }\r\n\r\n .hero-role-sep {\r\n width: 32px;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, var(--c-accent));\r\n }\r\n\r\n .hero-role-sep-r {\r\n width: 32px;\r\n height: 1px;\r\n background: linear-gradient(90deg, var(--c-accent), transparent);\r\n }\r\n\r\n .hero-role-text {\r\n font-family: var(--font-mono);\r\n font-size: clamp(0.68rem, 1.4vw, 0.88rem);\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n }\r\n\r\n #hero-type-display {\r\n color: var(--c-accent);\r\n min-width: 180px;\r\n display: inline-block;\r\n }\r\n\r\n \/* Tagline *\/\r\n .hero-tag-line {\r\n font-size: clamp(0.88rem, 1.5vw, 1rem);\r\n color: var(--c-muted);\r\n line-height: 1.75;\r\n max-width: 480px;\r\n margin-bottom: 40px;\r\n animation: fadeInUp 0.7s ease 0.75s both;\r\n }\r\n\r\n .hero-tag-line strong {\r\n color: var(--c-text);\r\n font-weight: 600;\r\n }\r\n\r\n \/* CTA group *\/\r\n .hero-cta-group {\r\n display: flex;\r\n gap: 14px;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.7s ease 0.9s both;\r\n }\r\n\r\n \/* ---- RIGHT: Visual \/ Orb ---- *\/\r\n \/* --- 1. MAIN CONTAINER & ANIMATIONS --- *\/\r\n .hero-visual {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n animation: fadeInRight 0.8s ease 0.5s both;\r\n }\r\n\r\n @keyframes fadeInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(40px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n\r\n .hero-orb-container {\r\n position: relative;\r\n width: 440px;\r\n height: 440px;\r\n }\r\n\r\n \/* Ambient glow (Background layer) *\/\r\n .hero-orb {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(\r\n circle at 35% 35%,\r\n var(--c-accent2) 0%,\r\n transparent 55%\r\n ),\r\n radial-gradient(\r\n circle at 65% 65%,\r\n var(--c-accent) 0%,\r\n transparent 55%\r\n );\r\n opacity: 0.14;\r\n animation: orbPulse 6s ease-in-out infinite;\r\n filter: blur(44px);\r\n z-index: 0;\r\n }\r\n\r\n @keyframes orbPulse {\r\n 0%,\r\n 100% {\r\n transform: scale(1) rotate(0deg);\r\n opacity: 0.14;\r\n }\r\n\r\n 33% {\r\n transform: scale(1.12) rotate(120deg);\r\n opacity: 0.2;\r\n }\r\n\r\n 66% {\r\n transform: scale(0.94) rotate(240deg);\r\n opacity: 0.14;\r\n }\r\n }\r\n\r\n \/* --- 2. ORBITAL RINGS (Back Layers) --- *\/\r\n .hero-orb-ring,\r\n .hero-orb-ring-2,\r\n .hero-orb-ring-3 {\r\n position: absolute;\r\n border-radius: 50%;\r\n z-index: 1;\r\n \/* Image ke peeche rahein gi *\/\r\n }\r\n\r\n .hero-orb-ring {\r\n inset: 10px;\r\n border: 1px solid rgba(0, 245, 255, 0.18);\r\n animation: spinRing 22s linear infinite;\r\n }\r\n\r\n .hero-orb-ring::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -5px;\r\n left: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n transform: translateX(-50%);\r\n box-shadow:\r\n 0 0 16px var(--c-accent),\r\n 0 0 32px rgba(0, 245, 255, 0.5);\r\n }\r\n\r\n .hero-orb-ring-2 {\r\n inset: 36px;\r\n border: 1px solid rgba(155, 89, 255, 0.2);\r\n animation: spinRing 15s linear infinite reverse;\r\n }\r\n\r\n .hero-orb-ring-2::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -5px;\r\n left: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: var(--c-accent2);\r\n transform: translateX(-50%);\r\n box-shadow:\r\n 0 0 16px var(--c-accent2),\r\n 0 0 32px rgba(155, 89, 255, 0.5);\r\n }\r\n\r\n .hero-orb-ring-3 {\r\n inset: 56px;\r\n border: 1px dashed rgba(255, 107, 53, 0.2);\r\n animation: spinRing 10s linear infinite;\r\n }\r\n\r\n @keyframes spinRing {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* --- 3. CENTER CIRCLE FRAME (Middle Layer) --- *\/\r\n .hero-avatar-wrap {\r\n position: absolute;\r\n inset: 65px;\r\n \/* Yeh aapka center circle frame hai *\/\r\n border-radius: 50%;\r\n border: 1px solid rgba(0, 245, 255, 0.2);\r\n z-index: 2;\r\n \/* Rings ke upar *\/\r\n box-shadow: 0 0 40px rgba(0, 245, 255, 0.12);\r\n overflow: visible;\r\n \/* Head bahar nikalne ke liye visible hona zaroori hai *\/\r\n }\r\n\r\n \/* HUD Lines on Frame *\/\r\n .hero-avatar-wrap::before,\r\n .hero-avatar-wrap::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n opacity: 0.5;\r\n z-index: 3;\r\n }\r\n\r\n .hero-avatar-wrap::before {\r\n top: 0;\r\n height: 2px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent),\r\n transparent\r\n );\r\n }\r\n\r\n .hero-avatar-wrap::after {\r\n bottom: 0;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent2),\r\n transparent\r\n );\r\n }\r\n\r\n \/* --- 4. THE POP-OUT AVATAR (Top Layer) --- *\/\r\n .avatar-letter {\r\n position: absolute;\r\n \/* 65px inset means circle bottom is at 65px height *\/\r\n bottom: 65px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n\r\n \/* Circle ka size roughly 310px (440 - 65 - 65) *\/\r\n width: 310px;\r\n height: auto;\r\n z-index: 10;\r\n \/* Sab se upar taake head bahar pop-out ho *\/\r\n\r\n \/* Magic mask: Niche se circle ke mutabiq cut-out, upar se khula *\/\r\n clip-path: ellipse(100% 100% at 50% 100%);\r\n\r\n pointer-events: none;\r\n display: block;\r\n }\r\n\r\n \/* --- 5. TECH BADGES (Aapka Original) --- *\/\r\n .hero-tech-badges {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 20;\r\n }\r\n\r\n .tech-badge {\r\n position: absolute;\r\n padding: 6px 14px;\r\n background: rgba(8, 13, 28, 0.85);\r\n border: 1px solid var(--c-border);\r\n border-radius: 99px;\r\n font-family: var(--font-mono);\r\n font-size: 0.66rem;\r\n color: var(--c-muted);\r\n backdrop-filter: blur(12px);\r\n white-space: nowrap;\r\n animation: techFloat 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes techFloat {\r\n 0%,\r\n 100% {\r\n transform: translateY(0);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-8px);\r\n }\r\n }\r\n\r\n \/* Badge Positionings *\/\r\n .tech-badge:nth-child(1) {\r\n top: 2%;\r\n left: -8%;\r\n }\r\n\r\n .tech-badge:nth-child(2) {\r\n top: 12%;\r\n right: -12%;\r\n }\r\n\r\n .tech-badge:nth-child(3) {\r\n bottom: 18%;\r\n right: -10%;\r\n }\r\n\r\n .tech-badge:nth-child(4) {\r\n bottom: 2%;\r\n left: -4%;\r\n }\r\n\r\n .tech-badge:nth-child(5) {\r\n top: 48%;\r\n left: -18%;\r\n }\r\n\r\n \/* Scroll indicator *\/\r\n .hero-scroll {\r\n position: absolute;\r\n bottom: 32px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n animation: fadeInUp 1s ease 1.4s both;\r\n z-index: 4;\r\n }\r\n\r\n .hero-scroll span {\r\n font-family: var(--font-mono);\r\n font-size: 0.6rem;\r\n letter-spacing: 0.35em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n }\r\n\r\n .scroll-line {\r\n width: 1px;\r\n height: 48px;\r\n background: linear-gradient(180deg, var(--c-accent), transparent);\r\n animation: scrollLine 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes scrollLine {\r\n 0% {\r\n opacity: 1;\r\n transform: scaleY(1) translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: scaleY(1) translateY(20px);\r\n }\r\n }\r\n\r\n .typewriter-cursor {\r\n display: inline-block;\r\n width: 2px;\r\n height: 0.9em;\r\n background: var(--c-accent);\r\n vertical-align: middle;\r\n margin-left: 3px;\r\n animation: blink 1s step-end infinite;\r\n }\r\n\r\n @keyframes blink {\r\n 0%,\r\n 100% {\r\n opacity: 1;\r\n }\r\n\r\n 50% {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1024px) {\r\n .hero-inner {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n\r\n .hero-content {\r\n align-items: center;\r\n }\r\n\r\n .hero-tag-line {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .hero-orb-container {\r\n width: 340px;\r\n height: 340px;\r\n }\r\n\r\n .hero-avatar-wrap {\r\n \/* Inset ko thora kam kiya taake pic badi ho sake *\/\r\n inset: 50px;\r\n overflow: visible;\r\n }\r\n\r\n \/* Image sizing for Tablet *\/\r\n .avatar-letter {\r\n bottom: 50px;\r\n \/* Inset ke barabar *\/\r\n width: 250px;\r\n \/* Size barha diya gaya hai *\/\r\n clip-path: ellipse(110% 100% at 50% 100%);\r\n }\r\n\r\n .hero-hud-tl,\r\n .hero-hud-tr,\r\n .hero-hud-bl,\r\n .hero-hud-br,\r\n .hero-hud-label-tl,\r\n .hero-hud-label-tr {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .hero-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .hero-orb-container {\r\n width: 280px;\r\n \/* Container chota kiya *\/\r\n height: 280px;\r\n }\r\n\r\n .hero-avatar-wrap {\r\n \/* Mobile par inset kam rakha taake circle bada rahe *\/\r\n inset: 40px;\r\n overflow: visible;\r\n }\r\n\r\n \/* Image sizing for Mobile *\/\r\n .avatar-letter {\r\n bottom: 40px;\r\n \/* Inset ke barabar *\/\r\n width: 210px;\r\n \/* Mobile screen ke hisab se best size *\/\r\n clip-path: ellipse(120% 100% at 50% 100%);\r\n }\r\n\r\n .hero-orb-ring-3 {\r\n display: none;\r\n }\r\n\r\n .tech-badge:nth-child(5) {\r\n display: none;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n BUTTON SYSTEM \u2014 Primary, Outline, All States\r\n (used across Hero, Services, Projects, Contact, Nav)\r\n============================================================ *\/\r\n\r\n \/* ---- PRIMARY: gradient fill, black text ---- *\/\r\n .btn-primary {\r\n position: relative;\r\n overflow: hidden;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 14px 32px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n color: #000 !important;\r\n -webkit-text-fill-color: #000 !important;\r\n font-family: var(--font-mono);\r\n font-size: 0.8rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n border-radius: 8px;\r\n border: none;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-primary::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(255, 255, 255, 0.18),\r\n transparent\r\n );\r\n transform: translateX(-100%);\r\n transition: transform 0.4s var(--transition);\r\n }\r\n\r\n .btn-primary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow:\r\n 0 12px 40px var(--c-glow),\r\n 0 4px 16px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .btn-primary:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* ---- OUTLINE: transparent bg, accent border ---- *\/\r\n .btn-outline {\r\n position: relative;\r\n overflow: hidden;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 13px 32px;\r\n background: rgba(0, 0, 0, 0.25);\r\n color: var(--c-text);\r\n font-family: var(--font-mono);\r\n font-size: 0.8rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n border-radius: 8px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n text-decoration: none;\r\n cursor: pointer;\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition:\r\n border-color 0.3s,\r\n color 0.3s,\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s,\r\n background 0.3s;\r\n white-space: nowrap;\r\n }\r\n\r\n [data-theme=\"light\"] .btn-outline {\r\n background: rgba(255, 255, 255, 0.7);\r\n border-color: var(--c-border);\r\n color: var(--c-text);\r\n }\r\n\r\n .btn-outline::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .btn-outline:hover::before {\r\n opacity: 0.08;\r\n }\r\n\r\n .btn-outline:hover {\r\n border-color: var(--c-accent);\r\n color: var(--c-accent);\r\n transform: translateY(-3px);\r\n box-shadow:\r\n 0 12px 40px var(--c-glow),\r\n 0 4px 16px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .btn-outline:active {\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* Keep text on top of the ::before overlay *\/\r\n .btn-outline > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-primary > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ---- Submit \/ Form button variant ---- *\/\r\n button.btn-primary[type=\"submit\"],\r\n button.btn-primary {\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-accent),\r\n var(--c-accent2)\r\n ) !important;\r\n color: #000 !important;\r\n -webkit-text-fill-color: #000 !important;\r\n border: none !important;\r\n }\r\n\r\n button.btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 40px var(--c-glow) !important;\r\n }\r\n\r\n \/* ---- Light mode overrides ---- *\/\r\n [data-theme=\"light\"] .btn-primary {\r\n color: #000 !important;\r\n -webkit-text-fill-color: #000 !important;\r\n }\r\n\r\n \/* ---- Global safety: prevent gradient text from bleeding into buttons ---- *\/\r\n .btn-primary,\r\n .btn-primary span,\r\n .btn-outline span,\r\n .nav-cta,\r\n button[type=\"submit\"] {\r\n -webkit-text-fill-color: initial;\r\n }\r\n\r\n .btn-primary,\r\n .btn-primary span,\r\n .nav-cta,\r\n button[type=\"submit\"] {\r\n -webkit-text-fill-color: #000 !important;\r\n color: #000 !important;\r\n }\r\n\r\n .btn-outline span {\r\n -webkit-text-fill-color: inherit;\r\n color: inherit;\r\n }\r\n\r\n \/* ============================================================\r\n STATS SECTION\r\n============================================================ *\/\r\n #stats {\r\n padding: 80px 0;\r\n border-top: 1px solid var(--c-border);\r\n border-bottom: 1px solid var(--c-border);\r\n background: var(--c-surface);\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 1px;\r\n background: var(--c-border);\r\n }\r\n\r\n .stat-item {\r\n padding: 48px 40px;\r\n background: var(--c-surface);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n transition: background 0.3s;\r\n }\r\n\r\n .stat-item:hover {\r\n background: var(--c-surface2);\r\n }\r\n\r\n .stat-item::before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));\r\n transition: width 0.4s var(--transition);\r\n }\r\n\r\n .stat-item:hover::before {\r\n width: 80%;\r\n }\r\n\r\n .stat-number {\r\n font-family: var(--font-display);\r\n font-size: clamp(2.5rem, 5vw, 3.5rem);\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: -0.02em;\r\n line-height: 1;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.85rem;\r\n color: var(--c-muted);\r\n margin-top: 10px;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .stat-plus {\r\n color: var(--c-accent3);\r\n }\r\n\r\n \/* ============================================================\r\n ABOUT SECTION\r\n============================================================ *\/\r\n #about {\r\n padding: 120px 0;\r\n }\r\n\r\n .about-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n\r\n .about-visual {\r\n position: relative;\r\n }\r\n\r\n .about-image-frame {\r\n position: relative;\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-surface),\r\n var(--c-surface2)\r\n );\r\n border: 1px solid var(--c-border);\r\n aspect-ratio: 4\/5;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .about-avatar-bg {\r\n width: 100%;\r\n height: 100%;\r\n background:\r\n radial-gradient(\r\n circle at 30% 30%,\r\n rgba(0, 245, 255, 0.08) 0%,\r\n transparent 50%\r\n ),\r\n radial-gradient(\r\n circle at 70% 70%,\r\n rgba(155, 89, 255, 0.08) 0%,\r\n transparent 50%\r\n );\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-size: 8rem;\r\n font-weight: 900;\r\n }\r\n\r\n .about-avatar-bg img {\r\n max-width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n margin-top: 90px;\r\n }\r\n\r\n .about-frame-deco {\r\n position: absolute;\r\n inset: -20px;\r\n border: 1px solid var(--c-border);\r\n border-radius: calc(var(--radius) + 20px);\r\n pointer-events: none;\r\n z-index: -1;\r\n }\r\n\r\n .about-badges {\r\n position: absolute;\r\n right: -30px;\r\n top: 40px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .about-badge {\r\n padding: 10px 16px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n backdrop-filter: blur(10px);\r\n font-size: 0.8rem;\r\n font-family: var(--font-mono);\r\n color: var(--c-muted);\r\n white-space: nowrap;\r\n box-shadow: var(--shadow-card);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .about-badge-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n }\r\n\r\n .about-text p {\r\n color: var(--c-muted);\r\n line-height: 1.8;\r\n font-size: 1.02rem;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .about-text p strong {\r\n color: var(--c-text);\r\n font-weight: 600;\r\n }\r\n\r\n .about-values {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n margin-top: 32px;\r\n }\r\n\r\n .about-value {\r\n padding: 16px 20px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n font-size: 0.85rem;\r\n font-family: var(--font-mono);\r\n color: var(--c-text);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n transition:\r\n border-color 0.3s,\r\n background 0.3s;\r\n }\r\n\r\n .about-value:hover {\r\n border-color: var(--c-accent);\r\n background: rgba(0, 245, 255, 0.04);\r\n }\r\n\r\n .about-value-icon {\r\n color: var(--c-accent);\r\n font-size: 1.1rem;\r\n }\r\n\r\n \/* ============================================================\r\n SKILLS SECTION\r\n============================================================ *\/\r\n #skills {\r\n padding: 120px 0;\r\n background: var(--c-surface);\r\n }\r\n\r\n .skills-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n margin-bottom: 64px;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n }\r\n\r\n .skills-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .skill-card {\r\n padding: 32px 28px;\r\n background: var(--c-bg);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius);\r\n transition:\r\n border-color 0.3s,\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .skill-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(0, 245, 255, 0.04),\r\n rgba(155, 89, 255, 0.04)\r\n );\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .skill-card:hover {\r\n border-color: var(--c-accent);\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-glow);\r\n }\r\n\r\n .skill-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .skill-card-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .skill-icon {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 10px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.3rem;\r\n }\r\n\r\n .skill-pct {\r\n font-family: var(--font-display);\r\n font-size: 1.6rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .skill-name {\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .skill-desc {\r\n font-size: 0.78rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n letter-spacing: 0.05em;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .skill-bar-wrap {\r\n height: 4px;\r\n background: var(--c-surface);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .skill-bar {\r\n height: 100%;\r\n border-radius: 2px;\r\n background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));\r\n width: 0%;\r\n transition: width 1.5s var(--transition);\r\n position: relative;\r\n }\r\n\r\n .skill-bar::after {\r\n content: \"\";\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n box-shadow: 0 0 10px var(--c-accent);\r\n }\r\n\r\n \/* ============================================================\r\n PROJECTS SECTION\r\n============================================================ *\/\r\n #projects {\r\n padding: 120px 0;\r\n }\r\n\r\n .filter-bar {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .filter-btn {\r\n padding: 8px 20px;\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n border-radius: 6px;\r\n border: 1px solid var(--c-border);\r\n background: var(--c-surface);\r\n color: var(--c-muted);\r\n transition: all 0.3s;\r\n }\r\n\r\n .filter-btn:hover,\r\n .filter-btn.active {\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n border-color: transparent;\r\n color: #000;\r\n font-weight: 700;\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .project-card {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n transition:\r\n transform 0.4s var(--transition),\r\n box-shadow 0.4s,\r\n opacity 0.4s;\r\n cursor: default;\r\n }\r\n\r\n .project-card.hidden {\r\n opacity: 0;\r\n transform: scale(0.95);\r\n pointer-events: none;\r\n display: none;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow:\r\n 0 24px 60px rgba(0, 0, 0, 0.5),\r\n 0 0 0 1px var(--c-border);\r\n }\r\n\r\n .project-thumb {\r\n aspect-ratio: 16\/10;\r\n background: linear-gradient(135deg, var(--c-surface2), var(--c-bg));\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n }\r\n\r\n \/* Website screenshot inside thumb \u2014 scrolls top\u2192bottom on hover *\/\r\n .project-thumb-img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 220%;\r\n \/* taller than thumb so it can scroll *\/\r\n object-fit: cover;\r\n object-position: top center;\r\n top: 0;\r\n transform: translateY(0);\r\n transition: transform 4s ease;\r\n pointer-events: none;\r\n display: block;\r\n }\r\n\r\n .project-card:hover .project-thumb-img {\r\n transform: translateY(-54.5%);\r\n \/* scroll to bottom *\/\r\n }\r\n\r\n \/* Fallback emoji shown when no image *\/\r\n .project-thumb-emoji {\r\n position: relative;\r\n z-index: 1;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .project-thumb:has(.project-thumb-img) .project-thumb-emoji {\r\n display: none;\r\n }\r\n\r\n .project-thumb-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(4, 6, 15, 0.75);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n gap: 12px;\r\n z-index: 2;\r\n backdrop-filter: blur(2px);\r\n }\r\n\r\n .project-card:hover .project-thumb-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .project-body {\r\n padding: 24px;\r\n }\r\n\r\n .project-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 6px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .project-tag {\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n padding: 3px 10px;\r\n background: rgba(0, 245, 255, 0.08);\r\n border: 1px solid rgba(0, 245, 255, 0.15);\r\n border-radius: 99px;\r\n color: var(--c-accent);\r\n }\r\n\r\n .project-tag.purple {\r\n background: rgba(155, 89, 255, 0.08);\r\n border-color: rgba(155, 89, 255, 0.15);\r\n color: var(--c-accent2);\r\n }\r\n\r\n .project-tag.orange {\r\n background: rgba(255, 107, 53, 0.08);\r\n border-color: rgba(255, 107, 53, 0.15);\r\n color: var(--c-accent3);\r\n }\r\n\r\n .project-title {\r\n font-family: var(--font-display);\r\n font-size: 1rem;\r\n font-weight: 700;\r\n letter-spacing: 0.02em;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .project-desc {\r\n font-size: 0.85rem;\r\n color: var(--c-muted);\r\n line-height: 1.65;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .project-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .project-link {\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.1em;\r\n color: var(--c-accent);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n text-transform: uppercase;\r\n transition: gap 0.2s;\r\n }\r\n\r\n .project-link:hover {\r\n gap: 10px;\r\n }\r\n\r\n .project-metrics {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n color: var(--c-muted);\r\n }\r\n\r\n \/* ============================================================\r\n CASE STUDY MODAL\r\n============================================================ *\/\r\n .modal-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n backdrop-filter: blur(10px);\r\n z-index: 9000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 40px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.4s;\r\n }\r\n\r\n .modal-overlay.open {\r\n opacity: 1;\r\n pointer-events: all;\r\n }\r\n\r\n .modal {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: calc(var(--radius) * 1.5);\r\n max-width: 700px;\r\n width: 100%;\r\n max-height: 80vh;\r\n overflow-y: auto;\r\n padding: 48px;\r\n transform: scale(0.9) translateY(30px);\r\n transition: transform 0.4s var(--transition);\r\n position: relative;\r\n }\r\n\r\n .modal-overlay.open .modal {\r\n transform: none;\r\n }\r\n\r\n .modal-close {\r\n position: absolute;\r\n top: 24px;\r\n right: 24px;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.1rem;\r\n color: var(--c-muted);\r\n transition:\r\n color 0.2s,\r\n background 0.2s;\r\n }\r\n\r\n .modal-close:hover {\r\n color: var(--c-text);\r\n background: var(--c-border);\r\n }\r\n\r\n .modal-label {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n margin-bottom: 16px;\r\n }\r\n\r\n .modal-title {\r\n font-family: var(--font-display);\r\n font-size: 1.8rem;\r\n font-weight: 900;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .modal-meta {\r\n display: flex;\r\n gap: 24px;\r\n flex-wrap: wrap;\r\n margin-bottom: 32px;\r\n padding-bottom: 32px;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n\r\n .modal-meta-item {\r\n font-size: 0.85rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n }\r\n\r\n .modal-meta-item strong {\r\n color: var(--c-text);\r\n display: block;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .modal-body p {\r\n color: var(--c-muted);\r\n line-height: 1.8;\r\n margin-bottom: 20px;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .modal-results {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 16px;\r\n margin-top: 32px;\r\n }\r\n\r\n .modal-result {\r\n padding: 16px;\r\n background: var(--c-surface2);\r\n border-radius: var(--radius-sm);\r\n text-align: center;\r\n }\r\n\r\n .modal-result-number {\r\n font-family: var(--font-display);\r\n font-size: 1.5rem;\r\n font-weight: 900;\r\n color: var(--c-accent);\r\n }\r\n\r\n .modal-result-label {\r\n font-size: 0.75rem;\r\n color: var(--c-muted);\r\n margin-top: 4px;\r\n }\r\n\r\n \/* View All Projects button *\/\r\n .btn-view-all {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 16px 44px;\r\n background: transparent;\r\n border: 1px solid var(--c-accent);\r\n color: var(--c-accent);\r\n font-family: var(--font-mono);\r\n font-size: 0.82rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n border-radius: 10px;\r\n position: relative;\r\n overflow: hidden;\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s,\r\n color 0.3s;\r\n }\r\n\r\n .btn-view-all::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .btn-view-all:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .btn-view-all:hover {\r\n color: #000;\r\n transform: translateY(-3px);\r\n box-shadow:\r\n 0 0 30px var(--c-glow),\r\n 0 12px 40px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .btn-view-all > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-view-all svg {\r\n transition: transform 0.3s var(--transition);\r\n }\r\n\r\n .btn-view-all:hover svg {\r\n transform: translateX(5px);\r\n }\r\n\r\n \/* ============================================================\r\n TESTIMONIALS \u2014 INFINITE MARQUEE\r\n============================================================ *\/\r\n #testimonials {\r\n padding: 120px 0 100px;\r\n background: var(--c-surface);\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n #testimonials::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent),\r\n var(--c-accent2),\r\n transparent\r\n );\r\n }\r\n\r\n #testimonials::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--c-accent2),\r\n var(--c-accent),\r\n transparent\r\n );\r\n }\r\n\r\n \/* ---- SPOTLIGHT (Featured Quote) ---- *\/\r\n .testi-spotlight {\r\n max-width: 860px;\r\n margin: 0 auto 80px;\r\n text-align: center;\r\n position: relative;\r\n padding: 0 40px;\r\n }\r\n\r\n .testi-spotlight-quote-mark {\r\n font-family: var(--font-display);\r\n font-size: 8rem;\r\n line-height: 0.7;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n opacity: 0.18;\r\n display: block;\r\n margin-bottom: -24px;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n .testi-spotlight-text {\r\n font-family: var(--font-display);\r\n font-size: clamp(1.15rem, 2.2vw, 1.55rem);\r\n font-weight: 700;\r\n line-height: 1.55;\r\n letter-spacing: -0.01em;\r\n color: var(--c-text);\r\n margin-bottom: 28px;\r\n position: relative;\r\n }\r\n\r\n .testi-spotlight-text em {\r\n font-style: normal;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .testi-spotlight-author {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 12px 24px 12px 12px;\r\n background: var(--c-bg);\r\n border: 1px solid var(--c-border);\r\n border-radius: 99px;\r\n }\r\n\r\n .testi-spotlight-avatar {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 900;\r\n font-size: 1rem;\r\n color: #000;\r\n flex-shrink: 0;\r\n box-shadow: 0 0 16px var(--c-glow);\r\n }\r\n\r\n .testi-spotlight-name {\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .testi-spotlight-role {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n letter-spacing: 0.12em;\r\n color: var(--c-muted);\r\n }\r\n\r\n .testi-spotlight-stars {\r\n font-size: 0.75rem;\r\n letter-spacing: 3px;\r\n color: #ffd700;\r\n filter: drop-shadow(0 0 6px #ffd70066);\r\n }\r\n\r\n \/* ---- MARQUEE ROWS ---- *\/\r\n .testi-marquee-wrap {\r\n position: relative;\r\n margin: 0 -20px;\r\n }\r\n\r\n \/* fade edges *\/\r\n .testi-marquee-wrap::before,\r\n .testi-marquee-wrap::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 180px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n\r\n .testi-marquee-wrap::before {\r\n left: 0;\r\n background: linear-gradient(90deg, var(--c-surface), transparent);\r\n }\r\n\r\n .testi-marquee-wrap::after {\r\n right: 0;\r\n background: linear-gradient(-90deg, var(--c-surface), transparent);\r\n }\r\n\r\n .testi-row {\r\n display: flex;\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n overflow: hidden;\r\n }\r\n\r\n .testi-row:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n .testi-track {\r\n display: flex;\r\n gap: 20px;\r\n flex-shrink: 0;\r\n animation: marqueeLeft 35s linear infinite;\r\n }\r\n\r\n .testi-track-reverse {\r\n display: flex;\r\n gap: 20px;\r\n flex-shrink: 0;\r\n animation: marqueeRight 40s linear infinite;\r\n }\r\n\r\n .testi-row:hover .testi-track,\r\n .testi-row:hover .testi-track-reverse {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes marqueeLeft {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(-50%);\r\n }\r\n }\r\n\r\n @keyframes marqueeRight {\r\n 0% {\r\n transform: translateX(-50%);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n \/* ---- MARQUEE CARDS ---- *\/\r\n .testi-card {\r\n flex-shrink: 0;\r\n width: 360px;\r\n padding: 28px 28px 24px;\r\n background: var(--c-bg);\r\n border-radius: var(--radius);\r\n border: 1px solid var(--c-border);\r\n position: relative;\r\n overflow: hidden;\r\n cursor: default;\r\n transition:\r\n border-color 0.3s,\r\n box-shadow 0.3s,\r\n transform 0.3s var(--transition);\r\n }\r\n\r\n .testi-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n border-radius: var(--radius);\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(0, 245, 255, 0.04),\r\n rgba(155, 89, 255, 0.04)\r\n );\r\n }\r\n\r\n .testi-card:hover {\r\n border-color: var(--c-accent);\r\n box-shadow:\r\n 0 0 30px var(--c-glow),\r\n 0 8px 40px rgba(0, 0, 0, 0.4);\r\n transform: translateY(-4px) scale(1.01);\r\n z-index: 3;\r\n }\r\n\r\n .testi-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n \/* gradient border top accent *\/\r\n .testi-card-accent {\r\n position: absolute;\r\n top: 0;\r\n left: 20px;\r\n right: 20px;\r\n height: 2px;\r\n border-radius: 0 0 2px 2px;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .testi-card:hover .testi-card-accent {\r\n opacity: 1;\r\n }\r\n\r\n .accent-cyan {\r\n background: linear-gradient(90deg, var(--c-accent), transparent);\r\n }\r\n\r\n .accent-purple {\r\n background: linear-gradient(90deg, var(--c-accent2), transparent);\r\n }\r\n\r\n .accent-orange {\r\n background: linear-gradient(90deg, var(--c-accent3), transparent);\r\n }\r\n\r\n .testi-card-top {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .testi-card-stars {\r\n font-size: 0.72rem;\r\n letter-spacing: 3px;\r\n color: #ffd700;\r\n filter: drop-shadow(0 0 4px #ffd70055);\r\n }\r\n\r\n .testi-card-platform {\r\n font-family: var(--font-mono);\r\n font-size: 0.62rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n padding: 3px 10px;\r\n border-radius: 99px;\r\n border: 1px solid var(--c-border);\r\n color: var(--c-muted);\r\n }\r\n\r\n .testi-card-text {\r\n font-size: 0.88rem;\r\n line-height: 1.75;\r\n color: var(--c-muted);\r\n margin-bottom: 22px;\r\n position: relative;\r\n }\r\n\r\n .testi-card-text strong {\r\n color: var(--c-text);\r\n font-weight: 600;\r\n }\r\n\r\n .testi-card-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding-top: 18px;\r\n border-top: 1px solid var(--c-border);\r\n }\r\n\r\n .testi-card-avatar {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 800;\r\n font-size: 0.9rem;\r\n color: #000;\r\n flex-shrink: 0;\r\n }\r\n\r\n .av-cyan {\r\n background: linear-gradient(135deg, #00f5ff, #0066ff);\r\n box-shadow: 0 0 12px rgba(0, 245, 255, 0.4);\r\n }\r\n\r\n .av-purple {\r\n background: linear-gradient(135deg, #9b59ff, #ff6bff);\r\n box-shadow: 0 0 12px rgba(155, 89, 255, 0.4);\r\n }\r\n\r\n .av-orange {\r\n background: linear-gradient(135deg, #ff6b35, #ffd700);\r\n box-shadow: 0 0 12px rgba(255, 107, 53, 0.4);\r\n }\r\n\r\n .av-green {\r\n background: linear-gradient(135deg, #00ff9b, #00c2ff);\r\n box-shadow: 0 0 12px rgba(0, 255, 155, 0.35);\r\n }\r\n\r\n .av-pink {\r\n background: linear-gradient(135deg, #ff6b9d, #ff9b6b);\r\n box-shadow: 0 0 12px rgba(255, 107, 157, 0.4);\r\n }\r\n\r\n .testi-card-name {\r\n font-weight: 700;\r\n font-size: 0.88rem;\r\n line-height: 1.2;\r\n }\r\n\r\n .testi-card-role {\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n color: var(--c-muted);\r\n letter-spacing: 0.08em;\r\n margin-top: 2px;\r\n }\r\n\r\n \/* ---- TRUST BAR ---- *\/\r\n .testi-trust-bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 48px;\r\n margin-top: 64px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .testi-trust-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n\r\n .testi-trust-num {\r\n font-family: var(--font-display);\r\n font-size: 1.6rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n line-height: 1;\r\n }\r\n\r\n .testi-trust-label {\r\n font-size: 0.75rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n letter-spacing: 0.1em;\r\n }\r\n\r\n .testi-trust-sep {\r\n width: 1px;\r\n height: 40px;\r\n background: var(--c-border);\r\n }\r\n\r\n \/* slider-btn kept for compat but hidden now *\/\r\n .slider-btn {\r\n display: none;\r\n }\r\n\r\n .slider-dots {\r\n display: none;\r\n }\r\n\r\n .slider-controls {\r\n display: none;\r\n }\r\n\r\n \/* ============================================================\r\n SERVICES SECTION\r\n============================================================ *\/\r\n #services {\r\n padding: 120px 0;\r\n background: var(--c-bg);\r\n }\r\n\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n margin-top: 64px;\r\n }\r\n\r\n .service-card {\r\n position: relative;\r\n padding: 40px 32px 36px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n transition:\r\n transform 0.4s var(--transition),\r\n box-shadow 0.4s,\r\n border-color 0.4s;\r\n cursor: default;\r\n group: true;\r\n }\r\n\r\n .service-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(0, 245, 255, 0.05) 0%,\r\n rgba(155, 89, 255, 0.05) 100%\r\n );\r\n opacity: 0;\r\n transition: opacity 0.4s;\r\n border-radius: 20px;\r\n }\r\n\r\n .service-card:hover {\r\n transform: translateY(-8px);\r\n border-color: var(--c-accent);\r\n box-shadow:\r\n var(--shadow-glow),\r\n 0 24px 60px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .service-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n \/* Glow corner accent *\/\r\n .service-card-glow {\r\n position: absolute;\r\n top: -60px;\r\n right: -60px;\r\n width: 160px;\r\n height: 160px;\r\n border-radius: 50%;\r\n opacity: 0;\r\n transition: opacity 0.4s;\r\n pointer-events: none;\r\n }\r\n\r\n .service-card:hover .service-card-glow {\r\n opacity: 1;\r\n }\r\n\r\n .sg-cyan {\r\n background: radial-gradient(\r\n circle,\r\n rgba(0, 245, 255, 0.12),\r\n transparent 70%\r\n );\r\n }\r\n\r\n .sg-purple {\r\n background: radial-gradient(\r\n circle,\r\n rgba(155, 89, 255, 0.12),\r\n transparent 70%\r\n );\r\n }\r\n\r\n .sg-orange {\r\n background: radial-gradient(\r\n circle,\r\n rgba(255, 107, 53, 0.12),\r\n transparent 70%\r\n );\r\n }\r\n\r\n \/* Number label *\/\r\n .service-num {\r\n font-family: var(--font-display);\r\n font-size: 0.65rem;\r\n letter-spacing: 0.3em;\r\n color: var(--c-border);\r\n margin-bottom: 28px;\r\n transition: color 0.3s;\r\n }\r\n\r\n .service-card:hover .service-num {\r\n color: var(--c-accent);\r\n }\r\n\r\n \/* Icon *\/\r\n .service-icon-wrap {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 16px;\r\n border: 1px solid var(--c-border);\r\n background: var(--c-bg);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.8rem;\r\n margin-bottom: 28px;\r\n position: relative;\r\n transition:\r\n border-color 0.3s,\r\n background 0.3s,\r\n transform 0.4s var(--transition);\r\n }\r\n\r\n .service-card:hover .service-icon-wrap {\r\n border-color: var(--c-accent);\r\n background: rgba(0, 245, 255, 0.06);\r\n transform: scale(1.08) rotate(-3deg);\r\n }\r\n\r\n .service-title {\r\n font-family: var(--font-display);\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n letter-spacing: 0.01em;\r\n margin-bottom: 14px;\r\n transition: color 0.3s;\r\n }\r\n\r\n .service-card:hover .service-title {\r\n color: var(--c-accent);\r\n }\r\n\r\n .service-desc {\r\n font-size: 0.88rem;\r\n line-height: 1.75;\r\n color: var(--c-muted);\r\n margin-bottom: 28px;\r\n }\r\n\r\n .service-features {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-bottom: 32px;\r\n padding-top: 20px;\r\n border-top: 1px solid var(--c-border);\r\n }\r\n\r\n .service-feature {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-family: var(--font-mono);\r\n font-size: 0.73rem;\r\n letter-spacing: 0.05em;\r\n color: var(--c-muted);\r\n transition: color 0.3s;\r\n }\r\n\r\n .service-card:hover .service-feature {\r\n color: var(--c-text);\r\n }\r\n\r\n .service-feature-dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--c-accent);\r\n flex-shrink: 0;\r\n box-shadow: 0 0 8px var(--c-glow);\r\n opacity: 0.5;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .service-card:hover .service-feature-dot {\r\n opacity: 1;\r\n }\r\n\r\n .service-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: var(--font-mono);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--c-muted);\r\n transition:\r\n color 0.3s,\r\n gap 0.3s;\r\n }\r\n\r\n .service-card:hover .service-cta {\r\n color: var(--c-accent);\r\n gap: 12px;\r\n }\r\n\r\n \/* Popular badge *\/\r\n .service-badge {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n padding: 4px 12px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n border-radius: 99px;\r\n font-family: var(--font-mono);\r\n font-size: 0.6rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n color: #000;\r\n }\r\n\r\n \/* Process strip *\/\r\n .services-process {\r\n margin-top: 80px;\r\n padding: 48px 40px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: 24px;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .services-process::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 10%;\r\n right: 10%;\r\n height: 1px;\r\n background: linear-gradient(\r\n 90deg,\r\n var(--c-accent),\r\n var(--c-accent2),\r\n var(--c-accent3),\r\n var(--c-accent)\r\n );\r\n opacity: 0.2;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n }\r\n\r\n .process-step {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 16px;\r\n padding: 0 16px;\r\n position: relative;\r\n }\r\n\r\n .process-step:not(:last-child)::after {\r\n content: \"\u2192\";\r\n position: absolute;\r\n right: -10px;\r\n top: 24px;\r\n color: var(--c-accent);\r\n font-size: 1rem;\r\n opacity: 0.4;\r\n }\r\n\r\n .process-num {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: var(--c-bg);\r\n border: 2px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-size: 0.8rem;\r\n font-weight: 900;\r\n color: var(--c-accent);\r\n position: relative;\r\n z-index: 1;\r\n transition:\r\n border-color 0.3s,\r\n background 0.3s,\r\n transform 0.3s;\r\n }\r\n\r\n .process-step:hover .process-num {\r\n border-color: var(--c-accent);\r\n background: rgba(0, 245, 255, 0.08);\r\n transform: scale(1.12);\r\n }\r\n\r\n .process-label {\r\n font-family: var(--font-display);\r\n font-size: 0.78rem;\r\n font-weight: 700;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .process-desc {\r\n font-size: 0.78rem;\r\n color: var(--c-muted);\r\n line-height: 1.6;\r\n font-family: var(--font-mono);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .services-process {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 32px;\r\n }\r\n\r\n .services-process::before {\r\n display: none;\r\n }\r\n\r\n .process-step::after {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .services-process {\r\n grid-template-columns: 1fr;\r\n padding: 32px 24px;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n CONTACT SECTION\r\n============================================================ *\/\r\n #contact {\r\n padding: 120px 0;\r\n }\r\n\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: start;\r\n }\r\n\r\n .contact-info-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(1.6rem, 3vw, 2.4rem);\r\n font-weight: 900;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .contact-info-sub {\r\n color: var(--c-muted);\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .contact-details {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .contact-detail {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 16px 20px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n font-size: 0.9rem;\r\n transition: border-color 0.3s;\r\n }\r\n\r\n .contact-detail:hover {\r\n border-color: var(--c-accent);\r\n }\r\n\r\n .contact-detail-icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .contact-detail-label {\r\n font-size: 0.72rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n letter-spacing: 0.1em;\r\n }\r\n\r\n .contact-detail-value {\r\n font-weight: 600;\r\n }\r\n\r\n \/* Form *\/\r\n .contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .form-group {\r\n position: relative;\r\n }\r\n\r\n .form-input {\r\n width: 100%;\r\n padding: 16px 20px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--radius-sm);\r\n color: var(--c-text);\r\n font-family: var(--font-body);\r\n font-size: 0.95rem;\r\n transition:\r\n border-color 0.3s,\r\n box-shadow 0.3s;\r\n outline: none;\r\n resize: vertical;\r\n }\r\n\r\n .form-input:focus {\r\n border-color: var(--c-accent);\r\n box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.08);\r\n }\r\n\r\n .form-input::placeholder {\r\n color: var(--c-muted);\r\n }\r\n\r\n .form-label {\r\n position: absolute;\r\n top: -10px;\r\n left: 12px;\r\n padding: 0 6px;\r\n background: var(--c-bg);\r\n font-family: var(--font-mono);\r\n font-size: 0.68rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--c-accent);\r\n }\r\n\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .form-error {\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n color: #ff4444;\r\n margin-top: 4px;\r\n display: none;\r\n }\r\n\r\n .form-error.show {\r\n display: block;\r\n }\r\n\r\n .form-success {\r\n padding: 20px 24px;\r\n background: rgba(0, 245, 255, 0.08);\r\n border: 1px solid rgba(0, 245, 255, 0.2);\r\n border-radius: var(--radius-sm);\r\n font-family: var(--font-mono);\r\n font-size: 0.85rem;\r\n color: var(--c-accent);\r\n display: none;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .form-success.show {\r\n display: flex;\r\n }\r\n\r\n \/* ============================================================\r\n FOOTER\r\n============================================================ *\/\r\n footer {\r\n padding: 60px 0 40px;\r\n border-top: 1px solid var(--c-border);\r\n background: var(--c-surface);\r\n }\r\n\r\n .footer-inner {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 24px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .footer-logo {\r\n font-family: var(--font-display);\r\n font-size: 1.4rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .footer-links {\r\n display: flex;\r\n gap: 24px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .footer-links a {\r\n font-family: var(--font-mono);\r\n font-size: 0.78rem;\r\n letter-spacing: 0.1em;\r\n color: var(--c-muted);\r\n transition: color 0.3s;\r\n }\r\n\r\n .footer-links a:hover {\r\n color: var(--c-accent);\r\n }\r\n\r\n .footer-socials {\r\n display: flex;\r\n gap: 12px;\r\n }\r\n\r\n .social-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 8px;\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n color: var(--c-muted);\r\n transition: all 0.3s;\r\n }\r\n\r\n .social-btn:hover {\r\n background: var(--c-accent);\r\n color: #000;\r\n border-color: var(--c-accent);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .footer-bottom {\r\n border-top: 1px solid var(--c-border);\r\n padding-top: 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n }\r\n\r\n .footer-copy {\r\n font-size: 0.8rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n }\r\n\r\n .footer-made {\r\n font-size: 0.78rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n }\r\n\r\n .footer-made span {\r\n color: var(--c-accent);\r\n }\r\n\r\n \/* ============================================================\r\n SCROLL PROGRESS\r\n============================================================ *\/\r\n #scroll-progress {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 2px;\r\n background: linear-gradient(\r\n 90deg,\r\n var(--c-accent),\r\n var(--c-accent2),\r\n var(--c-accent3)\r\n );\r\n z-index: 9999;\r\n transition: width 0.1s;\r\n box-shadow: 0 0 8px var(--c-glow);\r\n }\r\n\r\n \/* ============================================================\r\n GLASS CARD UTILITY\r\n============================================================ *\/\r\n .glass {\r\n background: rgba(8, 13, 28, 0.6);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--c-border);\r\n }\r\n\r\n [data-theme=\"light\"] .glass {\r\n background: rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n \/* ============================================================\r\n DECORATIVE GRID LINES\r\n============================================================ *\/\r\n .grid-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n============================================================ *\/\r\n @media (max-width: 1024px) {\r\n .about-grid {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .skills-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .contact-grid {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .stats-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .testi-card {\r\n width: 300px;\r\n }\r\n\r\n .testi-trust-sep {\r\n display: none;\r\n }\r\n\r\n .testi-trust-bar {\r\n gap: 28px;\r\n }\r\n\r\n .about-badges {\r\n right: 10px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 0 24px;\r\n }\r\n\r\n .nav-inner {\r\n padding: 0 24px;\r\n }\r\n\r\n .nav-links,\r\n .nav-cta {\r\n display: none;\r\n }\r\n\r\n .hamburger {\r\n display: flex;\r\n }\r\n\r\n .mobile-nav {\r\n display: flex;\r\n }\r\n\r\n .about-visual {\r\n display: block;\r\n margin-bottom: 40px;\r\n max-width: 320px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .about-badges {\r\n right: -8px;\r\n top: 20px;\r\n }\r\n\r\n .about-badge {\r\n font-size: 0.65rem;\r\n padding: 7px 10px;\r\n }\r\n\r\n .skills-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .stats-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .stat-item {\r\n padding: 32px 20px;\r\n }\r\n\r\n .testi-card {\r\n width: 270px;\r\n }\r\n\r\n .modal-results {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .about-badges {\r\n display: none;\r\n }\r\n\r\n .footer-inner {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .footer-bottom {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .about-values {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .hero-cta-group {\r\n flex-direction: column;\r\n }\r\n\r\n .btn-primary,\r\n .btn-outline {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n FLOATING ACTION BUTTONS\r\n============================================================ *\/\r\n .fab-group {\r\n position: fixed;\r\n bottom: 32px;\r\n right: 32px;\r\n z-index: 5000;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n gap: 14px;\r\n }\r\n\r\n \/* --- Scroll to Top --- *\/\r\n .fab-top {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 14px;\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--c-accent);\r\n cursor: pointer;\r\n opacity: 0;\r\n transform: translateY(16px) scale(0.85);\r\n transition:\r\n opacity 0.4s var(--transition),\r\n transform 0.4s var(--transition),\r\n background 0.3s,\r\n border-color 0.3s,\r\n box-shadow 0.3s;\r\n pointer-events: none;\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .fab-top.visible {\r\n opacity: 1;\r\n transform: none;\r\n pointer-events: auto;\r\n }\r\n\r\n .fab-top:hover {\r\n background: var(--c-accent);\r\n border-color: var(--c-accent);\r\n color: #000;\r\n box-shadow:\r\n 0 0 24px var(--c-glow),\r\n 0 8px 32px rgba(0, 0, 0, 0.5);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .fab-top svg {\r\n transition: transform 0.3s var(--transition);\r\n }\r\n\r\n .fab-top:hover svg {\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* --- WhatsApp --- *\/\r\n .fab-wa {\r\n position: relative;\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 16px;\r\n background: #25d366;\r\n border: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow:\r\n 0 4px 24px rgba(37, 211, 102, 0.4),\r\n 0 8px 40px rgba(0, 0, 0, 0.35);\r\n transition:\r\n transform 0.3s var(--transition),\r\n box-shadow 0.3s;\r\n text-decoration: none;\r\n overflow: visible;\r\n }\r\n\r\n .fab-wa::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -3px;\r\n border-radius: 18px;\r\n background: linear-gradient(135deg, #25d366, #128c7e);\r\n opacity: 0;\r\n z-index: -1;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .fab-wa:hover {\r\n transform: translateY(-4px) scale(1.05);\r\n box-shadow:\r\n 0 0 32px rgba(37, 211, 102, 0.6),\r\n 0 12px 48px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .fab-wa:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .fab-wa svg {\r\n width: 28px;\r\n height: 28px;\r\n fill: #fff;\r\n flex-shrink: 0;\r\n transition: transform 0.3s var(--transition);\r\n }\r\n\r\n .fab-wa:hover svg {\r\n transform: scale(1.1) rotate(-5deg);\r\n }\r\n\r\n \/* Pulse ring on WhatsApp *\/\r\n .fab-wa-ping {\r\n position: absolute;\r\n inset: -6px;\r\n border-radius: 22px;\r\n border: 2px solid rgba(37, 211, 102, 0.5);\r\n animation: waPing 2.2s ease-out infinite;\r\n pointer-events: none;\r\n }\r\n\r\n .fab-wa-ping-2 {\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 28px;\r\n border: 1.5px solid rgba(37, 211, 102, 0.25);\r\n animation: waPing 2.2s ease-out 0.6s infinite;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes waPing {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n transform: scale(1.35);\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* Tooltip labels *\/\r\n .fab-tooltip {\r\n position: absolute;\r\n right: calc(100% + 14px);\r\n top: 50%;\r\n transform: translateY(-50%) translateX(6px);\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: 8px;\r\n padding: 6px 12px;\r\n font-family: var(--font-mono);\r\n font-size: 0.7rem;\r\n letter-spacing: 0.12em;\r\n color: var(--c-text);\r\n white-space: nowrap;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition:\r\n opacity 0.25s,\r\n transform 0.25s var(--transition);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .fab-tooltip::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: -5px;\r\n transform: translateY(-50%);\r\n width: 8px;\r\n height: 8px;\r\n background: var(--c-surface);\r\n border-right: 1px solid var(--c-border);\r\n border-top: 1px solid var(--c-border);\r\n clip-path: polygon(0 0, 100% 50%, 0 100%);\r\n }\r\n\r\n .fab-top:hover .fab-tooltip,\r\n .fab-wa:hover .fab-tooltip {\r\n opacity: 1;\r\n transform: translateY(-50%) translateX(0);\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .fab-group {\r\n bottom: 20px;\r\n right: 18px;\r\n gap: 10px;\r\n }\r\n\r\n .fab-wa {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 14px;\r\n }\r\n\r\n .fab-top {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 12px;\r\n }\r\n\r\n .fab-tooltip {\r\n display: none;\r\n }\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n \r\n <div id=\"scroll-progress\" style=\"width: 0%\"><\/div>\r\n\r\n \r\n <div id=\"cursor-dot\"><\/div>\r\n <div id=\"cursor-ring\"><\/div>\r\n\r\n \r\n <canvas id=\"bg-canvas\"><\/canvas>\r\n\r\n \r\n <div id=\"preloader\">\r\n <div class=\"preloader-logo\">ANAS<\/div>\r\n <div class=\"preloader-bar-wrap\">\r\n <div class=\"preloader-bar\"><\/div>\r\n <\/div>\r\n <div class=\"preloader-text\">Initializing Experience...<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n <nav id=\"navbar\">\r\n <div class=\"nav-inner\">\r\n <a href=\"#hero\" class=\"nav-logo\">AN\u00b7AS<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#skills\">Skills<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#testimonials\">Reviews<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-actions\">\r\n <button\r\n class=\"theme-toggle\"\r\n id=\"themeToggle\"\r\n aria-label=\"Toggle theme\"\r\n >\r\n <span class=\"theme-icon-moon\">\ud83c\udf19<\/span>\r\n <span class=\"theme-icon-sun\">\u2600\ufe0f<\/span>\r\n <\/button>\r\n <a href=\"#contact\" class=\"nav-cta\">Hire Me<\/a>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <nav class=\"mobile-nav\" id=\"mobileNav\">\r\n <a href=\"#about\" class=\"mobile-link\">About<\/a>\r\n <a href=\"#services\" class=\"mobile-link\">Services<\/a>\r\n <a href=\"#skills\" class=\"mobile-link\">Skills<\/a>\r\n <a href=\"#projects\" class=\"mobile-link\">Projects<\/a>\r\n <a href=\"#testimonials\" class=\"mobile-link\">Reviews<\/a>\r\n <a href=\"#contact\" class=\"mobile-link\">Contact<\/a>\r\n <\/nav>\r\n\r\n \r\n <section id=\"hero\">\r\n \r\n <div class=\"hero-grid-floor\">\r\n <div class=\"hero-grid-floor-inner\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-scanline\"><\/div>\r\n\r\n \r\n <div class=\"hero-beam hero-beam-1\"><\/div>\r\n <div class=\"hero-beam hero-beam-2\"><\/div>\r\n\r\n \r\n\r\n \r\n <div class=\"hero-inner\">\r\n \r\n <div class=\"hero-content\">\r\n <div class=\"hero-status\">\r\n <span class=\"hero-status-dot\"><\/span>\r\n Available for New Projects\r\n <\/div>\r\n\r\n <div class=\"hero-glitch-wrap\">\r\n <div class=\"hero-glitch-shadow\">ANAS RAJPUT<\/div>\r\n <h1 class=\"hero-glitch-name\">ANAS RAJPUT<\/h1>\r\n <\/div>\r\n\r\n <div class=\"hero-role-line\">\r\n <span class=\"hero-role-sep\"><\/span>\r\n <span class=\"hero-role-text\"\r\n ><span id=\"hero-type-display\"><\/span\r\n ><span class=\"typewriter-cursor\"><\/span\r\n ><\/span>\r\n <span class=\"hero-role-sep-r\"><\/span>\r\n <\/div>\r\n\r\n <p class=\"hero-tag-line\">\r\n <strong\r\n >Building Fast, SEO Ready, Conversion Focused Websites.<\/strong\r\n ><br \/>\r\n WordPress & Shopify Specialist \u00b7\r\n <strong>3+ Years<\/strong> delivering premium digital experiences\r\n that drive real business growth.\r\n <\/p>\r\n\r\n <div class=\"hero-cta-group\">\r\n <a href=\"#projects\" class=\"btn-primary\">\r\n <span>View My Work<\/span>\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#000\"\r\n stroke-width=\"2.5\"\r\n style=\"position: relative; z-index: 1\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#contact\" class=\"btn-outline\">\r\n <span>Let's Talk<\/span>\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n style=\"position: relative; z-index: 1\"\r\n >\r\n <path\r\n d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/anas.azfa.store\/wp-content\/uploads\/2026\/02\/Anas.pdf\"\r\n download=\"My_CV\"\r\n class=\"btn-outline\"\r\n >\r\n <span>Download CV<\/span>\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n style=\"position: relative; z-index: 1\"\r\n >\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4\"><\/path>\r\n <polyline points=\"7 10 12 15 17 10\"><\/polyline>\r\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-visual\">\r\n <div class=\"hero-orb-container\">\r\n <div class=\"hero-orb\"><\/div>\r\n\r\n <div class=\"hero-orb-ring\"><\/div>\r\n <div class=\"hero-orb-ring-2\"><\/div>\r\n <div class=\"hero-orb-ring-3\"><\/div>\r\n\r\n <div class=\"hero-avatar-wrap\">\r\n <div class=\"hud-line-top\"><\/div>\r\n <div class=\"hud-line-bottom\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-orb-container\">\r\n <div class=\"hero-avatar-wrap\"><\/div>\r\n <img decoding=\"async\" class=\"avatar-letter\" src=\".\/Hero 1.png\" \/>\r\n <\/div>\r\n\r\n <div class=\"hero-tech-badges\">\r\n <div class=\"tech-badge\">\u26a1 WordPress<\/div>\r\n <div class=\"tech-badge\">\ud83d\uded2 Shopify<\/div>\r\n <div class=\"tech-badge\">\ud83d\udcdd Content Wrintig<\/div>\r\n <div class=\"tech-badge\">\ud83d\udcc8 SEO<\/div>\r\n <div class=\"tech-badge\">\ud83c\udfa8 Graphic Design<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-scroll\">\r\n <span>Scroll<\/span>\r\n <div class=\"scroll-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"stats\">\r\n <div class=\"container\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item reveal\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"3\">0<\/span\r\n ><span class=\"stat-plus\">+<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Years of Experience<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal reveal-delay-1\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"80\">0<\/span\r\n ><span class=\"stat-plus\">+<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Projects Completed<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal reveal-delay-2\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"60\">0<\/span\r\n ><span class=\"stat-plus\">+<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Happy Clients<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal reveal-delay-3\">\r\n <div class=\"stat-number\">\r\n <span class=\"counter\" data-target=\"100\">0<\/span\r\n ><span class=\"stat-plus\">%<\/span>\r\n <\/div>\r\n <div class=\"stat-label\">Client Satisfaction<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\">\r\n <div class=\"container\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-visual reveal\">\r\n <div class=\"about-image-frame\">\r\n <div class=\"about-avatar-bg\">\r\n <span class=\"gradient-text\"\r\n ><img decoding=\"async\" src=\".\/Hero 2.png\" alt=\"\"\r\n \/><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-frame-deco\"><\/div>\r\n <div class=\"about-badges\">\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #00f5ff\"\r\n ><\/span>\r\n Frontend Developer\r\n <\/div>\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #9b59ff\"\r\n ><\/span>\r\n WordPress Expert\r\n <\/div>\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #ff6b35\"\r\n ><\/span>\r\n Shopify Partner\r\n <\/div>\r\n <div class=\"about-badge\">\r\n <span\r\n class=\"about-badge-dot\"\r\n style=\"background: #5d35ff\"\r\n ><\/span>\r\n Content Writer\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-text\">\r\n <div class=\"section-label reveal\">About Me<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Crafting Digital<br \/><span class=\"gradient-text\"\r\n >Experiences<\/span\r\n ><br \/>That Convert\r\n <\/h2>\r\n <div class=\"reveal reveal-delay-2\">\r\n <p>\r\n I'm <strong>Anas, <\/strong>a skilled frontend web developer,\r\n WordPress expert, and content writer who loves creating websites\r\n that look great and work perfectly. I have strong expertise in\r\n HTML, CSS, and JavaScript, which helps me build responsive and\r\n user-friendly websites that offer an amazing experience to\r\n users.\r\n <\/p>\r\n <p>\r\n Over the years, I\u2019ve worked on\r\n <strong>80+ websites, <\/strong>for different industries like\r\n e-commerce, education, and personal branding. My WordPress\r\n development skills allow me to create websites that are fully\r\n customized to fit the needs of each client. From clean designs\r\n to advanced features, I make sure every website stands out\r\n <\/p>\r\n <p>\r\n I\u2019m also experienced in <strong>content writing<\/strong> and\r\n specialize in creating SEO-friendly content that helps brands\r\n grow online. By combining my web development and writing skills,\r\n I ensure every project is engaging, effective, and aligned with\r\n my clients\u2019 goals. <br \/>I take pride in delivering high-quality\r\n work on time and meeting my clients\u2019 expectations. If you\u2019re\r\n looking for someone who can turn your ideas into a professional\r\n website or content that works, I\u2019m ready to help!\r\n <\/p>\r\n <\/div>\r\n <div class=\"about-values reveal reveal-delay-3\">\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\u26a1<\/span>Performance First\r\n <\/div>\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\ud83d\udd0d<\/span>SEO Optimized\r\n <\/div>\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\ud83d\udcf1<\/span>Mobile Responsive\r\n <\/div>\r\n <div class=\"about-value\">\r\n <span class=\"about-value-icon\">\ud83c\udfaf<\/span>Conversion Focused\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"skills\">\r\n <div class=\"container\">\r\n <div class=\"skills-header\">\r\n <div>\r\n <div class=\"section-label reveal\">My Toolkit<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Skills & <span class=\"gradient-text\">Expertise<\/span>\r\n <\/h2>\r\n <\/div>\r\n <p class=\"section-subtitle reveal reveal-delay-2\">\r\n Mastery built through real-world projects and relentless learning.\r\n <\/p>\r\n <\/div>\r\n <div class=\"skills-grid\">\r\n <div class=\"skill-card reveal\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83c\udfa8<\/div>\r\n <div class=\"skill-pct\" data-pct=\"95\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">WordPress Development<\/div>\r\n <div class=\"skill-desc\">Custom Themes \u00b7 Plugins \u00b7 WooCommerce<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"95\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-1\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83d\uded2<\/div>\r\n <div class=\"skill-pct\" data-pct=\"92\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">Shopify Development<\/div>\r\n <div class=\"skill-desc\">Custom Themes \u00b7 Liquid \u00b7 Apps<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"92\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-2\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\u270d\ufe0f<\/div>\r\n <div class=\"skill-pct\" data-pct=\"88\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">Content Writing<\/div>\r\n <div class=\"skill-desc\">Blog Posts \u00b7 Articls \u00b7 CopyWriting<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"88\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-1\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83c\udfaf<\/div>\r\n <div class=\"skill-pct\" data-pct=\"90\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">HTML \/ CSS \/ JS<\/div>\r\n <div class=\"skill-desc\">Semantic HTML \u00b7 Tailwind \u00b7 Animations<\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"90\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-2\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83d\udd0d<\/div>\r\n <div class=\"skill-pct\" data-pct=\"85\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">SEO Optimization<\/div>\r\n <div class=\"skill-desc\">\r\n Technical SEO \u00b7 Core Web Vitals \u00b7 Schema\r\n <\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"85\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skill-card reveal reveal-delay-3\">\r\n <div class=\"skill-card-header\">\r\n <div class=\"skill-icon\">\ud83c\udfa8<\/div>\r\n <div class=\"skill-pct\" data-pct=\"87\">0%<\/div>\r\n <\/div>\r\n <div class=\"skill-name\">Graphics Design<\/div>\r\n <div class=\"skill-desc\">\r\n Visual Identity \u00b7 Marketing & Advertising Design \u00b7 Motion Graphics\r\n <\/div>\r\n <div class=\"skill-bar-wrap\">\r\n <div class=\"skill-bar\" data-width=\"87\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"services\">\r\n <div class=\"container\">\r\n <div\r\n style=\"\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n margin-bottom: 0;\r\n \"\r\n >\r\n <div>\r\n <div class=\"section-label reveal\">What I Offer<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Premium <span class=\"gradient-text\">Services<\/span>\r\n <\/h2>\r\n <p class=\"section-subtitle reveal reveal-delay-2\">\r\n End-to-end solutions designed to build, grow, and scale your\r\n digital presence.\r\n <\/p>\r\n <\/div>\r\n <a\r\n href=\"#contact\"\r\n class=\"btn-outline reveal reveal-delay-3\"\r\n style=\"align-self: flex-end\"\r\n >Get a Free Quote<\/a\r\n >\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n \r\n <div class=\"service-card reveal\">\r\n <div class=\"service-card-glow sg-cyan\"><\/div>\r\n <div class=\"service-num\">01<\/div>\r\n <div class=\"service-icon-wrap\">\ud83c\udfa8<\/div>\r\n <div class=\"service-title\">WordPress Development<\/div>\r\n <div class=\"service-desc\">\r\n Fully custom WordPress websites built from scratch \u2014 blazing fast,\r\n pixel-perfect, and built to rank. No page builders, no bloat.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Custom Theme\r\n Development\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>WooCommerce Stores\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Plugin Development &\r\n Integration\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Performance & Speed\r\n Optimization\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Migration & Redesign\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-card-glow sg-purple\"><\/div>\r\n <div class=\"service-badge\">Most Popular<\/div>\r\n <div class=\"service-num\">02<\/div>\r\n <div class=\"service-icon-wrap\">\ud83d\uded2<\/div>\r\n <div class=\"service-title\">Shopify Development<\/div>\r\n <div class=\"service-desc\">\r\n High-converting Shopify stores built for growth. Custom Liquid\r\n themes, seamless app integrations, and checkout flows that sell.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Custom Shopify Theme\r\n (Liquid)\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Shopify Plus\r\n Development\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>WooCommerce \u2192 Shopify\r\n Migration\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>App Integration &\r\n Development\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>CRO & Checkout\r\n Optimization\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-card-glow sg-orange\"><\/div>\r\n <div class=\"service-num\">03<\/div>\r\n <div class=\"service-icon-wrap\">\u270d\ufe0f<\/div>\r\n <div class=\"service-title\">Content Writing<\/div>\r\n <div class=\"service-desc\">\r\n Modern, high-performance content strategies using SEO and User\r\n Intent. Keyword research, Semantic writing, and Content systems\r\n built to rank.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>SEO Writing (Articles &\r\n Blogs)\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Copywriting\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Social Media Writing\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Technical Writing\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Creative Writing &\r\n Storytelling\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal\">\r\n <div class=\"service-card-glow sg-cyan\"><\/div>\r\n <div class=\"service-num\">04<\/div>\r\n <div class=\"service-icon-wrap\">\ud83d\udd0d<\/div>\r\n <div class=\"service-title\">SEO Optimization<\/div>\r\n <div class=\"service-desc\">\r\n Technical SEO audits and on-page optimization that push your site\r\n to the top of Google. Data-driven, results-guaranteed approach.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Technical SEO Audit\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Core Web Vitals\r\n Optimization\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Schema Markup &\r\n Structured Data\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Local SEO & Google\r\n Business\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>SEO-Friendly\r\n Architecture\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-card-glow sg-purple\"><\/div>\r\n <div class=\"service-num\">05<\/div>\r\n <div class=\"service-icon-wrap\">\u26a1<\/div>\r\n <div class=\"service-title\">Graphic Design<\/div>\r\n <div class=\"service-desc\">\r\n Modern, high-impact visual identities using Photoshop and\r\n Illustrator. Brand systems, UI components, and Vector assets built\r\n to scale.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Brand Identity (Logo\r\n Design)\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>UI\/UX Design\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Social Media Graphics\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Print Media & Packaging\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Motion Graphics\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-card-glow sg-orange\"><\/div>\r\n <div class=\"service-num\">06<\/div>\r\n <div class=\"service-icon-wrap\">\ud83d\udee1\ufe0f<\/div>\r\n <div class=\"service-title\">Maintenance & Support<\/div>\r\n <div class=\"service-desc\">\r\n Ongoing care plans to keep your site secure, updated, and\r\n performing at its peak \u2014 so you can focus on your business.\r\n <\/div>\r\n <div class=\"service-features\">\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Monthly Security\r\n Updates\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Backup & Disaster\r\n Recovery\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Bug Fixes & Code\r\n Updates\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Uptime Monitoring 24\/7\r\n <\/div>\r\n <div class=\"service-feature\">\r\n <span class=\"service-feature-dot\"><\/span>Priority Support\r\n Response\r\n <\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"service-cta\">\r\n Start a Project\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"services-process reveal\">\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">01<\/div>\r\n <div class=\"process-label\">Discovery<\/div>\r\n <div class=\"process-desc\">\r\n Deep dive into your goals, audience, and competitors to form the\r\n perfect strategy.\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">02<\/div>\r\n <div class=\"process-label\">Design<\/div>\r\n <div class=\"process-desc\">\r\n Wireframes and visual concepts crafted around your brand and\r\n conversion goals.\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">03<\/div>\r\n <div class=\"process-label\">Development<\/div>\r\n <div class=\"process-desc\">\r\n Clean, fast, and scalable code built with best practices and\r\n tested across all devices.\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-num\">04<\/div>\r\n <div class=\"process-label\">Launch & Grow<\/div>\r\n <div class=\"process-desc\">\r\n Deployed with SEO, analytics, and performance baked in \u2014 then we\r\n iterate and improve.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"projects\">\r\n <div class=\"container\">\r\n <div class=\"skills-header\">\r\n <div>\r\n <div class=\"section-label reveal\">Portfolio<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">\r\n Selected <span class=\"gradient-text\">Works<\/span>\r\n <\/h2>\r\n <\/div>\r\n <div class=\"filter-bar reveal reveal-delay-2\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\r\n <button class=\"filter-btn\" data-filter=\"wordpress\">\r\n WordPress\r\n <\/button>\r\n <button class=\"filter-btn\" data-filter=\"shopify\">Shopify<\/button>\r\n <button class=\"filter-btn\" data-filter=\"content\">\r\n Content Writing\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"projects-grid\" id=\"projectsGrid\">\r\n \r\n <div\r\n class=\"project-card reveal\"\r\n data-category=\"wordpress\"\r\n data-case=\"azfa\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #0a0a1a\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-azfa-store-2026-04-25-19_52_00.png\"\r\n alt=\"AZFA Store screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #9b59ff; filter: drop-shadow(0 0 20px #9b59ff66)\"\r\n >\ud83d\udecd\ufe0f<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('azfa');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/azfa.store\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag orange\">WooCommerce<\/span>\r\n <\/div>\r\n <div class=\"project-title\">AZFA Store<\/div>\r\n <div class=\"project-desc\">\r\n Custom WooCommerce store with advanced product filtering, fast\r\n checkout, and full SEO optimization for maximum organic reach.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('azfa');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">Live & Ranking<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-1\"\r\n data-category=\"wordpress\"\r\n data-case=\"tsb\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #040e0c\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-signals2trade-2026-04-25-20_15_38.png\"\r\n alt=\"The Signals Bank screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #00f5ff; filter: drop-shadow(0 0 20px #00f5ff66)\"\r\n >\ud83d\udcc8<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('tsb');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/thesignalsbank.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag purple\">Forex \/ Finance<\/span>\r\n <\/div>\r\n <div class=\"project-title\">The Signals Bank<\/div>\r\n <div class=\"project-desc\">\r\n Professional trading signals platform built on WordPress with\r\n membership system, real-time signal delivery, and premium\r\n subscription tiers.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('tsb');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">500+ Members<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-2\"\r\n data-category=\"wordpress\"\r\n data-case=\"autocopy\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #0a0600\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-autocopyfx-2026-04-25-19_58_29.png\"\r\n alt=\"AutoCopyFX screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #ff6b35; filter: drop-shadow(0 0 20px #ff6b3566)\"\r\n >\u2699\ufe0f<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('autocopy');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/autocopyfx.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag orange\">FinTech<\/span>\r\n <\/div>\r\n <div class=\"project-title\">AutoCopyFX<\/div>\r\n <div class=\"project-desc\">\r\n Automated forex copy-trading platform with live account\r\n dashboard, MT4\/MT5 integration, and affiliate tracking system\r\n built on WordPress.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('autocopy');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">98 Lighthouse<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal\"\r\n data-category=\"shopify\"\r\n data-case=\"anasi\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #0c0c1e\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-anasi-mart-myshopify-2026-04-25-20_01_19.png\"\r\n alt=\"Anasi Mart screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #9b59ff; filter: drop-shadow(0 0 20px #9b59ff66)\"\r\n >\ud83d\uded2<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('anasi');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/anasi-mart.myshopify.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag purple\">Shopify<\/span>\r\n <span class=\"project-tag orange\">E-Commerce<\/span>\r\n <\/div>\r\n <div class=\"project-title\">Anasi Mart<\/div>\r\n <div class=\"project-desc\">\r\n Full-featured Shopify store with custom theme, product\r\n collections, optimized checkout, and mobile-first design for\r\n high conversion rates.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('anasi');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">+85% Conv.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-1\"\r\n data-category=\"shopify\"\r\n data-case=\"homify\"\r\n >\r\n <div class=\"project-thumb\" style=\"background: #040a14\">\r\n <img decoding=\"async\"\r\n class=\"project-thumb-img\"\r\n src=\".\/screencapture-hoomify-store-2026-04-25-20_03_47.png\"\r\n alt=\"Homify screenshot\"\r\n loading=\"lazy\"\r\n onerror=\"this.style.display = 'none'\"\r\n \/>\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"color: #4fc3f7; filter: drop-shadow(0 0 20px #4fc3f766)\"\r\n >\ud83c\udfe0<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('homify');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/homify102.myshopify.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag purple\">Shopify<\/span>\r\n <span class=\"project-tag\">Home & Living<\/span>\r\n <\/div>\r\n <div class=\"project-title\">Homify Store<\/div>\r\n <div class=\"project-desc\">\r\n Premium home d\u00e9cor Shopify store with curated collections, smart\r\n upsells, and a brand-forward design that drives repeat\r\n purchases.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('homify');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">4.9\u2605 Rating<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"project-card reveal reveal-delay-2\"\r\n data-category=\"content\"\r\n data-case=\"content1\"\r\n >\r\n <div\r\n class=\"project-thumb\"\r\n style=\"background: linear-gradient(135deg, #0a0014, #12002a)\"\r\n >\r\n <span\r\n class=\"project-thumb-emoji\"\r\n style=\"\r\n color: #e040fb;\r\n filter: drop-shadow(0 0 20px #e040fb66);\r\n font-size: 3.5rem;\r\n \"\r\n >\u270d\ufe0f<\/span\r\n >\r\n <div class=\"project-thumb-overlay\">\r\n <a\r\n href=\"#\"\r\n class=\"btn-primary\"\r\n style=\"padding: 10px 18px; font-size: 0.7rem\"\r\n onclick=\"\r\n openModal('content1');\r\n return false;\r\n \"\r\n >Case Study<\/a\r\n >\r\n <a\r\n href=\"https:\/\/broker-affiliate-academy.com\/\"\r\n target=\"_blank\"\r\n class=\"btn-outline\"\r\n style=\"padding: 9px 18px; font-size: 0.7rem\"\r\n >Live Site \u2197<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag purple\">Content Writing<\/span>\r\n <span class=\"project-tag orange\">SEO Blogs<\/span>\r\n <\/div>\r\n <div class=\"project-title\">\r\n Broker Affiliate Academy \u2014 SEO Content\r\n <\/div>\r\n <div class=\"project-desc\">\r\n Full SEO content strategy and blog writing for a forex education\r\n platform \u2014 keyword-targeted articles that grew organic traffic\r\n by 240%.\r\n <\/div>\r\n <div class=\"project-footer\">\r\n <a\r\n href=\"#\"\r\n class=\"project-link\"\r\n onclick=\"\r\n openModal('content1');\r\n return false;\r\n \"\r\n >View Case Study \u2192<\/a\r\n >\r\n <span class=\"project-metrics\">+240% Traffic<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <div style=\"text-align: center; margin-top: 56px\" class=\"reveal\">\r\n <a href=\"projects.html\" class=\"btn-view-all\">\r\n <span>View All Projects<\/span>\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/section>\r\n \r\n <div class=\"modal-overlay\" id=\"modalOverlay\" onclick=\"closeModal(event)\">\r\n <div class=\"modal\" id=\"modalContent\">\r\n <button class=\"modal-close\" onclick=\"closeModal(null, true)\">\u2715<\/button>\r\n <div id=\"modalBody\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"testimonials\">\r\n <div class=\"container\">\r\n <div style=\"text-align: center; margin-bottom: 56px\">\r\n <div class=\"section-label reveal\" style=\"justify-content: center\">\r\n Social Proof\r\n <\/div>\r\n <h2\r\n class=\"section-title reveal reveal-delay-1\"\r\n style=\"text-align: center\"\r\n >\r\n Trusted by <span class=\"gradient-text\">60+ Clients<\/span>\r\n <\/h2>\r\n <p\r\n class=\"section-subtitle reveal reveal-delay-2\"\r\n style=\"margin: 0 auto; text-align: center\"\r\n >\r\n Real words from real people who leveled up their digital presence.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-spotlight reveal reveal-delay-2\">\r\n <span class=\"testi-spotlight-quote-mark\">\"<\/span>\r\n <div class=\"testi-spotlight-text\">\r\n Working with Anas was a <em>game-changer<\/em> for our business. He\r\n didn't just build a website \u2014 he built a <em>sales machine<\/em>. Our\r\n conversions jumped 140% and we hit our first $100k month.\r\n <\/div>\r\n <div style=\"display: flex; justify-content: center\">\r\n <div class=\"testi-spotlight-author\">\r\n <div class=\"testi-spotlight-avatar\">S<\/div>\r\n <div style=\"text-align: left\">\r\n <div class=\"testi-spotlight-name\">Sarah Mitchell<\/div>\r\n <div class=\"testi-spotlight-role\">CEO \u00b7 Lux\u00e9Mode Fashion<\/div>\r\n <\/div>\r\n <div class=\"testi-spotlight-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-marquee-wrap reveal\">\r\n <div class=\"testi-row\">\r\n \r\n <div class=\"testi-track\" id=\"row1a\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our site now scores <strong>98 on Lighthouse<\/strong> and ranks\r\n #1 for our key terms. Delivered beyond expectations \u2014 on time,\r\n on budget, exceptional quality.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">J<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">James Forsythe<\/div>\r\n <div class=\"testi-card-role\">Director \u00b7 Apex Solutions<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The React dashboard handles real-time data beautifully. Code is\r\n <strong>clean, scalable, and documented<\/strong>. He's our go-to\r\n developer for all front-end work.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">A<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Aisha Rahman<\/div>\r\n <div class=\"testi-card-role\">CTO \u00b7 DataPulse Inc.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our subscription signups <strong>tripled in month one<\/strong>.\r\n The Shopify store tells our brand story perfectly. Mobile\r\n experience is absolutely flawless.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">M<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Marco Deluca<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 BrewCraft Coffee<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Patient enquiries from organic search went up\r\n <strong>320% in 3 months<\/strong>. An absolute expert in\r\n healthcare SEO and compliant web architecture.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">D<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Dr. Emily Chen<\/div>\r\n <div class=\"testi-card-role\">Practice Manager \u00b7 MediCore<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Next.js<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our SaaS landing page hit a\r\n <strong>12% conversion rate<\/strong> \u2014 3\u00d7 our previous best. The\r\n animations and copyflow he suggested were spot on.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">R<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Ryan Patel<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 LaunchPad Systems<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testi-track\" aria-hidden=\"true\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our site now scores <strong>98 on Lighthouse<\/strong> and ranks\r\n #1 for our key terms. Delivered beyond expectations \u2014 on time,\r\n on budget, exceptional quality.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">J<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">James Forsythe<\/div>\r\n <div class=\"testi-card-role\">Director \u00b7 Apex Solutions<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The React dashboard handles real-time data beautifully. Code is\r\n <strong>clean, scalable, and documented<\/strong>. He's our go-to\r\n developer for all front-end work.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">A<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Aisha Rahman<\/div>\r\n <div class=\"testi-card-role\">CTO \u00b7 DataPulse Inc.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our subscription signups <strong>tripled in month one<\/strong>.\r\n The Shopify store tells our brand story perfectly. Mobile\r\n experience is absolutely flawless.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">M<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Marco Deluca<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 BrewCraft Coffee<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Patient enquiries from organic search went up\r\n <strong>320% in 3 months<\/strong>. An absolute expert in\r\n healthcare SEO and compliant web architecture.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">D<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Dr. Emily Chen<\/div>\r\n <div class=\"testi-card-role\">Practice Manager \u00b7 MediCore<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Next.js<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our SaaS landing page hit a\r\n <strong>12% conversion rate<\/strong> \u2014 3\u00d7 our previous best. The\r\n animations and copyflow he suggested were spot on.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">R<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Ryan Patel<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 LaunchPad Systems<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-row\">\r\n <div class=\"testi-track-reverse\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WooCommerce<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n We went from 2 sales\/day to\r\n <strong>over 40 sales\/day<\/strong> after the redesign. The\r\n checkout UX and product pages are exactly what our customers\r\n needed.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">K<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Khalid Mansour<\/div>\r\n <div class=\"testi-card-role\">Owner \u00b7 TechGadgets Store<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify Plus<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Anas migrated our entire WooCommerce store to Shopify Plus with\r\n <strong>zero downtime and zero SEO loss<\/strong>. Absolutely\r\n incredible work and communication.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">L<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Laura Kim<\/div>\r\n <div class=\"testi-card-role\">\r\n E-Commerce Manager \u00b7 StyleHouse\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The custom WordPress theme he built is fast, beautiful, and easy\r\n to update. Our team manages content effortlessly.\r\n <strong>Page speed improved from 42 to 96.<\/strong>\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">T<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Thomas Webb<\/div>\r\n <div class=\"testi-card-role\">\r\n Marketing Director \u00b7 Veritas Group\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Hired Anas for a landing page refresh and ended up engaging him\r\n for our entire product suite.\r\n <strong>Best investment we made this year.<\/strong> Talent and\r\n professionalism unmatched.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">N<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Nadia Okonkwo<\/div>\r\n <div class=\"testi-card-role\">CPO \u00b7 Orbitech SaaS<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our bounce rate dropped from 78% to 31% after Anas redesigned\r\n our product pages.\r\n <strong>Revenue doubled in 60 days.<\/strong> He knows what\r\n converts and why.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">F<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Farah Al-Amin<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 GlowSkin Beauty<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testi-track-reverse\" aria-hidden=\"true\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WooCommerce<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n We went from 2 sales\/day to\r\n <strong>over 40 sales\/day<\/strong> after the redesign. The\r\n checkout UX and product pages are exactly what our customers\r\n needed.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-orange\">K<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Khalid Mansour<\/div>\r\n <div class=\"testi-card-role\">Owner \u00b7 TechGadgets Store<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify Plus<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Anas migrated our entire WooCommerce store to Shopify Plus with\r\n <strong>zero downtime and zero SEO loss<\/strong>. Absolutely\r\n incredible work and communication.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-cyan\">L<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Laura Kim<\/div>\r\n <div class=\"testi-card-role\">\r\n E-Commerce Manager \u00b7 StyleHouse\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-purple\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">WordPress<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n The custom WordPress theme he built is fast, beautiful, and easy\r\n to update. Our team manages content effortlessly.\r\n <strong>Page speed improved from 42 to 96.<\/strong>\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-purple\">T<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Thomas Webb<\/div>\r\n <div class=\"testi-card-role\">\r\n Marketing Director \u00b7 Veritas Group\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-orange\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">React<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Hired Anas for a landing page refresh and ended up engaging him\r\n for our entire product suite.\r\n <strong>Best investment we made this year.<\/strong> Talent and\r\n professionalism unmatched.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-pink\">N<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Nadia Okonkwo<\/div>\r\n <div class=\"testi-card-role\">CPO \u00b7 Orbitech SaaS<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-card-accent accent-cyan\"><\/div>\r\n <div class=\"testi-card-top\">\r\n <div class=\"testi-card-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <span class=\"testi-card-platform\">Shopify<\/span>\r\n <\/div>\r\n <div class=\"testi-card-text\">\r\n Our bounce rate dropped from 78% to 31% after Anas redesigned\r\n our product pages.\r\n <strong>Revenue doubled in 60 days.<\/strong> He knows what\r\n converts and why.\r\n <\/div>\r\n <div class=\"testi-card-author\">\r\n <div class=\"testi-card-avatar av-green\">F<\/div>\r\n <div>\r\n <div class=\"testi-card-name\">Farah Al-Amin<\/div>\r\n <div class=\"testi-card-role\">Founder \u00b7 GlowSkin Beauty<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"container\">\r\n <div class=\"testi-trust-bar reveal\">\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">60+<\/div>\r\n <div class=\"testi-trust-label\">Happy Clients<\/div>\r\n <\/div>\r\n <div class=\"testi-trust-sep\"><\/div>\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">5.0<\/div>\r\n <div class=\"testi-trust-label\">Average Rating<\/div>\r\n <\/div>\r\n <div class=\"testi-trust-sep\"><\/div>\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">100%<\/div>\r\n <div class=\"testi-trust-label\">Satisfaction Rate<\/div>\r\n <\/div>\r\n <div class=\"testi-trust-sep\"><\/div>\r\n <div class=\"testi-trust-item\">\r\n <div class=\"testi-trust-num\">Top Rated<\/div>\r\n <div class=\"testi-trust-label\">Upwork & Fiverr<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\">\r\n <div class=\"container\">\r\n <div class=\"contact-grid\">\r\n <div>\r\n <div class=\"section-label reveal\">Get In Touch<\/div>\r\n <h2 class=\"contact-info-title reveal reveal-delay-1\">\r\n Let's Build Something <span class=\"gradient-text\">Amazing<\/span>\r\n <\/h2>\r\n <p class=\"contact-info-sub reveal reveal-delay-2\">\r\n Ready to take your website to the next level? Whether it's a fresh\r\n build, a redesign, or optimizing what you have \u2014 I'm here to help.\r\n <\/p>\r\n <div class=\"contact-details reveal reveal-delay-3\">\r\n <div class=\"contact-detail\">\r\n <div class=\"contact-detail-icon\">\ud83d\udce7<\/div>\r\n <div>\r\n <div class=\"contact-detail-label\">Email<\/div>\r\n <div class=\"contact-detail-value\">\r\n <a\r\n href=\"mailto:anasakbarsaqi8@gmail.com\"\r\n class=\"__cf_email__\"\r\n data-cfemail=\"345c5158585b74555a55471a505142\"\r\n >[email protected]<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-detail\">\r\n <div class=\"contact-detail-icon\">\ud83d\udcbc<\/div>\r\n <div>\r\n <div class=\"contact-detail-label\">Availability<\/div>\r\n <div class=\"contact-detail-value\">Open to Projects<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-detail\">\r\n <div class=\"contact-detail-icon\">\u23f1\ufe0f<\/div>\r\n <div>\r\n <div class=\"contact-detail-label\">Response Time<\/div>\r\n <div class=\"contact-detail-value\">Within 24 Hours<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-2\">\r\n <form class=\"contact-form\" id=\"contactForm\" novalidate>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Name<\/label>\r\n <input\r\n type=\"text\"\r\n name=\"name\"\r\n class=\"form-input\"\r\n placeholder=\"Your Name\"\r\n id=\"nameInput\"\r\n \/>\r\n <div class=\"form-error\" id=\"nameError\">\r\n Please enter your name.\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Email<\/label>\r\n <input\r\n type=\"email\"\r\n name=\"email\"\r\n class=\"form-input\"\r\n placeholder=\"your@email.com\"\r\n id=\"emailInput\"\r\n \/>\r\n <div class=\"form-error\" id=\"emailError\">\r\n Please enter a valid email.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Subject<\/label>\r\n <input\r\n type=\"text\"\r\n name=\"subject\"\r\n class=\"form-input\"\r\n placeholder=\"Project inquiry, redesign, etc.\"\r\n \/>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Select Services<\/label>\r\n <select\r\n name=\"Select Services\"\r\n class=\"form-input\"\r\n style=\"appearance: none; cursor: pointer\"\r\n >\r\n <option value=\"\" disabled selected>Select Services<\/option>\r\n <option>Web Development<\/option>\r\n <option>WordPress & Shopify<\/option>\r\n <option>Content Writing<\/option>\r\n <option>Graphic Design<\/option>\r\n <option>More<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Message<\/label>\r\n <textarea\r\n name=\"message\"\r\n class=\"form-input\"\r\n placeholder=\"Tell me about your project...\"\r\n rows=\"5\"\r\n id=\"messageInput\"\r\n ><\/textarea>\r\n <div class=\"form-error\" id=\"messageError\">\r\n Please enter your message.\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-success\" id=\"formSuccess\">\r\n \u2705 Message sent! I'll get back to you within 24 hours.\r\n <\/div>\r\n <button\r\n type=\"submit\"\r\n class=\"btn-primary\"\r\n style=\"\r\n align-self: flex-start;\r\n padding: 16px 36px;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--c-accent),\r\n var(--c-accent2)\r\n );\r\n color: #000;\r\n -webkit-text-fill-color: #000;\r\n \"\r\n >\r\n <span\r\n style=\"\r\n position: relative;\r\n z-index: 1;\r\n color: #000;\r\n -webkit-text-fill-color: #000;\r\n \"\r\n >Send Message<\/span\r\n >\r\n <svg\r\n style=\"position: relative; z-index: 1\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#000\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path d=\"M22 2L11 13\" \/>\r\n <path d=\"M22 2L15 22l-4-9-9-4z\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer>\r\n <div class=\"container\">\r\n <div class=\"footer-inner\">\r\n <div>\r\n <div class=\"footer-logo\">AN\u00b7AS<\/div>\r\n <div\r\n style=\"\r\n font-size: 0.8rem;\r\n color: var(--c-muted);\r\n font-family: var(--font-mono);\r\n margin-top: 8px;\r\n \"\r\n >\r\n Frontend Developer \u00b7 WordPress \u00b7 Shopify\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-links\">\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#services\">Services<\/a>\r\n <a href=\"#skills\">Skills<\/a>\r\n <a href=\"#projects\">Projects<\/a>\r\n <a href=\"#testimonials\">Reviews<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <div class=\"footer-socials\">\r\n <a\r\n href=\"https:\/\/github.com\/anas-akbar-saqi\"\r\n class=\"social-btn\"\r\n aria-label=\"GitHub\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/www.linkedin.com\/in\/anasakbarsaqi\/\"\r\n class=\"social-btn\"\r\n aria-label=\"LinkedIn\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/web.facebook.com\/anasakbarsaqi21\"\r\n target=\"_blank\"\r\n class=\"social-btn\"\r\n aria-label=\"Facebook\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <a\r\n href=\"https:\/\/www.behance.net\/anasakbarsaqi\"\r\n target=\"_blank\"\r\n class=\"social-btn\"\r\n aria-label=\"Behance\"\r\n >\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M23.25 14.25h-8.5c.25 1.5 1.5 2.5 3 2.5 1.25 0 2.25-.5 2.75-1.25h2.75c-.75 2.25-2.75 4-5.5 4-3.5 0-6-2.5-6-6s2.5-6 6-6c3.25 0 5.5 2.5 5.5 6zm-5.5-3.5c-1.25 0-2.25.75-2.75 2h5.5c-.25-1.25-1.25-2-2.75-2zM8.25 13c0 1.25-1 2.25-2.25 2.25H2.5v-4.5h3.5c1.25 0 2.25 1 2.25 2.25zM9 7.75c0 1.25-1 2.25-2.25 2.25H2.5V5.5h4.25c1.25 0 2.25 1 2.25 2.25zM0 3.25v17.5h7.5c3.25 0 5.5-2 5.5-5.25 0-1.75-.75-3.25-2-4.25 1-.75 1.5-2.25 1.5-3.5C12.5 5 10.5 3.25 7.5 3.25H0zm14.25 4.75h8.5V6.5h-8.5v1.5z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <div class=\"footer-copy\">\u00a9 2026 Anas. All rights reserved.<\/div>\r\n <div class=\"footer-made\">\r\n Designed & Built with <span>\u2665<\/span> by Anas\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <div class=\"fab-group\">\r\n \r\n <button\r\n class=\"fab-top\"\r\n id=\"fabTop\"\r\n aria-label=\"Scroll to top\"\r\n onclick=\"window.scrollTo({ top: 0, behavior: 'smooth' })\"\r\n >\r\n <div class=\"fab-tooltip\">Back to Top<\/div>\r\n <svg\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M12 19V5M5 12l7-7 7 7\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n \r\n <a\r\n class=\"fab-wa\"\r\n href=\"https:\/\/wa.me\/923001234567\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n aria-label=\"Chat on WhatsApp\"\r\n >\r\n <div class=\"fab-wa-ping\"><\/div>\r\n <div class=\"fab-wa-ping-2\"><\/div>\r\n <div class=\"fab-tooltip\">WhatsApp Me<\/div>\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path\r\n d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\r\n \/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <script>\r\n \/\/ ============================================================\r\n \/\/ UTILS\r\n \/\/ ============================================================\r\n const $ = (s, c = document) => c.querySelector(s);\r\n const $$ = (s, c = document) => [...c.querySelectorAll(s)];\r\n\r\n \/\/ ============================================================\r\n \/\/ PRELOADER\r\n \/\/ ============================================================\r\n window.addEventListener(\"load\", () => {\r\n setTimeout(() => {\r\n $(\"#preloader\").classList.add(\"done\");\r\n document.body.style.overflow = \"\";\r\n initReveal();\r\n }, 2000);\r\n });\r\n document.body.style.overflow = \"hidden\";\r\n\r\n \/\/ ============================================================\r\n \/\/ CURSOR\r\n \/\/ ============================================================\r\n const dot = $(\"#cursor-dot\"),\r\n ring = $(\"#cursor-ring\");\r\n let mx = -100,\r\n my = -100,\r\n rx = -100,\r\n ry = -100;\r\n document.addEventListener(\"mousemove\", (e) => {\r\n mx = e.clientX;\r\n my = e.clientY;\r\n });\r\n const hoverEls = () =>\r\n $$(\r\n \"a, button, .project-card, .skill-card, .filter-btn, .about-value, .contact-detail\",\r\n );\r\n function animateCursor() {\r\n rx += (mx - rx) * 0.12;\r\n ry += (my - ry) * 0.12;\r\n dot.style.left = mx + \"px\";\r\n dot.style.top = my + \"px\";\r\n ring.style.left = rx + \"px\";\r\n ring.style.top = ry + \"px\";\r\n requestAnimationFrame(animateCursor);\r\n }\r\n animateCursor();\r\n document.addEventListener(\"mouseover\", (e) => {\r\n if (\r\n e.target.closest(\r\n \"a, button, .project-card, .skill-card, .filter-btn, .about-value, .contact-detail, .social-btn, .slider-btn\",\r\n )\r\n )\r\n ring.classList.add(\"hovering\");\r\n else ring.classList.remove(\"hovering\");\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ CANVAS PARTICLES\r\n \/\/ ============================================================\r\n const canvas = $(\"#bg-canvas\");\r\n const ctx = canvas.getContext(\"2d\");\r\n let particles = [];\r\n const isDark = () => document.documentElement.dataset.theme !== \"light\";\r\n\r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n }\r\n resizeCanvas();\r\n window.addEventListener(\"resize\", resizeCanvas);\r\n\r\n class Particle {\r\n constructor() {\r\n this.reset();\r\n }\r\n reset() {\r\n this.x = Math.random() * canvas.width;\r\n this.y = Math.random() * canvas.height;\r\n this.size = Math.random() * 1.5 + 0.3;\r\n this.speedX = (Math.random() - 0.5) * 0.3;\r\n this.speedY = (Math.random() - 0.5) * 0.3;\r\n this.opacity = Math.random() * 0.5 + 0.1;\r\n this.color =\r\n Math.random() > 0.6\r\n ? \"#00F5FF\"\r\n : Math.random() > 0.5\r\n ? \"#9B59FF\"\r\n : \"#ffffff\";\r\n }\r\n update() {\r\n this.x += this.speedX;\r\n this.y += this.speedY;\r\n if (\r\n this.x < 0 ||\r\n this.x > canvas.width ||\r\n this.y < 0 ||\r\n this.y > canvas.height\r\n )\r\n this.reset();\r\n }\r\n draw() {\r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n ctx.fillStyle = this.color;\r\n ctx.globalAlpha = this.opacity;\r\n ctx.fill();\r\n ctx.globalAlpha = 1;\r\n }\r\n }\r\n\r\n \/\/ Lines between close particles\r\n function drawConnections() {\r\n for (let i = 0; i < particles.length; i++) {\r\n for (let j = i + 1; j < particles.length; j++) {\r\n const dx = particles[i].x - particles[j].x;\r\n const dy = particles[i].y - particles[j].y;\r\n const dist = Math.sqrt(dx * dx + dy * dy);\r\n if (dist < 100) {\r\n ctx.beginPath();\r\n ctx.moveTo(particles[i].x, particles[i].y);\r\n ctx.lineTo(particles[j].x, particles[j].y);\r\n ctx.strokeStyle = isDark()\r\n ? `rgba(0,245,255,${0.06 * (1 - dist \/ 100)})`\r\n : `rgba(0,102,255,${0.04 * (1 - dist \/ 100)})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n }\r\n\r\n for (let i = 0; i < 120; i++) particles.push(new Particle());\r\n\r\n function animateParticles() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n particles.forEach((p) => {\r\n p.update();\r\n p.draw();\r\n });\r\n drawConnections();\r\n requestAnimationFrame(animateParticles);\r\n }\r\n animateParticles();\r\n\r\n \/\/ ============================================================\r\n \/\/ THEME TOGGLE\r\n \/\/ ============================================================\r\n $(\"#themeToggle\").addEventListener(\"click\", () => {\r\n const html = document.documentElement;\r\n html.dataset.theme = html.dataset.theme === \"dark\" ? \"light\" : \"dark\";\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ NAVBAR SCROLL\r\n \/\/ ============================================================\r\n window.addEventListener(\"scroll\", () => {\r\n const nav = $(\"#navbar\");\r\n if (window.scrollY > 60) nav.classList.add(\"scrolled\");\r\n else nav.classList.remove(\"scrolled\");\r\n \/\/ scroll progress\r\n const prog =\r\n (window.scrollY \/\r\n (document.documentElement.scrollHeight - window.innerHeight)) *\r\n 100;\r\n $(\"#scroll-progress\").style.width = prog + \"%\";\r\n \/\/ fab top visibility\r\n if (window.scrollY > 400)\r\n document.getElementById(\"fabTop\")?.classList.add(\"visible\");\r\n else document.getElementById(\"fabTop\")?.classList.remove(\"visible\");\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ HAMBURGER\r\n \/\/ ============================================================\r\n $(\"#hamburger\").addEventListener(\"click\", () => {\r\n const hb = $(\"#hamburger\"),\r\n mn = $(\"#mobileNav\");\r\n hb.classList.toggle(\"active\");\r\n mn.classList.toggle(\"open\");\r\n if (mn.style.display !== \"flex\") mn.style.display = \"flex\";\r\n });\r\n $$(\".mobile-link\").forEach((l) => {\r\n l.addEventListener(\"click\", () => {\r\n $(\"#hamburger\").classList.remove(\"active\");\r\n $(\"#mobileNav\").classList.remove(\"open\");\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ TYPEWRITER\r\n \/\/ ============================================================\r\n const texts = [\r\n \"Frontend Developer\",\r\n \"WordPress Specialist\",\r\n \"Shopify Expert\",\r\n \"UI\/UX Craftsman\",\r\n \"SEO Architect\",\r\n ];\r\n let ti = 0,\r\n ci = 0,\r\n deleting = false;\r\n function type() {\r\n const current = texts[ti];\r\n const el = document.getElementById(\"hero-type-display\");\r\n if (!el) return;\r\n if (!deleting) {\r\n el.textContent = current.slice(0, ci + 1);\r\n ci++;\r\n if (ci === current.length) {\r\n deleting = true;\r\n setTimeout(type, 2000);\r\n return;\r\n }\r\n } else {\r\n el.textContent = current.slice(0, ci - 1);\r\n ci--;\r\n if (ci === 0) {\r\n deleting = false;\r\n ti = (ti + 1) % texts.length;\r\n }\r\n }\r\n setTimeout(type, deleting ? 60 : 110);\r\n }\r\n setTimeout(type, 2500);\r\n\r\n \/\/ ============================================================\r\n \/\/ REVEAL ON SCROLL\r\n \/\/ ============================================================\r\n function initReveal() {\r\n const observer = new IntersectionObserver(\r\n (entries) => {\r\n entries.forEach((e) => {\r\n if (e.isIntersecting) {\r\n e.target.classList.add(\"visible\");\r\n }\r\n });\r\n },\r\n { threshold: 0.12 },\r\n );\r\n $$(\".reveal\").forEach((el) => observer.observe(el));\r\n\r\n \/\/ Skill bars\r\n const skillObserver = new IntersectionObserver(\r\n (entries) => {\r\n entries.forEach((e) => {\r\n if (e.isIntersecting) {\r\n const bar = e.target.querySelector(\".skill-bar\");\r\n const pctEl = e.target.querySelector(\".skill-pct\");\r\n if (bar) {\r\n const w = bar.dataset.width;\r\n setTimeout(() => {\r\n bar.style.width = w + \"%\";\r\n }, 300);\r\n }\r\n if (pctEl) {\r\n const target = parseInt(pctEl.dataset.pct);\r\n let current = 0;\r\n const interval = setInterval(() => {\r\n current += 2;\r\n if (current >= target) {\r\n pctEl.textContent = target + \"%\";\r\n clearInterval(interval);\r\n return;\r\n }\r\n pctEl.textContent = current + \"%\";\r\n }, 20);\r\n }\r\n }\r\n });\r\n },\r\n { threshold: 0.3 },\r\n );\r\n $$(\".skill-card\").forEach((el) => skillObserver.observe(el));\r\n\r\n \/\/ Counters\r\n const counterObserver = new IntersectionObserver(\r\n (entries) => {\r\n entries.forEach((e) => {\r\n if (e.isIntersecting) {\r\n $$(\".counter\", e.target.closest(\"#stats\") || document).forEach(\r\n (c) => {\r\n const target = parseInt(c.dataset.target);\r\n let current = 0;\r\n const step = Math.ceil(target \/ 60);\r\n const interval = setInterval(() => {\r\n current += step;\r\n if (current >= target) {\r\n c.textContent = target;\r\n clearInterval(interval);\r\n return;\r\n }\r\n c.textContent = current;\r\n }, 25);\r\n },\r\n );\r\n counterObserver.disconnect();\r\n }\r\n });\r\n },\r\n { threshold: 0.5 },\r\n );\r\n const stats = $(\"#stats\");\r\n if (stats) counterObserver.observe(stats);\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ PROJECT FILTER\r\n \/\/ ============================================================\r\n $$(\".filter-btn\").forEach((btn) => {\r\n btn.addEventListener(\"click\", () => {\r\n $$(\".filter-btn\").forEach((b) => b.classList.remove(\"active\"));\r\n btn.classList.add(\"active\");\r\n const filter = btn.dataset.filter;\r\n $$(\".project-card\").forEach((card) => {\r\n const cat = card.dataset.category;\r\n if (filter === \"all\" || cat === filter) {\r\n card.classList.remove(\"hidden\");\r\n card.style.display = \"\";\r\n setTimeout(() => {\r\n card.style.opacity = \"1\";\r\n card.style.transform = \"\";\r\n }, 10);\r\n } else {\r\n card.style.opacity = \"0\";\r\n card.style.transform = \"scale(0.95)\";\r\n setTimeout(() => {\r\n card.style.display = \"none\";\r\n }, 400);\r\n }\r\n });\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ CASE STUDY MODALS\r\n \/\/ ============================================================\r\n const caseData = {\r\n azfa: {\r\n label: \"WordPress \u00b7 WooCommerce\",\r\n title: \"AZFA Store\",\r\n client: \"AZFA Store\",\r\n platform: \"WordPress + WooCommerce\",\r\n duration: \"6 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/azfa.store\/\",\r\n desc1:\r\n \"AZFA Store needed a professional WooCommerce store from scratch \u2014 fast, mobile-first, and built to rank on Google. The client required full product management, advanced filtering, and a seamless checkout experience that reduced cart abandonment.\",\r\n desc2:\r\n \"I built a fully custom WordPress theme with WooCommerce integration, lightning-fast page speed using caching and image optimization, structured data for product rich snippets, and a streamlined checkout. Full on-page SEO was implemented across all product and category pages to drive organic traffic from day one.\",\r\n results: [\r\n { num: \"0.9s\", label: \"Page Load Time\" },\r\n { num: \"96\", label: \"Lighthouse Score\" },\r\n { num: \"#1\", label: \"Google Rankings\" },\r\n ],\r\n },\r\n tsb: {\r\n label: \"WordPress \u00b7 Finance \/ Forex\",\r\n title: \"The Signals Bank\",\r\n client: \"The Signals Bank\",\r\n platform: \"WordPress + Membership\",\r\n duration: \"8 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/thesignalsbank.com\/\",\r\n desc1:\r\n \"The Signals Bank is a professional forex signals platform that needed a high-trust, feature-rich website to attract and retain paying subscribers. The site had to handle live signal delivery, user account management, and subscription billing \u2014 all within a secure WordPress environment.\",\r\n desc2:\r\n \"I developed a custom WordPress solution with a full membership system, gated premium content for subscribers, automated signal delivery notifications, and a performance-optimised frontend. The design communicates authority and trust \u2014 essential in the competitive forex space.\",\r\n results: [\r\n { num: \"500+\", label: \"Active Members\" },\r\n { num: \"98\", label: \"Lighthouse Score\" },\r\n { num: \"+180%\", label: \"Organic Traffic\" },\r\n ],\r\n },\r\n autocopy: {\r\n label: \"WordPress \u00b7 FinTech\",\r\n title: \"AutoCopyFX\",\r\n client: \"AutoCopyFX\",\r\n platform: \"WordPress + Custom API\",\r\n duration: \"7 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/autocopyfx.com\/\",\r\n desc1:\r\n \"AutoCopyFX is an automated forex copy-trading service that required a professional platform website to explain their product, onboard new traders, and integrate with MT4\/MT5 trading accounts. The site needed to be both technically impressive and easy to understand for non-technical users.\",\r\n desc2:\r\n \"I built a custom WordPress site with a live account dashboard, MT4\/MT5 copy-trade integration display, detailed feature pages, affiliate tracking system, and a smooth onboarding funnel. Full SEO implementation with schema markup and Core Web Vitals optimisation was included.\",\r\n results: [\r\n { num: \"98\", label: \"Lighthouse Score\" },\r\n { num: \"+220%\", label: \"Lead Conversions\" },\r\n { num: \"1.1s\", label: \"Load Time\" },\r\n ],\r\n },\r\n anasi: {\r\n label: \"Shopify \u00b7 E-Commerce\",\r\n title: \"Anasi Mart\",\r\n client: \"Anasi Mart\",\r\n platform: \"Shopify\",\r\n duration: \"5 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/anasi-mart.myshopify.com\/\",\r\n desc1:\r\n \"Anasi Mart needed a complete Shopify store built from the ground up \u2014 a multi-category e-commerce experience that felt premium, loaded fast, and converted browsers into buyers. The client wanted full control of their product listings, collections, and discount logic.\",\r\n desc2:\r\n \"I delivered a fully custom Shopify theme with an intuitive collection structure, dynamic product pages, an optimised checkout funnel, and mobile-first responsive design. Smart upsell widgets and a sticky cart were added to increase average order value, and full Shopify SEO setup was implemented.\",\r\n results: [\r\n { num: \"+85%\", label: \"Conversion Rate\" },\r\n { num: \"4.9\u2605\", label: \"Store Rating\" },\r\n { num: \"1.2s\", label: \"Mobile Load\" },\r\n ],\r\n },\r\n homify: {\r\n label: \"Shopify \u00b7 Home & Living\",\r\n title: \"Homify Store\",\r\n client: \"Homify\",\r\n platform: \"Shopify\",\r\n duration: \"5 Weeks\",\r\n year: \"2025\",\r\n liveUrl: \"https:\/\/homify102.myshopify.com\/\",\r\n desc1:\r\n \"Homify is a home d\u00e9cor and lifestyle brand that required a Shopify store with a warm, premium aesthetic that matched their product quality. The goal was to create an immersive shopping experience that built brand loyalty and encouraged repeat purchases.\",\r\n desc2:\r\n \"I designed and built a custom Shopify theme focused on visual storytelling \u2014 large imagery, curated collection pages, and smooth product discovery. Integrated smart product recommendations, a loyalty-encouraging wishlist feature, and structured data for Google Shopping integration.\",\r\n results: [\r\n { num: \"4.9\u2605\", label: \"Customer Rating\" },\r\n { num: \"+65%\", label: \"Repeat Purchases\" },\r\n { num: \"97\", label: \"Lighthouse Score\" },\r\n ],\r\n },\r\n content1: {\r\n label: \"Content Writing \u00b7 SEO\",\r\n title: \"Broker Affiliate Academy \u2014 SEO Content Strategy\",\r\n client: \"Broker Affiliate Academy\",\r\n platform: \"WordPress Blog + SEO\",\r\n duration: \"Ongoing\",\r\n year: \"2024\u20132025\",\r\n liveUrl: \"https:\/\/broker-affiliate-academy.com\/\",\r\n desc1:\r\n \"Broker Affiliate Academy is a forex education platform that needed a full content strategy to grow organic traffic and establish topical authority in the competitive forex niche. They needed long-form SEO articles, keyword-targeted blog posts, and landing page copy that converted readers into course students.\",\r\n desc2:\r\n \"I developed and executed a complete content calendar targeting high-intent forex and affiliate marketing keywords. Each article was written with E-E-A-T principles, proper internal linking, and semantic SEO structure. The content covered topics from MT4 basics to advanced affiliate strategies \u2014 building a library of 30+ in-depth articles that now rank on page one.\",\r\n results: [\r\n { num: \"+240%\", label: \"Organic Traffic\" },\r\n { num: \"30+\", label: \"Articles Written\" },\r\n { num: \"Page 1\", label: \"Google Rankings\" },\r\n ],\r\n },\r\n };\r\n\r\n function openModal(id) {\r\n const data = caseData[id];\r\n if (!data) return;\r\n const liveBtn = data.liveUrl\r\n ? `<a href=\"${data.liveUrl}\" target=\"_blank\" rel=\"noopener\"\r\n style=\"display:inline-flex;align-items:center;gap:8px;margin-top:16px;\r\n padding:12px 28px;background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));\r\n color:#000;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.15em;\r\n text-transform:uppercase;font-weight:700;border-radius:8px;text-decoration:none;\">\r\n View Live Site \u2197\r\n <\/a>`\r\n : \"\";\r\n const body = `\r\n <div class=\"modal-label\">${data.label}<\/div>\r\n <div class=\"modal-title\">${data.title}<\/div>\r\n <div class=\"modal-meta\">\r\n <div class=\"modal-meta-item\"><strong>${data.client}<\/strong>Client<\/div>\r\n <div class=\"modal-meta-item\"><strong>${data.platform}<\/strong>Platform<\/div>\r\n <div class=\"modal-meta-item\"><strong>${data.duration}<\/strong>Duration<\/div>\r\n <div class=\"modal-meta-item\"><strong>${data.year}<\/strong>Year<\/div>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <p>${data.desc1}<\/p>\r\n <p>${data.desc2}<\/p>\r\n <div class=\"modal-results\">\r\n ${data.results.map((r) => `<div class=\"modal-result\"><div class=\"modal-result-number\">${r.num}<\/div><div class=\"modal-result-label\">${r.label}<\/div><\/div>`).join(\"\")}\r\n <\/div>\r\n ${liveBtn}\r\n <\/div>\r\n `;\r\n $(\"#modalBody\").innerHTML = body;\r\n $(\"#modalOverlay\").classList.add(\"open\");\r\n document.body.style.overflow = \"hidden\";\r\n }\r\n function closeModal(e, force = false) {\r\n if (force || e?.target === $(\"#modalOverlay\")) {\r\n $(\"#modalOverlay\").classList.remove(\"open\");\r\n document.body.style.overflow = \"\";\r\n }\r\n }\r\n document.addEventListener(\"keydown\", (e) => {\r\n if (e.key === \"Escape\") closeModal(null, true);\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ TESTIMONIALS \u2014 CSS infinite marquee, no JS needed\r\n \/\/ ============================================================\r\n\r\n \/\/ ============================================================\r\n \/\/ CONTACT FORM\r\n \/\/ ============================================================\r\n $(\"#contactForm\")?.addEventListener(\"submit\", (e) => {\r\n e.preventDefault();\r\n let valid = true;\r\n const name = $(\"#nameInput\"),\r\n email = $(\"#emailInput\"),\r\n message = $(\"#messageInput\");\r\n const nameErr = $(\"#nameError\"),\r\n emailErr = $(\"#emailError\"),\r\n msgErr = $(\"#messageError\");\r\n nameErr.classList.remove(\"show\");\r\n emailErr.classList.remove(\"show\");\r\n msgErr.classList.remove(\"show\");\r\n if (!name.value.trim()) {\r\n nameErr.classList.add(\"show\");\r\n name.focus();\r\n valid = false;\r\n } else if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email.value)) {\r\n emailErr.classList.add(\"show\");\r\n email.focus();\r\n valid = false;\r\n } else if (!message.value.trim()) {\r\n msgErr.classList.add(\"show\");\r\n message.focus();\r\n valid = false;\r\n }\r\n if (!valid) return;\r\n const btn = e.target.querySelector('[type=\"submit\"]');\r\n btn.textContent = \"Sending...\";\r\n btn.style.opacity = \"0.7\";\r\n\r\n \/\/ Formspree Integration (Sirf yahan se change hai)\r\n const data = new FormData(e.target);\r\n fetch(\"https:\/\/formspree.io\/f\/mreadlae\", {\r\n method: \"POST\",\r\n body: data,\r\n headers: {\r\n Accept: \"application\/json\",\r\n },\r\n })\r\n .then((response) => {\r\n \/\/ Button ko wapis normal karna\r\n btn.textContent = \"Send Message\";\r\n btn.style.opacity = \"1\";\r\n\r\n if (response.ok) {\r\n \/\/ Aapka original success logic\r\n $(\"#formSuccess\").classList.add(\"show\");\r\n e.target.reset();\r\n setTimeout(\r\n () => $(\"#formSuccess\").classList.remove(\"show\"),\r\n 5000,\r\n );\r\n } else {\r\n alert(\"Oops! There was a problem submitting your form\");\r\n }\r\n })\r\n .catch((error) => {\r\n btn.textContent = \"Send Message\";\r\n btn.style.opacity = \"1\";\r\n alert(\"Oops! There was a problem submitting your form\");\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ PARALLAX (subtle)\r\n \/\/ ============================================================\r\n window.addEventListener(\"scroll\", () => {\r\n const sy = window.scrollY;\r\n const floor = document.querySelector(\".hero-grid-floor-inner\");\r\n if (floor)\r\n floor.style.transform = `rotateX(65deg) translateY(${sy * 0.06}px)`;\r\n const orbit = document.querySelector(\".hero-orbit\");\r\n if (orbit) orbit.style.transform = `rotate(${sy * 0.04}deg)`;\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ MAGNETIC BUTTONS\r\n \/\/ ============================================================\r\n $$(\".btn-primary, .btn-outline, .social-btn, .nav-cta\").forEach((btn) => {\r\n btn.addEventListener(\"mousemove\", (e) => {\r\n const r = btn.getBoundingClientRect();\r\n const x = e.clientX - r.left - r.width \/ 2;\r\n const y = e.clientY - r.top - r.height \/ 2;\r\n btn.style.transform = `translate(${x * 0.15}px, ${y * 0.2}px)`;\r\n });\r\n btn.addEventListener(\"mouseleave\", () => {\r\n btn.style.transform = \"\";\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ 3D CARD HOVER\r\n \/\/ ============================================================\r\n $$(\".skill-card, .project-card\").forEach((card) => {\r\n card.addEventListener(\"mousemove\", (e) => {\r\n const r = card.getBoundingClientRect();\r\n const x = (e.clientX - r.left) \/ r.width - 0.5;\r\n const y = (e.clientY - r.top) \/ r.height - 0.5;\r\n card.style.transform = `perspective(800px) rotateY(${x * 8}deg) rotateX(${-y * 8}deg) translateY(-4px)`;\r\n });\r\n card.addEventListener(\"mouseleave\", () => {\r\n card.style.transform = \"\";\r\n });\r\n });\r\n\r\n \/\/ ============================================================\r\n \/\/ SCROLL TO TOP + FAB VISIBILITY\r\n \/\/ ============================================================\r\n const fabTop = document.getElementById(\"fabTop\");\r\n if (fabTop) {\r\n fabTop.addEventListener(\"click\", function () {\r\n window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n });\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ SMOOTH SCROLL \u2014 only for real anchor targets, not # placeholders\r\n \/\/ ============================================================\r\n $$('a[href^=\"#\"]').forEach((a) => {\r\n a.addEventListener(\"click\", (e) => {\r\n const href = a.getAttribute(\"href\");\r\n if (!href || href === \"#\") return; \/\/ let onclick handle placeholder links\r\n const target = $(href);\r\n if (target) {\r\n e.preventDefault();\r\n const top = target.offsetTop - 80;\r\n window.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n });\r\n });\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n\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>Anas \u00b7 Frontend Developer ANAS Initializing Experience… AN\u00b7AS About Services Skills Projects Reviews Contact \ud83c\udf19 \u2600\ufe0f Hire Me About Services Skills Projects Reviews Contact Available for New Projects ANAS RAJPUT ANAS RAJPUT Building Fast, SEO Ready, Conversion Focused Websites. WordPress & Shopify Specialist \u00b7 3+ Years delivering premium digital experiences that drive real business growth. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":49,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/anasimart.azfa.store\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}