{"id":1,"date":"2025-09-18T05:55:09","date_gmt":"2025-09-18T05:55:09","guid":{"rendered":"http:\/\/example.com\/?page_id=1"},"modified":"2025-09-18T20:20:10","modified_gmt":"2025-09-18T20:20:10","slug":"cote-ja-futuro-digital","status":"publish","type":"page","link":"https:\/\/coteja.com\/","title":{"rendered":"Cote J\u00c1 &#8211; Futuro Digital"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1\" class=\"elementor elementor-1\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc28141 e-flex e-con-boxed e-con e-parent\" data-id=\"dc28141\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb7b915 elementor-widget elementor-widget-html\" data-id=\"cb7b915\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>CyberTech - Futuro Digital<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700;900&family=Orbitron:wght@400;700;900&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'Courier New', monospace;\r\n            background: linear-gradient(135deg, #0a0a0a 0%, #1a0033 50%, #000011 100%);\r\n            color: #00ffff;\r\n            overflow-x: hidden;\r\n            cursor: none;\r\n        }\r\n\r\n        .custom-cursor {\r\n            position: fixed;\r\n            width: 20px;\r\n            height: 20px;\r\n            background: radial-gradient(circle, #ff00ff 0%, #00ffff 100%);\r\n            border-radius: 50%;\r\n            pointer-events: none;\r\n            z-index: 9999;\r\n            transition: all 0.1s ease;\r\n            box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);\r\n        }\r\n\r\n        .rain {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .raindrop {\r\n            position: absolute;\r\n            width: 2px;\r\n            height: 20px;\r\n            background: linear-gradient(to bottom, transparent, #00ffff);\r\n            animation: fall linear infinite;\r\n        }\r\n\r\n        @keyframes fall {\r\n            to {\r\n                transform: translateY(100vh);\r\n            }\r\n        }\r\n\r\n        .skyline {\r\n            position: fixed;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 200px;\r\n            background: linear-gradient(to top, #000033, transparent);\r\n            z-index: 2;\r\n        }\r\n\r\n        .building {\r\n            position: absolute;\r\n            bottom: 0;\r\n            background: linear-gradient(to top, #001122, #003366);\r\n            border-top: 2px solid #00ffff;\r\n        }\r\n\r\n        .building::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 10%;\r\n            left: 20%;\r\n            width: 60%;\r\n            height: 80%;\r\n            background: repeating-linear-gradient(\r\n                0deg,\r\n                transparent,\r\n                transparent 8px,\r\n                rgba(0, 255, 255, 0.1) 8px,\r\n                rgba(0, 255, 255, 0.1) 12px\r\n            );\r\n        }\r\n\r\n        .floating-hologram {\r\n            position: absolute;\r\n            transition: all 0.3s ease;\r\n            filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));\r\n        }\r\n\r\n        .particles {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 3;\r\n        }\r\n\r\n        .particle {\r\n            position: absolute;\r\n            width: 3px;\r\n            height: 3px;\r\n            background: #ff00ff;\r\n            border-radius: 50%;\r\n            animation: float 6s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes float {\r\n            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }\r\n            50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }\r\n        }\r\n\r\n        .container {\r\n            position: relative;\r\n            z-index: 10;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 2rem;\r\n        }\r\n\r\n        .navbar {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            background: rgba(0, 0, 0, 0.8);\r\n            backdrop-filter: blur(10px);\r\n            border-bottom: 1px solid rgba(0, 255, 255, 0.3);\r\n            z-index: 1000;\r\n            padding: 1rem 0;\r\n        }\r\n\r\n        .nav-content {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 2rem;\r\n        }\r\n\r\n        .logo {\r\n            font-size: 1.5rem;\r\n            font-weight: bold;\r\n            color: white;\r\n            font-family: Arial, sans-serif;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .cyberpunk-logo {\r\n            position: relative;\r\n            display: inline-block;\r\n            font-family: 'Orbitron', 'Courier New', monospace;\r\n            font-weight: 900;\r\n            font-size: 2rem;\r\n            letter-spacing: 4px;\r\n            text-transform: uppercase;\r\n            background: linear-gradient(45deg, #ff0080, #00ffff, #ff00ff, #ffff00);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: neonFlow 3s ease-in-out infinite, glitchEffect 8s infinite;\r\n            filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));\r\n        }\r\n\r\n        .cyberpunk-logo::before {\r\n            content: 'COTE J\u00c1';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, #ff0080, #00ffff);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            z-index: -1;\r\n            transform: translate(2px, 2px);\r\n            opacity: 0.7;\r\n            animation: shadowPulse 2s ease-in-out infinite alternate;\r\n        }\r\n\r\n        .cyberpunk-logo::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: linear-gradient(45deg, transparent, rgba(255, 0, 255, 0.1), transparent, rgba(0, 255, 255, 0.1), transparent);\r\n            animation: hologramSweep 4s linear infinite;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .logo-container {\r\n            position: relative;\r\n            display: inline-block;\r\n            padding: 10px 20px;\r\n            background: rgba(0, 0, 0, 0.2);\r\n            border: 1px solid rgba(255, 0, 255, 0.3);\r\n            border-radius: 8px;\r\n            backdrop-filter: blur(10px);\r\n            box-shadow: \r\n                0 0 20px rgba(255, 0, 255, 0.3),\r\n                inset 0 0 20px rgba(0, 255, 255, 0.1);\r\n            overflow: hidden;\r\n        }\r\n\r\n        .logo-container::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);\r\n            animation: logoSweep 3s ease-in-out infinite;\r\n        }\r\n\r\n        .logo-container:hover .cyberpunk-logo {\r\n            animation: neonFlow 1s ease-in-out infinite, glitchEffect 2s infinite, logoHover 0.5s ease-in-out;\r\n            filter: drop-shadow(0 0 15px rgba(255, 0, 255, 1)) drop-shadow(0 0 30px rgba(0, 255, 255, 0.8));\r\n        }\r\n\r\n        .tech-accent {\r\n            position: absolute;\r\n            top: -5px;\r\n            right: -5px;\r\n            width: 8px;\r\n            height: 8px;\r\n            background: #ff0080;\r\n            border-radius: 50%;\r\n            animation: techPulse 1.5s ease-in-out infinite;\r\n            box-shadow: 0 0 10px rgba(255, 0, 128, 0.8);\r\n        }\r\n\r\n        .tech-accent::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 4px;\r\n            height: 4px;\r\n            background: #00ffff;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: techPulse 1.5s ease-in-out infinite reverse;\r\n        }\r\n\r\n        @keyframes neonFlow {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes glitchEffect {\r\n            0%, 90%, 100% { transform: translate(0); }\r\n            91% { transform: translate(-2px, 1px); }\r\n            92% { transform: translate(2px, -1px); }\r\n            93% { transform: translate(-1px, 2px); }\r\n            94% { transform: translate(1px, -2px); }\r\n            95% { transform: translate(-2px, -1px); }\r\n        }\r\n\r\n        @keyframes shadowPulse {\r\n            0% { \r\n                opacity: 0.7; \r\n                transform: translate(2px, 2px) scale(1);\r\n            }\r\n            100% { \r\n                opacity: 0.3; \r\n                transform: translate(4px, 4px) scale(1.02);\r\n            }\r\n        }\r\n\r\n        @keyframes hologramSweep {\r\n            0% { transform: translate(-50%, -50%) rotate(0deg); }\r\n            100% { transform: translate(-50%, -50%) rotate(360deg); }\r\n        }\r\n\r\n        @keyframes logoSweep {\r\n            0% { left: -100%; }\r\n            50% { left: 100%; }\r\n            100% { left: -100%; }\r\n        }\r\n\r\n        @keyframes logoHover {\r\n            0% { transform: scale(1); }\r\n            50% { transform: scale(1.05); }\r\n            100% { transform: scale(1); }\r\n        }\r\n\r\n        @keyframes techPulse {\r\n            0%, 100% { \r\n                transform: scale(1);\r\n                opacity: 1;\r\n            }\r\n            50% { \r\n                transform: scale(1.5);\r\n                opacity: 0.7;\r\n            }\r\n        }\r\n\r\n        .nav-links {\r\n            display: flex;\r\n            list-style: none;\r\n            gap: 2rem;\r\n        }\r\n\r\n        .nav-links a {\r\n            color: #00ffff;\r\n            text-decoration: none;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n        }\r\n\r\n        .nav-links a:hover {\r\n            color: #ff00ff;\r\n            text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);\r\n        }\r\n\r\n        .nav-links a::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -5px;\r\n            left: 0;\r\n            width: 0;\r\n            height: 2px;\r\n            background: linear-gradient(90deg, #ff00ff, #00ffff);\r\n            transition: width 0.3s ease;\r\n        }\r\n\r\n        .nav-links a:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        .hero {\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            position: relative;\r\n        }\r\n\r\n        .hero-content h1 {\r\n            font-size: 4rem;\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);\r\n            animation: glow 2s ease-in-out infinite alternate;\r\n        }\r\n\r\n        @keyframes glow {\r\n            from { filter: brightness(1); }\r\n            to { filter: brightness(1.2); }\r\n        }\r\n\r\n        .hero-content p {\r\n            font-size: 1.2rem;\r\n            margin-bottom: 2rem;\r\n            color: #a0a0a0;\r\n        }\r\n\r\n        .cta-button {\r\n            display: inline-block;\r\n            padding: 1rem 2rem;\r\n            background: linear-gradient(45deg, #ff00ff, #00ffff);\r\n            color: #000;\r\n            text-decoration: none;\r\n            border-radius: 5px;\r\n            font-weight: bold;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .cta-button:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 10px 20px rgba(255, 0, 255, 0.3);\r\n        }\r\n\r\n        .cta-button::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n            transition: left 0.5s ease;\r\n        }\r\n\r\n        .cta-button:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .section {\r\n            padding: 5rem 0;\r\n            position: relative;\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 2.5rem;\r\n            text-align: center;\r\n            margin-bottom: 3rem;\r\n            color: #ff00ff;\r\n            text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);\r\n        }\r\n\r\n        .cards-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-top: 3rem;\r\n        }\r\n\r\n        .card {\r\n            background: rgba(0, 20, 40, 0.3);\r\n            border: 1px solid rgba(0, 255, 255, 0.3);\r\n            border-radius: 10px;\r\n            padding: 2rem;\r\n            backdrop-filter: blur(10px);\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .card:hover {\r\n            transform: translateY(-10px);\r\n            border-color: rgba(255, 0, 255, 0.5);\r\n            box-shadow: 0 20px 40px rgba(255, 0, 255, 0.1);\r\n        }\r\n\r\n        .card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);\r\n            transition: left 0.5s ease;\r\n        }\r\n\r\n        .card:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .card h3 {\r\n            color: #00ffff;\r\n            margin-bottom: 1rem;\r\n            font-size: 1.3rem;\r\n        }\r\n\r\n        .card p {\r\n            color: #a0a0a0;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .contact-form {\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n            background: rgba(0, 20, 40, 0.3);\r\n            padding: 2rem;\r\n            border-radius: 10px;\r\n            border: 1px solid rgba(0, 255, 255, 0.3);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        .form-group {\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .form-group label {\r\n            display: block;\r\n            margin-bottom: 0.5rem;\r\n            color: #00ffff;\r\n        }\r\n\r\n        .form-group input,\r\n        .form-group textarea {\r\n            width: 100%;\r\n            padding: 0.8rem;\r\n            background: rgba(0, 0, 0, 0.5);\r\n            border: 1px solid rgba(0, 255, 255, 0.3);\r\n            border-radius: 5px;\r\n            color: #00ffff;\r\n            font-family: 'Courier New', monospace;\r\n        }\r\n\r\n        .form-group input:focus,\r\n        .form-group textarea:focus {\r\n            outline: none;\r\n            border-color: #ff00ff;\r\n            box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);\r\n        }\r\n\r\n        .hologram-1 {\r\n            top: 20%;\r\n            left: 10%;\r\n            width: 80px;\r\n            height: 80px;\r\n        }\r\n\r\n        .hologram-2 {\r\n            top: 60%;\r\n            right: 15%;\r\n            width: 100px;\r\n            height: 100px;\r\n        }\r\n\r\n        .hologram-3 {\r\n            top: 40%;\r\n            left: 5%;\r\n            width: 60px;\r\n            height: 60px;\r\n        }\r\n\r\n        .hologram-4 {\r\n            bottom: 30%;\r\n            right: 10%;\r\n            width: 90px;\r\n            height: 90px;\r\n        }\r\n\r\n        .cta-card {\r\n            background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));\r\n            border: 2px solid rgba(255, 0, 255, 0.5);\r\n            text-align: center;\r\n            grid-column: 1 \/ -1;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .cta-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: linear-gradient(45deg, transparent, rgba(255, 0, 255, 0.1), transparent);\r\n            animation: rotate 4s linear infinite;\r\n        }\r\n\r\n        @keyframes rotate {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        .stats-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n            gap: 2rem;\r\n            margin-top: 2rem;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .stat-item {\r\n            padding: 1.5rem;\r\n            background: rgba(0, 0, 0, 0.3);\r\n            border-radius: 10px;\r\n            border: 1px solid rgba(0, 255, 255, 0.3);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .stat-item:hover {\r\n            transform: translateY(-5px);\r\n            border-color: rgba(255, 0, 255, 0.5);\r\n            box-shadow: 0 10px 30px rgba(255, 0, 255, 0.2);\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 2rem;\r\n            font-weight: bold;\r\n            color: #00ffff;\r\n            margin-bottom: 0.5rem;\r\n            animation: pulse 2s ease-in-out infinite;\r\n        }\r\n\r\n        .stat-label {\r\n            color: #a0a0a0;\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        @keyframes pulse {\r\n            0%, 100% { \r\n                transform: scale(1);\r\n                text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);\r\n            }\r\n            50% { \r\n                transform: scale(1.05);\r\n                text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);\r\n            }\r\n        }\r\n\r\n        .stat-item:nth-child(1) .stat-number {\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .stat-item:nth-child(2) .stat-number {\r\n            animation-delay: 0.7s;\r\n        }\r\n\r\n        .stat-item:nth-child(3) .stat-number {\r\n            animation-delay: 1.4s;\r\n        }\r\n\r\n        .footer {\r\n            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(26, 0, 51, 0.9));\r\n            border-top: 2px solid rgba(255, 0, 255, 0.3);\r\n            padding: 3rem 0 1rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .footer::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 200%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.05), transparent);\r\n            animation: footerSweep 8s linear infinite;\r\n        }\r\n\r\n        @keyframes footerSweep {\r\n            0% { left: -100%; }\r\n            100% { left: 100%; }\r\n        }\r\n\r\n        .footer-content {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .footer-title {\r\n            font-size: 1.5rem;\r\n            color: #ff00ff;\r\n            text-align: center;\r\n            margin-bottom: 2rem;\r\n            text-shadow: 0 0 15px rgba(255, 0, 255, 0.6);\r\n            animation: titlePulse 3s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes titlePulse {\r\n            0%, 100% { \r\n                transform: scale(1);\r\n                filter: brightness(1);\r\n            }\r\n            50% { \r\n                transform: scale(1.02);\r\n                filter: brightness(1.2);\r\n            }\r\n        }\r\n\r\n        .footer-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 3rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .footer-column {\r\n            background: rgba(0, 20, 40, 0.2);\r\n            padding: 2rem;\r\n            border-radius: 10px;\r\n            border: 1px solid rgba(0, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .footer-column::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.1), transparent);\r\n            transition: left 0.5s ease;\r\n        }\r\n\r\n        .footer-column:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .footer-column:hover {\r\n            transform: translateY(-5px);\r\n            border-color: rgba(255, 0, 255, 0.4);\r\n            box-shadow: 0 10px 30px rgba(255, 0, 255, 0.2);\r\n        }\r\n\r\n        .footer-column h4 {\r\n            color: #00ffff;\r\n            font-size: 1.2rem;\r\n            margin-bottom: 1.5rem;\r\n            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);\r\n            animation: headerGlow 2s ease-in-out infinite alternate;\r\n        }\r\n\r\n        @keyframes headerGlow {\r\n            from { text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }\r\n            to { text-shadow: 0 0 20px rgba(0, 255, 255, 0.8); }\r\n        }\r\n\r\n        .contact-item {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 1rem;\r\n            color: #a0a0a0;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .contact-item:hover {\r\n            color: #00ffff;\r\n            transform: translateX(10px);\r\n        }\r\n\r\n        .contact-icon {\r\n            font-size: 1.2rem;\r\n            margin-right: 1rem;\r\n            animation: iconBounce 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes iconBounce {\r\n            0%, 100% { transform: scale(1); }\r\n            50% { transform: scale(1.1); }\r\n        }\r\n\r\n        .contact-item:nth-child(1) .contact-icon {\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .contact-item:nth-child(2) .contact-icon {\r\n            animation-delay: 0.5s;\r\n        }\r\n\r\n        .contact-item:nth-child(3) .contact-icon {\r\n            animation-delay: 1s;\r\n        }\r\n\r\n        .services-list {\r\n            list-style: none;\r\n        }\r\n\r\n        .services-list li {\r\n            color: #a0a0a0;\r\n            margin-bottom: 0.8rem;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            padding-left: 1rem;\r\n        }\r\n\r\n        .services-list li:hover {\r\n            color: #ff00ff;\r\n            transform: translateX(10px);\r\n        }\r\n\r\n        .services-list li::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 50%;\r\n            width: 6px;\r\n            height: 6px;\r\n            background: #00ffff;\r\n            border-radius: 50%;\r\n            transform: translateY(-50%);\r\n            animation: dotPulse 1.5s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes dotPulse {\r\n            0%, 100% { \r\n                transform: translateY(-50%) scale(1);\r\n                box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);\r\n            }\r\n            50% { \r\n                transform: translateY(-50%) scale(1.3);\r\n                box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);\r\n            }\r\n        }\r\n\r\n        .services-list li:nth-child(1)::before {\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .services-list li:nth-child(2)::before {\r\n            animation-delay: 0.3s;\r\n        }\r\n\r\n        .services-list li:nth-child(3)::before {\r\n            animation-delay: 0.6s;\r\n        }\r\n\r\n        .services-list li:nth-child(4)::before {\r\n            animation-delay: 0.9s;\r\n        }\r\n\r\n        .footer-bottom {\r\n            text-align: center;\r\n            padding-top: 2rem;\r\n            border-top: 1px solid rgba(0, 255, 255, 0.2);\r\n            position: relative;\r\n        }\r\n\r\n        .animated-line {\r\n            width: 100%;\r\n            height: 2px;\r\n            background: linear-gradient(90deg, transparent, #ff00ff, #00ffff, #ffff00, transparent);\r\n            margin-bottom: 1rem;\r\n            animation: lineFlow 3s linear infinite;\r\n        }\r\n\r\n        @keyframes lineFlow {\r\n            0% { transform: translateX(-100%); }\r\n            100% { transform: translateX(100%); }\r\n        }\r\n\r\n        .footer-bottom p {\r\n            color: #666;\r\n            font-size: 0.9rem;\r\n            animation: fadeInOut 4s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes fadeInOut {\r\n            0%, 100% { opacity: 0.6; }\r\n            50% { opacity: 1; }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .hero-content h1 {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .nav-links {\r\n                display: none;\r\n            }\r\n            \r\n            .container {\r\n                padding: 0 1rem;\r\n            }\r\n\r\n            .stats-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 1rem;\r\n            }\r\n\r\n            .cta-card h3 {\r\n                font-size: 1.4rem !important;\r\n            }\r\n\r\n            .footer-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 2rem;\r\n            }\r\n\r\n            .footer-title {\r\n                font-size: 1.2rem;\r\n            }\r\n\r\n            .footer-column {\r\n                padding: 1.5rem;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"custom-cursor\" id=\"customCursor\"><\/div>\r\n    \r\n    <!-- Rain Effect -->\r\n    <div class=\"rain\" id=\"rain\"><\/div>\r\n    \r\n    <!-- Skyline -->\r\n    <div class=\"skyline\">\r\n        <div class=\"building\" style=\"left: 5%; width: 60px; height: 120px;\"><\/div>\r\n        <div class=\"building\" style=\"left: 15%; width: 80px; height: 150px;\"><\/div>\r\n        <div class=\"building\" style=\"left: 25%; width: 50px; height: 100px;\"><\/div>\r\n        <div class=\"building\" style=\"left: 35%; width: 90px; height: 180px;\"><\/div>\r\n        <div class=\"building\" style=\"left: 50%; width: 70px; height: 130px;\"><\/div>\r\n        <div class=\"building\" style=\"left: 65%; width: 85px; height: 160px;\"><\/div>\r\n        <div class=\"building\" style=\"left: 80%; width: 60px; height: 110px;\"><\/div>\r\n        <div class=\"building\" style=\"left: 90%; width: 75px; height: 140px;\"><\/div>\r\n    <\/div>\r\n    \r\n    <!-- Particles -->\r\n    <div class=\"particles\" id=\"particles\"><\/div>\r\n    \r\n    <!-- Floating Holograms -->\r\n    <div class=\"floating-hologram hologram-1\">\r\n        <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\">\r\n            <defs>\r\n                <linearGradient id=\"holoGrad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                    <stop offset=\"0%\" style=\"stop-color:#ff00ff;stop-opacity:0.8\" \/>\r\n                    <stop offset=\"100%\" style=\"stop-color:#00ffff;stop-opacity:0.8\" \/>\r\n                <\/linearGradient>\r\n            <\/defs>\r\n            <circle cx=\"40\" cy=\"40\" r=\"35\" fill=\"none\" stroke=\"url(#holoGrad1)\" stroke-width=\"2\"\/>\r\n            <polygon points=\"40,15 55,35 25,35\" fill=\"url(#holoGrad1)\" opacity=\"0.6\"\/>\r\n            <circle cx=\"40\" cy=\"50\" r=\"8\" fill=\"url(#holoGrad1)\" opacity=\"0.8\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n    \r\n    <div class=\"floating-hologram hologram-2\">\r\n        <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\r\n            <defs>\r\n                <linearGradient id=\"holoGrad2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                    <stop offset=\"0%\" style=\"stop-color:#ffff00;stop-opacity:0.8\" \/>\r\n                    <stop offset=\"100%\" style=\"stop-color:#ff00ff;stop-opacity:0.8\" \/>\r\n                <\/linearGradient>\r\n            <\/defs>\r\n            <rect x=\"20\" y=\"20\" width=\"60\" height=\"60\" fill=\"none\" stroke=\"url(#holoGrad2)\" stroke-width=\"2\"\/>\r\n            <rect x=\"30\" y=\"30\" width=\"40\" height=\"40\" fill=\"url(#holoGrad2)\" opacity=\"0.3\"\/>\r\n            <circle cx=\"50\" cy=\"50\" r=\"15\" fill=\"none\" stroke=\"url(#holoGrad2)\" stroke-width=\"2\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n    \r\n    <div class=\"floating-hologram hologram-3\">\r\n        <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\">\r\n            <defs>\r\n                <linearGradient id=\"holoGrad3\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                    <stop offset=\"0%\" style=\"stop-color:#00ffff;stop-opacity:0.8\" \/>\r\n                    <stop offset=\"100%\" style=\"stop-color:#ffff00;stop-opacity:0.8\" \/>\r\n                <\/linearGradient>\r\n            <\/defs>\r\n            <polygon points=\"30,5 55,25 45,50 15,50 5,25\" fill=\"none\" stroke=\"url(#holoGrad3)\" stroke-width=\"2\"\/>\r\n            <polygon points=\"30,15 40,25 35,35 25,35 20,25\" fill=\"url(#holoGrad3)\" opacity=\"0.6\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n    \r\n    <div class=\"floating-hologram hologram-4\">\r\n        <svg width=\"90\" height=\"90\" viewBox=\"0 0 90 90\">\r\n            <defs>\r\n                <linearGradient id=\"holoGrad4\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                    <stop offset=\"0%\" style=\"stop-color:#ff00ff;stop-opacity:0.8\" \/>\r\n                    <stop offset=\"100%\" style=\"stop-color:#ffff00;stop-opacity:0.8\" \/>\r\n                <\/linearGradient>\r\n            <\/defs>\r\n            <path d=\"M45,10 L70,30 L70,60 L45,80 L20,60 L20,30 Z\" fill=\"none\" stroke=\"url(#holoGrad4)\" stroke-width=\"2\"\/>\r\n            <circle cx=\"45\" cy=\"45\" r=\"20\" fill=\"url(#holoGrad4)\" opacity=\"0.4\"\/>\r\n            <circle cx=\"45\" cy=\"45\" r=\"10\" fill=\"none\" stroke=\"url(#holoGrad4)\" stroke-width=\"2\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <!-- Navigation -->\r\n    <nav class=\"navbar\">\r\n        <div class=\"nav-content\">\r\n            <div class=\"logo\">\r\n                <div class=\"logo-container\">\r\n                    <div class=\"cyberpunk-logo\">COTE J\u00c1<\/div>\r\n                    <div class=\"tech-accent\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <ul class=\"nav-links\">\r\n                <li><a href=\"#home\">In\u00edcio<\/a><\/li>\r\n                <li><a href=\"#services\">Servi\u00e7os<\/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        <\/div>\r\n    <\/nav>\r\n\r\n    <!-- Hero Section -->\r\n    <section id=\"home\" class=\"hero\">\r\n        <div class=\"container\">\r\n            <div class=\"hero-content\">\r\n                <h1>FUTURO DIGITAL<\/h1>\r\n                <p>Tecnologia avan\u00e7ada para um mundo conectado<\/p>\r\n                <a href=\"#services\" class=\"cta-button\">COMO PODEMOS TE AJUDAR<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Services Section -->\r\n    <section id=\"services\" class=\"section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"section-title\">SERVI\u00c7OS<\/h2>\r\n            <div class=\"cards-grid\">\r\n                <div class=\"card\">\r\n                    <h3>Gest\u00e3o de Tr\u00e1fego<\/h3>\r\n                    <p>Capta\u00e7\u00e3o estrat\u00e9gica de audi\u00eancia qualificada com foco obsessivo em CPA otimizado e ROAS crescente. Cada real investido \u00e9 monitorado e otimizado para m\u00e1ximo retorno.<\/p>\r\n                    <br>\r\n                    <p style=\"color: #00ffff; font-size: 0.9rem;\">\r\n                        \u2713 Google Ads & Meta Ads<br>\r\n                        \u2713 Segmenta\u00e7\u00e3o avan\u00e7ada<br>\r\n                        \u2713 Otimiza\u00e7\u00e3o cont\u00ednua\r\n                    <\/p>\r\n                <\/div>\r\n                <div class=\"card\">\r\n                    <h3>Web Design<\/h3>\r\n                    <p>P\u00e1ginas e lojas com UX cient\u00edfico pensado para convers\u00e3o m\u00e1xima. Design responsivo, velocidade otimizada e SEO t\u00e9cnico que posiciona voc\u00ea \u00e0 frente da concorr\u00eancia.<\/p>\r\n                    <br>\r\n                    <p style=\"color: #00ffff; font-size: 0.9rem;\">\r\n                        \u2713 Landing pages de alta convers\u00e3o<br>\r\n                        \u2713 E-commerce otimizado<br>\r\n                        \u2713 Mobile-first design\r\n                    <\/p>\r\n                <\/div>\r\n                <div class=\"card\">\r\n                    <h3>Estrat\u00e9gias de Alcance<\/h3>\r\n                    <p>A\u00e7\u00f5es integradas (org\u00e2nico + pago) para escalar autoridade digital e dominar o topo de funil. Constru\u00edmos sua marca como refer\u00eancia no mercado.<\/p>\r\n                    <br>\r\n                    <p style=\"color: #00ffff; font-size: 0.9rem;\">\r\n                        \u2713 SEO estrat\u00e9gico<br>\r\n                        \u2713 Content marketing<br>\r\n                        \u2713 Social media integrado\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- About Section -->\r\n    <section id=\"about\" class=\"section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"section-title\">SOBRE N\u00d3S<\/h2>\r\n            <div class=\"cards-grid\">\r\n                <div class=\"card\">\r\n                    <h3>Inova\u00e7\u00e3o Constante<\/h3>\r\n                    <p>Desenvolvemos solu\u00e7\u00f5es tecnol\u00f3gicas que transcendem os limites do poss\u00edvel, criando experi\u00eancias digitais \u00fanicas e revolucion\u00e1rias.<\/p>\r\n                <\/div>\r\n                <div class=\"card\">\r\n                    <h3>Intelig\u00eancia Artificial<\/h3>\r\n                    <p>Nossos sistemas de IA aprendem e evoluem constantemente, proporcionando insights precisos e automa\u00e7\u00e3o inteligente.<\/p>\r\n                <\/div>\r\n                <div class=\"card\">\r\n                    <h3>Transforma\u00e7\u00e3o Digital<\/h3>\r\n                    <p>Conectamos o presente ao futuro atrav\u00e9s de tecnologias emergentes e solu\u00e7\u00f5es disruptivas que redefinem mercados.<\/p>\r\n                <\/div>\r\n                <div class=\"card cta-card\">\r\n                    <h3 style=\"color: #ff00ff; font-size: 1.8rem; margin-bottom: 1.5rem;\">Pronto para escalar seus resultados?<\/h3>\r\n                    <p style=\"font-size: 1.1rem; margin-bottom: 2rem;\">Receba uma proposta personalizada com estrat\u00e9gias espec\u00edficas para o seu neg\u00f3cio. An\u00e1lise gratuita e plano de a\u00e7\u00e3o detalhado.<\/p>\r\n                    \r\n                    <div class=\"stats-grid\">\r\n                        <div class=\"stat-item\">\r\n                            <div class=\"stat-number\">104%<\/div>\r\n                            <div class=\"stat-label\">Aumento m\u00e9dio em convers\u00f5es<\/div>\r\n                        <\/div>\r\n                        <div class=\"stat-item\">\r\n                            <div class=\"stat-number\">1.89x<\/div>\r\n                            <div class=\"stat-label\">ROAS m\u00e9dio dos clientes<\/div>\r\n                        <\/div>\r\n                        <div class=\"stat-item\">\r\n                            <div class=\"stat-number\">30 a 60 dias<\/div>\r\n                            <div class=\"stat-label\">Para primeiros resultados<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Contact Section -->\r\n    <section id=\"contact\" class=\"section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"section-title\">CONTATO<\/h2>\r\n            <form class=\"contact-form\" action=\"enviar_email.php\" method=\"POST\">\r\n                <div class=\"form-group\">\r\n                    <label for=\"name\">NOME:<\/label>\r\n                    <input type=\"text\" id=\"name\" name=\"name\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"company\">EMPRESA:<\/label>\r\n                    <input type=\"text\" id=\"company\" name=\"company\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"phone\">TELEFONE:<\/label>\r\n                    <input type=\"tel\" id=\"phone\" name=\"phone\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"email\">E-MAIL:<\/label>\r\n                    <input type=\"email\" id=\"email\" name=\"email\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"message\">MENSAGEM:<\/label>\r\n                    <textarea id=\"message\" name=\"message\" rows=\"5\" required><\/textarea>\r\n                <\/div>\r\n                <button type=\"submit\" class=\"cta-button\">ENVIAR MENSAGEM<\/button>\r\n            <\/form>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Footer -->\r\n    <footer class=\"footer\">\r\n        <div class=\"container\">\r\n            <div class=\"footer-content\">\r\n                <div class=\"footer-section\">\r\n                    <h3 class=\"footer-title\">Transformamos tr\u00e1fego em clientes atrav\u00e9s de estrat\u00e9gias integradas de marketing digital.<\/h3>\r\n                <\/div>\r\n                \r\n                <div class=\"footer-grid\">\r\n                    <div class=\"footer-column\">\r\n                        <h4>Contato<\/h4>\r\n                        <div class=\"contact-item\">\r\n                            <span class=\"contact-icon\">\ud83d\udce7<\/span>\r\n                            <a href=\"mailto:contato@coteja.com\" style=\"color: inherit; text-decoration: none;\">contato@coteja.com\r\n                        <\/div>\r\n                        <div class=\"contact-item\">\r\n                            <span class=\"contact-icon\">\ud83d\udcf1<\/span>\r\n                            <a href=\"tel:+5511991301195\" style=\"color: inherit; text-decoration: none;\">(11) 99130-1195<\/a>\r\n                        <\/div>\r\n                        <div class=\"contact-item\">\r\n                            <span class=\"contact-icon\">\ud83c\udfe2<\/span>\r\n                            <span>COTE JA - CNPJ: 62.248.060\/0001-85<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"footer-column\">\r\n                        <h4>Servi\u00e7os<\/h4>\r\n                        <ul class=\"services-list\">\r\n                            <li>Gest\u00e3o de Tr\u00e1fego Pago<\/li>\r\n                            <li>Web Design & UX<\/li>\r\n                            <li>Estrat\u00e9gias de Alcance<\/li>\r\n                            <li>SEO & Content Marketing<\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"footer-bottom\">\r\n                    <div class=\"animated-line\"><\/div>\r\n                    <p>&copy; 2025 COTE J\u00c1 - Ag\u00eancia de Performance Digital. Todos os direitos reservados<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/footer>\r\n\r\n    <script>\r\n        \/\/ Custom cursor\r\n        const cursor = document.getElementById('customCursor');\r\n        let mouseX = 0, mouseY = 0;\r\n\r\n        document.addEventListener('mousemove', (e) => {\r\n            mouseX = e.clientX;\r\n            mouseY = e.clientY;\r\n            cursor.style.left = mouseX - 10 + 'px';\r\n            cursor.style.top = mouseY - 10 + 'px';\r\n        });\r\n\r\n        \/\/ Rain effect\r\n        function createRain() {\r\n            const rain = document.getElementById('rain');\r\n            for (let i = 0; i < 100; i++) {\r\n                const drop = document.createElement('div');\r\n                drop.className = 'raindrop';\r\n                drop.style.left = Math.random() * 100 + '%';\r\n                drop.style.animationDuration = (Math.random() * 3 + 2) + 's';\r\n                drop.style.animationDelay = Math.random() * 2 + 's';\r\n                rain.appendChild(drop);\r\n            }\r\n        }\r\n\r\n        \/\/ Particles effect\r\n        function createParticles() {\r\n            const particles = document.getElementById('particles');\r\n            for (let i = 0; i < 50; i++) {\r\n                const particle = document.createElement('div');\r\n                particle.className = 'particle';\r\n                particle.style.left = Math.random() * 100 + '%';\r\n                particle.style.top = Math.random() * 100 + '%';\r\n                particle.style.animationDelay = Math.random() * 6 + 's';\r\n                particles.appendChild(particle);\r\n            }\r\n        }\r\n\r\n        \/\/ Hologram interactions\r\n        const holograms = document.querySelectorAll('.floating-hologram');\r\n        document.addEventListener('mousemove', (e) => {\r\n            holograms.forEach(hologram => {\r\n                const rect = hologram.getBoundingClientRect();\r\n                const holoX = rect.left + rect.width \/ 2;\r\n                const holoY = rect.top + rect.height \/ 2;\r\n                \r\n                const distance = Math.sqrt(Math.pow(e.clientX - holoX, 2) + Math.pow(e.clientY - holoY, 2));\r\n                const maxDistance = 200;\r\n                \r\n                if (distance < maxDistance) {\r\n                    const force = (maxDistance - distance) \/ maxDistance;\r\n                    const angle = Math.atan2(e.clientY - holoY, e.clientX - holoX);\r\n                    const moveX = Math.cos(angle) * force * 30;\r\n                    const moveY = Math.sin(angle) * force * 30;\r\n                    \r\n                    hologram.style.transform = `translate(${moveX}px, ${moveY}px) scale(${1 + force * 0.5}) rotate(${force * 360}deg)`;\r\n                    hologram.style.filter = `drop-shadow(0 0 ${20 + force * 30}px rgba(255, 0, 255, ${0.5 + force * 0.5}))`;\r\n                } else {\r\n                    hologram.style.transform = 'translate(0px, 0px) scale(1) rotate(0deg)';\r\n                    hologram.style.filter = 'drop-shadow(0 0 10px rgba(0, 255, 255, 0.5))';\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Smooth scrolling\r\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n            anchor.addEventListener('click', function (e) {\r\n                e.preventDefault();\r\n                const target = document.querySelector(this.getAttribute('href'));\r\n                if (target) {\r\n                    target.scrollIntoView({\r\n                        behavior: 'smooth',\r\n                        block: 'start'\r\n                    });\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Form submission\r\n        document.querySelector('.contact-form').addEventListener('submit', function(e) {\r\n            e.preventDefault();\r\n            \r\n            \/\/ Collect form data\r\n            const formData = new FormData(this);\r\n            const name = formData.get('name');\r\n            const company = formData.get('company');\r\n            const phone = formData.get('phone');\r\n            const email = formData.get('email');\r\n            const message = formData.get('message');\r\n            \r\n            \/\/ Visual feedback\r\n            const button = this.querySelector('button');\r\n            const originalText = button.textContent;\r\n            button.textContent = 'ENVIANDO...';\r\n            button.style.background = 'linear-gradient(45deg, #00ff00, #00ffff)';\r\n            button.disabled = true;\r\n            \r\n            \/\/ Simulate sending (replace with actual email service)\r\n            const emailData = {\r\n                to: 'contato@pink-leopard-846522.hostingersite.com',\r\n                subject: `Contato do Site - ${name}`,\r\n                body: `\r\n                    Nome: ${name}\r\n                    Empresa: ${company}\r\n                    Telefone: ${phone}\r\n                    E-mail: ${email}\r\n                    \r\n                    Mensagem:\r\n                    ${message}\r\n                `\r\n            };\r\n            \r\n            \/\/ Here you would integrate with an email service like EmailJS, Formspree, or your backend\r\n            \/\/ For now, we'll show success feedback\r\n            setTimeout(() => {\r\n                button.textContent = 'MENSAGEM ENVIADA!';\r\n                button.style.background = 'linear-gradient(45deg, #00ff00, #00ffff)';\r\n                \r\n                \/\/ Reset form\r\n                this.reset();\r\n                \r\n                \/\/ Show success message\r\n                const successMsg = document.createElement('div');\r\n                successMsg.innerHTML = '\u2705 Mensagem enviada com sucesso! Entraremos em contato em breve.';\r\n                successMsg.style.cssText = `\r\n                    position: fixed;\r\n                    top: 50%;\r\n                    left: 50%;\r\n                    transform: translate(-50%, -50%);\r\n                    background: rgba(0, 255, 0, 0.1);\r\n                    border: 2px solid #00ff00;\r\n                    color: #00ff00;\r\n                    padding: 2rem;\r\n                    border-radius: 10px;\r\n                    backdrop-filter: blur(10px);\r\n                    z-index: 10000;\r\n                    text-align: center;\r\n                    font-family: 'Courier New', monospace;\r\n                    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);\r\n                `;\r\n                document.body.appendChild(successMsg);\r\n                \r\n                setTimeout(() => {\r\n                    document.body.removeChild(successMsg);\r\n                    button.textContent = originalText;\r\n                    button.style.background = 'linear-gradient(45deg, #ff00ff, #00ffff)';\r\n                    button.disabled = false;\r\n                }, 3000);\r\n            }, 2000);\r\n        });\r\n\r\n        \/\/ Initialize effects\r\n        createRain();\r\n        createParticles();\r\n\r\n        \/\/ Parallax effect for skyline\r\n        window.addEventListener('scroll', () => {\r\n            const scrolled = window.pageYOffset;\r\n            const skyline = document.querySelector('.skyline');\r\n            skyline.style.transform = `translateY(${scrolled * 0.5}px)`;\r\n        });\r\n\r\n        \/\/ Glitch effect for title\r\n        const title = document.querySelector('.hero-content h1');\r\n        setInterval(() => {\r\n            if (Math.random() < 0.1) {\r\n                title.style.textShadow = '2px 0 #ff00ff, -2px 0 #00ffff';\r\n                setTimeout(() => {\r\n                    title.style.textShadow = '0 0 30px rgba(0, 255, 255, 0.5)';\r\n                }, 100);\r\n            }\r\n        }, 2000);\r\n    <\/script>\r\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'981043996390f1ef',t:'MTc1ODE5MjQzNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CyberTech &#8211; Futuro Digital COTE J\u00c1 In\u00edcio Servi\u00e7os Sobre Contato FUTURO DIGITAL Tecnologia avan\u00e7ada para um mundo conectado COMO PODEMOS TE AJUDAR SERVI\u00c7OS Gest\u00e3o de Tr\u00e1fego Capta\u00e7\u00e3o estrat\u00e9gica de audi\u00eancia qualificada com foco obsessivo em CPA otimizado e ROAS crescente. Cada real investido \u00e9 monitorado e otimizado para m\u00e1ximo retorno. \u2713 Google Ads &#038; Meta [&hellip;]<\/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-1","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/coteja.com\/index.php?rest_route=\/wp\/v2\/pages\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coteja.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coteja.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coteja.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coteja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1"}],"version-history":[{"count":7,"href":"https:\/\/coteja.com\/index.php?rest_route=\/wp\/v2\/pages\/1\/revisions"}],"predecessor-version":[{"id":1127,"href":"https:\/\/coteja.com\/index.php?rest_route=\/wp\/v2\/pages\/1\/revisions\/1127"}],"wp:attachment":[{"href":"https:\/\/coteja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}