/* Contenedores, header y grillas. */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px}
.brand__mark{width:34px;height:34px;flex:none}
.brand small{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--faint);font-weight:500;text-transform:uppercase;margin-top:2px}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.nav nav a:hover{color:var(--text)}
.btn{display:inline-block;padding:11px 22px;border-radius:var(--radius);font-weight:600;font-size:15px;border:1px solid transparent;font-family:var(--font-body)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--cool);color:var(--cool)}
@media(max-width:860px){.nav nav{display:none}}