*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font:16px/1.6 var(--font); color:var(--text); background:var(--bg); }
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--container), 92%); margin-inline:auto}
.btn{display:inline-block; padding:.8rem 1.2rem; border-radius:var(--radius); border:1px solid transparent}
.btn-primary{background:var(--brand); color:#111; font-weight:600}
.btn-ghost{border-color:rgba(255,255,255,.2); color:var(--text)}
.card{background:var(--bg-soft); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow)}
.grid-3{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}