{"id":500,"date":"2026-04-11T12:20:19","date_gmt":"2026-04-11T15:20:19","guid":{"rendered":"https:\/\/singlefuture.com.br\/?page_id=500"},"modified":"2026-04-11T13:58:11","modified_gmt":"2026-04-11T16:58:11","slug":"home","status":"publish","type":"page","link":"https:\/\/singlefuture.com.br\/","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\n Single Future \u2014 Next-Gen Software Agency<\/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;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap\"\r\n rel=\"stylesheet\" \/>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollToPlugin.min.js\"><\/script>\r\n <style>\r\n \/* \u2500\u2500\u2500 RESET & BASE \u2500\u2500\u2500 *\/\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --cyan: #00e5a8;\r\n --pink: #ff0080;\r\n --purple: #8b00ff;\r\n --green: #00ff88;\r\n --bg0: #050f14;\r\n --bg1: #081820;\r\n --bg2: #0d2030;\r\n --text: #cceedd;\r\n --muted: #3d6655;\r\n --glass: rgba(0, 229, 168, 0.04);\r\n --border: rgba(0, 229, 168, 0.15);\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n background: var(--bg0);\r\n color: var(--text);\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 17px;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n cursor: crosshair;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CUSTOM SCROLLBAR \u2500\u2500\u2500 *\/\r\n ::-webkit-scrollbar {\r\n width: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: var(--bg0);\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: var(--cyan);\r\n border-radius: 2px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 GRID BACKGROUND \u2500\u2500\u2500 *\/\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(0, 229, 168, 0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 229, 168, 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 \/* \u2500\u2500\u2500 SCANLINES \u2500\u2500\u2500 *\/\r\n body::after {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background: repeating-linear-gradient(0deg,\r\n transparent,\r\n transparent 2px,\r\n rgba(0, 0, 0, 0.08) 2px,\r\n rgba(0, 0, 0, 0.08) 4px);\r\n pointer-events: none;\r\n z-index: 999;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\r\n nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 20px 60px;\r\n background: rgba(2, 4, 8, 0.85);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--border);\r\n transition: padding .3s;\r\n }\r\n\r\n nav.scrolled {\r\n padding: 12px 60px;\r\n }\r\n\r\n .nav-logo {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1rem;\r\n font-weight: 900;\r\n color: var(--cyan);\r\n text-shadow: 0 0 20px var(--cyan);\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n }\r\n\r\n .nav-logo span {\r\n color: var(--pink);\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 36px;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 600;\r\n font-size: .85rem;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n text-decoration: none;\r\n transition: color .2s, text-shadow .2s;\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 width: 0;\r\n height: 1px;\r\n background: var(--cyan);\r\n box-shadow: 0 0 8px var(--cyan);\r\n transition: width .3s;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: var(--cyan);\r\n text-shadow: 0 0 12px var(--cyan);\r\n }\r\n\r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .nav-cta {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 700;\r\n font-size: .8rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--bg0);\r\n background: var(--cyan);\r\n border: none;\r\n padding: 10px 24px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);\r\n transition: background .2s, box-shadow .2s;\r\n }\r\n\r\n .nav-cta:hover {\r\n background: var(--pink);\r\n box-shadow: 0 0 24px var(--pink);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 HAMBURGER \u2500\u2500\u2500 *\/\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n cursor: pointer;\r\n z-index: 101;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 26px;\r\n height: 2px;\r\n background: var(--cyan);\r\n transition: all .3s;\r\n }\r\n\r\n .hamburger.open span:nth-child(1) {\r\n transform: translateY(7px) rotate(45deg);\r\n }\r\n\r\n .hamburger.open span:nth-child(2) {\r\n opacity: 0;\r\n }\r\n\r\n .hamburger.open span:nth-child(3) {\r\n transform: translateY(-7px) rotate(-45deg);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\r\n #hero {\r\n position: relative;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 120px 40px 80px;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-glow {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(120px);\r\n pointer-events: none;\r\n }\r\n\r\n .hero-glow-1 {\r\n width: 600px;\r\n height: 600px;\r\n background: rgba(0, 229, 168, 0.08);\r\n top: -100px;\r\n left: -200px;\r\n animation: drift1 8s ease-in-out infinite;\r\n }\r\n\r\n .hero-glow-2 {\r\n width: 500px;\r\n height: 500px;\r\n background: rgba(255, 0, 128, 0.07);\r\n bottom: -100px;\r\n right: -100px;\r\n animation: drift2 10s ease-in-out infinite;\r\n }\r\n\r\n .hero-glow-3 {\r\n width: 400px;\r\n height: 400px;\r\n background: rgba(139, 0, 255, 0.06);\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n animation: pulse-glow 6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes drift1 {\r\n\r\n 0%,\r\n 100% {\r\n transform: translate(0, 0)\r\n }\r\n\r\n 50% {\r\n transform: translate(40px, 30px)\r\n }\r\n }\r\n\r\n @keyframes drift2 {\r\n\r\n 0%,\r\n 100% {\r\n transform: translate(0, 0)\r\n }\r\n\r\n 50% {\r\n transform: translate(-30px, -40px)\r\n }\r\n }\r\n\r\n @keyframes pulse-glow {\r\n\r\n 0%,\r\n 100% {\r\n opacity: .6;\r\n transform: translate(-50%, -50%) scale(1)\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n transform: translate(-50%, -50%) scale(1.1)\r\n }\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .72rem;\r\n letter-spacing: 3px;\r\n color: var(--cyan);\r\n border: 1px solid var(--border);\r\n padding: 6px 18px;\r\n margin-bottom: 28px;\r\n animation: fadeUp .8s ease both;\r\n }\r\n\r\n .hero-badge::before {\r\n content: '\u25b6';\r\n font-size: .6rem;\r\n animation: blink 1.2s step-end infinite;\r\n }\r\n\r\n @keyframes blink {\r\n\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 h1 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: clamp(2.8rem, 7vw, 5.5rem);\r\n font-weight: 900;\r\n line-height: 1.05;\r\n letter-spacing: -1px;\r\n margin-bottom: 20px;\r\n animation: fadeUp .8s .15s ease both;\r\n }\r\n\r\n h1 .line1 {\r\n display: block;\r\n color: #fff;\r\n text-shadow: 0 0 60px rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n h1 .line2 {\r\n display: block;\r\n color: var(--cyan);\r\n text-shadow:\r\n 0 0 40px rgba(0, 229, 168, 0.7),\r\n 0 0 80px rgba(0, 229, 168, 0.35),\r\n 0 0 120px rgba(0, 229, 168, 0.15);\r\n }\r\n\r\n h1 .line2 .hero-char {\r\n color: var(--cyan);\r\n display: inline-block;\r\n }\r\n\r\n .hero-sub {\r\n font-size: 1.1rem;\r\n font-weight: 400;\r\n color: var(--muted);\r\n max-width: 560px;\r\n margin: 0 auto 44px;\r\n animation: fadeUp .8s .3s ease both;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n animation: fadeUp .8s .45s ease both;\r\n }\r\n\r\n .btn-primary {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 700;\r\n font-size: .88rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--bg0);\r\n background: var(--cyan);\r\n border: none;\r\n padding: 16px 40px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);\r\n transition: all .25s;\r\n box-shadow: 0 0 30px rgba(0, 229, 168, 0.3);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: var(--pink);\r\n box-shadow: 0 0 50px rgba(255, 0, 128, 0.5);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-secondary {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 600;\r\n font-size: .88rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--cyan);\r\n background: transparent;\r\n border: 1px solid var(--cyan);\r\n padding: 16px 40px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);\r\n transition: all .25s;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: rgba(0, 229, 168, 0.08);\r\n box-shadow: 0 0 30px rgba(0, 229, 168, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .hero-stats {\r\n display: flex;\r\n justify-content: center;\r\n gap: 60px;\r\n margin-top: 80px;\r\n padding-top: 50px;\r\n border-top: 1px solid var(--border);\r\n animation: fadeUp .8s .6s ease both;\r\n flex-wrap: wrap;\r\n gap: 40px;\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n }\r\n\r\n .stat-num {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n color: var(--cyan);\r\n text-shadow: 0 0 20px var(--cyan);\r\n line-height: 1;\r\n }\r\n\r\n .stat-label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .72rem;\r\n letter-spacing: 2px;\r\n color: var(--muted);\r\n margin-top: 6px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SCROLL INDICATOR \u2500\u2500\u2500 *\/\r\n .scroll-indicator {\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: fadeUp .8s .9s ease both;\r\n }\r\n\r\n .scroll-indicator span {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 3px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n }\r\n\r\n .scroll-line {\r\n width: 1px;\r\n height: 40px;\r\n background: linear-gradient(to bottom, var(--cyan), transparent);\r\n animation: scrollDrop 1.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes scrollDrop {\r\n 0% {\r\n transform: scaleY(0);\r\n transform-origin: top\r\n }\r\n\r\n 50% {\r\n transform: scaleY(1);\r\n transform-origin: top\r\n }\r\n\r\n 51% {\r\n transform: scaleY(1);\r\n transform-origin: bottom\r\n }\r\n\r\n 100% {\r\n transform: scaleY(0);\r\n transform-origin: bottom\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SECTION BASE \u2500\u2500\u2500 *\/\r\n section {\r\n position: relative;\r\n z-index: 1;\r\n padding: 100px 60px;\r\n }\r\n\r\n .section-label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .72rem;\r\n letter-spacing: 4px;\r\n color: var(--cyan);\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n display: block;\r\n }\r\n\r\n .section-title {\r\n font-family: 'Orbitron', monospace;\r\n font-size: clamp(1.8rem, 4vw, 3rem);\r\n font-weight: 700;\r\n color: #fff;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .section-sub {\r\n font-size: 1rem;\r\n color: var(--muted);\r\n max-width: 500px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 64px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SERVICES \u2500\u2500\u2500 *\/\r\n #services {\r\n background: var(--bg1);\r\n }\r\n\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 2px;\r\n }\r\n\r\n .service-card {\r\n background: var(--glass);\r\n border: 1px solid var(--border);\r\n padding: 48px 36px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: transform .3s, border-color .3s, background .3s;\r\n cursor: default;\r\n }\r\n\r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--cyan), transparent);\r\n transition: left .4s;\r\n }\r\n\r\n .service-card:hover {\r\n transform: translateY(-4px);\r\n border-color: rgba(0, 229, 168, 0.4);\r\n background: rgba(0, 229, 168, 0.06);\r\n }\r\n\r\n .service-card:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .service-icon {\r\n width: 52px;\r\n height: 52px;\r\n margin-bottom: 24px;\r\n position: relative;\r\n }\r\n\r\n .service-icon svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .service-num {\r\n position: absolute;\r\n top: 24px;\r\n right: 28px;\r\n font-family: 'Orbitron', monospace;\r\n font-size: .7rem;\r\n color: var(--border);\r\n letter-spacing: 2px;\r\n }\r\n\r\n .service-card h3 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n color: #fff;\r\n margin-bottom: 12px;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .service-card p {\r\n font-size: .95rem;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n }\r\n\r\n .service-tag {\r\n display: inline-block;\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 2px;\r\n color: var(--cyan);\r\n border: 1px solid rgba(0, 229, 168, 0.2);\r\n padding: 3px 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 PROCESS \u2500\u2500\u2500 *\/\r\n #process {\r\n background: var(--bg0);\r\n }\r\n\r\n .process-line {\r\n display: flex;\r\n gap: 0;\r\n position: relative;\r\n }\r\n\r\n .process-line::before {\r\n content: '';\r\n position: absolute;\r\n top: 32px;\r\n left: 32px;\r\n right: 32px;\r\n height: 1px;\r\n background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));\r\n opacity: .3;\r\n }\r\n\r\n .process-step {\r\n flex: 1;\r\n padding: 0 24px;\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .process-dot {\r\n width: 64px;\r\n height: 64px;\r\n border: 2px solid var(--cyan);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 24px;\r\n background: var(--bg0);\r\n font-family: 'Orbitron', monospace;\r\n font-size: .8rem;\r\n font-weight: 700;\r\n color: var(--cyan);\r\n text-shadow: 0 0 12px var(--cyan);\r\n box-shadow: 0 0 20px rgba(0, 229, 168, 0.2), inset 0 0 20px rgba(0, 229, 168, 0.05);\r\n position: relative;\r\n z-index: 1;\r\n transition: all .3s;\r\n }\r\n\r\n .process-step:hover .process-dot {\r\n background: var(--cyan);\r\n color: var(--bg0);\r\n box-shadow: 0 0 40px var(--cyan);\r\n }\r\n\r\n .process-step h4 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .85rem;\r\n font-weight: 600;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .process-step p {\r\n font-size: .88rem;\r\n color: var(--muted);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 PROJECTS \u2500\u2500\u2500 *\/\r\n #projects {\r\n background: var(--bg1);\r\n }\r\n\r\n .projects-filters {\r\n display: flex;\r\n gap: 12px;\r\n margin-bottom: 48px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .filter-btn {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .72rem;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n background: transparent;\r\n border: 1px solid var(--border);\r\n padding: 8px 20px;\r\n cursor: pointer;\r\n transition: all .2s;\r\n }\r\n\r\n .filter-btn.active,\r\n .filter-btn:hover {\r\n color: var(--cyan);\r\n border-color: var(--cyan);\r\n box-shadow: 0 0 15px rgba(0, 229, 168, 0.15);\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .project-card {\r\n background: var(--bg2);\r\n border: 1px solid var(--border);\r\n overflow: hidden;\r\n position: relative;\r\n transition: transform .3s, border-color .3s;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-6px);\r\n border-color: rgba(0, 229, 168, 0.35);\r\n }\r\n\r\n .project-thumb {\r\n height: 200px;\r\n position: relative;\r\n overflow: hidden;\r\n background: var(--bg0);\r\n }\r\n\r\n .project-thumb-inner {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Orbitron', monospace;\r\n font-size: 3rem;\r\n font-weight: 900;\r\n letter-spacing: -2px;\r\n transition: transform .4s;\r\n }\r\n\r\n .project-card:hover .project-thumb-inner {\r\n transform: scale(1.06);\r\n }\r\n\r\n .project-thumb-inner.cyan {\r\n color: var(--cyan);\r\n text-shadow: 0 0 40px var(--cyan);\r\n background: radial-gradient(ellipse at center, rgba(0, 229, 168, 0.1), transparent 70%);\r\n }\r\n\r\n .project-thumb-inner.pink {\r\n color: var(--pink);\r\n text-shadow: 0 0 40px var(--pink);\r\n background: radial-gradient(ellipse at center, rgba(255, 0, 128, 0.1), transparent 70%);\r\n }\r\n\r\n .project-thumb-inner.purple {\r\n color: var(--purple);\r\n text-shadow: 0 0 40px var(--purple);\r\n background: radial-gradient(ellipse at center, rgba(139, 0, 255, 0.1), transparent 70%);\r\n }\r\n\r\n .project-thumb-inner.green {\r\n color: var(--green);\r\n text-shadow: 0 0 40px var(--green);\r\n background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.1), transparent 70%);\r\n }\r\n\r\n .project-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(2, 4, 8, 0.85);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity .3s;\r\n }\r\n\r\n .project-card:hover .project-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .project-overlay a {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .75rem;\r\n letter-spacing: 3px;\r\n color: var(--cyan);\r\n text-decoration: none;\r\n border: 1px solid var(--cyan);\r\n padding: 10px 24px;\r\n transition: all .2s;\r\n }\r\n\r\n .project-overlay a:hover {\r\n background: var(--cyan);\r\n color: var(--bg0);\r\n }\r\n\r\n .project-body {\r\n padding: 28px;\r\n }\r\n\r\n .project-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .project-cat {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 3px;\r\n color: var(--cyan);\r\n text-transform: uppercase;\r\n }\r\n\r\n .project-year {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n color: var(--muted);\r\n }\r\n\r\n .project-card h3 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .95rem;\r\n font-weight: 600;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .project-card p {\r\n font-size: .9rem;\r\n color: var(--muted);\r\n }\r\n\r\n .project-tags {\r\n display: flex;\r\n gap: 8px;\r\n flex-wrap: wrap;\r\n margin-top: 16px;\r\n }\r\n\r\n .project-tag {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .62rem;\r\n letter-spacing: 1px;\r\n color: var(--muted);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n padding: 2px 8px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 TECH STACK \u2500\u2500\u2500 *\/\r\n #stack {\r\n background: var(--bg0);\r\n }\r\n\r\n .stack-marquee {\r\n overflow: hidden;\r\n margin: -12px 0;\r\n padding: 12px 0;\r\n }\r\n\r\n .stack-track {\r\n display: flex;\r\n gap: 32px;\r\n animation: marquee 30s linear infinite;\r\n width: max-content;\r\n }\r\n\r\n .stack-track:hover {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes marquee {\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 .stack-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: var(--glass);\r\n border: 1px solid var(--border);\r\n padding: 12px 24px;\r\n white-space: nowrap;\r\n transition: border-color .2s;\r\n }\r\n\r\n .stack-item:hover {\r\n border-color: rgba(0, 229, 168, 0.35);\r\n }\r\n\r\n .stack-item .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--cyan);\r\n box-shadow: 0 0 8px var(--cyan);\r\n }\r\n\r\n .stack-item span {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .82rem;\r\n letter-spacing: 1px;\r\n color: var(--text);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 ABOUT \u2500\u2500\u2500 *\/\r\n #about {\r\n background: var(--bg1);\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 height: 400px;\r\n }\r\n\r\n .about-box {\r\n position: absolute;\r\n border: 1px solid var(--border);\r\n background: var(--glass);\r\n padding: 24px;\r\n }\r\n\r\n .about-box-main {\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .about-code {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .78rem;\r\n line-height: 2;\r\n color: var(--muted);\r\n }\r\n\r\n .about-code .kw {\r\n color: var(--purple);\r\n }\r\n\r\n .about-code .fn {\r\n color: var(--cyan);\r\n }\r\n\r\n .about-code .str {\r\n color: var(--green);\r\n }\r\n\r\n .about-code .num {\r\n color: var(--pink);\r\n }\r\n\r\n .about-code .cm {\r\n color: var(--muted);\r\n opacity: .6;\r\n }\r\n\r\n .about-accent-1 {\r\n position: absolute;\r\n top: -20px;\r\n right: -20px;\r\n width: 120px;\r\n height: 120px;\r\n border: 1px solid rgba(0, 229, 168, .2);\r\n background: transparent;\r\n animation: rotate-slow 12s linear infinite;\r\n }\r\n\r\n .about-accent-2 {\r\n position: absolute;\r\n bottom: -20px;\r\n left: -20px;\r\n width: 80px;\r\n height: 80px;\r\n border: 1px solid rgba(255, 0, 128, .2);\r\n background: transparent;\r\n animation: rotate-slow 8s linear infinite reverse;\r\n }\r\n\r\n @keyframes rotate-slow {\r\n from {\r\n transform: rotate(0deg)\r\n }\r\n\r\n to {\r\n transform: rotate(360deg)\r\n }\r\n }\r\n\r\n .about-content h2 {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .about-content p {\r\n color: var(--muted);\r\n margin-bottom: 16px;\r\n font-size: 1rem;\r\n }\r\n\r\n .about-values {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n margin-top: 32px;\r\n }\r\n\r\n .value-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 16px;\r\n border: 1px solid var(--border);\r\n background: var(--glass);\r\n transition: border-color .2s;\r\n }\r\n\r\n .value-row:hover {\r\n border-color: rgba(0, 229, 168, .3);\r\n }\r\n\r\n .value-icon {\r\n color: var(--cyan);\r\n font-size: 1.2rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .value-row h4 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .82rem;\r\n color: #fff;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .value-row p {\r\n font-size: .85rem;\r\n color: var(--muted);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\r\n #testimonials {\r\n background: var(--bg0);\r\n }\r\n\r\n .testimonials-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .testimonial-card {\r\n background: var(--bg2);\r\n border: 1px solid var(--border);\r\n padding: 36px;\r\n position: relative;\r\n transition: border-color .3s, transform .3s;\r\n }\r\n\r\n .testimonial-card:hover {\r\n border-color: rgba(0, 229, 168, .3);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .testimonial-quote {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 3rem;\r\n color: var(--cyan);\r\n opacity: .3;\r\n line-height: 1;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .testimonial-card p {\r\n font-size: .95rem;\r\n color: var(--text);\r\n line-height: 1.8;\r\n margin-bottom: 28px;\r\n font-style: italic;\r\n }\r\n\r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n\r\n .author-avatar {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n border: 2px solid var(--cyan);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Orbitron', monospace;\r\n font-size: .8rem;\r\n color: var(--cyan);\r\n background: var(--bg0);\r\n box-shadow: 0 0 12px rgba(0, 229, 168, .2);\r\n }\r\n\r\n .author-info strong {\r\n display: block;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 700;\r\n color: #fff;\r\n font-size: .95rem;\r\n }\r\n\r\n .author-info span {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 1px;\r\n color: var(--cyan);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\r\n #contact {\r\n background: var(--bg1);\r\n }\r\n\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1.5fr;\r\n gap: 80px;\r\n align-items: start;\r\n }\r\n\r\n .contact-info h2 {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .contact-info p {\r\n color: var(--muted);\r\n margin-bottom: 40px;\r\n font-size: 1rem;\r\n }\r\n\r\n .contact-methods {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .contact-method {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 16px 20px;\r\n border: 1px solid var(--border);\r\n background: var(--glass);\r\n text-decoration: none;\r\n transition: border-color .2s, background .2s;\r\n }\r\n\r\n .contact-method:hover {\r\n border-color: var(--cyan);\r\n background: rgba(0, 229, 168, .05);\r\n }\r\n\r\n .cm-icon {\r\n color: var(--cyan);\r\n font-size: 1.1rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .cm-label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 2px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n display: block;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .cm-value {\r\n font-size: .92rem;\r\n color: #fff;\r\n }\r\n\r\n \/* FORM *\/\r\n .contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .form-field {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n }\r\n\r\n .form-field label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 3px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n }\r\n\r\n .form-field input,\r\n .form-field textarea,\r\n .form-field select {\r\n background: var(--bg0);\r\n border: 1px solid var(--border);\r\n color: var(--text);\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: .95rem;\r\n padding: 14px 16px;\r\n outline: none;\r\n transition: border-color .2s, box-shadow .2s;\r\n resize: none;\r\n appearance: none;\r\n }\r\n\r\n .form-field input:focus,\r\n .form-field textarea:focus,\r\n .form-field select:focus {\r\n border-color: var(--cyan);\r\n box-shadow: 0 0 16px rgba(0, 229, 168, .1);\r\n }\r\n\r\n .form-field textarea {\r\n height: 120px;\r\n }\r\n\r\n .form-field select option {\r\n background: var(--bg1);\r\n }\r\n\r\n .form-submit {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 700;\r\n font-size: .88rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--bg0);\r\n background: var(--cyan);\r\n border: none;\r\n padding: 18px 48px;\r\n cursor: pointer;\r\n clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);\r\n transition: all .25s;\r\n box-shadow: 0 0 30px rgba(0, 229, 168, .25);\r\n align-self: flex-start;\r\n }\r\n\r\n .form-submit:hover {\r\n background: var(--pink);\r\n box-shadow: 0 0 50px rgba(255, 0, 128, .4);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\r\n footer {\r\n background: var(--bg0);\r\n border-top: 1px solid var(--border);\r\n padding: 60px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 60px;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .footer-brand p {\r\n font-size: .9rem;\r\n color: var(--muted);\r\n margin-top: 16px;\r\n max-width: 260px;\r\n }\r\n\r\n .footer-col h5 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .72rem;\r\n font-weight: 600;\r\n color: #fff;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .footer-col ul {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n .footer-col a {\r\n font-size: .88rem;\r\n color: var(--muted);\r\n text-decoration: none;\r\n transition: color .2s;\r\n font-family: 'Rajdhani', sans-serif;\r\n }\r\n\r\n .footer-col a:hover {\r\n color: var(--cyan);\r\n }\r\n\r\n .footer-bottom {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--border);\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n }\r\n\r\n .footer-bottom p {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .68rem;\r\n letter-spacing: 1px;\r\n color: var(--muted);\r\n }\r\n\r\n .footer-social {\r\n display: flex;\r\n gap: 14px;\r\n }\r\n\r\n .social-link {\r\n width: 36px;\r\n height: 36px;\r\n border: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--muted);\r\n text-decoration: none;\r\n transition: all .2s;\r\n font-size: .85rem;\r\n }\r\n\r\n .social-link:hover {\r\n border-color: var(--cyan);\r\n color: var(--cyan);\r\n box-shadow: 0 0 12px rgba(0, 229, 168, .2);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\r\n @keyframes fadeUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px)\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0)\r\n }\r\n }\r\n\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: opacity .7s ease, transform .7s ease;\r\n }\r\n\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CURSOR \u2500\u2500\u2500 *\/\r\n .cursor-dot {\r\n position: fixed;\r\n width: 8px;\r\n height: 8px;\r\n background: var(--cyan);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 10000;\r\n transform: translate(-50%, -50%);\r\n box-shadow: 0 0 12px var(--cyan);\r\n transition: transform .05s;\r\n }\r\n\r\n .cursor-ring {\r\n position: fixed;\r\n width: 32px;\r\n height: 32px;\r\n border: 1px solid rgba(0, 229, 168, .5);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9999;\r\n transform: translate(-50%, -50%);\r\n transition: transform .12s, width .2s, height .2s, opacity .2s;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 MOBILE \u2500\u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n\r\n .about-grid,\r\n .contact-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .about-visual {\r\n display: none;\r\n }\r\n\r\n .footer-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n\r\n .process-line {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .process-line::before {\r\n display: none;\r\n }\r\n\r\n .process-step {\r\n flex: 1 1 50%;\r\n margin-bottom: 40px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n nav {\r\n padding: 16px 24px;\r\n }\r\n\r\n nav.scrolled {\r\n padding: 10px 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-menu {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(2, 4, 8, 0.97);\r\n backdrop-filter: blur(20px);\r\n z-index: 99;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 32px;\r\n transform: translateX(100%);\r\n transition: transform .3s;\r\n }\r\n\r\n .mobile-menu.open {\r\n transform: translateX(0);\r\n }\r\n\r\n .mobile-menu a {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n letter-spacing: 4px;\r\n color: #fff;\r\n text-decoration: none;\r\n text-transform: uppercase;\r\n transition: color .2s;\r\n }\r\n\r\n .mobile-menu a:hover {\r\n color: var(--cyan);\r\n }\r\n\r\n section {\r\n padding: 70px 24px;\r\n }\r\n\r\n .hero-stats {\r\n gap: 24px;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n gap: 36px;\r\n }\r\n\r\n .footer-bottom {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SPACE HERO \u2500\u2500\u2500 *\/\r\n #hero {\r\n background: transparent;\r\n }\r\n\r\n #spaceCanvas {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .nebula-layer {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .nebula-1 {\r\n background:\r\n radial-gradient(ellipse 60% 40% at 15% 30%, rgba(0, 229, 168, 0.07) 0%, transparent 60%),\r\n radial-gradient(ellipse 50% 60% at 80% 70%, rgba(139, 0, 255, 0.08) 0%, transparent 60%),\r\n radial-gradient(ellipse 40% 40% at 60% 20%, rgba(0, 80, 180, 0.06) 0%, transparent 60%);\r\n }\r\n\r\n .nebula-2 {\r\n background:\r\n radial-gradient(ellipse 70% 30% at 50% 80%, rgba(0, 229, 168, 0.04) 0%, transparent 70%),\r\n radial-gradient(ellipse 30% 50% at 20% 70%, rgba(255, 0, 128, 0.05) 0%, transparent 60%);\r\n }\r\n\r\n \/* \u2500\u2500 FLOATING PARTICLES \u2500\u2500 *\/\r\n .space-particle {\r\n position: absolute;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n \/* \u2500\u2500 HERO CONTENT INIT STATE (GSAP will animate in) \u2500\u2500 *\/\r\n .hero-badge {\r\n opacity: 0;\r\n }\r\n\r\n .hero-char {\r\n display: inline-block;\r\n opacity: 0;\r\n }\r\n\r\n .hero-sub {\r\n opacity: 0;\r\n }\r\n\r\n .hero-buttons {\r\n opacity: 0;\r\n }\r\n\r\n .hero-stats {\r\n opacity: 0;\r\n }\r\n\r\n .scroll-indicator {\r\n opacity: 0;\r\n }\r\n\r\n \/* \u2500\u2500 GSAP REVEAL BASE (replaces CSS .reveal) \u2500\u2500 *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n \/* \u2500\u2500 ORBIT RING \u2500\u2500 *\/\r\n .orbit-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1px solid rgba(0, 229, 168, 0.08);\r\n pointer-events: none;\r\n z-index: 0;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n animation: orbit-pulse 6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes orbit-pulse {\r\n\r\n 0%,\r\n 100% {\r\n opacity: .4;\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n\r\n 50% {\r\n opacity: .8;\r\n transform: translate(-50%, -50%) scale(1.03);\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 SHOOTING STAR (created by JS) \u2500\u2500 *\/\r\n .shooting-star {\r\n position: absolute;\r\n height: 1px;\r\n background: linear-gradient(90deg, rgba(0, 229, 168, 0), #00e5a8, rgba(255, 255, 255, 0.8), rgba(0, 229, 168, 0));\r\n border-radius: 2px;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n \/* \u2500\u2500 PLANET \u2500\u2500 *\/\r\n .planet {\r\n position: absolute;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n \/* \u2500\u2500 SECTION TITLE CHAR SPLIT \u2500\u2500 *\/\r\n .split-char {\r\n display: inline-block;\r\n }\r\n\r\n \/* \u2500\u2500 SERVICE CARD GSAP \u2500\u2500 *\/\r\n .service-card {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n\r\n \/* \u2500\u2500 PROCESS STEP \u2500\u2500 *\/\r\n .process-step {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n \/* \u2500\u2500 PROJECT CARD \u2500\u2500 *\/\r\n .project-card {\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.97);\r\n }\r\n\r\n \/* \u2500\u2500 TESTIMONIAL \u2500\u2500 *\/\r\n .testimonial-card {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n \/* \u2500\u2500 COUNTER glitch flicker \u2500\u2500 *\/\r\n @keyframes glitch-num {\r\n 0% {\r\n text-shadow: 0 0 12px var(--cyan);\r\n }\r\n\r\n 20% {\r\n text-shadow: 3px 0 0 var(--pink), -3px 0 0 var(--cyan);\r\n }\r\n\r\n 40% {\r\n text-shadow: 0 0 20px var(--cyan);\r\n }\r\n\r\n 60% {\r\n text-shadow: -3px 0 0 var(--pink), 3px 0 0 var(--cyan);\r\n }\r\n\r\n 100% {\r\n text-shadow: 0 0 12px var(--cyan);\r\n }\r\n }\r\n\r\n .stat-num.counting {\r\n animation: glitch-num .5s steps(1) infinite;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <!-- CURSOR -->\r\n <div class=\"cursor-dot\" id=\"cursorDot\"><\/div>\r\n <div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\r\n\r\n <!-- MOBILE MENU -->\r\n <div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <a href=\"#hero\" onclick=\"toggleMenu()\">Home<\/a>\r\n <a href=\"#services\" onclick=\"toggleMenu()\">Servi\u00e7os<\/a>\r\n <a href=\"#projects\" onclick=\"toggleMenu()\">Projetos<\/a>\r\n <a href=\"#about\" onclick=\"toggleMenu()\">Sobre<\/a>\r\n <a href=\"#contact\" onclick=\"toggleMenu()\">Contato<\/a>\r\n <\/div>\r\n\r\n <!-- NAV -->\r\n <nav id=\"navbar\">\r\n <a href=\"#hero\" style=\"display:flex;align-items:center;\"><img decoding=\"async\"\r\n src=\"https:\/\/singlefuture.com.br\/wp-content\/uploads\/2026\/04\/Captura-de-tela-2026-04-11-123955.png\"\r\n alt=\"Single Future\"\r\n style=\"height:46px;width:auto;filter:drop-shadow(0 0 10px #00e5a8); border-radius:50%;\" \/><\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#services\">Servi\u00e7os<\/a><\/li>\r\n <li><a href=\"#projects\">Projetos<\/a><\/li>\r\n <li><a href=\"#process\">Processo<\/a><\/li>\r\n <li><a href=\"#about\">Sobre<\/a><\/li>\r\n <li><a href=\"#contact\">Contato<\/a><\/li>\r\n <\/ul>\r\n <a class=\"nav-cta\" href=\"#contact\">Fale Conosco<\/a>\r\n <div class=\"hamburger\" id=\"hamburger\" onclick=\"toggleMenu()\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- HERO -->\r\n <section id=\"hero\">\r\n <!-- Space layers -->\r\n <canvas id=\"spaceCanvas\"><\/canvas>\r\n <div class=\"nebula-layer nebula-1\"><\/div>\r\n <div class=\"nebula-layer nebula-2\"><\/div>\r\n\r\n <!-- Orbit rings -->\r\n <div class=\"orbit-ring\" style=\"width:500px;height:500px;animation-delay:0s;\"><\/div>\r\n <div class=\"orbit-ring\" style=\"width:800px;height:800px;animation-delay:2s;border-color:rgba(0,229,168,0.05);\">\r\n <\/div>\r\n <div class=\"orbit-ring\"\r\n style=\"width:1100px;height:1100px;animation-delay:4s;border-color:rgba(139,0,255,0.05);\"><\/div>\r\n\r\n <!-- Planets -->\r\n <div class=\"planet\" id=\"planet1\" style=\"\r\n width:80px;height:80px;top:15%;right:10%;\r\n background: radial-gradient(circle at 35% 35%, #1a3a2a, #050f14);\r\n border: 1px solid rgba(0,229,168,0.2);\r\n box-shadow: 0 0 30px rgba(0,229,168,0.1), inset 0 0 20px rgba(0,229,168,0.05);\r\n opacity:0;\r\n \"><\/div>\r\n <div class=\"planet\" id=\"planet2\" style=\"\r\n width:40px;height:40px;top:60%;left:6%;\r\n background: radial-gradient(circle at 40% 30%, #2a1a3a, #050f14);\r\n border: 1px solid rgba(139,0,255,0.25);\r\n box-shadow: 0 0 20px rgba(139,0,255,0.12);\r\n opacity:0;\r\n \"><\/div>\r\n <div class=\"planet\" id=\"planet3\" style=\"\r\n width:18px;height:18px;top:30%;left:15%;\r\n background: rgba(0,229,168,0.15);\r\n border: 1px solid rgba(0,229,168,0.3);\r\n box-shadow: 0 0 12px rgba(0,229,168,0.3);\r\n opacity:0;\r\n \"><\/div>\r\n\r\n <!-- Hero content -->\r\n <div id=\"heroContent\" style=\"position:relative;z-index:1;max-width:900px\">\r\n <div class=\"hero-badge\" id=\"heroBadge\">NEXT-GEN SOFTWARE AGENCY \u2014 EST. 2026<\/div>\r\n\r\n <h1 id=\"heroTitle\">\r\n <span class=\"line1\" id=\"heroLine1\">CONSTRUINDO O<\/span>\r\n <span class=\"line2\" id=\"heroLine2\">FUTURO DIGITAL<\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-sub\">\r\n Transformamos ideias complexas em solu\u00e7\u00f5es de software extraordin\u00e1rias.\r\n Da arquitetura \u00e0 entrega \u2014 com precis\u00e3o, velocidade e excel\u00eancia.\r\n <\/p>\r\n\r\n <div class=\"hero-buttons\">\r\n <a class=\"btn-primary\" href=\"#projects\">Ver Projetos<\/a>\r\n <a class=\"btn-secondary\" href=\"#contact\">Iniciar Projeto<\/a>\r\n <\/div>\r\n\r\n <div class=\"hero-stats\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"47\">0<\/div>\r\n <div class=\"stat-label\">Projetos Entregues<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"98\">0<\/div>\r\n <div class=\"stat-label\">% Satisfa\u00e7\u00e3o<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"12\">0<\/div>\r\n <div class=\"stat-label\">Clientes Ativos<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"5\">0<\/div>\r\n <div class=\"stat-label\">Anos no Mercado<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div><!-- \/heroContent -->\r\n\r\n <div class=\"scroll-indicator\">\r\n <span>Scroll<\/span>\r\n <div class=\"scroll-line\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SERVICES -->\r\n <section id=\"services\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-label\">\/\/ O QUE FAZEMOS<\/span>\r\n <h2 class=\"section-title\">Nossos Servi\u00e7os<\/h2>\r\n <p class=\"section-sub\">Solu\u00e7\u00f5es end-to-end para empresas que precisam de mais do que c\u00f3digo \u2014 precisam de\r\n parceiros.<\/p>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n <div class=\"service-card reveal\">\r\n <span class=\"service-num\">01<\/span>\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 52 52\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"44\" height=\"44\" stroke=\"#00e5a8\" stroke-width=\"1.5\" opacity=\".3\" \/>\r\n <polyline points=\"14,26 22,34 38,18\" stroke=\"#00e5a8\" stroke-width=\"2\" fill=\"none\" \/>\r\n <circle cx=\"26\" cy=\"26\" r=\"18\" stroke=\"#00e5a8\" stroke-width=\"1\" opacity=\".2\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Desenvolvimento Web<\/h3>\r\n <p>Aplica\u00e7\u00f5es web modernas e escal\u00e1veis com as melhores tecnologias do mercado. React, Next.js, Node.js\r\n e muito mais.<\/p>\r\n <span class=\"service-tag\">REACT \u00b7 NEXT.JS \u00b7 NODE<\/span>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal\">\r\n <span class=\"service-num\">02<\/span>\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 52 52\" fill=\"none\">\r\n <rect x=\"10\" y=\"8\" width=\"20\" height=\"36\" rx=\"3\" stroke=\"#ff0080\" stroke-width=\"1.5\" \/>\r\n <rect x=\"22\" y=\"8\" width=\"20\" height=\"36\" rx=\"3\" stroke=\"#00e5a8\" stroke-width=\"1.5\"\r\n opacity=\".5\" \/>\r\n <circle cx=\"20\" cy=\"38\" r=\"2\" fill=\"#ff0080\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Apps Mobile<\/h3>\r\n <p>Experi\u00eancias mobile nativas e cross-platform que encantam usu\u00e1rios e superam expectativas.<\/p>\r\n <span class=\"service-tag\">REACT NATIVE \u00b7 FLUTTER<\/span>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal\">\r\n <span class=\"service-num\">03<\/span>\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 52 52\" fill=\"none\">\r\n <path d=\"M8 16 L26 8 L44 16 L44 36 L26 44 L8 36 Z\" stroke=\"#8b00ff\" stroke-width=\"1.5\" \/>\r\n <path d=\"M8 16 L26 24 L44 16\" stroke=\"#8b00ff\" stroke-width=\"1\" opacity=\".5\" \/>\r\n <line x1=\"26\" y1=\"24\" x2=\"26\" y2=\"44\" stroke=\"#8b00ff\" stroke-width=\"1\" opacity=\".5\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Arquitetura Cloud<\/h3>\r\n <p>Infraestrutura robusta, segura e altamente dispon\u00edvel. AWS, GCP e Azure com DevOps de ponta.<\/p>\r\n <span class=\"service-tag\">AWS \u00b7 GCP \u00b7 DOCKER \u00b7 K8S<\/span>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal\">\r\n <span class=\"service-num\">04<\/span>\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 52 52\" fill=\"none\">\r\n <circle cx=\"26\" cy=\"26\" r=\"12\" stroke=\"#00ff88\" stroke-width=\"1.5\" \/>\r\n <circle cx=\"26\" cy=\"26\" r=\"20\" stroke=\"#00ff88\" stroke-width=\"1\" opacity=\".3\" \/>\r\n <line x1=\"26\" y1=\"6\" x2=\"26\" y2=\"46\" stroke=\"#00ff88\" stroke-width=\"1\" opacity=\".3\" \/>\r\n <line x1=\"6\" y1=\"26\" x2=\"46\" y2=\"26\" stroke=\"#00ff88\" stroke-width=\"1\" opacity=\".3\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Intelig\u00eancia Artificial<\/h3>\r\n <p>Integra\u00e7\u00e3o de IA e ML em produtos reais. LLMs, vis\u00e3o computacional, automa\u00e7\u00e3o e an\u00e1lise preditiva.\r\n <\/p>\r\n <span class=\"service-tag\">OPENAI \u00b7 PYTHON \u00b7 ML<\/span>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal\">\r\n <span class=\"service-num\">05<\/span>\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 52 52\" fill=\"none\">\r\n <polyline points=\"8,36 18,22 26,28 36,14 44,20\" stroke=\"#00e5a8\" stroke-width=\"2\" fill=\"none\" \/>\r\n <rect x=\"6\" y=\"6\" width=\"40\" height=\"40\" stroke=\"#00e5a8\" stroke-width=\"1\" opacity=\".2\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h3>UX\/UI Design<\/h3>\r\n <p>Interfaces que convertem e ret\u00eam. Design system completo, prototipagem e testes de usabilidade.<\/p>\r\n <span class=\"service-tag\">FIGMA \u00b7 DESIGN SYSTEM<\/span>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal\">\r\n <span class=\"service-num\">06<\/span>\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 52 52\" fill=\"none\">\r\n <path d=\"M26 8 A18 18 0 1 1 25.99 8 Z\" stroke=\"#ff0080\" stroke-width=\"1.5\" opacity=\".3\"\r\n fill=\"none\" \/>\r\n <path d=\"M26 8 A18 18 0 0 1 44 26\" stroke=\"#ff0080\" stroke-width=\"2\" fill=\"none\" \/>\r\n <circle cx=\"26\" cy=\"26\" r=\"4\" fill=\"#ff0080\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Consultoria T\u00e9cnica<\/h3>\r\n <p>Auditoria de c\u00f3digo, revis\u00e3o de arquitetura e roadmap tecnol\u00f3gico para escalar com confian\u00e7a.<\/p>\r\n <span class=\"service-tag\">AUDIT \u00b7 ROADMAP \u00b7 CTO<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- PROCESS -->\r\n <section id=\"process\">\r\n <div class=\"section-header reveal\" style=\"text-align:center\">\r\n <span class=\"section-label\" style=\"justify-content:center;display:flex\">\/\/ COMO TRABALHAMOS<\/span>\r\n <h2 class=\"section-title\">Nosso Processo<\/h2>\r\n <\/div>\r\n\r\n <div class=\"process-line reveal\">\r\n <div class=\"process-step\">\r\n <div class=\"process-dot\">01<\/div>\r\n <h4>Discovery<\/h4>\r\n <p>Entendemos seu neg\u00f3cio, objetivos e desafios t\u00e9cnicos em profundidade.<\/p>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-dot\">02<\/div>\r\n <h4>Estrat\u00e9gia<\/h4>\r\n <p>Definimos arquitetura, stack tecnol\u00f3gico e roadmap de entrega.<\/p>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-dot\">03<\/div>\r\n <h4>Desenvolvimento<\/h4>\r\n <p>Sprints \u00e1geis com entregas incrementais e comunica\u00e7\u00e3o cont\u00ednua.<\/p>\r\n <\/div>\r\n <div class=\"process-step\">\r\n <div class=\"process-dot\">04<\/div>\r\n <h4>Deploy & Scale<\/h4>\r\n <p>Lan\u00e7amento seguro, monitoramento e evolu\u00e7\u00e3o cont\u00ednua do produto.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- PROJECTS -->\r\n <section id=\"projects\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-label\">\/\/ PORTF\u00d3LIO<\/span>\r\n <h2 class=\"section-title\">Projetos em Destaque<\/h2>\r\n <p class=\"section-sub\">Uma sele\u00e7\u00e3o dos trabalhos que mais nos orgulham.<\/p>\r\n <\/div>\r\n\r\n <div class=\"projects-filters reveal\">\r\n <button class=\"filter-btn active\" onclick=\"filterProjects('all',this)\">Todos<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterProjects('web',this)\">Web App<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterProjects('mobile',this)\">Mobile<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterProjects('ai',this)\">IA \/ ML<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterProjects('saas',this)\">SaaS<\/button>\r\n <\/div>\r\n\r\n <div class=\"projects-grid\" id=\"projectsGrid\">\r\n <div class=\"project-card reveal\" data-cat=\"saas\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner cyan\">SF<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">SaaS Platform<\/span>\r\n <span class=\"project-year\">2024<\/span>\r\n <\/div>\r\n <h3>NexusFlow \u2014 Gest\u00e3o de Equipes<\/h3>\r\n <p>Plataforma SaaS completa para gest\u00e3o de projetos e equipes distribu\u00eddas.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">React<\/span>\r\n <span class=\"project-tag\">Node.js<\/span>\r\n <span class=\"project-tag\">PostgreSQL<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card reveal\" data-cat=\"ai\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner pink\">AI<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">IA \/ ML<\/span>\r\n <span class=\"project-year\">2024<\/span>\r\n <\/div>\r\n <h3>VisionAI \u2014 An\u00e1lise de Imagens<\/h3>\r\n <p>Sistema de vis\u00e3o computacional para inspe\u00e7\u00e3o automatizada em linha de produ\u00e7\u00e3o.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">Python<\/span>\r\n <span class=\"project-tag\">PyTorch<\/span>\r\n <span class=\"project-tag\">FastAPI<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card reveal\" data-cat=\"mobile\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner purple\">RN<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">Mobile<\/span>\r\n <span class=\"project-year\">2023<\/span>\r\n <\/div>\r\n <h3>PulseTrack \u2014 Sa\u00fade & Fitness<\/h3>\r\n <p>App mobile de acompanhamento de sa\u00fade com integra\u00e7\u00e3o a wearables e IA.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">React Native<\/span>\r\n <span class=\"project-tag\">GraphQL<\/span>\r\n <span class=\"project-tag\">AWS<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card reveal\" data-cat=\"web\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner green\">WEB<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">Web App<\/span>\r\n <span class=\"project-year\">2023<\/span>\r\n <\/div>\r\n <h3>EcoMetrics \u2014 Dashboard ESG<\/h3>\r\n <p>Dashboard executivo para monitoramento de m\u00e9tricas ESG e relat\u00f3rios de sustentabilidade.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">Next.js<\/span>\r\n <span class=\"project-tag\">D3.js<\/span>\r\n <span class=\"project-tag\">Prisma<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card reveal\" data-cat=\"saas\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner cyan\">API<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">SaaS \/ API<\/span>\r\n <span class=\"project-year\">2024<\/span>\r\n <\/div>\r\n <h3>CoreAPI \u2014 Gateway Financeiro<\/h3>\r\n <p>API gateway de alta performance para processamento de transa\u00e7\u00f5es financeiras.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">Go<\/span>\r\n <span class=\"project-tag\">Redis<\/span>\r\n <span class=\"project-tag\">Kubernetes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card reveal\" data-cat=\"ai\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner pink\">LLM<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">IA Generativa<\/span>\r\n <span class=\"project-year\">2024<\/span>\r\n <\/div>\r\n <h3>DialogAI \u2014 Chatbot Enterprise<\/h3>\r\n <p>Assistente virtual especializado com RAG e integra\u00e7\u00e3o a bases de conhecimento corporativas.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">LangChain<\/span>\r\n <span class=\"project-tag\">OpenAI<\/span>\r\n <span class=\"project-tag\">Pinecone<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- STACK -->\r\n <section id=\"stack\" style=\"padding: 60px 0; overflow:hidden;\">\r\n <div style=\"padding: 0 60px; margin-bottom: 40px;\" class=\"reveal\">\r\n <span class=\"section-label\">\/\/ TECNOLOGIAS<\/span>\r\n <h2 class=\"section-title\">Nossa Stack<\/h2>\r\n <\/div>\r\n\r\n <div class=\"stack-marquee\">\r\n <div class=\"stack-track\" id=\"stackTrack\">\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>React<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--pink);box-shadow:0 0 8px var(--pink)\"><\/div>\r\n <span>Next.js<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>TypeScript<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--green);box-shadow:0 0 8px var(--green)\"><\/div>\r\n <span>Node.js<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--purple);box-shadow:0 0 8px var(--purple)\"><\/div>\r\n <span>Python<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>PostgreSQL<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--pink);box-shadow:0 0 8px var(--pink)\"><\/div><span>React\r\n Native<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--green);box-shadow:0 0 8px var(--green)\"><\/div>\r\n <span>Docker<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--purple);box-shadow:0 0 8px var(--purple)\"><\/div>\r\n <span>Kubernetes<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>AWS<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--pink);box-shadow:0 0 8px var(--pink)\"><\/div><span>Tailwind\r\n CSS<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--green);box-shadow:0 0 8px var(--green)\"><\/div>\r\n <span>GraphQL<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>Redis<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--purple);box-shadow:0 0 8px var(--purple)\"><\/div>\r\n <span>Go<\/span>\r\n <\/div>\r\n <!-- duplicate for infinite scroll -->\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>React<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--pink);box-shadow:0 0 8px var(--pink)\"><\/div>\r\n <span>Next.js<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>TypeScript<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--green);box-shadow:0 0 8px var(--green)\"><\/div>\r\n <span>Node.js<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--purple);box-shadow:0 0 8px var(--purple)\"><\/div>\r\n <span>Python<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>PostgreSQL<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--pink);box-shadow:0 0 8px var(--pink)\"><\/div><span>React\r\n Native<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--green);box-shadow:0 0 8px var(--green)\"><\/div>\r\n <span>Docker<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--purple);box-shadow:0 0 8px var(--purple)\"><\/div>\r\n <span>Kubernetes<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>AWS<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--pink);box-shadow:0 0 8px var(--pink)\"><\/div><span>Tailwind\r\n CSS<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--green);box-shadow:0 0 8px var(--green)\"><\/div>\r\n <span>GraphQL<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\"><\/div><span>Redis<\/span>\r\n <\/div>\r\n <div class=\"stack-item\">\r\n <div class=\"dot\" style=\"background:var(--purple);box-shadow:0 0 8px var(--purple)\"><\/div>\r\n <span>Go<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ABOUT -->\r\n <section id=\"about\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-visual reveal\">\r\n <div class=\"about-box about-box-main\">\r\n <pre class=\"about-code\"><span class=\"cm\">\/\/ single_future.config.ts<\/span>\r\n\r\n<span class=\"kw\">const<\/span> <span class=\"fn\">agency<\/span> = {\r\n name: <span class=\"str\">\"Single Future\"<\/span>,\r\n founded: <span class=\"num\">2026<\/span>,\r\n mission: <span class=\"str\">\"Build the impossible\"<\/span>,\r\n \r\n team: {\r\n engineers: <span class=\"num\">8<\/span>,\r\n designers: <span class=\"num\">3<\/span>,\r\n devops: <span class=\"num\">2<\/span>,\r\n },\r\n\r\n <span class=\"fn\">values<\/span>: [\r\n <span class=\"str\">\"Code quality first\"<\/span>,\r\n <span class=\"str\">\"Ship fast, iterate\"<\/span>,\r\n <span class=\"str\">\"Zero compromise\"<\/span>,\r\n ],\r\n};<\/pre>\r\n <\/div>\r\n <div class=\"about-accent-1\"><\/div>\r\n <div class=\"about-accent-2\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"about-content reveal\">\r\n <span class=\"section-label\">\/\/ SOBRE N\u00d3S<\/span>\r\n <h2 class=\"section-title\">Quem \u00e9 a\r\n\r\n Single Future?<\/h2>\r\n <p>Somos uma software house focada em construir produtos digitais que realmente importam. Nossa equipe\r\n combina engenharia de alto n\u00edvel com vis\u00e3o de produto para entregar solu\u00e7\u00f5es que escalam.<\/p>\r\n <p>N\u00e3o somos apenas uma f\u00e1brica de c\u00f3digo \u2014 somos parceiros estrat\u00e9gicos que pensam no seu neg\u00f3cio antes\r\n de escrever a primeira linha.<\/p>\r\n\r\n <div class=\"about-values\">\r\n <div class=\"value-row\">\r\n <div class=\"value-icon\">\u25c8<\/div>\r\n <div>\r\n <h4>Qualidade Sem Concess\u00f5es<\/h4>\r\n <p>C\u00f3digo limpo, testado e documentado. Sempre.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"value-row\">\r\n <div class=\"value-icon\" style=\"color:var(--pink)\">\u25c8<\/div>\r\n <div>\r\n <h4>Velocidade com Prop\u00f3sito<\/h4>\r\n <p>Entregamos r\u00e1pido sem sacrificar a solidez do produto.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"value-row\">\r\n <div class=\"value-icon\" style=\"color:var(--purple)\">\u25c8<\/div>\r\n <div>\r\n <h4>Transpar\u00eancia Total<\/h4>\r\n <p>Comunica\u00e7\u00e3o direta, sem ru\u00eddos, do in\u00edcio ao fim.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TESTIMONIALS -->\r\n <section id=\"testimonials\">\r\n <div class=\"section-header reveal\" style=\"text-align:center\">\r\n <span class=\"section-label\" style=\"justify-content:center;display:flex\">\/\/ CLIENTES<\/span>\r\n <h2 class=\"section-title\">O que dizem sobre n\u00f3s<\/h2>\r\n <\/div>\r\n\r\n <div class=\"testimonials-grid\">\r\n <div class=\"testimonial-card reveal\">\r\n <div class=\"testimonial-quote\">\"<\/div>\r\n <p>A Single Future entregou nossa plataforma em tempo recorde sem abrir m\u00e3o da qualidade. O c\u00f3digo \u00e9\r\n limpo, escal\u00e1vel e bem documentado. Melhor parceiro t\u00e9cnico que j\u00e1 tivemos.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">RC<\/div>\r\n <div class=\"author-info\">\r\n <strong>Rafael Costa<\/strong>\r\n <span>CTO @ TechBridge<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card reveal\">\r\n <div class=\"testimonial-quote\">\"<\/div>\r\n <p>Contratamos para um MVP e acabamos fazendo o produto inteiro com eles. A equipe \u00e9 excepcional \u2014\r\n entendem de neg\u00f3cio tanto quanto de tecnologia. Recomendo sem hesitar.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">AM<\/div>\r\n <div class=\"author-info\">\r\n <strong>Ana Mendes<\/strong>\r\n <span>CEO @ NovaBuild<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card reveal\">\r\n <div class=\"testimonial-quote\">\"<\/div>\r\n <p>Nossa integra\u00e7\u00e3o de IA foi um desafio enorme. A Single Future n\u00e3o s\u00f3 entregou como superou as\r\n expectativas com uma solu\u00e7\u00e3o elegante e perform\u00e1tica. Impressionante.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">DS<\/div>\r\n <div class=\"author-info\">\r\n <strong>Diego Santos<\/strong>\r\n <span>Head of Product @ DataCorp<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CONTACT -->\r\n <section id=\"contact\">\r\n <div class=\"contact-grid\">\r\n <div class=\"contact-info reveal\">\r\n <span class=\"section-label\">\/\/ VAMOS FALAR<\/span>\r\n <h2 class=\"section-title\">Pronto para construir algo incr\u00edvel?<\/h2>\r\n <p>Conte sobre seu projeto. Respondemos em at\u00e9 24h com uma an\u00e1lise inicial e pr\u00f3ximos passos.<\/p>\r\n\r\n <div class=\"contact-methods\">\r\n <a class=\"contact-method\" href=\"mailto:singlefutureadm@gmail.com\">\r\n <span class=\"cm-icon\">\u2709<\/span>\r\n <div>\r\n <span class=\"cm-label\">Email<\/span>\r\n <span class=\"cm-value\">singlefutureadm@gmail.com<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"contact-method\" href=\"https:\/\/wa.me\/5511992622833\">\r\n <span class=\"cm-icon\">\u25b6<\/span>\r\n <div>\r\n <span class=\"cm-label\">WhatsApp<\/span>\r\n <span class=\"cm-value\">+55 (11) 99262-2833<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"contact-method\" href=\"https:\/\/www.linkedin.com\/company\/single-future\/\r\n\">\r\n <span class=\"cm-icon\">\u25ce<\/span>\r\n <div>\r\n <span class=\"cm-label\">LinkedIn<\/span>\r\n <span class=\"cm-value\">@singlefuture<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <form class=\"contact-form reveal\" onsubmit=\"handleSubmit(event)\">\r\n <div class=\"form-row\">\r\n <div class=\"form-field\">\r\n <label>Nome<\/label>\r\n <input type=\"text\" name=\"nome\" placeholder=\"Seu nome completo\" required \/>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Email<\/label>\r\n <input type=\"email\" name=\"email\" placeholder=\"seu@email.com\" required \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-field\">\r\n <label>Empresa<\/label>\r\n <input type=\"text\" name=\"empresa\" placeholder=\"Nome da empresa (opcional)\" \/>\r\n <\/div>\r\n\r\n <div class=\"form-field\">\r\n <label>Tipo de Projeto<\/label>\r\n <select name=\"projeto\">\r\n <option value=\"\">Selecione...<\/option>\r\n <option>Desenvolvimento Web<\/option>\r\n <option>App Mobile<\/option>\r\n <option>Integra\u00e7\u00e3o de IA<\/option>\r\n <option>Arquitetura Cloud<\/option>\r\n <option>Consultoria T\u00e9cnica<\/option>\r\n <option>Outro<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-field\">\r\n <label>Mensagem<\/label>\r\n <textarea name=\"mensagem\" required><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"form-submit\" id=\"submitBtn\">\r\n ENVIAR MENSAGEM \u2192\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FOOTER -->\r\n <footer>\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <a href=\"#hero\" style=\"display:inline-block;\"><img decoding=\"async\"\r\n src=\"https:\/\/singlefuture.com.br\/wp-content\/uploads\/2026\/04\/Captura-de-tela-2026-04-11-123955.png\"\r\n alt=\"Single Future\"\r\n style=\"height:46px;width:auto;filter:drop-shadow(0 0 10px #00e5a8); border-radius:50%;\" \/><\/a>\r\n <p>Construindo o futuro digital, uma linha de c\u00f3digo por vez. Somos sua equipe de tecnologia de alta\r\n performance.<\/p>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Servi\u00e7os<\/h5>\r\n <ul>\r\n <li><a href=\"#services\">Desenvolvimento Web<\/a><\/li>\r\n <li><a href=\"#services\">Apps Mobile<\/a><\/li>\r\n <li><a href=\"#services\">Cloud & DevOps<\/a><\/li>\r\n <li><a href=\"#services\">IA & Machine Learning<\/a><\/li>\r\n <li><a href=\"#services\">UX\/UI Design<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Empresa<\/h5>\r\n <ul>\r\n <li><a href=\"#about\">Sobre N\u00f3s<\/a><\/li>\r\n <li><a href=\"#projects\">Projetos<\/a><\/li>\r\n <li><a href=\"#process\">Processo<\/a><\/li>\r\n <li><a href=\"#testimonials\">Clientes<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Contato<\/h5>\r\n <ul>\r\n <li><a href=\"#\">singlefutureadm@gmail.com<\/a><\/li>\r\n <li><a href=\"#\">LinkedIn<\/a><\/li>\r\n <li><a href=\"#\">GitHub<\/a><\/li>\r\n <li><a href=\"#\">WhatsApp<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 SINGLE FUTURE. TODOS OS DIREITOS RESERVADOS.<\/p>\r\n <div class=\"footer-social\">\r\n <a class=\"social-link\" href=\"https:\/\/www.linkedin.com\/company\/single-future\/\" title=\"LinkedIn\">IN<\/a>\r\n <a class=\"social-link\" href=\"https:\/\/www.instagram.com\/singlefuture_\/\" title=\"Instagram\">IG<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\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\u2550\u2550\u2550\r\n SINGLE FUTURE \u2014 Space Portfolio JS\r\n GSAP 3 + ScrollTrigger + Canvas Starfield\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\u2550\u2550\u2550 *\/\r\n\r\n gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 1. SPACE CANVAS \u2014 Stars + Shooting Stars\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const canvas = document.getElementById('spaceCanvas');\r\n const ctx = canvas.getContext('2d');\r\n let W, H;\r\n\r\n function resizeCanvas() {\r\n const hero = document.getElementById('hero');\r\n W = canvas.width = hero.offsetWidth;\r\n H = canvas.height = hero.offsetHeight;\r\n }\r\n resizeCanvas();\r\n window.addEventListener('resize', resizeCanvas);\r\n\r\n \/\/ \u2500\u2500 Generate stars \u2500\u2500\r\n const STAR_COUNT = 320;\r\n const stars = Array.from({ length: STAR_COUNT }, () => ({\r\n x: Math.random(),\r\n y: Math.random(),\r\n r: Math.random() * 1.6 + 0.2,\r\n alpha: Math.random(),\r\n speed: Math.random() * 0.004 + 0.001,\r\n phase: Math.random() * Math.PI * 2,\r\n color: Math.random() > 0.92 ? '#00e5a8' : Math.random() > 0.85 ? '#8b5cf6' : '#ffffff',\r\n }));\r\n\r\n \/\/ \u2500\u2500 Shooting stars \u2500\u2500\r\n const shoots = [];\r\n function spawnShoot() {\r\n shoots.push({\r\n x: Math.random() * W * 0.8 + W * 0.1,\r\n y: Math.random() * H * 0.4,\r\n len: Math.random() * 180 + 80,\r\n speed: Math.random() * 12 + 8,\r\n angle: Math.PI \/ 5 + (Math.random() - .5) * .3,\r\n alpha: 1,\r\n width: Math.random() * 1.5 + .5,\r\n });\r\n }\r\n setInterval(spawnShoot, 2800);\r\n setTimeout(spawnShoot, 600);\r\n\r\n let t = 0;\r\n function drawSpace() {\r\n ctx.clearRect(0, 0, W, H);\r\n t += 0.012;\r\n\r\n \/\/ draw stars\r\n stars.forEach(s => {\r\n const pulse = (Math.sin(t * s.speed * 40 + s.phase) + 1) \/ 2;\r\n const a = s.alpha * 0.4 + pulse * 0.6;\r\n ctx.beginPath();\r\n ctx.arc(s.x * W, s.y * H, s.r, 0, Math.PI * 2);\r\n ctx.fillStyle = s.color;\r\n ctx.globalAlpha = a * (s.color === '#00e5a8' ? 0.9 : 0.75);\r\n ctx.fill();\r\n\r\n \/\/ glow for bright\/teal stars\r\n if (s.r > 1.2 || s.color === '#00e5a8') {\r\n ctx.beginPath();\r\n ctx.arc(s.x * W, s.y * H, s.r * 3, 0, Math.PI * 2);\r\n const g = ctx.createRadialGradient(s.x * W, s.y * H, 0, s.x * W, s.y * H, s.r * 3);\r\n g.addColorStop(0, s.color === '#00e5a8' ? 'rgba(0,229,168,0.3)' : 'rgba(255,255,255,0.15)');\r\n g.addColorStop(1, 'transparent');\r\n ctx.fillStyle = g;\r\n ctx.globalAlpha = pulse * 0.7;\r\n ctx.fill();\r\n }\r\n });\r\n\r\n ctx.globalAlpha = 1;\r\n\r\n \/\/ draw shooting stars\r\n for (let i = shoots.length - 1; i >= 0; i--) {\r\n const s = shoots[i];\r\n const ex = s.x + Math.cos(s.angle) * s.len;\r\n const ey = s.y + Math.sin(s.angle) * s.len;\r\n const g = ctx.createLinearGradient(s.x, s.y, ex, ey);\r\n g.addColorStop(0, `rgba(0,229,168,0)`);\r\n g.addColorStop(0.3, `rgba(0,229,168,${s.alpha * 0.8})`);\r\n g.addColorStop(0.7, `rgba(255,255,255,${s.alpha})`);\r\n g.addColorStop(1, `rgba(0,229,168,0)`);\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(s.x, s.y);\r\n ctx.lineTo(ex, ey);\r\n ctx.strokeStyle = g;\r\n ctx.lineWidth = s.width;\r\n ctx.globalAlpha = s.alpha;\r\n ctx.stroke();\r\n\r\n s.x += Math.cos(s.angle) * s.speed;\r\n s.y += Math.sin(s.angle) * s.speed;\r\n s.alpha -= 0.018;\r\n if (s.alpha <= 0 || s.x > W + 50) shoots.splice(i, 1);\r\n }\r\n\r\n ctx.globalAlpha = 1;\r\n requestAnimationFrame(drawSpace);\r\n }\r\n drawSpace();\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 2. CUSTOM CURSOR\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const dot = document.getElementById('cursorDot');\r\n const ring = document.getElementById('cursorRing');\r\n let mx = window.innerWidth \/ 2, my = window.innerHeight \/ 2;\r\n let rx = mx, ry = my;\r\n\r\n document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });\r\n\r\n gsap.ticker.add(() => {\r\n rx += (mx - rx) * 0.13;\r\n ry += (my - ry) * 0.13;\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 });\r\n\r\n document.querySelectorAll('a,button,.service-card,.project-card,.process-dot').forEach(el => {\r\n el.addEventListener('mouseenter', () => gsap.to(ring, { width: 54, height: 54, borderColor: '#ff0080', duration: .2 }));\r\n el.addEventListener('mouseleave', () => gsap.to(ring, { width: 32, height: 32, borderColor: 'rgba(0,229,168,.5)', duration: .2 }));\r\n });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 3. NAV SCROLL\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const navbar = document.getElementById('navbar');\r\n ScrollTrigger.create({\r\n start: 'top -60',\r\n onToggle: self => navbar.classList.toggle('scrolled', self.isActive),\r\n });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 4. HERO ENTRANCE TIMELINE (GSAP)\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n function splitTextToChars(el) {\r\n const text = el.textContent;\r\n el.innerHTML = text.split('').map(c =>\r\n c === ' ' ? '<span style=\"display:inline-block;width:.3em\"><\/span>'\r\n : `<span class=\"hero-char\">${c}<\/span>`\r\n ).join('');\r\n return el.querySelectorAll('.hero-char');\r\n }\r\n\r\n const line1Chars = splitTextToChars(document.getElementById('heroLine1'));\r\n const line2Chars = splitTextToChars(document.getElementById('heroLine2'));\r\n\r\n const heroTL = gsap.timeline({ delay: 0.3 });\r\n\r\n \/\/ Planets float in\r\n heroTL.to('#planet1', { opacity: 1, y: -10, duration: 1.8, ease: 'power2.out' }, 0.2)\r\n .to('#planet2', { opacity: 1, y: -8, duration: 1.6, ease: 'power2.out' }, 0.4)\r\n .to('#planet3', { opacity: 1, y: -6, duration: 1.4, ease: 'power2.out' }, 0.5)\r\n\r\n \/\/ Badge flickers in\r\n .fromTo('#heroBadge',\r\n { opacity: 0, y: 20, filter: 'blur(6px)' },\r\n { opacity: 1, y: 0, filter: 'blur(0px)', duration: .8, ease: 'power3.out' },\r\n 0.3)\r\n\r\n \/\/ Line 1 chars cascade\r\n .fromTo(line1Chars,\r\n { opacity: 0, y: 40, rotationX: -90, filter: 'blur(4px)' },\r\n {\r\n opacity: 1, y: 0, rotationX: 0, filter: 'blur(0px)',\r\n duration: .06, stagger: .04, ease: 'back.out(1.5)'\r\n },\r\n 0.8)\r\n\r\n \/\/ Line 2 chars cascade with colour glow\r\n .fromTo(line2Chars,\r\n { opacity: 0, y: 50, scaleY: 1.1, filter: 'blur(6px)' },\r\n {\r\n opacity: 1, y: 0, scaleY: 1, filter: 'blur(0px)',\r\n duration: .07, stagger: .045, ease: 'expo.out'\r\n },\r\n 1.2)\r\n\r\n \/\/ Sub + buttons + stats fade up\r\n .fromTo('.hero-sub',\r\n { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: .9, ease: 'power3.out' }, 1.9)\r\n .fromTo('.hero-buttons',\r\n { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: .8, ease: 'power3.out' }, 2.1)\r\n .fromTo('.hero-stats',\r\n { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: .8, ease: 'power3.out' }, 2.3)\r\n .fromTo('.scroll-indicator',\r\n { opacity: 0 }, { opacity: 1, duration: .6 }, 2.8);\r\n\r\n \/\/ Planets gentle float loop after entrance\r\n gsap.to('#planet1', { y: '-=14', duration: 5, ease: 'sine.inOut', yoyo: true, repeat: -1, delay: 2 });\r\n gsap.to('#planet2', { y: '+=10', duration: 7, ease: 'sine.inOut', yoyo: true, repeat: -1, delay: 1 });\r\n gsap.to('#planet3', { y: '-=8', duration: 4, ease: 'sine.inOut', yoyo: true, repeat: -1, delay: 3 });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 5. HERO PARALLAX on scroll\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n gsap.to('#heroContent', {\r\n y: 120, opacity: 0.4,\r\n ease: 'none',\r\n scrollTrigger: { trigger: '#hero', start: 'top top', end: 'bottom top', scrub: true }\r\n });\r\n gsap.to('.nebula-1', {\r\n y: 80,\r\n ease: 'none',\r\n scrollTrigger: { trigger: '#hero', start: 'top top', end: 'bottom top', scrub: true }\r\n });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 6. SECTION REVEALS \u2014 ScrollTrigger\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n\r\n \/\/ Generic .reveal elements\r\n gsap.utils.toArray('.reveal').forEach((el, i) => {\r\n gsap.to(el, {\r\n opacity: 1, y: 0,\r\n duration: .9,\r\n ease: 'power3.out',\r\n scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' },\r\n });\r\n });\r\n\r\n \/\/ Service cards \u2014 stagger per row\r\n ScrollTrigger.batch('.service-card', {\r\n start: 'top 88%',\r\n onEnter: batch => gsap.to(batch, {\r\n opacity: 1, y: 0, duration: .7, stagger: .1, ease: 'power3.out'\r\n }),\r\n });\r\n\r\n \/\/ Process steps\r\n ScrollTrigger.batch('.process-step', {\r\n start: 'top 88%',\r\n onEnter: batch => gsap.to(batch, {\r\n opacity: 1, y: 0, duration: .7, stagger: .15, ease: 'back.out(1.4)'\r\n }),\r\n });\r\n\r\n \/\/ Project cards\r\n ScrollTrigger.batch('.project-card', {\r\n start: 'top 90%',\r\n onEnter: batch => gsap.to(batch, {\r\n opacity: 1, y: 0, scale: 1, duration: .7, stagger: .1, ease: 'power3.out'\r\n }),\r\n });\r\n\r\n \/\/ Testimonial cards\r\n ScrollTrigger.batch('.testimonial-card', {\r\n start: 'top 88%',\r\n onEnter: batch => gsap.to(batch, {\r\n opacity: 1, y: 0, duration: .8, stagger: .12, ease: 'power3.out'\r\n }),\r\n });\r\n\r\n \/\/ Section titles \u2014 character split animation\r\n document.querySelectorAll('.section-title').forEach(el => {\r\n const text = el.innerHTML;\r\n el.innerHTML = text.replace(\/(\\S)\/g, '<span class=\"split-char\" style=\"opacity:0;display:inline-block\">$1<\/span>')\r\n .replace(\/<br>\/g, '<br>');\r\n const chars = el.querySelectorAll('.split-char');\r\n gsap.to(chars, {\r\n opacity: 1, y: 0,\r\n duration: .05, stagger: .025,\r\n ease: 'power2.out',\r\n scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none none' }\r\n });\r\n });\r\n\r\n \/\/ Process dot glow on scroll\r\n document.querySelectorAll('.process-dot').forEach(dot => {\r\n ScrollTrigger.create({\r\n trigger: dot,\r\n start: 'top 80%',\r\n onEnter: () => gsap.fromTo(dot,\r\n { boxShadow: '0 0 0px transparent', background: 'var(--bg0)' },\r\n {\r\n boxShadow: '0 0 40px rgba(0,229,168,.6), inset 0 0 20px rgba(0,229,168,.1)',\r\n duration: 1, ease: 'power2.out'\r\n }\r\n ),\r\n });\r\n });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 7. COUNTER \u2014 GSAP version with glitch\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n let countersRun = false;\r\n ScrollTrigger.create({\r\n trigger: '.hero-stats',\r\n start: 'top 85%',\r\n onEnter: () => {\r\n if (countersRun) return;\r\n countersRun = true;\r\n document.querySelectorAll('[data-target]').forEach((el, i) => {\r\n const target = +el.dataset.target;\r\n el.classList.add('counting');\r\n gsap.to({ val: 0 }, {\r\n val: target,\r\n duration: 2,\r\n delay: i * 0.15,\r\n ease: 'power2.out',\r\n onUpdate: function () { el.textContent = Math.round(this.targets()[0].val); },\r\n onComplete: () => { el.textContent = target; el.classList.remove('counting'); }\r\n });\r\n });\r\n }\r\n });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 8. MOBILE MENU\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const hamburger = document.getElementById('hamburger');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n function toggleMenu() {\r\n const isOpen = mobileMenu.classList.toggle('open');\r\n hamburger.classList.toggle('open', isOpen);\r\n document.body.style.overflow = isOpen ? 'hidden' : '';\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 9. SMOOTH SCROLL for nav links\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\r\n a.addEventListener('click', e => {\r\n const target = document.querySelector(a.getAttribute('href'));\r\n if (!target) return;\r\n e.preventDefault();\r\n gsap.to(window, { duration: 1, scrollTo: { y: target, offsetY: 70 }, ease: 'power3.inOut' });\r\n });\r\n });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 10. SERVICE CARD glow on hover\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n document.querySelectorAll('.service-card').forEach(card => {\r\n card.addEventListener('mouseenter', () =>\r\n gsap.to(card, { boxShadow: '0 0 40px rgba(0,229,168,0.1)', duration: .3 }));\r\n card.addEventListener('mouseleave', () =>\r\n gsap.to(card, { boxShadow: 'none', duration: .3 }));\r\n });\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 11. PROJECT FILTER\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n function filterProjects(cat, btn) {\r\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n document.querySelectorAll('.project-card').forEach(card => {\r\n const match = cat === 'all' || card.dataset.cat === cat;\r\n if (match) {\r\n card.style.display = '';\r\n gsap.fromTo(card, { opacity: 0, scale: .95 }, { opacity: 1, scale: 1, duration: .4, ease: 'power2.out' });\r\n } else {\r\n gsap.to(card, {\r\n opacity: 0, scale: .95, duration: .25, ease: 'power2.in',\r\n onComplete: () => { card.style.display = 'none'; }\r\n });\r\n }\r\n });\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n 12. FORM SUBMIT\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n\r\n const form = e.target;\r\n const btn = document.getElementById('submitBtn');\r\n\r\n btn.textContent = 'ENVIANDO...';\r\n\r\n const formData = new FormData(form);\r\n formData.append('action', 'salvar_contato');\r\n\r\n fetch('\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n body: formData\r\n })\r\n .then(res => res.json())\r\n .then(() => {\r\n btn.textContent = '\u2713 MENSAGEM ENVIADA!';\r\n form.reset();\r\n\r\n setTimeout(() => {\r\n btn.textContent = 'ENVIAR MENSAGEM \u2192';\r\n }, 3000);\r\n })\r\n .catch(() => {\r\n btn.textContent = 'ERRO AO ENVIAR';\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n\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>Single Future \u2014 Next-Gen Software Agency Home Servi\u00e7os Projetos Sobre Contato Servi\u00e7os Projetos Processo Sobre Contato Fale Conosco NEXT-GEN SOFTWARE AGENCY \u2014 EST. 2026 CONSTRUINDO O FUTURO DIGITAL Transformamos ideias complexas em solu\u00e7\u00f5es de software extraordin\u00e1rias. Da arquitetura \u00e0 entrega \u2014 com precis\u00e3o, velocidade e excel\u00eancia. Ver Projetos Iniciar Projeto 0 Projetos Entregues 0 % […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"footnotes":""},"class_list":["post-500","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=500"}],"version-history":[{"count":25,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/500\/revisions"}],"predecessor-version":[{"id":543,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/500\/revisions\/543"}],"wp:attachment":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}