
.home-header {
    display: flex;
    min-height: 80px;          
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;    
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,250,255,0.9));
    border-radius: 14px;
    box-shadow:
      0 6px 18px rgba(4,24,44,0.10), 
      0 2px 6px rgba(4,24,44,0.06) inset;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}


.header-list {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: row;
    column-gap: 3rem;    
    justify-content: center;
    align-items: center;
    transition: transform 0.28s ease, opacity 0.25s ease;
}

.header-btn {
    display: flex;
    position: relative;
    flex-direction: column;
    max-width: none;
    height: 100%;
    border-radius: 12px;    
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 220ms ease;
    background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(245,248,255,0.85));
    border: 1px solid rgba(10,40,70,0.06);
    padding-left: 6px;
    padding-right: 6px;
}


.btn-pic {
    display: flex;
    justify-content: center;
    height: 60%;                
    align-items: end;
    transition: transform 200ms ease, filter 200ms ease;
    filter: drop-shadow(0 6px 10px rgba(3,28,60,0.12));
}

.btn-pic-home__img { width: 44.2px; margin-right: 4px; }
.btn-pic-values__img { width: 36.55px; margin-left: 3px; }
.btn-pic-calc__img { width: 63.75px; }
.btn-pic-giveaways__img { width: 26.95px; margin-right: 3px; }
.btn-pic-trade__img { width: 39.1px; margin-bottom: 3px; margin-left: 3px; }
.btn-pic-more__img { width: 28.1px; margin-bottom: 3px; margin-left: 3px; }



.btn-text {
    display: flex;
    height: 30%;               
    justify-content: center;
    align-items: center;
}
.btn-text span {
    font-weight: 600;
    font-size: 22px;             
    text-shadow: 0 1px 0 rgba(255,255,255,0.25); 
    color: #072033;               
    letter-spacing: 0.3px;
    padding-top: 5px;
}


.header-btn a {
    display: inline-block;
    border-radius: 10px;        
    text-decoration: none;
    color: inherit;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
}


.header-btn:hover {
    box-shadow:
      0 10px 24px rgba(4,24,44,0.12),
      0 2px 6px rgba(4,24,44,0.06) inset;
    transform: translateY(-3px);  
}
.header-btn:hover .btn-pic {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 10px 18px rgba(1,120,200,0.12));
}
.header-btn:hover .btn-text span {
    color: #031827;
}


.header-btn.active-page-class {
    background: linear-gradient(180deg, #fffefc, #f1fbff);
}

.header-btn.active-page-class .btn-pic {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 12px 22px rgba(3,125,210,0.12));
}

.header-btn.active-page-class .btn-text span {
    color: #043b5c;
    text-shadow: 0 2px 6px rgba(3,125,210,0.14);
}

.left-popup { display: none; }
.header-hamburger-expand { display: none; }

.header-btn a:focus {
    outline: 3px solid rgba(3,125,210,0.14);
    outline-offset: 2px;
    border-radius: 10px;
}

@keyframes floaty {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}
.header-btn:hover .btn-pic img { animation: floaty 2.8s ease-in-out infinite; }


.header-btn-fire {
    position: absolute;
    font-size: 12px;
    right: 0;
    top: 0;
}