:root{
  --bg: #02030a;
  --bg2: #050018;
  --accent-neon: #c94bff;
  --accent-neon-soft: #ff9dfc;
  --accent-red: #ff3b5c;
  --gold: #c9a34a;
  --text: #e9e9ff;
  --muted: #b3a7c9;
  --card-bg: rgba(5, 5, 20, 0.75);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,60,140,0.18), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(120,80,255,0.25), transparent 60%),
    linear-gradient(135deg, var(--bg), var(--bg2));
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
}

h1,h2{
  font-family:'Cinzel',serif;
  color: var(--accent-neon-soft);
  text-shadow:
    0 0 12px rgba(201,163,74,0.45),
    0 0 26px rgba(255,59,92,0.35),
    0 0 40px rgba(120,80,255,0.35);
}

header{
  background: linear-gradient(
    to right,
    rgba(5,5,20,0.85),
    rgba(5,5,20,0.4)
  );
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,163,74,0.18);
}

.section{
  padding:4rem 0;
}

.track-list{
    list-style:none;
    padding:0;
    margin:0 auto;
    max-width:1100px;

    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.track-item::before{
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,59,92,0.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(201,75,255,0.18), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.track-item > *{
    position: relative;
    z-index: 1;
}

.track-item{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.audio-player{
    width: 100%;
    margin-bottom: 10px;
}

.track-info{
    display: block;
    margin: 10px 0;
    font-weight: bold;
    color: #fff;
}

.download-link a{
    display: inline-block;
    padding: 8px 16px;
    background: #c94bff;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
}

.download-link a:hover{
    background: #ff3b5c;
}

/* ==========================
   MENU
========================== */

.main-menu{
    display:flex;
    gap:15px;
    align-items:center;
}

.menu-btn{
    padding:10px 22px;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    border-radius:12px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(201,163,74,.35);

    transition:.3s;

    box-shadow:
        0 0 12px rgba(201,75,255,.25);
}

.menu-btn:hover{

    color:#fff;

    background:linear-gradient(
        90deg,
        #c94bff,
        #ff3b5c
    );

    transform:translateY(-3px);

    box-shadow:
        0 0 15px #c94bff,
        0 0 30px rgba(255,59,92,.5);
}

.upload-btn{
    background:linear-gradient(
        90deg,
        #c94bff,
        #ff3b5c
    );
}

.upload-btn:hover{

    background:linear-gradient(
        90deg,
        #ff3b5c,
        #c94bff
    );

}

/* ==========================
   FOOTER
========================== */

.footer{

    margin-top:70px;
    padding:40px 20px;

    text-align:center;

    background:rgba(5,5,20,.85);

    border-top:1px solid rgba(201,163,74,.20);

    backdrop-filter:blur(10px);

    box-shadow:
        0 -5px 25px rgba(201,75,255,.15);

}

.footer-content{

    max-width:900px;
    margin:auto;

}

.footer h3{

    color:#ff9dfc;

    margin-bottom:10px;

    text-shadow:
        0 0 15px rgba(201,75,255,.6);

}

.footer p{

    color:#cfcfe8;

    margin:8px 0;

}

.footer-links{

    margin:25px 0;

}

.footer-links a{

    display:inline-block;

    margin:0 10px;

    padding:10px 18px;

    text-decoration:none;

    color:white;

    border-radius:10px;

    border:1px solid rgba(201,163,74,.25);

    transition:.3s;

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

}

.footer-links a:hover{

    color:white;

    background:linear-gradient(
        90deg,
        #c94bff,
        #ff3b5c
    );

    box-shadow:
        0 0 15px rgba(201,75,255,.5);

    transform:translateY(-2px);

}

.footer hr{

    border-color:rgba(255,255,255,.10);

    margin:25px auto;

    width:80%;

}

.copyright{

    color:#9fa0b7;

    font-size:14px;

    letter-spacing:1px;

}

.track-list{
    list-style:none;
    padding:0;
    margin:0 auto;
    max-width:1100px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.song-card{
    display:flex;
    gap:15px;
    padding:20px;
    border-radius:18px;
    background:rgba(5,5,20,.85);
    border:1px solid rgba(201,163,74,.25);
    box-shadow:0 0 20px rgba(201,75,255,.25);
    align-items:center;
}

.cover{
    width:70px;
    height:70px;
    border-radius:12px;
    object-fit:cover;
    box-shadow:0 0 15px rgba(201,75,255,.4);
    border:1px solid rgba(255,255,255,.15);
}

.song-info{
    flex:1;
}

.song-info h3{
    margin:0;
    color:#fff;
    font-size:18px;
}

.controls{
    margin-top:10px;
    display:flex;
    gap:10px;
    align-items:center;
}

.play-btn{
    padding:8px 14px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#c94bff;
    color:#fff;
    font-weight:bold;
}

.play-btn:hover{
    background:#ff3b5c;
}

.download-btn{
    color:#fff;
    text-decoration:none;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.2);
}

/* Wave animation */
.wave{
    display:flex;
    gap:3px;
    margin-top:8px;
    height:15px;
    align-items:flex-end;
}

.wave span{
    width:3px;
    height:5px;
    background:#ff9dfc;
    animation:wave 1s infinite ease-in-out;
}

.wave span:nth-child(2){animation-delay:.1s;}
.wave span:nth-child(3){animation-delay:.2s;}
.wave span:nth-child(4){animation-delay:.3s;}
.wave span:nth-child(5){animation-delay:.4s;}

@keyframes wave{
    0%,100%{height:5px;}
    50%{height:15px;}
}

.donate-btn{
    padding:8px 14px;
    border-radius:10px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;

    background:linear-gradient(90deg,#ff3b5c,#ff9dfc);
    border:1px solid rgba(255,255,255,.15);

    transition:.3s;
}

.donate-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 0 20px rgba(255,59,92,.6);
}

.pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:40px 0;
}

.page-btn{
    padding:10px 15px;
    border-radius:10px;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(201,163,74,.25);
    transition:.3s;
}

.page-btn:hover{
    background:linear-gradient(90deg,#c94bff,#ff3b5c);
    transform:translateY(-2px);
}

.page-btn.active{
    background:linear-gradient(90deg,#c94bff,#ff3b5c);
    box-shadow:0 0 15px rgba(201,75,255,.5);
}

.new-badge{
    display:inline-block;
    margin-left:8px;
    padding:2px 8px;
    background:#ff0000;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    border-radius:20px;
    vertical-align:middle;
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}


/* ===========================
   ABOUT ARTIST
=========================== */

.artist-hero{
    padding:80px 20px;
    text-align:center;
    background:linear-gradient(135deg,#121212,#1e1e1e,#2d0b0b);
}

.artist-photo{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid #ff3b3b;
    box-shadow:0 0 30px rgba(255,59,59,.45);
    margin-bottom:25px;
}

.artist-hero h1{
    color:#fff;
    font-size:48px;
    margin-bottom:10px;
}

.artist-hero p{
    color:#cfcfcf;
    font-size:20px;
}

.artist-social{
    margin-top:30px;
}

.artist-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    margin:0 8px;
    border-radius:50%;
    background:#292929;
    color:#fff;
    font-size:22px;
    transition:.3s;
}

.artist-social a:hover{
    background:#ff3b3b;
    transform:translateY(-5px);
}

.about-card{
    max-width:1000px;
    margin:60px auto;
    padding:40px;
    background:#1f1f1f;
    border-radius:18px;
    color:#ddd;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.about-card h2{
    color:#ff3b3b;
    margin-bottom:20px;
}

.about-card p{
    line-height:1.9;
    font-size:17px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:25px;
    max-width:1100px;
    margin:50px auto;
    padding:0 20px;
}

.stat-box{
    background:#222;
    border-radius:15px;
    text-align:center;
    padding:35px 20px;
    transition:.3s;
}

.stat-box:hover{
    transform:translateY(-8px);
    background:#2f2f2f;
}

.stat-box h3{
    font-size:45px;
    margin-bottom:10px;
}

.stat-box span{
    color:#eee;
}

.timeline{
    max-width:900px;
    margin:80px auto;
    padding:0 20px;
}

.timeline h2{
    color:#fff;
    text-align:center;
    margin-bottom:40px;
}

.timeline-item{
    background:#1f1f1f;
    padding:25px;
    border-left:5px solid #ff3b3b;
    margin-bottom:25px;
    border-radius:12px;
}

.timeline-item h3{
    color:#ff3b3b;
    margin-bottom:10px;
}

.timeline-item p{
    color:#d5d5d5;
    line-height:1.8;
}

@media(max-width:768px){

.artist-photo{
    width:140px;
    height:140px;
}

.artist-hero h1{
    font-size:34px;
}

.artist-hero p{
    font-size:17px;
}

.about-card{
    padding:25px;
}

}

/* Duo Artists */

.artist-duo{
    display:flex;
    justify-content:center;
    gap:50px;
    margin-bottom:35px;
    flex-wrap:wrap;
}

.artist-member{
    text-align:center;
}

.artist-member img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #ff3b3b;
    box-shadow:0 0 20px rgba(255,59,59,.35);
    transition:.3s;
}

.artist-member img:hover{
    transform:scale(1.08);
    box-shadow:0 0 30px rgba(255,59,59,.6);
}

.artist-member h3{
    margin-top:12px;
    color:#fff;
    font-size:18px;
    font-weight:600;
}

@media(max-width:768px){

    .artist-duo{
        gap:25px;
    }

    .artist-member img{
        width:90px;
        height:90px;
    }

}

/* HOME */

.home-header{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 8%;

background:#111;

}

.home-header nav a{

color:white;

text-decoration:none;

margin-left:25px;

font-weight:bold;

}

.logo{

font-size:30px;

color:#ff3b3b;

font-weight:bold;

}

.hero{

height:90vh;

background:url(images/hero.jpg) center/cover;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.6);

}

.hero-content{

position:relative;

z-index:2;

color:white;

}

.hero h1{

font-size:70px;

}

.hero p{

font-size:25px;

margin:20px 0;

}

.hero-btn{

display:inline-block;

padding:15px 40px;

background:#ff3b3b;

color:white;

border-radius:40px;

text-decoration:none;

font-size:20px;

transition:.3s;

}

.hero-btn:hover{

background:#d50000;

transform:translateY(-5px);

}

.welcome{

max-width:1000px;

margin:100px auto;

text-align:center;

padding:20px;

}

.welcome h2{

color:#ff3b3b;

margin-bottom:20px;

}

.welcome p{

font-size:19px;

line-height:1.9;

}

.posters{

padding:80px;

}

.poster-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.poster-grid img{

width:100%;

border-radius:20px;

transition:.4s;

}

.poster-grid img:hover{

transform:scale(1.05);

}

.quote{

padding:80px;

text-align:center;

}

.quote-box{

background:#222;

margin:25px auto;

padding:30px;

max-width:700px;

border-left:5px solid red;

border-radius:12px;

}

.latest{

padding:80px;

text-align:center;

}

.latest-card{

background:#1b1b1b;

padding:50px;

border-radius:20px;

max-width:700px;

margin:auto;

}

.latest-card a{

color:#ff3b3b;

text-decoration:none;

font-weight:bold;

}

.stats{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

padding:80px;

text-align:center;

}

.stats div{

background:#222;

padding:40px;

border-radius:20px;

transition:.3s;

}

.stats div:hover{

transform:translateY(-10px);

}

.stats h1{

font-size:50px;

}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:30px;
    font-weight:bold;
    color:#ff3b3b;
}

.logo i{
    font-size:28px;
}


.main-nav{
    display:flex;
    gap:15px;
    align-items:center;
}

.nav-btn{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;
    border-radius:30px;

    text-decoration:none;
    color:#fff;

    background:#1e1e1e;
    border:1px solid #333;

    font-weight:600;
    transition:0.3s;
}

.nav-btn i{
    font-size:16px;
}

.nav-btn:hover{
    background:#ff3b3b;
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(255,59,59,0.3);
}

/* active page (optional) */
.nav-btn.active{
    background:#ff3b3b;
}