*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:"Inter",sans-serif;

background:#0F172A;

color:white;

overflow-x:hidden;

}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

header{

min-height:100vh;

padding:0 8%;

background:
radial-gradient(circle at top left,#2563eb 0%,transparent 40%),
radial-gradient(circle at bottom right,#06b6d4 0%,transparent 35%),
#0F172A;

}

.navbar{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:30px;

font-weight:800;

font-family:Poppins,sans-serif;

}

.logo span{

color:#38BDF8;

}

.nav-links{

display:flex;

gap:40px;

}

.nav-links a{

font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:#38BDF8;

}

.hero{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

height:calc(100vh - 90px);

}

.hero h1{

font-size:72px;

font-family:Poppins;

font-weight:800;

margin:15px 0;

}

.hero h2{

font-size:32px;

color:#38BDF8;

height:45px;

}

.description{

margin-top:25px;

max-width:600px;

line-height:1.8;

color:#CBD5E1;

}

.buttons{

margin-top:40px;

display:flex;

gap:20px;

}

.btn{

padding:16px 35px;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.primary{

background:#2563EB;

}

.secondary{

border:2px solid #38BDF8;

}

.primary:hover{

transform:translateY(-5px);

}

.secondary:hover{

background:#38BDF8;

color:#000;

}

.hero-image{

display:flex;

justify-content:center;

position:relative;

}

.hero-image img{

width:420px;

border-radius:50%;

border:8px solid #2563EB;

position:relative;

z-index:2;

}

.glow{

position:absolute;

width:450px;

height:450px;

background:#2563EB;

filter:blur(120px);

opacity:.35;

border-radius:50%;

}

.socials{

margin-top:45px;

display:flex;

gap:20px;

}

.socials i{

font-size:26px;

transition:.3s;

}

.socials i:hover{

color:#38BDF8;

transform:translateY(-5px);

}