/* ==========================================
   DAVBOT SMM PANEL ULTRA VIP CSS
   BLACK + BLUE + GOLD PREMIUM
========================================== */


*{
margin:0;
padding:0;
box-sizing:border-box;
}



:root{

--blue:var(--dav-accent-light,#60a5fa);
--cyan:#22d3ee;
--gold:#facc15;
--purple:#8b5cf6;
--dark:#020617;
--glass:rgba(255,255,255,.08);

}



body{

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

background:

radial-gradient(circle at top,#12304a,#020617 65%);

color:white;

min-height:100vh;

}






/* ================= BANNER ================= */


.banner{

height:230px;

width:100%;

overflow:hidden;

}



.banner img{

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.65);

}







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


.header{

text-align:center;

padding:35px 15px;

}



.header h1{

font-size:40px;

color:var(--blue);

font-weight:900;


text-shadow:

0 0 20px var(--blue);

}



.header p{

margin-top:15px;

color:#cbd5e1;

font-size:17px;

line-height:1.6;

}







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


.vip-box{


max-width:700px;

margin:20px auto;

padding:20px;


text-align:center;


border-radius:25px;


background:

linear-gradient(
135deg,
rgba(0,210,255,.2),
rgba(250,204,21,.15)
);


border:

1px solid var(--gold);


box-shadow:

0 0 30px rgba(250,204,21,.3);


font-weight:bold;


color:var(--gold);


}





/* ================= TITRE ================= */


.title{

text-align:center;

margin:30px 0;

font-size:26px;

color:white;

}






/* ================= PLATEFORMES 2 BLOCS ================= */


.grid{

display:grid;

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

gap:20px;

max-width:750px;

margin:auto;

padding:20px;

}






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


.card{


height:160px;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;



position:relative;


background:


linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);



border-radius:28px;


border:

1px solid rgba(0,210,255,.35);



backdrop-filter:blur(20px);



cursor:pointer;


overflow:hidden;


transition:.4s;



box-shadow:


0 15px 40px rgba(0,0,0,.5);

}





.card::before{


content:"";


position:absolute;


width:200%;


height:50px;


top:-70px;


left:-50%;


background:


linear-gradient(
90deg,
transparent,
rgba(0,210,255,.8),
transparent
);



transform:rotate(25deg);


transition:.7s;



}



.card:hover::before{


top:120%;


}





.card:hover{


transform:

translateY(-10px)
scale(1.03);



border-color:var(--blue);



box-shadow:


0 0 40px rgba(0,210,255,.5);



}





.card img{


width:65px;

height:65px;


margin-bottom:15px;



filter:

drop-shadow(
0 0 15px var(--blue)
);



}




.card h3{


font-size:18px;


font-weight:800;


}







.card.active{


background:


linear-gradient(
135deg,
var(--blue),
var(--purple),
var(--gold)
);



color:#020617;


border:none;



box-shadow:


0 0 50px var(--blue);



}




.card.active h3{


color:#020617;


}





.card.active::after{


content:"👑 VIP";


position:absolute;


top:12px;


right:12px;



background:var(--gold);


color:#020617;


padding:5px 12px;


border-radius:20px;


font-size:12px;


font-weight:900;



}








/* ================= FORMULAIRE ================= */



.form{


max-width:700px;


margin:35px auto;


padding:30px;



background:var(--glass);



border-radius:30px;



border:

1px solid rgba(0,210,255,.3);



backdrop-filter:blur(20px);



box-shadow:

0 0 40px rgba(0,0,0,.5);



}





.form h2{


text-align:center;


color:var(--blue);


margin-bottom:25px;


}







label{


display:block;


margin:15px 0 8px;


font-weight:bold;


color:#cbd5e1;


}






select,
input{


width:100%;


padding:16px;


border-radius:15px;


border:none;


outline:none;



background:

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



color:white;


margin-bottom:15px;


}





select option{


background:#020617;


}






/* ================= PRIX ================= */


.price-box{


margin-top:20px;


padding:25px;


text-align:center;


border-radius:25px;



background:


rgba(0,210,255,.08);



border:

1px solid rgba(0,210,255,.3);



}





.price{


font-size:38px;


font-weight:900;


color:var(--gold);



text-shadow:

0 0 20px var(--gold);


}




.discount-info{


margin-top:10px;


color:#22c55e;


font-weight:bold;


}







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


button{


width:100%;


padding:18px;


margin-top:25px;


border:none;


border-radius:20px;


cursor:pointer;


font-size:17px;


font-weight:900;


color:white;



background:


linear-gradient(
90deg,
var(--dav-accent-light,#60a5fa),
#8b5cf6,
#facc15
);




transition:.3s;



}




button:hover{


transform:scale(1.05);



box-shadow:


0 0 35px var(--blue);


}







/* ================= SEO ================= */


.seo-text{


max-width:800px;


margin:30px auto;


padding:25px;


border-radius:25px;



background:var(--glass);



line-height:1.7;


}



.seo-text h2{


color:var(--blue);


}






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


footer{


text-align:center;


padding:30px;


color:#94a3b8;


}



footer h3{


color:var(--blue);


}






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


@media(max-width:600px){



.banner{

height:160px;

}



.header h1{

font-size:30px;

}



.grid{

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

gap:12px;

padding:12px;

}



.card{

height:130px;

}



.card img{

width:45px;

height:45px;

}



.card h3{

font-size:14px;

}



.form{

margin:15px;

padding:20px;

}



.price{

font-size:30px;

}


}