{"id":8,"date":"2026-05-19T18:15:08","date_gmt":"2026-05-19T18:15:08","guid":{"rendered":"https:\/\/thenox.fun\/?page_id=8"},"modified":"2026-05-19T19:49:40","modified_gmt":"2026-05-19T19:49:40","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/thenox.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a4c086 e-flex e-con-boxed e-con e-parent\" data-id=\"1a4c086\" 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-7253336 elementor-widget elementor-widget-html\" data-id=\"7253336\" 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>NOX ($NOX) - The Absolute Sovereign of Silence<\/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:\/\/thenox.fun\/wp-content\/uploads\/2026\/05\/HERO-NOX2.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\">NOX<span>.<\/span><\/div>\r\n            <nav>\r\n                <a onclick=\"openModal('manifesto-modal')\">Manifesto<\/a>\r\n                <a onclick=\"openModal('architecture-modal')\">Architecture<\/a>\r\n                <a onclick=\"openModal('blueprint-modal')\">Blueprint<\/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\">The Absolute Sovereign of Silence<\/div>\r\n                <h1>Rule the Dark.<br><span>Execute on Solana.<\/span><\/h1>\r\n                \r\n                <div class=\"social-left-group\">\r\n                    <a href=\"https:\/\/x.com\" 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=\"https:\/\/t.me\" 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=\"https:\/\/dexscreener.com\" 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                    Beneath the rain-slicked streets and shrouded in shadows, an entity emerges\u2014unspoken, yet reshaping the balance of power. NOX ($NOX) is the ultimate manifestation of the unseen movers within the Solana ecosystem.\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=\"https:\/\/raydium.io\" 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\">\u00a9 2026 NOX Project. All Shadows Reserved.<\/div>\r\n            <div>Powered by the Speed of Solana.<\/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>Cold Execution (Tactical Precision)<\/h3>\r\n                    <p>While the market drowns in hollow noise and loud, empty promises, NOX thrives in secrecy. This character personifies the invisible market forces\u2014the ghost operators who execute flawless trades behind the scenes while the rest of the world sleeps.<\/p>\r\n                <\/div>\r\n                <div class=\"manifesto-block\">\r\n                    <h3>Premium Urban Aesthetic<\/h3>\r\n                    <p>Blending the raw mystery of the iconic black hoodie with a piercing amber gaze, NOX embodies the perfect crossover between gritty underground street culture and high-end decentralized financial intellect.<\/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 \/\/ THE ARCHITECTURE<\/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>Our tokenomics are engineered for absolute cleanliness, stripped of any hidden fees or backdoor vulnerabilities. Contract ownership is fully renounced to the community from day one, because a true empire is built only on a foundation of unyielding trust and transparency.<\/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 \/\/ OPERATION BLUEPRINT<\/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\">Phase 01<\/div>\r\n                    <div class=\"tl-title\">Silent Infiltration<\/div>\r\n                    <p class=\"manifesto-block\" style=\"color:var(--text-muted)\">Deploying a flawless smart contract on the Solana network, initiating rigorous independent audits, and permanently locking liquidity to establish an ironclad foundation.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"timeline-item\">\r\n                    <div class=\"tl-phase\">Phase 02<\/div>\r\n                    <div class=\"tl-title\">Urban Dominance<\/div>\r\n                    <p class=\"manifesto-block\" style=\"color:var(--text-muted)\">Activating a global network of guerrilla community operators. Unleashing high-caliber visual assets across digital spaces to dominate the crypto culture timeline.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"timeline-item\">\r\n                    <div class=\"tl-phase\">Phase 03<\/div>\r\n                    <div class=\"tl-title\">Absolute Sovereignty<\/div>\r\n                    <p class=\"manifesto-block\" style=\"color:var(--text-muted)\">Integrating exclusive utilities for long-term holders, forging high-level strategic partnerships, and cementing $NOX at the absolute top of the ecosystem's food chain.<\/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>NOX ($NOX) &#8211; The Absolute Sovereign of Silence NOX. Manifesto Architecture Blueprint The Absolute Sovereign of Silence Rule the Dark.Execute on Solana. Beneath the rain-slicked streets and shrouded in shadows, an entity emerges\u2014unspoken, yet reshaping the balance of power. NOX ($NOX) is the ultimate manifestation of the unseen movers within the Solana ecosystem. CA: NULL [&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:\/\/thenox.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thenox.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thenox.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thenox.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thenox.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":16,"href":"https:\/\/thenox.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/thenox.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/thenox.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}