{"id":8,"date":"2026-05-18T14:35:06","date_gmt":"2026-05-18T14:35:06","guid":{"rendered":"https:\/\/worldjackcup.xyz\/?page_id=8"},"modified":"2026-05-18T15:31:52","modified_gmt":"2026-05-18T15:31:52","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/worldjackcup.xyz\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-603f235 e-con-full e-flex e-con e-parent\" data-id=\"603f235\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/worldjackcup.xyz\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/WORLDJACK-BG2.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-fa30cbc e-flex e-con-boxed e-con e-child\" data-id=\"fa30cbc\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a96332 elementor-widget elementor-widget-html\" data-id=\"3a96332\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Elementor Ready Navbar Block -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;600;700&display=swap');\r\n\r\n\/* Main Wrapper - Transparent *\/\r\n.wj-nav-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 24px 20px;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    background: transparent;\r\n    z-index: 100; \/* Controlled visibility *\/\r\n}\r\n\r\n\/* Glassmorphism Backdrop - Absolute positioned for depth *\/\r\n.wj-glass-bg {\r\n    position: absolute;\r\n    top: 10px;\r\n    bottom: 10px;\r\n    left: 20px;\r\n    right: 20px;\r\n    background: rgba(10, 10, 10, 0.2);\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n    border: 1px solid rgba(255, 255, 255, 0.05);\r\n    border-radius: 20px;\r\n    z-index: 0;\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n\/* Gold Accent Line - Overlapping element *\/\r\n.wj-gold-accent {\r\n    position: absolute;\r\n    bottom: -1px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 40%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, #D4AF37, transparent);\r\n    z-index: 1;\r\n    opacity: 0.6;\r\n}\r\n\r\n\/* Foreground Content *\/\r\n.wj-nav-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 0 16px;\r\n}\r\n\r\n\/* Logo Styling *\/\r\n.wj-logo-text {\r\n    font-weight: 700;\r\n    font-size: 24px;\r\n    color: #ffffff;\r\n    letter-spacing: -0.04em;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    position: relative;\r\n    text-shadow: 0 2px 10px rgba(0,0,0,0.5);\r\n}\r\n\r\n.wj-logo-text span {\r\n    color: #D4AF37; \/* Elegant Gold *\/\r\n}\r\n\r\n\/* Buttons Container *\/\r\n.wj-social-btns {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n\/* Playful & Elegant Buttons with Negative Margins *\/\r\n.wj-btn {\r\n    position: relative;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-weight: 600;\r\n    font-size: 15px;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    padding: 10px 24px;\r\n    background: rgba(255, 255, 255, 0.03);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 40px;\r\n    margin-left: -12px; \/* Overlapping depth effect *\/\r\n    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); \/* Playful bounce *\/\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n\/* Ensure the second button stays on top of the first *\/\r\n.wj-btn:nth-child(2) {\r\n    z-index: 2;\r\n    background: rgba(20, 20, 20, 0.6);\r\n}\r\n\r\n.wj-btn:hover {\r\n    background: #D4AF37;\r\n    color: #000000;\r\n    border-color: #D4AF37;\r\n    transform: translateY(-4px) rotate(-2deg); \/* Playful tilt *\/\r\n    z-index: 3;\r\n    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n    .wj-logo-text {\r\n        font-size: 20px;\r\n    }\r\n    .wj-btn {\r\n        padding: 8px 16px;\r\n        font-size: 13px;\r\n        margin-left: -8px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wj-nav-wrapper\">\r\n    <!-- Absolute Backdrop for depth -->\r\n    <div class=\"wj-glass-bg\">\r\n        <div class=\"wj-gold-accent\"><\/div>\r\n    <\/div>\r\n    \r\n    <!-- Foreground Content -->\r\n    <div class=\"wj-nav-content\">\r\n        <div class=\"wj-logo-text\" id=\"wj-logo\">Worldjack <span>Cup<\/span><\/div>\r\n        \r\n        <div class=\"wj-social-btns\">\r\n            <a href=\"#\" class=\"wj-btn\" id=\"btn-twitter\">Twitter<\/a>\r\n            <a href=\"#\" class=\"wj-btn\" id=\"btn-telegram\">Telegram<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \/\/ Subtle hover logic for the absolute background to interact with the foreground\r\n    const navWrapper = document.querySelector('.wj-nav-wrapper');\r\n    const glassBg = document.querySelector('.wj-glass-bg');\r\n    \r\n    navWrapper.addEventListener('mouseenter', () => {\r\n        glassBg.style.background = 'rgba(15, 15, 15, 0.3)';\r\n        glassBg.style.borderColor = 'rgba(212, 175, 55, 0.2)'; \/\/ Gold tint on hover\r\n    });\r\n\r\n    navWrapper.addEventListener('mouseleave', () => {\r\n        glassBg.style.background = 'rgba(10, 10, 10, 0.2)';\r\n        glassBg.style.borderColor = 'rgba(255, 255, 255, 0.05)';\r\n    });\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f09234 e-flex e-con-boxed e-con e-child\" data-id=\"4f09234\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74c41da elementor-widget elementor-widget-html\" data-id=\"74c41da\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Elementor Ready Hero Section Block -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;600;700&display=swap');\r\n\r\n\/* Main Wrapper - Transparent & Relative for Absolute Children *\/\r\n.wj-hero-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 50vh; \/* Full screen height feel *\/\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    background: transparent;\r\n    overflow: hidden;\r\n    z-index: 10;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 100px 20px;\r\n}\r\n\r\n\/* Background Depth Overlay - Absolute positioning *\/\r\n.wj-hero-glow {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 60vw;\r\n    height: 60vw;\r\n    transform: translate(-50%, -50%);\r\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);\r\n    z-index: -1;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Typography Layout - Using Overlaps & Negative Margins for Depth *\/\r\n.wj-hero-title {\r\n    position: relative;\r\n    z-index: 3;\r\n    font-size: clamp(40px, 8vw, 90px);\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    line-height: 0.9;\r\n    text-align: center;\r\n    text-transform: uppercase;\r\n    letter-spacing: -0.05em;\r\n    margin: 0;\r\n    text-shadow: 0 10px 30px rgba(0,0,0,0.8);\r\n}\r\n\r\n.wj-hero-title span {\r\n    color: #D4AF37; \/* Elegant Gold *\/\r\n    display: block;\r\n    margin-left: 50px; \/* Staggered typography *\/\r\n}\r\n\r\n\/* Glassmorphism Subtext - Overlapping the title *\/\r\n.wj-hero-sub {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 600px;\r\n    margin-top: -20px; \/* Negative margin to tuck under title *\/\r\n    padding: 40px 30px 30px 30px;\r\n    background: rgba(15, 15, 15, 0.3);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border: 1px solid rgba(212, 175, 55, 0.1);\r\n    border-radius: 24px;\r\n    color: rgba(255, 255, 255, 0.8);\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n    text-align: center;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.4);\r\n}\r\n\r\n\/* Actions Container - Overlapping the subtext *\/\r\n.wj-hero-actions {\r\n    position: relative;\r\n    z-index: 4;\r\n    display: flex;\r\n    margin-top: -25px; \/* Overlap effect *\/\r\n    gap: 0; \/* Elements will overlap via child margins *\/\r\n}\r\n\r\n\/* Playful & Elegant Buttons *\/\r\n.wj-action-btn {\r\n    position: relative;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-weight: 600;\r\n    font-size: 16px;\r\n    text-decoration: none;\r\n    padding: 16px 32px;\r\n    border-radius: 50px;\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    backdrop-filter: blur(10px);\r\n    cursor: pointer;\r\n}\r\n\r\n.wj-action-btn.primary {\r\n    background: #D4AF37;\r\n    color: #050505;\r\n    border: 1px solid #D4AF37;\r\n    z-index: 2;\r\n}\r\n\r\n.wj-action-btn.secondary {\r\n    background: rgba(255, 255, 255, 0.05);\r\n    color: #ffffff;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    margin-left: -20px; \/* Tuck under primary button *\/\r\n    z-index: 1;\r\n    padding-left: 40px; \/* Compensate for overlap *\/\r\n}\r\n\r\n.wj-action-btn:hover {\r\n    transform: translateY(-5px) rotate(3deg);\r\n    z-index: 3;\r\n    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);\r\n}\r\n\r\n.wj-action-btn.secondary:hover {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-color: rgba(212, 175, 55, 0.5);\r\n    transform: translateY(-5px) rotate(-3deg);\r\n}\r\n\r\n\/* Contract Address Section - Absolute at the bottom *\/\r\n.wj-ca-container {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 5;\r\n    display: flex;\r\n    align-items: center;\r\n    background: rgba(10, 10, 10, 0.5);\r\n    backdrop-filter: blur(15px);\r\n    -webkit-backdrop-filter: blur(15px);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 100px;\r\n    padding: 6px 6px 6px 20px;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n    transition: all 0.3s ease;\r\n    width: 90%;\r\n    max-width: 500px;\r\n}\r\n\r\n.wj-ca-container:hover {\r\n    border-color: rgba(212, 175, 55, 0.4);\r\n    background: rgba(15, 15, 15, 0.7);\r\n}\r\n\r\n.wj-ca-text {\r\n    color: rgba(255, 255, 255, 0.6);\r\n    font-size: 14px;\r\n    font-weight: 400;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    margin-right: 15px;\r\n    flex-grow: 1;\r\n    font-family: monospace; \/* Monospace for CA looks better *\/\r\n    letter-spacing: 0.05em;\r\n}\r\n\r\n.wj-ca-btn {\r\n    background: rgba(212, 175, 55, 0.1);\r\n    color: #D4AF37;\r\n    border: 1px solid rgba(212, 175, 55, 0.2);\r\n    padding: 10px 20px;\r\n    border-radius: 50px;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    white-space: nowrap;\r\n}\r\n\r\n.wj-ca-btn:hover {\r\n    background: #D4AF37;\r\n    color: #000;\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n    .wj-hero-title span {\r\n        margin-left: 0;\r\n    }\r\n    .wj-hero-sub {\r\n        margin-top: -10px;\r\n        padding: 30px 20px 20px 20px;\r\n        font-size: 14px;\r\n    }\r\n    .wj-action-btn {\r\n        padding: 14px 24px;\r\n        font-size: 14px;\r\n    }\r\n    .wj-action-btn.secondary {\r\n        padding-left: 30px;\r\n    }\r\n    .wj-ca-container {\r\n        bottom: 20px;\r\n        padding: 4px 4px 4px 15px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wj-hero-wrapper\">\r\n    <!-- Depth Effect -->\r\n    <div class=\"wj-hero-glow\"><\/div>\r\n\r\n    <!-- Foreground Staggered Content -->\r\n    <h1 class=\"wj-hero-title\">\r\n        The Beautiful Game<br>\r\n        <span>is Exhausting.<\/span>\r\n    <\/h1>\r\n    \r\n    <div class=\"wj-hero-sub\">\r\n        Welcome to the Worldjack Cup. No PR. No forced smiles. Just the greatest captains in the world running on pure anxiety, stubbornness, and the terrifying fear of becoming a meme.\r\n    <\/div>\r\n\r\n    <div class=\"wj-hero-actions\">\r\n        <a href=\"#\" class=\"wj-action-btn primary\">Enter the Pitch<\/a>\r\n        <a href=\"#\" class=\"wj-action-btn secondary\">Read the Cope<\/a>\r\n    <\/div>\r\n\r\n    <!-- Absolute Bottom Contract Address -->\r\n    <div class=\"wj-ca-container\">\r\n        <div class=\"wj-ca-text\" id=\"ca-value\">WJck99...[REPLACE_WITH_YOUR_SOLANA_CA]...pump<\/div>\r\n        <button class=\"wj-ca-btn\" id=\"copy-ca-btn\">Copy CA<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const copyBtn = document.getElementById(\"copy-ca-btn\");\r\n    const caValueText = document.getElementById(\"ca-value\").innerText;\r\n\r\n    copyBtn.addEventListener(\"click\", function() {\r\n        \/\/ Copy to clipboard\r\n        navigator.clipboard.writeText(caValueText).then(() => {\r\n            \/\/ Visual feedback\r\n            const originalText = copyBtn.innerText;\r\n            const originalBg = copyBtn.style.background;\r\n            const originalColor = copyBtn.style.color;\r\n\r\n            copyBtn.innerText = \"Copied!\";\r\n            copyBtn.style.background = \"#D4AF37\";\r\n            copyBtn.style.color = \"#000\";\r\n\r\n            \/\/ Reset after 2 seconds\r\n            setTimeout(() => {\r\n                copyBtn.innerText = originalText;\r\n                copyBtn.style.background = originalBg;\r\n                copyBtn.style.color = originalColor;\r\n            }, 2000);\r\n        }).catch(err => {\r\n            console.error('Failed to copy CA: ', err);\r\n            copyBtn.innerText = \"Failed\";\r\n        });\r\n    });\r\n});\r\n<\/script>\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<div class=\"elementor-element elementor-element-4a1adb9 e-con-full e-flex e-con e-parent\" data-id=\"4a1adb9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-687f6d9 elementor-widget elementor-widget-spacer\" data-id=\"687f6d9\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18cdf20 e-flex e-con-boxed e-con e-child\" data-id=\"18cdf20\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2103a30 elementor-widget elementor-widget-html\" data-id=\"2103a30\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Elementor Ready About Section Block - Side-by-Side Overlapping Layout -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;600;700&display=swap');\r\n\r\n\/* Main Wrapper - Flexbox but breaking the grid *\/\r\n.wj-about-split-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 80vh;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    background: transparent;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 10px 20px;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* Background Depth Accent - Absolute *\/\r\n.wj-about-glow {\r\n    position: absolute;\r\n    top: 50%;\r\n    right: 10%;\r\n    width: 400px;\r\n    height: 400px;\r\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\r\n    transform: translateY(-50%);\r\n    z-index: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Left Column - Image Container *\/\r\n.wj-img-col {\r\n    position: relative;\r\n    width: 45%;\r\n    z-index: 1;\r\n    perspective: 1000px;\r\n}\r\n\r\n\/* Image Card - Playful Tilt *\/\r\n.wj-about-img-card {\r\n    position: relative;\r\n    width: 100%;\r\n    border-radius: 24px;\r\n    padding: 12px;\r\n    background: rgba(20, 20, 20, 0.4);\r\n    backdrop-filter: blur(10px);\r\n    -webkit-backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.05);\r\n    box-shadow: -20px 30px 60px rgba(0,0,0,0.5);\r\n    transform: rotate(-4deg) translateZ(0); \/* Playful starting position *\/\r\n    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease;\r\n}\r\n\r\n.wj-about-img-card:hover {\r\n    transform: rotate(0deg) scale(1.03) translateZ(30px);\r\n    border-color: rgba(212, 175, 55, 0.3); \/* Gold accent on hover *\/\r\n}\r\n\r\n.wj-about-img-card img {\r\n    width: 100%;\r\n    height: auto;\r\n    border-radius: 16px;\r\n    display: block;\r\n    filter: grayscale(80%) contrast(110%); \/* Raw, deadpan aesthetic *\/\r\n    transition: filter 0.5s ease;\r\n}\r\n\r\n.wj-about-img-card:hover img {\r\n    filter: grayscale(0%) contrast(100%);\r\n}\r\n\r\n\/* Right Column - Content Overlapping the Image *\/\r\n.wj-content-col {\r\n    position: relative;\r\n    width: 60%;\r\n    z-index: 3;\r\n    margin-left: -10%; \/* Negative margin for depth\/overlap *\/\r\n    margin-top: 80px; \/* Staggered vertically *\/\r\n}\r\n\r\n\/* Glassmorphism Content Box *\/\r\n.wj-about-glass-box {\r\n    padding: 60px 50px;\r\n    background: rgba(10, 10, 10, 0.7);\r\n    backdrop-filter: blur(30px);\r\n    -webkit-backdrop-filter: blur(30px);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 24px;\r\n    box-shadow: 0 40px 80px rgba(0,0,0,0.8);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center; \/* Center aligning content *\/\r\n    text-align: center; \/* Center text *\/\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: transform 0.4s ease;\r\n}\r\n\r\n.wj-about-glass-box:hover {\r\n    transform: translateY(-5px);\r\n}\r\n\r\n\/* Elegant Gold Accent Line inside the box *\/\r\n.wj-about-glass-box::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 100px;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, transparent, #D4AF37, transparent);\r\n}\r\n\r\n\/* Typography Center Aligned *\/\r\n.wj-about-title {\r\n    font-size: clamp(32px, 4vw, 48px);\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    margin: 0 0 24px 0;\r\n    line-height: 1.1;\r\n    letter-spacing: -0.03em;\r\n    text-transform: uppercase;\r\n    text-shadow: 0 5px 15px rgba(0,0,0,0.5);\r\n}\r\n\r\n.wj-about-title span {\r\n    color: #D4AF37; \/* Elegant Gold *\/\r\n    display: block; \/* Stacks the text *\/\r\n}\r\n\r\n.wj-about-desc {\r\n    color: rgba(255, 255, 255, 0.65);\r\n    font-size: 16px;\r\n    line-height: 1.7;\r\n    margin: 0 0 20px 0;\r\n    font-weight: 400;\r\n    max-width: 450px;\r\n}\r\n\r\n.wj-about-desc:last-child {\r\n    margin-bottom: 0;\r\n}\r\n\r\n.wj-about-desc strong {\r\n    color: #ffffff;\r\n    font-weight: 600;\r\n    border-bottom: 1px dashed rgba(212, 175, 55, 0.4);\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 992px) {\r\n    .wj-about-split-wrapper {\r\n        flex-direction: column;\r\n        padding: 60px 15px;\r\n    }\r\n    \r\n    .wj-img-col {\r\n        width: 90%;\r\n        max-width: 500px;\r\n    }\r\n    \r\n    .wj-content-col {\r\n        width: 95%;\r\n        max-width: 600px;\r\n        margin-left: 0;\r\n        margin-top: -60px; \/* Switch to vertical overlap *\/\r\n    }\r\n    \r\n    .wj-about-glass-box {\r\n        padding: 40px 25px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wj-about-split-wrapper\" id=\"about-section\">\r\n    \r\n    <!-- Background Depth Element -->\r\n    <div class=\"wj-about-glow\"><\/div>\r\n\r\n    <!-- Left Column: Image -->\r\n    <div class=\"wj-img-col\">\r\n        <div class=\"wj-about-img-card\">\r\n            <img decoding=\"async\" src=\"https:\/\/worldjackcup.xyz\/wp-content\/uploads\/2026\/05\/Asset-4.png\" alt=\"Worldjack Cup The Truth\">\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Right Column: Glass Content Box (Overlapping) -->\r\n    <div class=\"wj-content-col\">\r\n        <div class=\"wj-about-glass-box\">\r\n            <h2 class=\"wj-about-title\">\r\n                The Ugly Truth <br>\r\n                <span>Behind the Trophy.<\/span>\r\n            <\/h2>\r\n            \r\n            <p class=\"wj-about-desc\">\r\n                Let\u2019s be honest. The actual tournament is too polished. The haircuts never move, the interviews are scripted, and the players look like untouchable celebrities. <strong>$WORLDJACK<\/strong> is what football actually feels like.\r\n            <\/p>\r\n            \r\n            <p class=\"wj-about-desc\">\r\n                Strip away the multimillion-dollar ads. What\u2019s left? Just a bunch of incredibly tired guys carrying the absurd, crushing expectations of millions of people. This is the tournament of raw, deadpan reality.\r\n            <\/p>\r\n            \r\n            <p class=\"wj-about-desc\">\r\n                Every player on the pitch has that iconic, exhausted MS-Paint stare. The stakes are simple: lift the cup, or become the timeline\u2019s laughingstock for eternity.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\/\/ 3D Mousemove effect restricted to the image container\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const card = document.querySelector('.wj-about-img-card');\r\n    const col = document.querySelector('.wj-img-col');\r\n\r\n    col.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left - rect.width \/ 2;\r\n        const y = e.clientY - rect.top - rect.height \/ 2;\r\n        \r\n        \/\/ Gentle tilt logic\r\n        const tiltX = (y \/ rect.height) * -15; \r\n        const tiltY = (x \/ rect.width) * 15;\r\n        \r\n        card.style.transform = `rotate(0deg) perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale3d(1.03, 1.03, 1.03)`;\r\n    });\r\n\r\n    col.addEventListener('mouseleave', () => {\r\n        \/\/ Reset tilt on mouse leave to the playful starting rotation\r\n        card.style.transform = `rotate(-4deg) translateZ(0)`;\r\n    });\r\n});\r\n<\/script>\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<div class=\"elementor-element elementor-element-dd740a1 e-con-full e-flex e-con e-parent\" data-id=\"dd740a1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-715b3c9 e-con-full e-flex e-con e-child\" data-id=\"715b3c9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1b6308 elementor-widget elementor-widget-html\" data-id=\"b1b6308\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Elementor Ready Tokenomics Section Block -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;600;700&display=swap');\r\n\r\n\/* Main Wrapper - Transparent *\/\r\n.wj-tokenomics-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 80vh;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    background: transparent;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 100px 20px;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* Background Depth Accent *\/\r\n.wj-tokenomics-glow {\r\n    position: absolute;\r\n    bottom: -10%;\r\n    left: 50%;\r\n    width: 60vw;\r\n    height: 400px;\r\n    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.06) 0%, transparent 60%);\r\n    transform: translateX(-50%);\r\n    z-index: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Header Section *\/\r\n.wj-tkn-header {\r\n    position: relative;\r\n    z-index: 2;\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n}\r\n\r\n.wj-tkn-title {\r\n    font-size: clamp(36px, 5vw, 56px);\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    margin: 0;\r\n    line-height: 1.05;\r\n    letter-spacing: -0.04em;\r\n    text-transform: uppercase;\r\n    text-shadow: 0 10px 20px rgba(0,0,0,0.5);\r\n}\r\n\r\n.wj-tkn-title span {\r\n    color: #D4AF37;\r\n    display: block;\r\n    transform: translateX(30px); \/* Staggered typography *\/\r\n}\r\n\r\n\/* Cards Container - Breaking the grid with Flex and Overlaps *\/\r\n.wj-tkn-cards-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 30px;\r\n    position: relative;\r\n    z-index: 3;\r\n    width: 100%;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n\/* Individual Card Glassmorphism *\/\r\n.wj-tkn-card {\r\n    position: relative;\r\n    width: 320px;\r\n    padding: 40px 30px;\r\n    background: rgba(15, 15, 15, 0.4);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border: 1px solid rgba(255, 255, 255, 0.05);\r\n    border-radius: 24px;\r\n    box-shadow: 0 20px 50px rgba(0,0,0,0.4);\r\n    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    cursor: default;\r\n}\r\n\r\n\/* Playful Positioning & Staggering (No rigid grids) *\/\r\n.wj-tkn-card:nth-child(1) {\r\n    transform: translateY(20px) rotate(-3deg);\r\n    z-index: 2;\r\n}\r\n\r\n.wj-tkn-card:nth-child(2) {\r\n    background: rgba(10, 10, 10, 0.6);\r\n    border-color: rgba(212, 175, 55, 0.15); \/* Middle card gets more gold focus *\/\r\n    transform: translateY(-20px) rotate(1deg);\r\n    z-index: 3;\r\n    margin: 0 -20px; \/* Negative margin to overlap adjacent cards *\/\r\n}\r\n\r\n.wj-tkn-card:nth-child(3) {\r\n    transform: translateY(30px) rotate(4deg);\r\n    z-index: 1;\r\n}\r\n\r\n\/* Hover Effects *\/\r\n.wj-tkn-card:hover {\r\n    transform: translateY(-10px) rotate(0deg) scale(1.05);\r\n    border-color: rgba(212, 175, 55, 0.4);\r\n    background: rgba(20, 20, 20, 0.8);\r\n    z-index: 10;\r\n    box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.1);\r\n}\r\n\r\n\/* Card Content Typography *\/\r\n.wj-tkn-icon {\r\n    font-size: 40px;\r\n    margin-bottom: 20px;\r\n    color: #D4AF37;\r\n    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));\r\n}\r\n\r\n.wj-tkn-card-title {\r\n    font-size: 24px;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    margin: 0 0 15px 0;\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.wj-tkn-card-desc {\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    color: rgba(255, 255, 255, 0.6);\r\n    margin: 0;\r\n}\r\n\r\n\/* Elegant Gold Divider inside card *\/\r\n.wj-tkn-card-divider {\r\n    width: 40px;\r\n    height: 2px;\r\n    background: #D4AF37;\r\n    margin: 15px 0;\r\n    opacity: 0.5;\r\n    transition: width 0.4s ease;\r\n}\r\n\r\n.wj-tkn-card:hover .wj-tkn-card-divider {\r\n    width: 80px;\r\n    opacity: 1;\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 992px) {\r\n    .wj-tkn-cards-container {\r\n        flex-direction: column;\r\n        gap: 20px;\r\n    }\r\n    \r\n    .wj-tkn-title span {\r\n        transform: translateX(0); \/* Remove stagger on mobile *\/\r\n    }\r\n\r\n    \/* Reset playful offsets for smaller screens so it doesn't break layout *\/\r\n    .wj-tkn-card:nth-child(1),\r\n    .wj-tkn-card:nth-child(2),\r\n    .wj-tkn-card:nth-child(3) {\r\n        transform: translateY(0) rotate(0);\r\n        margin: 0;\r\n        width: 100%;\r\n        max-width: 350px;\r\n    }\r\n    \r\n    .wj-tkn-card:hover {\r\n        transform: translateY(-5px);\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wj-tokenomics-wrapper\" id=\"tokenomics-section\">\r\n    <!-- Depth Glow -->\r\n    <div class=\"wj-tokenomics-glow\"><\/div>\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"wj-tkn-header\">\r\n        <h2 class=\"wj-tkn-title\">\r\n            The Math Behind <br>\r\n            <span>The Cope.<\/span>\r\n        <\/h2>\r\n    <\/div>\r\n\r\n    <!-- Overlapping Cards Container -->\r\n    <div class=\"wj-tkn-cards-container\">\r\n        \r\n        <!-- Card 1 -->\r\n        <div class=\"wj-tkn-card\">\r\n            <div class=\"wj-tkn-icon\">\ud83d\udcca<\/div>\r\n            <h3 class=\"wj-tkn-card-title\">1 Billion Supply<\/h3>\r\n            <div class=\"wj-tkn-card-divider\"><\/div>\r\n            <p class=\"wj-tkn-card-desc\">Enough tokens to match the exact number of pointing Soyjaks in the stands. No minting, no inflation. Just pure, exhausted distribution.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Card 2 (Center Overlap) -->\r\n        <div class=\"wj-tkn-card\">\r\n            <div class=\"wj-tkn-icon\">\ud83d\udd25<\/div>\r\n            <h3 class=\"wj-tkn-card-title\">Burned Liquidity<\/h3>\r\n            <div class=\"wj-tkn-card-divider\"><\/div>\r\n            <p class=\"wj-tkn-card-desc\">The liquidity pool was burnt to a crisp, mirroring the captains' remaining will to live after 90 agonizing minutes on the pitch.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Card 3 -->\r\n        <div class=\"wj-tkn-card\">\r\n            <div class=\"wj-tkn-icon\">\u26a1<\/div>\r\n            <h3 class=\"wj-tkn-card-title\">Solana Chain<\/h3>\r\n            <div class=\"wj-tkn-card-divider\"><\/div>\r\n            <p class=\"wj-tkn-card-desc\">Fast, ruthless, and completely volatile. It perfectly simulates the terrifying heart rate of a manager in stoppage time.<\/p>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ 3D Parallax Tilt for Cards\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const cards = document.querySelectorAll('.wj-tkn-card');\r\n\r\n    cards.forEach(card => {\r\n        card.addEventListener('mousemove', (e) => {\r\n            \/\/ Only apply tilt if window is wider than tablet to prevent weird mobile behavior\r\n            if (window.innerWidth > 992) {\r\n                const rect = card.getBoundingClientRect();\r\n                const x = e.clientX - rect.left - rect.width \/ 2;\r\n                const y = e.clientY - rect.top - rect.height \/ 2;\r\n                \r\n                const tiltX = (y \/ rect.height) * -15; \r\n                const tiltY = (x \/ rect.width) * 15;\r\n                \r\n                card.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale3d(1.05, 1.05, 1.05)`;\r\n            }\r\n        });\r\n\r\n        card.addEventListener('mouseleave', () => {\r\n            if (window.innerWidth > 992) {\r\n                \/\/ Resetting to their initial playful staggered positions\r\n                if (card.matches(':nth-child(1)')) {\r\n                    card.style.transform = `translateY(20px) rotate(-3deg)`;\r\n                } else if (card.matches(':nth-child(2)')) {\r\n                    card.style.transform = `translateY(-20px) rotate(1deg)`;\r\n                } else if (card.matches(':nth-child(3)')) {\r\n                    card.style.transform = `translateY(30px) rotate(4deg)`;\r\n                }\r\n            }\r\n        });\r\n    });\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-77538f9 e-con-full e-flex e-con e-parent\" data-id=\"77538f9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-1cb11d8 e-flex e-con-boxed e-con e-child\" data-id=\"1cb11d8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1d4b1d elementor-widget elementor-widget-html\" data-id=\"a1d4b1d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Elementor Ready How To Buy Section Block -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;600;700&display=swap');\r\n\r\n\/* Main Wrapper - Transparent *\/\r\n.wj-htb-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 90vh;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    background: transparent;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px 20px;\r\n    z-index: 10;\r\n    max-width: 1000px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* Background Depth Overlay *\/\r\n.wj-htb-glow {\r\n    position: absolute;\r\n    top: 30%;\r\n    left: 40%;\r\n    width: 50vw;\r\n    height: 50vw;\r\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.04) 0%, transparent 60%);\r\n    z-index: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Header Styling *\/\r\n.wj-htb-header {\r\n    position: relative;\r\n    z-index: 2;\r\n    text-align: center;\r\n    margin-bottom: 80px;\r\n}\r\n\r\n.wj-htb-title {\r\n    font-size: clamp(36px, 6vw, 56px);\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    margin: 0;\r\n    line-height: 1.05;\r\n    letter-spacing: -0.04em;\r\n    text-transform: uppercase;\r\n    text-shadow: 0 10px 20px rgba(0,0,0,0.6);\r\n}\r\n\r\n.wj-htb-title span {\r\n    color: #D4AF37; \/* Elegant Gold *\/\r\n    display: block;\r\n    transform: translateX(-40px); \/* Staggered offset *\/\r\n}\r\n\r\n\/* Steps Container - Breaking the Grid *\/\r\n.wj-htb-steps {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    width: 100%;\r\n    position: relative;\r\n    z-index: 3;\r\n}\r\n\r\n\/* Individual Glassmorphism Step Card *\/\r\n.wj-htb-step-card {\r\n    position: relative;\r\n    width: 90%;\r\n    max-width: 650px;\r\n    padding: 35px 40px;\r\n    background: rgba(12, 12, 12, 0.5);\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n    border: 1px solid rgba(255, 255, 255, 0.05);\r\n    border-radius: 24px;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 25px;\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n}\r\n\r\n\/* Playful Overlapping & Staggering Layout *\/\r\n.wj-htb-step-card:nth-child(1) {\r\n    transform: translateX(-5%) rotate(-2deg);\r\n    z-index: 4;\r\n}\r\n\r\n.wj-htb-step-card:nth-child(2) {\r\n    transform: translateX(5%) rotate(1.5deg);\r\n    margin-top: -30px; \/* Negative margin for overlap *\/\r\n    background: rgba(18, 18, 18, 0.6);\r\n    border-color: rgba(212, 175, 55, 0.1); \/* Gold accent *\/\r\n    z-index: 5;\r\n}\r\n\r\n.wj-htb-step-card:nth-child(3) {\r\n    transform: translateX(-3%) rotate(-1deg);\r\n    margin-top: -30px;\r\n    z-index: 6;\r\n}\r\n\r\n.wj-htb-step-card:nth-child(4) {\r\n    transform: translateX(2%) rotate(2deg);\r\n    margin-top: -30px;\r\n    background: rgba(15, 15, 15, 0.7);\r\n    border-color: rgba(212, 175, 55, 0.2);\r\n    z-index: 7;\r\n}\r\n\r\n\/* Hover Effects *\/\r\n.wj-htb-step-card:hover {\r\n    transform: translateX(0) scale(1.02) rotate(0deg);\r\n    z-index: 10;\r\n    background: rgba(20, 20, 20, 0.8);\r\n    border-color: rgba(212, 175, 55, 0.4);\r\n    box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 15px rgba(212, 175, 55, 0.1);\r\n}\r\n\r\n\/* Step Numbers *\/\r\n.wj-htb-number {\r\n    font-size: 48px;\r\n    font-weight: 700;\r\n    color: transparent;\r\n    -webkit-text-stroke: 1px rgba(212, 175, 55, 0.6);\r\n    line-height: 0.8;\r\n    opacity: 0.8;\r\n}\r\n\r\n.wj-htb-step-card:hover .wj-htb-number {\r\n    color: #D4AF37;\r\n    -webkit-text-stroke: 0;\r\n    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);\r\n}\r\n\r\n\/* Step Content *\/\r\n.wj-htb-content h3 {\r\n    color: #ffffff;\r\n    font-size: 22px;\r\n    margin: 0 0 10px 0;\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.wj-htb-content p {\r\n    color: rgba(255, 255, 255, 0.6);\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n}\r\n\r\n.wj-htb-content strong {\r\n    color: #D4AF37;\r\n    font-weight: 600;\r\n}\r\n\r\n\/* Contract Address Section *\/\r\n.wj-htb-ca-box {\r\n    position: relative;\r\n    z-index: 8;\r\n    margin-top: 60px; \/* Space from overlapping cards *\/\r\n    display: flex;\r\n    align-items: center;\r\n    background: rgba(10, 10, 10, 0.6);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border: 1px solid rgba(212, 175, 55, 0.2);\r\n    border-radius: 100px;\r\n    padding: 8px 8px 8px 25px;\r\n    box-shadow: 0 15px 35px rgba(0,0,0,0.6);\r\n    width: 90%;\r\n    max-width: 650px;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.wj-htb-ca-box:hover {\r\n    border-color: rgba(212, 175, 55, 0.6);\r\n    background: rgba(15, 15, 15, 0.8);\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.wj-htb-ca-label {\r\n    color: #D4AF37;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    margin-right: 10px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n}\r\n\r\n.wj-htb-ca-string {\r\n    color: #ffffff;\r\n    font-size: 15px;\r\n    font-family: monospace;\r\n    flex-grow: 1;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    margin-right: 15px;\r\n    opacity: 0.9;\r\n}\r\n\r\n.wj-htb-copy-btn {\r\n    background: #D4AF37;\r\n    color: #050505;\r\n    border: none;\r\n    padding: 14px 28px;\r\n    border-radius: 50px;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    white-space: nowrap;\r\n}\r\n\r\n.wj-htb-copy-btn:hover {\r\n    background: #ffffff;\r\n    transform: scale(1.05);\r\n    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n    .wj-htb-title span {\r\n        transform: translateX(0);\r\n    }\r\n    \r\n    .wj-htb-step-card {\r\n        padding: 25px 20px;\r\n        gap: 15px;\r\n        transform: none !important; \/* Remove playful rotation on mobile for readability *\/\r\n        margin-top: 15px !important; \/* Remove negative overlaps *\/\r\n        width: 100%;\r\n    }\r\n    \r\n    .wj-htb-step-card:nth-child(1) { margin-top: 0 !important; }\r\n    \r\n    .wj-htb-number {\r\n        font-size: 36px;\r\n    }\r\n    \r\n    .wj-htb-ca-box {\r\n        flex-direction: column;\r\n        border-radius: 20px;\r\n        padding: 20px;\r\n        text-align: center;\r\n        gap: 15px;\r\n    }\r\n    \r\n    .wj-htb-ca-string {\r\n        margin-right: 0;\r\n        width: 100%;\r\n        text-align: center;\r\n    }\r\n    \r\n    .wj-htb-copy-btn {\r\n        width: 100%;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wj-htb-wrapper\" id=\"how-to-buy-section\">\r\n    <!-- Depth Background -->\r\n    <div class=\"wj-htb-glow\"><\/div>\r\n\r\n    <!-- Header -->\r\n    <div class=\"wj-htb-header\">\r\n        <h2 class=\"wj-htb-title\">\r\n            How to Secure <br>\r\n            <span>Your (Eye) Bags.<\/span>\r\n        <\/h2>\r\n    <\/div>\r\n\r\n    <!-- Staggered Overlapping Steps -->\r\n    <div class=\"wj-htb-steps\">\r\n        \r\n        <!-- Step 1 -->\r\n        <div class=\"wj-htb-step-card\">\r\n            <div class=\"wj-htb-number\">01<\/div>\r\n            <div class=\"wj-htb-content\">\r\n                <h3>Lace Up<\/h3>\r\n                <p>Download Phantom or Solflare wallet. Guard your seed phrase like you're defending a 1-0 lead in the 89th minute. Do not leak.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Step 2 -->\r\n        <div class=\"wj-htb-step-card\">\r\n            <div class=\"wj-htb-number\">02<\/div>\r\n            <div class=\"wj-htb-content\">\r\n                <h3>Warm Up<\/h3>\r\n                <p>Fund your wallet with <strong>SOL<\/strong>. You can\u2019t step onto the pitch if you don't have the stamina. Transfer from CEX to your shiny new wallet.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Step 3 -->\r\n        <div class=\"wj-htb-step-card\">\r\n            <div class=\"wj-htb-number\">03<\/div>\r\n            <div class=\"wj-htb-content\">\r\n                <h3>Take the Shot<\/h3>\r\n                <p>Connect to Pump Swap. Paste the $WORLDJACK contract address and hit swap. Try to keep your hands from shaking.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Step 4 -->\r\n        <div class=\"wj-htb-step-card\">\r\n            <div class=\"wj-htb-number\">04<\/div>\r\n            <div class=\"wj-htb-content\">\r\n                <h3>The Aftermath<\/h3>\r\n                <p>Sit back, stare blankly at the charts, and feel the collective stress of the entire locker room. You are one of us now.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Contract Address Box Full Display -->\r\n    <div class=\"wj-htb-ca-box\">\r\n        <span class=\"wj-htb-ca-label\">CA<\/span>\r\n        <span class=\"wj-htb-ca-string\" id=\"htb-ca-value\">WJck99XYZ123ABCdef456GHIjkl789MN0pqrSTUvwx<\/span>\r\n        <button class=\"wj-htb-copy-btn\" id=\"htb-copy-btn\">Copy Address<\/button>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const copyBtn = document.getElementById(\"htb-copy-btn\");\r\n    const caValueText = document.getElementById(\"htb-ca-value\").innerText;\r\n\r\n    copyBtn.addEventListener(\"click\", function() {\r\n        navigator.clipboard.writeText(caValueText).then(() => {\r\n            const originalText = copyBtn.innerText;\r\n            \r\n            copyBtn.innerText = \"Secured!\";\r\n            copyBtn.style.background = \"#ffffff\";\r\n            copyBtn.style.color = \"#000000\";\r\n\r\n            setTimeout(() => {\r\n                copyBtn.innerText = originalText;\r\n                copyBtn.style.background = \"\";\r\n                copyBtn.style.color = \"\";\r\n            }, 2000);\r\n        }).catch(err => {\r\n            console.error('Failed to copy CA: ', err);\r\n            copyBtn.innerText = \"Missed Penalty\";\r\n        });\r\n    });\r\n});\r\n<\/script>\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<div class=\"elementor-element elementor-element-e06b493 e-con-full e-flex e-con e-parent\" data-id=\"e06b493\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/worldjackcup.xyz\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/WORLDJACK-BG1.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-753c079 e-flex e-con-boxed e-con e-child\" data-id=\"753c079\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c735a3 elementor-widget elementor-widget-html\" data-id=\"0c735a3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Elementor Ready Join Community Section Block -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;600;700&display=swap');\r\n\r\n\/* Main Wrapper - Transparent *\/\r\n.wj-comm-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 70vh;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    background: transparent;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 50px 20px;\r\n    z-index: 10;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* Background Depth Overlay *\/\r\n.wj-comm-glow {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 80vw;\r\n    height: 80vw;\r\n    transform: translate(-50%, -50%);\r\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%);\r\n    z-index: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Glassmorphism Main Card *\/\r\n.wj-comm-card {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 800px;\r\n    padding: 40px 50px;\r\n    background: rgba(12, 12, 12, 0.6);\r\n    backdrop-filter: blur(25px);\r\n    -webkit-backdrop-filter: blur(25px);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 30px;\r\n    box-shadow: 0 10px 10px rgba(0,0,0,0.6);\r\n    text-align: center;\r\n    transform: rotate(1deg) translateZ(0); \/* Playful initial tilt *\/\r\n    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease;\r\n}\r\n\r\n.wj-comm-card:hover {\r\n    border-color: rgba(212, 175, 55, 0.3);\r\n}\r\n\r\n\/* Elegant Gold Accent Line Inside Card *\/\r\n.wj-comm-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -1px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 150px;\r\n    height: 3px;\r\n    background: linear-gradient(90deg, transparent, #D4AF37, transparent);\r\n    opacity: 0.8;\r\n}\r\n\r\n\/* Typography *\/\r\n.wj-comm-title {\r\n    font-size: clamp(36px, 6vw, 64px);\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    margin: 0 0 20px 0;\r\n    line-height: 1;\r\n    letter-spacing: -0.04em;\r\n    text-transform: uppercase;\r\n    text-shadow: 0 10px 20px rgba(0,0,0,0.5);\r\n}\r\n\r\n.wj-comm-title span {\r\n    color: #D4AF37;\r\n    display: block;\r\n    transform: translateX(20px); \/* Staggered typography *\/\r\n}\r\n\r\n.wj-comm-desc {\r\n    font-size: 18px;\r\n    color: rgba(255, 255, 255, 0.65);\r\n    line-height: 1.6;\r\n    margin: 0 auto 40px auto;\r\n    max-width: 850px;\r\n}\r\n\r\n\/* Social Buttons Container - Using Overlaps *\/\r\n.wj-comm-links {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    position: relative;\r\n    \/* Creating a fanned-out effect on hover of the container *\/\r\n}\r\n\r\n\/* Playful Social Links Layout *\/\r\n.wj-social-btn {\r\n    position: relative;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    padding: 16px 35px;\r\n    border-radius: 50px;\r\n    background: rgba(20, 20, 20, 0.8);\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    box-shadow: 0 10px 20px rgba(0,0,0,0.4);\r\n}\r\n\r\n\/* Staggering and Overlapping *\/\r\n.wj-social-btn.tg {\r\n    z-index: 3;\r\n    transform: rotate(-4deg);\r\n}\r\n\r\n.wj-social-btn.tw {\r\n    z-index: 2;\r\n    transform: rotate(0deg);\r\n    margin-left: -30px; \/* Deep overlap *\/\r\n    background: rgba(25, 25, 25, 0.9);\r\n}\r\n\r\n.wj-social-btn.dex {\r\n    z-index: 1;\r\n    transform: rotate(4deg);\r\n    margin-left: -30px; \/* Deep overlap *\/\r\n    background: rgba(15, 15, 15, 0.9);\r\n}\r\n\r\n\/* Interactive Fan Out Effect on Hover *\/\r\n.wj-comm-links:hover .wj-social-btn.tg {\r\n    transform: translateX(-20px) rotate(-6deg) translateY(-5px);\r\n}\r\n\r\n.wj-comm-links:hover .wj-social-btn.tw {\r\n    transform: translateY(-10px) rotate(0deg);\r\n    margin-left: 10px; \/* Remove overlap *\/\r\n    border-color: #D4AF37;\r\n    background: #D4AF37;\r\n    color: #000;\r\n    z-index: 5;\r\n    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);\r\n}\r\n\r\n.wj-comm-links:hover .wj-social-btn.dex {\r\n    transform: translateX(20px) rotate(6deg) translateY(-5px);\r\n    margin-left: 10px; \/* Remove overlap *\/\r\n}\r\n\r\n\/* Individual Button Hover overrides *\/\r\n.wj-social-btn:hover {\r\n    border-color: #D4AF37 !important;\r\n    background: #D4AF37 !important;\r\n    color: #000 !important;\r\n    z-index: 10 !important;\r\n    transform: scale(1.1) translateY(-10px) !important;\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n    .wj-comm-card {\r\n        padding: 50px 20px;\r\n        transform: rotate(0);\r\n    }\r\n    .wj-comm-title span {\r\n        transform: translateX(0);\r\n    }\r\n    .wj-comm-links {\r\n        flex-direction: column;\r\n        gap: 15px;\r\n    }\r\n    .wj-social-btn {\r\n        width: 100%;\r\n        margin-left: 0 !important;\r\n        transform: none !important;\r\n    }\r\n    .wj-comm-links:hover .wj-social-btn {\r\n        transform: none !important;\r\n        margin-left: 0 !important;\r\n    }\r\n    .wj-social-btn:hover {\r\n        transform: scale(1.02) !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wj-comm-wrapper\" id=\"community-section\">\r\n    <!-- Depth Background -->\r\n    <div class=\"wj-comm-glow\"><\/div>\r\n\r\n    <!-- Main Glass Card -->\r\n    <div class=\"wj-comm-card\">\r\n        <h2 class=\"wj-comm-title\">\r\n            Misery Loves <br>\r\n            <span>Company.<\/span>\r\n        <\/h2>\r\n        \r\n        <p class=\"wj-comm-desc\">\r\n            The stadium outside is packed with nervous frogs and stoic Chads holding their breath. You don't have to suffer through the 90 minutes alone. Welcome to the Locker Room. We share the memes, we share the cope, and we are all just trying to survive until the final whistle.\r\n        <\/p>\r\n\r\n        <!-- Overlapping Fanning Links -->\r\n        <div class=\"wj-comm-links\">\r\n            <a href=\"#\" class=\"wj-social-btn tg\">\r\n                Telegram\r\n            <\/a>\r\n            <a href=\"#\" class=\"wj-social-btn tw\">\r\n                X (Twitter)\r\n            <\/a>\r\n            <a href=\"#\" class=\"wj-social-btn dex\">\r\n                DexScreener\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ Playful 3D Parallax Tilt for the Community Card\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const card = document.querySelector('.wj-comm-card');\r\n    const wrapper = document.querySelector('.wj-comm-wrapper');\r\n\r\n    wrapper.addEventListener('mousemove', (e) => {\r\n        if (window.innerWidth > 768) {\r\n            const rect = card.getBoundingClientRect();\r\n            const x = e.clientX - rect.left - rect.width \/ 2;\r\n            const y = e.clientY - rect.top - rect.height \/ 2;\r\n            \r\n            \/\/ Subtle tilt\r\n            const tiltX = (y \/ rect.height) * -8; \r\n            const tiltY = (x \/ rect.width) * 8;\r\n            \r\n            card.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale3d(1.02, 1.02, 1.02)`;\r\n        }\r\n    });\r\n\r\n    wrapper.addEventListener('mouseleave', () => {\r\n        if (window.innerWidth > 768) {\r\n            \/\/ Reset to initial playful tilt\r\n            card.style.transform = `rotate(1deg) translateZ(0)`;\r\n        }\r\n    });\r\n});\r\n<\/script>\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<div class=\"elementor-element elementor-element-06bf504 e-flex e-con-boxed e-con e-parent\" data-id=\"06bf504\" 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-02269f2 elementor-widget elementor-widget-heading\" data-id=\"02269f2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">&copy 2026. Worldjack Cup. All Rights Reserved<\/h2>\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>Worldjack Cup Twitter Telegram The Beautiful Game is Exhausting. Welcome to the Worldjack Cup. No PR. No forced smiles. Just the greatest captains in the world running on pure anxiety, stubbornness, and the terrifying fear of becoming a meme. Enter the Pitch Read the Cope WJck99&#8230;[REPLACE_WITH_YOUR_SOLANA_CA]&#8230;pump Copy CA The Ugly Truth Behind the Trophy. Let\u2019s [&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:\/\/worldjackcup.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/worldjackcup.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/worldjackcup.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/worldjackcup.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/worldjackcup.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":13,"href":"https:\/\/worldjackcup.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/worldjackcup.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/worldjackcup.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}