---

document.addEventListener("DOMContentLoaded", () => {
  const phoneInput = document.querySelector('input[name="phone"]');
  if (phoneInput) {
    phoneInput.addEventListener("input", (e) => {
      let value = e.target.value.replace(/\D/g, "");
      if (value.startsWith("7") || value.startsWith("8"))
        value = value.substring(1);

      let formatted = "+7 ";
      if (value.length > 0) formatted += "(" + value.substring(0, 3);
      if (value.length > 3) formatted += ") " + value.substring(3, 6);
      if (value.length > 6) formatted += "-" + value.substring(6, 8);
      if (value.length > 8) formatted += "-" + value.substring(8, 10);

      e.target.value = formatted;
    });
  }

  const pass = document.getElementById("password");
  const confirm = document.getElementById("password_confirm");
  const errorMsg = document.getElementById("pass-error");
  const submitBtn = document.querySelector(".reg-button");
  const bar = document.querySelector(".strength-bar");

  if (pass && confirm) {
    function validatePasswords() {
      if (confirm.value.length > 0 && pass.value !== confirm.value) {
        if (errorMsg) errorMsg.style.display = "block";
        confirm.style.borderColor = "#ff4b4b";
        if (submitBtn) {
          submitBtn.disabled = true;
          submitBtn.style.opacity = "0.5";
        }
      } else {
        if (errorMsg) errorMsg.style.display = "none";
        confirm.style.borderColor = "var(--border-color)";
        if (submitBtn) {
          submitBtn.disabled = false;
          submitBtn.style.opacity = "1";
        }
      }
    }

    pass.addEventListener("input", () => {
      validatePasswords();
      if (bar) {
        const val = pass.value;
        bar.className = "strength-bar";
        if (val.length > 0 && val.length < 6) bar.classList.add("weak");
        else if (val.length >= 6 && /[0-9]/.test(val) && /[A-Z]/.test(val))
          bar.classList.add("strong");
        else if (val.length >= 6) bar.classList.add("medium");
      }
    });

    confirm.addEventListener("input", validatePasswords);
  }

  const btnPrivate = document.getElementById('btn-private');
  const btnCompany = document.getElementById('btn-company');
  const typeInput = document.getElementById('user-type');
  const labelName = document.getElementById('label-name');

  btnPrivate.addEventListener('click', () => {
      btnPrivate.classList.add('active');
      btnCompany.classList.remove('active');
      typeInput.value = 'private';
      labelName.innerText = 'ФИО';
  });

  btnCompany.addEventListener('click', () => {
      btnCompany.classList.add('active');
      btnPrivate.classList.remove('active');
      typeInput.value = 'company';
      labelName.innerText = 'Название компании';
  });

  const dropBtn = document.querySelector(".dropbtn");
  const dropContent = document.querySelector(".dropdown-content");
  const langText = document.getElementById("languageText");
  if (dropBtn && dropContent) {
    dropBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      dropContent.classList.toggle("show");
    });
    document.querySelectorAll(".dropdown-content a").forEach((link) => {
      link.addEventListener("click", (e) => {
        e.preventDefault();
        if (langText) langText.textContent = link.getAttribute("data-lang");
        dropContent.classList.remove("show");
      });
    });
  }

  const track = document.getElementById("track");
  if (track) {
    const slides = document.querySelectorAll(".slide");
    let currentIndex = 3;
    let isTransitioning = false;
    function updateCarousel(animate = true) {
      track.style.transition = animate
        ? "transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)"
        : "none";
      slides.forEach((s, i) =>
        s.classList.toggle("active", i === currentIndex),
      );
      const viewportWidth = track.parentElement.offsetWidth;
      const slideWidth = slides[0].offsetWidth;
      const gap = parseInt(getComputedStyle(track).gap);
      const centerOffset = (viewportWidth - slideWidth) / 2;
      const position = -(currentIndex * (slideWidth + gap)) + centerOffset;
      track.style.transform = `translateX(${position}px)`;
    }
    function moveSlide(direction) {
      if (isTransitioning) return;
      isTransitioning = true;
      currentIndex += direction;
      updateCarousel();
    }
    track.addEventListener("transitionend", () => {
      isTransitioning = false;
      if (currentIndex === slides.length - 1) {
        currentIndex = 1;
        updateCarousel(false);
      } else if (currentIndex === 0) {
        currentIndex = slides.length - 2;
        updateCarousel(false);
      }
    });
    window.addEventListener("resize", () => updateCarousel(false));
    window.addEventListener("load", () => updateCarousel(false));
  }
});



        <section class="section2" id="section2">
            <div class="hexagon-border">
                <div class="hexagon-content">
                    <h2>Наше портфолио</h2>
                </div>
            </div>

            <div class="carousel-container">
                <div class="carousel-viewport">
                    <div class="carousel-track" id="track">

                        <div class="slide clone">
                            <div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
                            <h2>lamoda</h2>
                            <p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
                                проекта</p>

                            <button class="button">Подробнее</button>
                        </div>

                        <div class="slide">
                            <div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
                            <h2>lamoda</h2>
                            <p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
                                проекта</p>
                            <button class="button">Подробнее</button>
                        </div>

                        <div class="slide">
                            <div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя" > </div>
                            <h2>lamoda</h2>
                            <p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
                                проекта</p>
                            <button class="button">Подробнее</button>
                        </div>
                        
                        <div class="slide">
                            <div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя" id="openModalBtn-img"> </div>
                            <div class="slide-text">
                                <p>Lamoda — маркетплейс в России и СНГ, специализирующийся на премиум-сегменте fashion-индустрии</p>
                            </div>
                            <button class="button" id="openModalBtn-more">Подробнее</button>
                        </div>

                        <div class="slide">
                            <div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
                            <div class="slide-text">
                                <h2>lamoda</h2>
                            </div>
                            <button class="button">Подробнее</button>
                        </div>

                        <div class="slide">
                            <div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
                            <h2>lamoda</h2>
                            <p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
                                проекта</p>
                            <button class="button">Подробнее</button>
                        </div>

                        <div class="slide clone">
                            <div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
                            <h2>lamoda</h2>
                            <button class="button">Подробнее</button>
                        </div>

                    </div>
                </div>
                <button class="nav-btn prev" onclick="moveSlide(-1)"></button>
                <button class="nav-btn next" onclick="moveSlide(1)"></button>
            </div>
            
            <div id="myModal-img" class="modal-img">
                <div class="modal-content-img">
                    <button id="closeModalBtn-img" class="close-btn-img">&times;</button>
                    <img src="photo/Без названия.jpeg" alt="фоточка крутвя">
                </div>
            </div>

            <div id="myModal-more" class="modal-more">
                <div class="modal-content-more">
                    <button id="closeModalBtn-more" class="close-btn-more">&times;</button>
                    <div class="more">
                        <div class="more-blocks1">
                            <H3>Детали</H3>
                            <ul>
                                <li>Современный интерфейс</li>
                                <li>Регистрация/вход</li>
                                <li>Корзина</li>
                                <li>Фильтры</li>
                            </ul>
                        </div>
                        <div class="more-blocks2">
                            <H3>lamoda</H3>
                            <p>Lamoda — маркетплейс в России и СНГ, специализирующийся на премиум-сегменте fashion-индустрии. Как мы уже говорили, в Lamoda задействовано огромное количество различных технологий и инструментов. И это не случайно. Иначе нам не справиться с нагрузкой! У нас большой автоматизированный склад. Наш call-center обслуживают 500 сотрудников, а выстроенные нами процессы позволяют перезвонить клиенту в течение 5 минут после оформления заказа. Наша служба доставки работает по 15-минутным интервалам. А ведь кроме собственных систем, у нас есть B2B интеграция с другими интернет-магазинами. С таким многообразием решаемых задач и требованиями такого динамичного бизнеса, как e-commerce, неизбежно разрастание технического стека, ведь каждую задачу мы хотим решать наиболее подходящими технологиями. Разнообразие неизбежно. Об основных представителях нашего стека мы расскажем далее. Но начнем с механизмов, позволяющих не «заблудиться» в этом многообразии.</p>
                        </div>
                    </div>
                </div>
            </div>

        </section>