.container{width:min(1140px,100% - 2rem);margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:1rem;top:1rem;background:var(--surface);padding:.5rem 1rem;z-index:99}
.site-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:1.2rem;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;font-weight:800;font-size:1.2rem;text-decoration:none;color:var(--text)}
.logo img{max-height:44px}
.nav{display:flex;gap:.2rem;flex:1;flex-wrap:wrap}
.nav-item{position:relative}
.nav-item>a{display:block;padding:.5rem .8rem;color:var(--text);text-decoration:none;border-radius:8px}
.nav-item>a:hover{background:var(--bg)}
.dropdown{display:none;position:absolute;inset-inline-start:0;top:100%;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.3rem;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:.45rem .7rem;color:var(--text);text-decoration:none;border-radius:6px}
.dropdown a:hover{background:var(--bg)}
.tools{display:flex;align-items:center;gap:.5rem}
.tools .lang{font-size:.85rem;color:var(--muted);text-decoration:none}
.tools .lang.active{color:var(--primary);font-weight:700}
.theme-btn{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:8px;padding:.3rem .6rem;cursor:pointer;font-size:1rem}
.hero{padding:5rem 0;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:0 0 1rem}
.lead{font-size:1.2rem;max-width:720px;margin:0 auto 1rem}
.site-footer{margin-top:3rem;border-top:1px solid var(--border);background:var(--surface);padding:2rem 0}
.footer-nav{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.footer-nav a{color:var(--text)}
.copyright{color:var(--muted);font-size:.88rem}