@charset "utf-8";
/* CSS Document */

* {

box-sizing:border-box;

font-family:Arial,sans-serif;

}



body {

margin:0;

background:

radial-gradient(circle at top,#5b007a,#160020 70%);

color:white;

padding:20px;

}



.container {

max-width:480px;

margin:auto;

}





/* HERO */


.hero {

text-align:center;

padding:20px 0;

}



h1 {

font-size:30px;

line-height:1.3;

}



h1 span {

color:#f15cff;

text-shadow:

0 0 10px #f15cff,

0 0 25px #d946ef;

}



.line {

width:80px;

height:5px;

background:#d94cff;

border-radius:20px;

margin:20px auto;

box-shadow:

0 0 15px #d94cff;

}



.hero p {

color:#ddd;

line-height:1.5;

}





/* CARD */


.card {


background:

rgba(10,5,25,.85);


border:

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


border-radius:15px;


padding:20px;


margin:20px 0;


box-shadow:

0 0 18px rgba(215,70,255,.25);


}



h2 {

font-size:21px;

margin-top:0;

}




/* ACCESS ITEM */


.item {

padding:12px 0;

border-bottom:

1px dashed rgba(255,255,255,.18);

}



.item:last-child {

border:none;

}



.note {

margin-top:18px;

color:#39e75f;

font-weight:bold;

}





/* FORM */


.form-group {

margin-bottom:18px;

}



label {

display:block;

font-size:14px;

color:#ddd;

margin-bottom:6px;

}



input {


width:100%;


padding:14px;


border-radius:10px;


border:

1px solid #9c27b0;


background:#180020;


color:white;


font-size:16px;


outline:none;


}



input:focus {


border-color:#f15cff;


box-shadow:

0 0 12px rgba(241,92,255,.5);


}



input::placeholder {

color:#888;

}





/* VALUE BOX */


.value-box {


text-align:center;


background:

linear-gradient(

145deg,

rgba(139,34,201,.35),

rgba(10,5,25,.9)

);


border:

2px solid #d946ef;


border-radius:18px;


padding:25px 20px;


box-shadow:

0 0 25px rgba(217,70,239,.45);


margin-top:25px;


}



.value-box h2 {

color:white;

}



.value-box p {

line-height:1.5;

color:#ddd;

}





.price {


font-size:35px;


font-weight:bold;


color:#f15cff;


text-shadow:

0 0 15px #f15cff;


margin:15px 0;


}





/* BUTTON */


button {


width:100%;


padding:18px;


border:none;


border-radius:22px;


margin-top:25px;


background:

linear-gradient(

90deg,

#d946ef,

#8b5cf6

);


color:white;


font-size:18px;


font-weight:bold;


cursor:pointer;


box-shadow:

0 0 20px rgba(217,70,239,.7);


transition:.3s;


}



button:hover {


transform:scale(1.03);


box-shadow:

0 0 35px rgba(217,70,239,1);


}




@media(max-width:400px){


h1 {

font-size:25px;

}


}