.showcase-section{

    width:100%;
    padding:120px 7%;
    position:relative;

}

.showcase-intro{

    margin-bottom:60px;
    text-align:center;

}

.showcase-intro span{

    color:#c99b5c;
    font-size:.8rem;
    letter-spacing:4px;

}

.showcase-intro h2{

    color:white;
    font-size:3rem;
    margin-top:20px;
    font-weight:600;

}

.showcase-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}

.glass-song-card{

    position:relative;

    height:240px;

    overflow:hidden;

    border-radius:28px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.card-image{

    width:100%;
    height:100%;

}

.card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    brightness(.45)
    saturate(.7);

}

.card-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.2)
    );

}



.card-content{

    position:absolute;

    bottom:24px;
    right:24px;

    z-index:3;

}

.card-content h3{

    color:white;
    font-size:1.2rem;
    margin-bottom:10px;

}

.card-content p{

    color:
    rgba(255,255,255,.7);

    font-size:.95rem;

    margin-bottom:10px;

}

.card-content span{

    color:#c99b5c;

    font-size:.85rem;

}

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 120px;

    overflow:hidden;

}

.hero-showcase{

    display:grid;

    grid-template-columns:
    repeat(3,180px);

    gap:22px;

    position:absolute;

    left:50%;

    top:50%;

    transform:
    translate(-85%,-50%);

    z-index:5;

}

.hero-card{

    position:relative;

    isolation:isolate;

    width:180px;

    height:180px;

    border-radius:28px;

    overflow:hidden;

}

.hero-card{

    position:relative;

    width:180px;

    height:180px;

    border-radius:28px;

    overflow:hidden;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(201,155,92,.35);

    backdrop-filter:blur(18px);

}

.hero-content{

    position:absolute;

    right:120px;

    top:45%;

    transform:translateY(-50%);

    z-index:50;

    max-width:520px;

    pointer-events:none;

}
.hero-actions a{

    pointer-events:auto;

}
.hero-gradient,
.hero-noise,
.hero-light,
.hero-bg{

    position:absolute;

    inset:0;

    pointer-events:none !important;

    z-index:1;

}

.hero-showcase{

    z-index:50 !important;

}



.hero-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    brightness(.45);

  pointer-events:none;

}

.hero-card img{

    position:absolute;

    inset:0;

    z-index:1;

}


.hero-bg,
.hero-gradient,
.hero-noise,
.hero-light{

    pointer-events:none !important;

}


.hero-actions a{

    pointer-events:auto;

}

.hero-card{

    position:relative;

    overflow:hidden;

}

.hero-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:brightness(.45);

}

.play-btn{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    color:white;

    font-size:18px;

    cursor:pointer;

    z-index:20;

    transition:.3s;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    1px solid rgba(255,255,255,.12);

}
.play-btn:hover{

    background:
    rgba(255,255,255,.18);

    transform:
    translate(-50%,-50%)
    scale(1.08);

}
.song-progress{

    position:absolute;

    bottom:18px;

    left:18px;
    right:18px;

    height:5px;

    border-radius:30px;

    background:
    rgba(255,255,255,.12);

    overflow:hidden;

    z-index:30;

    cursor:pointer;

}

.song-progress-bar{

    width:0%;

    height:100%;

    background:#c99b5c;

    border-radius:30px;

    box-shadow:
    0 0 12px rgba(201,155,92,.6);

    transition:width .1s linear;

}

.song-meta{

    position:absolute;

    bottom:16px;

    left:50%;

    transform:translateX(-50%);

    z-index:15;

    width:100%;

    text-align:center;

    pointer-events:none;

}

.song-meta h3{

    color:
    rgba(255,255,255,.45);

    font-size:.82rem;

    font-weight:400;

    letter-spacing:.8px;

    text-shadow:
    0 2px 12px rgba(0,0,0,.7);

}