/* Reset / Basis */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: Arial, sans-serif; line-height:1.5; background:#111; color:#eee;}
a {color:#1db954; text-decoration:none;}

/* Navbar */
.navbar {display:flex; justify-content:space-between; align-items:center; padding:1rem; background:#000;}
.nav-brand {font-weight:bold; font-size:1.3rem;}
.nav-menu {list-style:none; display:flex;}
.nav-menu li {margin-left:1.5rem;}
.nav-toggle {display:none; cursor:pointer; font-size:1.5rem;}

/* Hero Section */
.hero {display:flex; align-items:center; padding:2rem 1rem; background:#222; flex-wrap:wrap;}
.hero-img {width:50%; max-width:290px; height:auto; margin-left:50px; margin-right:2rem; object-fit:cover;}
.hero-text {flex:1; min-width:200px;}
.hero-text h1 {font-size:2.5rem; margin-bottom:0.5rem;}
.hero-text p {font-size:1.2rem;}

/* Sections */
section {padding:3rem 1rem; max-width:900px; margin:0 auto;}
h2 {margin-bottom:1rem; font-size:1.8rem;}
.mixcloud-embed iframe {border:none;}

/* Footer */
footer {text-align:center; padding:2rem 1rem; background:#000; margin-top:2rem;}

/* Popup Overlay */
.popup-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;}
.popup-content {background:#222; color:#eee; padding:2rem; max-width:600px; width:90%; border-radius:8px; position:relative; overflow-y:auto; max-height:90%;}
.popup-close {position:absolute; top:10px; right:15px; font-size:1.5rem; cursor:pointer; color:#1db954;}
.popup-content a {color:#1db954;}

/* Footer Button */
.link-button {background:none; border:none; padding:0; margin:0; color:#1db954; text-decoration:underline; cursor:pointer; font:inherit;}

/* Responsive */
@media(max-width:768px){
  .nav-menu {display:none; flex-direction:column; background:#111; position:absolute; top:60px; right:0; width:200px; padding:1rem; border-left:1px solid #333;}
  .nav-menu li {margin:1rem 0;}
  .nav-toggle {display:block;}
  .nav-menu.active {display:flex;}
  .hero {flex-direction:column; padding:2rem 1rem;}
  .hero-img {margin:0 auto 1rem auto; width:80%; height:auto;}
  .hero-text {text-align:center;}
}