*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
scroll-behavior:smooth;
}

header.scrolled, header, h1, h2, h3, .hero-logo, .featured-header h3{
font-family:'Space Grotesk', Arial, sans-serif;
}


body{
background:#000000;
color:#fffdfd;
}

header{
position:fixed;
top:0;
left:0;
width:100%;
padding:22px 60px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
background:#000000;
}

.logo{
font-family:'Space Grotesk', Arial, sans-serif;
font-weight:900;
font-size:26px;
color:white;
}

nav{
display:flex;
gap:45px;
}

nav a{
position:relative;
text-decoration:none;
color:white;
font-family:'Space Grotesk', Arial, sans-serif;
font-size:15px;
font-weight:500;
letter-spacing:0.5px;
text-transform:uppercase;
padding-bottom:4px;
}

nav a::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:0;
height:1.5px;
background:white;
transition:.3s ease;
}

nav a:hover::after{
width:100%;
}

header a.contact-btn,
header button{
padding:12px 26px;
border-radius:50px;
border:none;
background:white;
color:#000000;
font-weight:600;
font-size:15px;
cursor:pointer;
text-decoration:none;
overflow:hidden;
position:relative;
transition:background .3s ease;
}

header a.contact-btn:hover,
header button:hover{
background:#ddd;
}

.featured-release{
background:#111;
color:white;
border-radius:28px;
padding:60px;
margin-bottom:80px;
}

.featured-eyebrow{
display:block;
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
color:#888;
margin-bottom:10px;
}

.featured-header h3{
font-size:3rem;
font-weight:900;
margin-bottom:45px;
}

.featured-body{
display:grid;
grid-template-columns:220px 1fr;
gap:60px;
align-items:center;
}

.featured-cover{
border-radius:16px;
overflow:hidden;
transform:rotate(-4deg);
box-shadow:0 20px 40px rgba(0,0,0,.4);
transition:.4s ease;
}

.featured-release:hover .featured-cover{
transform:rotate(0deg) scale(1.03);
}

.featured-cover img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
display:block;
}

.featured-desc{
font-size:1.15rem;
line-height:1.7;
color:#ccc;
max-width:600px;
margin-bottom:30px;
}

.featured-tags{
display:flex;
gap:12px;
list-style:none;
flex-wrap:wrap;
margin-bottom:35px;
}

.featured-tags li{
border:1px solid #444;
padding:8px 18px;
border-radius:50px;
font-size:13px;
color:#ccc;
}

.btn-spotify{
display:inline-flex;
align-items:center;
gap:10px;
background:white;
color:#111;
padding:14px 28px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn-spotify:hover{
background:#ddd;
}

header a:visited,
header a:hover,
header a:active{
color:#000000;
}

header a{
position:relative;
text-decoration:none;
color:white;
font-family:'Space Grotesk', Arial, sans-serif;
font-size:15px;
font-weight:500;
letter-spacing:0.5px;
text-transform:uppercase;
padding-bottom:4px;
}

header a::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:0;
height:1.5px;
background:white;
transition:.3s ease;
}

header a:hover::after{
width:100%;
}

header a:visited{
color:#fffdfd;
}

header a:hover{
color:white;
}

header button{
padding:12px 26px;
border-radius:50px;
border:1px solid #000000;
background:rgb(7, 6, 6);
color:#fdfdfd;
font-weight:600;
font-size:15px;
cursor:pointer;
overflow:hidden;
position:relative;
transition:color .4s ease;
z-index:1;
}

header a{
font-family:'Space Grotesk', Arial, sans-serif;
font-size:15px;
font-weight:500;
}

header button::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:#111;
transition:left .4s ease;
z-index:-1;
}

header button:hover{
color:white;
}

header button:hover::before{
left:0;
}

.header-actions{
display:flex;
align-items:center;
gap:14px;
}

.lang-btn{
background:transparent;
border:1px solid rgba(255,255,255,.3);
color:white;
padding:8px 14px;
border-radius:50px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:.3s ease;
}



#menu-toggle{
display:none;
background:none;
border:none;
color:white;
font-size:24px;
cursor:pointer;
z-index:1100;
}

.hero{
height:100vh;
padding:80px 0px 10px 0px;
position:relative;
}


.hero h1{
position:absolute;
bottom:30px;
left:70px;
font-size:8vw;
font-weight:1000;
color:white;
}

.hero-bg{
width:100%;
height:100%;
object-fit:cover;
border-radius:15px;
}

.logo{
font-weight:900;
font-size:30px;
}

.hero-logo{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
max-width:35%;
height:auto;
}

.socials{
position:fixed;
right:25px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
background:rgba(0,0,0,.55);
backdrop-filter:blur(10px);
border-radius:30px;
padding:8px;
z-index:999;
}

.socials a{
width:44px;
height:44px;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
color:white;
font-size:16px;
border-radius:50%;
transition:.25s ease;
position:relative;
}

.socials a:not(:last-child){
margin-bottom:2px;
}

.socials a:hover{
background:white;
color:#111;
transform:scale(1.1);
}

.socials a::after{
content:attr(data-tooltip);
position:absolute;
right:56px;
top:50%;
transform:translateY(-50%) translateX(10px);
background:#111;
color:white;
padding:7px 14px;
border-radius:8px;
font-size:12px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:.25s ease;
}

.socials a:hover::after{
opacity:1;
transform:translateY(-50%) translateX(0);
}


.section{
padding:120px 8%;
}

.section span{
font-size:14px;
letter-spacing:3px;
color:rgb(143, 143, 143);
}

.section h2{
font-size:4rem;
margin-top:20px;
margin-bottom:50px;
}

.section h4{
font-size:3rem;
margin-top:20px;
margin-bottom:50px;
font-family:'Space Grotesk', Arial, sans-serif;
}


.eyebrow{
font-size:14px;
letter-spacing:3px;
color:gray;
font-weight:500;
}


.placeholder{
height:400px;
background:#ddd;
border-radius:20px;
}

.marquee{
overflow:hidden;
width:100%;
-webkit-mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent);
mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-track{
display:flex;
gap:30px;
width:max-content;
animation:scroll-left 22s linear infinite;
}

.marquee:hover .marquee-track{
animation-play-state:paused;
}

@keyframes scroll-left{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}

.card{
display:block;
text-decoration:none;
color:inherit;
flex-shrink:0;
}

.card-img{
position:relative;
width:280px;
height:350px;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.5);
transition:.4s ease;
}

.card:hover .card-img{
transform:translateY(-8px);
box-shadow:0 25px 45px rgba(0,0,0,.6);
}

.card-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.5s ease;
}

.card:hover .card-img img{
transform:scale(1.08);
}

.card-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.35);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:.3s ease;
}

.card-overlay i{
width:60px;
height:60px;
background:white;
color:#111;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
transform:scale(.7);
transition:.3s ease;
}

.card:hover .card-overlay{
opacity:1;
}

.card:hover .card-overlay i{
transform:scale(1);
}

.card-info{
position:absolute;
bottom:0;
left:0;
right:0;
padding:45px 18px 18px;
background:linear-gradient(0deg, rgba(0,0,0,.9) 20%, transparent 100%);
}

.card-artist{
display:block;
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
color:#ccc;
margin-bottom:4px;
}

.card-info h3{
color:white;
font-size:18px;
font-weight:700;
line-height:1.2;
}

.about-section{
position:relative;
min-height:90vh;
display:flex;
align-items:flex-end;
padding:60px 8%;
overflow:hidden;
border-radius:35px;
margin:0 30px;
width:auto;
}

.about-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

.about-overlay{
position:absolute;
inset:0;
background:linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.5) 100%);
z-index:1;
}

.about-content{
position:relative;
z-index:2;
color:white;
width:100%;
}

.about-content > span{
font-size:14px;
letter-spacing:3px;
color:#aaa;
}

.about-content h2{
font-size:5rem;
font-weight:900;
margin:10px 0 40px;
}

.about-row{
display:grid;
grid-template-columns:220px 1fr;
gap:60px;
border-top:1px solid rgba(255,255,255,.2);
padding-top:35px;
}

.about-stat strong{
font-size:2.6rem;
font-weight:900;
display:block;
}

.about-stat p{
color:#aaa;
font-size:14px;
}

.about-text h4{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:#888;
margin-bottom:12px;
}

.about-text p{
color:#ddd;
line-height:1.7;
max-width:600px;
}

.stat strong{
display:block;
font-size:2.8rem;
font-weight:900;
line-height:1;
}

.stat span{
font-size:14px;
color:#888;
}

.about-block{
margin-bottom:35px;
}

.about-block h4{
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:#999;
margin-bottom:14px;
}

.about-block p{
color:#8f8f8f;
line-height:1.7;
max-width:520px;
}

.labels-marquee{
overflow:hidden;
width:100%;
-webkit-mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent);
mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.labels-track{
display:flex;
gap:50px;
width:max-content;
animation:scroll-left 18s linear infinite;
}

.labels-track span{
font-size:22px;
font-weight:700;
white-space:nowrap;
color:#111;
opacity:.5;
}

.dark{
background:black;
color:white;
}


.sets-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.set-card{
display:block;
text-decoration:none;
color:white;
}

.set-cover{
position:relative;
aspect-ratio:16/10;
border-radius:20px;
overflow:hidden;
}

.set-cover img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s ease;
}

.set-card:hover .set-cover img{
transform:scale(1.06);
}

.set-play{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(.8);
width:64px;
height:64px;
background:rgba(255,255,255,.95);
color:#111;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
opacity:0;
transition:.3s ease;
}

.set-card:hover .set-play{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

.set-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:60px 25px 22px;
background:linear-gradient(0deg, rgba(0,0,0,.85) 20%, transparent 100%);
}

.set-overlay h3{
font-size:1.6rem;
font-weight:800;
text-transform:uppercase;
line-height:1.15;
}

.set-overlay span{
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:#ccc;
}

.set-info{
padding:18px 4px 0;
}

.set-info h4{
font-size:17px;
font-weight:700;
}

.set-info p{
font-size:13px;
color:#999;
margin-top:2px;
}

.agenda-list{
border-top:1px solid rgba(252, 249, 249, 0.15);
}

.event{
display:flex;
align-items:center;
gap:35px;
padding:35px 10px;
border-bottom:1px solid rgb(255, 254, 254);
text-decoration:none;
color:rgb(253, 253, 253);
transition:.3s ease;
}

.event:hover{
background:rgb(117, 117, 117);
padding-left:25px;
}

.event-date{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:70px;
flex-shrink:0;
}

.event-date strong{
font-size:2rem;
font-weight:900;
line-height:1;
}

.event-date span{
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:#faf9f9;
}

.event-info{
flex:1;
}

.event-info h4{
font-size:22px;
font-weight:700;
margin-bottom:4px;
}

.event-info p{
font-size:14px;
color:#ffffff;
}

.event-arrow{
font-size:18px;
color:#f7eeee;
transform:translateX(-8px);
opacity:0;
transition:.3s ease;
}

.event:hover .event-arrow{
transform:translateX(0);
opacity:1;
color:rgb(7, 6, 6);
}

form{
display:flex;
flex-direction:column;
gap:24px;
max-width:700px;
}

.form-group{
position:relative;
}

input,
textarea{
width:100%;
padding:18px 20px;
background:transparent;
border:1px solid rgba(253, 248, 248, 0.932);
border-radius:12px;
color:white;
font-size:15px;
font-family:inherit;
transition:.3s ease;
}

textarea{
height:160px;
resize:none;
}

input:focus,
textarea:focus{
outline:none;
border-color:white;
background:rgba(80, 80, 80, 0.219);
}

.form-group label{
position:absolute;
left:20px;
top:18px;
color:#888;
font-size:15px;
pointer-events:none;
transition:.2s ease;
}

input:focus + label,
input:not(:placeholder-shown) + label,
textarea:focus + label,
textarea:not(:placeholder-shown) + label{
top:-9px;
left:14px;
font-size:11px;
letter-spacing:.5px;
text-transform:uppercase;
color:rgb(248, 246, 246);
background:#000;
padding:0 6px;
}

form button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:18px;
background:rgba(241, 241, 241, 0.178);
color:#fffefe;
border:none;
cursor:pointer;
border-radius:12px;
font-size:15px;
font-weight:700;
transition:.3s ease;
align-self:flex-start;
padding-left:32px;
padding-right:32px;
}

form button:hover{
background:#5e5e5e;
gap:16px;
}

footer{
padding:60px;
text-align:center;
}


/* ============================================
   RESPONSIVE / MOBILE
   ============================================ */

@media(max-width:900px){

header{
padding:18px 20px;
}

.logo{
font-size:20px;
}

nav{
position:fixed;
top:0;
right:-100%;
width:75%;
height:100vh;
background:#111;
flex-direction:column;
justify-content:center;
align-items:center;
gap:35px;
transition:.4s ease;
z-index:1050;
}

nav.open{
right:0;
box-shadow:-10px 0 30px rgba(0,0,0,.4);
}

nav a{
font-size:20px;
}

#menu-toggle{
display:block;
}

.hero{
padding:85px 15px 15px 15px;
}

.hero-logo{
max-width:75%;
}

.socials{
top:auto;
bottom:20px;
right:50%;
transform:translateX(50%);
flex-direction:row;
padding:6px;
}

.socials a{
width:38px;
height:38px;
font-size:14px;
}

.socials a::after{
display:none;
}

.section{
padding:60px 6%;
}

.section h2{
font-size:2.2rem;
}

.eyebrow{
font-size:12px;
}

.featured-release{
padding:30px 22px;
}

.featured-header h3{
font-size:2rem;
}

.featured-body{
grid-template-columns:1fr;
gap:35px;
}

.featured-cover{
max-width:200px;
margin:0 auto;
transform:rotate(0deg);
}

.featured-release:hover .featured-cover{
transform:scale(1.03);
}

.featured-tags{
justify-content:center;
}

.featured-text{
text-align:center;
}

.featured-desc{
margin-left:auto;
margin-right:auto;
}

.about-section{
margin:0 15px;
padding:40px 25px;
min-height:auto;
}

.about-content h2{
font-size:2.6rem;
}

.about-row{
grid-template-columns:1fr;
gap:25px;
}

.card-img{
width:220px;
height:280px;
}

.sets-grid{
grid-template-columns:1fr;
gap:20px;
}

.event{
gap:20px;
padding:25px 5px;
}

.event-date{
width:55px;
}

.event-date strong{
font-size:1.6rem;
}

.event-info h4{
font-size:18px;
}

.event-arrow{
display:none;
}

form{
max-width:100%;
}

input,
textarea{
padding:16px 18px;
}

form button{
width:100%;
align-self:stretch;
}

}

@media(max-width:480px){

.hero h1,
.hero-logo{
max-width:90%;
}

.featured-meta,
.featured-tags{
flex-direction:column;
align-items:center;
gap:10px;
}

}