:root {
      /* путь к изображению + степень затемнения (0 – прозрачно, 1 – чёрный) */
      --hero-img: url("images/banner/main_banner.jpeg");
      --hero-overlay: 0.35;
    }

    * { box-sizing: border-box; margin: 0; }

    /*–– 1. Блок‑баннер ––*/
    .hero {
      margin-top: 70px;
      position: relative;
      width: 100%;
      height: 40vh;          /* 100 % высоты видимой области */
      overflow: hidden;
    }

    .hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;      /* растянуть без деформации */
      object-position: center;
    }

    /*–– 2. Необязательная полупрозрачная подложка для читаемости текста ––*/
    /* .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,var(--hero-overlay));
    } */

    /*–– 3. Центрированный текст/кнопка поверх картинки ––*/
    .hero__content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #f7f4f4;
      text-align: center;
      padding: 1rem;
      font-family: system-ui, sans-serif;
        text-shadow:
            -2px -2px 0 #000,  /* вверх-влево */
            2px -2px 0 #000,  /* вверх-вправо */
            -2px  2px 0 #000,  /* вниз-влево */
            2px  2px 0 #000;  /* вниз-вправо */
    }
    .hero__title   { 
        font-size: clamp(2rem, 5vw, 3.5rem); 
        font-weight: 700; 
    }

    .hero__button  {
      margin-top: 1.5rem;
      padding: .8em 2em;
      background: #b5db08;
      color: #000;
      border: none;
      border-radius: .5em;
      font-weight: 600;
      cursor: pointer;
      transition: filter .2s;
    }
    .hero__button:hover { filter: brightness(.9); }

    /*–– 4. Демоконтент ниже ––*/
    main { 
      padding: 3rem 1rem; 
      max-width: 80%; margin: 
      auto; line-height: 1.6; 
       text-align: justify;
      word-wrap: break-word;  /* Перенос длинных слов */
    
    }