body {
font-family: system-ui, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}


.container { max-width: 1100px; margin: auto; padding: 1rem; }


.header { background: #000; }
.nav { display: flex; align-items: center; justify-content: space-between; }
.logo { height: 70px; }


nav ul { display: flex; gap: 1rem; list-style: none; }
nav a { color: white; text-decoration: none; }
nav a:focus { outline: 3px solid var(--focus); }


.hero { padding: 5rem 1rem; text-align: center; }


.btn-primary {
background: var(--primary);
color: var(--text-dark);
padding: .9rem 1.4rem;
border-radius: var(--radius);
display: inline-block;
font-weight: bold;
}
.btn-primary:hover, .btn-primary:focus { background: #9cf5f5; }


.section { padding: 4rem 1rem; }
.alt { background: #111; }


.grid-3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.5rem; }
.card { background: #0d0d0d; padding: 1.5rem; border-radius: var(--radius); }


.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 10px;
top: 10px;
background: #fff;
color: #000;
padding: .5rem;
}