/*==================================================
=                 Buttons Hero Home
==================================================*/
.listen-button{
    width:50%;
    margin-top:var(--space-md);
    padding:var(--space-md) var(--space-lg);
    border:none;
    border-radius:var(--radius-md);
    background:linear-gradient(
        135deg,
        #220101,
        #710000
    );
    color:var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight:var(--weight-bold);
    letter-spacing:var(--tracking-wide);
    cursor:pointer;
    transition:var(--motion-normal);
}

.hero-buttons{
    display:flex;
    gap:var(--space-lg);
    margin-top:var(--space-lg);
    flex-wrap:wrap;
}

.primary-button{
    background:var(--color-shadow-red);
    color: var(--color-text);
    padding:var(--space-lg) var(--space-xl);
    border-radius:var(--radius-md);
    text-decoration:none;
    font-weight:var(--weight-bold);
    transition:var(--motion-normal);
}

.secondary-button{
    padding:var(--space-lg) var(--space-xl);
    border:2px solid var(--color-border);
    color:var(--color-text);
    border-radius:var(--radius-md);
    text-decoration:none;
    transition:var(--motion-normal);
}

.primary-button:hover{
    transform:translateY(-4px);
}

.secondary-button:hover{
    border-color:var(--color-shadow-red);
}

.listen-button:hover{
    transform:translateY(-3px);
    box-shadow:
        var(--glow-red-strong);
    color:var(--color-text);
}

.listen-button:active{
    transform:scale(.97);
}

/*=========================================
 ABOUT BUTTONS
=========================================*/
.about-buttons{
    display:flex;
    align-items:center;
    gap:var(--space-lg);
    flex-wrap:wrap;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:var(--space-lg);
    margin-top:var(--space-2xl);
    flex-wrap:wrap;    
}

/*==============================
 PROMOTIONS BUTTONS 
==============================*/
.primary-btn{
    padding:var(--space-md) var(--space-2xl);
    border-radius:var(--radius-pill);
    background: var(--color-primary-hover);
    color: var(--color-text);
    text-decoration:none;
    font-weight:var(--weight-bold);
    transition:var(--motion-normal);
    box-shadow:
        0 10px 30px var(--color-shadow-red);
}

.primary-btn:hover{
    background:var(--color-primary-light);
    transform:translateY(-4px);
    box-shadow:
        var(--glow-red-strong);
    color: var(--color-text);
}

.secondary-btn{
    padding:var(--space-md) var(--space-2xl);
    border-radius:var(--radius-pill);
    border:2px solid var(--color-border);
    color:var(--color-text);
    text-decoration:none;
    font-weight:var(--weight-bold);
    transition: var(--motion-normal);
}

.secondary-btn:hover{
    border-color:var(--color-primary-light);
    color:var(--color-primary-light);
}

.featured-offer-button{
    width:260px;
    height:60px;
    border:none;
    border-radius:var(--radius-pill);
    background:var(--color-text);
    color:var(--color-primary-hover);
    font-size:var(--text-body);
    font-weight:var(--weight-bold);
    cursor:pointer;
    transition:var(--motion-normal);
}

.featured-offer-button:hover{
    transform:translateY(-5px);
    box-shadow:
        var(--shadow-large);
}