/* ===========================
   FONT: ZT Neue Ralewe Extra Bold
   =========================== */
@font-face {
  font-family: 'ZT Neue Ralewe ExtBd';
  src: url('fonts/ZTNeueRalewe-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ===== Base ===== */
* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; overflow-x:hidden;
  color:#fff;
  font-family:"Playfair Display", serif;
  scroll-behavior:smooth;
}

/* ===== Navbar / Hero ===== */
.hero{
  min-height:100vh;
  background:#000 url("images/start/Background.png") center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center;
  padding-top:120px;
}
.nav-bar{
  position:fixed; top:0; left:0; right:0; height:80px;
  display:flex; align-items:center; justify-content:space-evenly;
  padding:0 40px;
  background:rgba(0,0,0,0.5);
  z-index:1000;
}
.nav-left, .nav-right{
  display:flex; gap:66px; list-style:none; margin:0; padding:0;
}
.nav-bar a{
  color:#fff; text-decoration:none; font-size:18px; transition:color .2s;
}
.nav-bar a:hover{ color:#f5c542; }
.logo{ height:60px; display:block; }

.burger{
  display:none; width:32px; height:24px;
  background:transparent; border:0; cursor:pointer;
}
.burger span{
  display:block; width:100%; height:3px;
  background:#fff; border-radius:2px; margin:3px 0;
}

.center-block{
  flex:1; display:flex; flex-direction:column;
  justify-content:center; align-items:center;
}
.title{ max-width:70%; margin-bottom:32px; display:block; }
.slogan{ font-size:22px; letter-spacing:2px; }

/* ===== Mobile menu ===== */
.mobile-menu{
  position:fixed; top:70px; left:0; right:0; background:#000;
  display:flex; flex-direction:column; align-items:center;
  max-height:0; overflow:hidden;
  transition:max-height .3s ease; z-index:900;
}
.mobile-menu a{
  color:#fff; padding:12px; font-size:20px; text-decoration:none;
}
.mobile-menu.open{ max-height:240px; }

/* ===== About ===== */
.about-section{
  position:relative; padding-bottom:64px;
  background:url("images/start/Section_1_background_1.png") center/cover no-repeat fixed;
  overflow: visible !important;
}
.about-section::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,0.5); z-index:0;
}
.about-block-1, .about-block-2{ position:relative; z-index:2; }

.about-card{
  width:calc(100% - 16px);
  margin:0 auto 32px; padding:40px 16px;
  background:url("images/start/Section_1_background_2.png") center/cover no-repeat;
  text-align:center; color:#111; border-radius:12px;
}
.about-card h2, .about-card p{ margin:0 0 16px 0; }

.horizontal-scroll{
  height:350px; overflow:hidden; margin-bottom:32px;
}
.scroll-track{
  display:flex; align-items:center; height:100%;
  gap:8px; will-change:transform;
}
.scroll-track img{
  width:28.5vw; flex-shrink:0; object-fit:cover; border-radius:8px;
}

.about-block-2{
  background:url("images/start/Section_1_background_2.png") center/cover no-repeat;
  padding:64px 32px; margin:32px auto 0;
  width:calc(100% - 16px); border-radius:12px;
}
.about-title{
  text-align:center; margin-bottom:48px;
  font-size:2rem; color:#111;
}
.about-item{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:32px; padding:32px; border-radius:12px;
  gap:32px; background:rgba(0,0,0,0.6); color:#fff;
}
.about-text{ flex:1; }
.about-text h3{ margin-bottom:12px; font-size:1.5rem; }
.about-text p{ font-size:1rem; line-height:1.5; }
.about-image{ flex:1; text-align:right; }
.about-image img{
  max-width:100%; border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

/* ===== Process / Contacts ===== */
.process{
  background:#111; color:#fff; min-height:60vh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center; padding:60px 20px;
}
.contacts{
  background:#222; min-height:60vh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center; padding:60px 20px;
}

/* ===== Portfolio (карусель) ===== */
.portfolio{
  background:url("images/start/Section_3_background.png") center/cover no-repeat fixed;
  padding:40px 20px;
}
.portfolio-title{ text-align:center; margin-bottom:20px; }
.carousel{
  position:relative; width:100%; overflow:hidden;
  border-radius:12px; margin-bottom:10px;
}
.carousel-track{
  display:flex; align-items:center;
  gap:14px; will-change:transform;
}
/* === Overlay при наведении на карточку === */
.case-card{
  position: relative;
  width: 380px;
  height: 230px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Вся «картинка» и градиент живут внутри .case-bg */
.case-bg{
  position: relative;           /* важно для ::after */
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  z-index: 0;                   /* создаём стек для детей */
}

/* Градиент НИЖЕ текста */
.case-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.9) 40%,
    rgba(0,0,0,0.6) 70%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;                   /* ниже текста/оверлея */
  pointer-events: none;
}
.case-card:hover .case-bg{ transform: scale(1.05); }

/* Заголовок на карточке */
.case-title{
  position: absolute;
  z-index: 2;                   /* над градиентом */
  top: 14px;
  left: 14px;
  margin: 0;
  max-width: 60%;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Всплывающее описание — САМЫЙ верх */
.case-overlay{
  position: absolute;
  z-index: 3;                  /* поверх всего в карточке */
  left: 0;
  bottom: -110px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.9);
  text-align: center;
  transition: bottom 0.45s ease, opacity 0.45s ease;
  opacity: 0;
}

.case-overlay p{
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.case-card:hover .case-overlay{
  bottom: 0;
  opacity: 1;
}


/* ===== Modal ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.modal.open { display: flex; }

.modal-content {
  position: relative;
  background: #000;
  border-radius: 12px;
  max-width: 1200px;
  width: 95%;
  height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 20px;
}

.close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

/* === Основная зона === */
.modal-slide {
  display: flex;
  flex: 1;
  align-items: flex-start;
  background: url("images/cases/Case_1_pic_1.png") right center/cover no-repeat, #000;
  position: relative;
}
.modal-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.9) 0%,
    rgba(0,0,0,.7) 40%,
    rgba(0,0,0,.3) 70%,
    rgba(0,0,0,0) 100%
  );
}

/* Левая колонка */
.slide-left {
  position: relative;
  z-index: 2;
  flex: 2.3; /* увеличена ширина */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 30px 60px;
}

/* Правая колонка (доп. картинки) */
.slide-right {
  position: relative;
  z-index: 2;
  flex: 0.7;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: flex-end;
  height: 80%;
  transform: translateY(10%);
}

/* Заголовки */
.slide-date {
  font-size: 18px;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
  margin-top: -10px;
}
.slide-title {
  font-size: 40px;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
  margin: -15px 0 0 0;
}

/* Группа блоков */
.slide-blocks {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: auto;
  margin-bottom: 60px;
}

/* Общие стили блоков */
.slide-block {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 24px 20px;
}

/* Красный блок */
.slide-block.red {
  flex: 0 1 30%;
  background: rgb(241,60,10);
  color: #fff;
  min-height: 400px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
.red-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.red-header img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.red-audience {
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  line-height: 1.4;
}
.red-body p {
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}

.red-body .red-title {
  font-family: 'ZT Neue Ralewe ExtBd', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 10 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* Белый блок (Решения) */
.slide-block.cut {
  flex: 0 1 70%;
  background: rgba(0,0,0,0.3);
  border: 2px solid rgb(241,60,10);
  color: #fff;
  min-height: 400px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}


.slide-block.cut h3 {
  color: rgb(241,60,10);
  font-family: 'ZT Neue Ralewe ExtBd', sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 16px 0;
}

/* Список решений */
.white-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.white-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.white-num {
  font-family: 'ZT Neue Ralewe ExtBd', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: rgb(241,60,10);
  min-width: 28px;
}
.white-text {
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #f1f1f1;
}

/* === Плотный режим для белого блока === */
.slide-block.cut.dense .white-list {
  gap: 4px;
}
.slide-block.cut.dense .white-item {
  margin-bottom: 3px;
}
.slide-block.cut.dense .white-text {
  line-height: 1.25;
}
.slide-block.cut.dense .white-num {
  font-size: 16px;
}

/* === Сверхплотный режим для белого блока === */
.slide-block.cut.ultra-dense .white-list {
  gap: 2px;
}
.slide-block.cut.ultra-dense .white-item {
  margin-bottom: 1px;
}
.slide-block.cut.ultra-dense .white-text {
  line-height: 1.15;
  font-size: 14px;
}
.slide-block.cut.ultra-dense .white-num {
  font-size: 15px;
}



/* Правая часть с картинками */
.right-block {
  width: 230px;
  height: 100px;
  background: #000;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  position: relative;
}
.right-block.first { width: 230px; }
.right-block p {
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  position: relative;
  z-index: 2;
  padding-left: 100px;
}
.right-img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}


/* === Индивидуальный макет для case 5 === */
.modal-slide.case5-layout .slide-blocks {
  flex-direction: column; /* один под другим, если хочешь сжать */
  gap: 10px;
}

.modal-slide.case5-layout .slide-block.cut {
  flex: none;
  width: 95%;   /* белый блок шире */
  align-self: center;
}

.modal-slide.case5-layout .white-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 🟢 Два столбца решений */
  column-gap: 24px;
  row-gap: 8px;
}

.modal-slide.case5-layout .white-item {
  align-items: flex-start;
  gap: 8px;
  line-height: 1.2; /* компактнее */
}



/* ===== ABOUT CARD SPLIT ===== */
/* ===== ABOUT CARD SPLIT (с декоративным фоном и fade) ===== */
.about-card-1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 480px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/from/incentive.jpg") center/cover no-repeat;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  font-family: "Raleway", sans-serif;
  z-index: 1;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.about-card-2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 480px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/from/bt_3.jpg") center/cover no-repeat;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  font-family: "Raleway", sans-serif;
  z-index: 1;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.about-card-3 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 480px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/from/event.jpg") center/cover no-repeat;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  font-family: "Raleway", sans-serif;
  z-index: 1;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* .about-card-4 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 480px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/from/event.jpg") center/cover no-repeat;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  font-family: "Raleway", sans-serif;
  z-index: 1;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
} */

.about-card-5 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 480px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/from/visa.jpg") center/cover no-repeat;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  font-family: "Raleway", sans-serif;
  z-index: 1;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Активное состояние при появлении */
.about-card-split.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Внутренний контейнер */
.about-inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  padding: 50px 60px;
  box-sizing: border-box;
  gap: 60px;
  border-radius: 15px;
  color: #fff;
}

/* Левая часть */
.about-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.about-left h2 {
  font-family: 'ZT Neue Ralewe ExtBd', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px 0;
  line-height: 1.2;
}
.about-left p {
  font-size: 17px;
  line-height: 1.6;
  color: #fff;
  margin: 0;
  max-width: 520px;
}

/* Правая часть */
.about-right {
  flex: 1;
  padding: 30px 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 18px; /* отступ между группами */
  box-shadow: 0 0 20px rgba(0,0,0,0.25) inset, 0 0 25px rgba(0,0,0,0.3);
}

/* Группа (контейнер для h3+p) */
.frame-group {
  position: relative;
  padding-left: 20px; /* место под акцент */
  margin: 0;
}

/* Вертикальная линия */
.frame-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: rgb(241, 60, 10);
  border-radius: 2px;
}

/* Заголовок и текст */
.about-right h3 {
  font-family: 'ZT Neue Ralewe ExtBd', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: rgb(241, 60, 10);
  margin: 0 0 2px 0; /* 👈 уменьшили отступ */
  line-height: 1.3;
}
.about-right p {
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

/* === FIX: Fade и видимость блока ABOUT === */
.about-card-split {
  position: relative;
  z-index: 10; /* выше подложки */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.about-card-split.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Дополнительно: чтобы светлый текст не терялся */
.about-block-2 {
  background: rgba(0,0,0,0.6) url("images/start/Section_1_background_2.png") center/cover no-repeat;
  backdrop-filter: blur(4px);
}


/* Адаптив */
@media (max-width: 900px) {
  .about-inner {
    flex-direction: column;
    padding: 40px 20px;
    gap: 32px;
  }

  .about-left h2 {
    font-size: 24px;
  }

  .about-right {
    padding: 24px;
  }
}

/* =======================================================
   HWW BLOCK (Как мы работаем) — интеграция из hww-2.css
======================================================= */

/* ============================
   1. СТРАНИЦА 1 — "Как мы работаем"
============================ */
.hww-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #ccc7c7;
  overflow: hidden;
  padding: 0;
}

/* --- Фон --- */
.hww-bg {
  position: absolute;
  inset: 0;
  background: #ccc7c7;
  z-index: 1;
}

/* --- Верхняя часть --- */
.hww-top {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* --- Заголовок --- */
.hww-title {
  position: absolute;
  left: 118px;
  top: 80px;
  margin: 0;
  font-weight: 800;
  font-size: 42px;
  color: #000;
  z-index: 12;
}

/* --- ICONS --- */
.hww-icon {
  position: absolute;
  width: 40px;
  height: auto;
  z-index: 10;
}

/* --- Линии Icon_1_1 --- */
.hww-icon-line {
  position: absolute;
  width: 2px;
  z-index: 9;
  background: transparent;
}

/* --- ТЕКСТЫ (общие свойства) --- */
.hww-screen .text-block {
  position: absolute;
  width: 180px;
  font-family: 'ZT Neue Ralewe ExtBd', 'Raleway', sans-serif;
  line-height: 1.3;
  text-align: left;
  z-index: 11;
}

/* --- Акценты текста --- */
.hww-screen .text-strong {
  font-size: 21px;
  color: rgb(241, 60, 10);
  font-weight: 800;
}

.hww-screen .text-light {
  font-size: 15px;
  color: rgb(252, 251, 250);
  font-weight: 150;
}

/* --- Нижняя часть --- */
.hww-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.hww-text-logo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 2;
}

.hww-arrow {
  position: absolute;
  left: 50%;
  bottom: calc(16.5% + 70px);
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 3;
}

/* --- Координаты ICONS и TEXTS --- */
.icon-1 { left: 220px; top: 220px; }
.icon-line-1 { left: 239px; top: 259px; height: 359px; }

.icon-2 { left: 353px; top: 386px; }
.icon-line-2 { left: 372px; top: 425px; height: 192px; }

.icon-3 { left: 590px; top: 220px; }
.icon-line-3 { left: 610px; top: 259px; height: 359px; }

.icon-4 { left: 800px; top: 386px; }
.icon-line-4 { left: 820px; top: 425px; height: 192px; }

.icon-5 { left: 1020px; top: 220px; }
.icon-line-5 { left: 1040px; top: 259px; height: 359px; }

.icon-6 { left: 1130px; top: 386px; }
.icon-line-6 { left: 1150px; top: 425px; height: 192px; }

.hww-screen .text-1 { left: 276px; top: 203px; }
.hww-screen .text-2 { left: 276px; top: 269px; }

.hww-screen .text-3 { left: 410px; top: 370px; }
.hww-screen .text-4 { left: 410px; top: 406px; }

.hww-screen .text-5 { left: 638px; top: 213px; }
.hww-screen .text-6 { left: 638px; top: 275px; width: 280px; }

.hww-screen .text-7 { left: 850px; top: 370px; }
.hww-screen .text-8 { left: 850px; top: 406px; }

.hww-screen .text-9 { left: 1070px; top: 203px; }
.hww-screen .text-10 { left: 1070px; top: 239px; }

.hww-screen .text-11 { left: 1190px; top: 370px; }
.hww-screen .text-12 { left: 1190px; top: 436px; }

/* ============================
   2. СТРАНИЦА 2 — КРУГИ И РОМБЫ
============================ */
.hww-2-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("images/hww/hww%20background.png") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 0;
}

/* --- КРУГИ --- */
.outer-circle {
  position: relative;
  width: 1040px;
  height: 1040px;
  border: 2px solid rgba(221, 219, 219, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1;
}

.outer-circle-1 {
  position: relative;
  width: 740px;
  height: 740px;
  border: 2px solid rgba(180, 180, 180, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 2;
}

.outer-circle-2 {
  position: relative;
  width: 500px;
  height: 500px;
  border: 2px solid rgba(180, 180, 180, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 3;
}

.inner-circle {
  width: 300px;
  height: 300px;
  border: 3px solid rgb(241, 60, 10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 0 0 20px rgba(241, 60, 10, 0.4);
  z-index: 4;
}

.circle-text {
  color: #000;
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.2;
  z-index: 5;
}

/* --- РОМБЫ --- */
.rhombus-wrapper {
  position: absolute;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

.rhombus {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 5;
}

.rhombus-number {
  position: relative;
  z-index: 10;
  font-family: 'ZT Neue Ralewe ExtBd', 'Raleway', sans-serif;
  font-size: 42px;
  color: #000;
  font-weight: 600;
  user-select: none;
}

/* --- Координаты ромбов --- */
.rhombus-1 { left: 52px; top: 137px; }
.rhombus-2 { left: 260px; top: 425px; }
.rhombus-3 { left: 957px; top: 120px; }
.rhombus-4 { left: 1023px; top: 402px; }

/* --- ТЕКСТЫ --- */
.hww-2-screen .text-block {
  position: absolute;
  width: 220px;
  font-family: 'ZT Neue Ralewe ExtBd', 'Raleway', sans-serif;
  line-height: 1.3;
  text-align: left;
  z-index: 15;
}

.hww-2-screen .text-strong {
  font-size: 21px;
  color: rgb(241, 60, 10);
  font-weight: 600;
}

.hww-2-screen .text-light {
  font-size: 15px;
  color: #000;
  font-weight: 150;
}

/* --- Координаты текстов --- */
.hww-2-screen .text-1 { left: 52px;  top: calc(97px + 120px + 25px); }
.hww-2-screen .text-2 { left: 52px;  top: calc(117px + 120px + 65px); }

.hww-2-screen .text-3 { left: 260px; top: calc(385px + 120px + 25px); }
.hww-2-screen .text-4 { left: 260px; top: calc(385px + 120px + 65px); }

.hww-2-screen .text-5 { left: 957px; top: calc(80px + 120px + 25px); }
.hww-2-screen .text-6 { left: 957px; top: calc(80px + 120px + 65px); }

.hww-2-screen .text-7 { left: 1023px; top: calc(362px + 120px + 25px); }
.hww-2-screen .text-8 { left: 1023px; top: calc(362px + 120px + 65px); }

/* --- Fade появление при скролле --- */
.hww-screen, .hww-2-screen {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.hww-screen.is-visible,
.hww-2-screen.is-visible {
  opacity: 1;
}

/* ===== Clients Section ===== */
.clients {
  position: relative;
  min-height: 100vh;
  background: url("images/backgrounds/Clients_background.png") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.clients-content {
  width: 90%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.clients-left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clients-left h1 {
    font-family: 'ZT Neue Ralewe ExtBd';
  src: url('fonts/ZTNeueRalewe-ExtraBold.ttf') format('truetype');
  /* font-family: 'ZT Neue Ralewe SemBd', sans-serif; */
  font-size: clamp(36px, 4vw, 64px);
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}

.clients-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clients-right img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.3));
  transition: transform 0.4s ease;
}

.clients-right img:hover {
  transform: scale(1.05);
}

/* ===== FIX: Burger Active State ===== */
.burger {
  position: relative;
  z-index: 2001; /* поверх меню */
}

.burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* ✳️ При активном состоянии бургер превращается в крестик */
.burger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== FIX: Mobile Menu layering ===== */
.mobile-menu {
  position: fixed;
  top: 80px; /* совпадает с .nav-bar */
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  z-index: 2000; /* выше контента */
}

.mobile-menu.open {
  max-height: 300px; /* увеличено — если добавятся ссылки */
}

/* ===== Clients Grid ===== */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 70px; /* чуть больше расстояние, чтобы лого не слипались */
  justify-items: center;
  align-items: center;
  width: 100%;
}

.clients-grid img {
  max-width: 210px; /* было 160px → увеличено на ~30% */
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.9);
  opacity: 0.9;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.clients-grid img:hover {
  transform: scale(1.1);
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}



/* =======================================================
   =======   A D A P T I V E   L A Y E R   ===============
   ======================================================= */

/* ===== 1024px — Tablet horizontal ===== */
@media (max-width: 1024px) {

  /* ==== ABOUT ==== */
  .about {
    flex-direction: column;
    align-items: center;
    padding: 80px 40px;
  }
  .about-page {
    width: 100%;
    max-width: 800px;
  }
  .about h1, .about h2 {
    text-align: center;
  }

  /* ==== HWW ==== */
  .hww {
    padding: 80px 40px;
    overflow-x: hidden;
  }
  .outer-circle { width: 550px; height: 550px; }
  .outer-circle-1 { width: 380px; height: 380px; }
  .outer-circle-2 { width: 280px; height: 280px; }
  .inner-circle { width: 180px; height: 180px; }
  .circle-text { font-size: 24px; }
  .text-block { width: 200px; font-size: 14px; }
  .hww-step { flex-direction: column; align-items: center; }

  /* ==== PORTFOLIO ==== */
  .portfolio {
    padding: 60px 30px;
  }
  .portfolio-title {
    font-size: 32px;
  }
  .carousel {
    height: auto;
  }

  /* ==== CLIENTS ==== */
  .clients-content {
    flex-direction: column;
    gap: 60px;
  }
  .clients-left h1 {
    text-align: center;
  }
}

/* ===== 900px — Tablet narrow / Burger activation ===== */
@media (max-width: 900px) {

  .burger {
    display: block;
  }
  .nav-left,
  .nav-right {
    display: none;
  }
  .nav-bar {
    justify-content: space-between;
    padding: 0 20px;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
  }
  .clients-grid img {
    max-width: 130px;
  }
}

/* ===== 768px — Tablet vertical ===== */
@media (max-width: 768px) {
  .circle-text { font-size: 22px; }
  .outer-circle { width: 480px; height: 480px; }
  .outer-circle-1 { width: 340px; height: 340px; }
  .outer-circle-2 { width: 260px; height: 260px; }
  .inner-circle { width: 160px; height: 160px; }
  .text-block { width: 160px; font-size: 13px; }
  .hww h2 { font-size: 24px; text-align: center; }
  .hww-step { margin-bottom: 40px; }
  .clients-content { gap: 40px; }
}

/* ===== 500px — Small tablets / large phones ===== */
@media (max-width: 500px) {
  .clients-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .clients-grid img {
    max-width: 160px;
  }
}

/* ===== 430px — Large phones (iPhone 14 Pro Max etc.) ===== */
@media (max-width: 430px) {

  /* ==== ABOUT ==== */
  .about {
    padding: 60px 20px;
  }
  .about h1, .about h2 {
    font-size: 24px;
    text-align: center;
  }
  .about p {
    font-size: 16px;
    text-align: center;
  }

  /* ==== HWW ==== */
  .hww {
    padding: 60px 20px;
    flex-direction: column;
    align-items: center;
  }
  .hww h2 {
    font-size: 22px;
    text-align: center;
  }
  .outer-circle { width: 380px; height: 380px; }
  .outer-circle-1 { width: 260px; height: 260px; }
  .outer-circle-2 { width: 200px; height: 200px; }
  .inner-circle { width: 140px; height: 140px; }
  .circle-text { font-size: 20px; text-align: center; }
  .text-block {
    width: 160px;
    font-size: 14px;
    text-align: center;
  }
  .hww .arrow,
  .hww .diamond {
    width: 80%;
    height: auto;
    margin: 0 auto;
    transform: none;
  }

  

  /* ==== PORTFOLIO ==== */
  .portfolio-title {
    font-size: 26px;
    text-align: center;
  }
  .carousel {
    overflow: visible;
    height: auto;
  }
  .carousel-track {
    flex-wrap: nowrap;
    overflow-x: scroll;
    gap: 20px;
  }
  .case-card {
    min-width: 280px;
    transform: none !important;
  }

  /* ==== CLIENTS ==== */
  .clients-grid img {
    max-width: 140px;
  }
  .clients-left h1 {
    font-size: 24px;
    text-align: center;
  }
  .clients-content {
    gap: 30px;
  }
}

/* ===== 390px — Standard phones ===== */
@media (max-width: 390px) {
  .hww h2 { font-size: 20px; }
  .circle-text { font-size: 18px; }
  .outer-circle { width: 320px; height: 320px; }
  .text-block { font-size: 13px; width: 140px; }
  .portfolio-title { font-size: 24px; }
  .case-card { min-width: 250px; }
}

/* ===== 360px — Small phones ===== */
@media (max-width: 360px) {
  .about h1, .about h2,
  .hww h2,
  .portfolio-title,
  .clients-left h1 {
    font-size: 20px;
  }
  .text-block { font-size: 12px; }
  .circle-text { font-size: 16px; }
  .case-card { min-width: 220px; }
}

/* ====== HWW MOBILE VERSION ====== */

/* по умолчанию не показываем мобильную версию */
.hww-mobile {
  display: none;
}

/* показываем мобильную при ширине до 768px */
@media (max-width: 768px) {
  .hww-desktop {
    display: none;
  }

  .hww-mobile {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 80px 24px;
    background: #000;
    color: #fff;
  }

  .hww-mobile-title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: "Playfair Display", serif;
  }

  .hww-mobile-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-left: 2px solid rgb(241, 60, 10);
    padding-left: 20px;
    position: relative;
  }

  .hww-step-number {
    position: absolute;
    left: -14px;
    top: -10px;
    background: rgb(241, 60, 10);
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hww-step-text h3 {
    font-size: 18px;
    margin: 0 0 6px;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
  }

  .hww-step-text p {
    font-size: 15px;
    line-height: 1.5;
    font-family: "Raleway", sans-serif;
    color: #ccc;
  }
}
/* ===== MOBILE HWW VISIBILITY FIX ===== */
@media (max-width: 768px) {
  /* скрываем обе десктопные страницы */
  .hww-screen,
  .hww-2-screen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* показываем мобильную */
  .hww-mobile {
    display: flex !important;
    flex-direction: column;
    gap: 40px;
    padding: 80px 24px;
    background: #000;
    color: #fff;
  }
}

/* ===== FINAL FIX: scroll inside white block on mobile ===== */
@media (max-width: 768px) {
  /* скрываем extra */
  .slide-right {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
  }

  /* перестраиваем layout — столбиком */
  .slide-blocks {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    height: 100%; /* важно! */
  }

  /* красный блок остаётся обычным */
  .slide-block.red {
    flex: 0 0 auto;
  }

  /* белый блок ограничиваем и включаем прокрутку */
  .slide-block.cut {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 50vh; /* регулируй: 50–60vh оптимально */
    position: relative;
    padding-right: 10px;
    -webkit-overflow-scrolling: touch; /* для iPhone */
  }

  /* заставляем родителя позволить прокрутку дочерним блокам */
  .modal-content {
    overflow: visible !important;
  }

  /* аккуратный белый скроллбар */
  .slide-block.cut::-webkit-scrollbar {
    width: 6px;
  }
  .slide-block.cut::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
  }
}

/* ===== FINAL FIX 2: red block auto-height on mobile ===== */
@media (max-width: 768px) {
  .slide-block.red {
    min-height: auto !important;   /* убираем фикс */
    height: auto !important;       /* пусть растёт по содержимому */
    padding: 16px 20px;            /* немного компактнее */
    box-shadow: none;              /* при желании убираем тень на телефоне */
  }

  /* чтобы контент не прилипал к низу */
  .red-body {
    margin-top: 8px;
  }
}

/* ===== MOBILE POLISH: card-like red + white blocks ===== */
@media (max-width: 768px) {
  .slide-blocks {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 0 16px 20px;
  }

  /* Общие карточные свойства */
  .slide-block {
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  }

  /* Красный блок */
  .slide-block.red {
    background: rgb(241, 60, 10);
    color: #fff;
    padding: 20px;
    height: auto;
    min-height: unset;
  }

  /* Белый блок с лёгким затемнением */
  .slide-block.cut {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Градиент внизу белого блока (подсказка для скролла) */
  .slide-block.cut::after {
    content: "";
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
    pointer-events: none;
  }

  /* Аккуратный скролл */
  .slide-block.cut::-webkit-scrollbar {
    width: 6px;
  }
  .slide-block.cut::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
    border-radius: 3px;
  }

  /* Заголовки чуть крупнее */
  .slide-block.cut h3,
  .red-body .red-title {
    font-size: 18px;
  }
}

/* ===== MOBILE FONT ADJUSTMENTS in slides ===== */
@media (max-width: 768px) {
  .slide-title {
    font-size: 26px; /* вместо 40px */
    line-height: 1.2;
  }

  .slide-date {
    font-size: 14px;
  }

  .red-body p,
  .white-text {
    font-size: 14px;
    line-height: 1.4;
  }
}
/* ===== MOBILE FIX: hide human + audience inside red block ===== */
@media (max-width: 768px) {
  /* Скрываем иконку человека и подпись аудитории */
  .red-header,
  .red-audience {
    display: none !important;
    visibility: hidden !important;
  }

  /* Немного поджимаем красный блок по вертикали */
  .slide-block.red {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Если хочется чуть уменьшить отступы у текста */
  .red-body p {
    margin-top: 0;
    margin-bottom: 8px;
  }
}
/* ===== MOBILE PORTFOLIO GRID (2x6 instead of carousel) ===== */
@media (max-width: 768px) {

  /* скрываем старые горизонтальные карусели */
  .carousel {
    display: none !important;
    visibility: hidden !important;
  }

  /* создаём новую сетку */
  .portfolio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 20px;
  }

  .portfolio-title {
    text-align: center;
    font-size: 26px;
    margin-bottom: 10px;
  }

  /* контейнер сетки */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 600px;
  }

  /* карточки кейсов */
  .portfolio-grid .case-card {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    background: #000;
    position: relative;
  }

  .portfolio-grid .case-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .portfolio-grid .case-title {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  }
}

/* ===== FIX: Portfolio versions visibility ===== */
.portfolio-desktop {
  display: block;
}

.portfolio-grid {
  display: none;
}

/* 📱 только мобильная версия */
@media (max-width: 768px) {
  .portfolio-desktop {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
  }
}

/* ===== MOBILE PORTFOLIO GRID (без горизонтального скролла) ===== */
@media (max-width: 900px) {
  /* скрываем старые горизонтальные карусели */
  .carousel {
    display: none !important;
  }

  /* включаем сетку с кейсами */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    width: 100%;
    padding: 0 16px 40px;
    box-sizing: border-box;
  }

  .portfolio-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
  }

  .case-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  }

  .case-bg {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
  }

  .case-title {
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    padding: 8px 6px 14px;
  }
}

/* ===== Дополнительное уточнение для очень узких экранов ===== */
@media (max-width: 430px) {
  .portfolio-grid {
    grid-template-columns: 1fr; /* одна колонка */
    gap: 16px;
    padding: 0 12px 40px;
  }
  .case-title {
    font-size: 15px;
  }
}

/* ===== HERO: адаптив для узких экранов ===== */
@media (max-width: 480px) {
  .center-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    text-align: center;
  }

  .center-block .title {
    max-width: 85%;
    height: auto;
  }

  .center-block .slogan {
    font-family: "Playfair Display", serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    margin: 0;
    word-break: break-word;
    white-space: normal;
  }
}

/* ===== Для совсем узких экранов (<360px) ===== */
@media (max-width: 360px) {
  .center-block .title {
    max-width: 90%;
  }
  .center-block .slogan {
    font-size: 13px;
  }
}