{"id":8,"date":"2026-03-08T17:17:27","date_gmt":"2026-03-08T17:17:27","guid":{"rendered":"https:\/\/thehoppers.fun\/?page_id=8"},"modified":"2026-03-09T05:50:40","modified_gmt":"2026-03-09T05:50:40","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/thehoppers.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4036533 e-con-full e-flex e-con e-parent\" data-id=\"4036533\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-646c619 elementor-widget elementor-widget-html\" data-id=\"646c619\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"hoppers-hero-sovereign\" class=\"hop-hero\">\r\n    <video autoplay loop muted playsinline class=\"hop-video\">\r\n        <source src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/HOPPERS-BG.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n\r\n    <div class=\"hop-ui\">\r\n        <nav class=\"hop-nav\">\r\n            <div class=\"hop-logo\">HOPPERS<\/div>\r\n            <div class=\"hop-actions\">\r\n                <div class=\"hop-social-links\">\r\n                    <a href=\"https:\/\/x.com\/the_h0ppers\" class=\"hop-social-item\">TWITER<\/a>\r\n                    <a href=\"https:\/\/t.me\/theh0ppers\" class=\"hop-social-item\">TELEGRAM<\/a>\r\n                <\/div>\r\n                <button class=\"hop-btn-station\">BUY NOW<\/button>\r\n            <\/div>\r\n        <\/nav>\r\n\r\n        <main class=\"hop-main\">\r\n            <div class=\"hop-parallax-trigger\">\r\n                <h1 class=\"hop-hero-title\">Life Is Wilder<br>on the Other Side<\/h1>\r\n                \r\n                <div class=\"hop-ca-wrapper\">\r\n                    <div class=\"hop-ca-body\">\r\n                        <div class=\"hop-ca-meta\">\r\n                            <span class=\"hop-label\">OFFICIAL_CONTRACT<\/span>\r\n                            <code id=\"hop-address\">GH3U67tZoMJTMT1tYaUv7gmByNP3edG9qbr5PHvBpump<\/code>\r\n                        <\/div>\r\n                        <button class=\"hop-copy-btn\" onclick=\"copyCA()\">COPY<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/main>\r\n\r\n        <footer class=\"hop-footer\">\r\n            <div class=\"hop-scroll-anim\">\r\n                <div class=\"hop-scroll-line\"><\/div>\r\n                <span class=\"hop-scroll-text\">SCROLL DOWN<\/span>\r\n            <\/div>\r\n        <\/footer>\r\n    <\/div>\r\n\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Handjet:wght@100..900&display=swap');\r\n\r\n        :root {\r\n            --hop-cyan: #00f2fe;\r\n            --hop-white: #ffffff;\r\n            --hop-font: 'Handjet', cursive;\r\n        }\r\n\r\n        \/* Container & Base *\/\r\n        .hop-hero {\r\n            position: relative;\r\n            height: 100vh;\r\n            width: 100%;\r\n            background: #000;\r\n            font-family: var(--hop-font);\r\n            overflow: hidden;\r\n            color: var(--hop-white);\r\n        }\r\n\r\n        .hop-video {\r\n            position: absolute;\r\n            top: 50%; left: 50%;\r\n            width: 100%; height: 100%;\r\n            object-fit: cover;\r\n            transform: translate(-50%, -50%);\r\n            z-index: 1;\r\n        }\r\n\r\n        .hop-ui {\r\n            position: relative;\r\n            z-index: 2;\r\n            height: 100%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            \/* Subtle vignette for readability *\/\r\n            background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.5) 100%);\r\n        }\r\n\r\n        \/* Nav Design *\/\r\n        .hop-nav {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 10px 60px;\r\n        }\r\n\r\n        .hop-logo {\r\n            font-size: clamp(1.8rem, 4vw, 2rem);\r\n            font-weight: 900;\r\n            letter-spacing: 3px;\r\n        }\r\n\r\n        .hop-actions {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 40px;\r\n        }\r\n\r\n        .hop-social-links { display: flex; gap: 20px; }\r\n\r\n        .hop-social-item {\r\n            text-decoration: none;\r\n            color: rgba(255,255,255,0.6);\r\n            font-size: 1.1rem;\r\n            font-weight: 500;\r\n            transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n        }\r\n\r\n        .hop-social-item:hover {\r\n            color: var(--hop-cyan);\r\n            text-shadow: 0 0 10px var(--hop-cyan);\r\n        }\r\n\r\n        .hop-btn-station {\r\n            background: transparent;\r\n            border: 1px solid var(--hop-white);\r\n            color: var(--hop-white);\r\n            padding: 6px 24px;\r\n            font-family: var(--hop-font);\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            border-radius: 0;\r\n            transition: 0.4s;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .hop-btn-station:hover {\r\n            background: var(--hop-white);\r\n            color: #000;\r\n            box-shadow: 0 0 20px rgba(255,255,255,0.2);\r\n        }\r\n\r\n        \/* Main Hero Section *\/\r\n        .hop-main {\r\n            flex: 1;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            text-align: center;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        .hop-hero-title {\r\n            \/* Responsive Fluid Font *\/\r\n            font-size: clamp(3rem, 11vw, 8.5rem);\r\n            font-weight: 900;\r\n            line-height: 0.85;\r\n            margin: 0;\r\n            text-transform: uppercase;\r\n            letter-spacing: -2px;\r\n            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));\r\n        }\r\n\r\n        \/* CA Display - Sharp & Brutalist *\/\r\n        .hop-ca-wrapper {\r\n            margin-top: 50px;\r\n            display: inline-block;\r\n            width: 100%;\r\n            max-width: 520px;\r\n        }\r\n\r\n        .hop-ca-body {\r\n            display: flex;\r\n            background: rgba(0,0,0,0.7);\r\n            backdrop-filter: blur(12px);\r\n            border: 1px solid rgba(255,255,255,0.1);\r\n            align-items: stretch;\r\n        }\r\n\r\n        .hop-ca-meta {\r\n            flex: 1;\r\n            padding: 12px 25px;\r\n            text-align: left;\r\n        }\r\n\r\n        .hop-label {\r\n            display: block;\r\n            font-size: 0.75rem;\r\n            letter-spacing: 3px;\r\n            color: var(--hop-cyan);\r\n            margin-bottom: 4px;\r\n        }\r\n\r\n        #hop-address {\r\n            font-family: var(--hop-font);\r\n            font-size: clamp(1rem, 2.5vw, 1rem);\r\n            font-weight: 400;\r\n            letter-spacing: 1px;\r\n            color: var(--hop-white);\r\n            word-break: break-all;\r\n        }\r\n\r\n        .hop-copy-btn {\r\n            background: rgba(255,255,255,0.05);\r\n            border: none;\r\n            border-left: 1px solid rgba(255,255,255,0.1);\r\n            color: var(--hop-white);\r\n            font-family: var(--hop-font);\r\n            font-size: 1.rem;\r\n            font-weight: 800;\r\n            padding: 0 25px;\r\n            cursor: pointer;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .hop-copy-btn:hover {\r\n            background: var(--hop-cyan);\r\n            color: #000;\r\n        }\r\n\r\n        \/* Footer \/ Scroll *\/\r\n        .hop-footer {\r\n            padding: 30px;\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        .hop-scroll-anim {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 15px;\r\n            opacity: 0.5;\r\n        }\r\n\r\n        .hop-scroll-line {\r\n            width: 1px;\r\n            height: 60px;\r\n            background: linear-gradient(to bottom, var(--hop-cyan), transparent);\r\n        }\r\n\r\n        .hop-scroll-text {\r\n            font-size: 0.9rem;\r\n            letter-spacing: 4px;\r\n        }\r\n\r\n        \/* Mobile Fixes *\/\r\n        @media (max-width: 768px) {\r\n            .hop-nav { padding: 20px; }\r\n            .hop-actions { gap: 15px; }\r\n            .hop-social-links { display: none; }\r\n            .hop-ca-body { flex-direction: column; }\r\n            .hop-ca-meta { text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }\r\n            .hop-copy-btn { padding: 12px; border-left: none; width: 100%; }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n        function copyCA() {\r\n            const code = document.getElementById(\"hop-address\").innerText;\r\n            navigator.clipboard.writeText(code);\r\n            const btn = document.querySelector(\".hop-copy-btn\");\r\n            btn.innerText = \"COPIED\";\r\n            btn.style.color = \"#000\";\r\n            btn.style.backgroundColor = \"var(--hop-cyan)\";\r\n            \r\n            setTimeout(() => {\r\n                btn.innerText = \"COPY\";\r\n                btn.style.color = \"\";\r\n                btn.style.backgroundColor = \"\";\r\n            }, 2000);\r\n        }\r\n\r\n        \/\/ Optimized Parallax\r\n        window.addEventListener(\"scroll\", function() {\r\n            const scroll = window.pageYOffset;\r\n            const content = document.querySelector(\".hop-parallax-trigger\");\r\n            const video = document.querySelector(\".hop-video\");\r\n            \r\n            content.style.transform = `translateY(${scroll * 0.45}px)`;\r\n            content.style.opacity = 1 - (scroll \/ 750);\r\n            \r\n            \/\/ Subtle Zoom Effect\r\n            video.style.transform = `translate(-50%, -50%) scale(${1 + scroll * 0.0004})`;\r\n        });\r\n    <\/script>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-689deea e-con-full e-flex e-con e-parent\" data-id=\"689deea\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d1108d elementor-widget elementor-widget-html\" data-id=\"1d1108d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"ho-about-refined\" class=\"abr-root\">\r\n    <div class=\"abr-container\">\r\n        \r\n        <div class=\"abr-content\" data-aos=\"fade-up\" data-aos-duration=\"1000\">\r\n            <h2 class=\"abr-title\">A Different Way to See Nature<\/h2>\r\n            <div class=\"abr-line\"><\/div>\r\n            <p class=\"abr-text\">\r\n                In Hoppers, scientists create a breakthrough that allows human consciousness to \u201chop\u201d into lifelike robotic animals. Through this technology, people can finally experience the animal world from the inside. When Mabel, a passionate animal lover, tries it herself, she discovers a hidden side of nature filled with secrets, personalities, and surprises.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"abr-visual\" data-aos=\"fade-up\" data-aos-duration=\"1200\" data-aos-delay=\"200\">\r\n            <div class=\"abr-glitch-frame\">\r\n                <img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-6.png\" alt=\"Hoppers\" class=\"abr-img\">\r\n                <div class=\"abr-glitch-layer abr-red\"><\/div>\r\n                <div class=\"abr-glitch-layer abr-blue\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Handjet:wght@100..900&display=swap');\r\n\r\n        .abr-root {\r\n            position: relative;\r\n            width: 100%;\r\n            padding: 80px 0; \/* Padding lebih kecil agar tidak terlalu tinggi *\/\r\n            background: transparent;\r\n            font-family: 'Handjet', cursive;\r\n            color: #000000;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .abr-container {\r\n            max-width: 1100px; \/* Lebar container dikurangi agar lebih compact *\/\r\n            margin: 0 auto;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding: 0 40px;\r\n            gap: 60px;\r\n        }\r\n\r\n        \/* Teks Section *\/\r\n        .abr-content {\r\n            flex: 1;\r\n            max-width: 550px;\r\n        }\r\n\r\n        .abr-title {\r\n            font-size: clamp(2.2rem, 4vw, 3.2rem); \/* Ukuran font lebih proporsional *\/\r\n            font-weight: 800;\r\n            line-height: 0.95;\r\n            margin: 0 0 20px 0;\r\n            text-transform: uppercase;\r\n            letter-spacing: -1px;\r\n        }\r\n\r\n        .abr-line {\r\n            width: 50px;\r\n            height: 4px;\r\n            background: #000;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .abr-text {\r\n            font-size: clamp(1.1rem, 1.5vw, 1.75rem); \/* Ukuran baca yang nyaman *\/\r\n            line-height: 1.35;\r\n            font-weight: 500;\r\n            margin: 0;\r\n            opacity: 0.9;\r\n        }\r\n\r\n        \/* Gambar Section *\/\r\n        .abr-visual {\r\n            flex: 0.8; \/* Kolom gambar lebih kecil dari teks *\/\r\n            display: flex;\r\n            justify-content: flex-end;\r\n        }\r\n\r\n        .abr-glitch-frame {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 380px; \/* Ukuran gambar dibatasi agar tidak \"gede banget\" *\/\r\n        }\r\n\r\n        .abr-img {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* Glitch Effect - Halus *\/\r\n        .abr-glitch-layer {\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: url('http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-6.png') no-repeat center;\r\n            background-size: contain;\r\n            z-index: 1;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .abr-red { filter: drop-shadow(2px 0 #ff2d55); animation: abr-glitch 4s infinite; }\r\n        .abr-blue { filter: drop-shadow(-2px 0 #00f2fe); animation: abr-glitch 4s infinite 0.1s; }\r\n\r\n        @keyframes abr-glitch {\r\n            0%, 93%, 100% { opacity: 0; transform: translate(0); }\r\n            95% { opacity: 0.4; transform: translate(5px, -2px); }\r\n            97% { opacity: 0; transform: translate(0); }\r\n            98% { opacity: 0.4; transform: translate(-5px, 2px); }\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        @media (max-width: 991px) {\r\n            .abr-container { flex-direction: column; text-align: center; gap: 40px; }\r\n            .abr-content { max-width: 100%; order: 1; }\r\n            .abr-visual { width: 100%; justify-content: center; order: 2; }\r\n            .abr-line { margin: 0 auto 25px auto; }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .abr-root { padding: 50px 0; }\r\n            .abr-title { font-size: 2.5rem; }\r\n            .abr-glitch-frame { max-width: 280px; }\r\n        }\r\n    <\/style>\r\n\r\n    <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            AOS.init({ duration: 1000, once: false });\r\n\r\n            \/\/ Subtle Parallax on Scroll\r\n            window.addEventListener('scroll', function() {\r\n                const scrolled = window.pageYOffset;\r\n                const img = document.querySelector('.abr-glitch-frame');\r\n                if(img) {\r\n                    const speed = 0.05;\r\n                    img.style.transform = `translateY(${scrolled * speed}px)`;\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b4fb78 elementor-widget elementor-widget-html\" data-id=\"8b4fb78\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"v-grain-rain-container\">\r\n    <canvas id=\"v-grain-rain-canvas\"><\/canvas>\r\n<\/div>\r\n\r\n<style>\r\n    \/* 1. Container Setup: Fixed to Cover Everything *\/\r\n    #v-grain-rain-container {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100vw;\r\n        height: 100vh;\r\n        \/* Z-index low: Behind content, but above theme's base body bg *\/\r\n        z-index: 2; \r\n        pointer-events: none; \/* Crucial: Clicks pass through to Elementor elements *\/\r\n        overflow: hidden;\r\n        background: transparent; \/* Let Section\/Column backgrounds show through *\/\r\n    }\r\n\r\n    #v-grain-rain-canvas {\r\n        width: 100%;\r\n        height: 100%;\r\n        display: block;\r\n        opacity: 1; \/* Super subtle grain. Increase for more visibility *\/\r\n        filter: contrast(150%) brightness(120%); \/* Sharpen the lines *\/\r\n    }\r\n\r\n    \/* 2. Global Section Fix (Important!)\r\n       For the particles to be visible, your Elementor Sections\r\n       background must be set to 'Transparent' or semi-transparent.\r\n       If a section has a solid color bg, it will hide the particles.\r\n    *\/\r\n    .elementor-section {\r\n        position: relative;\r\n        z-index: 1; \/* Pure Elementor content above canvas *\/\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n    'use strict';\r\n\r\n    const canvas = document.getElementById('v-grain-rain-canvas');\r\n    const ctx = canvas.getContext('2d');\r\n\r\n    let width, height;\r\n    let particles = [];\r\n\r\n    \/\/ --- CONFIGURATION (Adjust these for 'Super Bagus' flavor) ---\r\n    const config = {\r\n        particleCount: 150,     \/\/ Total active lines. More = denser rain.\r\n        minSpeed: 15,          \/\/ Slower fast line\r\n        maxSpeed: 35,          \/\/ Faster fast line\r\n        minLength: 5,          \/\/ Minimal line length (pixels)\r\n        maxLength: 80,         \/\/ Maximal line length (pixels)\r\n        minOpacity: 0.1,       \/\/ Faintest line\r\n        maxOpacity: 0.8,       \/\/ Brightest line\r\n        minThickness: 0.5,     \/\/ Thinest line\r\n        maxThickness: 1.5,     \/\/ Thickest line\r\n        color: '252, 184, 8'  \/\/ #fcb808 in RGB. Use '255, 255, 255' for white.\r\n    };\r\n    \/\/ ------------------------------------------------------------\r\n\r\n    function initCanvas() {\r\n        \/\/ Handle High DPI screens for sharp lines\r\n        const dpr = window.devicePixelRatio || 1;\r\n        width = window.innerWidth;\r\n        height = window.innerHeight;\r\n        \r\n        canvas.width = width * dpr;\r\n        canvas.height = height * dpr;\r\n        ctx.scale(dpr, dpr);\r\n        \r\n        canvas.style.width = width + 'px';\r\n        canvas.style.height = height + 'px';\r\n        \r\n        createParticles();\r\n    }\r\n\r\n    class Particle {\r\n        constructor() {\r\n            this.reset(true); \/\/ Initial spawn spread vertically\r\n        }\r\n\r\n        reset(initialSpawn = false) {\r\n            this.x = Math.random() * width;\r\n            \/\/ Spawn just above screen, or spread across height on init\r\n            this.y = initialSpawn ? Math.random() * height : -config.maxLength - 10;\r\n            this.speed = config.minSpeed + Math.random() * (config.maxSpeed - config.minSpeed);\r\n            this.length = config.minLength + Math.random() * (config.maxLength - config.minLength);\r\n            this.opacity = config.minOpacity + Math.random() * (config.maxOpacity - config.minOpacity);\r\n            this.thickness = config.minThickness + Math.random() * (config.maxThickness - config.minThickness);\r\n        }\r\n\r\n        update() {\r\n            this.y += this.speed;\r\n\r\n            \/\/ If line goes off bottom, reset to top\r\n            if (this.y > height + this.length) {\r\n                this.reset();\r\n            }\r\n        }\r\n\r\n        draw() {\r\n            ctx.beginPath();\r\n            ctx.moveTo(this.x, this.y);\r\n            ctx.lineTo(this.x, this.y + this.length);\r\n            ctx.lineWidth = this.thickness;\r\n            ctx.strokeStyle = `rgba(${config.color}, ${this.opacity})`;\r\n            ctx.lineCap = 'round'; \/\/ Softer grain feel\r\n            ctx.stroke();\r\n        }\r\n    }\r\n\r\n    function createParticles() {\r\n        particles = [];\r\n        for (let i = 0; i < config.particleCount; i++) {\r\n            particles.push(new Particle());\r\n        }\r\n    }\r\n\r\n    function animate() {\r\n        ctx.clearRect(0, 0, width, height); \/\/ Clear previous frame\r\n\r\n        particles.forEach(p => {\r\n            p.update();\r\n            p.draw();\r\n        });\r\n\r\n        requestAnimationFrame(animate);\r\n    }\r\n\r\n    \/\/ Handle Window Resize\r\n    let resizeTimer;\r\n    window.addEventListener('resize', () => {\r\n        clearTimeout(resizeTimer);\r\n        resizeTimer = setTimeout(initCanvas, 200); \/\/ Debounce resize\r\n    });\r\n\r\n    \/\/ Start\r\n    initCanvas();\r\n    animate();\r\n\r\n})();\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-87dcdb4 e-con-full e-flex e-con e-parent\" data-id=\"87dcdb4\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74502b6 elementor-widget elementor-widget-html\" data-id=\"74502b6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"ho-gallery-organic\" class=\"gy-root\">\r\n    <div class=\"gy-container\">\r\n        <header class=\"gy-header\" data-aos=\"zoom-in-up\">\r\n            <h2 class=\"gy-title\">FIELD REPORTS<\/h2>\r\n            <div class=\"gy-subtitle\">ORIGINAL RATIO NEURAL CAPTURES<\/div>\r\n        <\/header>\r\n\r\n        <div class=\"gy-marquee-wrapper gy-row-top\">\r\n            <div class=\"gy-marquee-content\" id=\"marquee-top\">\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-9.png\" alt=\"G1\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-10.png\" alt=\"G2\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-11.png\" alt=\"G3\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-12.png\" alt=\"G4\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-13.png\" alt=\"G5\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-14.png\" alt=\"G6\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-15.png\" alt=\"G7\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-9.png\" alt=\"G1\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-10.png\" alt=\"G2\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-11.png\" alt=\"G3\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gy-marquee-wrapper gy-row-bottom\">\r\n            <div class=\"gy-marquee-content\" id=\"marquee-bottom\">\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-15.png\" alt=\"G7\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-14.png\" alt=\"G6\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-13.png\" alt=\"G5\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-12.png\" alt=\"G4\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-11.png\" alt=\"G3\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-10.png\" alt=\"G2\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-9.png\" alt=\"G1\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-15.png\" alt=\"G7\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-14.png\" alt=\"G6\"><\/div>\r\n                <div class=\"gy-card\"><img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-13.png\" alt=\"G5\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Handjet:wght@100..900&display=swap');\r\n\r\n        .gy-root {\r\n            width: 100%;\r\n            padding: 100px 0;\r\n            background: transparent;\r\n            font-family: 'Handjet', cursive;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .gy-header {\r\n            text-align: center;\r\n            margin-bottom: 50px;\r\n        }\r\n\r\n        .gy-title {\r\n            font-size: clamp(3rem, 7vw, 5rem);\r\n            font-weight: 900;\r\n            color: #000;\r\n            margin: 0;\r\n            letter-spacing: -2px;\r\n        }\r\n\r\n        .gy-subtitle {\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            opacity: 0.7;\r\n            letter-spacing: 2px;\r\n        }\r\n\r\n        \/* Marquee Setup *\/\r\n        .gy-marquee-wrapper {\r\n            display: flex;\r\n            overflow: hidden;\r\n            padding: 15px 0;\r\n            \/* Efek fade di pinggir *\/\r\n            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\r\n            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\r\n        }\r\n\r\n        .gy-marquee-content {\r\n            display: flex;\r\n            gap: 25px;\r\n            animation: none; \/* Animasi akan berjalan via CSS class di bawah *\/\r\n        }\r\n\r\n        \/* Card: Mengikuti Rasio Asli *\/\r\n        .gy-card {\r\n            flex: 0 0 auto;\r\n            width: clamp(200px, 25vw, 320px); \/* Lebar fleksibel *\/\r\n            border-radius: 30px; \/* Tetap rounded sesuai permintaan sebelumnya *\/\r\n            overflow: hidden;\r\n            border: 1px solid rgba(0,0,0,0.1);\r\n            transition: transform 0.4s ease, filter 0.3s ease;\r\n            background: rgba(255,255,255,0.05);\r\n        }\r\n\r\n        .gy-card img {\r\n            width: 100%;\r\n            height: auto; \/* KUNCI: Mengikuti rasio original *\/\r\n            display: block;\r\n            object-fit: contain;\r\n        }\r\n\r\n        \/* Animasi Infinite *\/\r\n        @keyframes scrollLeft {\r\n            0% { transform: translateX(0); }\r\n            100% { transform: translateX(-50%); }\r\n        }\r\n\r\n        @keyframes scrollRight {\r\n            0% { transform: translateX(-50%); }\r\n            100% { transform: translateX(0); }\r\n        }\r\n\r\n        .gy-row-top .gy-marquee-content {\r\n            animation: scrollLeft 40s linear infinite;\r\n        }\r\n\r\n        .gy-row-bottom .gy-marquee-content {\r\n            animation: scrollRight 40s linear infinite;\r\n        }\r\n\r\n        \/* Hover Interaction *\/\r\n        .gy-marquee-wrapper:hover .gy-marquee-content {\r\n            animation-play-state: paused;\r\n        }\r\n\r\n        .gy-card:hover {\r\n            transform: scale(1.08) !important;\r\n            border-color: #000;\r\n            z-index: 5;\r\n        }\r\n\r\n        \/* Mobile *\/\r\n        @media (max-width: 768px) {\r\n            .gy-card { width: 180px; border-radius: 20px; }\r\n            .gy-root { padding: 50px 0; }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const rows = document.querySelectorAll('.gy-marquee-content');\r\n            let lastScroll = 0;\r\n\r\n            window.addEventListener('scroll', () => {\r\n                const currentScroll = window.pageYOffset;\r\n                const diff = currentScroll - lastScroll;\r\n                const skew = diff * 0.1; \/\/ Efek miring saat scroll\r\n                const velocity = Math.min(Math.abs(diff * 0.5), 50); \/\/ Kecepatan extra\r\n\r\n                rows.forEach((row, index) => {\r\n                    \/\/ Berikan efek miring (skew) dinamis\r\n                    row.style.transform = `skewX(${skew}deg)`;\r\n                    \/\/ Row atas & bawah bereaksi sedikit berbeda terhadap kecepatan\r\n                    const direction = index === 0 ? -velocity : velocity;\r\n                    row.style.marginLeft = `${direction}px`;\r\n                });\r\n\r\n                \/\/ Reset smooth kembali ke normal\r\n                clearTimeout(window.scrollTimer);\r\n                window.scrollTimer = setTimeout(() => {\r\n                    rows.forEach(row => {\r\n                        row.style.transform = `skewX(0deg)`;\r\n                        row.style.marginLeft = `0px`;\r\n                        row.style.transition = `all 0.6s cubic-bezier(0.23, 1, 0.32, 1)`;\r\n                    });\r\n                }, 100);\r\n\r\n                lastScroll = currentScroll;\r\n            });\r\n        });\r\n    <\/script>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-79e021a e-con-full e-flex e-con e-parent\" data-id=\"79e021a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7773f0f elementor-widget elementor-widget-html\" data-id=\"7773f0f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"hoppers-token-v3\" class=\"ht-root\">\r\n    <div class=\"ht-bg-container\"><\/div>\r\n    <div class=\"ht-top-overlay\"><\/div>\r\n    \r\n    <div class=\"ht-wrapper\">\r\n        <header class=\"ht-header\" data-aos=\"fade-down\">\r\n            <h2 class=\"ht-title\">$HOPPERS TOKENOMICS<\/h2>\r\n            <div class=\"ht-title-line\"><\/div>\r\n        <\/header>\r\n        \r\n        <div class=\"ht-grid\">\r\n            <div class=\"ht-item\">\r\n                <div class=\"ht-card\" data-tilt>\r\n                    <div class=\"ht-card-glass\"><\/div>\r\n                    <div class=\"ht-glow\"><\/div>\r\n                    <div class=\"ht-card-body\">\r\n                        <div class=\"ht-num\">01<\/div>\r\n                        <div class=\"ht-main-val\">1B<\/div>\r\n                        <h3 class=\"ht-label\">1 Billion Supply<\/h3>\r\n                        <p class=\"ht-info\">A fixed total supply to keep things clear and predictable.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ht-item\">\r\n                <div class=\"ht-card\" data-tilt>\r\n                    <div class=\"ht-card-glass\"><\/div>\r\n                    <div class=\"ht-glow\"><\/div>\r\n                    <div class=\"ht-card-body\">\r\n                        <div class=\"ht-num\">02<\/div>\r\n                        <div class=\"ht-main-val\">0%<\/div>\r\n                        <h3 class=\"ht-label\">Zero Tax<\/h3>\r\n                        <p class=\"ht-info\">No additional fees for buying or selling.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ht-item\">\r\n                <div class=\"ht-card\" data-tilt>\r\n                    <div class=\"ht-card-glass\"><\/div>\r\n                    <div class=\"ht-glow\"><\/div>\r\n                    <div class=\"ht-card-body\">\r\n                        <div class=\"ht-num\">03<\/div>\r\n                        <div class=\"ht-main-val\">\ud83d\udd25<\/div>\r\n                        <h3 class=\"ht-label\">100% LP Burn<\/h3>\r\n                        <p class=\"ht-info\">Liquidity permanently burned for long-term stability.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ht-item\">\r\n                <div class=\"ht-card\" data-tilt>\r\n                    <div class=\"ht-card-glass\"><\/div>\r\n                    <div class=\"ht-glow\"><\/div>\r\n                    <div class=\"ht-card-body\">\r\n                        <div class=\"ht-num\">04<\/div>\r\n                        <div class=\"ht-main-val\">SOL<\/div>\r\n                        <h3 class=\"ht-label\">Solana Chain<\/h3>\r\n                        <p class=\"ht-info\">Fast, efficient, and built for scale.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Handjet:wght@100..900&display=swap');\r\n\r\n        .ht-root {\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            padding: 120px 0;\r\n            font-family: 'Handjet', cursive;\r\n            background: #fcb808;\r\n            overflow: hidden;\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        .ht-bg-container {\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: url('http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-7.png') no-repeat center center;\r\n            background-size: cover;\r\n            z-index: 1;\r\n            filter: brightness(0.9);\r\n        }\r\n\r\n        .ht-top-overlay {\r\n            position: absolute;\r\n            inset: 0;\r\n            background: linear-gradient(to bottom, #fcb808 0%, rgba(252, 184, 8, 0.2) 50%, #fcb808 100%);\r\n            z-index: 2;\r\n        }\r\n\r\n        .ht-wrapper {\r\n            position: relative;\r\n            z-index: 5;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            width: 100%;\r\n            padding: 0 40px;\r\n        }\r\n\r\n        .ht-header { text-align: center; margin-bottom: 80px; }\r\n        .ht-title { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 900; color: #000; letter-spacing: -2px; }\r\n        .ht-title-line { width: 100px; height: 6px; background: #000; margin: 15px auto 0; }\r\n\r\n        .ht-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 30px;\r\n            perspective: 2000px; \/* Penting untuk efek 3D *\/\r\n        }\r\n\r\n        .ht-item {\r\n            display: flex;\r\n        }\r\n\r\n        .ht-card {\r\n            position: relative;\r\n            width: 100%;\r\n            padding: 50px 30px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            border-radius: 0px; \/* Tetap industrial boxy *\/\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            transform-style: preserve-3d;\r\n            transition: transform 0.1s ease-out, box-shadow 0.3s ease;\r\n            cursor: pointer;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .ht-card-glass {\r\n            position: absolute;\r\n            inset: 0;\r\n            backdrop-filter: blur(20px) saturate(180%);\r\n            -webkit-backdrop-filter: blur(20px) saturate(180%);\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* Efek Cahaya Mengikuti Mouse *\/\r\n        .ht-glow {\r\n            position: absolute;\r\n            inset: 0;\r\n            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.4) 0%, transparent 60%);\r\n            z-index: 2;\r\n            opacity: 0;\r\n            transition: opacity 0.3s;\r\n        }\r\n\r\n        .ht-card:hover .ht-glow { opacity: 1; }\r\n\r\n        .ht-card-body {\r\n            position: relative;\r\n            z-index: 3;\r\n            transform: translateZ(50px); \/* Membuat teks terlihat mengambang di atas kaca *\/\r\n        }\r\n\r\n        .ht-num {\r\n            font-size: 1.5rem;\r\n            font-weight: 900;\r\n            color: rgba(0,0,0,0.3);\r\n            margin-bottom: 40px;\r\n            display: block;\r\n            border-bottom: 2px solid #000;\r\n        }\r\n\r\n        .ht-main-val {\r\n            font-size: 5rem;\r\n            font-weight: 900;\r\n            line-height: 0.8;\r\n            margin-bottom: 25px;\r\n            color: #000;\r\n            text-shadow: 2px 2px 0px rgba(255,255,255,0.3);\r\n        }\r\n\r\n        .ht-label {\r\n            font-size: 1.8rem;\r\n            font-weight: 800;\r\n            color: #000;\r\n            text-transform: uppercase;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .ht-info {\r\n            font-size: 1.2rem;\r\n            font-weight: 500;\r\n            line-height: 1.1;\r\n            color: #000;\r\n            opacity: 0.9;\r\n        }\r\n\r\n        .ht-card:hover {\r\n            border-color: #000;\r\n            box-shadow: 0 40px 80px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        @media (max-width: 1100px) { .ht-grid { grid-template-columns: repeat(2, 1fr); } }\r\n        @media (max-width: 600px) { .ht-grid { grid-template-columns: 1fr; } }\r\n    <\/style>\r\n\r\n    <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            AOS.init();\r\n\r\n            const cards = document.querySelectorAll('.ht-card');\r\n\r\n            cards.forEach(card => {\r\n                card.addEventListener('mousemove', e => {\r\n                    \/\/ 1. Update Posisi Cahaya (Glow)\r\n                    const rect = card.getBoundingClientRect();\r\n                    const x = e.clientX - rect.left;\r\n                    const y = e.clientY - rect.top;\r\n                    card.style.setProperty('--mouse-x', `${x}px`);\r\n                    card.style.setProperty('--mouse-y', `${y}px`);\r\n\r\n                    \/\/ 2. Efek Tilt 3D\r\n                    const centerX = rect.width \/ 2;\r\n                    const centerY = rect.height \/ 2;\r\n                    const rotateX = (y - centerY) \/ 10; \r\n                    const rotateY = (centerX - x) \/ 10;\r\n\r\n                    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n                });\r\n\r\n                card.addEventListener('mouseleave', () => {\r\n                    card.style.transform = `rotateX(0deg) rotateY(0deg)`;\r\n                });\r\n            });\r\n        });\r\n    <\/script>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e3de30 e-con-full e-flex e-con e-parent\" data-id=\"3e3de30\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99fc17f elementor-widget elementor-widget-html\" data-id=\"99fc17f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"ho-community-transparent\" class=\"jc-root\">\r\n    <div class=\"jc-container\">\r\n        <div class=\"jc-visual-side\" data-aos=\"fade-right\">\r\n            <div class=\"jc-img-wrapper\">\r\n                <img decoding=\"async\" src=\"http:\/\/thehoppers.fun\/wp-content\/uploads\/2026\/03\/Asset-8.png\" alt=\"Hoppers Community\" class=\"jc-main-img\">\r\n                <div class=\"jc-glitch-overlay jc-g-red\"><\/div>\r\n                <div class=\"jc-glitch-overlay jc-g-blue\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"jc-content-side\">\r\n            <header class=\"jc-header\" data-aos=\"fade-down\">\r\n                <h2 class=\"jc-title\">JOIN THE<br>HOPPERS<\/h2>\r\n                <div class=\"jc-line\"><\/div>\r\n                <p class=\"jc-desc\">\r\n                    The breakthrough is here. Don't just watch nature\u2014become a part of it. Join our community of \"Hoppers\" and be the first to know about new robotic animal drops and updates.\r\n                <\/p>\r\n            <\/header>\r\n\r\n            <div class=\"jc-btn-group\">\r\n                <a href=\"https:\/\/t.me\/theh0ppers\" target=\"_blank\" class=\"jc-card\" data-aos=\"fade-left\" data-aos-delay=\"100\">\r\n                    <div class=\"jc-glass\"><\/div>\r\n                    <div class=\"jc-inner\">\r\n                        <span class=\"jc-icon\">TG<\/span>\r\n                        <div class=\"jc-txt\">\r\n                            <span class=\"jc-label\">TELEGRAM<\/span>\r\n                            <span class=\"jc-sub\">Join neural link<\/span>\r\n                        <\/div>\r\n                        <span class=\"jc-arrow\">\u2192<\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <a href=\"https:\/\/x.com\/the_h0ppers\" target=\"_blank\" class=\"jc-card\" data-aos=\"fade-left\" data-aos-delay=\"200\">\r\n                    <div class=\"jc-glass\"><\/div>\r\n                    <div class=\"jc-inner\">\r\n                        <span class=\"jc-icon\">X<\/span>\r\n                        <div class=\"jc-txt\">\r\n                            <span class=\"jc-label\">TWITTER \/ X<\/span>\r\n                            <span class=\"jc-sub\">Field reports<\/span>\r\n                        <\/div>\r\n                        <span class=\"jc-arrow\">\u2192<\/span>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Handjet:wght@100..900&display=swap');\r\n\r\n        .jc-root {\r\n            position: relative;\r\n            width: 100%;\r\n            padding: 100px 0;\r\n            background: transparent; \/* Background Transparan *\/\r\n            font-family: 'Handjet', cursive;\r\n            overflow: hidden;\r\n            color: #000;\r\n        }\r\n\r\n        .jc-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 80px;\r\n            padding: 0 40px;\r\n        }\r\n\r\n        \/* Visual Side (Kiri) *\/\r\n        .jc-visual-side {\r\n            flex: 1;\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        .jc-img-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 450px;\r\n            \/* Floating Animation *\/\r\n            animation: jc-float 6s ease-in-out infinite;\r\n        }\r\n\r\n        .jc-main-img {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        @keyframes jc-float {\r\n            0%, 100% { transform: translateY(0); }\r\n            50% { transform: translateY(-20px); }\r\n        }\r\n\r\n        \/* Content Side (Kanan) *\/\r\n        .jc-content-side {\r\n            flex: 1;\r\n        }\r\n\r\n        .jc-title {\r\n            font-size: clamp(3rem, 6vw, 5rem);\r\n            font-weight: 900;\r\n            line-height: 0.85;\r\n            margin: 0;\r\n            letter-spacing: -2px;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        .jc-line {\r\n            width: 60px;\r\n            height: 6px;\r\n            background: #000;\r\n            margin: 20px 0;\r\n        }\r\n\r\n        .jc-desc {\r\n            font-size: 1.3rem;\r\n            line-height: 1.2;\r\n            margin-bottom: 40px;\r\n            max-width: 480px;\r\n            font-weight: 500;\r\n        }\r\n\r\n        \/* Cards \/ Buttons *\/\r\n        .jc-btn-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 15px;\r\n        }\r\n\r\n        .jc-card {\r\n            position: relative;\r\n            text-decoration: none;\r\n            color: #000;\r\n            padding: 25px;\r\n            display: block;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .jc-glass {\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(15px);\r\n            -webkit-backdrop-filter: blur(15px);\r\n            border: 1px solid rgba(0, 0, 0, 0.1);\r\n            z-index: 1;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .jc-inner {\r\n            position: relative;\r\n            z-index: 2;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 20px;\r\n        }\r\n\r\n        .jc-icon {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            width: 60px;\r\n            height: 60px;\r\n            background: #000;\r\n            color: #fff;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .jc-label {\r\n            display: block;\r\n            font-size: 1.6rem;\r\n            font-weight: 800;\r\n            line-height: 1;\r\n        }\r\n\r\n        .jc-sub {\r\n            font-size: 1rem;\r\n            opacity: 0.6;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .jc-arrow {\r\n            margin-left: auto;\r\n            font-size: 1.8rem;\r\n            font-weight: 900;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        \/* Hover *\/\r\n        .jc-card:hover {\r\n            transform: translateX(10px);\r\n        }\r\n        .jc-card:hover .jc-glass {\r\n            background: rgba(0, 0, 0, 0.05);\r\n            border-color: #000;\r\n        }\r\n        .jc-card:hover .jc-arrow {\r\n            transform: translateX(5px);\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        @media (max-width: 991px) {\r\n            .jc-container { flex-direction: column; text-align: center; gap: 50px; }\r\n            .jc-line { margin: 20px auto; }\r\n            .jc-desc { margin: 0 auto 40px auto; }\r\n            .jc-visual-side { order: 2; }\r\n            .jc-content-side { order: 1; }\r\n        }\r\n    <\/style>\r\n\r\n    <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            AOS.init({ duration: 1000, once: false });\r\n            \r\n            \/\/ Subtle Parallax on Scroll\r\n            window.addEventListener('scroll', function() {\r\n                const scrolled = window.pageYOffset;\r\n                const visual = document.querySelector('.jc-main-img');\r\n                if(visual) {\r\n                    visual.style.transform = `translateY(${scrolled * 0.03}px)`;\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-90c244d e-con-full e-flex e-con e-parent\" data-id=\"90c244d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c4421b elementor-widget elementor-widget-html\" data-id=\"9c4421b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<footer id=\"ho-footer-supreme\" class=\"ft-root\">\r\n    <div class=\"ft-container\">\r\n        <div class=\"ft-top\">\r\n            <div class=\"ft-brand\" data-aos=\"fade-right\">\r\n                <h2 class=\"ft-logo\">$HOPPERS<\/h2>\r\n                <p class=\"ft-tagline\">THE NEURAL LINK TO NATURE<\/p>\r\n            <\/div>\r\n            \r\n            <nav class=\"ft-nav\" data-aos=\"fade-left\">\r\n                <a href=\"https:\/\/x.com\/the_h0ppers\" class=\"ft-link\">X<\/a>\r\n                <a href=\"https:\/\/t.me\/theh0ppers\" class=\"ft-link\">TELEGRAM<\/a>\r\n                <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=GH3U67tZoMJTMT1tYaUv7gmByNP3edG9qbr5PHvBpump\" class=\"ft-link\">SWAP<\/a>\r\n                <a href=\"https:\/\/dexscreener.com\/solana\/GH3U67tZoMJTMT1tYaUv7gmByNP3edG9qbr5PHvBpump\" target=\"_blank\" class=\"ft-link highlight\">CHART<\/a>\r\n            <\/nav>\r\n        <\/div>\r\n\r\n        <div class=\"ft-divider\"><\/div>\r\n\r\n        <div class=\"ft-bottom\">\r\n            <div class=\"ft-copy\">\r\n                &copy; 2026 HOPPERS. \r\n            <\/div>\r\n            <div class=\"ft-status\">\r\n                <span class=\"ft-pulse\"><\/span> ALL RIGHTS RESERVED.<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Handjet:wght@100..900&display=swap');\r\n\r\n        .ft-root {\r\n            width: 100%;\r\n            padding: 80px 0 40px 0;\r\n            background: transparent;\r\n            font-family: 'Handjet', cursive;\r\n            color: #000;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .ft-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 40px;\r\n        }\r\n\r\n        \/* Top Section *\/\r\n        .ft-top {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: flex-end;\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        .ft-logo {\r\n            font-size: 4rem;\r\n            font-weight: 900;\r\n            line-height: 0.8;\r\n            margin: 0;\r\n            letter-spacing: -2px;\r\n        }\r\n\r\n        .ft-tagline {\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            margin: 10px 0 0 0;\r\n            opacity: 0.7;\r\n            letter-spacing: 2px;\r\n        }\r\n\r\n        \/* Navigation Links *\/\r\n        .ft-nav {\r\n            display: flex;\r\n            gap: 30px;\r\n        }\r\n\r\n        .ft-link {\r\n            text-decoration: none;\r\n            color: #000;\r\n            font-size: 1.3rem;\r\n            font-weight: 700;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n        }\r\n\r\n        .ft-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -5px; left: 0;\r\n            width: 0; height: 3px;\r\n            background: #000;\r\n            transition: width 0.3s ease;\r\n        }\r\n\r\n        .ft-link:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        .ft-link.highlight {\r\n            color: #fff;\r\n            background: #000;\r\n            padding: 5px 15px;\r\n        }\r\n\r\n        \/* Divider *\/\r\n        .ft-divider {\r\n            width: 100%;\r\n            height: 1px;\r\n            background: rgba(0, 0, 0, 0.1);\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        \/* Bottom Section *\/\r\n        .ft-bottom {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            font-size: 1rem;\r\n            font-weight: 500;\r\n            opacity: 0.6;\r\n        }\r\n\r\n        \/* Status Pulse *\/\r\n        .ft-status {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .ft-pulse {\r\n            width: 8px;\r\n            height: 8px;\r\n            background: #00ff00; \/* Green Status *\/\r\n            border-radius: 50%;\r\n            display: inline-block;\r\n            box-shadow: 0 0 10px #00ff00;\r\n            animation: ft-blink 1.5s infinite;\r\n        }\r\n\r\n        @keyframes ft-blink {\r\n            0% { opacity: 1; }\r\n            50% { opacity: 0.3; }\r\n            100% { opacity: 1; }\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        @media (max-width: 768px) {\r\n            .ft-top { flex-direction: column; align-items: center; text-align: center; gap: 40px; }\r\n            .ft-nav { flex-direction: column; gap: 15px; align-items: center; }\r\n            .ft-bottom { flex-direction: column; gap: 20px; text-align: center; }\r\n        }\r\n    <\/style>\r\n\r\n    <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            AOS.init({ duration: 1000, once: false });\r\n        });\r\n    <\/script>\r\n<\/footer>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HOPPERS TWITER TELEGRAM BUY NOW Life Is Wilderon the Other Side OFFICIAL_CONTRACT GH3U67tZoMJTMT1tYaUv7gmByNP3edG9qbr5PHvBpump COPY SCROLL DOWN A Different Way to See Nature In Hoppers, scientists create a breakthrough that allows human consciousness to \u201chop\u201d into lifelike robotic animals. Through this technology, people can finally experience the animal world from the inside. When Mabel, a passionate [&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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":76,"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":107,"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/107"}],"wp:attachment":[{"href":"https:\/\/thehoppers.fun\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}