{"id":8,"date":"2026-07-16T14:27:13","date_gmt":"2026-07-16T14:27:13","guid":{"rendered":"https:\/\/thesylph.fun\/?page_id=8"},"modified":"2026-07-16T14:48:29","modified_gmt":"2026-07-16T14:48:29","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/thesylph.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-0ed33a3 e-con-full e-flex e-con e-parent\" data-id=\"0ed33a3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-456eb9b elementor-widget elementor-widget-html\" data-id=\"456eb9b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Font Instrument Serif dari Google Fonts -->\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=Instrument+Serif:ital@1&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"sylph-wrapper\">\r\n    <!-- Background Video Utama -->\r\n    <video class=\"sylph-bg\" autoplay loop muted playsinline>\r\n        <source src=\"https:\/\/thesylph.fun\/wp-content\/uploads\/2026\/07\/SYLPH-BG2.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <div class=\"sylph-overlay\"><\/div>\r\n    <div class=\"sylph-glow-atmosphere\"><\/div>\r\n\r\n    <!-- 1. FLOATING PILL NAVBAR -->\r\n    <div class=\"sylph-nav-container\">\r\n        <nav class=\"sylph-pill-nav\">\r\n            <!-- Kiri: Logo -->\r\n            <span class=\"sylph-logo\">Sylph<\/span>\r\n            \r\n            <span class=\"sylph-nav-divider\">|<\/span>\r\n            \r\n            <!-- Tengah: Pop-up Triggers -->\r\n            <div class=\"sylph-nav-links\">\r\n                <button class=\"sylph-link popup-trigger\" data-target=\"popup-about\">About<\/button>\r\n                <span class=\"sylph-dot\">\u2022<\/span>\r\n                <button class=\"sylph-link popup-trigger\" data-target=\"popup-buy\">How to Buy<\/button>\r\n            <\/div>\r\n            \r\n            <span class=\"sylph-nav-divider\">|<\/span>\r\n            \r\n            <!-- Kanan: Social & Utility Buttons -->\r\n            <div class=\"sylph-nav-actions\">\r\n                <div class=\"sylph-socials\">\r\n                    <a href=\"#\" target=\"_blank\" class=\"sylph-icon\" aria-label=\"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=\"#\" target=\"_blank\" class=\"sylph-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-1-.65-.35-1 .22-1.58.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.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.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.37.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z\"\/><\/svg>\r\n                    <\/a>\r\n                <\/div>\r\n                <a href=\"#\" class=\"sylph-btn outline\">Chart<\/a>\r\n                <a href=\"#\" class=\"sylph-btn solid\">Swap<\/a>\r\n            <\/div>\r\n        <\/nav>\r\n    <\/div>\r\n\r\n    <!-- 2. HERO CONTENT SECTION (SPLIT LAYOUT) -->\r\n    <div class=\"sylph-hero\">\r\n        <div class=\"sylph-hero-grid\">\r\n            <!-- Sisi Kiri: Judul -->\r\n            <div class=\"sylph-hero-left\">\r\n                <h1 class=\"sylph-title\">Echoes of<br>the Unseen<\/h1>\r\n            <\/div>\r\n            \r\n            <!-- Sisi Kanan: Deskripsi -->\r\n            <div class=\"sylph-hero-right\">\r\n                <p class=\"sylph-desc\">Drift beyond the tangible. Embrace the silent wind of freedom. The ether awaits those who listen.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Tengah Bawah: CA Copy Button -->\r\n        <div class=\"sylph-hero-bottom\">\r\n            <button class=\"sylph-ca-pill\" onclick=\"copyCA(this, '0x8a923fbc329ad012903ef8231c7382ef9c123456')\">\r\n                <span class=\"ca-tag\">CA :<\/span>\r\n                <span class=\"ca-address\">0x8a923fbc329ad012903ef8231c7382ef9c123456<\/span>\r\n                <span class=\"ca-copy-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><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                <\/span>\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- 3. POP-UP MODAL: ABOUT -->\r\n    <div id=\"popup-about\" class=\"sylph-popup\">\r\n        <div class=\"sylph-popup-overlay\"><\/div>\r\n        <div class=\"sylph-popup-box\">\r\n            <div class=\"sylph-popup-glow\"><\/div>\r\n            <button class=\"sylph-popup-close\">&times;<\/button>\r\n            <div class=\"sylph-popup-header\">\r\n                <h2 class=\"sylph-popup-title\">Beyond the Veil<\/h2>\r\n                <div class=\"sylph-popup-line\"><\/div>\r\n            <\/div>\r\n            \r\n            <!-- Video Asset -->\r\n            <div class=\"sylph-popup-video-frame\">\r\n                <video class=\"sylph-popup-video\" autoplay loop muted playsinline>\r\n                    <source src=\"https:\/\/thesylph.fun\/wp-content\/uploads\/2026\/07\/SYLPH-ASSET1.mp4\" type=\"video\/mp4\">\r\n                <\/video>\r\n            <\/div>\r\n            \r\n            <p class=\"sylph-popup-desc\">We are not bound by form or expectation. Sylph is the manifestation of the ephemeral\u2014a decentralized breath moving through a rigid world. It is not merely a token; it is a movement without footprints. To hold it is to align yourself with the untamed currents of the ether, existing everywhere and nowhere all at once.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- 4. POP-UP MODAL: HOW TO BUY (CARDS) -->\r\n    <div id=\"popup-buy\" class=\"sylph-popup\">\r\n        <div class=\"sylph-popup-overlay\"><\/div>\r\n        <div class=\"sylph-popup-box sylph-buy-box\">\r\n            <div class=\"sylph-popup-glow\"><\/div>\r\n            <button class=\"sylph-popup-close\">&times;<\/button>\r\n            <div class=\"sylph-popup-header\">\r\n                <h2 class=\"sylph-popup-title\">Catching the Wind<\/h2>\r\n                <div class=\"sylph-popup-line\"><\/div>\r\n            <\/div>\r\n            \r\n            <p class=\"sylph-popup-desc sylph-mb-15\">The wind answers only to those who seek it. Discard your earthly anchors and step into the decentralized void.<\/p>\r\n            \r\n            <!-- STEP CARDS -->\r\n            <div class=\"sylph-steps-container\">\r\n                <!-- Step 1 -->\r\n                <div class=\"sylph-step-card\">\r\n                    <div class=\"sylph-step-num\">01<\/div>\r\n                    <div class=\"sylph-step-content\">\r\n                        <h3 class=\"sylph-step-title\">The Vessel<\/h3>\r\n                        <p class=\"sylph-step-desc\">Prepare a decentralized wallet. A silent, non-custodial sanctuary to hold your digital essence.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Step 2 -->\r\n                <div class=\"sylph-step-card\">\r\n                    <div class=\"sylph-step-num\">02<\/div>\r\n                    <div class=\"sylph-step-content\">\r\n                        <h3 class=\"sylph-step-title\">The Catalyst<\/h3>\r\n                        <p class=\"sylph-step-desc\">Acquire the foundational currency. This is the earthly weight you must bring to trade for the wind.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Step 3 -->\r\n                <div class=\"sylph-step-card\">\r\n                    <div class=\"sylph-step-num\">03<\/div>\r\n                    <div class=\"sylph-step-content\">\r\n                        <h3 class=\"sylph-step-title\">The Exchange<\/h3>\r\n                        <p class=\"sylph-step-desc\">Enter the decentralized void. Swap your catalyst for the weightless breath of Sylph. Embrace the current.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- STYLING PREMIUM (CSS) -->\r\n<style>\r\n    \/* Scope Isolation & Reset *\/\r\n    .sylph-wrapper * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n        font-family: 'Instrument Serif', serif !important;\r\n        font-style: italic !important;\r\n        letter-spacing: 0.8px;\r\n        -webkit-font-smoothing: antialiased;\r\n        -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    .sylph-wrapper {\r\n        position: relative;\r\n        width: 100%;\r\n        min-height: 100vh;\r\n        background-color: #030303;\r\n        color: #ffffff;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n    }\r\n\r\n    \/* Background & Overlays *\/\r\n    .sylph-bg {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        z-index: 1;\r\n        pointer-events: none;\r\n    }\r\n    .sylph-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 at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);\r\n        z-index: 2;\r\n        pointer-events: none;\r\n    }\r\n    .sylph-glow-atmosphere {\r\n        position: absolute;\r\n        bottom: -10%;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 80%;\r\n        height: 50%;\r\n        background: radial-gradient(ellipse at bottom, rgba(197, 160, 89, 0.08) 0%, rgba(0,0,0,0) 70%);\r\n        z-index: 3;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* 1. FLOATING PILL NAVBAR *\/\r\n    .sylph-nav-container {\r\n        position: absolute;\r\n        top: 24px;\r\n        left: 0;\r\n        width: 100%;\r\n        display: flex;\r\n        justify-content: center;\r\n        z-index: 20;\r\n        padding: 0 20px;\r\n    }\r\n    .sylph-pill-nav {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 16px;\r\n        background: rgba(10, 10, 10, 0.45);\r\n        backdrop-filter: blur(25px) saturate(120%);\r\n        -webkit-backdrop-filter: blur(25px) saturate(120%);\r\n        border: 1px solid rgba(197, 160, 89, 0.15);\r\n        padding: 6px 20px;\r\n        border-radius: 100px;\r\n        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\r\n    }\r\n    .sylph-logo {\r\n        font-size: 1.15rem;\r\n        color: #C5A059;\r\n        font-weight: 500;\r\n        text-shadow: 0 0 12px rgba(197, 160, 89, 0.3);\r\n    }\r\n    .sylph-nav-divider {\r\n        color: rgba(197, 160, 89, 0.25);\r\n        font-size: 0.8rem;\r\n        font-style: normal !important;\r\n    }\r\n    .sylph-nav-links {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n    .sylph-link {\r\n        background: none;\r\n        border: none;\r\n        color: rgba(255, 255, 255, 0.7);\r\n        font-size: 0.85rem;\r\n        cursor: pointer;\r\n        transition: color 0.4s ease, opacity 0.4s ease;\r\n    }\r\n    .sylph-link:hover {\r\n        color: #C5A059;\r\n        opacity: 1;\r\n    }\r\n    .sylph-dot {\r\n        font-size: 0.6rem;\r\n        color: rgba(197, 160, 89, 0.4);\r\n    }\r\n    .sylph-nav-actions {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n    .sylph-socials {\r\n        display: flex;\r\n        gap: 10px;\r\n    }\r\n    .sylph-icon svg {\r\n        width: 14px;\r\n        height: 14px;\r\n        fill: rgba(255, 255, 255, 0.6);\r\n        transition: fill 0.3s ease, transform 0.3s ease;\r\n    }\r\n    .sylph-icon:hover svg {\r\n        fill: #C5A059;\r\n        transform: translateY(-1px);\r\n    }\r\n\r\n    \/* Minimalist Pill Buttons *\/\r\n    .sylph-btn {\r\n        text-decoration: none;\r\n        padding: 4px 12px;\r\n        font-size: 0.8rem;\r\n        border-radius: 50px;\r\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n    .sylph-btn.outline {\r\n        color: rgba(255,255,255,0.8);\r\n        border: 1px solid rgba(255,255,255,0.15);\r\n    }\r\n    .sylph-btn.outline:hover {\r\n        border-color: #C5A059;\r\n        color: #C5A059;\r\n    }\r\n    .sylph-btn.solid {\r\n        background: #C5A059;\r\n        color: #030303;\r\n        border: 1px solid #C5A059;\r\n    }\r\n    .sylph-btn.solid:hover {\r\n        background: transparent;\r\n        color: #C5A059;\r\n    }\r\n\r\n    \/* 2. HERO SPLIT SECTION *\/\r\n    .sylph-hero {\r\n        position: relative;\r\n        z-index: 10;\r\n        flex-grow: 1;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: flex-end;\r\n        padding: 0 8% 60px 8%;\r\n    }\r\n    .sylph-hero-grid {\r\n        display: grid;\r\n        grid-template-columns: 1.2fr 0.8fr;\r\n        gap: 60px;\r\n        align-items: flex-end;\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto 50px auto;\r\n        border-bottom: 0.5px solid rgba(197, 160, 89, 0.15);\r\n        padding-bottom: 40px;\r\n    }\r\n    .sylph-hero-left {\r\n        text-align: left;\r\n    }\r\n    .sylph-title {\r\n        font-size: 4.25rem;\r\n        font-weight: 400;\r\n        color: #ffffff;\r\n        line-height: 1.05;\r\n        text-shadow: 0 0 40px rgba(0,0,0,0.5);\r\n    }\r\n    .sylph-hero-right {\r\n        text-align: left;\r\n        display: flex;\r\n        justify-content: flex-end;\r\n    }\r\n    .sylph-desc {\r\n        font-size: 1.05rem;\r\n        color: rgba(255, 255, 255, 0.55);\r\n        line-height: 1.6;\r\n        max-width: 380px;\r\n        text-shadow: 0 0 20px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* CA Button Centered Bottom *\/\r\n    .sylph-hero-bottom {\r\n        display: flex;\r\n        justify-content: center;\r\n        width: 100%;\r\n    }\r\n    .sylph-ca-pill {\r\n        background: rgba(197, 160, 89, 0.02);\r\n        border: 1px solid rgba(197, 160, 89, 0.2);\r\n        padding: 6px 16px;\r\n        border-radius: 100px;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n    .sylph-ca-pill:hover {\r\n        border-color: #C5A059;\r\n        background: rgba(197, 160, 89, 0.08);\r\n        box-shadow: 0 0 20px rgba(197, 160, 89, 0.1);\r\n    }\r\n    .ca-tag {\r\n        color: #C5A059;\r\n        font-size: 0.85rem;\r\n        font-weight: 500;\r\n    }\r\n    .ca-address {\r\n        color: rgba(255, 255, 255, 0.8);\r\n        font-size: 0.85rem;\r\n    }\r\n    .ca-copy-icon svg {\r\n        width: 12px;\r\n        height: 12px;\r\n        fill: rgba(255, 255, 255, 0.4);\r\n        transition: fill 0.3s ease;\r\n    }\r\n    .sylph-ca-pill:hover .ca-copy-icon svg {\r\n        fill: #C5A059;\r\n    }\r\n\r\n    \/* 3 & 4. PREMIUM POPUPS *\/\r\n    .sylph-popup {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 100;\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n    .sylph-popup.active {\r\n        opacity: 1;\r\n        pointer-events: auto;\r\n    }\r\n    .sylph-popup-overlay {\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(3, 3, 3, 0.9);\r\n        backdrop-filter: blur(10px);\r\n        -webkit-backdrop-filter: blur(10px);\r\n    }\r\n    .sylph-popup-box {\r\n        position: relative;\r\n        z-index: 101;\r\n        width: 90%;\r\n        max-width: 440px;\r\n        background: #060606;\r\n        border: 0.5px solid rgba(197, 160, 89, 0.2);\r\n        padding: 35px 30px;\r\n        border-radius: 6px;\r\n        transform: scale(0.95) translateY(10px);\r\n        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n        box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 20px rgba(197, 160, 89, 0.02);\r\n    }\r\n    .sylph-buy-box {\r\n        max-width: 480px; \/* Lebih lebar sedikit untuk cards *\/\r\n    }\r\n    .sylph-popup.active .sylph-popup-box {\r\n        transform: scale(1) translateY(0);\r\n    }\r\n    \r\n    \/* Subtle inner glow for popup *\/\r\n    .sylph-popup-glow {\r\n        position: absolute;\r\n        top: -1px;\r\n        left: 10%;\r\n        width: 80%;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.5), transparent);\r\n    }\r\n\r\n    .sylph-popup-close {\r\n        position: absolute;\r\n        top: 15px;\r\n        right: 18px;\r\n        background: none;\r\n        border: none;\r\n        color: rgba(255,255,255,0.3);\r\n        font-size: 1.6rem;\r\n        cursor: pointer;\r\n        transition: color 0.3s ease, transform 0.3s ease;\r\n    }\r\n    .sylph-popup-close:hover {\r\n        color: #C5A059;\r\n        transform: rotate(90deg);\r\n    }\r\n    \r\n    .sylph-popup-header {\r\n        text-align: center;\r\n        margin-bottom: 20px;\r\n    }\r\n    .sylph-popup-title {\r\n        color: #C5A059;\r\n        font-size: 1.8rem;\r\n        font-weight: 400;\r\n        margin-bottom: 10px;\r\n    }\r\n    .sylph-popup-line {\r\n        width: 40px;\r\n        height: 0.5px;\r\n        background: rgba(197, 160, 89, 0.4);\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .sylph-popup-desc {\r\n        font-size: 1rem;\r\n        color: rgba(255, 255, 255, 0.65);\r\n        line-height: 1.6;\r\n        text-align: center;\r\n    }\r\n    .sylph-mb-15 {\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    \/* Video Frame in About Box *\/\r\n    .sylph-popup-video-frame {\r\n        width: 100%;\r\n        margin-bottom: 20px;\r\n        border: 0.5px solid rgba(197, 160, 89, 0.2);\r\n        border-radius: 4px;\r\n        overflow: hidden;\r\n        position: relative;\r\n    }\r\n    .sylph-popup-video-frame::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.5);\r\n        pointer-events: none;\r\n    }\r\n    .sylph-popup-video {\r\n        width: 100%;\r\n        display: block;\r\n        object-fit: cover;\r\n        filter: contrast(1.1) saturate(0.9);\r\n    }\r\n\r\n    \/* STEP CARDS (HOW TO BUY) *\/\r\n    .sylph-steps-container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n    }\r\n    .sylph-step-card {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        background: rgba(255, 255, 255, 0.02);\r\n        border: 0.5px solid rgba(197, 160, 89, 0.1);\r\n        padding: 16px 20px;\r\n        border-radius: 6px;\r\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n    .sylph-step-card:hover {\r\n        background: rgba(197, 160, 89, 0.04);\r\n        border-color: rgba(197, 160, 89, 0.3);\r\n        transform: translateY(-2px);\r\n    }\r\n    .sylph-step-num {\r\n        font-size: 1.6rem;\r\n        color: rgba(197, 160, 89, 0.3);\r\n        margin-right: 18px;\r\n        line-height: 1;\r\n        transition: color 0.4s ease;\r\n    }\r\n    .sylph-step-card:hover .sylph-step-num {\r\n        color: #C5A059;\r\n    }\r\n    .sylph-step-content {\r\n        flex-grow: 1;\r\n        text-align: left;\r\n    }\r\n    .sylph-step-title {\r\n        font-size: 1.25rem;\r\n        color: #ffffff;\r\n        margin-bottom: 4px;\r\n        font-weight: 400;\r\n    }\r\n    .sylph-step-desc {\r\n        font-size: 0.85rem;\r\n        color: rgba(255, 255, 255, 0.5);\r\n        line-height: 1.4;\r\n    }\r\n\r\n    \/* RESPONSIVE DESIGN (TABLET & MOBILE) *\/\r\n    @media (max-width: 900px) {\r\n        .sylph-hero-grid {\r\n            grid-template-columns: 1fr;\r\n            gap: 20px;\r\n            text-align: center;\r\n            padding-bottom: 30px;\r\n        }\r\n        .sylph-hero-left, .sylph-hero-right {\r\n            text-align: center;\r\n            justify-content: center;\r\n        }\r\n        .sylph-title {\r\n            font-size: 3.5rem;\r\n        }\r\n        .sylph-desc {\r\n            max-width: 100%;\r\n            text-align: center;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 650px) {\r\n        .sylph-pill-nav {\r\n            padding: 5px 12px;\r\n            gap: 10px;\r\n            max-width: 95%;\r\n        }\r\n        .sylph-logo {\r\n            font-size: 1rem;\r\n        }\r\n        .sylph-link {\r\n            font-size: 0.75rem;\r\n        }\r\n        .sylph-btn {\r\n            padding: 3px 8px;\r\n            font-size: 0.75rem;\r\n        }\r\n        .sylph-socials {\r\n            display: none;\r\n        }\r\n        .ca-address {\r\n            font-size: 0.7rem;\r\n            max-width: 180px;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n        }\r\n        .sylph-title {\r\n            font-size: 2.8rem;\r\n        }\r\n        .sylph-popup-box {\r\n            padding: 25px 20px;\r\n        }\r\n        .sylph-step-card {\r\n            padding: 14px 15px;\r\n        }\r\n        .sylph-step-num {\r\n            font-size: 1.4rem;\r\n            margin-right: 12px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- LOGIC INTERACTIVE (JS) -->\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ Modal Trigger & Close System\r\n        const triggers = document.querySelectorAll('.popup-trigger');\r\n        const closes = document.querySelectorAll('.sylph-popup-close');\r\n        const overlays = document.querySelectorAll('.sylph-popup-overlay');\r\n\r\n        triggers.forEach(trigger => {\r\n            trigger.addEventListener('click', function() {\r\n                const targetId = this.getAttribute('data-target');\r\n                const modal = document.getElementById(targetId);\r\n                if (modal) {\r\n                    modal.classList.add('active');\r\n                }\r\n            });\r\n        });\r\n\r\n        function clearActivePopups() {\r\n            document.querySelectorAll('.sylph-popup').forEach(modal => {\r\n                modal.classList.remove('active');\r\n            });\r\n        }\r\n\r\n        closes.forEach(btn => btn.addEventListener('click', clearActivePopups));\r\n        overlays.forEach(overlay => overlay.addEventListener('click', clearActivePopups));\r\n\r\n        \/\/ Close with ESC key\r\n        window.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Escape') clearActivePopups();\r\n        });\r\n    });\r\n\r\n    \/\/ Elegant CA Copy with Transition Feedback\r\n    function copyCA(button, address) {\r\n        navigator.clipboard.writeText(address).then(() => {\r\n            const valText = button.querySelector('.ca-address');\r\n            const originalText = valText.innerText;\r\n            \r\n            \/\/ Animasi transisi halus saat teks berubah\r\n            valText.style.opacity = '0';\r\n            setTimeout(() => {\r\n                valText.innerText = 'Copied to clipboard!';\r\n                valText.style.color = '#C5A059';\r\n                valText.style.opacity = '1';\r\n                button.style.borderColor = '#ffffff';\r\n            }, 150);\r\n            \r\n            setTimeout(() => {\r\n                valText.style.opacity = '0';\r\n                setTimeout(() => {\r\n                    valText.innerText = originalText;\r\n                    valText.style.color = 'rgba(255, 255, 255, 0.8)';\r\n                    valText.style.opacity = '1';\r\n                    button.style.borderColor = 'rgba(197, 160, 89, 0.2)';\r\n                }, 150);\r\n            }, 2000);\r\n        }).catch(err => {\r\n            console.error('Copy failed: ', err);\r\n        });\r\n    }\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sylph | About \u2022 How to Buy | Chart Swap Echoes ofthe Unseen Drift beyond the tangible. Embrace the silent wind of freedom. The ether awaits those who listen. CA : 0x8a923fbc329ad012903ef8231c7382ef9c123456 &times; Beyond the Veil We are not bound by form or expectation. Sylph is the manifestation of the ephemeral\u2014a decentralized breath moving through [&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:\/\/thesylph.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesylph.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thesylph.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thesylph.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thesylph.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":16,"href":"https:\/\/thesylph.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/thesylph.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/thesylph.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}