<style>
@media screen and (min-width: 641px) {
  #t-header {
    position: fixed;         
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;           
    background-color: transparent;
    transition: top 0.3s;
  }

  .t396:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

<style>
/* ===== ФИКСИРОВАННОЕ МЕНЮ ===== */
@media screen and (min-width: 641px) {
  #t-header {
    position: fixed;         
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;           
    background-color: transparent;
    transition: top 0.3s;
  }

  /* Убираем отступы первого Zero Block */
  .t396:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ===== СКРЫТИЕ ПУСТОГО БЛОКА НА МОБИЛКАХ ===== */
@media screen and (max-width: 640px) {
  #rec934233121 {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ===== HOVER-ЭФФЕКТЫ ДЛЯ SHAPE И TEXT ===== */
.shape .tn-atom, 
.shape2 .tn-atom,
.shape3 .tn-atom,
.shape4 .tn-atom {
  background-color: #000000 !important;
  transition: background-color 0.3s ease;
}

.shape, .text,
.shape2, .text2,
.shape3, .text3,
.shape4, .text4 {
  transition: color 0.3s ease;
}

/* Hover */
.shape:hover .tn-atom,
.shape2:hover .tn-atom,
.shape3:hover .tn-atom,
.shape4:hover .tn-atom {
  background-color: #FFFFFF !important;
}

.shape:hover + .text .tn-atom,
.shape:hover ~ .text .tn-atom,
.shape2:hover + .text2 .tn-atom,
.shape2:hover ~ .text2 .tn-atom,
.shape3:hover + .text3 .tn-atom,
.shape3:hover ~ .text3 .tn-atom,
.shape4:hover + .text4 .tn-atom,
.shape4:hover ~ .text4 .tn-atom {
  color: #000000 !important;
}

/* Активный пункт меню */
.shape.active .tn-atom,
.shape2.active .tn-atom,
.shape3.active .tn-atom,
.shape4.active .tn-atom {
  background-color: #4F4F4F !important; /* фон активного shape */
}

.shape.active + .text .tn-atom,
.shape.active ~ .text .tn-atom,
.shape2.active + .text2 .tn-atom,
.shape2.active ~ .text2 .tn-atom,
.shape3.active + .text3 .tn-atom,
.shape3.active ~ .text3 .tn-atom,
.shape4.active + .text4 .tn-atom,
.shape4.active ~ .text4 .tn-atom {
  color: #FFFFFF !important; /* текст активного пункта */
}

/* ===== Мобильная ВЕРСИЯ ===== */
@media screen and (max-width: 768px) {
  #rec934843621 {
    display: none !important; /* Скрываем фиксированный хедер */
    height: 0 !important;
  }
  .t-rec:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body, html {
    margin: 0 !important;
    padding: 0 !important;
  }
}
</style>

<script>
// Ждем полной загрузки DOM
document.addEventListener("DOMContentLoaded", function() {
  const header = document.getElementById('t-header');
  if (!header) return;

  const headerHeight = header.offsetHeight;

  // Только на ПК
  if (window.innerWidth > 640) {
    const firstZeroBlock = document.querySelector('.t396:first-of-type');
    if (firstZeroBlock) {
      // Добавляем margin-top равный высоте хедера
      firstZeroBlock.style.marginTop = headerHeight + 'px';
    }
  }

  // Скрытие / открытие меню (пример)
  const menuButton = document.querySelector('.custom-menu-button'); 
  const menu = document.querySelector('.custom-menu');
  if(menuButton && menu){
    menuButton.addEventListener('click', function(){
      menu.classList.toggle('menu-open');
    });
  }

  // ===== Подсветка активного пункта меню =====
  const currentURL = window.location.href;
  document.querySelectorAll('.shape, .shape2, .shape3, .shape4').forEach(function(menuItem) {
    const link = menuItem.querySelector('a'); // ссылка внутри shape
    if (link && currentURL.includes(link.getAttribute('href'))) {
      menuItem.classList.add('active');
    }
  });
});
</script>