{"id":192290,"date":"2026-05-05T06:59:40","date_gmt":"2026-05-05T06:59:40","guid":{"rendered":"https:\/\/affixsoft.cloud\/?page_id=192290"},"modified":"2026-05-05T14:44:56","modified_gmt":"2026-05-05T14:44:56","slug":"home","status":"publish","type":"page","link":"https:\/\/affixsoft.cloud\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nAffix Soft | Digital Growth Partner for US Businesses<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DESIGN TOKENS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --p1: #0c15bb;\r\n --p2: #2052fe;\r\n --accent: #12bde9;\r\n --black: #000000;\r\n --white: #ffffff;\r\n --dark: #040816;\r\n --dark2: #080e25;\r\n --gray: #6b7280;\r\n --gray-light: #f0f2f8;\r\n --border: rgba(255,255,255,0.08);\r\n --border-dark: rgba(12,21,187,0.15);\r\n\r\n --grad-main: linear-gradient(135deg, var(--p1) 0%, var(--p2) 60%, var(--accent) 100%);\r\n --grad-hero: linear-gradient(135deg, #040816 0%, #080e25 50%, #0c1540 100%);\r\n --grad-text: linear-gradient(90deg, var(--p2), var(--accent));\r\n --grad-card: linear-gradient(135deg, rgba(32,82,254,0.08), rgba(18,189,233,0.04));\r\n\r\n --font-head: 'Outfit', sans-serif;\r\n --font-body: 'Plus Jakarta Sans', sans-serif;\r\n --radius: 16px;\r\n --radius-sm: 10px;\r\n --shadow: 0 20px 60px rgba(12,21,187,0.2);\r\n --shadow-sm: 0 4px 20px rgba(0,0,0,0.08);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESET & BASE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; }\r\nbody {\r\n font-family: var(--font-body);\r\n font-size: 16px;\r\n line-height: 1.7;\r\n color: var(--black);\r\n background: var(--white);\r\n overflow-x: hidden;\r\n}\r\nimg { max-width: 100%; display: block; }\r\na { text-decoration: none; }\r\nul { list-style: none; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n UTILITY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }\r\n.text-grad {\r\n background: var(--grad-text);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n}\r\n.section-pad { padding: 100px 0; }\r\n.section-pad-sm { padding: 70px 0; }\r\n\r\n.eyebrow {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n font-family: var(--font-body);\r\n font-size: 0.78rem; font-weight: 700;\r\n letter-spacing: 2px; text-transform: uppercase;\r\n color: var(--p2);\r\n background: rgba(32,82,254,0.08);\r\n border: 1px solid rgba(32,82,254,0.2);\r\n padding: 6px 16px; border-radius: 50px;\r\n margin-bottom: 1.2rem;\r\n}\r\n.eyebrow-dot {\r\n width: 6px; height: 6px; border-radius: 50%;\r\n background: var(--accent);\r\n animation: blink 2s infinite;\r\n}\r\n@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }\r\n\r\n.section-title {\r\n font-family: var(--font-head);\r\n font-size: clamp(2rem, 3.5vw, 2.8rem);\r\n font-weight: 800;\r\n line-height: 1.15;\r\n letter-spacing: -0.5px;\r\n color: var(--dark);\r\n margin-bottom: 1rem;\r\n}\r\n.section-sub {\r\n font-size: 1.05rem; color: var(--gray);\r\n font-weight: 400; max-width: 560px;\r\n}\r\n.centered { text-align: center; }\r\n.centered .section-sub { margin: 0 auto; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BUTTONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.btn {\r\n display: inline-flex; align-items: center; gap: 9px;\r\n padding: 14px 28px; border-radius: 50px;\r\n font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;\r\n cursor: pointer; border: none; transition: all 0.25s;\r\n white-space: nowrap;\r\n}\r\n.btn-primary {\r\n background: var(--grad-main);\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(32,82,254,0.35);\r\n}\r\n.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(32,82,254,0.5); }\r\n\r\n.btn-whatsapp {\r\n background: #25d366;\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(37,211,102,0.3);\r\n}\r\n.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(37,211,102,0.45); }\r\n\r\n.btn-outline {\r\n background: transparent;\r\n color: var(--p2);\r\n border: 2px solid var(--p2);\r\n}\r\n.btn-outline:hover { background: var(--p2); color: var(--white); }\r\n\r\n.btn-white {\r\n background: var(--white);\r\n color: var(--p1);\r\n box-shadow: 0 8px 30px rgba(0,0,0,0.15);\r\n}\r\n.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }\r\n\r\n.btn-ghost-white {\r\n background: rgba(255,255,255,0.1);\r\n color: var(--white);\r\n border: 2px solid rgba(255,255,255,0.25);\r\n backdrop-filter: blur(10px);\r\n}\r\n.btn-ghost-white:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NAVBAR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#navbar {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 9999;\r\n padding: 0 24px; height: 72px;\r\n display: flex; align-items: center; justify-content: space-between;\r\n background: rgba(4,8,22,0.85);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--border);\r\n transition: all 0.3s;\r\n}\r\n#navbar.scrolled {\r\n background: rgba(4,8,22,0.97);\r\n box-shadow: 0 4px 30px rgba(0,0,0,0.3);\r\n}\r\n.nav-inner { max-width: 1180px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }\r\n\r\n.logo {\r\n display: flex; align-items: center; gap: 10px;\r\n font-family: var(--font-head); font-size: 1.4rem; font-weight: 800;\r\n color: var(--white);\r\n}\r\n.logo-mark {\r\n width: 38px; height: 38px; border-radius: 10px;\r\n background: var(--grad-main);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 1.1rem; font-weight: 900; color: white;\r\n box-shadow: 0 4px 15px rgba(32,82,254,0.4);\r\n}\r\n.logo span { color: var(--accent); }\r\n\r\n.nav-links {\r\n display: flex; align-items: center; gap: 2rem;\r\n}\r\n.nav-links a {\r\n color: rgba(255,255,255,0.75); font-size: 0.9rem; font-weight: 500;\r\n transition: color 0.2s;\r\n}\r\n.nav-links a:hover { color: var(--white); }\r\n\r\n.nav-cta { display: flex; align-items: center; gap: 0.75rem; }\r\n.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }\r\n.hamburger span { width: 24px; height: 2px; background: white; border-radius: 2px; transition: 0.3s; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hero {\r\n background: var(--grad-hero);\r\n min-height: 100vh;\r\n display: flex; align-items: center;\r\n position: relative; overflow: hidden;\r\n padding: 120px 24px 80px;\r\n}\r\n\r\n\/* Grid lines *\/\r\n#hero::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image:\r\n linear-gradient(rgba(32,82,254,0.06) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(32,82,254,0.06) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n}\r\n\r\n\/* Glow orbs *\/\r\n.hero-orb {\r\n position: absolute; border-radius: 50%;\r\n filter: blur(100px); pointer-events: none;\r\n}\r\n.orb-1 { width: 500px; height: 500px; background: rgba(12,21,187,0.5); top: -100px; right: -150px; }\r\n.orb-2 { width: 350px; height: 350px; background: rgba(18,189,233,0.25); bottom: 50px; left: -80px; }\r\n.orb-3 { width: 250px; height: 250px; background: rgba(32,82,254,0.4); top: 40%; right: 30%; }\r\n\r\n.hero-inner {\r\n max-width: 1180px; margin: 0 auto; width: 100%;\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;\r\n position: relative; z-index: 1;\r\n}\r\n\r\n.hero-badge {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: rgba(18,189,233,0.15); border: 1px solid rgba(18,189,233,0.3);\r\n color: var(--accent); font-size: 0.8rem; font-weight: 700;\r\n letter-spacing: 1px; text-transform: uppercase;\r\n padding: 7px 16px; border-radius: 50px; margin-bottom: 1.5rem;\r\n animation: fadeUp 0.6s ease both;\r\n}\r\n\r\n.hero-title {\r\n font-family: var(--font-head);\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 900; line-height: 1.08; letter-spacing: -1.5px;\r\n color: var(--white); margin-bottom: 1.5rem;\r\n animation: fadeUp 0.7s 0.1s ease both;\r\n}\r\n.hero-title em { font-style: normal; }\r\n\r\n.hero-sub {\r\n font-size: 1.1rem; color: rgba(255,255,255,0.65);\r\n font-weight: 400; max-width: 520px; margin-bottom: 2.5rem;\r\n animation: fadeUp 0.7s 0.2s ease both;\r\n}\r\n\r\n.hero-btns {\r\n display: flex; gap: 1rem; flex-wrap: wrap;\r\n animation: fadeUp 0.7s 0.3s ease both;\r\n}\r\n\r\n.hero-stats {\r\n display: flex; gap: 2.5rem; margin-top: 3rem;\r\n animation: fadeUp 0.7s 0.4s ease both;\r\n}\r\n.hstat { }\r\n.hstat-num {\r\n font-family: var(--font-head); font-size: 1.8rem; font-weight: 800;\r\n color: var(--white); line-height: 1;\r\n}\r\n.hstat-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 3px; }\r\n\r\n\/* Hero right visual *\/\r\n.hero-visual {\r\n position: relative;\r\n animation: fadeUp 0.8s 0.2s ease both;\r\n}\r\n\r\n.hero-card {\r\n background: rgba(255,255,255,0.04);\r\n border: 1px solid rgba(255,255,255,0.1);\r\n border-radius: 20px; padding: 1.75rem;\r\n backdrop-filter: blur(20px);\r\n}\r\n.hero-card-main {\r\n margin-bottom: 1rem;\r\n background: linear-gradient(135deg, rgba(32,82,254,0.12), rgba(18,189,233,0.06));\r\n border-color: rgba(32,82,254,0.25);\r\n}\r\n.hc-label {\r\n font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px;\r\n text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.75rem;\r\n}\r\n.hc-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }\r\n.hc-icon {\r\n width: 36px; height: 36px; border-radius: 10px;\r\n display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;\r\n}\r\n.hc-text { }\r\n.hc-name { font-weight: 600; color: white; font-size: 0.9rem; }\r\n.hc-val { font-size: 0.75rem; color: rgba(255,255,255,0.5); }\r\n.metric-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 4px; }\r\n.metric-fill { height: 100%; border-radius: 2px; background: var(--grad-text); }\r\n\r\n.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n.mini-card {\r\n background: rgba(255,255,255,0.04);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n border-radius: 14px; padding: 1.25rem;\r\n text-align: center;\r\n}\r\n.mini-num {\r\n font-family: var(--font-head); font-size: 1.5rem; font-weight: 800;\r\n line-height: 1; margin-bottom: 4px;\r\n}\r\n.mini-label { font-size: 0.72rem; color: rgba(255,255,255,0.45); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TRUST STRIP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#trust {\r\n background: var(--white);\r\n border-bottom: 1px solid rgba(0,0,0,0.06);\r\n padding: 36px 24px;\r\n}\r\n.trust-inner {\r\n max-width: 1180px; margin: 0 auto;\r\n display: flex; align-items: center; gap: 3rem; flex-wrap: wrap;\r\n}\r\n.trust-label {\r\n font-size: 0.8rem; font-weight: 700; letter-spacing: 1px;\r\n text-transform: uppercase; color: var(--gray); white-space: nowrap;\r\n}\r\n.trust-divider { width: 1px; height: 30px; background: rgba(0,0,0,0.1); }\r\n.trust-logos { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }\r\n.trust-badge {\r\n display: flex; align-items: center; gap: 8px;\r\n font-family: var(--font-head); font-size: 1rem; font-weight: 700;\r\n color: rgba(0,0,0,0.3); letter-spacing: -0.3px;\r\n transition: color 0.2s;\r\n}\r\n.trust-badge:hover { color: var(--p2); }\r\n.trust-badge svg { opacity: 0.4; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SERVICES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#services { background: var(--gray-light); }\r\n\r\n.services-grid {\r\n display: grid; grid-template-columns: repeat(3, 1fr);\r\n gap: 1.5rem; margin-top: 3.5rem;\r\n}\r\n.service-card {\r\n background: var(--white);\r\n border: 1px solid var(--border-dark);\r\n border-radius: 20px; padding: 2.25rem;\r\n position: relative; overflow: hidden;\r\n transition: all 0.3s;\r\n cursor: default;\r\n}\r\n.service-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n background: var(--grad-main); opacity: 0;\r\n transition: opacity 0.3s;\r\n}\r\n.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(12,21,187,0.12); border-color: rgba(32,82,254,0.25); }\r\n.service-card:hover::before { opacity: 1; }\r\n\r\n.service-icon {\r\n width: 56px; height: 56px; border-radius: 16px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 1.5rem; margin-bottom: 1.5rem;\r\n background: var(--grad-card);\r\n border: 1px solid rgba(32,82,254,0.12);\r\n}\r\n.service-card h3 {\r\n font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;\r\n color: var(--dark); margin-bottom: 0.75rem; letter-spacing: -0.2px;\r\n}\r\n.service-card p { color: var(--gray); font-size: 0.9rem; line-height: 1.75; margin-bottom: 1.25rem; }\r\n.service-benefit {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n font-size: 0.78rem; font-weight: 700; color: var(--p2);\r\n background: rgba(32,82,254,0.07); padding: 5px 12px; border-radius: 50px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ABOUT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#about { background: var(--white); }\r\n\r\n.about-grid {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 5rem; align-items: center;\r\n}\r\n\r\n.about-visual {\r\n position: relative;\r\n}\r\n.about-main-card {\r\n background: var(--dark);\r\n border-radius: 24px; padding: 2.5rem;\r\n position: relative; overflow: hidden;\r\n box-shadow: var(--shadow);\r\n}\r\n.about-main-card::before {\r\n content: '';\r\n position: absolute; top: 0; right: 0;\r\n width: 200px; height: 200px; border-radius: 50%;\r\n background: radial-gradient(circle, rgba(18,189,233,0.2), transparent 70%);\r\n}\r\n.about-main-card::after {\r\n content: '';\r\n position: absolute; bottom: -50px; left: -50px;\r\n width: 200px; height: 200px; border-radius: 50%;\r\n background: radial-gradient(circle, rgba(32,82,254,0.3), transparent 70%);\r\n}\r\n\r\n.about-stat-grid {\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; position: relative; z-index: 1;\r\n}\r\n.about-stat {\r\n background: rgba(255,255,255,0.05);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n border-radius: 14px; padding: 1.25rem;\r\n}\r\n.about-stat-num {\r\n font-family: var(--font-head); font-size: 2rem; font-weight: 800;\r\n line-height: 1; margin-bottom: 4px;\r\n}\r\n.about-stat-desc { font-size: 0.78rem; color: rgba(255,255,255,0.5); }\r\n\r\n.about-floating {\r\n position: absolute; bottom: -20px; right: -20px;\r\n background: white; border-radius: 16px;\r\n padding: 1rem 1.25rem; box-shadow: var(--shadow-sm);\r\n border: 1px solid var(--border-dark);\r\n display: flex; align-items: center; gap: 10px;\r\n}\r\n.af-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex-shrink: 0; box-shadow: 0 0 8px rgba(34,197,94,0.5); }\r\n.af-text { font-size: 0.82rem; font-weight: 600; color: var(--dark); }\r\n\r\n.about-copy .section-title { margin-bottom: 1rem; }\r\n.about-copy p { color: var(--gray); margin-bottom: 1rem; font-size: 0.95rem; }\r\n\r\n.mission-box {\r\n background: var(--grad-card);\r\n border: 1px solid rgba(32,82,254,0.15);\r\n border-radius: 14px; padding: 1.25rem 1.5rem;\r\n margin: 1.5rem 0;\r\n border-left: 3px solid var(--p2);\r\n}\r\n.mission-box p {\r\n font-size: 0.95rem; font-weight: 500; color: var(--dark);\r\n font-style: italic; margin: 0;\r\n}\r\n\r\n.about-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }\r\n.pill {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n font-size: 0.82rem; font-weight: 600; color: var(--dark);\r\n background: var(--white); border: 1px solid var(--border-dark);\r\n padding: 7px 14px; border-radius: 50px;\r\n}\r\n.pill-check { color: var(--p2); font-size: 0.85rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PORTFOLIO \/ CASE STUDIES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#portfolio { background: var(--gray-light); }\r\n\r\n.portfolio-grid {\r\n display: grid; grid-template-columns: repeat(3, 1fr);\r\n gap: 1.5rem; margin-top: 3.5rem;\r\n}\r\n.case-card {\r\n background: var(--white);\r\n border-radius: 20px; overflow: hidden;\r\n border: 1px solid var(--border-dark);\r\n transition: all 0.3s;\r\n}\r\n.case-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(12,21,187,0.1); }\r\n\r\n.case-header {\r\n background: var(--grad-hero); padding: 2rem;\r\n position: relative; overflow: hidden;\r\n}\r\n.case-header::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image: linear-gradient(rgba(32,82,254,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(32,82,254,0.08) 1px, transparent 1px);\r\n background-size: 30px 30px;\r\n}\r\n.case-type {\r\n display: inline-block;\r\n font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;\r\n color: var(--accent); background: rgba(18,189,233,0.15); border: 1px solid rgba(18,189,233,0.3);\r\n padding: 4px 12px; border-radius: 50px; margin-bottom: 0.75rem; position: relative; z-index: 1;\r\n}\r\n.case-name {\r\n font-family: var(--font-head); font-size: 1.25rem; font-weight: 800;\r\n color: white; position: relative; z-index: 1;\r\n}\r\n\r\n.case-body { padding: 1.75rem; }\r\n.case-row { margin-bottom: 1rem; }\r\n.case-row-label {\r\n font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;\r\n color: var(--p2); margin-bottom: 0.3rem;\r\n}\r\n.case-row-text { font-size: 0.88rem; color: var(--gray); line-height: 1.6; }\r\n\r\n.case-results {\r\n display: flex; gap: 1rem; margin-top: 1.25rem;\r\n padding-top: 1.25rem; border-top: 1px solid var(--border-dark);\r\n}\r\n.result-item { flex: 1; text-align: center; }\r\n.result-val {\r\n font-family: var(--font-head); font-size: 1.3rem; font-weight: 800;\r\n line-height: 1; margin-bottom: 2px;\r\n}\r\n.result-label { font-size: 0.7rem; color: var(--gray); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TESTIMONIALS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#testimonials { background: var(--white); }\r\n\r\n.testi-grid {\r\n display: grid; grid-template-columns: repeat(3, 1fr);\r\n gap: 1.5rem; margin-top: 3.5rem;\r\n}\r\n.testi-card {\r\n background: var(--white);\r\n border: 1px solid var(--border-dark);\r\n border-radius: 20px; padding: 2rem;\r\n transition: all 0.3s;\r\n position: relative;\r\n}\r\n.testi-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(12,21,187,0.08); border-color: rgba(32,82,254,0.3); }\r\n.testi-card::before {\r\n content: '\"';\r\n position: absolute; top: 16px; right: 24px;\r\n font-family: var(--font-head); font-size: 5rem; font-weight: 900;\r\n color: rgba(32,82,254,0.06); line-height: 1;\r\n}\r\n\r\n.stars { color: #fbbf24; font-size: 0.9rem; margin-bottom: 1rem; letter-spacing: 2px; }\r\n.testi-text { font-size: 0.92rem; color: #374151; line-height: 1.8; margin-bottom: 1.5rem; font-style: italic; }\r\n.testi-author { display: flex; align-items: center; gap: 12px; }\r\n.avatar {\r\n width: 44px; height: 44px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-family: var(--font-head); font-weight: 800; font-size: 0.9rem;\r\n color: white; flex-shrink: 0;\r\n}\r\n.author-name { font-weight: 700; font-size: 0.9rem; color: var(--dark); }\r\n.author-role { font-size: 0.78rem; color: var(--gray); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TECH STACK\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#tech { background: var(--dark); }\r\n\r\n.tech-grid {\r\n display: grid; grid-template-columns: repeat(5, 1fr);\r\n gap: 1rem; margin-top: 3.5rem;\r\n}\r\n.tech-item {\r\n background: rgba(255,255,255,0.04);\r\n border: 1px solid rgba(255,255,255,0.07);\r\n border-radius: 14px; padding: 1.5rem 1rem;\r\n text-align: center; transition: all 0.3s;\r\n}\r\n.tech-item:hover {\r\n background: rgba(32,82,254,0.12);\r\n border-color: rgba(32,82,254,0.35);\r\n transform: translateY(-3px);\r\n}\r\n.tech-logo { font-size: 2rem; margin-bottom: 0.6rem; }\r\n.tech-name { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.7); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CTA SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#cta-main {\r\n background: var(--grad-main);\r\n position: relative; overflow: hidden;\r\n padding: 100px 24px;\r\n text-align: center;\r\n}\r\n#cta-main::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n}\r\n.cta-orb {\r\n position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;\r\n}\r\n.cta-orb-1 { width: 400px; height: 400px; background: rgba(255,255,255,0.08); top: -150px; right: -100px; }\r\n.cta-orb-2 { width: 300px; height: 300px; background: rgba(18,189,233,0.2); bottom: -100px; left: -50px; }\r\n\r\n.cta-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }\r\n.cta-title {\r\n font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3.2rem);\r\n font-weight: 900; letter-spacing: -1px; color: white;\r\n line-height: 1.1; margin-bottom: 1.25rem;\r\n}\r\n.cta-sub { color: rgba(255,255,255,0.75); font-size: 1.1rem; margin-bottom: 2.5rem; }\r\n.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CONTACT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#contact { background: var(--gray-light); }\r\n\r\n.contact-grid {\r\n display: grid; grid-template-columns: 1fr 1.3fr;\r\n gap: 4rem; margin-top: 3.5rem; align-items: start;\r\n}\r\n\r\n.contact-info { }\r\n.contact-card {\r\n background: var(--white); border: 1px solid var(--border-dark);\r\n border-radius: 16px; padding: 1.5rem;\r\n display: flex; align-items: center; gap: 1rem;\r\n margin-bottom: 1rem; transition: all 0.25s;\r\n}\r\n.contact-card:hover { border-color: rgba(32,82,254,0.3); transform: translateX(4px); }\r\n.contact-icon {\r\n width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;\r\n display: flex; align-items: center; justify-content: center; font-size: 1.2rem;\r\n background: var(--grad-card); border: 1px solid rgba(32,82,254,0.12);\r\n}\r\n.contact-detail h4 { font-weight: 700; font-size: 0.9rem; color: var(--dark); margin-bottom: 2px; }\r\n.contact-detail p { font-size: 0.85rem; color: var(--gray); }\r\n\r\n.wa-block {\r\n background: linear-gradient(135deg, #25d366, #128c7e);\r\n border-radius: 16px; padding: 1.5rem;\r\n display: flex; align-items: center; gap: 1rem;\r\n cursor: pointer; transition: all 0.25s; margin-top: 1.5rem;\r\n text-decoration: none;\r\n}\r\n.wa-block:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(37,211,102,0.3); }\r\n.wa-icon { font-size: 1.8rem; }\r\n.wa-text h4 { font-weight: 800; color: white; font-size: 1rem; }\r\n.wa-text p { font-size: 0.82rem; color: rgba(255,255,255,0.75); }\r\n\r\n.contact-form {\r\n background: var(--white); border: 1px solid var(--border-dark);\r\n border-radius: 20px; padding: 2.5rem;\r\n}\r\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n.form-group { margin-bottom: 1.25rem; }\r\n.form-group label {\r\n display: block; font-size: 0.82rem; font-weight: 700;\r\n color: var(--dark); margin-bottom: 6px;\r\n}\r\n.form-group input, .form-group textarea, .form-group select {\r\n width: 100%; background: var(--gray-light);\r\n border: 2px solid transparent; border-radius: 10px;\r\n padding: 12px 16px; font-family: var(--font-body);\r\n font-size: 0.9rem; color: var(--dark); outline: none;\r\n transition: border-color 0.2s, background 0.2s;\r\n}\r\n.form-group input:focus, .form-group textarea:focus, .form-group select:focus {\r\n border-color: var(--p2); background: white;\r\n}\r\n.form-group textarea { resize: vertical; }\r\n.form-group input::placeholder, .form-group textarea::placeholder { color: #9ca3af; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter {\r\n background: var(--dark);\r\n padding: 60px 24px 24px;\r\n}\r\n.footer-grid {\r\n max-width: 1180px; margin: 0 auto;\r\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 3rem; margin-bottom: 3rem;\r\n}\r\n.footer-brand p {\r\n color: rgba(255,255,255,0.5); font-size: 0.88rem; margin-top: 1rem;\r\n max-width: 270px; line-height: 1.75;\r\n}\r\n.footer-socials { display: flex; gap: 10px; margin-top: 1.25rem; }\r\n.social-btn {\r\n width: 36px; height: 36px; border-radius: 8px;\r\n background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 0.9rem; color: rgba(255,255,255,0.5);\r\n transition: all 0.2s; cursor: pointer;\r\n}\r\n.social-btn:hover { background: var(--p2); border-color: var(--p2); color: white; }\r\n\r\n.footer-col h5 {\r\n font-family: var(--font-head); font-size: 0.82rem; font-weight: 700;\r\n letter-spacing: 1.5px; text-transform: uppercase;\r\n color: rgba(255,255,255,0.4); margin-bottom: 1.25rem;\r\n}\r\n.footer-col li { margin-bottom: 0.6rem; }\r\n.footer-col a {\r\n color: rgba(255,255,255,0.6); font-size: 0.88rem;\r\n transition: color 0.2s;\r\n}\r\n.footer-col a:hover { color: var(--accent); }\r\n\r\n.footer-bottom {\r\n max-width: 1180px; margin: 0 auto;\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.06);\r\n font-size: 0.82rem; color: rgba(255,255,255,0.35);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ANIMATIONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(28px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }\r\n.reveal.in { opacity: 1; transform: translateY(0); }\r\n.reveal-delay-1 { transition-delay: 0.1s; }\r\n.reveal-delay-2 { transition-delay: 0.2s; }\r\n.reveal-delay-3 { transition-delay: 0.3s; }\r\n.reveal-delay-4 { transition-delay: 0.4s; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MOBILE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 1024px) {\r\n .services-grid { grid-template-columns: repeat(2, 1fr); }\r\n .portfolio-grid { grid-template-columns: 1fr 1fr; }\r\n .testi-grid { grid-template-columns: 1fr 1fr; }\r\n .tech-grid { grid-template-columns: repeat(4, 1fr); }\r\n .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .hamburger { display: flex; }\r\n .nav-links { display: none; flex-direction: column; gap: 1rem; position: absolute; top: 72px; left: 0; right: 0; background: var(--dark); padding: 2rem 24px; border-bottom: 1px solid var(--border); }\r\n .nav-links.open { display: flex; }\r\n .nav-cta { display: none; }\r\n .hero-inner { grid-template-columns: 1fr; }\r\n .hero-visual { display: none; }\r\n .about-grid { grid-template-columns: 1fr; }\r\n .contact-grid { grid-template-columns: 1fr; }\r\n .form-row { grid-template-columns: 1fr; }\r\n .services-grid { grid-template-columns: 1fr; }\r\n .portfolio-grid { grid-template-columns: 1fr; }\r\n .testi-grid { grid-template-columns: 1fr; }\r\n .tech-grid { grid-template-columns: repeat(3, 1fr); }\r\n .footer-grid { grid-template-columns: 1fr; }\r\n .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }\r\n .hero-stats { gap: 1.5rem; }\r\n .trust-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }\r\n .trust-divider { display: none; }\r\n .section-pad { padding: 70px 0; }\r\n}\r\n@media (max-width: 480px) {\r\n .tech-grid { grid-template-columns: repeat(2, 1fr); }\r\n .hero-btns { flex-direction: column; }\r\n .hero-btns .btn { justify-content: center; }\r\n .cta-btns { flex-direction: column; align-items: center; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NAVBAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<nav id=\"navbar\">\r\n <div class=\"nav-inner\">\r\n <a href=\"https:\/\/affixsoft.cloud\/\" class=\"logo\">\r\n <div class=\"logo-mark\">A<\/div>\r\n Affix<span>Soft<\/span>\r\n <\/a>\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#portfolio\">Work<\/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-cta\">\r\n <a href=\"https:\/\/wa.me\/+923136375636\" target=\"_blank\" class=\"btn btn-whatsapp\" style=\"padding:10px 20px;font-size:0.85rem;\">\r\n \ud83d\udcac WhatsApp\r\n <\/a>\r\n <a href=\"#contact\" class=\"btn btn-primary\" style=\"padding:10px 20px;font-size:0.85rem;\">\r\n Get Started \u2192\r\n <\/a>\r\n <\/div>\r\n <div class=\"hamburger\" id=\"hamburger\"><span><\/span><span><\/span><span><\/span><\/div>\r\n <\/div>\r\n<\/nav>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"hero\">\r\n <div class=\"hero-orb orb-1\"><\/div>\r\n <div class=\"hero-orb orb-2\"><\/div>\r\n <div class=\"hero-orb orb-3\"><\/div>\r\n\r\n <div class=\"hero-inner\">\r\n <!-- Left Copy -->\r\n <div class=\"hero-copy\">\r\n <div class=\"hero-badge\">\u26a1 Trusted by US Businesses<\/div>\r\n <h1 class=\"hero-title\">\r\n We Help <em class=\"text-grad\">Roofing Companies<\/em> & SMEs Dominate Online\r\n <\/h1>\r\n <p class=\"hero-sub\">\r\n Affix Soft builds high-performance websites, AI-powered automation, and cloud infrastructure that turn your digital presence into a 24\/7 lead machine.\r\n <\/p>\r\n <div class=\"hero-btns\">\r\n <a href=\"#contact\" class=\"btn btn-primary\">\r\n \ud83d\udcc5 Get Free Consultation\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/+923136375636 target=\"_blank\" class=\"btn btn-whatsapp\">\r\n \ud83d\udcac Chat on WhatsApp\r\n <\/a>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div class=\"hstat\">\r\n <div class=\"hstat-num text-grad\">150+<\/div>\r\n <div class=\"hstat-label\">Projects Delivered<\/div>\r\n <\/div>\r\n <div class=\"hstat\">\r\n <div class=\"hstat-num text-grad\">98%<\/div>\r\n <div class=\"hstat-label\">Client Satisfaction<\/div>\r\n <\/div>\r\n <div class=\"hstat\">\r\n <div class=\"hstat-num text-grad\">8+<\/div>\r\n <div class=\"hstat-label\">Years Experience<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right Visual -->\r\n <div class=\"hero-visual\">\r\n <div class=\"hero-card hero-card-main\">\r\n <div class=\"hc-label\">\ud83d\udcc8 Campaign Performance \u2014 Live<\/div>\r\n <div class=\"hc-row\">\r\n <div class=\"hc-icon\" style=\"background:rgba(18,189,233,0.15);\">\ud83c\udf10<\/div>\r\n <div class=\"hc-text\" style=\"flex:1;\">\r\n <div class=\"hc-name\">Organic Traffic<\/div>\r\n <div class=\"metric-bar\"><div class=\"metric-fill\" style=\"width:82%;\"><\/div><\/div>\r\n <\/div>\r\n <div style=\"color:var(--accent);font-weight:800;font-size:0.9rem;\">+82%<\/div>\r\n <\/div>\r\n <div class=\"hc-row\">\r\n <div class=\"hc-icon\" style=\"background:rgba(32,82,254,0.15);\">\ud83c\udfaf<\/div>\r\n <div class=\"hc-text\" style=\"flex:1;\">\r\n <div class=\"hc-name\">Lead Conversion<\/div>\r\n <div class=\"metric-bar\"><div class=\"metric-fill\" style=\"width:67%;\"><\/div><\/div>\r\n <\/div>\r\n <div style=\"color:var(--accent);font-weight:800;font-size:0.9rem;\">+67%<\/div>\r\n <\/div>\r\n <div class=\"hc-row\" style=\"margin-bottom:0;\">\r\n <div class=\"hc-icon\" style=\"background:rgba(255,255,255,0.06);\">\u26a1<\/div>\r\n <div class=\"hc-text\" style=\"flex:1;\">\r\n <div class=\"hc-name\">Page Speed Score<\/div>\r\n <div class=\"metric-bar\"><div class=\"metric-fill\" style=\"width:96%;\"><\/div><\/div>\r\n <\/div>\r\n <div style=\"color:var(--accent);font-weight:800;font-size:0.9rem;\">96\/100<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mini-cards\" style=\"margin-top:1rem;\">\r\n <div class=\"mini-card\">\r\n <div class=\"mini-num text-grad\">$2.4M+<\/div>\r\n <div class=\"mini-label\">Revenue Generated for Clients<\/div>\r\n <\/div>\r\n <div class=\"mini-card\">\r\n <div class=\"mini-num text-grad\">24\/7<\/div>\r\n <div class=\"mini-label\">Dedicated Support Team<\/div>\r\n <\/div>\r\n <div class=\"mini-card\">\r\n <div class=\"mini-num\" style=\"color:#22c55e;\">\u25cf LIVE<\/div>\r\n <div class=\"mini-label\">US-Based Client Projects<\/div>\r\n <\/div>\r\n <div class=\"mini-card\">\r\n <div class=\"mini-num text-grad\">3 Days<\/div>\r\n <div class=\"mini-label\">Avg. First Prototype Delivery<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TRUST \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"trust\">\r\n <div class=\"trust-inner\">\r\n <div class=\"trust-label\">Trusted Partner Of<\/div>\r\n <div class=\"trust-divider\"><\/div>\r\n <div class=\"trust-logos\">\r\n <div class=\"trust-badge\">\ud83c\udfe0 RoofPro USA<\/div>\r\n <div class=\"trust-badge\">\ud83d\uded2 ShopifyBrands<\/div>\r\n <div class=\"trust-badge\">\u2601\ufe0f CloudVenture<\/div>\r\n <div class=\"trust-badge\">\ud83c\udfd7\ufe0f BuildTech Inc.<\/div>\r\n <div class=\"trust-badge\">\ud83d\udcca GrowthHQ<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SERVICES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"services\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"centered reveal\">\r\n <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>Our Services<\/div>\r\n <h2 class=\"section-title\">Everything You Need to <span class=\"text-grad\">Grow Faster<\/span><\/h2>\r\n <p class=\"section-sub\">We deliver full-stack digital solutions designed to generate leads, automate operations, and scale your business without complexity.<\/p>\r\n <\/div>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card reveal\">\r\n <div class=\"service-icon\">\ud83c\udf10<\/div>\r\n <h3>Website Development<\/h3>\r\n <p>Lightning-fast, SEO-optimized websites built to convert visitors into leads. From landing pages to full business portals \u2014 designed for US audiences.<\/p>\r\n <div class=\"service-benefit\">\u2191 More leads, less bounce<\/div>\r\n <\/div>\r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-icon\">\ud83d\uded2<\/div>\r\n <h3>E-Commerce Solutions<\/h3>\r\n <p>Shopify and WooCommerce stores engineered for maximum conversions. Custom checkout flows, product pages, and payment integrations that drive sales.<\/p>\r\n <div class=\"service-benefit\">\u2191 Higher average order value<\/div>\r\n <\/div>\r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-icon\">\ud83d\udce3<\/div>\r\n <h3>Social Media Branding<\/h3>\r\n <p>Build a brand that clients trust before they even call. Consistent visual identity, content strategy, and social presence across every platform.<\/p>\r\n <div class=\"service-benefit\">\u2191 More inbound inquiries<\/div>\r\n <\/div>\r\n <div class=\"service-card reveal\">\r\n <div class=\"service-icon\">\ud83e\udd16<\/div>\r\n <h3>AI Automation<\/h3>\r\n <p>Chatbots that qualify leads 24\/7, automated follow-up sequences, and workflow automation via Zapier & n8n that run your business while you sleep.<\/p>\r\n <div class=\"service-benefit\">\u2191 Save 20+ hours per week<\/div>\r\n <\/div>\r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-icon\">\u2601\ufe0f<\/div>\r\n <h3>Cloud Computing & DevOps<\/h3>\r\n <p>AWS & Azure infrastructure designed for scale and reliability. CI\/CD pipelines, Docker containers, and 99.9% uptime \u2014 enterprise-grade without enterprise costs.<\/p>\r\n <div class=\"service-benefit\">\u2191 Reliable, scalable infrastructure<\/div>\r\n <\/div>\r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-icon\">\ud83d\udcca<\/div>\r\n <h3>Digital Strategy & SEO<\/h3>\r\n <p>Data-driven SEO and local search domination \u2014 critical for roofing companies targeting specific US markets. Get found first, get called first.<\/p>\r\n <div class=\"service-benefit\">\u2191 Rank #1 in your area<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ABOUT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"about\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-visual reveal\">\r\n <div class=\"about-main-card\">\r\n <div style=\"font-family:var(--font-head);font-size:1.1rem;font-weight:800;color:white;margin-bottom:0.5rem;\">Affix Soft \u2014 By the Numbers<\/div>\r\n <div style=\"font-size:0.85rem;color:rgba(255,255,255,0.45);margin-bottom:1.5rem;\">Results our clients experience within 90 days.<\/div>\r\n <div class=\"about-stat-grid\">\r\n <div class=\"about-stat\">\r\n <div class=\"about-stat-num text-grad\">150+<\/div>\r\n <div class=\"about-stat-desc\">Successful Projects<\/div>\r\n <\/div>\r\n <div class=\"about-stat\">\r\n <div class=\"about-stat-num text-grad\">98%<\/div>\r\n <div class=\"about-stat-desc\">On-Time Delivery Rate<\/div>\r\n <\/div>\r\n <div class=\"about-stat\">\r\n <div class=\"about-stat-num text-grad\">8+<\/div>\r\n <div class=\"about-stat-desc\">Years in Business<\/div>\r\n <\/div>\r\n <div class=\"about-stat\">\r\n <div class=\"about-stat-num text-grad\">40+<\/div>\r\n <div class=\"about-stat-desc\">US Clients Served<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-floating\">\r\n <div class=\"af-dot\"><\/div>\r\n <div class=\"af-text\">3 Active US Roofing Projects<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-copy reveal reveal-delay-2\">\r\n <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>About Affix Soft<\/div>\r\n <h2 class=\"section-title\">Your Reliable <span class=\"text-grad\">Digital Growth Partner<\/span><\/h2>\r\n <p>We're not just a development shop \u2014 we're a strategic digital partner that understands the unique challenges US-based businesses face, especially in competitive industries like roofing and home services.<\/p>\r\n <p>Affix Soft combines deep technical expertise with real-world business understanding to deliver solutions that generate measurable ROI. Every project we take on is built to perform, not just to look good.<\/p>\r\n <div class=\"mission-box\">\r\n <p>\"Our mission is simple: help American businesses grow faster, operate smarter, and compete harder through technology that actually works.\"<\/p>\r\n <\/div>\r\n <div class=\"about-pills\">\r\n <span class=\"pill\"><span class=\"pill-check\">\u2713<\/span> 100% IP Ownership<\/span>\r\n <span class=\"pill\"><span class=\"pill-check\">\u2713<\/span> US Timezone Support<\/span>\r\n <span class=\"pill\"><span class=\"pill-check\">\u2713<\/span> No Long Contracts<\/span>\r\n <span class=\"pill\"><span class=\"pill-check\">\u2713<\/span> Senior-Only Team<\/span>\r\n <span class=\"pill\"><span class=\"pill-check\">\u2713<\/span> 30-Day Money Back<\/span>\r\n <span class=\"pill\"><span class=\"pill-check\">\u2713<\/span> Roofing Industry Experts<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PORTFOLIO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"portfolio\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"centered reveal\">\r\n <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>Case Studies<\/div>\r\n <h2 class=\"section-title\">Real Results for <span class=\"text-grad\">Real Businesses<\/span><\/h2>\r\n <p class=\"section-sub\">We let the numbers do the talking. Here's what Affix Soft has delivered for businesses just like yours.<\/p>\r\n <\/div>\r\n <div class=\"portfolio-grid\">\r\n <div class=\"case-card reveal\">\r\n <div class=\"case-header\">\r\n <div class=\"case-type\">Roofing Company<\/div>\r\n <div class=\"case-name\">Texas Roof Masters \u2014 Lead Gen Platform<\/div>\r\n <\/div>\r\n <div class=\"case-body\">\r\n <div class=\"case-row\">\r\n <div class=\"case-row-label\">\ud83d\udd34 Problem<\/div>\r\n <div class=\"case-row-text\">No online presence, 100% reliant on word-of-mouth referrals. Missing out on local Google searches.<\/div>\r\n <\/div>\r\n <div class=\"case-row\">\r\n <div class=\"case-row-label\">\u2705 Solution<\/div>\r\n <div class=\"case-row-text\">Built a high-converting landing page with local SEO, Google Ads integration, and an AI chatbot for 24\/7 lead qualification.<\/div>\r\n <\/div>\r\n <div class=\"case-results\">\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">340%<\/div>\r\n <div class=\"result-label\">More Leads<\/div>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">#1<\/div>\r\n <div class=\"result-label\">Local Rank<\/div>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">90 Days<\/div>\r\n <div class=\"result-label\">To Results<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"case-card reveal reveal-delay-1\">\r\n <div class=\"case-header\" style=\"background:linear-gradient(135deg,#0a1a3a,#0c2040);\">\r\n <div class=\"case-type\">E-Commerce Brand<\/div>\r\n <div class=\"case-name\">HomeDecor Co. \u2014 Shopify Store<\/div>\r\n <\/div>\r\n <div class=\"case-body\">\r\n <div class=\"case-row\">\r\n <div class=\"case-row-label\">\ud83d\udd34 Problem<\/div>\r\n <div class=\"case-row-text\">Outdated WooCommerce store with slow load times causing 70% cart abandonment and poor mobile experience.<\/div>\r\n <\/div>\r\n <div class=\"case-row\">\r\n <div class=\"case-row-label\">\u2705 Solution<\/div>\r\n <div class=\"case-row-text\">Migrated to custom Shopify store with speed optimization, smart upsell flows, and email automation via Klaviyo.<\/div>\r\n <\/div>\r\n <div class=\"case-results\">\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">+127%<\/div>\r\n <div class=\"result-label\">Revenue<\/div>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">-52%<\/div>\r\n <div class=\"result-label\">Cart Abandon<\/div>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">98ms<\/div>\r\n <div class=\"result-label\">Load Time<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"case-card reveal reveal-delay-2\">\r\n <div class=\"case-header\" style=\"background:linear-gradient(135deg,#040d1a,#081528);\">\r\n <div class=\"case-type\">SaaS Startup<\/div>\r\n <div class=\"case-name\">PropTrack \u2014 AI Dashboard App<\/div>\r\n <\/div>\r\n <div class=\"case-body\">\r\n <div class=\"case-row\">\r\n <div class=\"case-row-label\">\ud83d\udd34 Problem<\/div>\r\n <div class=\"case-row-text\">Founders had a validated idea but no technical team. Needed an MVP in 60 days to show investors.<\/div>\r\n <\/div>\r\n <div class=\"case-row\">\r\n <div class=\"case-row-label\">\u2705 Solution<\/div>\r\n <div class=\"case-row-text\">Built full-stack SaaS app with React frontend, Node.js API, AWS infrastructure, and AI analytics dashboard.<\/div>\r\n <\/div>\r\n <div class=\"case-results\">\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">55 Days<\/div>\r\n <div class=\"result-label\">MVP Launched<\/div>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">$180K<\/div>\r\n <div class=\"result-label\">Seed Raised<\/div>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <div class=\"result-val text-grad\">99.9%<\/div>\r\n <div class=\"result-label\">Uptime SLA<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TESTIMONIALS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"testimonials\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"centered reveal\">\r\n <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>Client Reviews<\/div>\r\n <h2 class=\"section-title\">What Our Clients <span class=\"text-grad\">Say About Us<\/span><\/h2>\r\n <p class=\"section-sub\">Don't take our word for it. Here's what business owners across the US say after working with Affix Soft.<\/p>\r\n <\/div>\r\n <div class=\"testi-grid\">\r\n <div class=\"testi-card reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-text\">\"Affix Soft completely transformed our roofing business. We went from 2\u20133 leads per week to 15+ \u2014 all coming from our new website. The team was responsive, professional, and delivered exactly what they promised. Best investment we've made.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"avatar\" style=\"background:linear-gradient(135deg,var(--p1),var(--p2));\">MJ<\/div>\r\n <div>\r\n <div class=\"author-name\">Mike Johnson<\/div>\r\n <div class=\"author-role\">Owner, Johnson Roofing & Repair \u2014 Texas<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card reveal reveal-delay-1\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-text\">\"They built our Shopify store in under 3 weeks and our sales doubled within the first month. The AI chatbot they added handles customer questions automatically \u2014 I can't believe I waited this long to work with a proper agency.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"avatar\" style=\"background:linear-gradient(135deg,#0891b2,var(--accent));\">SR<\/div>\r\n <div>\r\n <div class=\"author-name\">Sarah Reynolds<\/div>\r\n <div class=\"author-role\">Founder, HomeStyle Collective \u2014 California<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card reveal reveal-delay-2\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-text\">\"As a startup founder, I needed a technical team I could trust. Affix Soft delivered our MVP ahead of schedule, helped us raise funding, and continues to iterate with us. They feel like a co-founder, not a contractor.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"avatar\" style=\"background:linear-gradient(135deg,#7c3aed,var(--p2));\">DK<\/div>\r\n <div>\r\n <div class=\"author-name\">David Kim<\/div>\r\n <div class=\"author-role\">CEO, PropTrack \u2014 New York<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-text\">\"We needed local SEO and a rebrand fast \u2014 roofing season doesn't wait. Affix Soft had us live in 10 days and we're now ranking #1 for 'roof repair near me' in our city. Game changer for our small business.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"avatar\" style=\"background:linear-gradient(135deg,#b45309,#d97706);\">RC<\/div>\r\n <div>\r\n <div class=\"author-name\">Robert Chen<\/div>\r\n <div class=\"author-role\">Owner, Summit Roofing \u2014 Florida<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card reveal reveal-delay-1\" style=\"grid-column: span 1;\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"testi-text\">\"The cloud migration Affix Soft handled for us saved us $4,000\/month in server costs and our apps run 3x faster now. Their DevOps team is phenomenal \u2014 clear communication throughout and zero downtime during the migration.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"avatar\" style=\"background:linear-gradient(135deg,#047857,#10b981);\">AL<\/div>\r\n <div>\r\n <div class=\"author-name\">Amanda Liu<\/div>\r\n <div class=\"author-role\">CTO, GrowthBase SaaS \u2014 Colorado<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testi-card reveal reveal-delay-2\" style=\"background:var(--grad-hero);border-color:rgba(32,82,254,0.4);\">\r\n <div style=\"font-family:var(--font-head);font-size:1.8rem;font-weight:900;color:white;line-height:1.1;margin-bottom:1rem;\">Ready to join our growing list of success stories?<\/div>\r\n <p style=\"color:rgba(255,255,255,0.6);font-size:0.9rem;margin-bottom:1.5rem;\">Get your free strategy session today. No obligations.<\/p>\r\n <a href=\"#contact\" class=\"btn btn-white\" style=\"width:100%;justify-content:center;\">Book Free Consultation \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TECH STACK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"tech\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"centered reveal\">\r\n <div class=\"eyebrow\" style=\"background:rgba(18,189,233,0.1);border-color:rgba(18,189,233,0.25);color:var(--accent);\">\r\n <span class=\"eyebrow-dot\"><\/span>Our Tech Stack\r\n <\/div>\r\n <h2 class=\"section-title\" style=\"color:white;\">Built With <span class=\"text-grad\">Enterprise-Grade<\/span> Technology<\/h2>\r\n <p class=\"section-sub\" style=\"color:rgba(255,255,255,0.5);\">We use battle-tested tools trusted by Fortune 500 companies \u2014 applied to your business at any scale.<\/p>\r\n <\/div>\r\n <div class=\"tech-grid\">\r\n <div class=\"tech-item reveal\"><div class=\"tech-logo\">\u2601\ufe0f<\/div><div class=\"tech-name\">AWS<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-1\"><div class=\"tech-logo\">\ud83d\udd37<\/div><div class=\"tech-name\">Microsoft Azure<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-2\"><div class=\"tech-logo\">\ud83d\udc33<\/div><div class=\"tech-name\">Docker<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-3\"><div class=\"tech-logo\">\u2388<\/div><div class=\"tech-name\">Kubernetes<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-4\"><div class=\"tech-logo\">\u269b\ufe0f<\/div><div class=\"tech-name\">React \/ Next.js<\/div><\/div>\r\n <div class=\"tech-item reveal\"><div class=\"tech-logo\">\ud83d\udfe2<\/div><div class=\"tech-name\">Node.js<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-1\"><div class=\"tech-logo\">\ud83d\uded2<\/div><div class=\"tech-name\">Shopify<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-2\"><div class=\"tech-logo\">\ud83d\udd35<\/div><div class=\"tech-name\">WordPress<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-3\"><div class=\"tech-logo\">\u26a1<\/div><div class=\"tech-name\">n8n Automation<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-4\"><div class=\"tech-logo\">\ud83d\udd17<\/div><div class=\"tech-name\">Zapier<\/div><\/div>\r\n <div class=\"tech-item reveal\"><div class=\"tech-logo\">\ud83e\udd16<\/div><div class=\"tech-name\">OpenAI \/ AI Tools<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-1\"><div class=\"tech-logo\">\ud83d\udc18<\/div><div class=\"tech-name\">PostgreSQL<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-2\"><div class=\"tech-logo\">\ud83c\udf43<\/div><div class=\"tech-name\">MongoDB<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-3\"><div class=\"tech-logo\">\ud83d\udd25<\/div><div class=\"tech-name\">Firebase<\/div><\/div>\r\n <div class=\"tech-item reveal reveal-delay-4\"><div class=\"tech-logo\">\ud83d\udcca<\/div><div class=\"tech-name\">Google Analytics<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"cta-main\">\r\n <div class=\"cta-orb cta-orb-1\"><\/div>\r\n <div class=\"cta-orb cta-orb-2\"><\/div>\r\n <div class=\"cta-inner reveal\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:white;\">\r\n <span class=\"eyebrow-dot\" style=\"background:white;\"><\/span>Let's Work Together\r\n <\/div>\r\n <h2 class=\"cta-title\">Ready to Grow Your Business<br>the Smart Way?<\/h2>\r\n <p class=\"cta-sub\">Join 150+ US businesses that trust Affix Soft to deliver results. Book your free 30-minute strategy session today \u2014 no sales pitch, just real insights.<\/p>\r\n <div class=\"cta-btns\">\r\n <a href=\"#contact\" class=\"btn btn-white\">\ud83d\udcc5 Book a Free Call<\/a>\r\n <a href=\"https:\/\/wa.me\/+923136375636\" target=\"_blank\" class=\"btn btn-ghost-white\">\ud83d\udcac WhatsApp Us Now<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CONTACT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"contact\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"reveal\">\r\n <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>Get In Touch<\/div>\r\n <h2 class=\"section-title\">Start Your Project <span class=\"text-grad\">Today<\/span><\/h2>\r\n <p class=\"section-sub\">Fill out the form below and our team will respond within 4 business hours. Prefer instant replies? Hit us on WhatsApp.<\/p>\r\n <\/div>\r\n\r\n <div class=\"contact-grid\">\r\n <div class=\"contact-info reveal\">\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\ud83d\udce7<\/div>\r\n <div class=\"contact-detail\">\r\n <h4>Email Us<\/h4>\r\n <p>info.affixsoft@gmail.com<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\ud83d\udcde<\/div>\r\n <div class=\"contact-detail\">\r\n <h4>Call \/ Text<\/h4>\r\n <p>+92 313 6375636<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\ud83d\udd50<\/div>\r\n <div class=\"contact-detail\">\r\n <h4>Response Time<\/h4>\r\n <p>Under 4 hours \u2014 business days<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\ud83d\udcc5<\/div>\r\n <div class=\"contact-detail\">\r\n <h4>Book a Call<\/h4>\r\n <p>Schedule via Calendly \u2014 free 30-min consult<\/p>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/wa.me\/+923136375636\" target=\"_blank\" class=\"wa-block\">\r\n <div class=\"wa-icon\">\ud83d\udcac<\/div>\r\n <div class=\"wa-text\">\r\n <h4>Message Us on WhatsApp<\/h4>\r\n <p>Fastest way to get a response \u2014 we reply in minutes<\/p>\r\n <\/div>\r\n <div style=\"color:white;margin-left:auto;font-size:1.2rem;\">\u2192<\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"contact-form reveal reveal-delay-2\">\r\n <h3 style=\"font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:var(--dark);margin-bottom:1.75rem;\">Send Us a Message<\/h3>\r\n <form id=\"contactForm\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label>First Name *<\/label>\r\n <input type=\"text\" placeholder=\"John\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Last Name *<\/label>\r\n <input type=\"text\" placeholder=\"Smith\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Business Email *<\/label>\r\n <input type=\"email\" placeholder=\"john@yourcompany.com\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Business Type<\/label>\r\n <select>\r\n <option value=\"\">Select your business type...<\/option>\r\n <option>Roofing \/ Home Services<\/option>\r\n <option>E-Commerce<\/option>\r\n <option>SaaS \/ Tech Startup<\/option>\r\n <option>Small \/ Medium Business<\/option>\r\n <option>Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>What service are you interested in?<\/label>\r\n <select>\r\n <option value=\"\">Select a service...<\/option>\r\n <option>Website Development<\/option>\r\n <option>E-Commerce Solutions<\/option>\r\n <option>AI Automation<\/option>\r\n <option>Cloud & DevOps<\/option>\r\n <option>Social Media Branding<\/option>\r\n <option>Full Digital Package<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Tell us about your project *<\/label>\r\n <textarea rows=\"4\" placeholder=\"Briefly describe your project, goals, and timeline...\" required><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"width:100%;justify-content:center;font-size:1rem;padding:16px;\">\r\n Send Message \u2014 We'll Reply Within 4 Hours \u2192\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<footer>\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <a href=\"#\" class=\"logo\" style=\"margin-bottom:0.5rem;display:inline-flex;\">\r\n <div class=\"logo-mark\">A<\/div>\r\n Affix<span style=\"color:var(--accent);\">Soft<\/span>\r\n <\/a>\r\n <p>Results-driven digital partner for US businesses. We build, automate, and scale \u2014 so you can focus on what matters most.<\/p>\r\n <div class=\"footer-socials\">\r\n <div class=\"social-btn\">in<\/div>\r\n <div class=\"social-btn\">\ud835\udd4f<\/div>\r\n <div class=\"social-btn\">f<\/div>\r\n <div class=\"social-btn\">\u25b6<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h5>Services<\/h5>\r\n <ul>\r\n <li><a href=\"#services\">Web Development<\/a><\/li>\r\n <li><a href=\"#services\">E-Commerce<\/a><\/li>\r\n <li><a href=\"#services\">AI Automation<\/a><\/li>\r\n <li><a href=\"#services\">Cloud & DevOps<\/a><\/li>\r\n <li><a href=\"#services\">Social Media<\/a><\/li>\r\n <li><a href=\"#services\">SEO & Strategy<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h5>Company<\/h5>\r\n <ul>\r\n <li><a href=\"#about\">About Us<\/a><\/li>\r\n <li><a href=\"#portfolio\">Case Studies<\/a><\/li>\r\n <li><a href=\"#testimonials\">Reviews<\/a><\/li>\r\n <li><a href=\"#tech\">Tech Stack<\/a><\/li>\r\n <li><a href=\"#\">Careers<\/a><\/li>\r\n <li><a href=\"#\">Blog<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h5>Contact<\/h5>\r\n <ul>\r\n <li><a href=\"mailto:info.affixsoft@gmail.com\">info.affixsoft@gmail.com<\/a><\/li>\r\n <li><a href=\"tel:+923136375636\">+92 313 6375636<\/a><\/li>\r\n <li><a href=\"https:\/\/wa.me\/+923136375636\">WhatsApp Us<\/a><\/li>\r\n <li><a href=\"#contact\">Book a Consult<\/a><\/li>\r\n <li><a href=\"#\">Privacy Policy<\/a><\/li>\r\n <li><a href=\"#\">Terms of Service<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <div>\u00a9 2026 Affix Soft. All rights reserved. Designed for US businesses that demand results.<\/div>\r\n <div style=\"display:flex;gap:1.5rem;\">\r\n <a href=\"#\" style=\"color:rgba(255,255,255,0.3);font-size:0.78rem;\">Privacy<\/a>\r\n <a href=\"#\" style=\"color:rgba(255,255,255,0.3);font-size:0.78rem;\">Terms<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/* \u2500\u2500 Nav scroll \u2500\u2500 *\/\r\nwindow.addEventListener('scroll', () => {\r\n document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 40);\r\n});\r\n\r\n\/* \u2500\u2500 Hamburger \u2500\u2500 *\/\r\ndocument.getElementById('hamburger').addEventListener('click', () => {\r\n document.getElementById('navLinks').classList.toggle('open');\r\n});\r\ndocument.querySelectorAll('#navLinks a').forEach(a => {\r\n a.addEventListener('click', () => document.getElementById('navLinks').classList.remove('open'));\r\n});\r\n\r\n\/* \u2500\u2500 Scroll reveal \u2500\u2500 *\/\r\nconst observer = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); observer.unobserve(e.target); } });\r\n}, { threshold: 0.1 });\r\ndocument.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n\r\n\/* \u2500\u2500 Smooth scroll \u2500\u2500 *\/\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(a => {\r\n a.addEventListener('click', e => {\r\n const t = document.querySelector(a.getAttribute('href'));\r\n if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth' }); }\r\n });\r\n});\r\n\r\n\/* \u2500\u2500 Contact form \u2500\u2500 *\/\r\ndocument.getElementById('contactForm').addEventListener('submit', e => {\r\n e.preventDefault();\r\n const btn = e.target.querySelector('button[type=\"submit\"]');\r\n btn.textContent = '\u2705 Sent! We\\'ll be in touch within 4 hours.';\r\n btn.style.background = 'linear-gradient(135deg,#22c55e,#16a34a)';\r\n btn.disabled = true;\r\n setTimeout(() => {\r\n btn.textContent = 'Send Message \u2014 We\\'ll Reply Within 4 Hours \u2192';\r\n btn.style.background = '';\r\n btn.disabled = false;\r\n }, 5000);\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Affix Soft | Digital Growth Partner for US Businesses A AffixSoft Services About Work Reviews Contact \ud83d\udcac WhatsApp Get Started \u2192 \u26a1 Trusted by US Businesses We Help Roofing Companies & SMEs Dominate Online Affix Soft builds high-performance websites, AI-powered automation, and cloud infrastructure that turn your digital presence into a 24\/7 lead machine. \ud83d\udcc5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-192290","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/pages\/192290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/comments?post=192290"}],"version-history":[{"count":17,"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/pages\/192290\/revisions"}],"predecessor-version":[{"id":192309,"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/pages\/192290\/revisions\/192309"}],"wp:attachment":[{"href":"https:\/\/affixsoft.cloud\/index.php\/wp-json\/wp\/v2\/media?parent=192290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}