:root { --bg:#000; --fg:#fff; --muted:#9a9a9a; --line:#222; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center;
  gap:24px; padding:14px 24px; background:rgba(0,0,0,.92); border-bottom:1px solid var(--line); }
.brand { font-weight:800; letter-spacing:.14em; font-size:18px; }
.main-nav { display:flex; gap:20px; flex:1; flex-wrap:wrap; }
.main-nav a { text-transform:uppercase; font-size:13px; letter-spacing:.08em; color:var(--muted); }
.main-nav a:hover { color:var(--fg); }
.switches { display:flex; gap:16px; font-size:12px; color:var(--muted); }
.switches a.on { color:var(--fg); font-weight:700; }
.hero { padding:120px 24px; text-align:center; border-bottom:1px solid var(--line); }
.hero h1 { font-size:clamp(34px,7vw,80px); text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; }
.hero p { color:var(--muted); margin:0 0 28px; }
.btn { display:inline-block; background:var(--fg); color:#000; padding:14px 32px;
  text-transform:uppercase; font-weight:700; letter-spacing:.1em; font-size:13px; }
.section { padding:48px 24px; max-width:1400px; margin:0 auto; }
.section h2, .page-title { text-transform:uppercase; letter-spacing:.08em; font-size:20px; margin:0 0 24px; }
.muted { color:var(--muted); }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.cat-tile { border:1px solid var(--line); padding:44px 16px; text-align:center;
  text-transform:uppercase; letter-spacing:.1em; font-size:14px; }
.cat-tile:hover { background:var(--fg); color:#000; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card-img { aspect-ratio:4/5; background:#111; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.card:hover .card-img img { transform:scale(1.04); }
.card-body h3 { font-size:14px; margin:10px 0 4px; font-weight:600; }
.card-body p { margin:0; color:var(--muted); font-size:13px; }
.site-footer { padding:32px 24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr);} .site-header{flex-wrap:wrap;} }