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

body{
       margin:0;
       font-family:Arial, sans-serif;
       color:#0b0f19;
}
.hero{
       background:linear-gradient(135deg,#0b0f19,#182236);
       padding:40px; color:white;
}
nav ul{
       list-style: none;
       display:flex;
       justify-content:flex-end;
       align-items:center;
}
nav .home-li{
       margin-right: auto;
}
nav a{
       height 100%;
       display:flex;
       align:center;
       margin-left:20px;
       color:white;
       text-decoration:none;
}
.nav li:first-child{
       margin-right:auto;
}
.btn{
       padding:8px 14px;
       border:1px solid white;
       border-radius:6px;
}
.hero-content{
       margin-top:80px;
       max-width:600px;
}
.hero-content h1{
       font-size:42px;
       margin-bottom:20px;
}
.cta{
       display:inline-block;
       margin-top:20px;
       background:white;
       color:#0b0f19;
       padding:12px 20px;
       border-radius:6px;
       text-decoration:none;
       font-weight:bold;
}
.section{
       padding:60px 20px;
}
.section.alt{
       background:#f7f9fc;
}
.grid-4{
       display:grid;
       grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
       gap:20px;
       margin-top:30px;
}
.card{
       background:white;
       padding:20px;
       border-radius:8px;
       box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.features li{
       margin:10px 0;
}
.footer{
       text-align:center;
       padding:30px;
       background:#0b0f19;
       color:white;
}
.login-container{
       max-width:400px;
       margin:120px auto;
       text-align:center;
}