{"id":2670,"date":"2026-04-05T02:46:04","date_gmt":"2026-04-04T21:16:04","guid":{"rendered":"https:\/\/thesocialflys.com\/?page_id=2670"},"modified":"2026-04-05T04:11:04","modified_gmt":"2026-04-04T22:41:04","slug":"home","status":"publish","type":"page","link":"https:\/\/thesocialflys.com\/","title":{"rendered":"The Social Flys"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n\n\n\nThe Social Flys \u2014 Grow Together<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n\n<style>\n:root {\n --black: #000000;\n --white: #ffffff;\n --lime: #C8FF00;\n --grey: #111111;\n --mid: #1a1a1a;\n --text-muted: #555;\n --border: rgba(255,255,255,0.08);\n}\n\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\nhtml {\n scroll-behavior: smooth;\n overflow-x: hidden;\n}\n\nbody {\n background: var(--black);\n color: var(--white);\n font-family: 'DM Sans', sans-serif;\n cursor: none;\n overflow-x: hidden;\n}\n\n\/* \u2500\u2500\u2500 CUSTOM CURSOR \u2500\u2500\u2500 *\/\n#cursor {\n position: fixed;\n width: 12px; height: 12px;\n background: var(--lime);\n border-radius: 50%;\n pointer-events: none;\n z-index: 9999;\n transform: translate(-50%, -50%);\n transition: transform 0.1s, width 0.3s, height 0.3s, background 0.3s;\n mix-blend-mode: difference;\n}\n#cursor-follower {\n position: fixed;\n width: 40px; height: 40px;\n border: 1px solid rgba(200,255,0,0.4);\n border-radius: 50%;\n pointer-events: none;\n z-index: 9998;\n transform: translate(-50%, -50%);\n transition: transform 0.15s ease, width 0.3s, height 0.3s, opacity 0.3s;\n}\nbody:has(a:hover) #cursor,\nbody:has(button:hover) #cursor { width: 60px; height: 60px; }\n\n\/* \u2500\u2500\u2500 NOISE OVERLAY \u2500\u2500\u2500 *\/\n#noise {\n position: fixed;\n inset: 0;\n z-index: 9990;\n pointer-events: none;\n opacity: 0.035;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n}\n\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\nnav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 28px 60px;\n mix-blend-mode: difference;\n}\n.nav-logo {\n font-family: 'Syne', sans-serif;\n font-weight: 800;\n font-size: 18px;\n letter-spacing: 0.05em;\n color: var(--white);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.nav-logo svg { width: 32px; height: 32px; }\n.nav-links {\n display: flex;\n gap: 40px;\n list-style: none;\n}\n.nav-links a {\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n font-weight: 400;\n color: var(--white);\n text-decoration: none;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n opacity: 0.6;\n transition: opacity 0.3s;\n}\n.nav-links a:hover { opacity: 1; }\n.nav-cta {\n font-family: 'DM Sans', sans-serif;\n font-size: 12px;\n font-weight: 500;\n color: var(--black);\n background: var(--lime);\n border: none;\n padding: 12px 24px;\n border-radius: 100px;\n cursor: none;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n.nav-cta:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(200,255,0,0.3); }\n\n\/* \u2500\u2500\u2500 CANVAS BG \u2500\u2500\u2500 *\/\n#bg-canvas {\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n}\n\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n#hero {\n position: relative;\n z-index: 1;\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 0 60px 80px;\n overflow: hidden;\n}\n.hero-tag {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--lime);\n margin-bottom: 24px;\n opacity: 0;\n transform: translateY(20px);\n}\n.hero-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(80px, 13vw, 200px);\n line-height: 0.9;\n letter-spacing: -0.02em;\n color: var(--white);\n overflow: hidden;\n}\n.hero-title .line {\n display: block;\n overflow: hidden;\n}\n.hero-title .word {\n display: inline-block;\n transform: translateY(110%);\n}\n.hero-bottom {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n margin-top: 60px;\n}\n.hero-desc {\n max-width: 340px;\n font-size: 15px;\n line-height: 1.7;\n color: rgba(255,255,255,0.5);\n font-weight: 300;\n opacity: 0;\n transform: translateY(20px);\n}\n.hero-cta-group {\n display: flex;\n gap: 16px;\n align-items: center;\n opacity: 0;\n transform: translateY(20px);\n}\n.btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n font-weight: 500;\n background: var(--lime);\n color: var(--black);\n border: none;\n padding: 18px 36px;\n border-radius: 100px;\n cursor: none;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n transition: transform 0.3s, box-shadow 0.3s;\n text-decoration: none;\n}\n.btn-primary:hover { transform: scale(1.04); box-shadow: 0 0 40px rgba(200,255,0,0.25); }\n.btn-ghost {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n font-weight: 400;\n color: var(--white);\n text-decoration: none;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n opacity: 0.6;\n transition: opacity 0.3s;\n}\n.btn-ghost:hover { opacity: 1; }\n.scroll-indicator {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n opacity: 0.4;\n animation: scrollBounce 2s ease-in-out infinite;\n}\n.scroll-indicator span {\n font-size: 10px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n writing-mode: vertical-rl;\n}\n.scroll-line {\n width: 1px;\n height: 60px;\n background: linear-gradient(var(--lime), transparent);\n}\n\n@keyframes scrollBounce {\n 0%, 100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(8px); }\n}\n\n\/* \u2500\u2500\u2500 MARQUEE \u2500\u2500\u2500 *\/\n.marquee-wrap {\n position: relative;\n z-index: 1;\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n padding: 22px 0;\n overflow: hidden;\n background: var(--grey);\n}\n.marquee-track {\n display: flex;\n gap: 60px;\n animation: marquee 18s linear infinite;\n white-space: nowrap;\n width: max-content;\n}\n.marquee-track span {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 0.1em;\n color: transparent;\n -webkit-text-stroke: 1px rgba(255,255,255,0.2);\n}\n.marquee-track span.accent {\n color: var(--lime);\n -webkit-text-stroke: none;\n}\n@keyframes marquee {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n}\n\n\/* \u2500\u2500\u2500 SERVICES \u2500\u2500\u2500 *\/\n#services {\n position: relative;\n z-index: 1;\n padding: 140px 60px;\n}\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 80px;\n}\n.section-label {\n font-size: 11px;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--lime);\n font-weight: 500;\n padding-top: 8px;\n}\n.section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(50px, 7vw, 100px);\n line-height: 0.95;\n letter-spacing: -0.01em;\n max-width: 700px;\n}\n.services-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1px;\n background: var(--border);\n border: 1px solid var(--border);\n}\n.service-card {\n background: var(--black);\n padding: 48px 40px;\n position: relative;\n overflow: hidden;\n transition: background 0.4s;\n cursor: none;\n}\n.service-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--lime);\n transform: scaleY(0);\n transform-origin: bottom;\n transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);\n z-index: 0;\n}\n.service-card:hover::before { transform: scaleY(1); }\n.service-card:hover .service-num,\n.service-card:hover .service-name,\n.service-card:hover .service-desc { color: var(--black); }\n.service-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 0.2em;\n color: rgba(255,255,255,0.2);\n margin-bottom: 40px;\n position: relative;\n z-index: 1;\n transition: color 0.4s;\n}\n.service-icon {\n width: 48px;\n height: 48px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n}\n.service-name {\n font-family: 'Syne', sans-serif;\n font-size: 22px;\n font-weight: 700;\n margin-bottom: 16px;\n position: relative;\n z-index: 1;\n transition: color 0.4s;\n}\n.service-desc {\n font-size: 14px;\n line-height: 1.7;\n color: rgba(255,255,255,0.45);\n position: relative;\n z-index: 1;\n transition: color 0.4s;\n}\n.service-arrow {\n position: absolute;\n bottom: 40px;\n right: 40px;\n width: 44px;\n height: 44px;\n border: 1px solid var(--border);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n transition: border-color 0.4s, background 0.4s;\n}\n.service-card:hover .service-arrow {\n border-color: var(--black);\n background: var(--black);\n}\n.service-card:hover .service-arrow svg { stroke: var(--lime); }\n\n\/* \u2500\u2500\u2500 NUMBERS \u2500\u2500\u2500 *\/\n#numbers {\n position: relative;\n z-index: 1;\n padding: 100px 60px;\n display: grid;\n grid-template-columns: repeat(4,1fr);\n gap: 1px;\n background: var(--border);\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n}\n.num-item {\n background: var(--black);\n padding: 60px 40px;\n text-align: center;\n}\n.num-val {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(60px, 6vw, 90px);\n color: var(--lime);\n line-height: 1;\n margin-bottom: 8px;\n}\n.num-label {\n font-size: 13px;\n color: rgba(255,255,255,0.4);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n\n\/* \u2500\u2500\u2500 WORK \u2500\u2500\u2500 *\/\n#work {\n position: relative;\n z-index: 1;\n padding: 140px 60px;\n}\n.work-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-top: 80px;\n}\n.work-card {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n background: var(--mid);\n aspect-ratio: 4\/3;\n cursor: none;\n group: true;\n}\n.work-card:first-child {\n grid-row: span 2;\n aspect-ratio: unset;\n}\n.work-card-bg {\n position: absolute;\n inset: 0;\n transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);\n}\n.work-card:hover .work-card-bg { transform: scale(1.06); }\n.work-card-bg-1 { background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #111 100%); }\n.work-card-bg-2 { background: linear-gradient(135deg, #0a0a0a 0%, #161616 100%); }\n.work-card-bg-3 { background: linear-gradient(135deg, #0d0d0d 0%, #191919 100%); }\n.work-card-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);\n z-index: 2;\n}\n.work-card-content {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 36px;\n z-index: 3;\n}\n.work-tag {\n font-size: 10px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--lime);\n margin-bottom: 8px;\n}\n.work-title {\n font-family: 'Syne', sans-serif;\n font-size: 22px;\n font-weight: 700;\n margin-bottom: 4px;\n}\n.work-sub {\n font-size: 13px;\n color: rgba(255,255,255,0.4);\n}\n.work-mockup {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n opacity: 0.3;\n}\n\n\/* \u2500\u2500\u2500 PROCESS \u2500\u2500\u2500 *\/\n#process {\n position: relative;\n z-index: 1;\n padding: 140px 60px;\n background: var(--grey);\n}\n.process-steps {\n margin-top: 80px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n.process-step {\n display: flex;\n align-items: center;\n padding: 48px 0;\n border-bottom: 1px solid var(--border);\n gap: 80px;\n transition: all 0.4s;\n cursor: none;\n}\n.process-step:hover .step-num { color: var(--lime); }\n.step-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 18px;\n letter-spacing: 0.15em;\n color: rgba(255,255,255,0.2);\n transition: color 0.3s;\n min-width: 60px;\n}\n.step-name {\n font-family: 'Syne', sans-serif;\n font-size: clamp(22px, 3vw, 36px);\n font-weight: 700;\n flex: 1;\n}\n.step-desc {\n max-width: 360px;\n font-size: 14px;\n line-height: 1.7;\n color: rgba(255,255,255,0.45);\n}\n.step-arrow {\n width: 48px;\n height: 48px;\n border: 1px solid var(--border);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.3s;\n}\n.process-step:hover .step-arrow {\n background: var(--lime);\n border-color: var(--lime);\n}\n.process-step:hover .step-arrow svg { stroke: var(--black); }\n\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n#testimonials {\n position: relative;\n z-index: 1;\n padding: 140px 60px;\n overflow: hidden;\n}\n.testi-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-top: 80px;\n}\n.testi-card {\n background: var(--mid);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 48px;\n position: relative;\n overflow: hidden;\n}\n.testi-card::before {\n content: '\"';\n font-family: 'Bebas Neue', sans-serif;\n font-size: 180px;\n color: var(--lime);\n opacity: 0.06;\n position: absolute;\n top: -20px;\n left: 20px;\n line-height: 1;\n}\n.testi-text {\n font-size: 17px;\n line-height: 1.75;\n color: rgba(255,255,255,0.75);\n margin-bottom: 36px;\n position: relative;\n z-index: 1;\n}\n.testi-author {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n.testi-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--lime), #00cc88);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Syne', sans-serif;\n font-weight: 700;\n color: var(--black);\n font-size: 18px;\n}\n.testi-name {\n font-family: 'Syne', sans-serif;\n font-weight: 700;\n font-size: 15px;\n}\n.testi-role {\n font-size: 12px;\n color: rgba(255,255,255,0.35);\n margin-top: 2px;\n}\n\n\/* \u2500\u2500\u2500 CTA \u2500\u2500\u2500 *\/\n#cta {\n position: relative;\n z-index: 1;\n padding: 140px 60px;\n text-align: center;\n overflow: hidden;\n}\n#cta::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(200,255,0,0.06) 0%, transparent 70%);\n pointer-events: none;\n}\n.cta-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(60px, 10vw, 140px);\n line-height: 0.95;\n letter-spacing: -0.02em;\n margin-bottom: 40px;\n}\n.cta-title em {\n font-style: normal;\n -webkit-text-stroke: 1px rgba(255,255,255,0.3);\n color: transparent;\n}\n.cta-sub {\n font-size: 16px;\n color: rgba(255,255,255,0.45);\n max-width: 500px;\n margin: 0 auto 48px;\n line-height: 1.7;\n}\n.cta-email {\n font-family: 'Syne', sans-serif;\n font-size: 18px;\n color: var(--lime);\n text-decoration: none;\n border-bottom: 1px solid rgba(200,255,0,0.3);\n padding-bottom: 4px;\n transition: border-color 0.3s;\n display: inline-block;\n margin-top: 24px;\n}\n.cta-email:hover { border-color: var(--lime); }\n\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\nfooter {\n position: relative;\n z-index: 1;\n border-top: 1px solid var(--border);\n padding: 48px 60px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.footer-logo {\n font-family: 'Syne', sans-serif;\n font-weight: 800;\n font-size: 16px;\n letter-spacing: 0.05em;\n}\n.footer-copy {\n font-size: 12px;\n color: rgba(255,255,255,0.3);\n letter-spacing: 0.05em;\n}\n.footer-links {\n display: flex;\n gap: 32px;\n list-style: none;\n}\n.footer-links a {\n font-size: 12px;\n color: rgba(255,255,255,0.4);\n text-decoration: none;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition: color 0.3s;\n}\n.footer-links a:hover { color: var(--lime); }\n\n\/* \u2500\u2500\u2500 PRELOADER \u2500\u2500\u2500 *\/\n#preloader {\n position: fixed;\n inset: 0;\n z-index: 9997;\n background: var(--black);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 24px;\n}\n.preloader-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 48px;\n letter-spacing: 0.1em;\n color: var(--white);\n overflow: hidden;\n}\n.preloader-logo span {\n display: inline-block;\n animation: preloaderSlide 0.6s ease forwards;\n opacity: 0;\n}\n@keyframes preloaderSlide {\n from { transform: translateY(60px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n.preloader-bar-wrap {\n width: 200px;\n height: 1px;\n background: rgba(255,255,255,0.1);\n position: relative;\n overflow: hidden;\n}\n.preloader-bar {\n position: absolute;\n inset: 0;\n background: var(--lime);\n transform: scaleX(0);\n transform-origin: left;\n animation: preloaderBar 1.8s ease forwards 0.3s;\n}\n@keyframes preloaderBar {\n to { transform: scaleX(1); }\n}\n.preloader-count {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 0.2em;\n color: rgba(255,255,255,0.3);\n}\n\n\/* \u2500\u2500\u2500 MOBILE \u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n nav { padding: 20px 24px; }\n .nav-links { display: none; }\n #hero { padding: 0 24px 60px; }\n .hero-bottom { flex-direction: column; gap: 32px; align-items: flex-start; }\n #services { padding: 80px 24px; }\n .section-header { flex-direction: column; gap: 16px; }\n .services-grid { grid-template-columns: 1fr; }\n #numbers { grid-template-columns: 1fr 1fr; padding: 60px 24px; }\n #work { padding: 80px 24px; }\n .work-grid { grid-template-columns: 1fr; }\n .work-card:first-child { grid-row: unset; }\n #process { padding: 80px 24px; }\n .process-step { flex-wrap: wrap; gap: 20px; }\n .step-desc { max-width: 100%; }\n #testimonials { padding: 80px 24px; }\n .testi-grid { grid-template-columns: 1fr; }\n #cta { padding: 80px 24px; }\n footer { flex-direction: column; gap: 24px; text-align: center; padding: 40px 24px; }\n .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }\n}\n\n\/* \u2500\u2500\u2500 SCROLL ANIM UTILITIES \u2500\u2500\u2500 *\/\n.reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- Noise -->\n<div id=\"noise\"><\/div>\n\n<!-- Cursor -->\n<div id=\"cursor\"><\/div>\n<div id=\"cursor-follower\"><\/div>\n\n<!-- Preloader -->\n<div id=\"preloader\">\n <div class=\"preloader-logo\">\n <span style=\"animation-delay:0s\">T<\/span><span style=\"animation-delay:0.04s\">H<\/span><span style=\"animation-delay:0.08s\">E<\/span> <span style=\"animation-delay:0.14s\">S<\/span><span style=\"animation-delay:0.18s\">O<\/span><span style=\"animation-delay:0.22s\">C<\/span><span style=\"animation-delay:0.26s\">I<\/span><span style=\"animation-delay:0.30s\">A<\/span><span style=\"animation-delay:0.34s\">L<\/span> <span style=\"animation-delay:0.40s\">F<\/span><span style=\"animation-delay:0.44s\">L<\/span><span style=\"animation-delay:0.48s\">Y<\/span><span style=\"animation-delay:0.52s\">S<\/span>\n <\/div>\n <div class=\"preloader-bar-wrap\"><div class=\"preloader-bar\"><\/div><\/div>\n <div class=\"preloader-count\" id=\"preloader-count\">0%<\/div>\n<\/div>\n\n<!-- Canvas Background -->\n<canvas id=\"bg-canvas\"><\/canvas>\n\n<!-- NAV -->\n<nav>\n <a href=\"#\" class=\"nav-logo\">\n <svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <!-- Origami bird simplified -->\n <polygon points=\"50,10 80,40 60,35\" fill=\"white\" opacity=\"0.9\"\/>\n <polygon points=\"60,35 80,40 70,60\" fill=\"white\" opacity=\"0.7\"\/>\n <polygon points=\"50,10 60,35 30,50\" fill=\"white\" opacity=\"0.8\"\/>\n <polygon points=\"30,50 60,35 70,60\" fill=\"white\" opacity=\"0.6\"\/>\n <polygon points=\"30,50 70,60 50,80\" fill=\"white\" opacity=\"0.5\"\/>\n <\/svg>\n THE SOCIAL FLYS\n <\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#work\">Work<\/a><\/li>\n <li><a href=\"#process\">Process<\/a><\/li>\n <li><a href=\"#testimonials\">Clients<\/a><\/li>\n <\/ul>\n <button class=\"nav-cta\" onclick=\"document.getElementById('cta').scrollIntoView({behavior:'smooth'})\">Let’s Talk<\/button>\n<\/nav>\n\n<!-- HERO -->\n<section id=\"hero\">\n <p class=\"hero-tag\">\u2726 Mumbai’s Premier Digital Growth Agency<\/p>\n <h1 class=\"hero-title\">\n <span class=\"line\"><span class=\"word\">WE MAKE<\/span><\/span>\n <span class=\"line\"><span class=\"word\">BRANDS<\/span><\/span>\n <span class=\"line\"><span class=\"word\" style=\"color: var(--lime)\">FLY.<\/span><\/span>\n <\/h1>\n <div class=\"hero-bottom\">\n <p class=\"hero-desc\">Data-driven social media marketing, branding, and digital strategy that turns your audience into a loyal community.<\/p>\n <div class=\"hero-cta-group\">\n <a href=\"#work\" class=\"btn-primary\">\n View Our Work\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/a>\n <a href=\"#services\" class=\"btn-ghost\">\n Our Services\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"scroll-indicator\">\n <div class=\"scroll-line\"><\/div>\n <span>Scroll<\/span>\n <\/div>\n<\/section>\n\n<!-- MARQUEE -->\n<div class=\"marquee-wrap\">\n <div class=\"marquee-track\" id=\"marquee-inner\">\n <span>SOCIAL MEDIA<\/span> <span class=\"accent\">\u2726<\/span>\n <span>CONTENT CREATION<\/span> <span class=\"accent\">\u2726<\/span>\n <span>BRAND STRATEGY<\/span> <span class=\"accent\">\u2726<\/span>\n <span>PAID ADS<\/span> <span class=\"accent\">\u2726<\/span>\n <span>SEO<\/span> <span class=\"accent\">\u2726<\/span>\n <span>INFLUENCER MARKETING<\/span> <span class=\"accent\">\u2726<\/span>\n <span>WEB DESIGN<\/span> <span class=\"accent\">\u2726<\/span>\n <span>GROW TOGETHER<\/span> <span class=\"accent\">\u2726<\/span>\n <span>SOCIAL MEDIA<\/span> <span class=\"accent\">\u2726<\/span>\n <span>CONTENT CREATION<\/span> <span class=\"accent\">\u2726<\/span>\n <span>BRAND STRATEGY<\/span> <span class=\"accent\">\u2726<\/span>\n <span>PAID ADS<\/span> <span class=\"accent\">\u2726<\/span>\n <span>SEO<\/span> <span class=\"accent\">\u2726<\/span>\n <span>INFLUENCER MARKETING<\/span> <span class=\"accent\">\u2726<\/span>\n <span>WEB DESIGN<\/span> <span class=\"accent\">\u2726<\/span>\n <span>GROW TOGETHER<\/span> <span class=\"accent\">\u2726<\/span>\n <\/div>\n<\/div>\n\n<!-- SERVICES -->\n<section id=\"services\">\n <div class=\"section-header reveal\">\n <span class=\"section-label\">What We Do<\/span>\n <h2 class=\"section-title\">DIGITAL SERVICES THAT DELIVER<\/h2>\n <\/div>\n <div class=\"services-grid\">\n <div class=\"service-card reveal\">\n <div class=\"service-num\">01<\/div>\n <svg class=\"service-icon\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"4\" y=\"8\" width=\"40\" height=\"28\" rx=\"3\"\/>\n <path d=\"M16 40h16M24 36v4\"\/>\n <circle cx=\"24\" cy=\"22\" r=\"6\"\/>\n <path d=\"M14 22h4M30 22h4\"\/>\n <\/svg>\n <div class=\"service-name\">Social Media Marketing<\/div>\n <div class=\"service-desc\">Strategic campaigns across Instagram, Facebook, LinkedIn & more. We grow your following and convert it into real revenue.<\/div>\n <div class=\"service-arrow\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"service-card reveal\" style=\"transition-delay:0.1s\">\n <div class=\"service-num\">02<\/div>\n <svg class=\"service-icon\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M8 36L20 18l8 12 6-8 6 14\"\/>\n <circle cx=\"38\" cy=\"10\" r=\"4\"\/>\n <\/svg>\n <div class=\"service-name\">Performance & Paid Ads<\/div>\n <div class=\"service-desc\">Meta Ads, Google Ads, YouTube campaigns optimised for maximum ROAS. Every rupee tracked, every result reported.<\/div>\n <div class=\"service-arrow\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"service-card reveal\" style=\"transition-delay:0.2s\">\n <div class=\"service-num\">03<\/div>\n <svg class=\"service-icon\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M24 4l4 12h12l-10 8 4 12-10-8-10 8 4-12L8 16h12z\"\/>\n <\/svg>\n <div class=\"service-name\">Brand Strategy & Identity<\/div>\n <div class=\"service-desc\">We craft brands that people remember. From naming and positioning to visual identity that stops the scroll.<\/div>\n <div class=\"service-arrow\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"service-card reveal\" style=\"transition-delay:0.0s\">\n <div class=\"service-num\">04<\/div>\n <svg class=\"service-icon\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <rect x=\"6\" y=\"6\" width=\"36\" height=\"28\" rx=\"3\"\/>\n <path d=\"M16 34v8M32 34v8M10 42h28\"\/>\n <path d=\"M16 20h16M16 26h10\"\/>\n <\/svg>\n <div class=\"service-name\">Content Creation<\/div>\n <div class=\"service-desc\">Reels, carousels, copywriting, photography & video production. Content that gets shared, not scrolled past.<\/div>\n <div class=\"service-arrow\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"service-card reveal\" style=\"transition-delay:0.1s\">\n <div class=\"service-num\">05<\/div>\n <svg class=\"service-icon\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <circle cx=\"24\" cy=\"24\" r=\"18\"\/>\n <path d=\"M24 6v36M6 24h36\"\/>\n <path d=\"M12 12c0 0 6 6 12 6s12-6 12-6\"\/>\n <path d=\"M12 36c0 0 6-6 12-6s12 6 12 6\"\/>\n <\/svg>\n <div class=\"service-name\">SEO & Web Design<\/div>\n <div class=\"service-desc\">Fast, beautiful websites optimised to rank. From WordPress to custom builds that convert visitors to customers.<\/div>\n <div class=\"service-arrow\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"service-card reveal\" style=\"transition-delay:0.2s\">\n <div class=\"service-num\">06<\/div>\n <svg class=\"service-icon\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M24 8c0 0-12 8-12 20s12 12 12 12 12-4 12-12S24 8 24 8z\"\/>\n <circle cx=\"24\" cy=\"24\" r=\"6\"\/>\n <\/svg>\n <div class=\"service-name\">Influencer Marketing<\/div>\n <div class=\"service-desc\">Curated influencer partnerships that reach your ideal audience authentically. Nano to mega \u2014 we manage it all.<\/div>\n <div class=\"service-arrow\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- NUMBERS -->\n<div id=\"numbers\">\n <div class=\"num-item reveal\">\n <div class=\"num-val\" data-target=\"150\">0<\/div>\n <div class=\"num-label\">Clients Served<\/div>\n <\/div>\n <div class=\"num-item reveal\" style=\"transition-delay:0.1s\">\n <div class=\"num-val\" data-target=\"500\">0<\/div>\n <div class=\"num-label\">Campaigns Launched<\/div>\n <\/div>\n <div class=\"num-item reveal\" style=\"transition-delay:0.2s\">\n <div class=\"num-val\" data-target=\"10\">0<\/div>\n <div class=\"num-label\">Cr+ Revenue Generated<\/div>\n <\/div>\n <div class=\"num-item reveal\" style=\"transition-delay:0.3s\">\n <div class=\"num-val\" data-target=\"98\">0<\/div>\n <div class=\"num-label\">% Client Retention<\/div>\n <\/div>\n<\/div>\n\n<!-- WORK -->\n<section id=\"work\">\n <div class=\"section-header reveal\">\n <span class=\"section-label\">Portfolio<\/span>\n <h2 class=\"section-title\">OUR WORK SPEAKS FOR ITSELF<\/h2>\n <\/div>\n <div class=\"work-grid\">\n <div class=\"work-card reveal\">\n <div class=\"work-card-bg work-card-bg-1\">\n <div class=\"work-mockup\">\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" opacity=\"0.5\">\n <rect x=\"40\" y=\"20\" width=\"120\" height=\"160\" rx=\"12\" stroke=\"white\" stroke-width=\"1\"\/>\n <rect x=\"55\" y=\"50\" width=\"90\" height=\"60\" rx=\"4\" stroke=\"#C8FF00\" stroke-width=\"1\"\/>\n <rect x=\"55\" y=\"125\" width=\"40\" height=\"6\" rx=\"3\" fill=\"white\" opacity=\"0.4\"\/>\n <rect x=\"55\" y=\"138\" width=\"60\" height=\"4\" rx=\"2\" fill=\"white\" opacity=\"0.2\"\/>\n <circle cx=\"140\" cy=\"40\" r=\"8\" stroke=\"#C8FF00\" stroke-width=\"1\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"work-card-overlay\"><\/div>\n <div class=\"work-card-content\">\n <p class=\"work-tag\">Social Media + Paid Ads<\/p>\n <h3 class=\"work-title\">FreshBrew Co.<\/h3>\n <p class=\"work-sub\">340% ROAS in 3 months<\/p>\n <\/div>\n <\/div>\n <div class=\"work-card reveal\" style=\"transition-delay:0.15s\">\n <div class=\"work-card-bg work-card-bg-2\">\n <div class=\"work-mockup\">\n <svg width=\"140\" height=\"140\" viewBox=\"0 0 140 140\" fill=\"none\" opacity=\"0.5\">\n <circle cx=\"70\" cy=\"70\" r=\"50\" stroke=\"white\" stroke-width=\"1\"\/>\n <path d=\"M70 20v100M20 70h100\" stroke=\"#C8FF00\" stroke-width=\"1\"\/>\n <circle cx=\"70\" cy=\"70\" r=\"25\" stroke=\"white\" stroke-width=\"1\" stroke-dasharray=\"4 4\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"work-card-overlay\"><\/div>\n <div class=\"work-card-content\">\n <p class=\"work-tag\">Brand Identity + SEO<\/p>\n <h3 class=\"work-title\">TechNova India<\/h3>\n <p class=\"work-sub\">5x organic growth in 6 months<\/p>\n <\/div>\n <\/div>\n <div class=\"work-card reveal\" style=\"transition-delay:0.25s\">\n <div class=\"work-card-bg work-card-bg-3\">\n <div class=\"work-mockup\">\n <svg width=\"140\" height=\"100\" viewBox=\"0 0 140 100\" fill=\"none\" opacity=\"0.5\">\n <rect x=\"10\" y=\"10\" width=\"120\" height=\"80\" rx=\"8\" stroke=\"white\" stroke-width=\"1\"\/>\n <path d=\"M30 60L50 35l20 18 15-10 25 17\" stroke=\"#C8FF00\" stroke-width=\"1.5\"\/>\n <circle cx=\"110\" cy=\"20\" r=\"6\" fill=\"#C8FF00\" opacity=\"0.6\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"work-card-overlay\"><\/div>\n <div class=\"work-card-content\">\n <p class=\"work-tag\">Influencer + Content<\/p>\n <h3 class=\"work-title\">Velvet Fashion<\/h3>\n <p class=\"work-sub\">2M+ impressions, 18% engagement<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- PROCESS -->\n<section id=\"process\">\n <div class=\"section-header reveal\">\n <span class=\"section-label\">How We Work<\/span>\n <h2 class=\"section-title\">OUR SIMPLE PROCESS<\/h2>\n <\/div>\n <div class=\"process-steps\">\n <div class=\"process-step reveal\">\n <div class=\"step-num\">01<\/div>\n <div class=\"step-name\">Discovery & Audit<\/div>\n <div class=\"step-desc\">We dive deep into your brand, audience, competitors, and current digital footprint to understand where you are and where you need to go.<\/div>\n <div class=\"step-arrow\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"process-step reveal\" style=\"transition-delay:0.1s\">\n <div class=\"step-num\">02<\/div>\n <div class=\"step-name\">Strategy & Blueprint<\/div>\n <div class=\"step-desc\">We craft a data-backed growth strategy with clear KPIs, timelines, content pillars, and budget allocations tailored for your goals.<\/div>\n <div class=\"step-arrow\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"process-step reveal\" style=\"transition-delay:0.15s\">\n <div class=\"step-num\">03<\/div>\n <div class=\"step-name\">Create & Execute<\/div>\n <div class=\"step-desc\">Our creative team builds content, ads, and campaigns while our strategists launch and monitor everything in real-time.<\/div>\n <div class=\"step-arrow\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"process-step reveal\" style=\"transition-delay:0.2s\">\n <div class=\"step-num\">04<\/div>\n <div class=\"step-name\">Optimise & Scale<\/div>\n <div class=\"step-desc\">We analyse, iterate, and double down on what’s working. Continuous optimisation ensures your results compound month over month.<\/div>\n <div class=\"step-arrow\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- TESTIMONIALS -->\n<section id=\"testimonials\">\n <div class=\"section-header reveal\">\n <span class=\"section-label\">Client Love<\/span>\n <h2 class=\"section-title\">WHAT THEY SAY<\/h2>\n <\/div>\n <div class=\"testi-grid\">\n <div class=\"testi-card reveal\">\n <p class=\"testi-text\">The Social Flys transformed our brand presence completely. In just 4 months, our Instagram following grew by 800% and we saw a direct impact on our sales. They don’t just post content \u2014 they build communities.<\/p>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\">R<\/div>\n <div>\n <div class=\"testi-name\">Rohit Sharma<\/div>\n <div class=\"testi-role\">Founder, FreshBrew Co.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card reveal\" style=\"transition-delay:0.15s\">\n <p class=\"testi-text\">Working with TSF was the best marketing decision we made. Their paid ads team is exceptional \u2014 they got us to \u20b910L monthly revenue from ads with a fraction of the budget we were wasting before.<\/p>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\">P<\/div>\n <div>\n <div class=\"testi-name\">Priya Mehta<\/div>\n <div class=\"testi-role\">CMO, TechNova India<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card reveal\" style=\"transition-delay:0.1s\">\n <p class=\"testi-text\">The content they create is simply stunning. Our brand went from invisible to being the conversation piece in our industry. The team is responsive, creative, and genuinely invested in your growth.<\/p>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\">A<\/div>\n <div>\n <div class=\"testi-name\">Aisha Khan<\/div>\n <div class=\"testi-role\">Creative Director, Velvet Fashion<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card reveal\" style=\"transition-delay:0.25s\">\n <p class=\"testi-text\">They get digital marketing in a way most agencies don’t. Data-driven, creative, and always one step ahead of trends. Our ROI has been consistently above 300% every quarter since we partnered with them.<\/p>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\">V<\/div>\n <div>\n <div class=\"testi-name\">Vikram Nair<\/div>\n <div class=\"testi-role\">CEO, GreenLeaf Organics<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- CTA -->\n<section id=\"cta\">\n <h2 class=\"cta-title reveal\">\n READY TO <em>FLY<\/em><br>TOGETHER?\n <\/h2>\n <p class=\"cta-sub reveal\" style=\"transition-delay:0.1s\">Let’s build something remarkable. Tell us about your brand and we’ll tell you exactly how we’ll help it grow.<\/p>\n <div class=\"hero-cta-group\" style=\"justify-content:center\" class=\"reveal\">\n <a href=\"mailto:hello@thesocialflys.com\" class=\"btn-primary\" style=\"font-size:15px; padding:20px 44px;\">\n Start Your Journey\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n <\/a>\n <\/div>\n <a href=\"mailto:hello@thesocialflys.com\" class=\"cta-email reveal\" style=\"transition-delay:0.2s\">hello@thesocialflys.com<\/a>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n <div class=\"footer-logo\">THE SOCIAL FLYS <span style=\"color:var(--lime)\">\u2726<\/span> GROW TOGETHER<\/div>\n <p class=\"footer-copy\">\u00a9 2025 thesocialflys.com \u2014 All rights reserved.<\/p>\n <ul class=\"footer-links\">\n <li><a href=\"https:\/\/instagram.com\/thesocialflys\" target=\"_blank\" rel=\"noopener\">Instagram<\/a><\/li>\n <li><a href=\"https:\/\/linkedin.com\/company\/thesocialflys\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a><\/li>\n <li><a href=\"mailto:hello@thesocialflys.com\">Contact<\/a><\/li>\n <\/ul>\n<\/footer>\n\n<script>\n\/* \u2500\u2500\u2500 PRELOADER \u2500\u2500\u2500 *\/\nlet count = 0;\nconst countEl = document.getElementById('preloader-count');\nconst counter = setInterval(() => {\n count += Math.floor(Math.random() * 12) + 5;\n if (count >= 100) {\n count = 100;\n clearInterval(counter);\n setTimeout(() => {\n const pre = document.getElementById('preloader');\n pre.style.transition = 'opacity 0.7s ease, transform 0.7s ease';\n pre.style.opacity = '0';\n pre.style.transform = 'translateY(-20px)';\n setTimeout(() => { pre.style.display = 'none'; initAnimations(); }, 700);\n }, 300);\n }\n countEl.textContent = count + '%';\n}, 60);\n\n\/* \u2500\u2500\u2500 CURSOR \u2500\u2500\u2500 *\/\nconst cursor = document.getElementById('cursor');\nconst follower = document.getElementById('cursor-follower');\nlet mx = 0, my = 0, fx = 0, fy = 0;\ndocument.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });\nfunction animateCursor() {\n cursor.style.left = mx + 'px';\n cursor.style.top = my + 'px';\n fx += (mx - fx) * 0.12;\n fy += (my - fy) * 0.12;\n follower.style.left = fx + 'px';\n follower.style.top = fy + 'px';\n requestAnimationFrame(animateCursor);\n}\nanimateCursor();\n\n\/* \u2500\u2500\u2500 THREE.JS PARTICLE FIELD \u2500\u2500\u2500 *\/\nfunction initParticles() {\n const canvas = document.getElementById('bg-canvas');\n const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.setSize(window.innerWidth, window.innerHeight);\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 100);\n camera.position.z = 3;\n\n const count = 1800;\n const positions = new Float32Array(count * 3);\n for (let i = 0; i < count * 3; i++) {\n positions[i] = (Math.random() - 0.5) * 12;\n }\n const geo = new THREE.BufferGeometry();\n geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n const mat = new THREE.PointsMaterial({ color: 0xC8FF00, size: 0.025, transparent: true, opacity: 0.45 });\n const points = new THREE.Points(geo, mat);\n scene.add(points);\n\n \/\/ Origami bird lines\n const lineMat = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.03 });\n for (let i = 0; i < 8; i++) {\n const lineGeo = new THREE.BufferGeometry().setFromPoints([\n new THREE.Vector3((Math.random()-0.5)*8, (Math.random()-0.5)*8, (Math.random()-0.5)*2),\n new THREE.Vector3((Math.random()-0.5)*8, (Math.random()-0.5)*8, (Math.random()-0.5)*2),\n ]);\n scene.add(new THREE.Line(lineGeo, lineMat));\n }\n\n let mouseX = 0, mouseY = 0;\n document.addEventListener('mousemove', e => {\n mouseX = (e.clientX \/ window.innerWidth - 0.5) * 0.3;\n mouseY = (e.clientY \/ window.innerHeight - 0.5) * 0.3;\n });\n\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n function render() {\n requestAnimationFrame(render);\n points.rotation.y += 0.0005;\n points.rotation.x += 0.0002;\n camera.position.x += (mouseX - camera.position.x) * 0.04;\n camera.position.y += (-mouseY - camera.position.y) * 0.04;\n camera.lookAt(scene.position);\n renderer.render(scene, camera);\n }\n render();\n}\n\n\/* \u2500\u2500\u2500 SCROLL REVEAL \u2500\u2500\u2500 *\/\nfunction initScrollReveal() {\n const els = document.querySelectorAll('.reveal');\n const obs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('visible'); }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });\n els.forEach(el => obs.observe(el));\n}\n\n\/* \u2500\u2500\u2500 COUNTER ANIMATION \u2500\u2500\u2500 *\/\nfunction animateCounters() {\n const counters = document.querySelectorAll('.num-val[data-target]');\n const obs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting && !e.target.classList.contains('counted')) {\n e.target.classList.add('counted');\n const target = parseInt(e.target.dataset.target);\n let current = 0;\n const step = target \/ 60;\n const timer = setInterval(() => {\n current += step;\n if (current >= target) { current = target; clearInterval(timer); }\n e.target.textContent = Math.round(current) + (e.target.nextElementSibling.textContent.includes('%') ? '%' : '+');\n }, 24);\n }\n });\n }, { threshold: 0.3 });\n counters.forEach(c => obs.observe(c));\n}\n\n\/* \u2500\u2500\u2500 HERO ANIMATIONS \u2500\u2500\u2500 *\/\nfunction initHeroAnimations() {\n const words = document.querySelectorAll('.hero-title .word');\n words.forEach((w, i) => {\n setTimeout(() => {\n w.style.transition = 'transform 1s cubic-bezier(0.16, 1, 0.3, 1)';\n w.style.transform = 'translateY(0)';\n }, 200 + i * 120);\n });\n setTimeout(() => {\n document.querySelector('.hero-tag').style.cssText = 'opacity:1; transform:translateY(0); transition: all 0.8s ease 0.1s;';\n document.querySelector('.hero-desc').style.cssText = 'opacity:1; transform:translateY(0); transition: all 0.8s ease 0.3s;';\n document.querySelector('.hero-cta-group').style.cssText = 'opacity:1; transform:translateY(0); transition: all 0.8s ease 0.5s;';\n }, 600);\n}\n\n\/* \u2500\u2500\u2500 MAGNETIC BUTTONS \u2500\u2500\u2500 *\/\nfunction initMagnetic() {\n document.querySelectorAll('.btn-primary, .nav-cta, .btn-ghost').forEach(btn => {\n btn.addEventListener('mousemove', e => {\n const rect = btn.getBoundingClientRect();\n const cx = rect.left + rect.width \/ 2;\n const cy = rect.top + rect.height \/ 2;\n const dx = (e.clientX - cx) * 0.25;\n const dy = (e.clientY - cy) * 0.25;\n btn.style.transform = `translate(${dx}px, ${dy}px) scale(1.04)`;\n });\n btn.addEventListener('mouseleave', () => {\n btn.style.transform = '';\n });\n });\n}\n\n\/* \u2500\u2500\u2500 INIT \u2500\u2500\u2500 *\/\nfunction initAnimations() {\n initParticles();\n initScrollReveal();\n animateCounters();\n initHeroAnimations();\n initMagnetic();\n}\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\t\t\t\t\t\t\t\t<\/div>\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>The Social Flys \u2014 Grow Together THE SOCIAL FLYS 0% THE SOCIAL FLYS Services Work Process Clients Let’s Talk \u2726 Mumbai’s Premier Digital Growth Agency WE MAKE BRANDS FLY. Data-driven social media marketing, branding, and digital strategy that turns your audience into a loyal community. View Our Work Our Services Scroll SOCIAL MEDIA \u2726 CONTENT CREATION \u2726 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2670","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"enabled","hero_elements":[{"id":"custom_title","enabled":false,"heading_tag":"h1","title":"Home","__id":"dyCxeNLdD1-I31GGG7ys2"},{"id":"custom_description","enabled":false,"description_visibility":{"desktop":true,"tablet":true,"mobile":false},"__id":"S78L3VpNBuIEP9DfykGcL","hero_item_spacing":"28"},{"id":"custom_meta","enabled":false,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":false,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true},"__id":"M6zYIY32G-kGwxclIpmE0"},{"id":"breadcrumbs","enabled":false,"__id":"nQfuLiwA8g9T33TQX-lid"}],"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_page\"] .entry-header .page-title {--theme-font-size:30px;} [data-prefix=\"single_page\"] .entry-header .entry-meta {--theme-font-weight:600;--theme-text-transform:uppercase;--theme-font-size:12px;--theme-line-height:1.3;}","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/thesocialflys.com\/index.php?rest_route=\/wp\/v2\/pages\/2670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesocialflys.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thesocialflys.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thesocialflys.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thesocialflys.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2670"}],"version-history":[{"count":7,"href":"https:\/\/thesocialflys.com\/index.php?rest_route=\/wp\/v2\/pages\/2670\/revisions"}],"predecessor-version":[{"id":2682,"href":"https:\/\/thesocialflys.com\/index.php?rest_route=\/wp\/v2\/pages\/2670\/revisions\/2682"}],"wp:attachment":[{"href":"https:\/\/thesocialflys.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}