:root{
  --bg:#0d0d0d;
  --panel:#1a1a1a;
  --text:#f5f5f5;
  --head:#ffffff;
  --accent:#e02525;
  --accent-hover:#ff3333;
  --accent-dark:#b81f1f;
  --muted:#bdbdbd;
  --border:#222;
  /* dynamic header height (set from JS) */
  --header-h: 70px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  width:100%;
  overflow-x:hidden;
}

a{color:var(--accent);text-decoration:none;transition:0.2s}
a:hover{color:var(--accent-hover)}

/* Ensure media elements never overflow */
img, svg, video, canvas{ max-width:100%; height:auto; display:block; }
iframe{ max-width:100%; }

h1,h2,h3{
  color:var(--head);
  margin:0 0 .5rem;
  font-weight:700;
  overflow-wrap:anywhere;
  word-break:break-word;
}
h1{font-size: clamp(32px, 6vw, 64px)}
h2{font-size: clamp(24px, 4.5vw, 40px)}
h3{font-size: clamp(18px, 3.5vw, 28px)}
p{font-size:17px;line-height:1.6}

.container{width:min(1200px,92%);margin:0 auto}
.pad-y{padding: clamp(30px, 8vw, 60px) 0}

/* HEADER */
.logo img {
  max-width: clamp(60px, 8vw, 60px); /* регулируй под свой размер */
  height: auto;
  display: block;
  max-height: calc(var(--header-h, 70px) - 16px);
}


.header{
  background:#111;
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:100;
  border-bottom:1px solid var(--border);
  transition: transform .3s ease;
  will-change: transform;
  height: var(--header-h, 70px);
}
.header--hidden{ transform: translateY(-100%); }

/* offset page content for fixed header */
.main{ padding-top: var(--header-h, 70px); }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  position:relative;
  height:100%;
  min-height: var(--header-h, 70px);
}
.logo a{color:var(--accent);font-weight:800;letter-spacing:1px;font-size:20px; display:flex; align-items:center; height: var(--header-h, 70px)}
.nav{display:flex;gap:24px; align-items:center}
.nav a{color:#ddd;text-transform:uppercase;font-size:14px;font-weight:600; display:inline-flex; align-items:center; height: var(--header-h, 70px)}
.nav a:hover{color:var(--head)}
.header-actions{display:flex;align-items:center;gap:12px; height: var(--header-h, 70px)}
.burger{display:none}

/* Center nav on desktop without overlap */
@media (min-width: 641px){
  .header-inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    height: var(--header-h, 70px);
  }
  .logo{ justify-self:start; }
  .header .nav{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    justify-content:center;
    place-self:center;
  }
  .header-actions{ justify-self:end; }
  /* Hide mobile-only items on desktop */
  .header .nav .nav-logo,
  .header .nav .nav-cta,
  .header .nav .nav-header { display: none !important; }
}

/* LANG SWITCH */
.lang-switch .lang{
  padding:6px 8px;
  border-radius:6px;
  background:#222;
  color:#aaa;
  border:1px solid #333;
  display:inline-flex; align-items:center; height:32px;
}
.lang-switch .lang.active{color:#fff;border-color:var(--accent)}

/* BUTTONS */
.btn{
  background:var(--panel);
  color:#fff;
  border:0;
  padding:12px 22px;
  border-radius:8px;
  cursor:pointer;
  display:inline-inline;
  transition:all .3s ease;
  font-weight:600;
}
.btn:hover{background:#222}
.btn-accent{background:var(--accent)}
.btn-accent:hover{background:var(--accent-hover)}

/* small buttons for admin controls */
.btn.btn--sm{
  padding:8px 12px;
  font-size:14px;
  border-radius:6px;
  line-height:1.1;
}
.btn--edit{
  background:#2b2b2b;
  border:1px solid #3a3a3a;
  color:#eee;
}
.btn--edit:hover{
  background:#3a3a3a;
}
.btn--danger{
  background:#b81f1f;
  border:1px solid #b81f1f;
  color:#fff;
}
.btn--danger:hover{
  background:#e02525;
}

/* admin controls container under news cards */
.admin-controls{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:center;
}
.admin-controls form{ margin:0; }

/* HERO */
.hero{
  background-size:cover;
  background-position:center;
  padding: clamp(80px, 12vw, 120px) 0;
  border-bottom:1px solid var(--border);
  color:#fff;
}
.hero-inner{max-width:720px}
.hero-inner h1{
  font-size: clamp(36px, 8vw, 64px);
  font-weight:800;
  line-height:1.1;
}
.hero-inner p{
  margin-top:12px;
  font-size: clamp(16px, 3.8vw, 20px);
  color:#ccc;
}
.hero-inner .btn-row{margin-top:20px;display:flex;gap:12px}

/* CARDS */
.cards{display:grid;gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  transition:all .3s ease;
}
.card:hover{transform:none!important;box-shadow:none!important}
.card.service{text-align:center}
.card.service .icon{font-size:36px;margin-bottom:12px;color:var(--accent)}
.card.service.highlight{background:var(--accent);color:#fff;border-color:var(--accent)}

/* FOOTER */
.footer{
  background:#111;
  border-top:1px solid var(--border);
  margin-top:60px;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
  color:#888;
}

/* FORMS */
.form{border:0;border-radius:12px;padding:20px;max-width:640px}
.form-row{display:flex;flex-direction:column;margin-bottom:14px}
.input,.textarea,select{
  background:#1e1e1e;
  color:#fff;
  border:1px solid #333;
  border-radius:8px;
  padding:10px;
}
.input:focus,.textarea:focus,select:focus{outline:none;border-color:var(--accent)}
.textarea{min-height:160px}
.error{color:#ff6666;font-size:14px}

/* FLASH MESSAGES */
.flash{
  position: fixed;
  top: calc(var(--header-h,70px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  z-index: 9999;
  width: min(92%, 520px);
}
.flash-item{
  background:#1b1b1b;
  color:#fff;
  border:1px solid #333;
  border-radius:10px;
  padding:10px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: opacity .3s ease, transform .3s ease;
}
.flash-item.success{ border-color: #1f7a3e; background:#12351f; }
.flash-item.error{ border-color: #b81f1f; background:#2a1414; }
.flash-item.warning{ border-color: #9a6b1f; background:#2a2214; }
.flash-item.info{ border-color: #2563eb; background:#101a2e; }
.flash-item.hide{ opacity:0; transform: translateY(-6px); }

/* AUTH PAGES: light card within dark site */
.auth-wrap{display:flex;justify-content:center}
.auth-card{
  width:min(980px,100%);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
  background:#f9f9fb;
  color:#111;
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
}
.auth-media{background:#fff;display:flex;align-items:center;justify-content:center;padding:30px}
.auth-media img{max-width:360px;filter: none}
.auth-form{padding:30px 26px}
.auth-title{color:#111; margin: 0 0 12px; font-size: clamp(26px, 4vw, 36px)}
.auth-form .input{background:#fff;color:#111;border:1px solid #ddd}
.auth-form .input:focus{border-color: var(--accent)}
.auth-switch{margin-top:8px;color:#666;font-size:14px}
.auth-switch a{color: var(--accent)}

@media (max-width: 820px){
  .auth-card{ grid-template-columns: 1fr; }
  .auth-media{ order:-1; padding:18px }
  .auth-media img{ max-width: 220px; }
}

/* RESPONSIVE */
@media (max-width:1000px){
  .cards.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cards.three,.cards.two,.cards.four{grid-template-columns:1fr}
  .nav{position:fixed;left:0;top:0;bottom:0;width:72vw;max-width:280px;background:var(--bg);border-right:1px solid #333;padding:18px 16px 20px;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;gap:14px;z-index:200;height:100vh;overflow-y:auto}
  .nav.open{transform:translateX(0); background:var(--bg);}
  .nav-header{display:flex;align-items:center;justify-content:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #222}
  .nav-logo img{max-width:130px;height:auto;display:block;}
  .nav-cta{margin-top:0 !important; background: var(--accent); color:#fff; border:1px solid var(--accent-dark)}
  .nav-cta:hover{background: var(--accent-hover);}
  .burger{display:block;background:transparent;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:8px}
  .header-actions .btn{display:none}
}
.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-form h3,
.footer-contacts h3 {
  color: #ff2e2e;
  margin-bottom: 15px;
}

.footer-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-form input,
.footer-form textarea {
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px;
}

.footer-form button {
  background: #e02525;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
.footer-form {
  max-width: 690px;
  
}
.form-row.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* Увеличиваем расстояние между полями */
}

.footer-form button:hover {
  background: #ff3333;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}

.footer-map iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  filter: invert(0.9) hue-rotate(180deg) contrast(90%) brightness(90%);
}

.footer-contacts p {
  margin: 8px 0;
}

.footer-contacts .socials {
  margin-top: 10px;
}

.footer-contacts .socials a {
  color: #ff2e2e;
  text-decoration: none;
}

.footer-contacts .socials a:hover {
  text-decoration: underline;
}

.footer-copy {
  text-align: center;
  border-top: 1px solid #333;
  margin-top: 40px;
  padding: 20px 0;
  font-size: 13px;
  color: #888;
}

  
.footer-top {
  display: grid;
  grid-template-columns: 3fr 1fr; /* форма занимает больше места, логотип меньше */
  max-width: 960px; /* общая ширина блока */
  align-items: start; /* форма и логотип сверху */
  gap: 40px;
}

.footer-form {
  max-width: 100%;
}
.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-logo img {
  max-width: 500px; /* увеличиваем максимальную ширину */
  width: 100%;       /* изображение будет растягиваться по контейнеру */
  height: auto;
  padding-top: 35px;      /* сохраняем пропорции */
}
/* Адаптив */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-logo {
    margin-top: 20px;
  }
}

@media (max-width: 900px) {
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-map > div { height: 300px !important; }
}

@media (max-width: 600px) {
  .footer-map > div { height: 220px !important; }
  .footer-logo img { max-width: 160px; padding-top: 0; }
  .footer-contacts h3 { font-size: 18px; }
  .footer-contacts p { font-size: 14px; line-height: 1.45; margin: 6px 0; }
  .footer-contacts .socials a { font-size: 14px; }
  /* reorder sections: contacts (in footer-bottom) go before logo (in footer-top) */
  .footer-bottom { order: 1; }
  .footer-top { order: 2; }
}

@media (max-width: 520px){
  .form-row.two-cols{ grid-template-columns: 1fr; }
}