:root{
--main:#0d6efd;
--accent:#6610f2;
--soft:#0dcaf0;
--dark:#0a2540;
--glass:rgba(255,255,255,.15);
--radius:20px;
}

html{scroll-behavior:smooth}
body{
font-family:system-ui;
overflow-x:hidden;
background:#f5f7fb;
}

/* progress bar */
#progress{
position:fixed;
top:0;
left:0;
height:4px;
background:linear-gradient(90deg,var(--main),var(--soft),var(--accent));
background-size:300%;
animation:progressMove 6s linear infinite;
width:0%;
z-index:9999;
}
@keyframes progressMove{
0%{background-position:0%}
100%{background-position:300%}
}
 
/* hero */
 
.hero{
/* position:relative;*/ 
color:white;
padding:120px 0;
overflow:hidden;
background:linear-gradient(-45deg,var(--main),var(--soft),var(--accent),var(--main));
background-size:400% 400%;
animation:gradientMove 12s ease infinite;
}
 

@keyframes gradientMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

/* floating blobs */
.hero::before,
.hero::after{
/* content:"";
position:absolute; */ 
width:420px;
height:420px;
border-radius:50%;
background:rgba(255,255,255,.18);
filter:blur(50px);
animation:float 12s infinite linear;
}

.hero::before{top:-120px;left:-120px}
.hero::after{bottom:-120px;right:-120px;animation-delay:6s}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(40px)}
100%{transform:translateY(0)}
}

/* section */
.section{padding:90px 0}

/* cards */
/* 
.card{
border:none;
border-radius:var(--radius);
background:white;
box-shadow:0 15px 35px rgba(0,0,0,.06);
transition:.45s cubic-bezier(.2,.8,.2,1);
position:relative;
overflow:hidden;
}
 
.card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background:linear-gradient(130deg,transparent,rgba(255,255,255,.7),transparent);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:.5s;
}

.card:hover{
transform:translateY(-12px) scale(1.02);
box-shadow:0 25px 60px rgba(0,0,0,.15);
}
.card:hover::before{opacity:1}
*/

/* icons */
.icon{
font-size:42px;
transition:.4s;
}
.card:hover .icon{
transform:scale(1.2) rotate(5deg);
filter:drop-shadow(0 5px 10px rgba(0,0,0,.15));
}

/* CTA */
 
.cta{
background:linear-gradient(135deg,var(--main),var(--accent));
color:white;
padding:70px 20px;
border-radius:30px;
position:relative;
overflow:hidden;
transition:.4s;
     
}

.cta:hover{
transform:scale(1.02);
box-shadow:0 20px 60px rgba(13,110,253,.4);
}

.cta::after{
content:"";
position:absolute;
width:300%;
height:300%;
background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);
  
animation:shine 8s linear infinite;
}

@keyframes shine{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
 

@keyframes ripple{
to{transform:scale(4);opacity:0}
}
 


/* section titles */
h2{
background:linear-gradient(90deg,var(--dark),var(--main));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
 
.user-card{
transition:.4s;
border-radius:20px;
}

.user-card:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:0 25px 60px rgba(0,0,0,.15);
filter:saturate(1.2);
}

/* icon circle */
.icon-circle{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
border-radius:50%;
margin:auto;
transition:.4s;
}

.user-card:hover .icon-circle{
transform:scale(1.15) rotate(8deg);
box-shadow:0 10px 30px rgba(0,0,0,.25);
}