/* =================================================
   MAIN SITE STYLES - includes/mainsite.css
   Crossover - Own the Chain. Reap the Rewards.
================================================= */

/* -------------------------------------------------
   BASIC LAYOUT & VIDEO
------------------------------------------------- */
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    overflow: hidden; 
}
body { 
    color: #fff; 
    font-family: Arial, sans-serif; 
}

video {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
    z-index: -1;
    object-fit: cover; 
    object-position: 50% center;
}

/* -------------------------------------------------
   NAVBAR
------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.5);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

/* LOGO (LARGE ONLY) */
.desktop-logo-link {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 150px;
    height: 150px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    animation: neonGlow 2s infinite alternate;
    overflow: hidden;
    padding: 0;
    z-index: 3;
}
.desktop-logo-link:hover { background: rgba(255, 0, 0, 0.2); }
.desktop-logo img { width: 120px; height: 120px; object-fit: contain; display: block; }

/* HAMBURGER (SMALL ONLY) */
.hamburger {
    display: none;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 90px;
    height: 90px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    animation: neonGlow 2s infinite alternate;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}
.hamburger:hover { background: rgba(255, 0, 0, 0.2); }
.hamburger img { width: 70px; height: 70px; object-fit: contain; display: block; }

/* NAV LIST */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.7);
    padding: 10px 30px;
    border-radius: 10px;
}
.nav-item { margin: 0 20px; }
.nav-item a, .nav-item .register-btn {
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid red;
    border-radius: 5px;
    transition: background .3s;
    cursor: pointer;
    background: none;
}
.nav-item a:hover, .nav-item .register-btn:hover { background: rgba(255,0,0,.3); }

/* -------------------------------------------------
   BLOG BUTTON – BELOW NAVBAR (DEFAULT)
------------------------------------------------- */
.blog-btn-wrapper {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 560px;
    z-index: 2;
    padding: 0 20px;
    box-sizing: border-box;
    pointer-events: none;
}
.blog-btn {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    animation: neonGlow 2s infinite alternate;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
}
.blog-btn:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.5);
}

/* -------------------------------------------------
   MESSAGE BOX (base)
------------------------------------------------- */
.message{
    background:rgba(0,0,0,.5); 
    padding:16px 18px; 
    border-radius:10px;
    text-align:center; 
    max-width:500px; 
    margin:0 auto;
}
.message h1{font-size:22px; margin:0 0 8px;}
.message p{font-size:15px; margin:0;}
.message ul{list-style:none; padding:0; margin:8px 0 0;}
.message li{margin-bottom:6px;}
.message a{color:#fff; text-decoration:none; transition:color .3s;}
.message a:hover{color:rgba(255,0,0,.7);}
.aboutus-highlight{font-weight:bold; color:#00d5ff;}

/* -------------------------------------------------
   TICKER BOX (base)
------------------------------------------------- */
.ticker-box{
    background:rgba(0,0,0,.5); 
    padding:10px 14px; 
    border-radius:10px;
    border:2px solid red; 
    animation:neonGlow 2s infinite alternate;
    font-size:12px; 
    line-height:1.4; 
    max-width:380px;
}
.ticker-line{
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    gap:10px; 
    margin-bottom:5px;
}
.token-name{font-weight:800; color:#EFFFF9; font-size:13px;}
.token-name-blue{color:#4EA1FF; font-weight:800; font-size:13px;}
@keyframes token-glow-pulse{
    0%,100%{text-shadow:0 0 5px rgba(78,161,255,.3);}
    50%{text-shadow:0 0 10px rgba(78,161,255,.6);}
}
.token-name-blue{animation:token-glow-pulse 2s ease-in-out infinite;}
.value{font-weight:800; transition:color .4s ease; font-size:13px;}
.price-up{color:#10B981 !important;}
.price-neutral{color:#FFF;}
.sep{color:rgba(255,255,255,0.3); font-weight:300;}
.sources-line{
    display:flex; 
    flex-wrap:wrap; 
    gap:4px; 
    justify-content:center;
    margin-bottom:5px;
}
.source-btn{
    padding:2px 7px; 
    border-radius:999px; 
    font-size:9px;
    font-weight:700; 
    text-transform:uppercase; 
    background:rgba(255,255,255,0.1);
    color:#DFFEF7; 
    cursor:pointer; 
    transition:all .2s;
    border:1px solid rgba(255,255,255,0.2); 
    min-width:42px; 
    text-align:center;
}
.source-btn.active{background:#10B981; color:#fff;}
.source-btn:hover{background:rgba(255,255,255,0.2);}
.view-line{
    display:flex; 
    flex-wrap:wrap; 
    gap:5px; 
    justify-content:center;
    font-size:9px;
}
.view-link{color:#8BF5E6; text-decoration:none;}
.view-link:hover{text-decoration:underline;}
.view-sep{color:rgba(255,255,255,0.3); margin:0 3px;}

/* Listings Button */
.exchanges-btn-wrapper{
    max-width:380px; 
    margin:0 auto;
}
.exchanges-btn{
    display:block; 
    width:100%; 
    padding:18px; 
    color:#fff; 
    font-size:20px;
    text-align:center; 
    background:rgba(0,0,0,.5); 
    border:none;
    border-radius:14px; 
    cursor:pointer; 
    animation:neonGlow 2s infinite alternate;
    transition:all .3s ease; 
    font-weight:600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.exchanges-btn:hover{
    background:rgba(255,0,0,.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.5);
}
@keyframes neonGlow{
    0%{box-shadow:0 0 25px #00d5ff,0 0 50px #00d5ff,0 0 90px #00d5ff;}
    100%{box-shadow:0 0 25px #8b5cf6,0 0 50px #8b5cf6,0 0 90px #8b5cf6;}
}

/* -------------------------------------------------
   SOCIAL MEDIA (base)
------------------------------------------------- */
.social-media{
    position:fixed; 
    bottom:10px; 
    left:0; 
    right:0; 
    display:flex;
    justify-content:center; 
    z-index:1; 
    gap:12px; 
    padding:0 5%; 
    box-sizing:border-box;
}
.social-media a{
    padding:8px; 
    background:rgba(0,0,0,.5);
    border-radius:5px; 
    transition:background .3s;
}
.social-media a:hover{background:rgba(255,0,0,.3);}
.social-media a img{
    width:24px; 
    height:auto; 
    box-shadow:0 0 10px #00d5ff;
}

/* =================================================
   1. MOBILE PORTRAIT – HAMBURGER + BLOG IN HEADER
================================================= */
@media (max-width: 768px) and (orientation: portrait) {
    .desktop-logo-link { display: none !important; }
    .hamburger { display: flex !important; left: 15px !important; }

    .nav-list {
        display: none !important; 
        flex-direction: column;
        background: rgba(0,0,0,.9); 
        position: absolute; 
        top: 110px; 
        left: 0;
        width: 100%; 
        padding: 10px 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
    .nav-list.active { display: flex !important; }

    video { object-position: 70% center; }

    .blog-btn-wrapper {
        top: 110px;
        max-width: 90%;
        padding: 0 15px;
    }
    .blog-btn {
        padding: 15px;
        font-size: 18px;
    }

    .bottom-container {
        position: fixed; 
        top: 170px; 
        bottom: 70px; 
        left: 50%; 
        transform: translateX(-50%);
        width: 90%; 
        max-width: 500px; 
        display: flex; 
        flex-direction: column;
        justify-content: flex-end; 
        gap: 10px; 
        z-index: 1;
    }

    .message, .ticker-box, .exchanges-btn-wrapper {
        width: 100%; 
        max-width: 500px; 
        margin: 0 auto;
        background: rgba(0,0,0,.5); 
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px); 
        text-align: center; 
        box-sizing: border-box;
    }

    .message { padding: 18px 20px; font-size: 17px; }
    .message h1 { font-size: 22px; }
    .message p { font-size: 17px; }

    .exchanges-btn-wrapper { width: 90%; }
    .exchanges-btn { padding: 14px; font-size: 18px; }

    .ticker-box { padding: 12px 14px; font-size: 14px; }
    .token-name, .value { font-size: 15px; }
    .source-btn { font-size: 11px; padding: 3px 8px; min-width: 46px; }
    .view-line { font-size: 11px; }
}

/* =================================================
   2. MOBILE LANDSCAPE – HAMBURGER + BLOG IN HEADER
================================================= */
@media (max-width: 768px) and (orientation: landscape) {
    .desktop-logo-link { display: none !important; }
    .hamburger { display: flex !important; left: 15px !important; }

    .nav-list {
        display: none !important; 
        flex-direction: column;
        background: rgba(0,0,0,.9); 
        position: absolute; 
        top: 110px; 
        left: 0;
        width: 100%; 
        padding: 10px 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
    .nav-list.active { display: flex !important; }

    .blog-btn-wrapper {
        top: 110px;
        max-width: 90%;
        padding: 0 15px;
    }
    .blog-btn {
        padding: 14px;
        font-size: 17px;
    }

    .bottom-container {
        position: fixed; 
        bottom: 55px; 
        left: 50%; 
        transform: translateX(-50%);
        width: 90%; 
        max-width: 800px; 
        display: flex; 
        flex-direction: column;
        align-items: center; 
        gap: 5px; 
        z-index: 1;
    }

    .message, .ticker-box, .exchanges-btn-wrapper {
        width: 100%; 
        max-width: 600px; 
        margin: 0 auto;
        background: rgba(0,0,0,.5); 
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px); 
        text-align: center; 
        box-sizing: border-box;
    }

    .message { width: 80%; padding: 14px 16px; margin-bottom: 5px; }
    .message h1 { font-size: 18px; }
    .message p { font-size: 14px; }

    .exchanges-btn-wrapper { width: 40%; }
    .ticker-box { width: 55%; max-width: 400px; padding: 10px 12px; font-size: 11px; }
    .ticker-line { gap: 6px; }
    .token-name, .value { font-size: 12px; }
    .source-btn { font-size: 8px; padding: 1px 5px; min-width: 36px; }
    .view-line { font-size: 8px; }
    .exchanges-btn { padding: 10px; font-size: 15px; }
}

/* =================================================
   3. TABLET PORTRAIT – HAMBURGER + BLOG IN HEADER
================================================= */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .desktop-logo-link { display: none !important; }
    .hamburger { display: flex !important; left: 15px !important; }

    .nav-list { 
        display: none !important; 
        flex-direction: column; 
        background: rgba(0,0,0,.9); 
        position: absolute; 
        top: 110px; 
        left: 0; 
        width: 100%; 
        padding: 10px 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
    .nav-list.active { display: flex !important; }

    .blog-btn-wrapper {
        top: 110px;
        max-width: 560px;
        padding: 0 15px;
    }
    .blog-btn {
        padding: 16px;
        font-size: 19px;
    }

    .bottom-container {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        z-index: 1;
        width: 90%;
        max-width: 560px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .message, .ticker-box, .exchanges-btn-wrapper {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        background: rgba(0,0,0,.5);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        text-align: center;
        box-sizing: border-box;
    }

    .message { padding: 20px 22px; font-size: 18px; }
    .message h1 { font-size: 26px; }
    .message p { font-size: 18px; }

    .ticker-box { padding: 14px 16px; font-size: 15px; }
    .token-name, .value { font-size: 16px; }
    .source-btn { font-size: 12px; padding: 4px 9px; min-width: 50px; }
    .view-line { font-size: 12px; }

    .exchanges-btn { padding: 15px; font-size: 19px; }
}

/* =================================================
   4. TABLET LANDSCAPE – HAMBURGER + BLOG IN HEADER
================================================= */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .desktop-logo-link { display: none !important; }
    .hamburger { display: flex !important; left: 15px !important; }

    .nav-list { 
        display: none !important; 
        flex-direction: column; 
        background: rgba(0,0,0,.9); 
        position: absolute; 
        top: 110px; 
        left: 0; 
        width: 100%; 
        padding: 10px 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
    .nav-list.active { display: flex !important; }

    .blog-btn-wrapper {
        top: 110px;
        max-width: 560px;
        padding: 0 15px;
    }
    .blog-btn {
        padding: 16px;
        font-size: 19px;
    }

    .bottom-container {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        z-index: 1;
        width: 90%;
        max-width: 560px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .message, .ticker-box, .exchanges-btn-wrapper {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        background: rgba(0,0,0,.5);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        text-align: center;
        box-sizing: border-box;
    }

    .message { padding: 18px 20px; font-size: 17px; }
    .message h1 { font-size: 24px; }
    .message p { font-size: 17px; }

    .ticker-box { padding: 13px 15px; font-size: 14px; }
    .token-name, .value { font-size: 15px; }
    .source-btn { font-size: 11px; padding: 3px 8px; min-width: 46px; }
    .view-line { font-size: 11px; }

    .exchanges-btn { padding: 14px; font-size: 18px; }
}

/* =================================================
   5. DESKTOP – NO HAMBURGER, BLOG BELOW NAV
================================================= */
@media (min-width: 1025px) {
    .desktop-logo-link { display: flex !important; }
    .hamburger { display: none !important; }
    .nav-list { display: flex !important; }

    .mobile-blog-in-header { display: none !important; }

    .mobile-featured-in-header { display: none !important; }

    .blog-btn-wrapper {
        top: 80px;
        max-width: 560px;
        padding: 0 20px;
    }
    .blog-btn {
        padding: 18px;
        font-size: 20px;
    }

    .bottom-container {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        z-index: 1;
        width: 100%;
        max-width: 580px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .message, .ticker-box, .exchanges-btn-wrapper {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        background: rgba(0,0,0,.5);
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        text-align: center;
        box-sizing: border-box;
    }

    .message { padding: 24px 26px; font-size: 19px; }
    .message h1 { font-size: 30px; }
    .message p { font-size: 19px; }

    .ticker-box { 
        padding: 18px 20px; 
        font-size: 16px; 
        border: 2px solid red; 
        animation: neonGlow 2s infinite alternate; 
    }
    .token-name, .value { font-size: 17px; }
    .source-btn { font-size: 13px; padding: 5px 11px; min-width: 58px; }
    .view-line { font-size: 13px; justify-content: center; gap: 6px; }

    .exchanges-btn { 
        padding: 18px; 
        font-size: 20px; 
        font-weight: 600; 
        border-radius: 14px; 
        animation: neonGlow 2s infinite alternate; 
    }
    .exchanges-btn:hover { 
        background: rgba(255,0,0,.3); 
        transform: translateY(-2px); 
    }
}

/* -------------------------------------------------
   BLOG AND FEATURED BUTTON IN HEADER – SHOWS WHEN HAMBURGER IS VISIBLE
------------------------------------------------- */
.mobile-blog-in-header {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    animation: neonGlow 2s infinite alternate;
    border: 2px solid transparent;
    z-index: 1000;
    transition: all 0.3s ease;
}
.mobile-blog-in-header:hover {
    background: rgba(255, 0, 0, 0.3);
    border-color: red;
    transform: translateY(-2px);
}
.mobile-featured-in-header {
    display: none;
    position: absolute;
    top: 15px;
    right: 100px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    animation: neonGlow 2s infinite alternate;
    border: 2px solid transparent;
    z-index: 1000;
    transition: all 0.3s ease;
}
.mobile-featured-in-header:hover {
    background: rgba(255, 0, 0, 0.3);
    border-color: red;
    transform: translateY(-2px);
}



/* SHOW BLOG BUTTON ON ALL SCREENS WHERE HAMBURGER IS VISIBLE */
@media (max-width: 1024px) {
    .hamburger {
        display: flex !important;
    }
    .mobile-blog-in-header {
        display: block !important;
    }
    .blog-btn-wrapper {
        display: none !important;
    }
    .mobile-featured-in-header {
        display: block !important;
    }
    .featured-btn-wrapper {
        display: none !important;
    }
}

/* DESKTOP: HIDE BLOG IN HEADER, SHOW BELOW */
@media (min-width: 1025px) {
    .mobile-blog-in-header {
        display: none !important;
    }
    .blog-btn-wrapper {
        display: block !important;
    }
    .mobile-featured-in-header {
        display: none !important;
    }
    .featured-btn-wrapper {
        display: block !important;
    }
}

/* -------------------------------------------------
   MODALS
------------------------------------------------- */
.modal{
    display:none;
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    overflow:auto;
}
.modal-content{
    background:rgba(0,0,0,.5);
    color:#fff;
    margin:5% auto;
    padding:20px;
    border:none;
    border-radius:10px;
    width:90%;
    max-width:500px;
    max-height:80vh;
    overflow-y:auto;
    position:relative;
    animation:slideIn .3s ease-out;
}
.close{
    position:absolute;
    top:10px;
    right:10px;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    border:2px solid red;
    border-radius:5px;
    padding:5px 10px;
    background:none;
    transition:background .3s;
}
.close:hover{background:rgba(255,0,0,.3);}
@keyframes slideIn{
    from{transform:translateY(-50px);opacity:0;}
    to{transform:translateY(0);opacity:1;}
}

/* -------------------------------------------------
   GRID & CARDS
------------------------------------------------- */
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:768px){.grid{grid-template-columns:repeat(4,1fr);}}
.price-down { color: #EF4444 !important; }

/* -------------------------------------------------
   NFT REGISTRATION MODAL FORM
------------------------------------------------- */
.modal-content h2 {
    margin-top: 0; 
    color: #fff; 
    text-align: center; 
    font-size: 20px;
}
.modal-content .form-group {
    width: 90%; 
    margin: 0 auto 16px auto;
}
.modal-content .form-group label {
    display: block; 
    color: #fff; 
    margin-bottom: 6px; 
    font-size: 14px; 
    text-align: left;
}
.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
    width: 100%; 
    max-width: 100%; 
    padding: 10px; 
    border: 1px solid #555;
    border-radius: 5px; 
    background: rgba(255, 255, 255, 0.1); 
    color: #fff;
    font-size: 14px; 
    box-sizing: border-box; 
    -webkit-appearance: none;
    -moz-appearance: none; 
    appearance: none;
}
.modal-content .form-group input::placeholder,
.modal-content .form-group textarea::placeholder { 
    color: #aaa; 
}
.required { color: #ff5555; }
.modal-content .form-group textarea { 
    min-height: 80px; 
    resize: vertical; 
}
.modal-content .submit-btn {
    width: 90%; 
    margin: 10px auto 0 auto; 
    display: block; 
    padding: 12px;
    background: #10B981; 
    color: white; 
    border: none; 
    border-radius: 5px;
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: background 0.3s;
}
.modal-content .submit-btn:hover { background: #059669; }
.modal-content .submit-btn:disabled { background: #666; cursor: not-allowed; }
#form-message {
    margin: 10px auto; 
    padding: 10px; 
    border-radius: 5px; 
    text-align: center;
    font-weight: 600; 
    width: 90%;
}
#form-message.success { background: rgba(16, 185, 129, 0.2); color: #10B981; }
#form-message.error { background: rgba(239, 68, 68, 0.2); color: #EF4444; }

/* SELECT DROPDOWN */
.modal-content .form-group select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; 
    background-position: right 10px center;
    background-size: 12px; 
    padding-right: 30px;
}
.modal-content .form-group select option { 
    background: #1a1a1a !important; 
    color: #fff !important; 
}
.modal-content .form-group select:focus,
.modal-content .form-group input:focus,
.modal-content .form-group textarea:focus {
    outline: none; 
    border-color: #10B981; 
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

/* -------------------------------------------------
   EXCHANGE LISTINGS MODAL
------------------------------------------------- */
.exchange-list { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    margin-top: 16px; 
}
.exchange-item {
    display: flex; 
    align-items: center; 
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 8px; 
    padding: 12px;
    transition: all 0.3s ease;
}
.exchange-item:hover { 
    background: rgba(255, 255, 255, 0.1); 
    border-color: rgba(16, 185, 129, 0.5); 
}
.exchange-item.coming-soon { 
    opacity: 0.6; 
    pointer-events: none; 
}
.exchange-logo { 
    width: 40px; 
    height: 40px; 
    object-fit: contain; 
    margin-right: 12px; 
    border-radius: 6px; 
}
.exchange-info { 
    flex: 1; 
    color: #fff; 
}
.exchange-info h3 { 
    margin: 0 0 4px 0; 
    font-size: 16px; 
    color: #EFFFF9; 
}
.exchange-info p { 
    margin: 0; 
    font-size: 13px; 
    color: #aaa; 
}
.exchange-link {
    display: inline-block; 
    padding: 6px 12px; 
    background: #10B981; 
    color: white;
    text-decoration: none; 
    border-radius: 5px; 
    font-size: 13px; 
    font-weight: 600;
    transition: background 0.3s;
}
.exchange-link:hover { background: #059669; }
.exchange-link.disabled { 
    background: #555; 
    color: #aaa; 
    cursor: not-allowed; 
    pointer-events: none; 
}
@media (max-width: 480px) {
    .exchange-item { padding: 10px; }
    .exchange-logo { width: 36px; height: 36px; }
    .exchange-info h3 { font-size: 15px; }
    .exchange-info p { font-size: 12px; }
}

/* -------------------------------------------------
   EXCHANGE MODAL – 8 SQUARE CARDS
------------------------------------------------- */
.wrap { 
    text-align: center; 
    padding: 10px; 
}
.wrap h1 { 
    font-size: 18px; 
    margin: 0 0 16px 0; 
    color: #EFFFF9; 
}
.grid {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px;
    max-width: 400px; 
    margin: 0 auto;
}
@media (min-width: 480px) { 
    .grid { grid-template-columns: repeat(4, 1fr); } 
}
.card {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    background: rgba(255, 255, 255, 0.15) !important; 
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px; 
    padding: 12px; 
    text-decoration: none; 
    color: #fff;
    transition: all 0.3s ease; 
    aspect-ratio: 1 / 1; 
    overflow: hidden;
}
.card:hover {
    background: rgba(255, 255, 255, 0.25) !important; 
    border-color: rgba(16, 185, 129, 0.7);
    transform: translateY(-4px); 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.card img {
    width: 60%; 
    height: 60%; 
    object-fit: contain; 
    margin-bottom: 8px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.card .label {
    font-size: 12px; 
    font-weight: 600; 
    color: #EFFFF9; 
    text-align: center;
}

/* -------------------------------------------------
   BLOG MODAL STYLES
------------------------------------------------- */
#blogModal .modal-content {
    max-width: 480px;
    text-align: center;
}
#blogModal h2 {
    margin: 0 0 20px;
    font-size: 22px;
    color: #EFFFF9;
}
.blog-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.blog-link {
    display: block;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.blog-link:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10B981;
    transform: translateY(-2px);
}
.blog-link.view-all {
    font-weight: 600;
    color: #8BF5E6;
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.15);
}

/* =================================================
   DEVICE-SPECIFIC OPTIMIZATIONS
================================================= */

/* IPHONE SE (375x667) */
@media only screen 
   and (device-width: 375px) 
   and (device-height: 667px) 
   and (-webkit-min-device-pixel-ratio: 2) 
   and (orientation: portrait) {
    html { font-size: 13px; }
    .message { padding: 12px 14px; max-width: 340px; }
    .message h1 { font-size: 18px; margin-bottom: 6px; }
    .message p { font-size: 13px; }
    .ticker-box { padding: 8px 10px; font-size: 11px; max-width: 340px; }
    .ticker-line { gap: 6px; }
    .token-name, .value { font-size: 12px; }
    .sep { font-size: 10px; }
    .source-btn { padding: 2px 5px; font-size: 8px; min-width: 36px; }
    .view-line, .view-link { font-size: 8px; }
    .exchanges-btn { padding: 12px; font-size: 16px; max-width: 340px; }
    .blog-btn { padding: 13px; font-size: 16px; max-width: 340px; }
    .mobile-blog-in-header { padding: 6px 12px; font-size: 13px; top: 12px; right: 12px; }
    .nav-list { padding: 8px 0; }
    .nav-item a, .nav-item .register-btn { padding: 8px 12px; font-size: 15px; }
    .social-media a img { width: 20px; }
    .bottom-container { gap: 8px; padding: 0 10px; }
}

/* IPHONE XR (414x896) */
@media only screen 
   and (device-width: 414px) 
   and (device-height: 896px) 
   and (-webkit-min-device-pixel-ratio: 2) 
   and (orientation: portrait) {
    html { font-size: 14px; }
    .message { padding: 14px 16px; max-width: 380px; }
    .message h1 { font-size: 20px; margin-bottom: 6px; }
    .message p { font-size: 14px; }
    .ticker-box { padding: 9px 12px; font-size: 11.5px; max-width: 380px; }
    .ticker-line { gap: 7px; }
    .token-name, .value { font-size: 13px; }
    .sep { font-size: 11px; }
    .source-btn { padding: 2px 6px; font-size: 9px; min-width: 40px; }
    .view-line, .view-link { font-size: 9px; }
    .exchanges-btn { padding: 13px; font-size: 17px; max-width: 380px; }
    .blog-btn { padding: 14px; font-size: 17px; max-width: 380px; }
    .mobile-blog-in-header { padding: 7px 14px; font-size: 14px; top: 13px; right: 13px; }
    .nav-list { padding: 9px 0; }
    .nav-item a, .nav-item .register-btn { padding: 9px 13px; font-size: 16px; }
    .social-media a img { width: 22px; }
    .bottom-container { gap: 9px; padding: 0 12px; }
}

/* IPHONE 12 PRO (390x844) */
@media only screen 
   and (device-width: 390px) 
   and (device-height: 844px) 
   and (-webkit-min-device-pixel-ratio: 3) 
   and (orientation: portrait) {
    html { font-size: 13.5px; }
    .message { padding: 13px 15px; max-width: 360px; }
    .message h1 { font-size: 19px; margin-bottom: 6px; }
    .message p { font-size: 13.5px; }
    .ticker-box { padding: 8px 11px; font-size: 11px; max-width: 360px; }
    .ticker-line { gap: 6px; }
    .token-name, .value { font-size: 12.5px; }
    .sep { font-size: 10.5px; }
    .source-btn { padding: 2px 5.5px; font-size: 8.5px; min-width: 38px; }
    .view-line, .view-link { font-size: 8.5px; }
    .exchanges-btn { padding: 12px; font-size: 16.5px; max-width: 360px; }
    .blog-btn { padding: 13px; font-size: 16.5px; max-width: 360px; }
    .mobile-blog-in-header { padding: 6.5px 13px; font-size: 13.5px; top: 12.5px; right: 12.5px; }
    .nav-list { padding: 8.5px 0; }
    .nav-item a, .nav-item .register-btn { padding: 8.5px 12.5px; font-size: 15.5px; }
    .social-media a img { width: 21px; }
    .bottom-container { gap: 8.5px; padding: 0 11px; }
}

/* IPHONE 14 PRO MAX (430x932) – PADDING INCREASED */
@media only screen 
   and (device-width: 430px) 
   and (device-height: 932px) 
   and (-webkit-min-device-pixel-ratio: 3) 
   and (orientation: portrait) {
    html { font-size: 14.5px; }
    .message { padding: 15px 17px; max-width: 395px; }
    .message h1 { font-size: 21px; margin-bottom: 7px; }
    .message p { font-size: 14.5px; line-height: 1.45; }
    .ticker-box { padding: 10px 13px; font-size: 12px; max-width: 395px; }
    .ticker-line { gap: 8px; }
    .token-name, .value { font-size: 13.5px; }
    .sep { font-size: 11.5px; }
    .source-btn { padding: 2.5px 7px; font-size: 9.5px; min-width: 42px; }
    .view-line, .view-link { font-size: 9.5px; }
    .exchanges-btn { padding: 14px; font-size: 18px; max-width: 395px; }
    .blog-btn { padding: 15px; font-size: 18px; max-width: 395px; }
    .mobile-blog-in-header { padding: 8px 16px; font-size: 15px; top: 14px; right: 14px; }
    .nav-list { padding: 10px 0; }
    .nav-item a, .nav-item .register-btn { padding: 10px 14px; font-size: 17px; }
    .social-media a img { width: 23px; }
    .bottom-container { gap: 10px; padding: 0 13px; }
    .wrap { padding: 20px; }
}

/* PIXEL 7 (412x915) */
@media only screen 
   and (device-width: 412px) 
   and (device-height: 915px) 
   and (-webkit-min-device-pixel-ratio: 2.6) 
   and (orientation: portrait) {
    html { font-size: 14px; }
    .message { padding: 14px 16px; max-width: 380px; }
    .message h1 { font-size: 20px; margin-bottom: 6px; }
    .message p { font-size: 14px; }
    .ticker-box { padding: 9px 12px; font-size: 11.5px; max-width: 380px; }
    .ticker-line { gap: 7px; }
    .token-name, .value { font-size: 13px; }
    .sep { font-size: 11px; }
    .source-btn { padding: 2px 6px; font-size: 9px; min-width: 40px; }
    .view-line, .view-link { font-size: 9px; }
    .exchanges-btn { padding: 13px; font-size: 17px; max-width: 380px; }
    .blog-btn { padding: 14px; font-size: 17px; max-width: 380px; }
    .mobile-blog-in-header { padding: 7px 14px; font-size: 14px; top: 13px; right: 13px; }
    .nav-list { padding: 9px 0; }
    .nav-item a, .nav-item .register-btn { padding: 9px 13px; font-size: 16px; }
    .social-media a img { width: 22px; }
    .bottom-container { gap: 9px; padding: 0 12px; }
}

/* SAMSUNG GALAXY S8+ (360x740) */
@media only screen 
   and (device-width: 360px) 
   and (device-height: 740px) 
   and (-webkit-min-device-pixel-ratio: 4) 
   and (orientation: portrait) {
    html { font-size: 12.5px; }
    .message { padding: 11px 13px; max-width: 330px; }
    .message h1 { font-size: 17px; margin-bottom: 5px; }
    .message p { font-size: 12.5px; }
    .ticker-box { padding: 7px 9px; font-size: 10.5px; max-width: 330px; }
    .ticker-line { gap: 5px; }
    .token-name, .value { font-size: 11.5px; }
    .sep { font-size: 10px; }
    .source-btn { padding: 1.5px 4.5px; font-size: 7.5px; min-width: 34px; }
    .view-line, .view-link { font-size: 7.5px; }
    .exchanges-btn { padding: 11px; font-size: 15.5px; max-width: 330px; }
    .blog-btn { padding: 12px; font-size: 15.5px; max-width: 330px; }
    .mobile-blog-in-header { padding: 5.5px 11px; font-size: 12.5px; top: 11.5px; right: 11.5px; }
    .nav-list { padding: 7px 0; }
    .nav-item a, .nav-item .register-btn { padding: 7px 11px; font-size: 14.5px; }
    .social-media a img { width: 19px; }
    .bottom-container { gap: 7px; padding: 0 9px; }
}

/* SAMSUNG GALAXY S20 ULTRA (412x915) */
@media only screen 
   and (device-width: 412px) 
   and (device-height: 915px) 
   and (-webkit-min-device-pixel-ratio: 3.5) 
   and (orientation: portrait) {
    html { font-size: 14.2px; }
    .message { padding: 14.5px 16.5px; max-width: 380px; }
    .message h1 { font-size: 20.5px; margin-bottom: 6.5px; }
    .message p { font-size: 14.2px; }
    .ticker-box { padding: 9.5px 12.5px; font-size: 11.8px; max-width: 380px; }
    .ticker-line { gap: 7.5px; }
    .token-name, .value { font-size: 13.2px; }
    .sep { font-size: 11.2px; }
    .source-btn { padding: 2.2px 6.5px; font-size: 9.2px; min-width: 41px; }
    .view-line, .view-link { font-size: 9.2px; }
    .exchanges-btn { padding: 13.5px; font-size: 17.5px; max-width: 380px; }
    .blog-btn { padding: 14.5px; font-size: 17.5px; max-width: 380px; }
    .mobile-blog-in-header { padding: 7.5px 15px; font-size: 14.5px; top: 13.5px; right: 13.5px; }
    .nav-list { padding: 9.5px 0; }
    .nav-item a, .nav-item .register-btn { padding: 9.5px 13.5px; font-size: 16.5px; }
    .social-media a img { width: 22.5px; }
    .bottom-container { gap: 9.5px; padding: 0 12.5px; }
}

/* GALAXY Z FOLD 5 (344x882) */
@media only screen 
   and (device-width: 344px) 
   and (device-height: 882px) 
   and (-webkit-min-device-pixel-ratio: 3) 
   and (orientation: portrait) {
    html { font-size: 12.8px; }
    .message { padding: 12px 14px; max-width: 315px; }
    .message h1 { font-size: 17.5px; margin-bottom: 5.5px; }
    .message p { font-size: 12.8px; }
    .ticker-box { padding: 7.5px 9.5px; font-size: 10.8px; max-width: 315px; }
    .ticker-line { gap: 5.5px; }
    .token-name, .value { font-size: 11.8px; }
    .sep { font-size: 10.3px; }
    .source-btn { padding: 1.8px 5px; font-size: 8px; min-width: 36px; }
    .view-line, .view-link { font-size: 8px; }
    .exchanges-btn { padding: 11.5px; font-size: 15.8px; max-width: 315px; }
    .blog-btn { padding: 12.5px; font-size: 15.8px; max-width: 315px; }
    .mobile-blog-in-header { padding: 6px 12px; font-size: 13px; top: 11.5px; right: 11.5px; }
    .nav-list { padding: 7.5px 0; }
    .nav-item a, .nav-item .register-btn { padding: 7.5px 11.5px; font-size: 15px; }
    .social-media a img { width: 20px; }
    .bottom-container { gap: 7.5px; padding: 0 10px; }
}

/* SAMSUNG GALAXY A51/71 (412x914) */
@media only screen 
   and (device-width: 412px) 
   and (device-height: 914px) 
   and (-webkit-min-device-pixel-ratio: 2.6) 
   and (orientation: portrait) {
    html { font-size: 14.1px; }
    .message { padding: 14px 16px; max-width: 380px; }
    .message h1 { font-size: 20.3px; margin-bottom: 6.3px; }
    .message p { font-size: 14.1px; }
    .ticker-box { padding: 9.3px 12.3px; font-size: 11.6px; max-width: 380px; }
    .ticker-line { gap: 7.3px; }
    .token-name, .value { font-size: 13.1px; }
    .sep { font-size: 11.1px; }
    .source-btn { padding: 2.1px 6.3px; font-size: 9.1px; min-width: 40.5px; }
    .view-line, .view-link { font-size: 9.1px; }
    .exchanges-btn { padding: 13.3px; font-size: 17.3px; max-width: 380px; }
    .blog-btn { padding: 14.3px; font-size: 17.3px; max-width: 380px; }
    .mobile-blog-in-header { padding: 7.3px 14.5px; font-size: 14.3px; top: 13.3px; right: 13.3px; }
    .nav-list { padding: 9.3px 0; }
    .nav-item a, .nav-item .register-btn { padding: 9.3px 13.3px; font-size: 16.3px; }
    .social-media a img { width: 22.3px; }
    .bottom-container { gap: 9.3px; padding: 0 12.3px; }
}

/* =================================================
   DESKTOP ONLY: BLOG & FEATURED BUTTONS BELOW NAVBAR (RIGHT-ALIGNED)
   HIDDEN ON MOBILE (<1025px)
================================================= */
.desktop-buttons-wrapper {
    display: none; /* Hidden by default */
    position: fixed;
    top: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
    align-items: flex-end;
}

.desktop-blog-btn,
.desktop-featured-btn {
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    animation: neonGlow 2s infinite alternate;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 160px;
    text-align: center;
}

.desktop-blog-btn:hover,
.desktop-featured-btn:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

/* SHOW ONLY ON DESKTOP */
@media (min-width: 1025px) {
    .desktop-buttons-wrapper {
        display: flex !important;
    }

    /* HIDE MOBILE HEADER BUTTONS ON DESKTOP */
    .mobile-blog-in-header,
    .mobile-featured-in-header,
    .blog-btn-wrapper {
        display: none !important;
    }
}

/* HIDE DESKTOP BUTTONS ON MOBILE */
@media (max-width: 1024px) {
    .desktop-buttons-wrapper {
        display: none !important;
    }
}

/* =================================================
   FEATURED IN CAROUSEL
================================================= */
.featured-modal-content {
    max-width: 520px;
    padding: 20px;
    text-align: center;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    text-decoration: none;
    color: #fff;
}

.carousel-slide img {
    width: 80%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    border-radius: 8px;
}

.carousel-caption {
    font-size: 16px;
    font-weight: 600;
    color: #EFFFF9;
    text-align: center;
}

/* Arrows */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(255,0,0,0.5);
    transform: translateY(-50%) scale(1.1);
}

/* Dots */
.carousel-dots {
    text-align: center;
    padding: 10px 0;
}

.carousel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: #10B981;
    transform: scale(1.3);
}

.carousel-dot:hover {
    background: #8BF5E6;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .carousel-slide img { width: 70%; max-width: 160px; }
    .carousel-caption { font-size: 14px; }
    .carousel-prev, .carousel-next { width: 36px; height: 36px; font-size: 18px; }
}