:root{--k:#111;--s:#1c1f23;--b:#1f5fa8;--br:#b4bac0;--w:#fff;--g:#c9ced4}
*{box-sizing:border-box;margin:0;border-radius:0}
body{font:16px/1.5 Arial,sans-serif;background:var(--k);color:var(--w)}
h1,h2,h3,.logo{font-family:"Arial Black",Arial,sans-serif;text-transform:uppercase;letter-spacing:.5px}
a{color:inherit}
header{position:sticky;top:0;z-index:5;background:var(--k);border-bottom:4px solid var(--b);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:10px 4%}
.logo{font-size:20px;text-decoration:none}.logo span{color:var(--b)}
nav a{display:inline-block;padding:8px 12px;text-decoration:none;font-weight:bold;text-transform:uppercase;font-size:14px;border:2px solid transparent}
nav a:hover{border-color:var(--b)}
section{padding:56px 4%;max-width:1200px;margin:auto}
.hero{background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.8)),url(images/37.jpg) center/cover;border-bottom:8px solid var(--br);max-width:none;padding:90px 4%}
.hero>div{max-width:1200px;margin:auto}
h1{font-size:clamp(32px,7vw,64px);line-height:1.05;margin-bottom:16px}
h2{font-size:clamp(24px,4vw,36px);margin-bottom:24px;border-left:10px solid var(--b);padding-left:14px}
.btn{display:inline-block;background:var(--b);color:var(--w);padding:14px 24px;font-weight:bold;text-transform:uppercase;text-decoration:none;border:3px solid var(--b);margin:16px 12px 0 0}
.btn.o{background:none;border-color:var(--w)}
.bg{background:var(--s);max-width:none}.bg>div{max-width:1200px;margin:auto}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter button{background:none;color:var(--w);border:2px solid var(--g);padding:8px 14px;font:bold 14px Arial;text-transform:uppercase;cursor:pointer}
.filter button.on{background:var(--b);border-color:var(--b)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--s);border:3px solid #333;cursor:pointer;text-align:left;color:var(--w);padding:0;font:inherit}
.card:hover{border-color:var(--b)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#333}
.card div{padding:12px}.card h3{font-size:15px}.card small{color:var(--g)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.box{border:3px solid var(--b);padding:20px}.box.br{border-color:var(--br)}
.todo{border:2px dashed var(--br);padding:10px;color:var(--g);margin-top:12px;font-size:14px}
dialog{background:var(--s);color:var(--w);border:4px solid var(--b);width:min(960px,96vw);max-height:94vh;padding:20px;margin:auto}
dialog::backdrop{background:rgba(0,0,0,.85)}
dialog img{width:100%;margin-top:12px;display:block}
.x{float:right;background:var(--b);color:var(--w);border:0;padding:8px 14px;font:bold 16px Arial;cursor:pointer}
footer{background:#000;border-top:8px solid var(--br);padding:32px 4%;text-align:center;color:var(--g)}
.list{list-style:none;columns:2 180px;column-gap:20px;margin-top:10px}
.list li{padding:3px 0 3px 14px;border-left:4px solid var(--b);margin-bottom:6px;break-inside:avoid}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:24px 0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#333;border:3px solid #333}
.prod h3{margin-bottom:6px}
nav{display:flex;flex-wrap:wrap}