:root{--bg:#0f0f10;--fg:#eaeaea;--muted:#a8a8a8;--accent:#c6ff00;--card:#17181a;--line:#2a2b2e}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
header{position:sticky;top:0;background:linear-gradient(180deg,rgba(15,15,16,.9),rgba(15,15,16,.6) 60%,transparent);backdrop-filter:saturate(160%) blur(8px);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.4px}.brand small{display:block;font-weight:300;color:var(--muted)}
.menu{display:flex;gap:18px;font-weight:600}.menu a{opacity:.9}.menu a.active{opacity:1}
.section{padding:38px 0}
h1{font-size:clamp(28px,4.2vw,44px);margin:10px 0 6px}
h2{font-size:clamp(22px,2.4vw,28px);margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 18px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:end}
.hero-figure{border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tile img{aspect-ratio: 4 / 3; object-fit: cover}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:10px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted)}
dialog{border:none;padding:0;background:transparent}
dialog::backdrop{background:rgba(0,0,0,.8)}
.lightbox{max-width:min(96vw,1100px)}.lightbox img{width:100%;height:auto}
.close{position:absolute;top:12px;right:18px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 10px;cursor:pointer}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .menu{display:none} .grid{grid-template-columns:1fr} }