:root{
  --sidebar-w: 360px;
  --bg-dark: #2c2c2e;
  --text: #e7e7e7;
  --muted: #9aa0a6;
  --accent: #6fd1c6; /* мягкий бирюзовый */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: #0f1a1a;
  margin:0;
}

/* Mobile menu trigger */
.menu-toggle{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1051;
  border-color: rgba(255,255,255,.35);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Sidebar (≥LG) */
.sidebar{
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-dark);
  padding: 56px 40px;
  border-left: 1px solid rgba(255,255,255,.06);
  z-index: 1020;
}
.sidebar .nav-link{
  color: var(--text);
  letter-spacing: .08em;
  padding: .35rem 0;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
  opacity: .9;
}
.sidebar .nav-link:hover{ color: #fff; opacity: 1; }
.sidebar .btn-contact{
  display: inline-block;
  margin-top: .35rem;
  padding: .25rem .5rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 2px;
}
.social-link{
  color: var(--muted);
  transition: color .2s ease;
}
.social-link:hover{ color:#fff; }

/* Hero */
.hero{
  min-height: 100vh;
  margin-right: 0;
  background: linear-gradient(0deg, rgba(15,26,26,.35), rgba(15,26,26,.35)),
              url("images/hero.jpg") center/cover no-repeat fixed;
}
@media (min-width: 992px){
  .hero{
    margin-right: var(--sidebar-w);
  }
}

.hero-title{
  color: #c9d4d2;
  font-weight: 400;
  letter-spacing: .35em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.tracking{ letter-spacing: .35em; }

/* Offcanvas (mobile) */
.offcanvas.bg-dark{
  background: var(--bg-dark)!important;
}
.offcanvas .nav-link{
  color: var(--text);
  letter-spacing: .08em;
}
.offcanvas .nav-link:hover{ color:#fff; }

/* Utilities */
.container{
  max-width: 1140px;
}

/* Hero: фон на hero.jpg */
.hero{
  min-height: 100vh;
  background:
    linear-gradient(0deg, rgba(15,26,26,.35), rgba(15,26,26,.35)),
    url("../images/hero.jpg") center/cover no-repeat fixed;
}

/* Кнопка-триггер */
.menu-toggle{
  border-color: rgba(255,255,255,.35);
  color:#fff;
  backdrop-filter: blur(6px);
}

/* Стили ссылок внутри offcanvas для аккуратного вида */
.offcanvas .nav-link{
  letter-spacing:.08em;
  color:#e7e7e7;
  opacity:.9;
}
.offcanvas .nav-link:hover{ color:#fff; opacity:1; }
.offcanvas .btn-contact{
  display:inline-block;
  margin-top:.35rem;
  padding:.25rem .5rem;
  border:1px solid rgba(255,255,255,.15);
  border-radius:2px;
}
/* Базовые размеры документа */
html, body { height: 100%; }

/* Полноэкранный герой с фоном hero.jpg */
.hero{
  min-height: 100svh;            /* корректная высота на мобильных */
  width: 100%;
  margin: 0;                      /* убираем любые отступы */
  background:
    linear-gradient(0deg, rgba(15,26,26,.35), rgba(15,26,26,.35)),
    url("../images/hero.jpg") center center / cover no-repeat;
  background-attachment: scroll;  /* стабильное поведение на мобильных */
}

/* УДАЛИТЬ прежнее правило, если оно было:
@media (min-width: 992px){
  .hero{ margin-right: var(--sidebar-w); }
}
*/

/* Вариант, если используется <img> как контентный фон */
.hero-img-full {                   /* применить к <img class="hero-img-full"> */
  display: block;
  width: 100%;
  height: 100svh;
  object-fit: cover;               /* заполняет без искажений */
  object-position: center center;
}