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


.hero{

min-height:100vh;

display:flex;

align-items:center;

padding:150px 5% 80px;

position:relative;

overflow:hidden;


background:

radial-gradient(
circle at top left,
#302b63,
#0f0c29 60%
);


color:white;

}





.hero-container{


max-width:1200px;

width:100%;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;


}




/* BACKGROUND EFFECT */


.gradient-circle{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.5;

}


.circle-one{

width:300px;

height:300px;

background:#6c63ff;

top:100px;

left:-100px;

animation:move 8s infinite alternate;


}



.circle-two{

width:350px;

height:350px;

background:#00d4ff;

right:-100px;

bottom:50px;

animation:move 10s infinite alternate;

}



@keyframes move{

from{

transform:translateY(0);

}

to{

transform:translateY(60px);

}

}






/* HERO TEXT */


.hero-tag{

display:inline-block;

padding:10px 20px;

border-radius:30px;

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

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

font-size:14px;

margin-bottom:25px;

}



.hero-content h1{


font-size:65px;

line-height:1.1;

font-weight:800;

letter-spacing:-2px;


}



.hero-content h1 span{


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


-webkit-background-clip:text;

color:transparent;


}




.hero-description{


font-size:18px;

line-height:1.7;

color:#d0d0d0;

max-width:520px;

margin:25px 0 35px;


}





.hero-buttons{

display:flex;

gap:20px;

}








/* HERO VISUAL */


.hero-image{

position:relative;

height:550px;

display:flex;

justify-content:center;

align-items:center;

}





.dashboard-card{


width:360px;

padding:30px;

border-radius:30px;


background:

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


backdrop-filter:blur(25px);


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


box-shadow:
0 30px 80px rgba(0,0,0,.4);


animation:floating 5s infinite ease-in-out;


}





.dashboard-header{

font-size:20px;

font-weight:700;

margin-bottom:30px;

}



.chart-box{

height:150px;

border-radius:20px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.15),
transparent
);


position:relative;

overflow:hidden;

}




.chart-line{


position:absolute;

bottom:40px;

left:20px;

width:280px;

height:70px;


border-top:4px solid #6c63ff;


transform:skewY(-15deg);


}




.dashboard-info{

display:flex;

justify-content:space-between;

margin-top:30px;


}



.dashboard-info h4{

font-size:32px;

}





/* FLOATING CARDS */


.floating-card{


position:absolute;


padding:20px;


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


backdrop-filter:blur(20px);


border-radius:20px;


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


box-shadow:
0 20px 40px rgba(0,0,0,.3);


}



.card-one{

top:80px;

left:20px;


animation:floating 4s infinite;

}




.card-two{


bottom:80px;

right:20px;


animation:floating 6s infinite;


}



.floating-card h3{

margin:10px 0;

}



.icon{

font-size:30px;

}



@keyframes floating{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


}