<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

html {
    overflow-x: hidden;
}
body{
font-family:'Outfit',sans-serif;
background:#f8f9ff;
color:#161616;
overflow-x:hidden;
}

.container{
width:min(1180px,90%);
margin:auto;
}

a{
text-decoration:none;
}

section{
padding:30px 0;
position:relative;
}

.blur{
position:absolute;
border-radius:50%;
filter:blur(100px);
z-index:-1;
}

.blur.one{
width:400px;
height:400px;
background:#ded8ff;
top:-120px;
left:-120px;
}

.blur.two{
width:350px;
height:350px;
background:#dff7ff;
right:-120px;
bottom:-120px;
}

/* NAVBAR */

header{
position:fixed;
top:20px;
left:0;
right:0;
z-index:999;
padding:0 20px;
display:flex;
justify-content:center;
}

.navbar{
width:100%;
max-width:1180px;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 28px;

border-radius:24px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(20px);

box-shadow:0 10px 40px rgba(122,111,255,0.08);
}

.logo{
font-size:1.5rem;
font-weight:800;
background:linear-gradient(to right,#7468ff,#aa9dff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.logo img{
height:55px;
width:auto;
display:block;
}

.nav-links{
display:flex;
gap:32px;
align-items:center;
}

.nav-links a{
color:#646b7c;
font-weight:500;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 30px;
border-radius:16px;
font-weight:700;
transition:0.3s ease;
}

.btn-primary{
background:linear-gradient(135deg,#7468ff,#9f93ff);
color:white;
box-shadow:0 14px 35px rgba(116,104,255,0.22);
}

.btn-primary:hover{
transform:translateY(-3px);
}

.btn-light{
background:white;
color:#7468ff;
border:1px solid #ececff;
}

ul#menu-header-menu li::marker {
    display: none;
    content: none;
}


/* HERO */

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding-top:120px;
}

.hero-grid{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:70px;
align-items:center;
}

.hero-tag{
display:inline-block;
padding:12px 18px;
border-radius:100px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.8);
margin-bottom:28px;
color:#7468ff;
font-size:14px;
font-weight:700;
}

.hero h1{
/*font-size:5rem;*/
line-height:1.05;
font-weight:800;
margin-bottom:24px;
font-size:62px;

}

.hero p{
font-size:1.1rem;
line-height:1.9;
color:#667085;
max-width:580px;
margin-bottom:36px;
}

.hero-btns{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.hero-card{
padding:38px;
border-radius:36px;
background:rgba(255,255,255,0.55);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.8);
box-shadow:0 20px 50px rgba(116,104,255,0.12);
}

.stats-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.stat-box{
padding:26px;
border-radius:24px;
background:white;
box-shadow:0 10px 30px rgba(116,104,255,0.08);
}

.stat-box h3{
font-size:2.2rem;
color:#7468ff;
margin-bottom:8px;
}

.big-box{
margin-top:18px;
padding:30px;
border-radius:26px;
background:linear-gradient(135deg,#7468ff,#9f93ff);
color:white;
}

/* SECTION TITLE */

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title h2{
font-size:3.4rem;
margin-bottom:18px;
}

.section-title p{
max-width:760px;
margin:auto;
line-height:1.9;
color:#667085;
}

/* SERVICES */

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:25px;
}

.service-card{
padding:36px;
border-radius:32px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.8);
box-shadow:0 14px 40px rgba(116,104,255,0.08);
transition:0.3s ease;
}

.service-card:hover{
transform:translateY(-10px);
}

.icon{
width:72px;
height:72px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.7rem;
margin-bottom:22px;
background:linear-gradient(135deg,#efeaff,#dff7ff);
}

.service-card h3{
font-size:1.5rem;
margin-bottom:14px;
}

.service-card p{
line-height:1.8;
color:#667085;
}

/* WHY */

.why-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.why-card{
padding:38px;
border-radius:30px;
background:rgba(255,255,255,0.65);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.8);
box-shadow:0 14px 40px rgba(116,104,255,0.08);
}

.why-item{
display:flex;
gap:18px;
margin-bottom:26px;
}

.why-icon{
width:52px;
height:52px;
border-radius:16px;
background:#f0eeff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
}

/* PROCESS */

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:24px;
}

.process-card{
padding:36px 28px;
text-align:center;
border-radius:30px;
background:white;
box-shadow:0 12px 35px rgba(116,104,255,0.08);
}

.process-num{
width:70px;
height:70px;
border-radius:50%;
background:linear-gradient(135deg,#7468ff,#9f93ff);
color:white;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:20px;
font-size:1.5rem;
font-weight:700;
}

/* TESTIMONIALS */

.testimonials{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:24px;
}

.testimonial-card{
padding:34px;
border-radius:28px;
background:rgba(255,255,255,0.75);
backdrop-filter:blur(18px);
box-shadow:0 14px 40px rgba(116,104,255,0.08);
}

.stars{
margin-bottom:18px;
font-size:1.1rem;
}

.testimonial-card p{
line-height:1.9;
color:#667085;
margin-bottom:20px;
}

.client{
display:flex;
align-items:center;
gap:14px;
}

.avatar{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#7468ff,#9f93ff);
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}

/* CTA */

.cta{
padding:80px;
border-radius:40px;
background:linear-gradient(135deg,#7468ff,#9f93ff);
text-align:center;
color:white;
box-shadow:0 20px 50px rgba(116,104,255,0.18);
}

.cta h2{
font-size:3.5rem;
margin-bottom:18px;
}

.cta p{
max-width:760px;
margin:auto;
line-height:1.9;
margin-bottom:34px;
}

/* FOOTER */

footer{
padding:80px 0 30px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
margin-bottom:40px;
}

.footer-links{
display:flex;
flex-direction:column;
gap:14px;
}

.footer-links a{
color:#667085;
}

.footer-bottom{
padding-top:24px;
border-top:1px solid #ececff;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:12px;
color:#667085;
}

@media(max-width:900px){

.hero-grid,
.why-grid,
.footer-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:3.2rem;
}

.nav-links{
display:none;
}

.section-title h2{
font-size:2.5rem;
}

.cta{
padding:50px 28px;
}

.cta h2{
font-size:2.3rem;
}

}

</style>