:root{
  --bg:#0b0b0b; --card:#121212; --muted:#bdbdbd; --text:#eaeaea;
  --brand:#d4af37; --brand-ink:#000; --ring:#2a2a2a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#000;color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:980px;margin:0 auto;padding:0 20px}

.header-hero{
  height:180px;
  background:#000 url("web_images/header.jpg") center/cover no-repeat;
  border-bottom:1px solid #000;
}
.footer-hero{
  height:160px;
  background:#000 url("web_images/footer.jpg") center/cover no-repeat;
  border-top:1px solid #000;
}

.brand{display:flex;align-items:center;gap:10px;padding:14px 0}
.brand img{border-radius:50%}
.brand strong{font-weight:700}
.lang{margin-left:auto;display:flex;gap:8px}
.lang button{
  border:1px solid #3a3a3a;background:#1a1a1a;color:#ddd;border-radius:10px;padding:6px 10px;cursor:pointer
}
.lang button.active{background:var(--brand);color:#000;border-color:transparent}

.card{
  background:var(--card);border:1px solid var(--ring);border-radius:14px;
  padding:24px;margin:10px 0 60px 0;box-shadow:0 1px 0 #000 inset;
}
.h1{font-size:32px;line-height:1.2;color:var(--brand);margin:0 0 10px 0}
.button{
  display:inline-block;background:var(--brand);color:var(--brand-ink);
  padding:14px 20px;border-radius:10px;font-weight:700;text-decoration:none
}
.button:hover,.button:focus{transform:translateY(-1px)}
.footnote{padding:18px 0 32px 0;color:#cfcfcf;text-align:center;font-size:13px}

@media (max-width:600px){
  .header-hero{height:140px}
  .footer-hero{height:140px}
  .h1{font-size:28px}
  .card{padding:20px}
}