:root { --z-bg: #000; --z-card: #0a0a0a; --z-border: #1a1a1a; --z-prime: #fff; --z-text: #ccc; }
body { margin: 0; background: var(--z-bg); color: var(--z-text); font-family: 'Inter', sans-serif; }
.z-header { position: fixed; top: 0; width: 100%; height: 60px; background: rgba(0,0,0,0.8); backdrop-filter: blur(15px); z-index: 2000; border-bottom: 2px solid var(--z-border); }
.z-inner { max-width: 1300px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.z-nav a { color: #555; text-decoration: none; font-weight: 800; font-size: 13px; margin: 0 20px; text-transform: uppercase; transition: 0.3s; }
.z-nav a:hover, .z-nav .active { color: #fff; }
.z-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.z-card { background: var(--z-card); border: 1px solid var(--z-border); text-decoration: none; transition: 0.3s; display: block; overflow: hidden; position: relative; }
.z-card:hover { border-color: #fff; transform: translateY(-5px); }
.z-img { width: 100%; aspect-ratio: 1.1; display: flex; align-items: center; justify-content: center; background: #000; }
.z-img img { width: 55%; filter: grayscale(0.5); }
.z-info { padding: 25px; border-top: 1px solid var(--z-border); }