*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#040816;
color:white;
min-height:100vh;
overflow-x:hidden;

}

#particles{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

z-index:-2;

}

body::before{

content:"";

position:fixed;

width:100%;
height:100%;

background:
radial-gradient(circle at top left,
rgba(0,255,136,.15),
transparent 35%),

radial-gradient(circle at bottom right,
rgba(0,170,255,.15),
transparent 35%);

z-index:-1;

}

.container{

max-width:1400px;

margin:auto;

padding:40px 25px;

}

.header{

text-align:center;

margin-bottom:30px;

}

.header h1{

font-size:48px;

font-weight:700;

background:
linear-gradient(
90deg,
#00ff88,
#00d4ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 10px #00ff88,
0 0 30px #00ff88;

}

.header p{

margin-top:10px;

color:#8f98b3;

font-size:15px;

}

.input-box{

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

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.08);

border-radius:25px;

padding:20px;

}

textarea{

width:100%;
height:280px;

background:#0d1428;

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

padding:20px;

color:white;

resize:none;

outline:none;

font-size:14px;

}

textarea:focus{

border-color:#00ff88;

box-shadow:
0 0 15px rgba(0,255,136,.4);

}

button{

width:100%;

margin-top:20px;

padding:18px;

font-size:18px;

font-weight:700;

border:none;

border-radius:15px;

cursor:pointer;

background:
linear-gradient(
90deg,
#00ff88,
#00d4ff
);

color:#000;

transition:.3s;

}

button:hover{

transform:translateY(-3px);

box-shadow:
0 0 20px #00ff88,
0 0 40px rgba(0,255,136,.5);

}

#loader{

display:none;

width:50px;
height:50px;

margin:20px auto;

border-radius:50%;

border:4px solid rgba(255,255,255,.1);

border-top:4px solid #00ff88;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

.cards{

margin-top:30px;

display:grid;

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

gap:25px;

}

.card{

position:relative;

overflow:hidden;

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

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

border-radius:25px;

padding:25px;

transition:.4s;

}

.card::before{

content:"";

position:absolute;

width:150px;
height:150px;

background:
rgba(0,255,136,.08);

border-radius:50%;

right:-50px;
top:-50px;

filter:blur(25px);

}

.card:hover{

transform:translateY(-5px);

box-shadow:
0 0 25px rgba(0,255,136,.3);

}

.card-title{

font-size:14px;

letter-spacing:1px;

color:#94a3b8;

margin-bottom:15px;

}

.card-value{

font-size:34px;

font-weight:700;

color:#00ff88;

}

.card-net{

border:1px solid #00ff88;

box-shadow:
0 0 20px rgba(0,255,136,.2);

}

.footer{

text-align:center;

margin-top:40px;

color:#6b7280;

font-size:14px;

}

@media(max-width:768px){

.header h1{
font-size:34px;
}

.card-value{
font-size:24px;
}

textarea{
height:220px;
}

}