/* ===== HEADER ===== */
header {position: fixed;top: 0;left: 0;right: 0;background: transparent;z-index: 1000;transition: background 0.4s ease, margin 0.1s ease}
header.scrolled {background: #111;margin:0}
/* ===== ОБЕРТКА БАННЕРА ===== */
.wrapper__banner{position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden}
/* ===== ФОН ===== */
.banner__bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.banner__bg picture, .banner__bg img {width: 100%; height: 100%; object-fit: cover; display: block}
.banner__bg::after {position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); pointer-events: none}
/* ===== ВИДЕО ФОН ===== */
.banner__video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;display: block;pointer-events: none}
/* ===== КОНТЕЙНЕР С КОНТЕНТОМ ===== */
.wrapper__banner .container {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; text-align: center; padding: 80px clamp(20px, 20px, 60px) 40px;}
/* ===== ЗАГОЛОВКИ ===== */
.banner__row {width: 100%}
.banner__row h1 {font-family: 'Trajan', serif; text-transform: uppercase; color: #FFFFFF; margin: 0; letter-spacing: 0.05em; font-size: clamp(28px, 6vw, 60px); line-height: clamp(34px, 7vw, 72px);}
.banner__row h1 span {color: #FA0000; white-space: nowrap}
/* ===== МАЛЕНЬКИЙ ЗАГОЛОВОК ===== */
.banner__small-title {font-family: 'Trajan', serif; font-size: clamp(14px, 1.8vw, 16px); line-height: clamp(17px, 2.2vw, 19px); letter-spacing: 0.05em; text-transform: uppercase; color: #FFFFFF; padding-top: clamp(10px, 1.5vw, 15px);}
/* ===== ДИНАМИЧЕСКИЙ ТЕКСТ ===== */
.banner__text {font-family: 'Trajan', serif; font-size: clamp(20px, 4vw, 37px); line-height: clamp(26px, 4.8vw, 44px); letter-spacing: 0.05em; text-transform: uppercase; color: #FFFFFF; padding: clamp(25px, 4vw, 70px) 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 8px; width: 100%}
.static-text {display: inline-block; /*! white-space: pre */}
.banner__animated-wrapper {display: inline-block; position: relative; min-height: 1.2em}
.text-char-wrapper {display: inline-block}
.text-char {display: none}
/* ===== КУРСОР ===== */
.banner__cursor-char {display: inline-block; color: #FFFFFF; font-weight: 300; animation: cursorBlink 0.7s step-end infinite; margin-left: 2px; transform: translateY(-0.1em); font-size: 1em}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* ===== КНОПКИ (ТОЛЬКО ТВОЙ СТИЛЬ) ===== */
.banner__buttons {display: flex; align-items: center; gap: clamp(15px, 3vw, 25px); justify-content: center; flex-wrap: wrap; width: 100%}
.banner__buttons a {display: block;}
/* ============================================ */
/* ===== ТОЛЬКО КРИТИЧЕСКИЕ БРЕЙКПОИНТЫ ===== */
/* ============================================ */
/* --- 768px --- */
@media (max-width: 767px) {
  .wrapper__banner {min-height: 400px; }
  .wrapper__banner .container{padding: 70px 20px 30px; }
  .banner__buttons{gap: 12px; }
  .banner__cursor-char{transform: translateY(-0.12em); }
}
@media (max-width: 575px) {
  .wrapper__banner{min-height: 350px; }
  .wrapper__banner .container{padding: 70px 15px 20px}
  .banner__buttons {flex-direction: column; max-width: 250px; margin:0 auto; gap: 10px; }
  .banner__buttons a{width: 100%}
  .banner__cursor-char{transform: translateY(-0.15em); }
}