/* M:OTION Records */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,Arial,sans-serif;
  color:#fff;
  background:#000;
}


.hero{
    min-height:30vh;
    background:
        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.82)),
        url("../img/hero.png") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 20px;
    margin-bottom:80px;
}



.hero-overlay{padding:25px}


.logo{
    width:min(340px,80vw);
    margin-bottom:20px;
}


.subtitle{font-size:1.2rem;color:#ddd;letter-spacing:.12em;text-transform:uppercase}
.scroll-button,.listen-button{
 display:inline-block;margin-top:30px;padding:14px 28px;
 background:#1DB954;color:#fff;text-decoration:none;
 border-radius:999px;font-weight:bold;
 transition:.25s
}


.scroll-button:hover,.listen-button:hover{transform:translateY(-2px);background:#18a34a}
.featured{
 max-width:1200px;margin:-80px auto 80px;
 display:grid;grid-template-columns:380px 1fr;gap:40px;
 background:rgba(20,20,20,.85);
 backdrop-filter:blur(10px);
 border-radius:24px;padding:30px;
 box-shadow:0 20px 50px rgba(0,0,0,.5)
}


.featured-cover img{width:100%;border-radius:18px;display:block}

.featured-tag{color:#1DB954;font-weight:700;letter-spacing:.15em}

.featured h1{font-size:3rem;margin:10px 0}

.featured{
    max-width:1200px;
    margin:0 auto 90px;
    display:grid;
    grid-template-columns:380px 1fr;
    gap:45px;

    background:#151515;
    border-radius:26px;
    padding:35px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.releases,.about,.contact{
 max-width:1200px;margin:0 auto 70px;padding:0 20px
}


.releases h2,.about h2,.contact h2{
 font-size:2rem;margin-bottom:25px
}


.release-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
 gap:24px
}
.release{
    background:#171717;
    border-radius:18px;
    overflow:hidden;
    transition:.25s;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.release:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.5);
}


.release img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.release h3{padding:18px 18px 8px}
.release span{display:block;padding:0 18px 18px;color:#aaa}
.about p,.contact p{
 color:#d0d0d0;line-height:1.9;max-width:850px
}
.contact a{color:#fff}
footer{
 text-align:center;padding:40px;color:#888;border-top:1px solid #222
}
@media(max-width:900px){
 .featured{grid-template-columns:1fr;margin:30px 20px 60px}
 .featured h1{font-size:2.2rem}
}


.streaming{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:15px 0 20px;
}

.streaming a{
    opacity:.8;
    transition:.25s;
}

.streaming a:hover{
    opacity:1;
    transform:scale(1.15);
}

.streaming img{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
}

.streaming .hyperfollow{
    margin-left:10px;
    padding:6px 14px;
    border:1px solid #1DB954;
    border-radius:20px;
    color:#1DB954;
    font-size:.85rem;
    font-weight:bold;
}

.streaming .hyperfollow:hover{
    background:#1DB954;
    color:#fff;
}






.official{
    padding:0 20px 90px;
}

.official-box{
    max-width:1050px;
    margin:auto;
    text-align:center;
    background:#141414;
    border-radius:26px;
    padding:55px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.official-box h2{
    font-size:2.2rem;
    margin-bottom:22px;
}

.official-box p{
    color:#cfcfcf;
    line-height:1.9;
    max-width:760px;
    margin:16px auto;
}

.official-links{
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.official-links a{
    background:#1DB954;
    color:#fff;
    text-decoration:none;
    padding:12px 22px;
    border-radius:999px;
    font-weight:600;
    transition:.25s;
}

.official-links a:hover{
    transform:translateY(-2px);
    background:#18a34a;
}






.spotify-player{
    max-width:1200px;
    margin:0 auto 80px;
    padding:0 20px;
}

.spotify-player iframe{
    width:100%;
    border:none;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}