{"id":8,"date":"2026-06-07T00:08:32","date_gmt":"2026-06-07T00:08:32","guid":{"rendered":"https:\/\/cerby.lol\/?page_id=8"},"modified":"2026-06-07T01:32:45","modified_gmt":"2026-06-07T01:32:45","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/cerby.lol\/","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-4041871 e-flex e-con-boxed e-con e-parent\" data-id=\"4041871\" 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\t\t<div class=\"elementor-element elementor-element-9b03e73 elementor-widget elementor-widget-html\" data-id=\"9b03e73\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n    <title>CERBY - The Three-Headed Guardian<\/title>\r\n    \r\n    <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=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,700&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <style>\r\n        :root {\r\n            --accent-gold: #d4af37;\r\n            --accent-gold-glow: rgba(212, 175, 55, 0.4);\r\n            --text-light: #f5f5f7;\r\n            --text-muted: #e1e1e6;\r\n            --glass-bg: rgba(0, 0, 0, 0.4);\r\n            --glass-border: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        * {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        body, html {\r\n            width: 100%;\r\n            height: 100%;\r\n            font-family: 'Inter', sans-serif;\r\n            background: transparent; \/* Menghilangkan base hitam agar video tidak terhalang *\/\r\n            color: var(--text-light);\r\n            scroll-behavior: smooth;\r\n        }\r\n\r\n        \/* PERBAIKAN TOTAL: Memaksa Container Video Selalu Berada di Belakang & Transparan *\/\r\n        .video-bg-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: -2; \r\n            overflow: hidden;\r\n            background: transparent;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .video-bg-container video {\r\n            display: block;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 100%;\r\n            height: 100%;\r\n            min-width: 100%;\r\n            min-height: 100%;\r\n            object-fit: cover;\r\n            transform: translate(-50%, -50%);\r\n            filter: brightness(1) contrast(1); \/* Kecerahan 100% murni bawaan video asli *\/\r\n        }\r\n\r\n        \/* PERBAIKAN TOTAL: Menghapus gradasi hitam tebal, diganti overlay ultra transparan murni *\/\r\n        .video-overlay {\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            background: rgba(0, 0, 0, 0.15); \/* Sangat tipis hanya agar teks putih tidak menyatu dengan video *\/\r\n        }\r\n\r\n        \/* Layout Container *\/\r\n        .main-wrapper {\r\n            width: 100%;\r\n            min-height: 100vh; \r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 3rem 2rem;\r\n            position: relative;\r\n            z-index: 10;\r\n            background: transparent;\r\n        }\r\n\r\n        \/* Header \/ Navigation *\/\r\n        header {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            animation: fadeInDown 1s ease forwards;\r\n            margin-bottom: 2.5rem;\r\n        }\r\n\r\n        .brand {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 2.2rem;\r\n            font-style: italic;\r\n            font-weight: 700;\r\n            letter-spacing: -0.5px;\r\n            color: var(--text-light);\r\n            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); \/* Shadow diperkuat agar teks terbaca walau video sangat terang *\/\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .brand:hover {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .social-links {\r\n            display: flex;\r\n            gap: 0.8rem;\r\n        }\r\n\r\n        \/* Menarik Hover Efek *\/\r\n        .social-icon {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            background: rgba(0, 0, 0, 0.5); \r\n            border: 1px solid var(--glass-border);\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n            color: var(--text-light);\r\n            cursor: pointer;\r\n            backdrop-filter: blur(10px);\r\n            -webkit-backdrop-filter: blur(10px);\r\n        }\r\n\r\n        .social-icon svg {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: currentColor;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .social-icon:hover {\r\n            background: var(--text-light);\r\n            color: #000;\r\n            border-color: var(--text-light);\r\n            transform: translateY(-4px) scale(1.05);\r\n            box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);\r\n        }\r\n        \r\n        .social-icon:hover svg {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        \/* Hero Main Content *\/\r\n        .hero-center {\r\n            text-align: center;\r\n            max-width: 850px;\r\n            margin: auto;\r\n            padding: 2rem 0; \r\n            animation: fadeInScale 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;\r\n        }\r\n\r\n        .badge {\r\n            background: rgba(0, 0, 0, 0.5);\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n            color: var(--accent-gold);\r\n            padding: 0.4rem 1.2rem;\r\n            border-radius: 20px;\r\n            font-size: 0.75rem;\r\n            font-weight: 600;\r\n            letter-spacing: 1.5px;\r\n            text-transform: uppercase;\r\n            display: inline-block;\r\n            margin-bottom: 2rem;\r\n            backdrop-filter: blur(10px);\r\n            -webkit-backdrop-filter: blur(10px);\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .badge:hover {\r\n            border-color: var(--accent-gold);\r\n            background: rgba(214, 175, 55, 0.2);\r\n            box-shadow: 0 4px 15px var(--accent-gold-glow);\r\n        }\r\n\r\n        \/* PREMIUM GRADASI BERGERAK (Mewah & Kontras Tinggi) *\/\r\n        h1 {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 4.5rem;\r\n            font-style: italic;\r\n            font-weight: 600;\r\n            line-height: 1.15;\r\n            margin-bottom: 2rem;\r\n            letter-spacing: -0.5px;\r\n            background: linear-gradient(\r\n                45deg, \r\n                #ffffff 0%, \r\n                #f3e7c4 25%, \r\n                #d4af37 50%, \r\n                #f3e7c4 75%, \r\n                #ffffff 100%\r\n            );\r\n            background-size: 200% auto;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            animation: shine 4s linear infinite;\r\n            filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.95)); \r\n        }\r\n\r\n        .hero-center p {\r\n            font-size: 1.15rem;\r\n            color: var(--text-light); \r\n            line-height: 1.7;\r\n            margin-bottom: 3rem; \r\n            font-weight: 400;\r\n            max-width: 640px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            text-shadow: 0 3px 15px rgba(0, 0, 0, 1); \r\n        }\r\n\r\n        \/* Interactive Buttons & Hovers *\/\r\n        .cta-group {\r\n            display: flex;\r\n            gap: 1.2rem;\r\n            justify-content: center;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n            margin-bottom: 2.5rem; \r\n        }\r\n\r\n        .btn {\r\n            padding: 0.95rem 2.5rem;\r\n            border-radius: 30px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            text-decoration: none;\r\n            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n            cursor: pointer;\r\n            letter-spacing: 0.8px;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        \/* Hover: Gold Glow *\/\r\n        .btn-primary {\r\n            background: var(--text-light);\r\n            color: #000;\r\n            border: 1px solid var(--text-light);\r\n            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);\r\n        }\r\n\r\n        .btn-primary:hover {\r\n            transform: translateY(-4px) scale(1.02);\r\n            background: var(--accent-gold);\r\n            border-color: var(--accent-gold);\r\n            box-shadow: 0 10px 30px var(--accent-gold-glow);\r\n        }\r\n\r\n        \/* Hover: Glass Lighten up *\/\r\n        .btn-secondary {\r\n            background: rgba(0, 0, 0, 0.5);\r\n            color: var(--text-light);\r\n            border: 1px solid var(--glass-border);\r\n            backdrop-filter: blur(10px);\r\n            -webkit-backdrop-filter: blur(10px);\r\n            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);\r\n        }\r\n\r\n        .btn-secondary:hover {\r\n            border-color: rgba(255, 255, 255, 0.8);\r\n            background: rgba(255, 255, 255, 0.2);\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);\r\n        }\r\n\r\n        \/* Smart Contract Box *\/\r\n        .ca-box {\r\n            background: rgba(0, 0, 0, 0.55);\r\n            border: 1px solid var(--glass-border);\r\n            padding: 0.75rem 1.5rem;\r\n            border-radius: 30px;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.8rem;\r\n            max-width: 100%;\r\n            transition: all 0.4s ease;\r\n            backdrop-filter: blur(15px);\r\n            -webkit-backdrop-filter: blur(15px);\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);\r\n        }\r\n\r\n        .ca-box:hover {\r\n            border-color: var(--accent-gold);\r\n            background: rgba(0, 0, 0, 0.7);\r\n            box-shadow: 0 8px 25px var(--accent-gold-glow);\r\n            transform: scale(1.01);\r\n        }\r\n\r\n        .ca-label {\r\n            font-size: 0.75rem;\r\n            color: var(--accent-gold); \r\n            font-weight: 700;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .ca-string {\r\n            font-family: 'Courier New', Courier, monospace;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            color: var(--text-light);\r\n            letter-spacing: 0.5px;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n            max-width: 280px;\r\n            text-shadow: 0 1px 4px rgba(0,0,0,0.8);\r\n        }\r\n\r\n        .copy-btn {\r\n            background: transparent;\r\n            border: none;\r\n            color: var(--text-light);\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            transition: all 0.2s ease;\r\n            opacity: 0.7;\r\n        }\r\n\r\n        .copy-btn:hover {\r\n            opacity: 1;\r\n            color: var(--accent-gold);\r\n            transform: scale(1.2);\r\n        }\r\n\r\n        \/* Bottom Menu Bar *\/\r\n        .bottom-nav {\r\n            width: 100%;\r\n            max-width: 680px;\r\n            background: rgba(0, 0, 0, 0.6);\r\n            border: 1px solid var(--glass-border);\r\n            padding: 0.5rem;\r\n            border-radius: 30px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            backdrop-filter: blur(25px);\r\n            -webkit-backdrop-filter: blur(25px);\r\n            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);\r\n            animation: fadeInUp 1s ease 0.3s both;\r\n            margin-top: 2.5rem; \r\n        }\r\n\r\n        .nav-trigger {\r\n            background: transparent;\r\n            border: none;\r\n            color: #dbdbdf;\r\n            padding: 0.7rem 1.4rem;\r\n            font-size: 0.85rem;\r\n            font-weight: 500;\r\n            cursor: pointer;\r\n            border-radius: 20px;\r\n            transition: all 0.3s ease;\r\n            font-family: 'Inter', sans-serif;\r\n            text-shadow: 0 1px 3px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        .nav-trigger:hover {\r\n            color: #ffffff;\r\n            background: rgba(255, 255, 255, 0.15);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* POPUP SYSTEM *\/\r\n        .popup-overlay {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0, 0, 0, 0.75); \r\n            backdrop-filter: blur(15px);\r\n            -webkit-backdrop-filter: blur(15px);\r\n            z-index: 100;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .popup-overlay.active {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n\r\n        .popup-content {\r\n            background: rgba(15, 15, 20, 0.9); \r\n            border: 1px solid rgba(255, 255, 255, 0.15);\r\n            width: 100%;\r\n            max-width: 540px;\r\n            max-height: 85vh;\r\n            border-radius: 24px;\r\n            padding: 2.5rem;\r\n            position: relative;\r\n            overflow-y: auto;\r\n            transform: scale(0.95) translateY(15px);\r\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);\r\n        }\r\n\r\n        .popup-overlay.active .popup-content {\r\n            transform: scale(1) translateY(0);\r\n        }\r\n\r\n        .close-popup {\r\n            position: absolute;\r\n            top: 1.5rem;\r\n            right: 1.5rem;\r\n            background: transparent;\r\n            border: none;\r\n            color: var(--text-light);\r\n            font-size: 1.5rem;\r\n            cursor: pointer;\r\n            transition: all 0.2s;\r\n            opacity: 0.6;\r\n        }\r\n\r\n        .close-popup:hover {\r\n            opacity: 1;\r\n            transform: rotate(90deg);\r\n            color: var(--accent-gold);\r\n        }\r\n\r\n        .popup-title {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 1.8rem;\r\n            font-style: italic;\r\n            color: var(--text-light);\r\n            margin-bottom: 1.5rem;\r\n            border-bottom: 1px solid rgba(255,255,255,0.08);\r\n            padding-bottom: 0.5rem;\r\n        }\r\n\r\n        .popup-text {\r\n            color: #dbdbdf;\r\n            font-size: 0.95rem;\r\n            line-height: 1.6;\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* Tokenomics Grid *\/\r\n        .tok-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 1rem;\r\n            margin-top: 0.5rem;\r\n        }\r\n        .tok-card {\r\n            background: rgba(255, 255, 255, 0.03);\r\n            border: 1px solid rgba(255, 255, 255, 0.08);\r\n            padding: 1.2rem;\r\n            border-radius: 14px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        .tok-card:hover {\r\n            background: rgba(255, 255, 255, 0.06);\r\n            border-color: rgba(255, 255, 255, 0.2);\r\n            transform: translateY(-2px);\r\n        }\r\n        .tok-card label {\r\n            display: block;\r\n            font-size: 0.75rem;\r\n            text-transform: uppercase;\r\n            color: rgba(255, 255, 255, 0.5);\r\n            margin-bottom: 0.3rem;\r\n            letter-spacing: 0.5px;\r\n        }\r\n        .tok-card span {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 1.4rem;\r\n            color: var(--text-light);\r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* Roadmap Timeline *\/\r\n        .nodes-container {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1.5rem;\r\n        }\r\n        .node-item {\r\n            padding-left: 1rem;\r\n            border-left: 2px solid var(--glass-border);\r\n            transition: all 0.3s ease;\r\n        }\r\n        .node-item:hover {\r\n            border-left-color: var(--accent-gold);\r\n            padding-left: 1.2rem;\r\n        }\r\n        .node-item h4 {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 1.1rem;\r\n            margin-bottom: 0.3rem;\r\n            color: var(--accent-gold);\r\n        }\r\n        .node-item p {\r\n            font-size: 0.85rem;\r\n            color: #dbdbdf;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        \/* Toast system *\/\r\n        .toast {\r\n            position: fixed;\r\n            bottom: 30px;\r\n            background: var(--text-light);\r\n            color: #000;\r\n            padding: 0.6rem 1.4rem;\r\n            border-radius: 30px;\r\n            font-size: 0.8rem;\r\n            font-weight: 600;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n            opacity: 0;\r\n            transform: translateY(10px);\r\n            transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\r\n            z-index: 200;\r\n        }\r\n        .toast.show {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        \/* KEYFRAMES ANIMASI *\/\r\n        @keyframes fadeInDown {\r\n            from { opacity: 0; transform: translateY(-15px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n        @keyframes fadeInUp {\r\n            from { opacity: 0; transform: translateY(15px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n        @keyframes fadeInScale {\r\n            from { opacity: 0; transform: scale(0.97); }\r\n            to { opacity: 1; transform: scale(1); }\r\n        }\r\n        @keyframes shine {\r\n            to { background-position: 200% center; }\r\n        }\r\n\r\n        \/* MOBILE ADJUSTMENT *\/\r\n        @media (max-width: 768px) {\r\n            .main-wrapper {\r\n                padding: 2rem 1.2rem;\r\n                height: auto;\r\n                min-height: 100vh;\r\n                justify-content: flex-start;\r\n                gap: 2rem;\r\n            }\r\n            .hero-center {\r\n                padding: 1.5rem 0;\r\n                margin: 0;\r\n            }\r\n            h1 {\r\n                font-size: 2.6rem;\r\n                margin-bottom: 1.2rem;\r\n            }\r\n            .hero-center p {\r\n                font-size: 0.95rem;\r\n                margin-bottom: 2rem;\r\n            }\r\n            .btn {\r\n                padding: 0.85rem 1.8rem;\r\n                font-size: 0.8rem;\r\n                width: 100%; \r\n                max-width: 280px;\r\n            }\r\n            .ca-string {\r\n                max-width: 180px;\r\n            }\r\n            .bottom-nav {\r\n                border-radius: 20px;\r\n                overflow-x: auto;\r\n                white-space: nowrap;\r\n                justify-content: flex-start;\r\n                width: 100%;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <!-- CONTAINER BACKGROUND VIDEO -->\r\n    <div class=\"video-bg-container\">\r\n        <!-- Menambahkan atribut penting: autoplay, loop, muted, playsinline, dan data-object-fit -->\r\n        <video autoplay loop muted playsinline preload=\"auto\" id=\"bgVideo\" style=\"width:100%; height:100%;\">\r\n            <source src=\"https:\/\/cerby.lol\/wp-content\/uploads\/2026\/06\/HERO-CERBY.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"video-overlay\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"main-wrapper\">\r\n        <header>\r\n            <div class=\"brand\">CERBY<\/div>\r\n            <div class=\"social-links\">\r\n                <a href=\"https:\/\/x.com\" target=\"_blank\" class=\"social-icon\" aria-label=\"X Twitter\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg>\r\n                <\/a>\r\n                <a href=\"https:\/\/t.me\" target=\"_blank\" class=\"social-icon\" aria-label=\"Telegram\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.11.02-1.93 1.23-5.46 3.62-.51.35-.98.53-1.39.51-.46-.01-1.35-.26-2.01-.48-.81-.27-1.46-.42-1.4-.88.03-.24.37-.49 1.03-.74 4.04-1.76 6.74-2.92 8.09-3.48 3.85-1.6 4.64-1.88 5.17-1.89.11 0 .37.03.54.17.14.12.18.28.2.45-.02.07-.02.13-.03.19z\"\/><\/svg>\r\n                <\/a>\r\n            <\/div>\r\n        <\/header>\r\n\r\n        <main class=\"hero-center\">\r\n            <div class=\"badge\">Ecosystem Secured<\/div>\r\n            <h1>The Three-Headed Guardian<br>of the New Era<\/h1>\r\n            <p>Far more than just a token. $CERBY is the ultimate manifestation of loyalty, security, and community power\u2014guarding the gates of your financial future.<\/p>\r\n            \r\n            <div class=\"cta-group\">\r\n                <a href=\"https:\/\/raydium.io\" target=\"_blank\" class=\"btn btn-primary\">Swap Now<\/a>\r\n                <a href=\"https:\/\/dexscreener.com\" target=\"_blank\" class=\"btn btn-secondary\">Live Chart<\/a>\r\n            <\/div>\r\n\r\n            <div class=\"ca-box\">\r\n                <span class=\"ca-label\">$CERBY:<\/span>\r\n                <span class=\"ca-string\" id=\"caString\">NULL<\/span>\r\n                <button class=\"copy-btn\" onclick=\"copyCA()\" aria-label=\"Copy Contract Address\">\r\n                    <svg width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg>\r\n                <\/button>\r\n            <\/div>\r\n        <\/main>\r\n\r\n        <nav class=\"bottom-nav\">\r\n            <button class=\"nav-trigger\" onclick=\"openPopup('about')\">About<\/button>\r\n            <button class=\"nav-trigger\" onclick=\"openPopup('tokenomics')\">Tokenomics<\/button>\r\n            <button class=\"nav-trigger\" onclick=\"openPopup('roadmap')\">Roadmap<\/button>\r\n            <button class=\"nav-trigger\" onclick=\"openPopup('join')\">Join Us<\/button>\r\n            <button class=\"nav-trigger\" onclick=\"openPopup('copyright')\">&copy; Info<\/button>\r\n        <\/nav>\r\n    <\/div>\r\n\r\n    <!-- POPUPS -->\r\n    <div id=\"popup-about\" class=\"popup-overlay\" onclick=\"closeAllPopups(event)\">\r\n        <div class=\"popup-content\">\r\n            <button class=\"close-popup\" onclick=\"closePopup('about')\">&times;<\/button>\r\n            <h2 class=\"popup-title\">About CERBY<\/h2>\r\n            <p class=\"popup-text\">The crypto landscape is flooded with fleeting trends that vanish overnight. Amidst this chaos, CERBY stands resolute, much like the mythical Cerberus of old\u2014not to threaten, but to protect. We seamlessly blend the viral culture appeal of the Shiba Inu with the rich, timeless lore of ancient Greek mythology.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"popup-tokenomics\" class=\"popup-overlay\" onclick=\"closeAllPopups(event)\">\r\n        <div class=\"popup-content\">\r\n            <button class=\"close-popup\" onclick=\"closePopup('tokenomics')\">&times;<\/button>\r\n            <h2 class=\"popup-title\">Token Distribution<\/h2>\r\n            <div class=\"tok-grid\">\r\n                <div class=\"tok-card\"><label>Total Supply<\/label><span>1,000,000,000<\/span><\/div>\r\n                <div class=\"tok-card\"><label>Tax Mechanism<\/label><span>0% Zero Tax<\/span><\/div>\r\n                <div class=\"tok-card\"><label>Liquidity Pool<\/label><span>100% Burned<\/span><\/div>\r\n                <div class=\"tok-card\"><label>Blockchain Network<\/label><span>Solana<\/span><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"popup-roadmap\" class=\"popup-overlay\" onclick=\"closeAllPopups(event)\">\r\n        <div class=\"popup-content\">\r\n            <button class=\"close-popup\" onclick=\"closePopup('roadmap')\">&times;<\/button>\r\n            <h2 class=\"popup-title\">The Chronicles<\/h2>\r\n            <div class=\"nodes-container\">\r\n                <div class=\"node-item\">\r\n                    <h4>Phase 1: Emergence<\/h4>\r\n                    <p>Fair launch of $CERBY to the public. 100% permanent locking and burning of the liquidity pool to establish trust.<\/p>\r\n                <\/div>\r\n                <div class=\"node-item\">\r\n                    <h4>Phase 2: Conquering<\/h4>\r\n                    <p>Securing official listings on CoinMarketCap & CoinGecko. Accelerating growth via the elite Cerby Army network.<\/p>\r\n                <\/div>\r\n                <div class=\"node-item\">\r\n                    <h4>Phase 3: Dominance<\/h4>\r\n                    <p>Securing initial Tier-1 Centralized Exchange (CEX) listings and launching global ambient guerrilla marketing campaigns.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"popup-join\" class=\"popup-overlay\" onclick=\"closeAllPopups(event)\">\r\n        <div class=\"popup-content\">\r\n            <button class=\"close-popup\" onclick=\"closePopup('join')\">&times;<\/button>\r\n            <h2 class=\"popup-title\">Enter the Underworld<\/h2>\r\n            <p class=\"popup-text\" style=\"margin-bottom: 1.5rem;\">Do not remain a bystander outside the gates. Step through, follow our channels, and claim your absolute place in history.<\/p>\r\n            <div class=\"cta-group\" style=\"justify-content: flex-start;\">\r\n                <a href=\"https:\/\/x.com\" target=\"_blank\" class=\"btn btn-secondary\">Follow on X<\/a>\r\n                <a href=\"https:\/\/t.me\" target=\"_blank\" class=\"btn btn-secondary\">Telegram Chat<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"popup-copyright\" class=\"popup-overlay\" onclick=\"closeAllPopups(event)\">\r\n        <div class=\"popup-content\">\r\n            <button class=\"close-popup\" onclick=\"closePopup('copyright')\">&times;<\/button>\r\n            <h2 class=\"popup-title\">Legal Terms<\/h2>\r\n            <p class=\"popup-text\">&copy; 2026 CERBY. All Rights Reserved.<br><br>$CERBY is a community-driven token created strictly for cultural, historical appreciation, and digital entertainment purposes. The cryptocurrency market involves high risk; please ensure you conduct your own thorough research before making any financial decisions.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"toast\" class=\"toast\">Address Copied!<\/div>\r\n\r\n    <!-- SCRIPT PERBAIKAN: Force Play Anti-Block Browser -->\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const video = document.getElementById('bgVideo');\r\n            \r\n            if (video) {\r\n                \/\/ Konfigurasi wajib play\r\n                video.muted = true;\r\n                video.setAttribute('muted', '');\r\n                video.setAttribute('playsinline', '');\r\n                \r\n                \/\/ Eksekusi fungsi play dengan penanganan error interaksi pengguna\r\n                function forcePlayVideo() {\r\n                    video.play().then(() => {\r\n                        console.log(\"Video berhasil diputar otomatis.\");\r\n                    }).catch(error => {\r\n                        console.log(\"Autoplay ditahan browser. Menunggu interaksi pengguna untuk memicu video...\");\r\n                        \r\n                        \/\/ Jalankan paksa saat ada aktivitas klik\/sentuh layar pertama kali dari user\r\n                        const runOnInteraction = () => {\r\n                            video.play();\r\n                            document.removeEventListener('click', runOnInteraction);\r\n                            document.removeEventListener('touchstart', runOnInteraction);\r\n                        };\r\n                        document.addEventListener('click', runOnInteraction);\r\n                        document.addEventListener('touchstart', runOnInteraction);\r\n                    });\r\n                }\r\n\r\n                forcePlayVideo();\r\n                \r\n                \/\/ Tambahan backup pemicu saat window di-load sepenuhnya\r\n                window.addEventListener('load', forcePlayVideo);\r\n            }\r\n        });\r\n\r\n        function copyCA() {\r\n            const caText = document.getElementById('caString').innerText;\r\n            navigator.clipboard.writeText(caText).then(() => {\r\n                const toast = document.getElementById('toast');\r\n                toast.classList.add('show');\r\n                setTimeout(() => { toast.classList.remove('show'); }, 2000);\r\n            });\r\n        }\r\n\r\n        function openPopup(id) {\r\n            document.getElementById(`popup-${id}`).classList.add('active');\r\n        }\r\n\r\n        function closePopup(id) {\r\n            document.getElementById(`popup-${id}`).classList.remove('active');\r\n        }\r\n\r\n        function closeAllPopups(event) {\r\n            if (event.target.classList.contains('popup-overlay')) {\r\n                event.target.classList.remove('active');\r\n            }\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\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>CERBY &#8211; The Three-Headed Guardian CERBY Ecosystem Secured The Three-Headed Guardianof the New Era Far more than just a token. $CERBY is the ultimate manifestation of loyalty, security, and community power\u2014guarding the gates of your financial future. Swap Now Live Chart $CERBY: NULL About Tokenomics Roadmap Join Us &copy; Info &times; About CERBY The crypto [&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:\/\/cerby.lol\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cerby.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cerby.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cerby.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cerby.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":31,"href":"https:\/\/cerby.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/cerby.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/cerby.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}