{"id":8,"date":"2026-05-25T18:23:13","date_gmt":"2026-05-25T18:23:13","guid":{"rendered":"https:\/\/blue-sky.lol\/?page_id=8"},"modified":"2026-05-25T19:59:59","modified_gmt":"2026-05-25T19:59:59","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/blue-sky.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-1451dc5 e-flex e-con-boxed e-con e-parent\" data-id=\"1451dc5\" 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-1c9c6be elementor-widget elementor-widget-html\" data-id=\"1c9c6be\" 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\">\r\n    <title>$SKY<\/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=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@600;800;900&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <style>\r\n        :root {\r\n            --bg-dark: #050507;\r\n            --bg-card: #0e1017;\r\n            --accent-amber: #ff9f1c;\r\n            --accent-amber-glow: rgba(255, 159, 28, 0.25);\r\n            --text-light: #f1f5f9;\r\n            --text-muted: #94a3b8;\r\n            --glass-bg: rgba(20, 22, 31, 0.65);\r\n            --glass-border: rgba(255, 159, 28, 0.3);\r\n            --font-head: 'Unbounded', sans-serif;\r\n            --font-body: 'Space Grotesk', sans-serif;\r\n        }\r\n\r\n        * {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        body, html {\r\n            width: 100%;\r\n            height: 100%;\r\n            overflow-x: hidden;\r\n            font-family: var(--font-body);\r\n            background-color: var(--bg-dark);\r\n            color: var(--text-light);\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        \/* Fullscreen Video Background Platform *\/\r\n        .video-bg-container {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 1;\r\n            overflow: hidden;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .video-bg-container video {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            filter: brightness(0.75) contrast(1.10) saturate(1.05);\r\n        }\r\n\r\n        \/* Overlay Gradasi Estetik Jernih *\/\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            background: radial-gradient(circle, transparent 40%, rgba(5,5,7,0.65) 100%),\r\n                        linear-gradient(180deg, rgba(5,5,7,0.1) 0%, rgba(5,5,7,0.80) 100%);\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* Layout Grid Area *\/\r\n        .main-wrapper {\r\n            position: relative;\r\n            z-index: 10;\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            padding: 40px;\r\n        }\r\n\r\n        \/* Header \/ Navbar *\/\r\n        header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            width: 100%;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .logo {\r\n            font-family: var(--font-head);\r\n            font-size: 1.6rem;\r\n            letter-spacing: 2px;\r\n            color: #fff;\r\n            text-transform: uppercase;\r\n            font-weight: 900;\r\n        }\r\n\r\n        .logo span {\r\n            color: var(--accent-amber);\r\n            text-shadow: 0 0 15px rgba(255, 159, 28, 0.7);\r\n        }\r\n\r\n        \/* NAV STYLE: PILL CARD TERPISAH SATU-SATU *\/\r\n        nav {\r\n            display: flex;\r\n            gap: 16px;\r\n        }\r\n\r\n        nav a {\r\n            color: var(--text-light);\r\n            text-decoration: none;\r\n            font-size: 0.75rem;\r\n            font-weight: 700;\r\n            letter-spacing: 1.5px;\r\n            text-transform: uppercase;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            cursor: pointer;\r\n            padding: 12px 26px;\r\n            border-radius: 100px;\r\n            font-family: var(--font-head);\r\n            background: rgba(255, 255, 255, 0.06);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(15px);\r\n            -webkit-backdrop-filter: blur(15px);\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        nav a:hover {\r\n            color: #050507;\r\n            background: var(--accent-amber);\r\n            border-color: var(--accent-amber);\r\n            box-shadow: 0 6px 20px rgba(255, 159, 28, 0.4), 0 0 30px rgba(255, 159, 28, 0.2);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* ========================================================\r\n           LAYOUT SPLIT KONTEN SIMETRIS & PRESISI\r\n           ======================================================== *\/\r\n        .hero-split-container {\r\n            width: 100%;\r\n            max-width: 1400px;\r\n            margin: auto auto;\r\n            display: flex;\r\n            flex-direction: row;\r\n            justify-content: space-between;\r\n            align-items: stretch; \/* Membuat tinggi kiri dan kanan sama rata\/simetris *\/\r\n            gap: 80px;\r\n            padding: 40px 0;\r\n            animation: fadeInUp 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n        }\r\n\r\n        \/* Bagian Kiri: Rata Kiri *\/\r\n        .hero-left-block {\r\n            flex: 1.1;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: flex-start;\r\n            text-align: left;\r\n        }\r\n\r\n        \/* Bagian Kanan: Rata Kanan *\/\r\n        .hero-right-block {\r\n            flex: 0.9;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: flex-end;\r\n            text-align: right;\r\n        }\r\n\r\n        .tagline {\r\n            font-family: var(--font-head);\r\n            font-size: 0.75rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 6px;\r\n            color: var(--accent-amber);\r\n            margin-bottom: 20px;\r\n            font-weight: 800;\r\n            text-shadow: 0 0 10px rgba(255, 159, 28, 0.3);\r\n        }\r\n\r\n        h1 {\r\n            font-family: var(--font-head);\r\n            font-size: 3.8rem;\r\n            line-height: 1.15;\r\n            margin-bottom: 35px;\r\n            text-transform: uppercase;\r\n            color: #fff;\r\n            letter-spacing: -1px;\r\n            font-weight: 900;\r\n            text-shadow: 0 4px 20px rgba(0,0,0,0.4);\r\n        }\r\n\r\n        h1 span {\r\n            background: linear-gradient(135deg, #fff 20%, var(--accent-amber) 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        .hero-desc {\r\n            font-family: var(--font-body);\r\n            font-size: 1.25rem;\r\n            color: #f1f5f9;\r\n            line-height: 1.75;\r\n            margin-bottom: 35px;\r\n            font-weight: 500;\r\n            letter-spacing: 0.5px;\r\n            text-shadow: 0 2px 10px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        \/* CA Container Rata Kanan *\/\r\n        .ca-container {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            background: rgba(10, 11, 15, 0.75);\r\n            border: 1px solid var(--glass-border);\r\n            padding: 12px 24px;\r\n            border-radius: 50px;\r\n            backdrop-filter: blur(16px);\r\n            -webkit-backdrop-filter: blur(16px);\r\n            margin-bottom: 25px;\r\n            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n        }\r\n\r\n        .ca-container:hover {\r\n            border-color: var(--accent-amber);\r\n            box-shadow: 0 0 25px rgba(255, 159, 28, 0.4);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .ca-label {\r\n            font-size: 0.8rem;\r\n            font-family: var(--font-head);\r\n            color: var(--accent-amber);\r\n            margin-right: 14px;\r\n            font-weight: 900;\r\n        }\r\n\r\n        .ca-text {\r\n            font-size: 1rem;\r\n            font-family: monospace;\r\n            letter-spacing: 1.5px;\r\n            color: #fff;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n            max-width: 300px;\r\n        }\r\n\r\n        .copy-btn {\r\n            background: none;\r\n            border: none;\r\n            color: var(--text-light);\r\n            margin-left: 18px;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.2s;\r\n        }\r\n\r\n        .copy-btn svg {\r\n            width: 18px;\r\n            height: 18px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        .copy-btn:hover {\r\n            color: var(--accent-amber);\r\n            transform: scale(1.15);\r\n        }\r\n\r\n        \/* Group Sosial Media (Kiri) *\/\r\n        .social-left-group {\r\n            display: flex;\r\n            gap: 14px;\r\n        }\r\n\r\n        \/* Group Swap Action (Kanan) *\/\r\n        .swap-right-group {\r\n            display: flex;\r\n            justify-content: flex-end;\r\n            width: 100%;\r\n        }\r\n\r\n        .btn-primary {\r\n            font-family: var(--font-head);\r\n            background: var(--accent-amber);\r\n            color: #050507;\r\n            padding: 18px 54px;\r\n            font-size: 0.85rem;\r\n            font-weight: 950;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            border: none;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            text-decoration: none;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 12px;\r\n            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n            box-shadow: 0 6px 25px rgba(255, 159, 28, 0.4);\r\n        }\r\n\r\n        .btn-primary svg {\r\n            width: 18px;\r\n            height: 18px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        .btn-primary:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 10px 30px rgba(255, 159, 28, 0.6);\r\n            background: #fff;\r\n            color: #050507;\r\n        }\r\n\r\n        .social-icon-btn {\r\n            width: 58px;\r\n            height: 58px;\r\n            background: rgba(10, 11, 15, 0.7);\r\n            border: 1px solid rgba(255, 255, 255, 0.15);\r\n            color: #fff;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border-radius: 8px;\r\n            text-decoration: none;\r\n            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n            backdrop-filter: blur(16px);\r\n            -webkit-backdrop-filter: blur(16px);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n        }\r\n\r\n        .social-icon-btn svg {\r\n            width: 22px;\r\n            height: 22px;\r\n            fill: currentColor;\r\n            display: block;\r\n        }\r\n\r\n        .social-icon-btn:hover {\r\n            border-color: var(--accent-amber);\r\n            color: var(--accent-amber);\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 0 20px rgba(255, 159, 28, 0.5);\r\n        }\r\n\r\n        \/* Footer & Copyright Section *\/\r\n        footer {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            width: 100%;\r\n            max-width: 1400px;\r\n            margin: 40px auto 0 auto;\r\n            font-size: 0.85rem;\r\n            color: #cbd5e1;\r\n            border-top: 1px solid rgba(255,255,255,0.15);\r\n            padding-top: 25px;\r\n            font-weight: 500;\r\n            letter-spacing: 0.5px;\r\n            text-shadow: 0 2px 5px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        footer .copyright {\r\n            color: #fff;\r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* ========================================================\r\n           NEW MODAL SYSTEM DESIGN (CYBER MATRIX STYLE)\r\n           ======================================================== *\/\r\n        .modal-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(3, 3, 5, 0.8);\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            z-index: 100;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: 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: 20px;\r\n        }\r\n\r\n        .modal-overlay.active {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n\r\n        .modal-card {\r\n            background: linear-gradient(180deg, #12151f 0%, #08090d 100%);\r\n            border: 1px solid rgba(255, 159, 28, 0.25);\r\n            width: 100%;\r\n            max-width: 680px;\r\n            max-height: 85vh;\r\n            border-radius: 24px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transform: translateY(30px) scale(0.98);\r\n            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n            box-shadow: 0 40px 90px rgba(0, 0, 0, 0.8), \r\n                        0 0 60px rgba(255, 159, 28, 0.05);\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .modal-overlay.active .modal-card {\r\n            transform: translateY(0) scale(1);\r\n        }\r\n\r\n        .modal-card-header {\r\n            padding: 35px 40px 20px 40px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n            background: rgba(18, 21, 31, 0.8);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        .modal-title {\r\n            font-family: var(--font-head);\r\n            font-size: 1rem;\r\n            color: #fff;\r\n            letter-spacing: 3px;\r\n            font-weight: 800;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n        }\r\n\r\n        .modal-title::before {\r\n            content: '';\r\n            width: 8px;\r\n            height: 8px;\r\n            background: var(--accent-amber);\r\n            border-radius: 2px;\r\n            box-shadow: 0 0 10px var(--accent-amber);\r\n        }\r\n\r\n        .close-modal {\r\n            background: rgba(255, 255, 255, 0.05);\r\n            border: 1px solid rgba(255, 255, 255, 0.15);\r\n            color: #fff;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 38px;\r\n            height: 38px;\r\n            border-radius: 50%;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .close-modal svg {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        .close-modal:hover {\r\n            color: #050507;\r\n            background: var(--accent-amber);\r\n            border-color: var(--accent-amber);\r\n            box-shadow: 0 0 15px rgba(255, 159, 28, 0.4);\r\n            transform: rotate(90deg);\r\n        }\r\n\r\n        .modal-card-body {\r\n            padding: 40px;\r\n            overflow-y: auto;\r\n            flex: 1;\r\n        }\r\n\r\n        .modal-card-body::-webkit-scrollbar {\r\n            width: 6px;\r\n        }\r\n        .modal-card-body::-webkit-scrollbar-track {\r\n            background: transparent;\r\n        }\r\n        .modal-card-body::-webkit-scrollbar-thumb {\r\n            background: rgba(255, 159, 28, 0.2);\r\n            border-radius: 10px;\r\n        }\r\n        .modal-card-body::-webkit-scrollbar-thumb:hover {\r\n            background: rgba(255, 159, 28, 0.4);\r\n        }\r\n\r\n        .manifesto-block {\r\n            margin-bottom: 35px;\r\n            background: rgba(255, 255, 255, 0.02);\r\n            border-radius: 16px;\r\n            border: 1px solid rgba(255, 255, 255, 0.06);\r\n            padding: 24px;\r\n            transition: border 0.3s ease;\r\n        }\r\n        \r\n        .manifesto-block:hover {\r\n            border-color: rgba(255, 159, 28, 0.2);\r\n        }\r\n\r\n        .manifesto-block:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n\r\n        .manifesto-block h3 {\r\n            font-family: var(--font-head);\r\n            color: var(--accent-amber);\r\n            font-size: 0.85rem;\r\n            margin-bottom: 12px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1.5px;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .manifesto-block p {\r\n            font-family: var(--font-body);\r\n            color: #f1f5f9;\r\n            font-size: 1.05rem;\r\n            line-height: 1.65;\r\n            font-weight: 400;\r\n        }\r\n\r\n        .toke-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 16px;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .toke-box {\r\n            background: rgba(255, 159, 28, 0.04);\r\n            border: 1px solid rgba(255, 159, 28, 0.15);\r\n            padding: 26px 15px;\r\n            text-align: center;\r\n            border-radius: 16px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .toke-box:hover {\r\n            background: rgba(255, 159, 28, 0.08);\r\n            border-color: rgba(255, 159, 28, 0.3);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .toke-val {\r\n            font-family: var(--font-head);\r\n            font-size: 1.15rem;\r\n            font-weight: 900;\r\n            color: #fff;\r\n            letter-spacing: 0.5px;\r\n        }\r\n        \r\n        .toke-lbl {\r\n            font-family: var(--font-head);\r\n            font-size: 0.6rem;\r\n            color: var(--accent-amber);\r\n            letter-spacing: 1.5px;\r\n            margin-top: 10px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            opacity: 0.9;\r\n        }\r\n\r\n        .timeline-item {\r\n            border-left: 2px solid rgba(255, 159, 28, 0.25);\r\n            padding-left: 30px;\r\n            position: relative;\r\n            margin-bottom: 0;\r\n            padding-bottom: 40px;\r\n        }\r\n\r\n        .timeline-item:last-child {\r\n            border-left: 2px solid transparent;\r\n            padding-bottom: 0;\r\n        }\r\n\r\n        .timeline-item::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: -7px;\r\n            top: 4px;\r\n            width: 12px;\r\n            height: 12px;\r\n            background: #050507;\r\n            border: 2px solid var(--accent-amber);\r\n            border-radius: 50%;\r\n            z-index: 2;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .timeline-item:hover::before {\r\n            background: var(--accent-amber);\r\n            box-shadow: 0 0 12px var(--accent-amber);\r\n            scale: 1.2;\r\n        }\r\n\r\n        .tl-phase {\r\n            font-family: var(--font-head);\r\n            font-size: 0.7rem;\r\n            font-weight: 900;\r\n            color: var(--accent-amber);\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            background: rgba(255, 159, 28, 0.12);\r\n            display: inline-block;\r\n            padding: 4px 10px;\r\n            border-radius: 4px;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .tl-title {\r\n            font-family: var(--font-body);\r\n            font-size: 1.3rem;\r\n            font-weight: 700;\r\n            color: #fff;\r\n            margin: 4px 0 12px 0;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        \/* Animations *\/\r\n        @keyframes fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(40px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        \/* ========================================================\r\n           RESPONSIVE FLUID MOBILE BREAKPOINTS \r\n           ======================================================== *\/\r\n        @media (max-width: 1100px) {\r\n            h1 { font-size: 3rem; }\r\n            .hero-split-container { gap: 40px; }\r\n        }\r\n\r\n        @media (max-width: 992px) {\r\n            \/* Transformasi menjadi susunan vertikal bertumpuk pada tablet *\/\r\n            .hero-split-container {\r\n                flex-direction: column;\r\n                align-items: center;\r\n                text-align: center;\r\n                gap: 50px;\r\n            }\r\n            .hero-left-block, .hero-right-block {\r\n                flex: none;\r\n                width: 100%;\r\n                align-items: center;\r\n                text-align: center;\r\n            }\r\n            .hero-desc { max-width: 85%; margin-left: auto; margin-right: auto; }\r\n            .swap-right-group { justify-content: center; }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .main-wrapper { padding: 30px 24px; }\r\n            header { flex-direction: column; gap: 25px; }\r\n            nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px; }\r\n            nav a { padding: 10px 20px; font-size: 0.7rem; }\r\n            h1 { font-size: 2.4rem; }\r\n            footer { flex-direction: column; gap: 15px; text-align: center; padding-top: 25px; font-size: 0.85rem; }\r\n            .modal-card { max-height: 90vh; }\r\n            .modal-card-header { padding: 25px 25px 15px 25px; }\r\n            .modal-card-body { padding: 25px; }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .logo { font-size: 1.3rem; }\r\n            h1 { font-size: 1.8rem; }\r\n            .ca-text { max-width: 160px; font-size: 0.85rem; }\r\n            .btn-primary { width: 100%; text-align: center; padding: 16px 0; }\r\n            nav a { width: 100%; text-align: center; padding: 10px 0; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"video-bg-container\">\r\n        <video autoplay loop muted playsinline preload=\"auto\">\r\n            <source src=\"https:\/\/blue-sky.lol\/wp-content\/uploads\/2026\/05\/HERO-SKY.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        \r\n        <header>\r\n            <div class=\"logo\">$<span>SKY<\/span><\/div>\r\n            <nav>\r\n                <a onclick=\"openModal('manifesto-modal')\">THE MANIFESTO<\/a>\r\n                <a onclick=\"openModal('architecture-modal')\">Tokenomics<\/a>\r\n                <a onclick=\"openModal('blueprint-modal')\">The Ecosystem<\/a>\r\n            <\/nav>\r\n        <\/header>\r\n\r\n        <!-- AREA UTAMA SPLIT COLUMN LAYOUT (SIMETRIS & PRESISI) -->\r\n        <div class=\"hero-split-container\">\r\n            \r\n            <!-- BLOK KIRI: JUDUL + SOSIAL MEDIA (RATA KIRI) -->\r\n            <div class=\"hero-left-block\">\r\n                <div class=\"tagline\"><\/div>\r\n                <h1>BEYOND ARCHITECTURE. <br><span> BEYOND INTELLIGENCE.<\/span><\/h1>\r\n                \r\n                <div class=\"social-left-group\">\r\n                    <a href=\"LINK KAMU\" target=\"_blank\" class=\"social-icon-btn\" title=\"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=\"LINK KAMU\" target=\"_blank\" class=\"social-icon-btn\" title=\"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-0.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.40-.36-.01-1.04-.2-1.55-.37-.63-.2-1.13-.31-1.09-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z\"\/><\/svg>\r\n                    <\/a>\r\n                    <a href=\"LINK KAMU\" target=\"_blank\" class=\"social-icon-btn\" title=\"Dexscreener Chart\">\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M3.5 18h2v3h-2zm4.75-7h2v10h-2zm4.75 4h2v6h-2zm4.75-8h2v14h-2zM2 2h20v2H2z\"\/><\/svg>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- BLOK KANAN: DESKRIPSI + CA + SWAP (RATA KANAN) -->\r\n            <div class=\"hero-right-block\">\r\n                <p class=\"hero-desc\">\r\n            We are not building for the market. We are defining the foundation of the next digital reality.\r\n                <\/p>\r\n\r\n                <div class=\"ca-container\">\r\n                    <span class=\"ca-label\">CA:<\/span>\r\n                    <span class=\"ca-text\" id=\"caText\">NULL<\/span>\r\n                    <button class=\"copy-btn\" onclick=\"copyCA()\" title=\"Copy Contract Address\">\r\n                        <svg viewBox=\"0 0 24 24\" id=\"copyIcon\"><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"\/><\/svg>\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <div class=\"swap-right-group\">\r\n                    <a href=\"LINK-KAMU\" target=\"_blank\" class=\"btn-primary\">\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M16 17.01V11H8v6.01H3L11 24l8-6.99h-3zM9 7V0h6v7h5l-8 7-8-7h5z\"\/><\/svg>\r\n                        Swap Now\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <footer>\r\n            <div class=\"copyright\">SKY PROTOCOL \u2014 2026<\/div>\r\n            <div>Privacy is not requested. It is enforced.<\/div>\r\n        <\/footer>\r\n    <\/div>\r\n\r\n    <!-- 01 \/\/ MANIFESTO MODAL -->\r\n    <div class=\"modal-overlay\" id=\"manifesto-modal\" onclick=\"closeModalOnOverlay(event, 'manifesto-modal')\">\r\n        <div class=\"modal-card\">\r\n            <div class=\"modal-card-header\">\r\n                <div class=\"modal-title\">01 \/\/ THE MANIFESTO<\/div>\r\n                <button class=\"close-modal\" onclick=\"closeModal('manifesto-modal')\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/svg>\r\n                <\/button>\r\n            <\/div>\r\n            <div class=\"modal-card-body\">\r\n                <div class=\"manifesto-block\">\r\n                    <h3>ARCHITECTS OF THE UNSEEN.<\/h3>\r\n                    <p>Beneath the chaos of the digital landscape, order is forged. We do not patch the failures of legacy systems; we render them obsolete.<\/p>\r\n                <\/div>\r\n                <div class=\"manifesto-block\">\r\n                    <h3>Feature List:<\/h3>\r\n                    <p>\u25cf UNYIELDING LOGIC: Our protocol is immutable law. Free from human bias. Only pure, calculated execution remains.<BR>\r\n                        \u25cf SILENT DOMINANCE: We orchestrate efficiency where others find friction. We are the silent foundation.<BR>\r\n                            \u25cf ABSOLUTE SOVEREIGNTY: True ownership is no longer a privilege\u2014it is an infrastructure.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- 02 \/\/ ARCHITECTURE MODAL -->\r\n    <div class=\"modal-overlay\" id=\"architecture-modal\" onclick=\"closeModalOnOverlay(event, 'architecture-modal')\">\r\n        <div class=\"modal-card\">\r\n            <div class=\"modal-card-header\">\r\n                <div class=\"modal-title\">02 \/\/ $SKY: THE FUEL.<\/div>\r\n                <button class=\"close-modal\" onclick=\"closeModal('architecture-modal')\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/svg>\r\n                <\/button>\r\n            <\/div>\r\n            <div class=\"modal-card-body\">\r\n                <div class=\"toke-grid\">\r\n                    <div class=\"toke-box\">\r\n                        <div class=\"toke-val\">1 BILLION<\/div>\r\n                        <div class=\"toke-lbl\">Max Supply<\/div>\r\n                    <\/div>\r\n                    <div class=\"toke-box\">\r\n                        <div class=\"toke-val\">0%<\/div>\r\n                        <div class=\"toke-lbl\">Tax Protocol<\/div>\r\n                    <\/div>\r\n                    <div class=\"toke-box\">\r\n                        <div class=\"toke-val\">BURNED<\/div>\r\n                        <div class=\"toke-lbl\">Liquidity Pool<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"manifesto-block\" style=\"margin-bottom: 0;\">\r\n                    <p>Asset scarcity by design. Token utility by necessity.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- 03 \/\/ BLUEPRINT MODAL -->\r\n    <div class=\"modal-overlay\" id=\"blueprint-modal\" onclick=\"closeModalOnOverlay(event, 'blueprint-modal')\">\r\n        <div class=\"modal-card\">\r\n            <div class=\"modal-card-header\">\r\n                <div class=\"modal-title\">03 \/\/ THE NEXUS.<\/div>\r\n                <button class=\"close-modal\" onclick=\"closeModal('blueprint-modal')\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/svg>\r\n                <\/button>\r\n            <\/div>\r\n            <div class=\"modal-card-body\">\r\n                <div class=\"timeline-item\">\r\n                    <div class=\"tl-phase\">Node A:<\/div>\r\n                    <div class=\"tl-title\">THE PROTOCOL ENGINE<\/div>\r\n                    <p class=\"manifesto-block\" style=\"color:var(--text-muted)\">The core engine of decentralization.\r\nThe Protocol is the immutable backbone of SKY, engineered to eliminate single points of failure. By utilizing high-throughput architecture, we ensure that every transaction and decision is processed with cryptographic finality. It is not merely a ledger; it is a self-sustaining environment that enforces the rules of the network with absolute, code-driven consistency.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"timeline-item\">\r\n                    <div class=\"tl-phase\">Node B:<\/div>\r\n                    <div class=\"tl-title\">THE INTELLIGENCE LAYER<\/div>\r\n                    <p class=\"manifesto-block\" style=\"color:var(--text-muted)\">Self-evolving AI, refined by the network.\r\nIntelligence in SKY is alive. Our Neural Core constantly processes global market shifts, optimizing strategies in real-time. Unlike static systems, the Intelligence Layer learns from every interaction, refining its own logic to anticipate volatility and capitalize on emerging opportunities. It is the architect of our foresight, turning raw data into strategic dominance.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"timeline-item\">\r\n                    <div class=\"tl-phase\">Node C:     <div class=\"tl-title\">THE STAKING SYNDICATE<\/div>\r\n                    <p class=\"manifesto-block\" style=\"color:var(--text-muted)\">Value locked, authority earned.\r\nStaking is the mechanism by which conviction becomes governance. In the Syndicate, your participation is more than an investment; it is a commitment to the protocol\u2019s evolution. By locking liquidity, you do not just secure the network\u2014you claim your seat in the governance syndicate, wielding the authority to shape the future trajectory of the entire SKY ecosystem.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        function openModal(id) {\r\n            document.getElementById(id).classList.add('active');\r\n        }\r\n\r\n        function closeModal(id) {\r\n            document.getElementById(id).classList.remove('active');\r\n        }\r\n\r\n        function closeModalOnOverlay(event, id) {\r\n            if (event.target === document.getElementById(id)) {\r\n                closeModal(id);\r\n            }\r\n        }\r\n\r\n        function copyCA() {\r\n            const caText = document.getElementById('caText').innerText;\r\n            const container = document.getElementById('copyIcon');\r\n            \r\n            if(caText === \"NULL\") return;\r\n            \r\n            navigator.clipboard.writeText(caText).then(() => {\r\n                container.innerHTML = '<path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/>';\r\n                container.style.fill = \"#ff9f1c\";\r\n                \r\n                setTimeout(() => {\r\n                    container.innerHTML = '<path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"\/>';\r\n                    container.style.fill = \"\";\r\n                }, 2000);\r\n            }).catch(err => {\r\n                console.error('Failed to copy CA: ', err);\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>$SKY $SKY THE MANIFESTO Tokenomics The Ecosystem BEYOND ARCHITECTURE. BEYOND INTELLIGENCE. We are not building for the market. We are defining the foundation of the next digital reality. CA: NULL Swap Now SKY PROTOCOL \u2014 2026 Privacy is not requested. It is enforced. 01 \/\/ THE MANIFESTO ARCHITECTS OF THE UNSEEN. Beneath the chaos of [&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:\/\/blue-sky.lol\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blue-sky.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blue-sky.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blue-sky.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blue-sky.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":31,"href":"https:\/\/blue-sky.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/blue-sky.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/blue-sky.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}