body { font-family: 'Segoe UI', sans-serif; background: #000; color: #fff; margin: 0; text-align: center; }
.hero { height: 60vh; background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('assets/photo1.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.hero h1 { font-size: 3.5rem; letter-spacing: 5px; margin-bottom: 5px; }
.hero p { font-size: 1.2rem; color: #1DB954; font-weight: bold; text-transform: uppercase; }
.social-icons { margin-top: 20px; }
.social-icons a { color: #fff; font-size: 1.8rem; margin: 0 12px; text-decoration: none; transition: 0.3s; }
.social-icons a:hover { color: #1DB954; transform: scale(1.2); }
.container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 60px 20px; background: #0a0a0a; }
.profile-img { width: 280px; border-radius: 15px; margin-right: 30px; }
.bio-text { max-width: 550px; text-align: left; line-height: 1.8; color: #ccc; }
.track-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1100px; margin: auto; padding: 20px; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; max-width: 850px; margin: auto; padding: 20px; }
.photo-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; }
footer { padding: 40px; border-top: 1px solid #222; font-size: 0.8rem; }