body{
margin:0;
font-family:sans-serif;
background:#f7f8fc;
color:#333;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 30px;
background:rgb(255, 255, 255);
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.logo{
font-size:24px;
font-weight:bold;
color:#0077ff;
}

.nav-buttons a{
text-decoration:none;
margin-left:15px;
padding:8px 16px;
border-radius:6px;
font-weight:600;
}

.login-btn{
background:#0077ff;
color:white;
}

.signup-btn{
border:2px solid #0077ff;
color:#0077ff;
}

.hero{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:50px 20px;
}

.hero h1{
font-size:32px;
margin-bottom:0px;
}

.hero p{
max-width:650px;
font-size:18px;
line-height:1.7;
color:#555;
}

.hero-buttons{
margin-top:15px;
display:flex;
gap:20px;
}

.hero-buttons a{
padding:10px 18px;
border-radius:16px;
font-size:20px;
text-decoration:none;
font-weight:bold;
}

.primary{
background:#0077ff;
color:white;
}

.secondary{
border:2px solid #0077ff;
color:#0077ff;
}

.features{
background:white;
padding:20px 20px;
}

.features h2{
text-align:center;
margin-bottom:40px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}

.feature{
background:#f7f8fc;
padding:25px;
border-radius:10px;
}

.feature h3{
margin-top:0;
}





.menu-footer{
    background: #0077ff;
    color: rgba(255,255,255,0.9);
    margin-top: 30px;
    padding: 32px 10px;
    font-size: 13px;
}

.footer-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.menu-footer a{
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    opacity: 0.95;
}

.menu-footer a:hover{
    opacity: 1;
    text-decoration: underline;
}