/* ===================== CASE HERO ===================== */

.caseHero {
  position: relative;
  color: #fff;
  overflow: hidden;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;

  /* много нижнего воздуха чтобы следующий блок ("Задача клиента")
     не въезжал в свечение кнопки/карточки */
  padding-top: clamp(10rem, 2vw, 4rem);
  padding-bottom: clamp(10rem, 8vw, 12rem);
  margin-bottom: 4rem;
}

/* фоновая сцена */
.caseHero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.caseHero .galaxy {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* фиолетовый овал под превью справа */
.caseHero__radial {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 40vmax;
  height: 40vmax;
  translate: 50% -20%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(140, 80, 255, 0.45) 0%,
    rgba(10, 0, 30, 0) 70%
  );
  filter: blur(80px);
  opacity: .7;
  z-index: 1;
}

/* мягкий глобальный подсвет в середине */
.caseHero__shine {
  position: absolute;
  left: 40%;
  top: 50%;
  translate: -40% -50%;
  width: 90vmax;
  height: 90vmax;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.08) 0%,
    rgba(0,0,0,0) 70%
  );
  opacity: .4;
  filter: blur(60px);
  z-index: 1;
}

/* контентная сетка */
.caseHero__grid {
  position: relative;
  z-index: 3; /* поверх бликов */
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,460px);
  align-items: start;
  gap: clamp(2rem, 2vw, 3rem);
  max-width: 1200px;
  margin: 0 auto;
}

/* мобильная перестановка колонок:
   сначала текст, потом превью */
@media (max-width: 900px) {
  .caseHero__grid {
    grid-template-columns: 1fr;
  }

  .caseHero__colText {
    order: 1;
  }

  .caseHero__colPreview {
    order: 2;
    width: 100%;
    justify-content: flex-start;
    padding-top: 1.5rem;
  }
}

.caseHero__colText {
  max-width: 640px;
  display: flex;
  flex-direction: column;
}

.caseHero__colPreview {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 2rem; /* чтобы карточка не прилипала к хедеру */
}

/* ===================== хлебные крошки ===================== */

.caseHero__crumbs {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 100%;
  margin-bottom: .75rem;

  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
}

.caseHero__crumbsMobile {
  display: none;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  font-size: .8rem;
  line-height: 1.4;
  white-space: nowrap;
}

.caseHero__crumbsList {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;

  list-style: none;
  padding: 0;
  margin: 0;

  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.caseHero__crumbsList::-webkit-scrollbar {
  display: none;
}

.caseHero__crumbItem {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.65);
}

.caseHero__crumbItem:not(.caseHero__crumbItem--current)::after {
  content: "›";
  color: rgba(255,255,255,.35);
  margin-left: .5rem;
  font-weight: 400;
}

.caseHero__crumbItem--current {
  color: #fff;
}

.caseHero__crumbLink {
  color: inherit;
  text-decoration: none;
}
.caseHero__crumbLink:hover {
  color: #fff;
  text-decoration: underline;
}

/* на мобилке показываем коротко "Кейсы › Дубай",
   а длинную цепочку убираем */
@media (max-width: 600px) {
  .caseHero__crumbs {
    margin-bottom: .5rem;
  }

  .caseHero__crumbsMobile {
    display: block;
    font-size: .75rem;
  }

  .caseHero__crumbsList {
    display: none;
  }
}

/* ===================== бейдж над заголовком ===================== */

.caseHero__eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;

  width: fit-content;

  font-size: .7rem;
  line-height: 1.4;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: .05em;

  background: rgba(15,15,30,.6);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .4rem .75rem .4rem .5rem;

  box-shadow:
    0 0 20px rgba(140,80,255,.45),
    0 20px 40px rgba(0,0,0,.8);

  margin-bottom: 1rem;
}

.caseHero__dot {
  display: block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #a977ff 40%, #3a0c91 70%);
  box-shadow: 0 0 12px rgba(170,120,255,.9);
}

/* ===================== заголовок и лид ===================== */

.caseHero__title {
  font-size: clamp(2rem, 0.7vw + 1.6rem, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
}

.caseHero__lead {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
  max-width: 50ch;
  color: rgba(255,255,255,0.8);
  margin: 0 0 1.5rem;
}
.caseHero__lead b {
  font-weight: 700;
  color: #fff;
}

/* мобилка: немного компактнее текст */
@media (max-width: 600px) {
  .caseHero__title {
    font-size: 1.6rem;
    line-height: 1.25;
    margin-bottom: .75rem;
  }

  .caseHero__lead {
    font-size: .95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
  }
}

/* ===================== метрики ===================== */

.caseHero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.caseHero__statItem {
  min-width: 140px;
  flex: 0 0 auto;

  border-radius: .75rem;
  background: rgba(20,20,35,.6);
  border: 1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 30px 60px rgba(140,80,255,.4),
    0 0 60px rgba(140,80,255,.5) inset,
    0 20px 40px rgba(0,0,0,.8);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: .9rem 1rem;
}

.caseHero__statValue {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: .25rem;
  letter-spacing: -0.03em;
}

.caseHero__statLabel {
  font-size: .8rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* мобилка: карточки метрик в две колонки */
@media (max-width: 600px) {
  .caseHero__stats {
    gap: .75rem;
    margin-bottom: 1.5rem;
  }

  .caseHero__statItem {
    min-width: calc(50% - .5rem);
    flex: 1 1 calc(50% - .5rem);

    padding: .75rem .75rem;
    border-radius: .6rem;

    background: rgba(20,20,35,.7);
    box-shadow:
      0 16px 32px rgba(0,0,0,.9),
      0 0 20px rgba(120,70,255,.4) inset;
  }

  .caseHero__statValue {
    font-size: 1.05rem;
  }

  .caseHero__statLabel {
    font-size: .7rem;
    line-height: 1.3;
  }
}

/* ===================== CTA ===================== */

.caseHero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;

  padding: .9rem 1.25rem;
  border-radius: .75rem;
  text-decoration: none;
  color: #fff;

  background: radial-gradient(circle at 20% 20%, #8a5bff 0%, #4321c9 60%);
  border: 1px solid rgba(255,255,255,.18);


  transition: box-shadow .18s ease, transform .18s ease;
}

.caseHero__cta:hover {
  box-shadow:
    0 24px 48px rgba(120,70,255,.5),
    0 0 60px rgba(120,70,255,.7);
  transform: translateY(-2px);
}

/* мобилка: кнопка спокойнее и во всю ширину */
@media (max-width: 600px) {
  .caseHero__cta {
    width: 100%;
    text-align: center;

    background: linear-gradient(90deg, #6d4bff 0%, #2a1caa 100%);
    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
      0 12px 24px rgba(0,0,0,.8),
      0 0 20px rgba(120,70,255,.4);
  }

  .caseHero__cta:hover {
    box-shadow:
      0 16px 32px rgba(0,0,0,.9),
      0 0 28px rgba(120,70,255,.6);
    transform: translateY(-1px);
  }
}

/* ===================== превью сайта ===================== */

.caseHeroPreview {
  position: relative;
  width: 100%;
  max-width: 420px;

  border-radius: 1rem;
  background: rgba(10,10,18,.6);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 30px 120px rgba(120,70,255,.4),
    0 0 120px rgba(120,70,255,.5),
    0 40px 80px rgba(0,0,0,.8);

  padding: 1rem 1rem .75rem;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  margin-top: 1rem; /* чуть опускаем вниз от шапки */
}

.caseHeroPreview__glow {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: radial-gradient(
    circle at 20% 20%,
    rgba(160,110,255,.7) 0%,
    rgba(30,0,70,0) 70%
  );
  filter: blur(30px);
  opacity: .5;
  pointer-events: none;
}

.caseHeroPreview__frame {
  position: relative;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  background: #0d0d17;
  box-shadow: 0 20px 40px rgba(0,0,0,.8);
  overflow: hidden;

  aspect-ratio: 16/10;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.caseHeroPreview__pic,
.caseHeroPreview__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caseHeroPreview__caption {
  color: rgba(255,255,255,.6);
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  padding: .75rem .25rem 0;
}

/* мобилка: карточка шире, свет помягче, подпись слева */
@media (max-width: 900px) {
  .caseHeroPreview {
    max-width: 100%;
    width: 100%;
    border-radius: .75rem;

    box-shadow:
      0 20px 60px rgba(0,0,0,.8),
      0 0 40px rgba(120,70,255,.35);
  }

  .caseHeroPreview__glow {
    opacity: .3;
    filter: blur(24px);
  }

  .caseHeroPreview__frame {
    aspect-ratio: 16/9;
  }

  .caseHeroPreview__caption {
    font-size: .75rem;
    line-height: 1.4;
    color: rgba(255,255,255,.55);
    text-align: left;
    padding-top: .5rem;
  }
  
  .caseHero {
  padding-top: clamp(0rem, 2vw, 4rem);
}
}

/* Хлебные крошки — универсально (десктоп и моб одинаково) */

.caseHero__crumbs {
  display: block;
  max-width: 100%;
  margin-bottom: .75rem;

  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
}

/* мобильного варианта больше нет */
.caseHero__crumbsMobile {
  display: none !important;
}

.caseHero__crumbsList {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;

  list-style: none;
  padding: 0;
  margin: 0;

  /* важно: на мобиле, если не влезает по ширине,
     оно не развалится в 4 строки и не сломает высоту,
     а просто будет горизонтальный скролл */
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.caseHero__crumbsList::-webkit-scrollbar {
  display: none;
}

.caseHero__crumbItem {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.65);
}

.caseHero__crumbItem:not(.caseHero__crumbItem--current)::after {
  content: "›";
  color: rgba(255,255,255,.35);
  margin-left: .5rem;
  font-weight: 400;
}

.caseHero__crumbItem--current {
  color: #fff;
}

.caseHero__crumbLink {
  color: inherit;
  text-decoration: none;
}

.caseHero__crumbLink:hover {
  color: #fff;
  text-decoration: underline;
}

.galaxy {
    position: fixed!important;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* =========================
   CASE PAGE LAYER FIX
   (текст над звёздами, звёзды сзади)
   ========================= */

/* каждый тёмный блок кейса (где звёзды внутри секции) */
.case-block,
.case-results {
  position: relative !important;
  z-index: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* слой со звёздами/туманом В ЭТОМ БЛОКЕ
   используем твою же .galaxy (stars + nebula),
   но прижимаем НА ЗАДНИЙ ПЛАН */
.case-block__galaxy {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;            /* фон ниже контента */
  pointer-events: none !important;   /* не перекрывает мышь/выделение текста */
  opacity: 1 !important;
  overflow: hidden !important;
}

/* сам контент блока ("Задача клиента", "Запуск трафика", "Результат") */
.case-block__wrap {
  position: relative !important;
  z-index: 5 !important;             /* жёстко выше галактики */
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* на всякий пожарный — всё текстовое внутри оставить кликабельным */
.case-head,
.case-goals,
.traffic-grid,
.traffic-stats,
.results-grid,
.results-note,
.results-cta {
  position: relative !important;
  z-index: 6 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* светлые блоки без галактики (типа "Что мы сделали с сайтом") —
   пусть просто сидят над общим бэкграундом страницы и не залипают под что-то */
.case-section {
  position: relative !important;
  z-index: 10 !important;
  background: transparent !important;
  opacity: 1 !important;
}
.case-section__wrap {
  position: relative !important;
  z-index: 11 !important;
  pointer-events: auto !important;
}

/* чтобы вдруг никакая туманность не легла поверх формы/CTA */
.leadform,
.lf,
.footer,
.header {
  position: relative !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

/* =========================
   CASE LAYOUT FIX
   ========================= */

/* Общие отступы секций */
.case-block,
.case-section,
.case-results {
  position: relative;
  padding: 64px 0 64px;
}

/* Контейнер внутри секций уже есть (.container),
   но нам надо ограничить ширину текста, чтобы не рвало по всей ширине монитора */
.case-block__wrap,
.case-section__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* Карточка-контейнер для текста внутри тёмных секций
   (задачи клиента, трафик, результаты) */
.case-block--dark .case-block__wrap,
.case-results .case-block__wrap {
  position: relative;
  z-index: 2;
  background: rgba(5,10,22,.6);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6),
              0 0 60px rgba(0,170,255,.12) inset;
  padding: 32px 24px 32px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* в светлых блоках (где сайт/аналитика) делаем тоже карточку,
   но с чуть более прозрачным бэкграундом */
.case-section__wrap {
  position: relative;
  z-index: 2;
  background: rgba(8,14,32,.45);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55),
              0 0 60px rgba(0,170,255,.08) inset;
  padding: 32px 24px 32px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Галактика за карточкой */
.case-block__galaxy,
.case-results .case-block__galaxy {
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
.case-block__galaxy .stars,
.case-block__galaxy .nebula {
  position:absolute !important;
  inset:0 !important;
}

/* Заголовки секций */
.case-head__title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 12px;
}
.case-head__lead {
  font-size: 16px;
  line-height: 1.55;
  color: #cfd7eb;
  max-width: 780px;
  margin: 0 0 32px;
}

/* =========================
   БЛОК "ЗАДАЧА КЛИЕНТА"
   ========================= */

/* делаем три пункта (1/2/3) в две колонки на десктопе */
.case-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px 32px;
}
.case-goal {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 20px 20px 18px;
  box-shadow: 0 18px 32px rgba(0,0,0,.5),
              0 0 30px rgba(0,170,255,.12) inset;
}
.case-goal__title {
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
  color:#fff;
}
.case-goal__text {
  font-size:15px;
  line-height:1.55;
  margin:0;
  color:#d5def3;
}

/* мобайл = одна колонка */
@media (max-width:900px){
  .case-goals {
    grid-template-columns:1fr;
  }
}

/* =========================
   БЛОК "ЧТО МЫ СДЕЛАЛИ С САЙТОМ"
   ========================= */

.case-site__text {
  display: grid;
  gap: 24px;
}

/* каждый подпункт (1 / 2 / 3) — собственная мини-карта */
.case-site__subtitle {
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
  color:#fff;
}
.case-site__list {
  margin:0;
  padding-left:18px;
  font-size:15px;
  line-height:1.5;
  color:#d5def3;
}
.case-site__list li{
  margin:0 0 8px;
}

/* =========================
   БЛОК "ЗАПУСК ТРАФИКА"
   ========================= */

.traffic-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 32px;
  margin-bottom:32px;
}

@media(max-width:900px){
  .traffic-grid {
    grid-template-columns:1fr;
  }
}

.traffic-card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:20px 20px 18px;
  box-shadow:0 18px 32px rgba(0,0,0,.5),
             0 0 30px rgba(0,170,255,.12) inset;
}
.traffic-card__title{
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
  color:#fff;
}
.traffic-card__text{
  font-size:15px;
  line-height:1.5;
  margin:0 0 12px;
  color:#d5def3;
}
.traffic-card__list{
  margin:0;
  padding-left:18px;
  font-size:15px;
  line-height:1.5;
  color:#d5def3;
}
.traffic-card__list li{
  margin:0 0 8px;
}

/* =========================
   СТАТЫ (скриншоты Ads / CRM)
   ========================= */

.traffic-stats {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.traffic-stats__shot {
  flex:1 1 320px;
  max-width:400px;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 30px 60px rgba(0,0,0,.8),
             0 0 40px rgba(0,170,255,.15) inset;
  padding:16px;
}

.traffic-stats__img {
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
  background:#000;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 12px 24px rgba(0,0,0,.7);
}

.traffic-stats__cap{
  font-size:14px;
  line-height:1.4;
  color:#cfd7eb;
  margin-top:10px;
  text-align:left;
}

/* =========================
   БЛОК "АНАЛИТИКА И ВОРОНКА"
   ========================= */

/* ставим текст слева, скрин справа как две колонки */
.case-analytics{
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px;
  align-items:start;
  gap:32px;
}
@media(max-width:1000px){
  .case-analytics{
    grid-template-columns:1fr;
  }
}

.case-analytics__text{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:20px 20px 18px;
  box-shadow:0 18px 32px rgba(0,0,0,.5),
             0 0 30px rgba(0,170,255,.12) inset;
}

.case-analytics__subtitle{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0 0 10px;
}
.case-analytics__list{
  margin:0 0 20px;
  padding-left:18px;
  font-size:15px;
  line-height:1.5;
  color:#d5def3;
}
.case-analytics__list li{
  margin:0 0 8px;
}

.case-analytics__media{
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:16px;
  box-shadow:0 30px 60px rgba(0,0,0,.8),
             0 0 40px rgba(0,170,255,.15) inset;
}
.case-analytics__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  background:#000;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 12px 24px rgba(0,0,0,.7);
}
.case-analytics__cap{
  font-size:14px;
  line-height:1.4;
  color:#cfd7eb;
  margin-top:10px;
}

/* =========================
   БЛОК "РЕЗУЛЬТАТЫ"
   ========================= */

/* сетка KPI карточек */
.results-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px;
}
@media(max-width:1100px){
  .results-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:700px){
  .results-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:480px){
  .results-grid{
    grid-template-columns:1fr;
  }
}

.result-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:16px 16px 14px;
  text-align:center;
  box-shadow:0 18px 32px rgba(0,0,0,.5),
             0 0 30px rgba(0,170,255,.12) inset;
}
.result-card__num{
  font-size:22px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 6px;
  color:#fff;
}
.result-card__text{
  font-size:14px;
  line-height:1.4;
  color:#cfd7eb;
  margin:0;
}

/* подпояснительный текст под KPI */
.results-note{
  font-size:15px;
  line-height:1.5;
  color:#d5def3;
  max-width:880px;
  margin:0 0 24px;
}

/* CTA блок внизу */
.results-cta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.results-cta .btn-main{
  font-size:15px;
  line-height:1.3;
  font-weight:700;
  padding:14px 20px;
  border-radius:10px;
}
.results-cta__note{
  font-size:14px;
  line-height:1.4;
  color:#9ecfff;
}

/* =========================
   МЕЛКОЕ: типографика списков и абзацев, чтобы не казалось "простынёй"
   ========================= */

.case-block p,
.case-section p,
.case-block li,
.case-section li {
  font-size:15px;
  line-height:1.5;
  color:#d5def3;
}

.case-block b,
.case-section b {
  color:#fff;
  font-weight:700;
}

/* Чуть больше межстрочного в многострочных пунктах (чтобы глаз не уставал) */
.case-block li,
.case-section li {
  line-height:1.55;
}

/* Заголовки внутри карточек (h3 в пунктах) */
.case-block h3,
.case-section h3 {
  color:#fff;
}

/* ===== HARD ANTI-SCROLL PATCH (страница кейса Дубай) ===== */

/* 1. глобально запрещаем горизонтальный скролл */
html,
body {
  position: relative;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* на всякий случай фиксируем для основного контента кейса */
.caseHero,
.case-block,
.case-section,
.case-results,
.leadform,
.footer {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
}

/* 2. Любые скриншоты / дашборды / картинки внутри кейса
      не имеют права быть шире экрана */
.case-block img,
.case-section img,
.case-results img,
.traffic-stats__img,
.case-analytics__img,
.traffic-stats__shot img,
.case-analytics__media img {
  display: block;
  max-width: 100% !important;
  width: 100%;
  height: auto;
}

/* 3. Фигуры со скринами, чтобы они не держали фиксированную ширину */
.traffic-stats__shot,
.case-analytics__media,
.case-analytics__media figure,
.traffic-stats figure {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* 4. Тёмные CRM-блоки, которые ты вставил скрином (Leads / Cost per lead / ...)
      У некоторых таких фрагментов бывает min-width > 400px на колонку.
      Ломаем это принудительно. */
.crm-dashboard,
.crm-table,
.crm-funnel,
.results-kpi-block,
.traffic-stats,
.results-grid {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* Если внутри попалась строка/ячейка с min-width — глушим */
.crm-dashboard *,
.crm-table *,
.crm-funnel *,
.results-kpi-block *,
.results-grid * {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* 5. На мобильном дополнительно выключаем любое "выпирание"
      целиком на уровне секции. Даже если внутри какой-то див шире,
      он будет просто обрезан, а не потащит страницу вправо.
*/
@media (max-width: 768px) {

  .caseHero,
  .case-block,
  .case-section,
  .case-results {
    overflow-x: hidden !important;
  }

  .case-block {
    margin-top: -140px;
  }

  /* Часто overflow даёт flex с огромным gap или
     карта, у которой фиксированная ширина.
     Ставим секции в column и не даём wrap-ложным мин-ширинам. */

  .traffic-stats,
  .case-analytics,
  .results-grid {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Внутри этих блоков каждая карточка/figure растягивается на 100%,
     не пытается стоять в ряд */
  .traffic-stats__shot,
  .case-analytics__media,
  .result-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* Иногда отступы сами могут распихивать,
     поэтому делаем мобильные паддинги мягче */
  .case-block__wrap,
  .case-section__wrap,
  .case-results .case-block__wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
    max-width: 100% !important;
  }

  /* И ещё один стопор прямо на body, чтобы браузер не пытался
     прокручивать инерционно по оси X (Safari/Chrome mobile любит так делать) */
  body {
    left: 0 !important;
    right: 0 !important;
  }
}

/* ===== END HARD ANTI-SCROLL PATCH ===== */

/* ===== MOBILE ALIGN PATCH для скринов Ads / CRM ===== */
@media (max-width: 768px) {

  /* Весь блок со статистикой укладываем в колонку и центрируем */
  .traffic-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 24px;
    width: 100%;
  }

  /* Карточка со скрином: не шире экрана, нет горизонтального скролла */
  .traffic-stats__shot {
    max-width: 92vw !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 16px !important;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden; /* чтоб не вываливалось свечение/тень */
  }

  /* Сам скрин внутри карточки */
  .traffic-stats__img {
    display: block;
    max-width: 100% !important;   /* вписать в карточку */
    width: auto !important;       /* не растягивать в кашу */
    height: auto !important;
    margin: 0 auto !important;    /* по центру */
    object-fit: contain;          /* не обрезать */
  }

  /* Подпись под скрином — тоже по центру */
  .traffic-stats__cap {
    text-align: center !important;
    max-width: 100%;
    margin-top: 12px;
  }

  /* Аналогично для блока с воронкой/CRM, если у него другие классы */
  .case-analytics__media,
  .case-analytics__media figure {
    max-width: 92vw !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 16px !important;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
  }

  .case-analytics__img {
    display: block;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  .case-analytics__cap {
    text-align: center !important;
    margin-top: 12px;
  }
}
/* ===== END PATCH ===== */

/* ===== MOBILE PATCH: блок "Результат за 6 месяцев" ===== */
@media (max-width: 768px) {

  /* сетка результата: в столбик, с нормальным зазором */
  .results-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;              /* расстояние между карточками */
    width: 100%;
    max-width: 92vw;
    margin: 0 auto 24px auto !important;
  }

  /* каждая карточка результата как отдельная плашка */
  .result-card {
    background: radial-gradient(
                 circle at 20% 20%,
                 rgba(0,170,255,.12) 0%,
                 rgba(0,0,0,0) 60%
               ),
               rgba(9,14,28,.9);        /* почти как у тебя сейчас */
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    box-shadow:
      0 20px 40px rgba(0,0,0,.7),
      0 0 60px rgba(0,170,255,.18) inset;
    padding: 20px 16px 22px !important;
    text-align: center;
  }

  /* крупная цифра сверху */
  .result-card__num {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 12px 0 !important;      /* воздух между цифрой и подписью */
    letter-spacing: -.02em;
  }

  /* подпись под цифрой */
  .result-card__text {
    font-size: 18px !important;
    line-height: 1.45 !important;
    font-weight: 400;
    color: #dbe5ff !important;
    margin: 0 !important;
    text-wrap: balance;                 /* чтобы текст не рвался криво */
  }

  /* сам абзац "Что получили..." перед карточками — тоже делаем читабельно */
  .case-head__lead,
  .results-intro,
  .case-head .case-head__lead {
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: #dbe5ff !important;
    max-width: 92vw;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* сам блок итога под карточками ("Итог для клиента...") — отступ сверху побольше */
  .results-note {
    max-width: 92vw;
    margin: 24px auto 20px auto !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #cfd7ec !important;
    text-align: left;
    text-wrap: balance;
  }

  /* кнопка + подпись под ней по центру */
  .results-cta {
    max-width: 92vw;
    margin: 0 auto 32px auto !important;
    text-align: center !important;
  }
  .results-cta .btn-main {
    width: 100%;
    max-width: 320px;
    font-size: 16px;
    line-height: 1.2;
    padding: 15px 20px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-block;
  }
  .results-cta__note {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #9fb7ff;
  }
}
/* ===== END MOBILE PATCH ===== */

/* ===== EMERGENCY SCROLL FIX ===== */
html,
body {
  /* страница должна быть выше высоты экрана */
  height: auto !important;
  min-height: 100% !important;

  /* вертикальный скролл разрешён всегда */
  overflow-y: auto !important;

  /* горизонталь не нужна, чтобы не было сдвига вбок */
  overflow-x: hidden !important;
}

/* если ты добавлял класс no-scroll-x на <body> — пусть он не душит скролл по Y */
body.no-scroll-x {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 640px){
  .caseHero__crumbsList{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;        /* row / column */
    max-width:100%;
  }

  /* чтобы элементы флекса не выдавливали ширину */
  .caseHero__crumbItem{ min-width:0; }

  /* последняя (текущая) крошка уходит вниз отдельной строкой */
  .caseHero__crumbItem--current{
    flex:0 0 100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}