{"id":8,"date":"2026-04-17T19:20:32","date_gmt":"2026-04-17T19:20:32","guid":{"rendered":"https:\/\/cosmoorbit.xyz\/?page_id=8"},"modified":"2026-04-17T21:20:29","modified_gmt":"2026-04-17T21:20:29","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/cosmoorbit.xyz\/","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-5c37577 e-flex e-con-boxed e-con e-parent\" data-id=\"5c37577\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/cosmoorbit.xyz\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/COSMO-V1.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-8aa6990 e-con-full e-flex e-con e-child\" data-id=\"8aa6990\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e24e93 elementor-widget elementor-widget-html\" data-id=\"4e24e93\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<canvas id=\"cosmicCanvas\"><\/canvas>\r\n\r\n<style>\r\n    #cosmicCanvas {\r\n        position: fixed !important;\r\n        top: 0 !important;\r\n        left: 0 !important;\r\n        width: 100vw !important;\r\n        height: 100vh !important;\r\n        \/* Kita naikkan z-index ke depan agar pasti kelihatan, \r\n           pointer-events tetap none supaya klik tembus ke tombol *\/\r\n        z-index: 999999 !important; \r\n        pointer-events: none !important;\r\n        background: transparent !important;\r\n        mix-blend-mode: screen; \/* Membuat partikel menyatu cantik dengan BG *\/\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    (function() {\r\n        const initCosmic = () => {\r\n            const canvas = document.getElementById('cosmicCanvas');\r\n            if (!canvas) return;\r\n            \r\n            const ctx = canvas.getContext('2d');\r\n            let particles = [];\r\n            \r\n            function resize() {\r\n                canvas.width = window.innerWidth;\r\n                canvas.height = window.innerHeight;\r\n            }\r\n\r\n            class Particle {\r\n                constructor() {\r\n                    this.init();\r\n                }\r\n                init() {\r\n                    this.x = Math.random() * canvas.width;\r\n                    this.y = Math.random() * canvas.height;\r\n                    this.size = Math.random() * 2.5 + 0.5;\r\n                    this.speed = Math.random() * 1.5 + 0.5; \r\n                    this.opacity = Math.random() * 0.8 + 0.2;\r\n                    \/\/ Warna khas COSMO\r\n                    const colors = ['#00e5ff', '#ff00ff', '#ffffff', '#ffec00'];\r\n                    this.color = colors[Math.floor(Math.random() * colors.length)];\r\n                }\r\n                update() {\r\n                    this.y += this.speed;\r\n                    if (this.y > canvas.height) {\r\n                        this.y = -20;\r\n                        this.x = Math.random() * canvas.width;\r\n                    }\r\n                }\r\n                draw() {\r\n                    ctx.globalAlpha = this.opacity;\r\n                    ctx.fillStyle = this.color;\r\n                    \r\n                    \/\/ Tambahkan efek Glow\/Neon\r\n                    ctx.shadowBlur = 8;\r\n                    ctx.shadowColor = this.color;\r\n                    \r\n                    ctx.beginPath();\r\n                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n                    ctx.fill();\r\n                    \r\n                    \/\/ Reset shadow agar tidak berat\r\n                    ctx.shadowBlur = 0;\r\n                }\r\n            }\r\n\r\n            function setup() {\r\n                resize();\r\n                particles = [];\r\n                \/\/ Jumlah partikel ditambah agar lebih ramai\r\n                for (let i = 0; i < 120; i++) {\r\n                    particles.push(new Particle());\r\n                }\r\n            }\r\n\r\n            function animate() {\r\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n                particles.forEach(p => {\r\n                    p.update();\r\n                    p.draw();\r\n                });\r\n                requestAnimationFrame(animate);\r\n            }\r\n\r\n            window.addEventListener('resize', resize);\r\n            setup();\r\n            animate();\r\n        };\r\n\r\n        \/\/ Pemuatan lebih agresif\r\n        if (document.readyState === 'complete') {\r\n            initCosmic();\r\n        } else {\r\n            window.addEventListener('load', initCosmic);\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-a21241d e-con-full e-flex e-con e-child\" data-id=\"a21241d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-afe6271 elementor-widget elementor-widget-html\" data-id=\"afe6271\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gasoek+One&family=Mansalva&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    .cosmo-header-wrapper {\r\n        --primary-cosmo: #00e5ff; \r\n        --secondary-cosmo: #ff00ff;\r\n        --stroke-black: #000000;\r\n        --hard-shadow: 6px 6px 0px rgba(0, 0, 0, 1);\r\n        width: 100%;\r\n        padding: 10px 0;\r\n        font-family: 'Mansalva', cursive;\r\n    }\r\n\r\n    .cosmo-nav-container {\r\n        max-width: 1100px; \r\n        margin: 0 auto;\r\n        z-index: 9999;\r\n    }\r\n\r\n    .cosmo-nav-main {\r\n        background: linear-gradient(-45deg, #1a0033, #000000, #2a004f, #000000);\r\n        background-size: 400% 400%;\r\n        animation: flowGradientCosmo 10s ease infinite;\r\n        border: 4px solid var(--stroke-black);\r\n        border-radius: 50px; \r\n        padding: 8px 25px; \r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        box-shadow: var(--hard-shadow), inset 0 0 15px rgba(255, 255, 255, 0.1);\r\n        position: relative;\r\n    }\r\n\r\n    @keyframes flowGradientCosmo {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n\r\n    .cosmo-logo {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 1.8rem;\r\n        text-transform: uppercase;\r\n        text-decoration: none !important;\r\n        background: linear-gradient(90deg, var(--primary-cosmo), var(--secondary-cosmo), #fff, var(--primary-cosmo));\r\n        background-size: 300% 100%;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: moveGradientCosmo 3s linear infinite;\r\n        filter: drop-shadow(3px 3px 0px #000);\r\n        display: inline-block;\r\n    }\r\n\r\n    @keyframes moveGradientCosmo {\r\n        0% { background-position: 0% 50%; }\r\n        100% { background-position: 100% 50%; }\r\n    }\r\n\r\n    .cosmo-links {\r\n        display: flex;\r\n        list-style: none !important;\r\n        gap: 10px;\r\n        align-items: center;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    .cosmo-links li {\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    .cosmo-links a {\r\n        text-decoration: none !important;\r\n        font-size: 1rem;\r\n        font-weight: bold;\r\n        padding: 6px 14px;\r\n        border: 3px solid #000;\r\n        background: #fff;\r\n        color: #000 !important;\r\n        border-radius: 30px; \r\n        box-shadow: 3px 3px 0px #000;\r\n        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: inline-block;\r\n    }\r\n\r\n    .cosmo-links a:hover {\r\n        transform: translateY(-3px) scale(1.05);\r\n        background: var(--primary-cosmo) !important;\r\n        box-shadow: 5px 5px 0px #000;\r\n    }\r\n\r\n    .cosmo-links a.buy-btn {\r\n        background: var(--secondary-cosmo) !important;\r\n        color: #fff !important;\r\n    }\r\n    \r\n    .cosmo-links a.buy-btn:hover {\r\n        background: #fffb00 !important;\r\n        color: #000 !important;\r\n        transform: translateY(-3px) rotate(3deg);\r\n    }\r\n\r\n    .cosmo-menu-toggle {\r\n        display: none;\r\n        flex-direction: column;\r\n        gap: 4px;\r\n        cursor: pointer;\r\n        border: 3px solid #000;\r\n        padding: 6px;\r\n        background: #fff;\r\n        border-radius: 8px;\r\n        box-shadow: 3px 3px 0px #000;\r\n    }\r\n\r\n    .cosmo-menu-toggle span {\r\n        width: 22px;\r\n        height: 4px;\r\n        background: #000;\r\n        border-radius: 2px;\r\n    }\r\n\r\n    @media screen and (max-width: 990px) {\r\n        .cosmo-links {\r\n            position: absolute;\r\n            top: 120%;\r\n            left: 50%;\r\n            transform: translateX(-50%) scale(0.9);\r\n            width: 90%;\r\n            flex-direction: column;\r\n            background: #2a004f; \r\n            border: 4px solid #000;\r\n            border-radius: 25px;\r\n            padding: 20px;\r\n            gap: 15px;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n            transition: 0.3s ease;\r\n            box-shadow: var(--hard-shadow);\r\n        }\r\n\r\n        .cosmo-links.active {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n            transform: translateX(-50%) scale(1);\r\n        }\r\n\r\n        .cosmo-menu-toggle { display: flex; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"cosmo-header-wrapper\">\r\n    <div class=\"cosmo-nav-container\">\r\n        <nav class=\"cosmo-nav-main\">\r\n            <a href=\"#\" class=\"cosmo-logo\">COSMO<\/a>\r\n            \r\n            <ul class=\"cosmo-links\" id=\"cosmoNavLinks\">\r\n                <li><a href=\"#home\">HOME<\/a><\/li>\r\n                <li><a href=\"#about\">ABOUT<\/a><\/li>\r\n                <li><a href=\"#tokenomics\">TOKENOMICS<\/a><\/li>\r\n                <li><a href=\"#roadmap\">ROADMAP<\/a><\/li>\r\n                <li><a href=\"#buy\" class=\"buy-btn\">BUY $COSMO<\/a><\/li>\r\n            <\/ul>\r\n\r\n            <div class=\"cosmo-menu-toggle\" id=\"cosmo-mobile-menu\">\r\n                <span><\/span>\r\n                <span><\/span>\r\n                <span><\/span>\r\n            <\/div>\r\n        <\/nav>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        const menu = document.querySelector('#cosmo-mobile-menu');\r\n        const navLinks = document.querySelector('#cosmoNavLinks');\r\n\r\n        if(menu && navLinks) {\r\n            menu.addEventListener('click', () => {\r\n                navLinks.classList.toggle('active');\r\n            });\r\n\r\n            document.querySelectorAll('.cosmo-links a').forEach(link => {\r\n                link.addEventListener('click', () => {\r\n                    navLinks.classList.remove('active');\r\n                });\r\n            });\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-b88d9d9 e-con-full e-flex e-con e-child\" data-id=\"b88d9d9\" data-element_type=\"container\" id=\"home\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a2f05c0 elementor-widget elementor-widget-html\" data-id=\"a2f05c0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cosmo-hero-section\">\r\n    <div class=\"cosmo-hero-content\">\r\n        <h1 class=\"cosmo-main-title\">COSMO: THE COSMIC KING<\/h1>\r\n        \r\n        <p class=\"cosmo-description\">\r\n            The most legendary Shiba to ever breach the stars. <br>\r\n            No gravity. No limits. Just <strong>COSMO<\/strong>.\r\n        <\/p>\r\n\r\n        <div class=\"cosmo-ca-container\">\r\n            <span class=\"ca-label\">CONTRACT ADDRESS:<\/span>\r\n            <div class=\"ca-box\">\r\n                <input type=\"text\" value=\"CA : NULL\" id=\"cosmoCA\" readonly>\r\n                <button onclick=\"copyCA()\" id=\"copyBtn\">COPY<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"cosmo-hero-btns\">\r\n            <a href=\"#\" class=\"btn-main\">BOARD ROCKET<\/a>\r\n            <a href=\"#\" class=\"btn-sub\">VIEW CHART<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .cosmo-hero-section {\r\n        width: 100%;\r\n        padding: 80px 20px;\r\n        text-align: center;\r\n        background: transparent;\r\n        font-family: 'Mansalva', cursive;\r\n    }\r\n\r\n    .cosmo-hero-content {\r\n        max-width: 900px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    \/* Headline dengan Animasi Gradien yang Lebih Lembut *\/\r\n    .cosmo-main-title {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: clamp(3rem, 8vw, 5.5rem);\r\n        line-height: 1.1;\r\n        margin-bottom: 20px;\r\n        \/* Gradien diperhalus dengan perpaduan warna yang lebih rapat *\/\r\n        background: linear-gradient(120deg, #00e5ff, #ff00ff, #7000ff, #00e5ff);\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        \/* Durasi diperlambat ke 5s agar transisi lebih smooth *\/\r\n        animation: smoothGradientCosmo 5s ease-in-out infinite;\r\n        filter: drop-shadow(6px 6px 0px #000);\r\n    }\r\n\r\n    @keyframes smoothGradientCosmo {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n\r\n    .cosmo-description {\r\n        font-size: 1.6rem;\r\n        color: #fff;\r\n        margin-bottom: 40px;\r\n        text-shadow: 3px 3px 0px #000;\r\n        line-height: 1.4;\r\n    }\r\n\r\n    \/* CA Copy Styling *\/\r\n    .cosmo-ca-container {\r\n        margin-bottom: 40px;\r\n        display: inline-block;\r\n        width: 100%;\r\n        max-width: 650px;\r\n    }\r\n\r\n    .ca-label {\r\n        display: block;\r\n        color: #fff;\r\n        font-weight: bold;\r\n        margin-bottom: 12px;\r\n        letter-spacing: 1px;\r\n        text-shadow: 2px 2px 0px #000;\r\n    }\r\n\r\n    .ca-box {\r\n        display: flex;\r\n        background: #fff;\r\n        border: 4px solid #000;\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        box-shadow: 7px 7px 0px #000;\r\n    }\r\n\r\n    .ca-box input {\r\n        flex: 1;\r\n        padding: 14px 20px;\r\n        border: none;\r\n        outline: none;\r\n        \/* Font CA diganti ke Mansalva agar senada dengan deskripsi *\/\r\n        font-family: 'Mansalva', cursive;\r\n        font-size: 1.2rem;\r\n        font-weight: bold;\r\n        color: #000;\r\n        background: transparent;\r\n    }\r\n\r\n    .ca-box button {\r\n        background: #00e5ff;\r\n        border: none;\r\n        border-left: 4px solid #000;\r\n        padding: 0 30px;\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 1.1rem;\r\n        cursor: pointer;\r\n        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .ca-box button:hover {\r\n        background: #ffec00;\r\n        padding: 0 35px;\r\n    }\r\n\r\n    \/* Hero Buttons *\/\r\n    .cosmo-hero-btns {\r\n        display: flex;\r\n        gap: 20px;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .cosmo-hero-btns a {\r\n        text-decoration: none;\r\n        padding: 16px 45px;\r\n        font-size: 1.4rem;\r\n        font-weight: bold;\r\n        border: 4px solid #000;\r\n        border-radius: 20px;\r\n        box-shadow: 6px 6px 0px #000;\r\n        transition: 0.2s ease;\r\n    }\r\n\r\n    .btn-main { background: #ff00ff; color: #fff; }\r\n    .btn-sub { background: #fff; color: #000; }\r\n\r\n    .btn-main:hover, .btn-sub:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 10px 10px 0px #000;\r\n    }\r\n\r\n    \/* Mobile Adjustment *\/\r\n    @media (max-width: 650px) {\r\n        .cosmo-hero-btns a { width: 100%; }\r\n        .ca-box { flex-direction: column; border-radius: 15px; }\r\n        .ca-box input { text-align: center; font-size: 1rem; }\r\n        .ca-box button { border-left: none; border-top: 4px solid #000; padding: 12px; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    function copyCA() {\r\n        const copyText = document.getElementById(\"cosmoCA\");\r\n        copyText.select();\r\n        copyText.setSelectionRange(0, 99999);\r\n        navigator.clipboard.writeText(copyText.value);\r\n        \r\n        const btn = document.getElementById(\"copyBtn\");\r\n        const originalText = btn.innerHTML;\r\n        \r\n        btn.innerHTML = \"COPIED!\";\r\n        btn.style.background = \"#39ff14\";\r\n        \r\n        setTimeout(function(){\r\n            btn.innerHTML = originalText;\r\n            btn.style.background = \"#00e5ff\";\r\n        }, 2000);\r\n    }\r\n<\/script>\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-493b00c e-flex e-con-boxed e-con e-parent\" data-id=\"493b00c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-afcc64b e-con-full e-flex e-con e-child\" data-id=\"afcc64b\" data-element_type=\"container\" id=\"about\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c22169d elementor-widget elementor-widget-html\" data-id=\"c22169d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cosmo-about-section\" id=\"about\">\r\n    <div class=\"cosmo-about-container\">\r\n        \r\n        <div class=\"cosmo-about-text\">\r\n            <h2 class=\"cosmo-section-title\">THE COSMO LEGEND<\/h2>\r\n            <p class=\"cosmo-about-desc\">\r\n                Born in the stars, raised on the blockchain. <strong>COSMO<\/strong> is the first Shiba to breach the deep galaxy to find the ultimate decentralized treats.\r\n            <\/p>\r\n            <p class=\"cosmo-about-desc\">\r\n                No gravity, no limits, just a 100% community-powered mission to conquer the Solana ecosystem. \r\n            <\/p>\r\n            <div class=\"cosmo-about-badges\">\r\n                <span class=\"badge\">\ud83d\ude80 100% COMMUNITY<\/span>\r\n                <span class=\"badge\">\ud83d\udd25 LP BURNED<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"cosmo-about-image-dynamic reveal-on-scroll\">\r\n            <div class=\"image-solo-wrapper-dynamic\">\r\n                <img decoding=\"async\" src=\"https:\/\/cosmoorbit.xyz\/wp-content\/uploads\/2026\/04\/ASET3-scaled.png\" alt=\"COSMO Rocket\" class=\"cosmo-img-animated\">\r\n                <div class=\"sticker-label-direct\">COMMANDER COSMO<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .cosmo-about-section {\r\n        width: 100%;\r\n        padding: 100px 0;\r\n        background: transparent;\r\n        font-family: 'Mansalva', cursive;\r\n        overflow-x: hidden;\r\n    }\r\n\r\n    .cosmo-about-container {\r\n        \/* Melebar hingga 1400px untuk kesan lega *\/\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 0 5%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 20px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .cosmo-about-text {\r\n        flex: 1;\r\n        min-width: 300px;\r\n        max-width: 550px; \/* Membatasi lebar teks agar tidak terlalu panjang per baris *\/\r\n        order: 1;\r\n    }\r\n\r\n    .cosmo-section-title {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: clamp(2.8rem, 6vw, 4.5rem); \/* Lebih besar & dominan *\/\r\n        line-height: 1;\r\n        margin-bottom: 20px;\r\n        background: linear-gradient(120deg, #ffec00, #ff00ff, #00e5ff, #ffec00);\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: smoothAboutGradient 5s ease-in-out infinite;\r\n        filter: drop-shadow(6px 6px 0px #000);\r\n    }\r\n\r\n    @keyframes smoothAboutGradient {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n\r\n    .cosmo-about-desc {\r\n        font-size: 1.6rem;\r\n        color: #fff;\r\n        line-height: 1.3;\r\n        margin-bottom: 15px;\r\n        text-shadow: 2px 2px 0px #000;\r\n    }\r\n\r\n    .cosmo-about-badges {\r\n        display: flex;\r\n        gap: 15px;\r\n        margin-top: 25px;\r\n    }\r\n\r\n    .badge {\r\n        background: #ff00ff;\r\n        color: #fff;\r\n        padding: 10px 20px;\r\n        border: 3px solid #000;\r\n        border-radius: 50px;\r\n        font-weight: bold;\r\n        font-size: 1.2rem;\r\n        box-shadow: 5px 5px 0px #000;\r\n        transition: 0.2s;\r\n    }\r\n\r\n    \/* --- Dynamic Image Section --- *\/\r\n    .cosmo-about-image-dynamic {\r\n        flex: 1.4;\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        order: 2;\r\n        padding: 30px;\r\n        opacity: 0;\r\n        transform: translateX(180px); \/* Masuk dari lebih jauh *\/\r\n        transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);\r\n    }\r\n\r\n    .cosmo-about-image-dynamic.active {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .image-solo-wrapper-dynamic {\r\n        position: relative;\r\n        display: inline-block;\r\n        transform: scale(1.2) rotate(3deg); \/* Default scale lebih besar *\/\r\n        animation: cosmoFloating 6s ease-in-out infinite;\r\n    }\r\n\r\n    .cosmo-img-animated {\r\n        width: 100%;\r\n        max-width: 750px; \/* Meledak ukurannya *\/\r\n        height: auto;\r\n        display: block;\r\n        filter: drop-shadow(20px 20px 0px rgba(0,0,0,1));\r\n    }\r\n\r\n    .sticker-label-direct {\r\n        position: absolute;\r\n        bottom: -15px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        background: #00e5ff;\r\n        color: #000;\r\n        font-family: 'Gasoek One', sans-serif;\r\n        padding: 15px 30px;\r\n        border: 4px solid #000;\r\n        border-radius: 20px;\r\n        font-size: 1.6rem;\r\n        box-shadow: 10px 10px 0px #000;\r\n        z-index: 10;\r\n    }\r\n\r\n    @keyframes cosmoFloating {\r\n        0%, 100% { transform: translateY(0) scale(1.2) rotate(3deg); }\r\n        50% { transform: translateY(-30px) scale(1.25) rotate(5deg); }\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n        .cosmo-about-container { flex-direction: column; text-align: center; gap: 60px; }\r\n        .cosmo-about-image-dynamic { order: 1; justify-content: center; transform: translateX(0); opacity: 1; }\r\n        .cosmo-about-text { order: 2; max-width: 100%; }\r\n        .cosmo-about-badges { justify-content: center; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('active');\r\n                }\r\n            });\r\n        }, { threshold: 0.1 });\r\n\r\n        const target = document.querySelector('.cosmo-about-image-dynamic');\r\n        if(target) observer.observe(target);\r\n    });\r\n<\/script>\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-86c0c22 e-flex e-con-boxed e-con e-parent\" data-id=\"86c0c22\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-18044a0 e-con-full e-flex e-con e-child\" data-id=\"18044a0\" data-element_type=\"container\" id=\"tokenomics\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80cb47e elementor-widget elementor-widget-html\" data-id=\"80cb47e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cosmo-tokenomics-section\" id=\"tokenomics\">\r\n    <div class=\"cosmo-tokenomics-container\">\r\n        \r\n        <div class=\"cosmo-section-header-token\">\r\n            <h2 class=\"cosmo-token-title\">COSMO-NOMICS PROTOCOL<\/h2>\r\n            <p class=\"cosmo-token-subtitle\">Distributed stardust. Zero friction. Pure community energy.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"cosmo-token-data-flow\">\r\n            \r\n            <div class=\"cosmo-token-center-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cosmoorbit.xyz\/wp-content\/uploads\/2026\/04\/ASET1.png\" alt=\"COSMO Holding Planet\" class=\"cosmo-token-img-animated\">\r\n                <div class=\"orbit-glow-effect\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"token-data-block data-left-1 chaotic-floating\">\r\n                <span class=\"token-label\">TICKER<\/span>\r\n                <span class=\"token-value\">$COSMO<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"token-data-block data-left-2 chaotic-floating-reverse\">\r\n                <span class=\"token-label\">TOTAL SUPPLY<\/span>\r\n                <span class=\"token-value\">1,000,000,000<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"token-data-block data-left-3 chaotic-floating\">\r\n                <span class=\"token-label\">NETWORK<\/span>\r\n                <span class=\"token-value\">SOLANA<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"token-data-block data-right-1 chaotic-floating-reverse\">\r\n                <span class=\"token-label\">TAX PROTOCOL<\/span>\r\n                <span class=\"token-value\">0% TAX<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"token-data-block data-right-2 chaotic-floating\">\r\n                <span class=\"token-label\">LIQUIDITY (LP)<\/span>\r\n                <span class=\"token-value\">BURNED \ud83d\udd25<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"token-data-block data-right-3 chaotic-floating-reverse\">\r\n                <span class=\"token-label\">OWNERSHIP<\/span>\r\n                <span class=\"token-value\">RENOUNCED\ud83d\udee1\ufe0f<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .cosmo-tokenomics-section {\r\n        width: 100%;\r\n        padding: 80px 0;\r\n        background: transparent;\r\n        font-family: 'Mansalva', cursive;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .cosmo-tokenomics-container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .cosmo-section-header-token {\r\n        text-align: center;\r\n        margin-bottom: 60px;\r\n    }\r\n\r\n    .cosmo-token-title {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: clamp(2.5rem, 6vw, 4rem);\r\n        line-height: 1.1;\r\n        margin-bottom: 20px;\r\n        background: linear-gradient(120deg, #00e5ff, #ff00ff, #ffec00, #00e5ff);\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: smoothTokenGradient 5s ease-in-out infinite;\r\n        filter: drop-shadow(5px 5px 0px #000);\r\n    }\r\n\r\n    @keyframes smoothTokenGradient {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n\r\n    .cosmo-token-subtitle {\r\n        font-size: 1.4rem;\r\n        color: #fff;\r\n        text-shadow: 2px 2px 0px #000;\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n        opacity: 0.9;\r\n    }\r\n\r\n    .cosmo-token-data-flow {\r\n        position: relative;\r\n        width: 100%;\r\n        min-height: 550px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n\r\n    \/* Central Visual - Super Slim Size *\/\r\n    .cosmo-token-center-image {\r\n        position: relative;\r\n        z-index: 5;\r\n    }\r\n\r\n    .cosmo-token-img-animated {\r\n        width: 100%;\r\n        max-width: 240px; \/* Diperkecil lagi agar area orbit lebih lega *\/\r\n        height: auto;\r\n        display: block;\r\n        filter: drop-shadow(12px 12px 0px #000);\r\n        animation: cosmoTokenFloat 6s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes cosmoTokenFloat {\r\n        0%, 100% { transform: translateY(0) rotate(0deg); }\r\n        50% { transform: translateY(-15px) rotate(2deg); }\r\n    }\r\n\r\n    .orbit-glow-effect {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 280px;\r\n        height: 280px;\r\n        background: radial-gradient(circle, rgba(0,229,255,0.15) 0%, transparent 70%);\r\n        z-index: -1;\r\n    }\r\n\r\n    .token-data-block {\r\n        position: absolute;\r\n        background: #fff;\r\n        border: 4px solid #000;\r\n        border-radius: 20px;\r\n        padding: 12px 20px;\r\n        box-shadow: 7px 7px 0px #000;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        z-index: 10;\r\n        min-width: 180px;\r\n    }\r\n\r\n    .token-data-block:hover {\r\n        transform: scale(1.08) rotate(0deg) !important;\r\n        background: #ffec00;\r\n        box-shadow: 10px 10px 0px #000;\r\n        z-index: 20;\r\n    }\r\n\r\n    .token-label {\r\n        font-family: 'Mansalva', cursive;\r\n        font-size: 1rem;\r\n        color: #000;\r\n        font-weight: bold;\r\n    }\r\n\r\n    .token-value {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 1.5rem;\r\n        color: #ff00ff;\r\n        text-shadow: 2px 2px 0px #000;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    \/* Positioning - Adjusted for smaller center *\/\r\n    .data-left-1 { top: 10%; left: 10%; transform: rotate(-4deg); }\r\n    .data-left-2 { top: 45%; left: 5%; transform: rotate(2deg); }\r\n    .data-left-3 { bottom: 10%; left: 12%; transform: rotate(-3deg); }\r\n\r\n    .data-right-1 { top: 12%; right: 10%; transform: rotate(3deg); }\r\n    .data-right-2 { top: 48%; right: 5%; transform: rotate(-2deg); }\r\n    .data-right-3 { bottom: 12%; right: 15%; transform: rotate(4deg); }\r\n\r\n    .chaotic-floating { animation: float1 7s ease-in-out infinite; }\r\n    .chaotic-floating-reverse { animation: float2 7s ease-in-out infinite; }\r\n\r\n    @keyframes float1 {\r\n        0%, 100% { transform: translate(0, 0) rotate(-4deg); }\r\n        50% { transform: translate(8px, -12px) rotate(-2deg); }\r\n    }\r\n    @keyframes float2 {\r\n        0%, 100% { transform: translate(0, 0) rotate(3deg); }\r\n        50% { transform: translate(-8px, 12px) rotate(5deg); }\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .cosmo-token-data-flow {\r\n            flex-direction: column;\r\n            min-height: auto;\r\n            gap: 15px;\r\n        }\r\n        .token-data-block {\r\n            position: relative;\r\n            top: auto !important;\r\n            left: auto !important;\r\n            right: auto !important;\r\n            bottom: auto !important;\r\n            transform: none !important;\r\n            width: 100%;\r\n            max-width: 320px;\r\n        }\r\n        .cosmo-token-center-image {\r\n            margin-bottom: 30px;\r\n        }\r\n    }\r\n<\/style>\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-ceff3a5 e-flex e-con-boxed e-con e-parent\" data-id=\"ceff3a5\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a7c6705 e-con-full e-flex e-con e-child\" data-id=\"a7c6705\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3439eb6 elementor-widget elementor-widget-html\" data-id=\"3439eb6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cosmo-quote-section-video\">\r\n    <div class=\"cosmo-quote-container-video\">\r\n        \r\n        <div class=\"quote-card-video\">\r\n            \r\n            <div class=\"video-bg-container\">\r\n                <video autoplay loop muted playsinline class=\"quote-video-element\">\r\n                    <source src=\"https:\/\/cosmoorbit.xyz\/wp-content\/uploads\/2026\/04\/COSMO-V3.mp4\" type=\"video\/mp4\">\r\n                    Your browser does not support the video tag.\r\n                <\/video>\r\n                <div class=\"video-overlay-tint\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"quote-content-on-video\">\r\n                <div class=\"quote-icon-decor\">\u201c<\/div>\r\n                <h2 class=\"quote-text-v\">FORGET THE MOON. WE\u2019RE CHASING COMETS AND CATCHING BAGS.\ud83d\ude80<\/h2>\r\n                <p class=\"quote-subtext-v\">One small bark for dog, one giant leap for your wallet.<\/p>\r\n                <div class=\"quote-icon-decor-right\">\u201d<\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .cosmo-quote-section-video {\r\n        width: 100%;\r\n        padding: 100px 20px;\r\n        background: transparent;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .cosmo-quote-container-video {\r\n        max-width: 1100px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* Sticker Card Styling - Premium with Video *\/\r\n    .quote-card-video {\r\n        position: relative;\r\n        \/* Hapus background putih, ganti dengan transparan *\/\r\n        background: transparent; \r\n        border: 5px solid #000;\r\n        border-radius: 40px; \/* Lebih membulat agar premium *\/\r\n        box-shadow: 15px 15px 0px #ff00ff; \/* Pink Hard Shadow *\/\r\n        overflow: hidden; \/* Penting untuk video di dalam *\/\r\n        transform: rotate(-1.5deg);\r\n        transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .quote-card-video:hover {\r\n        transform: rotate(0deg) scale(1.03);\r\n        box-shadow: 18px 18px 0px #00e5ff; \/* Change to Cyan on hover *\/\r\n        border-color: #ffb100; \/* Sedikit aksen kuning saat hover *\/\r\n    }\r\n\r\n    \/* Video Background Container *\/\r\n    .video-bg-container {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 1;\r\n    }\r\n\r\n    .quote-video-element {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover; \/* Video mengisi penuh bingkai tanpa distorsi *\/\r\n    }\r\n\r\n    \/* Tint Gelap agar Teks Putih Meledak *\/\r\n    .video-overlay-tint {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0, 0, 0, 0.5); \/* Hitam transparan 50% *\/\r\n        z-index: 2;\r\n    }\r\n\r\n    \/* Content Area *\/\r\n    .quote-content-on-video {\r\n        position: relative;\r\n        z-index: 10; \/* Di atas video & tint *\/\r\n        padding: 80px 50px;\r\n        text-align: center;\r\n    }\r\n\r\n    .quote-text-v {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: clamp(2rem, 5vw, 3.5rem);\r\n        color: #fff; \/* Putih agar kontras dengan video gelap *\/\r\n        line-height: 1.1;\r\n        margin-bottom: 25px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        \/* Shadow kaku agar teks meledak *\/\r\n        text-shadow: 5px 5px 0px #000; \r\n        -webkit-text-stroke: 1px #000; \/* Border tipis pada teks *\/\r\n    }\r\n\r\n    .quote-subtext-v {\r\n        font-family: 'Mansalva', cursive;\r\n        font-size: 1.6rem;\r\n        color: #ddd; \/* Abu-abu terang agar halus *\/\r\n        font-weight: bold;\r\n        text-shadow: 3px 3px 0px #000;\r\n    }\r\n\r\n    \/* Decoration Icons *\/\r\n    .quote-icon-decor, .quote-icon-decor-right {\r\n        position: absolute;\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 6rem;\r\n        color: #00e5ff; \/* Cyan agar kontras *\/\r\n        opacity: 0.3;\r\n        line-height: 1;\r\n    }\r\n\r\n    .quote-icon-decor {\r\n        top: 20px;\r\n        left: 30px;\r\n    }\r\n\r\n    .quote-icon-decor-right {\r\n        bottom: 15px;\r\n        right: 30px;\r\n    }\r\n\r\n    \/* Mobile Responsive *\/\r\n    @media (max-width: 768px) {\r\n        .cosmo-quote-section-video {\r\n            padding: 80px 15px;\r\n        }\r\n        .quote-content-on-video {\r\n            padding: 50px 25px;\r\n        }\r\n        .quote-card-video {\r\n            border-radius: 25px;\r\n            transform: rotate(0deg);\r\n        }\r\n        .quote-icon-decor, .quote-icon-decor-right {\r\n            font-size: 3.5rem;\r\n        }\r\n    }\r\n<\/style>\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-97f40c9 e-flex e-con-boxed e-con e-parent\" data-id=\"97f40c9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8d7f673 e-con-full e-flex e-con e-child\" data-id=\"8d7f673\" data-element_type=\"container\" id=\"roadmap\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b89d6a7 elementor-widget elementor-widget-html\" data-id=\"b89d6a7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cosmo-roadmap-extreme\" id=\"roadmap\">\r\n    <div class=\"roadmap-wrapper\">\r\n        \r\n        <div class=\"roadmap-header-alt\">\r\n            <h2 class=\"roadmap-title-alt\">FLIGHT TRAJECTORY<\/h2>\r\n            <p class=\"roadmap-desc-alt\">Unlocking the galaxy, one phase at a time.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"roadmap-chaotic-grid\">\r\n            \r\n            <div class=\"roadmap-node phase-node-1\">\r\n                <div class=\"node-card\">\r\n                    <div class=\"node-tag\">STATION 01<\/div>\r\n                    <h3 class=\"node-title\">IGNITION<\/h3>\r\n                    <ul class=\"node-list\">\r\n                        <li>System Boot & Socials<\/li>\r\n                        <li>1,000+ Pilots Recruitment<\/li>\r\n                        <li>Smart Contract Genesis<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"roadmap-node phase-node-2\">\r\n                <div class=\"node-card\">\r\n                    <div class=\"node-tag\" style=\"background: #00e5ff; color: #000;\">STATION 02<\/div>\r\n                    <h3 class=\"node-title\">ORBITAL<\/h3>\r\n                    <ul class=\"node-list\">\r\n                        <li>CMC & CG Radar Lock<\/li>\r\n                        <li>Hyper-Speed Marketing<\/li>\r\n                        <li>5,000+ Fleet Members<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"roadmap-node phase-node-3\">\r\n                <div class=\"node-card\">\r\n                    <div class=\"node-tag\">STATION 03<\/div>\r\n                    <h3 class=\"node-title\">DEEP SPACE<\/h3>\r\n                    <ul class=\"node-list\">\r\n                        <li>Major CEX Infiltration<\/li>\r\n                        <li>Cosmo-Gear Merch Drop<\/li>\r\n                        <li>Alpha Influencer Fleet<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"roadmap-node phase-node-4\">\r\n                <div class=\"node-card\" style=\"border-color: #ffec00;\">\r\n                    <div class=\"node-tag\" style=\"background: #ffec00; color: #000;\">STATION 04<\/div>\r\n                    <h3 class=\"node-title\">CONQUEST<\/h3>\r\n                    <ul class=\"node-list\">\r\n                        <li>Legendary NFT Assets<\/li>\r\n                        <li>Governance DAO Launch<\/li>\r\n                        <li>Total Galaxy Rule<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <svg class=\"roadmap-svg-path\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n                <path d=\"M100,100 C300,50 600,250 800,150 S1100,400 1200,300\" fill=\"none\" stroke=\"black\" stroke-width=\"3\" stroke-dasharray=\"10,10\" \/>\r\n            <\/svg>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .cosmo-roadmap-extreme {\r\n        width: 100%;\r\n        padding: 120px 0;\r\n        background: transparent;\r\n        font-family: 'Mansalva', cursive;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .roadmap-wrapper {\r\n        max-width: 1300px;\r\n        margin: 0 auto;\r\n        padding: 0 40px;\r\n    }\r\n\r\n    .roadmap-header-alt {\r\n        text-align: center;\r\n        margin-bottom: 100px;\r\n    }\r\n\r\n    .roadmap-title-alt {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: clamp(2.5rem, 7vw, 4.5rem);\r\n        line-height: 1;\r\n        background: linear-gradient(120deg, #ff00ff, #00e5ff, #fff, #ff00ff);\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: smoothTitleGrad 5s ease infinite;\r\n        filter: drop-shadow(6px 6px 0px #000);\r\n    }\r\n\r\n    @keyframes smoothTitleGrad {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n\r\n    .roadmap-desc-alt {\r\n        font-size: 1.6rem;\r\n        color: #fff;\r\n        text-shadow: 2px 2px 0px #000;\r\n        margin-top: 15px;\r\n    }\r\n\r\n    \/* Chaotic Grid System *\/\r\n    .roadmap-chaotic-grid {\r\n        position: relative;\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        grid-template-rows: auto auto;\r\n        gap: 80px 40px;\r\n    }\r\n\r\n    .roadmap-node {\r\n        position: relative;\r\n        z-index: 10;\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* Individual Positioning & Rotation (Asymmetrical) *\/\r\n    .phase-node-1 { transform: rotate(-3deg) translateY(0); justify-content: flex-start; }\r\n    .phase-node-2 { transform: rotate(4deg) translateY(40px); justify-content: flex-end; }\r\n    .phase-node-3 { transform: rotate(-2deg) translateY(-20px); justify-content: flex-start; }\r\n    .phase-node-4 { transform: rotate(5deg) translateY(60px); justify-content: flex-end; }\r\n\r\n    .node-card {\r\n        background: #fff;\r\n        border: 5px solid #000;\r\n        border-radius: 30px;\r\n        padding: 45px 30px 30px;\r\n        width: 100%;\r\n        max-width: 420px;\r\n        box-shadow: 10px 10px 0px #000;\r\n        position: relative;\r\n        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .node-card:hover {\r\n        transform: scale(1.05) rotate(0deg);\r\n        box-shadow: 15px 15px 0px #ff00ff;\r\n        z-index: 20;\r\n    }\r\n\r\n    .node-tag {\r\n        position: absolute;\r\n        top: -25px;\r\n        left: 30px;\r\n        background: #ff00ff;\r\n        color: #fff;\r\n        font-family: 'Gasoek One', sans-serif;\r\n        padding: 8px 20px;\r\n        border: 4px solid #000;\r\n        border-radius: 15px;\r\n        box-shadow: 4px 4px 0px #000;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .node-title {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 2rem;\r\n        color: #000;\r\n        margin-bottom: 20px;\r\n        border-bottom: 4px solid #000;\r\n        display: inline-block;\r\n        padding-bottom: 5px;\r\n    }\r\n\r\n    .node-list {\r\n        list-style: none;\r\n        padding: 0;\r\n    }\r\n\r\n    .node-list li {\r\n        font-size: 1.3rem;\r\n        color: #000;\r\n        margin-bottom: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        font-weight: bold;\r\n    }\r\n\r\n    .node-list li::before {\r\n        content: '\ud83d\udef0\ufe0f';\r\n        font-size: 1rem;\r\n    }\r\n\r\n    \/* Background Path SVG *\/\r\n    .roadmap-svg-path {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        z-index: 1;\r\n        opacity: 0.2;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* Mobile Logic *\/\r\n    @media (max-width: 900px) {\r\n        .roadmap-chaotic-grid {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 60px;\r\n        }\r\n        .roadmap-node {\r\n            transform: none !important;\r\n            justify-content: center;\r\n        }\r\n        .roadmap-svg-path { display: none; }\r\n        .node-card { max-width: 100%; }\r\n    }\r\n<\/style>\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-ad639a2 e-flex e-con-boxed e-con e-parent\" data-id=\"ad639a2\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d3f857b e-con-full e-flex e-con e-child\" data-id=\"d3f857b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e8443b elementor-widget elementor-widget-html\" data-id=\"6e8443b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cosmo-buy-section\" id=\"how-to-buy\">\r\n    <div class=\"cosmo-buy-container\">\r\n        \r\n        <div class=\"cosmo-buy-visual\">\r\n            <div class=\"image-solo-wrapper-buy\">\r\n                <img decoding=\"async\" src=\"https:\/\/cosmoorbit.xyz\/wp-content\/uploads\/2026\/04\/ASET2.png\" alt=\"COSMO Space Pilot\" class=\"cosmo-img-buy\">\r\n                <div class=\"buy-glow-backdrop\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"cosmo-buy-content\">\r\n            <div class=\"buy-header\">\r\n                <h2 class=\"buy-title-gradient\">FUEL THE ROCKET<\/h2>\r\n                <p class=\"buy-subtitle\">Follow these 4 coordinates to join the $COSMO mission.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"buy-steps-list\">\r\n                \r\n                <div class=\"buy-step-card step-tilt-left\">\r\n                    <div class=\"step-number\">01<\/div>\r\n                    <div class=\"step-info\">\r\n                        <h3>CREATE A WALLET<\/h3>\r\n                        <p>Download <span class=\"highlight-cyan\">Phantom<\/span> or <span class=\"highlight-pink\">Solflare<\/span> from the app store. Setup your wallet and keep your recovery phrase safe!<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"buy-step-card step-tilt-right\">\r\n                    <div class=\"step-number\" style=\"background: #ffec00; color: #000;\">02<\/div>\r\n                    <div class=\"step-info\">\r\n                        <h3>GET SOME SOLANA<\/h3>\r\n                        <p>Buy <span class=\"highlight-yellow\">SOL<\/span> from an exchange and send it to your wallet address. This is your rocket fuel for the journey.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"buy-step-card step-tilt-left\">\r\n                    <div class=\"step-number\" style=\"background: #00e5ff; color: #000;\">03<\/div>\r\n                    <div class=\"step-info\">\r\n                        <h3>GO TO PUMP.FUN<\/h3>\r\n                        <p>Connect your wallet to <span class=\"highlight-pink\">Pump.fun<\/span> and paste the <span class=\"highlight-cyan\">$COSMO<\/span> contract address to find our mission page.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"buy-step-card step-tilt-right\">\r\n                    <div class=\"step-number\" style=\"background: #fff; color: #ff00ff;\">04<\/div>\r\n                    <div class=\"step-info\">\r\n                        <h3>SWAP & MOON<\/h3>\r\n                        <p>Swap your SOL for <span class=\"highlight-yellow\">$COSMO<\/span>. Track the trajectory on <span class=\"highlight-cyan\">Dexscreener<\/span> and hold on tight for lift-off! \ud83d\ude80<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .cosmo-buy-section {\r\n        width: 100%;\r\n        padding: 100px 0;\r\n        background: transparent;\r\n        font-family: 'Mansalva', cursive;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .cosmo-buy-container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 5%;\r\n        display: grid;\r\n        grid-template-columns: 1fr 1.2fr;\r\n        gap: 60px;\r\n        align-items: center;\r\n    }\r\n\r\n    \/* Precision Alignment for Image *\/\r\n    .cosmo-buy-visual {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        position: relative;\r\n    }\r\n\r\n    .image-solo-wrapper-buy {\r\n        position: relative;\r\n        transform: scale(1);\r\n        animation: buyImgFloat 6s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes buyImgFloat {\r\n        0%, 100% { transform: translateY(0) rotate(-2deg); }\r\n        50% { transform: translateY(-25px) rotate(2deg); }\r\n    }\r\n\r\n    .cosmo-img-buy {\r\n        width: 100%;\r\n        max-width: 420px;\r\n        height: auto;\r\n        display: block;\r\n        filter: drop-shadow(15px 15px 0px #000);\r\n    }\r\n\r\n    .buy-glow-backdrop {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 100%;\r\n        height: 100%;\r\n        background: radial-gradient(circle, rgba(255, 0, 255, 0.15) 0%, transparent 70%);\r\n        z-index: -1;\r\n    }\r\n\r\n    \/* Content Area *\/\r\n    .buy-header {\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .buy-title-gradient {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n        line-height: 1.1;\r\n        margin-bottom: 15px;\r\n        background: linear-gradient(120deg, #ff00ff, #00e5ff, #ffec00, #ff00ff);\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: smoothBuyGrad 5s ease-in-out infinite;\r\n        filter: drop-shadow(5px 5px 0px #000);\r\n    }\r\n\r\n    @keyframes smoothBuyGrad {\r\n        0% { background-position: 0% 50%; }\r\n        100% { background-position: 100% 50%; }\r\n    }\r\n\r\n    .buy-subtitle {\r\n        color: #fff;\r\n        font-size: 1.4rem;\r\n        text-shadow: 2px 2px 0px #000;\r\n    }\r\n\r\n    \/* Step Cards Styling *\/\r\n    .buy-steps-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 20px;\r\n    }\r\n\r\n    .buy-step-card {\r\n        background: #fff;\r\n        border: 4px solid #000;\r\n        border-radius: 20px;\r\n        padding: 18px 25px;\r\n        display: flex;\r\n        gap: 20px;\r\n        align-items: center;\r\n        box-shadow: 7px 7px 0px #000;\r\n        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .buy-step-card:hover {\r\n        transform: scale(1.03) rotate(0deg) !important;\r\n        box-shadow: 10px 10px 0px #ff00ff;\r\n    }\r\n\r\n    .step-tilt-left { transform: rotate(-1.2deg); }\r\n    .step-tilt-right { transform: rotate(1.2deg); }\r\n\r\n    .step-number {\r\n        background: #ff00ff;\r\n        color: #fff;\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 1.8rem;\r\n        min-width: 65px;\r\n        height: 65px;\r\n        border: 4px solid #000;\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 4px 4px 0px #000;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .step-info h3 {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 1.4rem;\r\n        color: #000;\r\n        margin-bottom: 4px;\r\n        border-bottom: 3px solid #000;\r\n        display: inline-block;\r\n    }\r\n\r\n    .step-info p {\r\n        font-size: 1.15rem;\r\n        color: #333;\r\n        font-weight: bold;\r\n        line-height: 1.3;\r\n    }\r\n\r\n    \/* Highlight Colors for Precision Content *\/\r\n    .highlight-cyan { color: #00b8d4; } \/* Deep Cyan *\/\r\n    .highlight-pink { color: #d500f9; } \/* Deep Pink *\/\r\n    .highlight-yellow { color: #f57f17; } \/* Deep Amber\/Yellow *\/\r\n\r\n    \/* Mobile Responsive *\/\r\n    @media (max-width: 900px) {\r\n        .cosmo-buy-container {\r\n            grid-template-columns: 1fr;\r\n            text-align: center;\r\n        }\r\n        .buy-step-card {\r\n            flex-direction: column;\r\n            transform: none !important;\r\n        }\r\n        .step-info h3 {\r\n            display: block;\r\n            margin: 10px 0;\r\n        }\r\n    }\r\n<\/style>\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-8dcfc13 e-flex e-con-boxed e-con e-parent\" data-id=\"8dcfc13\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/cosmoorbit.xyz\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/COSMO-V2.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-bc1d69d e-con-full e-flex e-con e-child\" data-id=\"bc1d69d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb497ef elementor-widget elementor-widget-html\" data-id=\"cb497ef\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cosmo-join-section\" id=\"community\">\r\n    <div class=\"cosmo-join-container\">\r\n        \r\n        <div class=\"join-header\">\r\n            <h2 class=\"join-title-grad\">JOIN THE COSMONAUTS<\/h2>\r\n            <p class=\"join-subtitle\">Enter the frequency. No bark, just pure orbital energy for the community.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"join-grid\">\r\n            \r\n            <a href=\"#\" class=\"join-card tg-card\">\r\n                <div class=\"join-icon-svg\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line><polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon><\/svg>\r\n                <\/div>\r\n                <div class=\"join-info\">\r\n                    <h3>TELEGRAM HUB<\/h3>\r\n                    <p>Connect with thousands of explorers in real-time. Join our daily transmissions, community raids, and 24\/7 orbital support.<\/p>\r\n                <\/div>\r\n                <div class=\"join-btn-arrow\">\u279c<\/div>\r\n            <\/a>\r\n\r\n            <a href=\"#\" class=\"join-card x-card\">\r\n                <div class=\"join-icon-svg\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4l11.733 16h4.267l-11.733 -16z\"><\/path><path d=\"M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772\"><\/path><\/svg>\r\n                <\/div>\r\n                <div class=\"join-info\">\r\n                    <h3>X \/ TWITTER<\/h3>\r\n                    <p>Follow our flight logs for instant updates. Get the latest news, partnership announcements, and viral meme transmissions.<\/p>\r\n                <\/div>\r\n                <div class=\"join-btn-arrow\">\u279c<\/div>\r\n            <\/a>\r\n\r\n            <a href=\"#\" class=\"join-card dex-card\">\r\n                <div class=\"join-icon-svg\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"><\/line><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"><\/line><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"><\/line><\/svg>\r\n                <\/div>\r\n                <div class=\"join-info\">\r\n                    <h3>LIVE CHART<\/h3>\r\n                    <p>Monitor our trajectory to the stars. View real-time market data, liquidity status, and our climb across the Solana ecosystem.<\/p>\r\n                <\/div>\r\n                <div class=\"join-btn-arrow\">\u279c<\/div>\r\n            <\/a>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .cosmo-join-section {\r\n        width: 100%;\r\n        padding: 100px 0;\r\n        background: transparent;\r\n        font-family: 'Mansalva', cursive;\r\n        position: relative;\r\n    }\r\n\r\n    .cosmo-join-container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n        text-align: center;\r\n    }\r\n\r\n    .join-header {\r\n        margin-bottom: 70px;\r\n    }\r\n\r\n    .join-title-grad {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: clamp(2.5rem, 6vw, 4.2rem);\r\n        line-height: 1.1;\r\n        background: linear-gradient(120deg, #00e5ff, #ffec00, #ff00ff, #00e5ff);\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: smoothJoinGrad 5s ease-in-out infinite;\r\n        filter: drop-shadow(6px 6px 0px #000);\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    @keyframes smoothJoinGrad {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n\r\n    .join-subtitle {\r\n        color: #fff;\r\n        font-size: 1.5rem;\r\n        text-shadow: 2px 2px 0px #000;\r\n        max-width: 700px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    \/* Community Cards Grid *\/\r\n    .join-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr; \/* Stack vertically for longer descriptions *\/\r\n        gap: 25px;\r\n        max-width: 900px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .join-card {\r\n        text-decoration: none;\r\n        background: #fff;\r\n        border: 5px solid #000;\r\n        border-radius: 25px;\r\n        padding: 35px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 25px;\r\n        box-shadow: 10px 10px 0px #000;\r\n        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    \/* Platform Hover Colors *\/\r\n    .tg-card:hover { transform: translateX(10px); box-shadow: 15px 15px 0px #00e5ff; }\r\n    .x-card:hover { transform: translateX(10px); box-shadow: 15px 15px 0px #ff00ff; }\r\n    .dex-card:hover { transform: translateX(10px); box-shadow: 15px 15px 0px #ffec00; }\r\n\r\n    .join-icon-svg {\r\n        background: #f0f0f0;\r\n        width: 80px;\r\n        height: 80px;\r\n        min-width: 80px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border: 4px solid #000;\r\n        border-radius: 18px;\r\n        box-shadow: 4px 4px 0px #000;\r\n        color: #000;\r\n    }\r\n\r\n    .join-icon-svg svg {\r\n        width: 40px;\r\n        height: 40px;\r\n    }\r\n\r\n    .join-info {\r\n        text-align: left;\r\n        flex-grow: 1;\r\n    }\r\n\r\n    .join-info h3 {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 1.6rem;\r\n        color: #000;\r\n        margin: 0 0 10px 0;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    .join-info p {\r\n        font-size: 1.2rem;\r\n        color: #333;\r\n        margin: 0;\r\n        font-weight: bold;\r\n        line-height: 1.4;\r\n    }\r\n\r\n    .join-btn-arrow {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 2rem;\r\n        color: #000;\r\n        transition: 0.3s;\r\n        padding-left: 10px;\r\n    }\r\n\r\n    .join-card:hover .join-btn-arrow {\r\n        transform: scale(1.2);\r\n        color: #ff00ff;\r\n    }\r\n\r\n    \/* Mobile Responsive *\/\r\n    @media (max-width: 768px) {\r\n        .join-card {\r\n            flex-direction: column;\r\n            text-align: center;\r\n            padding: 30px 20px;\r\n        }\r\n        .join-info {\r\n            text-align: center;\r\n        }\r\n        .join-btn-arrow {\r\n            transform: rotate(90deg);\r\n        }\r\n        .join-card:hover .join-btn-arrow {\r\n            transform: rotate(90deg) scale(1.2);\r\n        }\r\n    }\r\n<\/style>\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-9ee4267 e-flex e-con-boxed e-con e-parent\" data-id=\"9ee4267\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5fc45ef e-con-full e-flex e-con e-child\" data-id=\"5fc45ef\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b852f99 elementor-widget elementor-widget-html\" data-id=\"b852f99\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<footer class=\"cosmo-footer\">\r\n    <div class=\"footer-container\">\r\n        <p class=\"cosmo-copyright\">\r\n            \u00a9 2026 <span class=\"footer-brand\">COSMO<\/span>. ALL RIGHTS RESERVED. \r\n            <br>\r\n            <small>ESTABLISHED IN THE DEEP GALAXY.<\/small>\r\n        <\/p>\r\n\r\n        <button onclick=\"scrollToTop()\" class=\"scroll-up-btn\" id=\"upBtn\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"><\/line>\r\n                <polyline points=\"5 12 12 5 19 12\"><\/polyline>\r\n            <\/svg>\r\n            <span class=\"up-text\">LIFT OFF<\/span>\r\n        <\/button>\r\n    <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n    .cosmo-footer {\r\n        width: 100%;\r\n        padding: 50px 20px;\r\n        background: transparent;\r\n        font-family: 'Mansalva', cursive;\r\n        border-top: 4px dashed rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .footer-container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 30px;\r\n    }\r\n\r\n    .cosmo-copyright {\r\n        color: #fff;\r\n        text-align: center;\r\n        font-size: 1.2rem;\r\n        letter-spacing: 1px;\r\n        text-shadow: 2px 2px 0px #000;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .footer-brand {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        color: #00e5ff;\r\n    }\r\n\r\n    .cosmo-copyright small {\r\n        opacity: 0.6;\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    \/* Scroll Up Button Styling *\/\r\n    .scroll-up-btn {\r\n        background: #ffec00; \/* Warna kuning agar stand out *\/\r\n        border: 4px solid #000;\r\n        border-radius: 15px;\r\n        padding: 12px 25px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        cursor: pointer;\r\n        box-shadow: 6px 6px 0px #000;\r\n        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    .scroll-up-btn svg {\r\n        width: 24px;\r\n        height: 24px;\r\n        color: #000;\r\n    }\r\n\r\n    .up-text {\r\n        font-family: 'Gasoek One', sans-serif;\r\n        font-size: 1.1rem;\r\n        color: #000;\r\n    }\r\n\r\n    .scroll-up-btn:hover {\r\n        transform: translateY(-10px);\r\n        background: #ff00ff; \/* Berubah pink saat hover *\/\r\n        box-shadow: 10px 10px 0px #000;\r\n    }\r\n\r\n    .scroll-up-btn:hover svg, \r\n    .scroll-up-btn:hover .up-text {\r\n        color: #fff;\r\n    }\r\n\r\n    \/* Mobile Adjustment *\/\r\n    @media (max-width: 600px) {\r\n        .cosmo-footer {\r\n            padding: 40px 10px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    \/\/ Fungsi untuk kembali ke atas dengan smooth scroll\r\n    function scrollToTop() {\r\n        window.scrollTo({\r\n            top: 0,\r\n            behavior: 'smooth'\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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>COSMO HOME ABOUT TOKENOMICS ROADMAP BUY $COSMO COSMO: THE COSMIC KING The most legendary Shiba to ever breach the stars. No gravity. No limits. Just COSMO. CONTRACT ADDRESS: COPY BOARD ROCKET VIEW CHART THE COSMO LEGEND Born in the stars, raised on the blockchain. COSMO is the first Shiba to breach the deep galaxy to [&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:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":40,"href":"https:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/cosmoorbit.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}