:root{
  --bg:#0d1214;--bg2:#141b1e;--fg:#e8ecec;--mute:#9aa7a9;--line:#243034;
  --accent:#e0533d;--c1:#7f8a1d;--c2:#7a2a24;--c3:#1f6b66;
  --gap:clamp(12px,1.6vw,24px);--pad:clamp(12px,2.4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 85% -10%,#1d3a38 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#3a1d1a 0,transparent 60%),var(--bg);}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--gap);padding:10px var(--pad);
  background:rgba(13,18,20,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.brand img{display:block;height:36px;width:auto}
.tabs{display:flex;gap:6px;margin-left:clamp(0px,2vw,24px);flex:1;min-width:0}
.tabs a{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--mute);white-space:nowrap;transition:.15s}
.tabs a:hover{color:var(--fg);background:var(--bg2)}
.tabs a[aria-current]{color:#fff;background:var(--accent)}
.langs{display:flex;gap:2px;font-size:.85rem;font-weight:600}
.langs a{padding:6px 9px;border-radius:8px;text-decoration:none;color:var(--mute)}
.langs a:hover{color:var(--fg)}
.langs a[aria-current]{color:var(--fg);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}

main{flex:1;width:100%;max-width:2000px;margin:0 auto;padding:var(--pad)}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .15s,border-color .15s}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--accent);outline:none}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.card:hover .thumb img{transform:scale(1.04)}
.play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);opacity:.9}
.play::after{content:"";position:absolute;left:21px;top:16px;border:11px solid transparent;border-left:17px solid #fff}
.title{padding:12px 14px 14px;font-weight:600;line-height:1.35}

.cols{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);align-items:center;max-width:1200px;margin:2vh auto}
.cols.contact{grid-template-columns:1fr 1.2fr;max-width:900px}
.box{padding:22px 24px;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.box p{margin:0 0 1em}.box p:last-child{margin:0}
.box hr{border:0;border-top:1px solid rgba(255,255,255,.4);margin:1.1em 0}
.b0{background:rgba(127,138,29,.55)}.b1{background:rgba(122,42,36,.6)}.b2{background:rgba(31,107,102,.6)}
.b2{align-self:stretch}
.text a{text-underline-offset:3px}

.foot{display:flex;flex-wrap:wrap;gap:8px var(--gap);justify-content:space-between;align-items:center;padding:18px var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a{text-decoration:none}.foot a:hover{color:var(--fg)}

dialog{border:0;padding:0;background:transparent;width:min(96vw,calc((100vh - 24px)*16/9));max-width:none;overflow:visible}
dialog::backdrop{background:rgba(0,0,0,.88)}
dialog .frame{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
dialog iframe{width:100%;height:100%;border:0;display:block}
dialog .x{position:absolute;right:0;top:-40px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
dialog .x:hover{background:var(--accent)}

@media (max-width:820px){
  .top{flex-wrap:wrap;gap:6px 10px;padding:8px 12px}
  .brand{order:1;flex:1}.langs{order:2}
  .tabs{order:3;flex:1 0 100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .tabs a{padding:7px 12px;font-size:.92rem}
  .cols,.cols.contact{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
  dialog .x{top:-44px}
}
@media (max-width:480px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}