/* 1) Фон на весь экран + затемнение */
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body{
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("/img/background-1920.jpg");
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    image-set(
      url("/img/background-1920.webp") type("image/webp"),
      url("/img/background-1920.jpg")  type("image/jpeg")
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* адаптивные источники фона */
@media (max-width: 1024px){
  body{
    background-image:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
      image-set(
        url("/img/background-1280.webp") type("image/webp"),
        url("/img/background-1280.jpg")  type("image/jpeg")
      );
  }
}
@media (max-width: 640px){
  body{
    background-image:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
      image-set(
        url("/img/background-768.webp") type("image/webp"),
        url("/img/background-768.jpg")  type("image/jpeg")
      );
  }
}

/* 2) Центрирование контента во viewport */
.container{
  min-height: 100vh;          /* вместо height:100% */
  display: flex;              /* flex проще и надёжнее в этом кейсе */
  align-items: center;        /* по вертикали */
  justify-content: center;    /* по горизонтали */
  text-align: center;
  padding: 24px;
}

/* 3) Секция-герой тянется на всю ширину, но ограничена по max-width */
.hero{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  backdrop-filter: blur(2px);
}

/* остальной твой стиль как был */
* { box-sizing: border-box; }

h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 24px 0;
}

.main-btn {
  display: inline-block;
  padding: 14px 26px;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  background: #ef4444; /* фикс опечатки: было #ef444 */
  border-radius: 12px;
  transition: transform .15s ease, opacity .15s ease, background .2s ease;
}
.main-btn:hover { transform: translateY(-1px); opacity: .95; }
.main-btn:active { transform: translateY(0); opacity: .9; }

.socials { margin-top: 36px; display: flex; gap: 16px; justify-content: center; }
.socials a { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.12); transition: background .2s ease, transform .15s ease; }
.socials a:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.socials img { width: 24px; height: 24px; filter: invert(1); }

/* демо-цвета заголовков — убедись, что ЭТО без <style> тегов в .css */
.title-swatch {margin: 4px 0; font-size: clamp(28px,4vw,40px); line-height: 1.15; font-weight: 800;}
.t-indigo  {color:#6366f1;}
.shadow-subtle { text-shadow: 0 1px 0 rgba(0,0,0,.15); }