body{

font-family:system-ui,Segoe UI,Roboto,Arial;

margin:0;

background:#f6f8fb;

color:#0d1b2a;

line-height:1.6;

}

.container{

max-width:1100px;

margin:auto;

padding:0 20px;

}


header{

background:white;

border-bottom:1px solid #e5e7eb;

}


.header-inner{

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

}


.brand{

display:flex;

align-items:center;

gap:14px;

}


.brand img{

height:36px;

}


.brand-text strong{
font-size:14px;
letter-spacing:2px;
color:#0f172a;
}



.brand-text span{

font-size:12px;

color:#64748b;

}


nav a{

margin-left:28px;

text-decoration:none;

color:#334155;

font-size:14px;

}


nav .cta{

padding:10px 14px;

border:1px solid #e2e8f0;

border-radius:6px;

}


.hero{

padding:100px 0;

}


.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:center;

}

.hero h1{
font-size:64px;
line-height:1.05;
letter-spacing:-1px;
margin-bottom:24px;
}



.hero p{

color:#475569;

font-size:18px;

max-width:520px;

}


.tag{

font-size:12px;

text-transform:uppercase;

color:#2563eb;

margin-bottom:20px;

}


.buttons{

margin-top:30px;

}


.btn{

padding:14px 22px;

border-radius:6px;

text-decoration:none;

margin-right:12px;

font-weight:500;

}


.btn.primary{
background:#0f172a;
color:white;
}

.btn.secondary{
border:1px solid #0f172a;
color:#0f172a;
}



.hero-right{

text-align:center;

}


.hero-logo{
width:110px;
margin-bottom:24px;
opacity:0.9;
}


.hero-box{

background:#f1f5f9;

padding:24px;

border-radius:10px;

border:1px solid #e5e7eb;

}


.hero-box ul{

list-style:none;

padding:0;

}


.hero-box li{

padding:8px 0;

border-bottom:1px solid #f1f5f9;

}


.services{

padding:100px 0;

background:#ffffff;

}


.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:40px;

}


.card{

padding:24px;

background:#f8fafc;

border-radius:8px;

}


.about{

padding:100px 0;

}


.contact{

padding:100px 0;

background:#0f172a;

color:white;

}


footer{

background:white;

padding:40px 0;

}


.footer-inner{

display:flex;

justify-content:space-between;

align-items:center;

}


.footer-brand img{

height:28px;

margin-right:10px;

}


.footer-brand{

display:flex;

align-items:center;

}