@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&display=swap');

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:#0b0b0b;
  font-weight: 400;
}
h1, .brand {
  font-weight: 800;
}
.topbar{background:#0b0b0b;color:#fff}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.topbar .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px 16px}
.brand{letter-spacing:.5px}
.slogan{justify-self:center;text-align:center;font-weight:700;color:#FFFFFF}
.lang{justify-self:end}
.lang a{color:#9ae6b4;text-decoration:none;margin:0 6px;font-weight:700;opacity:.9}
.lang a.active{text-decoration:underline}
.hero{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;color:#FFFFFF;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.65);} /* darken for readability */

.hero .content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 48px 16px;
  color: #FFFFFF;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.9);
}

.buttons-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0}
@media(min-width:768px){.buttons-wrap{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.buttons-wrap{grid-template-columns:repeat(5,minmax(0,1fr))}}
:root{--btn:#34D399;--btn-h:#10B981;--btn-t:#0b1b12}
.green-btn{display:flex;align-items:center;justify-content:center;padding:16px 14px;border-radius:12px;background:var(--btn);color:var(--btn-t);font-weight:800;font-size:16px;line-height:1.2;text-decoration:none;box-shadow:0 8px 18px rgba(52,211,153,.28);transition:transform .08s ease,box-shadow .12s ease;min-height:64px;text-align:center}
.green-btn:hover{background:var(--btn-h);box-shadow:0 12px 26px rgba(16,185,129,.36);transform:translateY(-2px)}

.footer {
  border-top: 1px solid #eee;
  padding: 32px 16px;
  margin-top: 48px;
  text-align: center;
  font-size: 16px;
}
.footer-links, .footer-contacts {
  margin-bottom: 20px;
}
.footer-links a, .footer-contacts a {
  color: #444;
  text-decoration: none;
  margin: 0 12px;
  transition: color 0.2s ease;
}
.footer-links a:hover, .footer-contacts a:hover {
  color: #0b0b0b;
  text-decoration: underline;
}
.footer-copy {
  font-size: 14px;
  color: #777;
  margin-top: 32px;
}

/* === СТИЛИ ДЛЯ ОКНА ПАРОЛЯ === */
#login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#login-box {
  background-color: #1a1a1a;
  padding: 40px;
  border-radius: 10px;
  text-align: center;
  color: white;
  width: 90%;
  max-width: 400px;
}

#login-box h2 {
  margin-top: 0;
  color: #34D399;
}

#password-input {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border-radius: 5px;
  border: 1px solid #555;
  background-color: #333;
  color: white;
  font-size: 16px;
}

#password-submit {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  border-radius: 5px;
  border: none;
  background-color: #34D399;
  color: #0b1b12;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#password-submit:hover {
  background-color: #10B981;
}

#error-message {
  color: #ff8a80;
  margin-top: 15px;
  height: 20px;
}