/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;
    color:#111;
    background:#f7f7f7;
}
a{color:#0059ff;text-decoration:none}
header{
    background:#fff;
    padding:1rem 1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #e5e5e5;
}
header h1{font-size:1.4rem;color:#0059ff}
nav a{margin-left:1rem;font-size:.9rem}
main{max-width:900px;margin:2rem auto;padding:0 1rem}
#hero{
    background:#fff;
    padding:2rem 1.5rem;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
    text-align:center;
}
#hero h2{font-size:1.6rem;margin-bottom:.5rem}
#hero button{
    margin-top:1rem;
    padding:.7rem 1.4rem;
    border:none;
    border-radius:4px;
    background:#0059ff;
    color:#fff;
    cursor:pointer;
}
article{
    background:#fff;
    padding:2rem 1.5rem;
    margin-top:2rem;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}
article h3{font-size:1.4rem;margin-bottom:1rem}
article p{margin-bottom:1rem;text-align:justify}
.inline-link{color:#0059ff;font-weight:600}

#calculator{
    background:#fff;
    padding:2rem;
    margin-top:2rem;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}
#calculator label{display:block;margin-bottom:.5rem}
#calculator input{
    width:100%;
    padding:.5rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:4px;
}
footer{
    text-align:center;
    padding:2rem 0;
    font-size:.8rem;
    color:#666;
}

@media(max-width:600px){
    header{flex-direction:column;align-items:flex-start}
    nav a{margin:.2rem .5rem 0 0}
}