:root {

    --bg-dark: #050505;

    --accent-cyan: #22d3ee;

    --accent-green: #4ade80;

    --text-main: #e2e8f0;

    --text-dim: #64748b;

    --border-dim: rgba(255, 255, 255, 0.08);

}



* { box-sizing: border-box; }



html, body {

    width: 100%;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    position: relative;

    scroll-behavior: smooth;

    background-color: var(--bg-dark);

}



body.mndset-web {

    background-color: var(--bg-dark);

    color: var(--text-main);

    background-image: 

        linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);

    background-size: 50px 50px;

    font-family: 'Inter', sans-serif;

}



.mono { font-family: 'JetBrains Mono', monospace; }



/* --- NAVBAR --- */

.navbar {

    position: fixed;

    top: 0; width: 100%;

    z-index: 1000;

    padding: 25px 0;

    background: rgba(5, 5, 5, 0.4);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--border-dim);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.nav-scrolled {

    padding: 12px 0;

    background: rgba(5, 5, 5, 0.95);

    border-bottom: 1px solid var(--accent-cyan);

    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);

}



.nav-container {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    height: 90px; /* Forceert de hoogte voor uitlijning */
    padding: 0 60px; 
    max-width: 100%;
    box-sizing: border-box;
}




.brand-interface { display: flex; align-items: center; text-decoration: none; gap: 15px; flex-shrink: 0; }



.logo-wrapper {

    position: relative; 

    width: 45px; height: 45px;

    background: rgba(34, 211, 238, 0.1); 

    border: 1px solid var(--accent-cyan);

    border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden;

    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);

    transition: 0.5s ease;

}



.brand-interface:hover .logo-wrapper {

    box-shadow: 0 0 25px rgba(34, 211, 238, 0.6);

    transform: scale(1.05);

}



.neural-logo { width: 28px; filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.8)); transition: transform 0.5s ease; }



.logo-scanline {

    position: absolute; top: -100%; left: 0; width: 100%; height: 100%;

    background: linear-gradient(to bottom, transparent, rgba(34, 211, 238, 0.3), transparent);

    animation: scan-anim 3s infinite linear;

}



@keyframes scan-anim { 0% { top: -100%; } 100% { top: 100%; } }



.brand-main { font-weight: 800; font-size: 1.4rem; letter-spacing: -0.5px; color: #fff; line-height: 1; }

.brand-sub { color: var(--accent-cyan); font-weight: 300; }

.brand-tagline { font-size: 9px; color: var(--text-dim); letter-spacing: 2px; margin-top: 4px; text-transform: uppercase; }



.nav-system-meta {

    display: flex; gap: 20px; font-size: 10px;

    border-left: 1px solid rgba(255,255,255,0.1);

    padding-left: 20px; margin-left: 20px; flex-shrink: 0;

}



.nav-socials {

    display: flex; gap: 20px; margin-left: auto; 

    margin-right: 30px; padding-right: 30px;

    border-right: 1px solid var(--border-dim);

}



.nav-socials a {

    color: var(--text-dim); font-size: 16px;

    transition: 0.3s; display: flex; align-items: center; text-decoration: none;

}



.nav-socials a:hover {

    color: var(--accent-cyan);

    transform: translateY(-2px);

    filter: drop-shadow(0 0 8px var(--accent-cyan));

}



.nav-menu { 
    display: flex; 
    list-style: none; 
    gap: 35px; 
    align-items: center; 
    margin: 0; 
    padding: 0; 
    height: 100%;
}

.nav-link { 
    text-decoration: none; 
    color: var(--text-dim); 
    font-size: 11px; 
    letter-spacing: 1.5px; 
    transition: 0.3s; 
    display: flex; /* Maakt verticale uitlijning mogelijk */
    align-items: center;
    height: 100%;
}



.nav-link:hover { color: #fff; text-shadow: 0 0 8px var(--accent-cyan); }



/* --- BUTTON STYLES (GLOWING) --- */

.launch-btn {

    border: 1px solid var(--accent-cyan);

    color: var(--accent-cyan) !important;

    padding: 8px 18px; text-decoration: none; font-size: 11px;

    border-radius: 2px; transition: 0.3s;

    animation: pulse-glow 2s infinite;

}



.launch-btn:hover {

    background: rgba(34, 211, 238, 0.1);

    box-shadow: 0 0 15px var(--accent-cyan);

}



.btn-primary {

    background: var(--accent-cyan);

    color: #000 !important;

    padding: 16px 40px;

    text-decoration: none;

    font-family: 'JetBrains Mono';

    font-size: 12px;

    font-weight: 700;

    display: inline-block;

    min-width: 220px;

    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);

    transition: all 0.3s ease;

    border: none;

}



.btn-primary:hover {

    box-shadow: 0 0 35px rgba(34, 211, 238, 0.7);

    transform: translateY(-3px);

}



.btn-outline {

    border: 1px solid var(--text-dim);

    color: var(--text-main) !important;

    padding: 15px 35px;

    text-decoration: none;

    font-family: 'JetBrains Mono';

    font-size: 12px;

    display: inline-block;

    min-width: 220px;

    transition: all 0.3s ease;

    background: transparent;

}



.btn-outline:hover {

    border-color: var(--accent-cyan);

    color: var(--accent-cyan) !important;

    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);

    transform: translateY(-3px);

}



/* --- HERO SECTION --- */

.hero-section {

    position: relative;

    padding: 180px 0 100px;

    text-align: center;

    overflow: hidden;

    background: #000;

}



.hero-bg-image {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 140%;

    background: url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2000') center/cover no-repeat;

    opacity: 0.25;

    z-index: 1;

}



.hero-content { position: relative; z-index: 3; }



/* --- HERO BADGE & SCAN-LINE --- */

.hero-badge {

    display: inline-block;

    border: 1px solid var(--accent-cyan);

    padding: 5px 15px;

    color: var(--accent-cyan);

    font-size: 10px;

    margin-bottom: 30px;

    position: relative;

    overflow: hidden;

    background: rgba(34, 211, 238, 0.05);

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);

}



.scan-line {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background: var(--accent-cyan);

    opacity: 0.6;

    box-shadow: 0 0 10px var(--accent-cyan), 0 0 20px var(--accent-cyan);

    animation: scan-line-anim 3s linear infinite;

}



@keyframes scan-line-anim { 

    0% { top: -2px; opacity: 0; } 

    10% { opacity: 0.8; }

    90% { opacity: 0.8; }

    100% { top: 100%; opacity: 0; } 

}



h1 { font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; text-transform: uppercase; font-weight: 800; }

.cyan-text { color: var(--accent-cyan); text-shadow: 0 0 20px rgba(34, 211, 238, 0.4); }



.cta-group { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }



.section-wrapper { padding: 80px 0; border-bottom: 1px solid var(--border-dim); }



/* --- PROTOCOL --- */

.protocol-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }

.p-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }



.p-card {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid var(--border-dim);

    padding: 30px; border-radius: 4px; transition: 0.3s;

}



.p-card i {

    font-size: 28px; color: var(--accent-cyan);

    text-shadow: 0 0 10px rgba(34, 211, 238, 0.4);

    margin-bottom: 20px; display: block;

}



.p-card:hover { border-color: var(--accent-cyan); transform: translateY(-5px); background: rgba(34, 211, 238, 0.05); }



/* --- SECURITY SECTION STYLING --- */

.security-card {

    border: 1px solid var(--accent-green);

    background: rgba(74, 222, 128, 0.02);

    padding: 40px;

    border-radius: 4px;

    position: relative;

    overflow: hidden;

    transition: all 0.4s ease;

}



.security-card:hover {

    box-shadow: 0 0 30px rgba(74, 222, 128, 0.1);

    background: rgba(74, 222, 128, 0.04);

}



.security-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

    margin-top: 30px;

}



.security-item {

    padding: 20px;

    border-left: 2px solid var(--accent-green);

    background: rgba(74, 222, 128, 0.03);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.security-item:hover {

    background: rgba(74, 222, 128, 0.1);

    transform: translateX(8px);

    box-shadow: 0 0 20px rgba(74, 222, 128, 0.15);

}



.security-item .label {

    display: block;

    font-size: 9px;

    color: var(--text-dim);

    margin-bottom: 8px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}



.security-item .value {

    color: #fff;

    font-weight: 700;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 12px;

}



.security-item i {

    color: var(--accent-green);

    font-size: 16px;

    filter: drop-shadow(0 0 5px var(--accent-green));

}



.security-card .scan-line {

    background: var(--accent-green);

    box-shadow: 0 0 10px var(--accent-green);

}



.audit-footer {

    margin-top: 30px;

    font-size: 9px;

    opacity: 0.5;

    color: var(--text-main);

}



/* --- FAQ SECTION STYLING --- */

.faq-accordion { max-width: 900px; margin: 0 auto; }



.faq-item {

    margin-bottom: 15px;

    border: 1px solid var(--border-dim);

    background: rgba(255, 255, 255, 0.01);

    border-radius: 4px;

    overflow: hidden;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.faq-item:hover {

    border-color: rgba(34, 211, 238, 0.4);

    background: rgba(34, 211, 238, 0.02);

    box-shadow: 0 0 15px rgba(34, 211, 238, 0.05);

}



.faq-question {

    padding: 22px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 13px;

    user-select: none;

    color: var(--text-main);

}



.faq-num {

    color: var(--accent-cyan);

    margin-right: 20px;

    font-weight: 800;

    opacity: 0.7;

    text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);

}



.faq-icon {

    font-size: 12px;

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    opacity: 0.5;

    color: var(--accent-cyan);

}



.faq-item.faq-open {

    border-color: var(--accent-cyan);

    background: rgba(34, 211, 238, 0.04);

    box-shadow: 0 0 25px rgba(34, 211, 238, 0.1);

}



.faq-item.faq-open .faq-question { color: var(--accent-cyan); }

.faq-item.faq-open .faq-icon { transform: rotate(180deg); opacity: 1; filter: drop-shadow(0 0 5px var(--accent-cyan)); }



.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    background: rgba(34, 211, 238, 0.01);

}



.faq-answer-inner {

    padding: 15px 25px 30px 75px;

    color: var(--text-dim);

    font-size: 14px;

    line-height: 1.8;

    border-top: 1px solid rgba(34, 211, 238, 0.05);

}



/* --- THE ARCHITECT SECTION --- */

.architect-card {

    position: relative;

    background: rgba(255, 255, 255, 0.01) !important;

    border: 1px solid var(--border-dim) !important;

    backdrop-filter: blur(15px);

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden;

    z-index: 1;

}



.architect-card:hover {

    border-color: var(--accent-cyan) !important;

    box-shadow: 0 0 40px rgba(34, 211, 238, 0.15);

    transform: translateY(-5px);

}



.kyc-badge-container {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 20px;

    background: rgba(74, 222, 128, 0.05);

    border: 1px solid rgba(74, 222, 128, 0.2);

    border-radius: 30px;

    color: var(--accent-green);

    font-size: 11px;

    margin-bottom: 30px;

    text-transform: uppercase;

}



.kyc-pulse {

    width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; position: relative;

}



.kyc-pulse::after {

    content: ''; position: absolute; inset: 0; border-radius: 50%;

    background: var(--accent-green); animation: kyc-pulse-anim 2s infinite;

}



@keyframes kyc-pulse-anim { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }



.profile-socials a {

    color: var(--text-dim); font-size: 22px; transition: all 0.4s ease; text-decoration: none; margin: 0 12px;

}



.profile-socials a:hover {

    color: #fff !important;

    transform: translateY(-3px) scale(1.1);

    text-shadow: 0 0 10px var(--accent-cyan), 0 0 20px rgba(34, 211, 238, 0.6);

}



.glitch-text { position: relative; display: inline-block; }

.architect-card:hover .glitch-text { animation: text-glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; }



@keyframes text-glitch {

    0% { transform: translate(0); }

    20% { transform: translate(-1px, 1px); }

    40% { transform: translate(-1px, -1px); }

    60% { transform: translate(1px, 1px); }

    80% { transform: translate(1px, -1px); }

    100% { transform: translate(0); }

}



/* --- TERMINAL & ANIMATIONS --- */

.system-terminal {

    position: fixed; bottom: 0; left: 0; width: 100%;

    background: rgba(5, 5, 5, 0.9); border-top: 1px solid var(--border-dim);

    padding: 8px 20px; z-index: 999; font-size: 9px;

}



@keyframes pulse-glow {

    0% { box-shadow: 0 0 5px rgba(34, 211, 238, 0.2); }

    50% { box-shadow: 0 0 15px rgba(34, 211, 238, 0.5); }

    100% { box-shadow: 0 0 5px rgba(34, 211, 238, 0.2); }

}



@media (max-width: 1300px) {
    /* 1. Verberg wat niet past */
    .nav-socials, 
    .nav-system-meta, 
    .nav-mexc-uplink { 
        display: none !important; 
    }

    .nav-container { 
        padding: 0 25px;
        justify-content: space-between; /* Houdt logo links en hamburger rechts */
    }

    /* 2. Maak van het 'blokje' een hamburger-icoon */
    .menu-toggle { 
        display: flex !important; /* Flex zorgt dat streepjes onder elkaar staan */
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1100;
        margin-left: auto;
    }

    /* DIT IS WAT ER MISTE: De streepjes kleur en hoogte geven */
    .menu-toggle .bar {
        display: block !important;
        width: 25px;
        height: 2px;
        background-color: var(--accent-cyan) !important;
        box-shadow: 0 0 8px var(--accent-cyan);
    }

    /* 3. Het menu zelf (jouw code) */
    .nav-menu {
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 75%; 
        height: 100vh;
        background: rgba(5, 5, 5, 0.98); 
        backdrop-filter: blur(20px);
        flex-direction: column; 
        justify-content: center;
        transition: 0.5s; 
        z-index: 1000; 
        gap: 40px;
        display: flex !important; /* Zorg dat het menu een flex-container is */
    }

    /* Als je op de hamburger klikt en JS de class 'active' toevoegt */
    .nav-menu.active { 
        right: 0; 
    }

    h1 { font-size: 2.5rem !important; }
    .protocol-grid, .p-card-grid { grid-template-columns: 1fr; }
}
    .nav-menu.active { right: 0; }







.menu-toggle { 

    display: none; 

    cursor: pointer; 

    font-size: 22px; 

    color: #fff; 

    transition: 0.3s;

}



.menu-toggle:hover {

    color: var(--accent-cyan);

    text-shadow: 0 0 10px var(--accent-cyan);

}





/* --- SYSTEM TERMINAL STYLING --- */



.system-terminal {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background: rgba(5, 5, 5, 0.9) !important; /* Donkere semi-transparante achtergrond */

    backdrop-filter: blur(10px); /* Blur effect voor over de content */

    border-top: 1px solid var(--accent-cyan); /* Cyan lijn aan de bovenkant */

    padding: 10px 25px;

    z-index: 10000; /* Zorgt dat hij altijd bovenop ligt */

    height: 35px;

    display: flex;

    align-items: center;

    box-shadow: 0 -5px 20px rgba(34, 211, 238, 0.1);

}



#log-text {

    font-family: 'JetBrains Mono', monospace;

    font-size: 10px;

    color: var(--accent-cyan);

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: opacity 0.5s ease-in-out;

    display: inline-block;

    width: 100%;

}



/* Subtiele animatie om de terminal een 'active' gevoel te geven */

.system-terminal::before {

    content: '';

    width: 6px;

    height: 6px;

    background: var(--accent-cyan);

    border-radius: 50%;

    margin-right: 15px;

    display: inline-block;

    box-shadow: 0 0 8px var(--accent-cyan);

    animation: terminal-pulse 2s infinite;

}



@keyframes terminal-pulse {

    0% { opacity: 0.4; }

    50% { opacity: 1; }

    100% { opacity: 0.4; }

}



/* Ruimte maken onderaan de body zodat de terminal de content niet overlapt */

body {

    padding-bottom: 35px;

}



/* Verbergen op mobiel om schermruimte te besparen */

@media (max-width: 992px) {

    .system-terminal {

        display: none !important;

    }

    body {

        padding-bottom: 0;

    }

}



/* --- UTILITY SECTION STYLING --- */



.utility-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

}



.utility-card {

    border: 1px solid var(--border-dim);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.utility-card:hover {

    border-color: var(--accent-cyan);

    background: rgba(34, 211, 238, 0.03);

    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.1);

}



.utility-icon {

    font-size: 40px;

    color: var(--accent-cyan);

    margin-bottom: 10px;

    filter: drop-shadow(0 0 10px var(--accent-cyan));

}



.utility-list {

    list-style: none;

    padding: 0;

    margin-top: auto;

    font-size: 11px;

}



.utility-list li {

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text-dim);

}



.utility-list li i {

    font-size: 10px;

    color: var(--accent-cyan);

}



.utility-card h4 {

    font-size: 1.2rem;

    letter-spacing: 2px;

    margin: 0;

}



.utility-card p {

    font-size: 14px;

    line-height: 1.6;

    color: var(--text-dim);

}



/* --- UTILITY & SCREENSHOT OVERLAY STYLING --- */



/* Klikbare features in de grid */

.clickable-feature {

    cursor: pointer;

    position: relative;

    transition: all 0.3s ease;

}



.clickable-feature:hover {

    transform: translateY(-5px) scale(1.02);

    border-color: var(--accent-cyan);

    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.15);

}



/* De "[VIEW_INTERFACE]" tekst */

.view-screenshot {

    font-size: 9px;

    color: var(--accent-cyan);

    margin-top: auto;

    padding-top: 15px;

    opacity: 0.7;

    letter-spacing: 1px;

}



.clickable-feature:hover .view-screenshot {

    opacity: 1;

    text-shadow: 0 0 8px var(--accent-cyan);

}



/* --- THE OVERLAY (THE DARK BACKGROUND) --- */

/* --- SCREENSHOT OVERLAY ENHANCED --- */

.screenshot-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.92);

    backdrop-filter: blur(15px);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 10001;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

    padding: 20px;

}



.screenshot-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.overlay-content {

    width: 100%;

    max-width: 500px; /* Perfect voor de staande screenshots */

    position: relative;

    transform: translateY(30px);

    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.screenshot-overlay.active .overlay-content {

    transform: translateY(0);

}



.overlay-window-header {

    background: #0a0a0a;

    border: 1px solid var(--border-dim);

    border-bottom: none;

    padding: 12px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 10px;

    letter-spacing: 2px;

    border-radius: 8px 8px 0 0;

}



.image-frame {

    position: relative;

    border: 1px solid var(--border-dim);

    border-radius: 0 0 8px 8px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 20px rgba(34, 211, 238, 0.1);

}



#overlayImage {

    width: 100%;

    height: auto;

    max-height: 85vh; /* Zorgt dat het op elk scherm past */

    object-fit: contain;

    display: block;

}



.frame-scanline {

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, transparent, rgba(34, 211, 238, 0.05), transparent);

    background-size: 100% 4px;

    pointer-events: none;

    z-index: 2;

}



.close-btn {

    background: none;

    border: none;

    color: var(--text-dim);

    cursor: pointer;

    font-size: 16px;

    transition: 0.3s;

}



.close-btn:hover {

    color: var(--accent-cyan);

    transform: scale(1.2);

}



/* Hover effect op de kaarten zelf */

.clickable-feature:hover .view-screenshot {

    color: var(--accent-cyan);

    text-shadow: 0 0 10px var(--accent-cyan);

}



/* Specifieke hover effecten per kaart type */



/* Mining Card Hover */

.utility-card[data-screenshot*="mining"]:hover {

    border-color: var(--accent-cyan);

    background: rgba(34, 211, 238, 0.03);

    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.1);

}



/* AI Agents Card Hover */

.utility-card[data-screenshot*="ai_agents"]:hover {

    border-color: #a855f7;

    background: rgba(168, 85, 247, 0.03);

    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.1);

}



/* Burn Card Hover */

.utility-card[data-screenshot*="burn"]:hover {

    border-color: #f59e0b;

    background: rgba(245, 158, 11, 0.03);

    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.1);

}



/* Algemene icoon correctie */

.utility-icon {

    font-size: 40px;

    margin-bottom: 15px;

    transition: transform 0.3s ease;

}



.utility-card:hover .utility-icon {

    transform: scale(1.1);

}



/* --- TOKENOMICS & CA STYLING --- */



.ca-container {

    margin: 30px auto 0;

    max-width: 450px;

}



.ca-label {

    font-size: 9px;

    color: var(--text-dim);

    letter-spacing: 2px;

    display: block;

    margin-bottom: 10px;

}



.ca-box {

    background: rgba(34, 211, 238, 0.05);

    border: 1px solid var(--border-dim);

    padding: 12px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-radius: 4px;

    transition: 0.3s;

}



.ca-box:hover {

    border-color: var(--accent-cyan);

    box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);

}



.ca-box span {

    font-size: 12px;

    color: var(--text-main);

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}



.copy-ca-btn {

    background: transparent;

    border: none;

    color: var(--accent-cyan);

    cursor: pointer;

    font-size: 16px;

    margin-left: 15px;

}



/* Progress Bar Reset */

.neural-progress-bar {

    height: 16px;

    background: rgba(255,255,255,0.03);

    border-radius: 8px;

    display: flex;

    overflow: hidden;

    border: 1px solid var(--border-dim);

}



.progress-segment {

    height: 100%;

    transition: width 1s ease;

}



/* Grid layout */

.token-stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;

}



.dot-pattern {

    margin-top: 15px;

    opacity: 0.2;

    height: 10px;

    background-image: radial-gradient(var(--text-dim) 1px, transparent 1px);

    background-size: 4px 4px;

}



/* --- NEURAL EVENT CENTER STYLING --- */



/* --- MNDSET AI DROPDOWN STYLE --- */



/* Zorg dat het menu-item de referentie is */

.nav-menu .nav-item.dropdown {

    position: relative;

    display: flex;

    align-items: center;

}



/* De eigenlijke dropdown container */

.nav-menu .dropdown-menu {

    position: absolute;

    top: calc(100% + 15px); /* Iets onder de navbar */

    left: 50%;

    transform: translateX(-50%) translateY(10px);

    background: rgba(5, 5, 5, 0.95);

    border: 1px solid var(--border-dim);

    min-width: 180px;

    padding: 10px 0;

    list-style: none;

    opacity: 0;

    pointer-events: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px rgba(34, 211, 238, 0.1);

    z-index: 1000;

    border-radius: 2px;

    backdrop-filter: blur(10px);

}



/* De scanlijn bovenin de dropdown */

.nav-menu .dropdown-menu::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: var(--accent-cyan);

    box-shadow: 0 0 10px var(--accent-cyan);

}



/* Zichtbaar maken bij hover */

.nav-menu .nav-item.dropdown:hover .dropdown-menu {

    opacity: 1;

    pointer-events: auto;

    transform: translateX(-50%) translateY(0);

}



/* De links in de dropdown */

.nav-menu .dropdown-menu li {

    width: 100%;

}



.nav-menu .dropdown-menu li a {

    display: block;

    padding: 12px 20px;

    color: var(--text-dim) !important;

    font-size: 10px !important;

    text-decoration: none;

    letter-spacing: 2px;

    transition: all 0.3s;

    text-align: left;

    white-space: nowrap;

}



/* Hover effect voor dropdown items */

.nav-menu .dropdown-menu li a:hover {

    color: var(--accent-cyan) !important;

    background: rgba(34, 211, 238, 0.05);

    padding-left: 25px;

}



/* Het pijltje naast EVENTS */

.nav-link i {

    margin-left: 5px;

    transition: transform 0.3s;

}



.nav-item.dropdown:hover .nav-link i {

    transform: rotate(180deg);

    color: var(--accent-cyan);

}



/* Mobile Fix: Zorg dat hij op mobiel niet zweeft maar inklapt */

@media (max-width: 992px) {

    .nav-menu .dropdown-menu {

        position: static;

        transform: none;

        opacity: 1;

        pointer-events: auto;

        width: 100%;

        background: transparent;

        border: none;

        box-shadow: none;

        padding-left: 20px;

        display: none; /* Standaard uit op mobiel */

    }

    

    .nav-menu .nav-item.dropdown.active .dropdown-menu {

        display: block;

    }

}

/* Event Pagina Layout */

.event-hero {

    padding: 140px 0 80px;

    background: radial-gradient(circle at top, rgba(34,211,238,0.08) 0%, transparent 60%);

}



.timer-box {

    font-size: clamp(2rem, 8vw, 3.5rem);

    font-weight: 800;

    font-family: 'JetBrains Mono', monospace;

    color: var(--accent-cyan);

    text-shadow: 0 0 25px rgba(34,211,238,0.4);

    margin: 25px 0;

}



.mission-card {

    background: rgba(5, 5, 5, 0.6);

    backdrop-filter: blur(10px);

    border: 1px solid var(--border-dim);

    padding: clamp(20px, 5vw, 50px);

    border-radius: 4px;

    position: relative;

}



.mission-card::after {

    content: '';

    position: absolute;

    top: -1px;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);

}



.step-row {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

    align-items: flex-start;

}



.step-num {

    color: var(--accent-cyan);

    font-weight: 700;

    min-width: 20px;

}



.winner-badge {

    font-size: 9px;

    background: var(--accent-green);

    color: #000;

    padding: 2px 8px;

    display: inline-block;

    margin-bottom: 8px;

    font-weight: 800;

}



/* Hall of Fame Grid */

.winners-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

    margin-top: 40px;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }

}



/* Forceer de dropdown naar de voorgrond */

.nav-menu .dropdown-menu {

    z-index: 9999 !important;

    pointer-events: all !important;

}



/* Voorkom dat de main content de dropdown blokkeert */

main {

    position: relative;

    z-index: 1;

}



.navbar {

    z-index: 1000;

}



/* --- REFINED EVENT STYLING --- */

.event-layout-grid {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 30px;

    margin-top: 30px;

}



.protocol-box {

    background: rgba(34, 211, 238, 0.03);

    border: 1px solid rgba(34, 211, 238, 0.15);

    padding: 25px;

    border-radius: 4px;

}



.protocol-content {

    font-size: 12px;

    line-height: 1.7;

    color: var(--text-main);

}



/* Subtielere input velden */

.input-subtle {

    width: 100%;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid var(--border-dim);

    padding: 12px 15px;

    color: #fff;

    font-family: 'JetBrains Mono', monospace;

    font-size: 11px;

    outline: none;

    transition: 0.3s;

}



.input-subtle:focus {

    border-color: var(--accent-cyan);

    background: rgba(34, 211, 238, 0.05);

}



.mission-header {

    border-bottom: 1px solid var(--border-dim);

    padding-bottom: 20px;

    margin-bottom: 20px;

}



.reward-tag {

    font-size: 10px;

    color: var(--accent-green);

    border: 1px solid var(--accent-green);

    padding: 4px 10px;

    letter-spacing: 1px;

}



@media (max-width: 992px) {

    .event-layout-grid { grid-template-columns: 1fr; }

}



/* --- COMPACT NEURAL TIMER --- */

.timer-compact {

    font-family: 'JetBrains Mono', monospace;

    display: flex;

    justify-content: center;

    gap: 15px;

    margin: 10px 0;

}



.timer-unit {

    background: rgba(34, 211, 238, 0.05);

    border: 1px solid rgba(34, 211, 238, 0.2);

    padding: 5px 10px;

    border-radius: 2px;

    min-width: 60px;

}



.timer-val {

    display: block;

    font-size: 1.5rem;

    color: var(--accent-cyan);

    font-weight: 800;

}



.timer-label {

    display: block;

    font-size: 8px;

    color: var(--text-dim);

    text-transform: uppercase;

}



/* --- EVENT HEADER STYLE --- */

.event-header-banner {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto 20px;

    padding: 15px;

    background: linear-gradient(90deg, rgba(34,211,238,0.1) 0%, transparent 100%);

    border-left: 4px solid var(--accent-cyan);

    position: relative;

    overflow: hidden;

}



.event-header-banner::after {

    content: '';

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background: linear-gradient(transparent, rgba(34,211,238,0.05), transparent);

    animation: header-scan 4s linear infinite;

}



@keyframes header-scan {

    0% { transform: translateY(-100%); }

    100% { transform: translateY(100%); }

}



/* --- WYSIWYG RESET (voor Quill content) --- */

.protocol-content ul, .protocol-content ol {

    padding-left: 20px;

    margin-bottom: 15px;

}

.protocol-content strong {

    color: var(--accent-cyan);

}

.protocol-content p {

    margin-bottom: 10px;

}



@keyframes blink {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.3; }

}



.p-card[style*="border-style: dashed"] {

    background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(34,211,238,0.02) 100%);

    transition: all 0.3s ease;

}



.p-card[style*="border-style: dashed"]:hover {

    border-style: solid !important;

    border-color: rgba(34, 211, 238, 0.4) !important;

    transform: translateY(-2px);

}



/* Zorgt dat de inhoud uit de editor de juiste witruimte krijgt */

.protocol-content {

    color: var(--text-main);

    font-family: 'JetBrains Mono', monospace;

    font-size: 13px;

    line-height: 1.6;

}



/* Zorgt voor witruimte tussen paragrafen */

.protocol-content p {

    margin-bottom: 12px;

}



/* Zorgt dat lijstjes (bullets) netjes onder elkaar staan */

.protocol-content ul, 

.protocol-content ol {

    margin-bottom: 15px;

    padding-left: 20px;

    list-style-position: outside;

}



.protocol-content li {

    margin-bottom: 5px;

}



/* Styling voor dikgedrukte tekst uit de editor */

.protocol-content strong {

    color: var(--accent-cyan);

    font-weight: 800;

}



.protocol-content {

    /* DIT IS DE KEY: herkent enters uit de database zelfs zonder <br> tags */

    white-space: pre-line !important; 

    

    color: var(--text-main);

    font-family: 'JetBrains Mono', monospace;

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 20px;

    display: block;

}



/* Zorg dat de Quill-tags (als ze er wel zijn) ook goed werken */

.protocol-content p {

    margin: 0 0 10px 0;

}



/* --- NEURAL COLORS & ANIMATIONS --- */

.gradient-text-neural {

    background: linear-gradient(90deg, #ff00ff, #00f2ff, #7000ff);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-weight: 800;

}



.upcoming-card-neural {

    background: rgba(15, 10, 20, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.05);

    padding: 30px;

    position: relative;

    overflow: hidden;

    transition: all 0.5s ease;

    backdrop-filter: blur(15px);

    border-radius: 4px;

}



/* Glow Variants */

.glow-magenta:hover { border-color: #ff00ff; box-shadow: 0 0 30px rgba(255, 0, 255, 0.2); }

.glow-magenta .date-text, .glow-magenta .mission-title { color: #ff00ff; }



.glow-cyan:hover { border-color: #00f2ff; box-shadow: 0 0 30px rgba(0, 242, 255, 0.2); }

.glow-cyan .date-text, .glow-cyan .mission-title { color: #00f2ff; }



.glow-purple:hover { border-color: #7000ff; box-shadow: 0 0 30px rgba(112, 0, 255, 0.2); }

.glow-purple .date-text, .glow-purple .mission-title { color: #7000ff; }



/* Inhoud styling */

.upcoming-content-styled {

    font-size: 11px;

    color: #ccc;

    line-height: 1.6;

    white-space: pre-line;

    max-height: 100px;

    overflow: hidden;

    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);

    margin-bottom: 20px;

}



.encrypt-badge {

    font-size: 8px;

    background: rgba(255, 255, 255, 0.05);

    padding: 2px 8px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;

    letter-spacing: 1px;

}



.access-status {

    font-size: 9px;

    color: #ff4444;

    letter-spacing: 1px;

    display: block;

    margin-bottom: 10px;

}



/* Progress bar effect onderin */

.progress-mini {

    height: 2px;

    width: 100%;

    background: rgba(255,255,255,0.05);

}

.progress-mini-bar {

    height: 100%;

    width: 35%;

    background: currentColor;

    animation: loading-bar 3s infinite alternate;

}



@keyframes loading-bar {

    0% { width: 10%; }

    100% { width: 60%; }

}



/* Scanline effect over de kaart */

.card-scanline {

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.03), transparent);

    background-size: 100% 4px;

    pointer-events: none;

    animation: scanline-scroll 10s linear infinite;

}



@keyframes scanline-scroll {

    0% { background-position: 0 0; }

    100% { background-position: 0 100%; }

}



/* --- HALL OF FAME V2 REFINED --- */



/* Glitch Effect voor de titel */

.glitch-text-simple {

    font-size: 1.8rem;

    letter-spacing: 8px;

    color: #fff;

    position: relative;

    animation: glitch-skew 4s infinite linear alternate-reverse;

}



@keyframes glitch-skew {

    0%, 100% { transform: skew(0deg); text-shadow: 2px 0 var(--accent-green); }

    20% { transform: skew(-1deg); text-shadow: -2px 0 #ff00ff; }

    40% { transform: skew(1deg); }

}



/* Podium Layout */

.podium-layout {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    gap: 15px;

    padding: 0 20px 20px;

    margin-top: 20px;

}



/* De Winnaar Kaart */

.winner-card-neural {

    background: #0a0a0a;

    border: 1px solid rgba(74, 222, 128, 0.2);

    padding: 15px;

    position: relative;

    z-index: 2;

    transition: all 0.3s ease;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

}



.winner-card-neural:hover {

    border-color: var(--accent-green);

    transform: translateY(-5px);

    box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);

}



/* Hoogte verschillen */

.rank-1 .winner-card-neural { border-color: #ffd700; margin-bottom: 20px; }

.rank-2 .winner-card-neural { border-color: #c0c0c0; }

.rank-3 .winner-card-neural { border-color: #cd7f32; }



/* Rank Badge Neon */

.rank-badge-neon {

    position: absolute;

    top: -10px; left: 10px;

    background: #000;

    border: 1px solid currentColor;

    padding: 2px 8px;

    font-size: 10px;

    font-family: monospace;

    color: inherit; /* Neemt kleur van rank over */

}



.rank-1 { color: #ffd700; }

.rank-2 { color: #c0c0c0; }

.rank-3 { color: #cd7f32; }



/* Inhoud van de kaart */

.handle-text { color: #fff; font-weight: bold; font-size: 13px; display: block; }

.reward-val { color: var(--accent-green); font-size: 10px; font-weight: 800; display: block; margin-top: 2px; }



.winner-content {

    font-size: 10px;

    color: #888;

    margin: 12px 0;

    line-height: 1.4;

    min-height: 42px;

}



.mission-origin {

    font-size: 8px;

    color: #444;

    text-transform: uppercase;

}



/* Het Voetstuk (Slank en geanimeerd) */

.podium-pillar-slim {

    width: 100%;

    height: 10px;

    background: var(--accent-green);

    opacity: 0.3;

    filter: blur(4px);

    animation: pillar-glow 2s infinite alternate;

}



@keyframes pillar-glow {

    from { opacity: 0.1; box-shadow: 0 0 5px var(--accent-green); }

    to { opacity: 0.5; box-shadow: 0 0 20px var(--accent-green); }

}



/* Rest-sectie grid */

.mini-winner-uplink {

    background: rgba(255,255,255,0.02);

    border: 1px solid rgba(255,255,255,0.05);

    padding: 8px 12px;

    display: flex;

    justify-content: space-between;

    font-size: 10px;

}



/* --- NEURAL SIDEBAR MOBILE --- */

#mobile-menu {

    cursor: pointer;

    display: none; /* Alleen tonen op mobiel via media query */

    flex-direction: column;

    gap: 5px;

    z-index: 1001;

    /* Wijziging: Iets van de kant af voor betere balans */

    margin-right: 15px; 

    padding: 10px 5px;

}



#mobile-menu .bar {

    width: 25px;

    height: 2px;

    background-color: var(--accent-cyan);

    transition: 0.3s;

}



.nav-sidebar {

    position: fixed;

    top: 0;

    right: -300px; /* Start buiten beeld */

    width: 280px;

    height: 100vh;

    background: rgba(5, 5, 5, 0.95);

    backdrop-filter: blur(15px);

    border-left: 1px solid rgba(34, 211, 238, 0.2);

    z-index: 2000;

    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    display: flex;

    flex-direction: column;

    padding: 30px 20px;

}



.nav-sidebar.active {

    right: 0;

}



.sidebar-overlay {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0, 0, 0, 0.7);

    display: none;

    z-index: 1999;

}



.sidebar-overlay.active {

    display: block;

}



/* Header & Close */

.sidebar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}



.close-sidebar {

    font-size: 30px;

    color: #fff;

    cursor: pointer;

}



/* Ad Banner inside Menu */

.sidebar-ad {

    background: linear-gradient(45deg, rgba(34, 211, 238, 0.1), rgba(255, 0, 255, 0.05));

    border: 1px solid rgba(34, 211, 238, 0.2);

    padding: 15px;

    margin-bottom: 25px;

    border-radius: 4px;

}



.ad-content span { display: block; font-size: 10px; color: var(--accent-cyan); }

.ad-content small { font-size: 9px; color: #888; }



/* Menu Items met Icons */

.nav-menu-sidebar {

    list-style: none;

    padding: 0;

}



.nav-menu-sidebar li {

    margin-bottom: 20px;

}



.nav-menu-sidebar a {

    text-decoration: none;

    color: #fff;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 15px;

    transition: 0.3s;

}



.nav-menu-sidebar a i {

    color: var(--accent-cyan);

    width: 20px;

    text-align: center;

}



.nav-menu-sidebar a:hover {

    color: var(--accent-cyan);

    padding-left: 10px;

}



.launch-btn-sidebar {

    background: var(--accent-cyan);

    color: #000 !important;

    padding: 12px;

    text-align: center;

    font-weight: bold;

    border-radius: 2px;

    margin-top: 20px;

}



/* Media Query voor de toggle */

@media (max-width: 992px) {

    #mobile-menu { 

        display: flex; 

    }

    

    .nav-menu { 

        display: none; 

    } /* Verberg standaard menu */



    /* Wijziging: Container padding aanpassen zodat de menu-toggle niet tegen de schermrand plakt */

    .nav-container {

        padding-right: 15px;

        padding-left: 15px;

    }

}



/* --- UTILITY OVERLAY OPTIMIZATION (Gecorrigeerd) --- */

.screenshot-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.95);

    backdrop-filter: blur(15px);

    display: none; 

    justify-content: center;

    /* FIX 1: Begin bovenaan in plaats van in het midden */

    align-items: flex-start; 

    /* FIX 2: Ruimte voor de header (140px + 20px marge) */

    padding-top: 160px; 

    /* FIX 3: Forceer boven de navbar uit */

    z-index: 999999 !important; 

    opacity: 0;

    transition: opacity 0.3s ease;

    /* Zorg dat je kunt scrollen als de foto groot is op mobiel */

    overflow-y: auto; 

}



.screenshot-overlay.active {

    display: flex;

    opacity: 1;

}



.overlay-content {

    width: 80%;

    max-width: 500px; /* Optimalisatie voor staande mobiele schermen */

    position: relative;

    /* Kleine animatie voor het 'poppen' effect */

    animation: neuralPop 0.3s ease-out;

}



@keyframes neuralPop {

    from { transform: scale(0.95); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}



.image-frame {

    border: 1px solid rgba(34, 211, 238, 0.3);

    background: #000;

    padding: 5px;

    position: relative;

    box-shadow: 0 0 30px rgba(0,0,0,0.5);

}



#overlayImage {

    width: 100%;

    height: auto;

    display: block;

}



/* Mobiele optimalisatie */

@media (max-width: 768px) {

    .screenshot-overlay {

        /* Iets minder padding op mobiel omdat de header daar vaak kleiner is of mee-scrolt */

        padding-top: 120px; 

    }



    .overlay-content {

        width: 92%;

    }

    

    .overlay-window-header {

        font-size: 10px;

        padding: 10px;

    }

}



/* --- MEXC SIDEBAR BANNER --- */

.mexc-uplink {

    background: rgba(34, 211, 238, 0.03);

    border: 1px solid rgba(34, 211, 238, 0.2);

    position: relative;

    padding: 15px !important;

    margin-bottom: 30px;

    transition: 0.3s;

}



.mexc-uplink:hover {

    border-color: var(--accent-cyan);

    background: rgba(34, 211, 238, 0.08);

}



.mexc-logo {

    width: 18px;

    height: 18px;

    margin-right: 8px;

    filter: drop-shadow(0 0 5px var(--accent-cyan));

}



.ad-header {

    margin-bottom: 12px;

    display: flex;

    justify-content: space-between;

}



.ad-brand span {

    font-size: 9px;

    letter-spacing: 1px;

    color: var(--text-dim);

}



/* Info Trigger & Neural Popup */

.info-trigger {

    position: relative;

    color: var(--accent-cyan);

    cursor: pointer;

    font-size: 14px;

}



.neural-popup {

    position: absolute;

    top: 25px;

    right: 0;

    width: 220px;

    background: rgba(5, 5, 5, 0.98);

    border: 1px solid var(--accent-cyan);

    padding: 15px;

    font-size: 9px;

    line-height: 1.4;

    color: #ccc;

    z-index: 2100;

    backdrop-filter: blur(15px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.8);

    display: none; /* Tonen via JS */

    animation: popupFade 0.3s ease-out;

}



.popup-header {

    color: var(--accent-cyan);

    margin-bottom: 8px;

    border-bottom: 1px solid rgba(34, 211, 238, 0.2);

    padding-bottom: 5px;

}



/* Ad Body Content */

.payout-text {

    font-size: 11px;

    color: #fff;

    margin-bottom: 8px;

    line-height: 1.3;

}



.bonus-tag {

    background: rgba(74, 222, 128, 0.1);

    border: 1px solid var(--accent-green);

    color: var(--accent-green);

    font-size: 10px;

    padding: 4px 8px;

    display: inline-block;

    margin-bottom: 12px;

}



.ad-footer {

    font-size: 9px;

    color: var(--accent-cyan);

    text-align: right;

    opacity: 0.7;

}



@keyframes popupFade {

    from { opacity: 0; transform: translateY(5px); }

    to { opacity: 1; transform: translateY(0); }

}



/* Zorg dat de popup op mobiel niet buiten het menu valt */

@media (max-width: 480px) {

    .neural-popup {

        right: -10px;

        width: 180px;

    }

}



/* --- MEXC DESKTOP HEADER REFINED --- */

..nav-mexc-uplink {
    margin-left: 25px;
    padding-left: 25px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    height: 40px; /* Matcht de visuele hoogte van andere meta-data */
}



.mexc-header-link {

    display: flex;

    align-items: center;

    text-decoration: none;

    gap: 15px; /* Meer ruimte tussen logo en tekst */

    white-space: nowrap;

}



.mexc-icon-small {

    /* Logo flink groter gemaakt voor impact */

    width: 70px; 

    height: 70px;

    filter: drop-shadow(0 0 8px var(--accent-cyan));

    transition: all 0.3s ease;

}



.mexc-text-wrap {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.mexc-title {

    font-size: 10px;

    color: var(--text-dim);

    letter-spacing: 1.5px;

    margin-bottom: 2px;

}



.mexc-bonus {

    font-size: 13px; /* Groter en duidelijker */

    font-weight: 800;

    color: var(--accent-cyan);

    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3);

}



/* --- INTEL TOOLTIP FIX --- */
.mexc-intel-tooltip {
    position: absolute;
    /* 1. Plaats hem exact onder de link */
    top: 100%; 
    left: 0; 
    
    /* 2. Ruimte boven de box */
    margin-top: -5px;

    /* 3. Afmetingen */
    width: 350px; 
    background: rgba(5, 5, 5, 0.98);
    border: 1px solid var(--accent-cyan);
    padding: 15px;
    font-size: 10px;
    line-height: 1.5;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 0 10px rgba(34, 211, 238, 0.1);
    z-index: 10002;
    
    /* 4. Tekstbehandeling */
    white-space: normal; 
    word-wrap: break-word;
}

/* Zorg dat de container de referentie is */
.nav-mexc-uplink {
    position: relative; /* CRUCIAAL: de tooltip lijnt uit op deze box */
    display: flex;
    align-items: center;
}


.nav-mexc-uplink:hover .mexc-intel-tooltip {

    opacity: 1;

    transform: translateY(0);

}



.nav-mexc-uplink:hover .mexc-icon-small {

    transform: scale(1.15);

    filter: drop-shadow(0 0 15px var(--accent-cyan));

}

/* Footer Grid Main Styles */
.neural-footer {
    padding: 60px 0 20px;
    background: #000;
    border-top: 1px solid #111;
}

.footer-grid-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    text-align: center; /* Gecentreerd zoals gevraagd */
}

.footer-column h4 {
    font-size: 12px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 11px;
    transition: 0.2s;
}

.footer-links a:hover {
    color: var(--accent-cyan);
    padding-left: 5px;
}

/* Dropdown styling */
/* Verbeterde Dropdown Styling met kaders */
.footer-sub-menu {
    display: none;
    list-style: none;
    padding: 10px;
    background: rgba(0, 242, 255, 0.02); /* Hele lichte cyan gloed */
    margin-top: 15px;
    border: 1px solid rgba(34, 211, 238, 0.2); /* De kader (cyan) */
    border-radius: 4px;
    text-align: left; /* Tekst links in het kader voor betere leesbaarheid */
    position: relative;
}

/* Pseudo-element voor een extra 'tech' hoekje (optioneel) */
.footer-sub-menu::before {
    content: "[LINK_UPLINK]";
    position: absolute;
    top: -8px;
    left: 10px;
    background: #000;
    padding: 0 5px;
    font-size: 8px;
    color: var(--accent-cyan);
}

.footer-sub-menu.active {
    display: block;
    animation: fadeInNeural 0.3s ease;
}

.footer-sub-menu li {
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 5px;
}

.footer-sub-menu li:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.footer-sub-menu li a {
    display: block;
    padding: 5px;
    font-size: 10px !important;
    color: #fff !important;
    transition: all 0.2s ease;
}

.footer-sub-menu li a:hover {
    background: rgba(34, 211, 238, 0.1);
    color: var(--accent-cyan) !important;
    padding-left: 10px;
}

/* Animatie voor het openen */
@keyframes fadeInNeural {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bottom bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #111;
}

.footer-brand-wrap { display: flex; align-items: center; gap: 15px; }
.footer-brand-wrap p { font-size: 9px; color: var(--text-dim); margin: 0; }

@media (max-width: 768px) {
    .footer-grid-main { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}


/* --- VERFIJNDE SCROLL NAVIGATIE --- */
#scroll-nav {
    position: fixed;
    bottom: 100px; /* Hoger geplaatst om uit de buurt van de footer te blijven */
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 99999; /* Extreem hoog om boven alles te zweven */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#scroll-nav.visible {
    opacity: 1;
    visibility: visible;
}

#scroll-nav button {
    background: rgba(5, 5, 10, 0.8);
    border: 1px solid rgba(34, 211, 238, 0.3); /* Subtielere rand */
    color: var(--accent-cyan);
    width: 38px;  /* Kleiner formaat */
    height: 38px; /* Kleiner formaat */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border-radius: 0; /* Strakke hoeken voor de tech-vibe */
    font-size: 12px;  /* Kleinere iconen */
}

#scroll-nav button:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: var(--accent-cyan);
    color: #fff;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    transform: scale(1.05);
}

/* Verberg de onderste pijl als we al bijna onderaan zijn (optioneel voor 'mooier') */
#scroll-nav button:last-child {
    border-top: none; /* Maakt de twee knoppen visueel één geheel */
}

@media (max-width: 992px) {
    #scroll-nav { display: none; }
}

/* --- NEURAL PULSE TICKER --- */
.neural-ticker-wrap {
    width: 100%;
    background: rgba(5, 5, 10, 0.8);
    border-top: 1px solid rgba(34, 211, 238, 0.1);
    border-bottom: 1px solid rgba(34, 211, 238, 0.1);
    overflow: hidden;
    white-space: nowrap;
    padding: 10px 0;
    position: relative;
    backdrop-filter: blur(5px);
}

.neural-ticker {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-loop 40s linear infinite;
}

.ticker-item {
    display: inline-block;
    padding: 0 40px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.ticker-item span {
    color: var(--accent-cyan);
    font-weight: bold;
}

.ticker-item i {
    margin-right: 8px;
    font-size: 8px;
    vertical-align: middle;
}

@keyframes ticker-loop {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Subtiel gloei-effect op de tekst */
.neural-ticker-wrap::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, #05050a 0%, transparent 5%, transparent 95%, #05050a 100%);
    pointer-events: none;
}



/* WK Menu Item Glow Animatie */
@keyframes pulse-wk-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
}

.menu-item-wk-promo {
    animation: pulse-wk-gold 2s infinite;
    color: #ffd700 !important; /* Forceert de gouden kleur */
    font-weight: bold;
    border-radius: 4px; /* Zorgt dat de box-shadow mooi rond het item valt */
    padding: 5px 10px; /* Geeft de gloed wat ruimte */
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Ruimte tussen het logo en de tekst */
}

/* Stijl voor het kleine WK logo in het menu */
.wk-menu-logo {
    height: 18px; /* Pas dit aan op basis van de hoogte van je menu */
    width: auto;
    object-fit: contain;
}