/* =====================================
   DAVBOT MUSIC IA
   PREMIUM MUSIC DESIGN
===================================== */


:root{

--primary:#8b5cf6;

--secondary:#ec4899;

--dark:#050510;

--card:rgba(255,255,255,.07);

--border:rgba(255,255,255,.15);

--text:#ffffff;

--gray:#cbd5e1;

--gold:#ffd700;

}



*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:

radial-gradient(circle at top,#312e81,#050510 55%);

color:var(--text);

min-height:100vh;

}





/* ================= HEADER ================= */


.header{

width:100%;

padding:18px 30px;

display:flex;

justify-content:space-between;

align-items:center;

background:

rgba(5,5,16,.75);

backdrop-filter:blur(15px);

border-bottom:

1px solid var(--border);

position:sticky;

top:0;

z-index:1000;

}





.logo{

font-size:24px;

font-weight:800;

color:#c084fc;

display:flex;

align-items:center;

gap:10px;

}




.logo i{

color:#ec4899;

}





nav{

display:flex;

gap:25px;

}



nav a{

color:white;

text-decoration:none;

font-weight:500;

transition:.3s;

}



nav a:hover{

color:#c084fc;

}





/* ================= HERO ================= */



.hero{

min-height:600px;

display:flex;

justify-content:center;

align-items:center;

padding:40px 20px;


background:


linear-gradient(

rgba(0,0,0,.5),

rgba(5,5,16,.95)

),

url("https://i.imgur.com/uA1annh.jpeg");


background-size:cover;

background-position:center;

}





.hero-content{

max-width:850px;

text-align:center;

animation:fadeUp 1s ease;

}





.hero-image img{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

border:

5px solid var(--primary);


box-shadow:

0 0 40px rgba(139,92,246,.8);

margin-bottom:25px;

}




.badge{

display:inline-block;

padding:10px 20px;

border-radius:30px;

background:

rgba(139,92,246,.2);


border:

1px solid #8b5cf6;


color:#ddd6fe;

margin-bottom:20px;

font-size:14px;

}





.hero h1{

font-size:45px;

line-height:1.2;

margin-bottom:20px;

background:

linear-gradient(
90deg,
#c084fc,
#ec4899
);

-webkit-background-clip:text;

color:transparent;

}





.hero p{

font-size:18px;

color:var(--gray);

max-width:650px;

margin:auto;

line-height:1.7;

}





.hero-btn{

display:inline-block;

margin-top:30px;

padding:16px 35px;

border-radius:50px;

background:

linear-gradient(
90deg,
#8b5cf6,
#ec4899
);


color:white;

text-decoration:none;

font-weight:700;

transition:.3s;

box-shadow:

0 10px 30px rgba(236,72,153,.4);

}



.hero-btn:hover{

transform:translateY(-5px) scale(1.05);

}




/* ================= ANIMATION ================= */


@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}



to{

opacity:1;

transform:translateY(0);

}


}
/* ================= STATS ================= */


.stats{

max-width:1100px;

margin:40px auto;

padding:20px;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}



.stat-card{

background:var(--card);

border:1px solid var(--border);

border-radius:22px;

padding:25px;

text-align:center;

backdrop-filter:blur(15px);

transition:.3s;

}



.stat-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}



.stat-card h2{

font-size:32px;

color:#c084fc;

}



.stat-card p{

color:var(--gray);

margin-top:10px;

}






/* ================= SERVICES ================= */


.services{

max-width:1100px;

margin:60px auto;

padding:20px;

text-align:center;

}



.services>h2{

font-size:32px;

margin-bottom:35px;

color:#e9d5ff;

}





.service-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}





.service-card{

background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.03)

);


border:1px solid var(--border);

border-radius:25px;

padding:25px;

transition:.3s;

backdrop-filter:blur(15px);

}



.service-card:hover{

transform:translateY(-8px);

box-shadow:

0 15px 40px rgba(139,92,246,.25);

}



.service-card .icon{

font-size:40px;

margin-bottom:15px;

}





.service-card h3{

color:#f5d0fe;

margin-bottom:10px;

}



.service-card p{

color:var(--gray);

line-height:1.6;

}





/* ================= COMMANDE ================= */


.commande{

max-width:850px;

margin:50px auto;

padding:20px;

}




.commande-card{


background:

rgba(255,255,255,.07);


border:

1px solid var(--border);


border-radius:30px;


padding:35px;


backdrop-filter:blur(20px);


box-shadow:

0 20px 50px rgba(0,0,0,.4);

}





.commande-card h2{

text-align:center;

font-size:30px;

color:#d8b4fe;

margin-bottom:15px;

}





.commande-card p{

text-align:center;

color:var(--gray);

margin-bottom:25px;

}





label{

display:block;

margin-top:18px;

margin-bottom:8px;

color:#f3e8ff;

font-weight:600;

}





input,
textarea,
select{


width:100%;


padding:15px;


border-radius:15px;


outline:none;


border:

1px solid rgba(255,255,255,.15);


background:

rgba(0,0,0,.35);


color:white;


font-size:15px;


transition:.3s;


}



input:focus,
textarea:focus,
select:focus{


border-color:#8b5cf6;


box-shadow:

0 0 15px rgba(139,92,246,.4);


}





textarea{

height:130px;

resize:none;

}





select option{

background:#111827;

color:white;

}







/* ================= OPTION IA ================= */


.ai-option{


margin-top:20px;


padding:15px;


border-radius:15px;


background:

rgba(139,92,246,.15);


border:

1px solid rgba(139,92,246,.4);


display:flex;


align-items:center;


gap:10px;


}




.ai-option input{

width:auto;

}





.ai-option label{

margin:0;

cursor:pointer;

color:#ddd6fe;

}







/* ================= PRICE ================= */


.price-box{


margin-top:30px;


padding:25px;


text-align:center;


border-radius:25px;


background:


linear-gradient(

135deg,

rgba(139,92,246,.25),

rgba(236,72,153,.2)

);


border:

1px solid rgba(255,255,255,.2);


}




.price-box p{

margin:0;

color:#e9d5ff;

}



.price-box h1{


font-size:45px;


color:#fcd34d;


margin:10px;


}




.price-box span{

color:#cbd5e1;

}







/* ================= VIP ================= */


.vip-box{


margin-top:20px;


padding:18px;


border-radius:20px;


background:

rgba(255,215,0,.12);


border:

1px solid rgba(255,215,0,.4);


color:#fde68a;


display:flex;


align-items:center;


gap:12px;


}



.vip-box i{

font-size:25px;

color:#ffd700;

}




.vip-box p{

margin:0;

text-align:left;

}
/* ================= BUTTON ================= */


#sendBtn{


width:100%;


margin-top:30px;


padding:17px;


border:none;


border-radius:20px;


cursor:pointer;


font-size:17px;


font-weight:700;


color:white;



background:


linear-gradient(

90deg,

#8b5cf6,

#ec4899

);



transition:.3s;


box-shadow:


0 10px 30px rgba(236,72,153,.35);


}




#sendBtn:hover{


transform:translateY(-5px) scale(1.03);


box-shadow:


0 15px 40px rgba(139,92,246,.6);


}





#sendBtn:disabled{


opacity:.6;


cursor:not-allowed;


}







/* ================= PROCESSUS ================= */



.services .service-grid{


margin-top:30px;

}




.services .service-card h3{

font-size:20px;

}








/* ================= FAQ ================= */



#faq .commande-card h3{


margin-top:25px;


color:#f5d0fe;


font-size:18px;


}



#faq .commande-card p{


text-align:left;


line-height:1.7;


color:#cbd5e1;


}









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



.footer{


margin-top:50px;


padding:35px 20px;


text-align:center;


background:


rgba(0,0,0,.35);


border-top:


1px solid var(--border);


}




.footer h3{


color:#c084fc;


font-size:25px;


margin-bottom:10px;


}



.footer p{


color:#94a3b8;


margin-top:8px;


}










/* ================= SCROLLBAR ================= */



::-webkit-scrollbar{

width:8px;

}



::-webkit-scrollbar-track{

background:#050510;

}



::-webkit-scrollbar-thumb{


background:

linear-gradient(

#8b5cf6,

#ec4899

);


border-radius:20px;


}









/* ================= RESPONSIVE TABLET ================= */



@media(max-width:900px){



.stats{


grid-template-columns:repeat(2,1fr);


}




.service-grid{


grid-template-columns:repeat(2,1fr);


}




.hero h1{


font-size:36px;


}



nav{


gap:15px;


}



}










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



@media(max-width:600px){



.header{


flex-direction:column;


gap:15px;


padding:15px;


}




.logo{


font-size:20px;


}



nav{


width:100%;


justify-content:center;


flex-wrap:wrap;


}




.hero{


min-height:520px;


}



.hero-image img{


width:140px;


height:140px;


}



.hero h1{


font-size:28px;


}



.hero p{


font-size:15px;


}





.stats{


grid-template-columns:1fr;


margin:25px auto;


}




.service-grid{


grid-template-columns:1fr;


}




.services{


padding:15px;


}




.commande{


padding:15px;


}



.commande-card{


padding:22px;


border-radius:22px;


}



.commande-card h2{


font-size:24px;


}



.price-box h1{


font-size:38px;


}



}








/* ================= ANIMATION CARDS ================= */


.service-card,
.stat-card,
.commande-card{


animation:

fadeUp .7s ease;


}







/* ================= LOADING ================= */


.loading{


animation:pulse 1s infinite;


}



@keyframes pulse{


0%{

opacity:1;

}


50%{

opacity:.5;

}


100%{

opacity:1;

}


}