:root { 
  --bg:#0B0C0F; 
  --fg:#fff; 
  --mut:#bfbfc9; 
  --card:#15161b; 
  --line:#24252c; 
}

* { 
  box-sizing: border-box; 
}

body { 
  margin:0; 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; 
  background:var(--bg); 
  color:var(--fg); 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

.container { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

header { 
  position: sticky; 
  top:0; 
  background:rgba(11,12,15,.8); 
  backdrop-filter: blur(8px); 
  border-bottom:1px solid var(--line); 
}

nav a { 
  padding:10px 14px; 
  border-radius: 999px; 
  display:inline-flex; 
  gap:8px; 
  align-items:center; 
  font-size:14px; 
  color:#e6e6ea; 
}

nav a.active, nav a:hover { 
  background:#fff; 
  color:#000; 
}

.kicker { 
  color:#a8a8b5; 
  text-transform: uppercase; 
  letter-spacing: .2em; 
  font-size:12px; 
  margin-bottom:6px; 
}

h1 { 
  font-size: 34px; 
  margin: 14px 0; 
}

h2 { 
  font-size: 26px; 
  margin: 18px 0 10px; 
}

h3 { 
  font-size: 18px; 
  margin: 12px 0 8px; 
}

p, li { 
  color:#d7d7de; 
  line-height:1.6; 
}

section { 
  padding: 32px 0; 
  border-bottom:1px solid var(--line); 
}

.grid { 
  display:grid; 
  gap:14px; 
}

.grid-2 { 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
}

.grid-3 { 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
}

.card { 
  background: var(--card); 
  border:1px solid var(--line); 
  border-radius: 16px; 
  padding: 16px; 
}

.badge { 
  display:inline-flex; 
  padding:6px 10px; 
  font-size:12px; 
  border:1px solid var(--line); 
  border-radius:999px; 
  color:#e6e6ea; 
  margin-right:8px; 
}

footer { 
  background:#0f1014; 
  border-top:1px solid var(--line); 
  padding: 36px 0; 
  font-size:14px; 
}

ul.inline { 
  list-style: disc; 
  padding-left: 18px; 
}

ol.inline { 
  padding-left:18px; 
}

.muted { 
  color:#a8a8b5; 
  font-size: 14px; 
}