.desktop {
  background-color: #1f0629;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  
}


.desktop .container {
 
  margin: 0 auto;
  position: relative;
  padding-inline: clamp(20px, 5vw, 70px);
  max-width: 100%;
  width: 100%;
  padding: 0 50px;
}

.header .chatgpt-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 222px;
  height: 222px;
  object-fit: cover;
  z-index: 2;
  transform-origin: top left;        /* точка для масштабирования и сдвига */
  transition: transform 0.3s ease;  /* плавное движение */
}

/* сжатие экрана — больше сдвигаем влево */
@media (max-width: 1200px) {
  .header .chatgpt-image {
    transform: scale(0.9) translateX(-65px) ;
  }
}

@media (max-width: 992px) {
  .header .chatgpt-image {
    transform: scale(0.8) translateX(-75px);
  }
}

@media (max-width: 768px) {
  .header .chatgpt-image {
    transform: scale(0.7) translateX(-85px);
  }
}


@media (max-width: 747px) {
  .header .chatgpt-image {
    transform: scale(0.7) translateX(-85px) translateY(80px) ;
  }
}


@media (max-width: 480px) {
  .header .chatgpt-image {
    transform: scale(0.6) translateX(-135px) translateY(105px) ;
  }
}

@media (max-width: 429px) {
  .header .chatgpt-image {
    transform: scale(0.54) translateX(-170px) translateY(105px) ;
  }
}

/* Большой blur-эллипс */
.ellipse-blur {
  position: absolute;
  top: 0;
  left: 55px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  mix-blend-mode: plus-lighter;
  background: radial-gradient(
    circle,
    rgba(255, 174, 225, 0.6) 55%,
    rgba(254, 107, 161, 0.3) 45%,
    rgba(255, 111, 156, 0.18) 58%,
    rgba(255, 98, 182, 0) 72%
  );
  filter: blur(65px);
  pointer-events: none;
  z-index: 2;
  transform-origin: top left;
  transition: transform 0.3s ease;
}

/* Малый эллипс */
.desktop .ellipse {
  position: absolute;
  top: 45px;
  left: 96px;
  width: 177px;
  height: 179px;
  background-color: #d9d9d9f7;
  border-radius: 88.5px/89.5px;
  filter: blur(85px);
  
  transform-origin: top left;
  transition: transform 0.3s ease;
}

@media (max-width: 1200px) {
  .ellipse-blur {
    transform: scale(0.9) translateX(-60px) translateY(-9px) ; /* меньше, чем у лого */
  }
  .desktop .ellipse {
    transform: scale(0.9) translateX(-50px) translateY(-9px); /* еще меньше */
  }
}

@media (max-width: 992px) {
  .ellipse-blur {
    transform: scale(0.8) translateX(-63px);
    filter: blur(65px); /* увеличили блюр */
  }
  .desktop .ellipse {
    transform: scale(0.8) translateX(-55px);
    filter: blur(65px); /* увеличили блюр */
  }
}

@media (max-width: 768px) {
  .ellipse-blur {
    transform: scale(0.7) translateX(-65px);
     filter: blur(58px); /* увеличили блюр */
  }
  .desktop .ellipse {
    transform: scale(0.7) translateX(-65px);
     filter: blur(58px); /* увеличили блюр */
  }
}


 @media (max-width: 747px) {
  .ellipse-blur {
    transform: scale(0.7) translateX(-65px) translateY(70px) ;
     filter: blur(60px); /* увеличили блюр */
  }
  .desktop .ellipse {
    transform: scale(0.7) translateX(-65px) translateY(65px);
     filter: blur(60px); /* увеличили блюр */
  }
}


@media (max-width: 480px) {
  .ellipse-blur {
    transform: scale(0.65) translateX(-130px) translateY(90px) ;
     filter: blur(62px); /* увеличили блюр */
  }
  .desktop .ellipse {
   transform: scale(0.83) translateX(-85px) translateY(30px);
    filter: blur(57px); /* увеличили блюр */
  }
}

@media (max-width: 429px) {
  .ellipse-blur {
    transform: scale(0.55) translateX(-170px) translateY(90px) ;
     filter: blur(65px); /* увеличили блюр */
  }
  .desktop .ellipse {
   transform: scale(0.9) translateX(-85px) translateY(15px);
    filter: blur(60px); /* увеличили блюр */
  }
}


.ellipse-blur-low {
  position: absolute;
  width: 300px;
  height: 300px;
  top: -200px;
  left: -200px;
  border-radius: 100%;
  mix-blend-mode: plus-lighter;
  background: radial-gradient(
    circle,
    rgba(255, 59, 138, 0.46) 50%,
    rgba(255, 120, 180, 0.30) 90%,
    rgba(255, 120, 180, 0.08) 90%,
    rgba(255, 120, 180, 0) 72%
  );

  filter: blur(100px);
  pointer-events: none;
  
}

.desktop .rectangle {
  position: absolute;
  top: 198px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* ширина на весь экран */
  height: 790px;
  background-color: #ffb0cc38;
  backdrop-filter: blur(20px) brightness(100%);
  -webkit-backdrop-filter: blur(20px) brightness(100%);
}

.desktop .white-paint {
  position: absolute;
  top: 180px;
  left: 0;

  width: 100%;
  height: 762px;

  background-image: url("images/FON.jpg");
  background-size: cover;       /* НЕ тянет */
  background-position: center;
  background-repeat: no-repeat;

  mix-blend-mode: color-burn;
}

.desktop .div {
  position: absolute;
  top: -108px;

  left: 50%;
  transform: translate(-50%, 0) rotate(180deg);

  width: 150%;        /* вместо vw */
 
  height: 341px;

  filter: blur(15.95px);
  background: linear-gradient(
    180deg,
    rgba(30, 6, 41, 1) 0%,
    rgba(31, 6, 42, 1) 100%
  );
}


.desktop .ellipse-2 {
  position: absolute;
  top: -420px;
  left: 86%;
  width: 390px;
  height: 511px;
  background-color: #ff0a53f0;
  border-radius: 308.33px/315.61px;
  transform: rotate(-113.12deg);
  filter: blur(160px);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.desktop .ellipse-3 {
  position: absolute;
  top: -373px;
  left: -281px;
  width: 724px;
  height: 745px;
  background-color: #ff2067eb;
  border-radius: 362px/372.5px;
  filter: blur(219.1px);
  pointer-events: none;
  transform-origin: top left;
  transition: transform 0.3s ease;
}
/* Большой экран */
@media (max-width: 1200px) {
  .desktop .ellipse-3 {
    transform: scale(0.98);
    width: 710px;   /* вручную подбираешь */
    height: 730px;
  }
}

/* Средний экран */
@media (max-width: 992px) {
  .desktop .ellipse-3 {
    transform: scale(0.95);
    width: 700px;
    height: 720px;
  }
}

/* Мобилка */
@media (max-width: 768px) {
  .desktop .ellipse-3 {
    transform: scale(0.91);
    width: 700px;
    height: 710px;
  }
}

/* Очень маленький экран */
@media (max-width: 480px) {
  .desktop .ellipse-3 {
    transform: scale(0.89);
    width: 680px;
    height: 710px;
  }
}

/* Очень маленький экран */
@media (max-width: 429px) {
  .desktop .ellipse-3 {
    transform: scale(0.85);
     width: clamp(650px, 40vw, 760px);  /* минимальная ширина 550px, максимум 660px */
  height: clamp(700px, 42vw, 810px); /* минимальная высота 600px, максимум 710px */
  }
}

.desktop .ellipse-4 {
  position: absolute;
  top: 70px;
  right: -150px;
  
 
  width: clamp(200px, 25vw, 408px);
  height: clamp(300px, 34vw, 556px);

  background-color: #ff1b54eb;
  border-radius: 204px/278px;
 filter: blur(clamp(100px, 11vw, 170px));
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.header {
  position: relative;
  width: 100%;
  height: 222px;
}




.desktop .rectangle-2 {
  position: absolute;
  
top:770px;
  left: 50%;
  transform: translate(-50%, 120px);
  width: 180vw;
  height: 400px;
   background-color:#1f062a;
  filter: blur(33.55px);
  z-index: 1;
  pointer-events: none;
}

/* Контейнер блока "Об о себе" */
.desktop .view {
  position: relative;       /* для абсолютных элементов внутри */
  display: flex;
  flex-direction: column;   /* элементы друг под другом */
  align-items: center;      /* центрируем по горизонтали */
  gap: 20px;                /* расстояние между эллипсом и текстом */
  margin-top: 30px;         /* отступ от предыдущего блока */
  width: 100%;              /* растягиваем на всю ширину */
}

/* Эллипс — декоративный элемент, оставляем absolute */
.desktop .ellipse-6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 381px;
  height: 61px;
  background-color: #ff1c82;
  border-radius: 190.5px/30.5px;
  filter: blur(45px);
  mix-blend-mode: plus-lighter;
  z-index: 1;  /* ниже текста */
}

/* по умолчанию (десктоп) */
.mobile-text {
  display: none;
}

.desktop .group {
  position: absolute;
  top: 100px;               /* отступ от верхнего края контейнера */
  left: 50%;                /* центрирование по горизонтали */
  transform: translateX(-50%);
  width: 293px;
  height: 1px;
  z-index: 1;
}

.desktop .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 297px;
  height: 4px;
}

 
.desktop .p {
  position: relative;      /* поверх эллипса */
  font-family: "Aleo-Bold", Helvetica;
  font-weight: 700;
  font-size: 55px;
  text-align: center;
  background: linear-gradient(
    90deg,
    #a6a6a6 -20%,
    #ffffff 40%,
    #ffffff 60%,
    #ffffff 60%,
    #a5a5a5 130%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  z-index: 2;  /* выше эллипса */
  margin: 0;
}


.p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 100%;
  height: 1.7px;
  background-color: #ffffff;
  filter: blur(1.2px);
}

.desktop .text-wrapper {
  color: #000000;
}


.desktop .group-2 {
  top: 69px;
  left: 380px;
  width: 350px;
  position: absolute;
  height: 1px;
}

.desktop .img {
  position: absolute;
  top: -3px;
  left: -2px;
  width: 354px;
  height: 4px;
}

/* Контейнер заголовка Портфолио */
.portfolio-header {
  position: relative;           /* чтобы эллипс позиционировался относительно заголовка */
  text-align: center;
  margin: 380px 0 60px;         /* отступы сверху и снизу */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-header .ellipse-7 {
  position: absolute;
  top: 8px;          /* отступ сверху блока */
  left: 50%;         /* центрируем горизонтально */
  transform: translateX(-50%) rotate(0deg); /* по желанию можно наклон */
  width: 430px;      /* как у тебя было */
  height: 60px;      /* как у тебя было */
  background-color: #fc1d64;
  border-radius: 50px / 33.5px;  /* почти как твой старый стиль, но чуть ровнее */
  filter: blur(53px); 
  mix-blend-mode: plus-lighter;
  z-index: 0;        /* чтобы был под текстом */
}

/* Заголовок Портфолио */
.portfolio-header .portfolio-title {
  position: relative;
  font-family: "Aleo-Bold", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 55px; /* адаптивный размер */
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0;

  /* Градиентный текст */
  background: linear-gradient(
    90deg,
    #979797 -20%,
    #ffffff 30%,
    #ffffff 50%,
    #ffffff 80%,
    #898989 120%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  z-index: 1;                  /* над эллипсом */
  margin: 0;
  display: inline-block;
  position: relative;
}

/* Нижняя линия под текстом */
.portfolio-header .portfolio-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;               /* расстояние от текста */
  width: 100%;
  height: 2px;                /* толщина линии */
  background-color: #ffffff;
  filter: blur(1.2px);
  border-radius: 1px;
}




/* общая обёртка текста + фото */
.hero-inner {
  position: relative;
  
  flex-wrap: nowrap;
  width: 100%;
  padding-top: 140px;
  z-index: 2;
 align-items: center; /* ❗ ключ */
  gap: 4vw;
  overflow: visible;
  flex-direction: row;
  display: flex;
 
  gap: 30px; /* отступ между текстом и фото */
  
}

.hero-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5vw, 24px);
  margin-top: 220px;
  margin-left: clamp(20px, 8vw, 50px);

  
}

.desktop .text-wrapper-2 {
  position: relative;
  top: clamp(20px, 5vw, 60px);
  font-family: "Aleo-Bold", Helvetica;
  font-weight: 700;
  font-size: 53px;
  line-height: 1.15;
  text-align: left;
  max-width: none;        /* убираем ограничение ширины */
  overflow: visible;      /* разрешаем выход за контейнер */
  background: linear-gradient(
    90deg,
    #5c5c5c -10%,
    #ffffff 15%,
    #ffffff 50%,
    #ffffff 70%,
    #595959 120%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 99999;
  text-shadow: 4px 5px 9px rgba(0,0,0,0.10);
}

.desktop .name {
  position: relative;
  display: inline-block;

  font-family: "tilda-script-non-connect-light", Helvetica;
  font-weight: 300;
   display: inline-block;   /* важно */
  width: fit-content;      /* важно */
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: clamp(1.5px, 0.4vw, 4.4px);
  text-align: left;

  background: linear-gradient(
    90deg,
    #fb267b -10%,
    #ff4f9e 20%,
    #ff95c6 50%,   /* центр */
    #ff4f9e 70%,
    #ff1c77 100%
  );

  background-size: 200% 100%;      /* фиксирует растяжение */
  background-position: center;     /* центр всегда в середине */
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: clamp(17px, -1vw, -10px);
 margin-left: clamp(20px, 6vw, 93px);
}
.group-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0; /* расстояние между элементами колонки */
 
}

.subtext {

  position: relative;
  margin: 0;
  padding: 0;
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
  font-size: 30px; /* 🔥 адаптив */
  line-height: clamp(20px, 2.8vw, 40px);
  color: #ffffff;
  text-shadow: 3px 3px 4px rgba(2, 2, 2, 0.3);
  text-align: left;
   line-height: 1.3;
   max-width: 41ch;
}

.text-mobile {

  position: relative;
  margin: 0;
  padding: 0;
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
  font-size: 30px; /* 🔥 адаптив */
  line-height: clamp(20px, 2.8vw, 40px);
  color: #ffffff;
  text-shadow: 3px 3px 4px rgba(2, 2, 2, 0.3);
  text-align: left;
   line-height: 1.3;
   max-width: 41ch;
}

.photo-block {
   max-width: 500px;
    flex: 1 1 0;
  min-width: 0;

  display: flex;
  justify-content: flex-start; /* 🔹 сдвигаем весь блок влево */
  align-items: center;
  
  transform: none;        /* ❗ убираем */
  margin-right: 80px;
  margin-top: -40px;
}

.photo-block .element {
 width: 100%;
max-width: 630px;
  
  display: block;
}
/* фото */
.photo-wrap .element {
  display: block;
  position: relative;
  z-index: 2;
  
}

.photo-wrap {
  position: relative;
  width: 100%;
  min-width: 30px; /* ширина фото */
  z-index: 999;

}


.photo-block .group-8 {
  position: absolute;
  left: 50%;
  bottom: -15px;
 width:100%;
  aspect-ratio: 5.6 / 1;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  transform: translateX(calc(-50% + 10px));
}




/* Размытый фон кнопки */
.photo-block .rectangle-3 {
  width: 100%;
  height: 100%;
  background-color: #ff4a92;
  border-radius: 9.52px;
  box-shadow: inset 7px 7px 24.8px #cd3974;
  filter: blur(10px);
  mix-blend-mode: screen;
  z-index: 2;
}

/* Градиент */
.photo-block .rectangle-4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
   #fe4696 15%,
    #fe8dcf 50%,
    #fe4092 95%
  );
  z-index: 3;
}

/* Текст кнопки */
.photo-block .text-wrapper-8 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
 font-family: 'Montserrat', sans-serif; /* ✅ обязательно в кавычках */
line-height: 1;
font-weight: 500;
    font-size:  29.5px; /* 🔥 ключ */
 text-shadow: 2px 2px 2px rgba(31, 71, 31, 0.3);
  color: #ffffff;
  white-space: nowrap;
  z-index: 3;
}

.photo-block .container {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 🔥 вправо */
}

/* Эффект подпрыгивания и подсвет */
.photo-block .group-8 {
  display: inline-block;
  transition: transform 0.3s ease, filter 0.3s ease; /* плавное движение и подсвет */
}

.photo-block .group-8:hover {
transform: translateX(calc(-50% + 10px)) translateY(-3px);
  filter: brightness(1.1);
}


.element {
  outline: none;
  border: none;
  box-shadow: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;

  pointer-events: none;
}


/* 1. Подключаем локальный шрифт */
@font-face {
  font-family: 'tilda-script-non-connect-light';
  src: url('./font/tilda-script-non-connect-light.otf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/* 2. Применяем шрифт к твоему тексту */
.desktop .span {
    color: #000000;
    letter-spacing: 1.76px;
    font-family: "tilda-script-non-connect-light", sans-serif; /* Добавили шрифт */
}
/* ===========================
   Контейнер меню (верхнее меню)
   =========================== */
.desktop .group-5 {
  position: relative;
  display: flex;
  gap: 35px;
  width: auto;
  z-index: 10;
  margin-top: 60px;
}

.header .group-5 {
  margin-left: auto;
   margin-right: 60px; /* подбери 20–60px */
}


/* Внутренний контейнер группы ссылок */
.desktop .group-6 {
 display: inline-block; /* чтобы псевдоэлемент ориентировался по ширине текста */
  position: relative;           /* для линии ::after */
  gap: 35px;    
              /* расстояние между пунктами */
}

.group-6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;       /* отступ линии от текста */
  width: 100%;         /* теперь 100% от ширины .group-6, т.е. текста */
   height: clamp(0.1px, 0.05vw, 0.1px);
  background-color: #ffffff;
  box-shadow: 0 0 0.9px 0.9px #ffffff;
  filter: blur(1.4px);
}

@media (max-width: 946px) {
  .group-6::after {
    box-shadow: 0 0 0.6px 0.9px #ffffff;  /* меньше радиус */
    filter: blur(0.3px);           /* меньше размытие */
    opacity: 1;                  /* мягкость */
  }
}


/* Индивидуальные градиенты для каждого пункта меню */
.desktop .text-wrapper-3 {
  background: linear-gradient(
    90deg,
    #9f9f9f -20%,
    #ffffff 30%,
    #ffffff 80%,
    #ffffff 80%,
    #9f9f9f 120%
  );
}

.desktop .text-wrapper-4 {
  background: linear-gradient(
    90deg,
    #9f9f9f -20%,
    #ffffff 15%,
    #ffffff 70%,
    #ffffff 80%,
    #9f9f9f 110%
  );
}

.desktop .text-wrapper-5 {
  background: linear-gradient(
    90deg,
    #9f9f9f -30%,
    #ffffff 20%,
    #ffffff 80%,
    #ffffff 80%,
    #9f9f9f 110%
  );
}

.desktop .text-wrapper-6 {
  background: linear-gradient(
    90deg,
    #9f9f9f -10%,
    #ffffff 15%,
    #ffffff 80%,
    #ffffff 80%,
    #9f9f9f 110%
  );
}

.desktop .text-wrapper-7 {
  background: linear-gradient(
    90deg,
    #b8b8b8 -15%,
    #ffffff 10%,
    #ffffff 80%,
    #bababa 110%
  );
  white-space: normal;      /* разрешаем перенос слов */
  word-break: break-word;
  max-width: 100%;
}

.desktop .group-9 {
  display: flex;
  flex-direction: column; /* вертикально */
  gap: 20px;              /* расстояние между параграфами */
  
}

 .desktop .ozon-wildberries,
.desktop .text-wrapper-10 {
  margin: 0;
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  text-align: left;        /* выравнивание влево */
  color: #ffffff;
  text-shadow: 4px 4px 5.2px #00000069;
}


.desktop .text-wrapper-11,
.desktop .text-wrapper-12,
.desktop .text-wrapper-13,
.desktop .text-wrapper-14 {
  position: relative;       
  z-index: 2;               
  max-width: 800px;         
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
 font-size: 29px;
line-height: 1.25;
  color: #ffffff;
  text-align: left;         
   text-shadow: 2px 2px 4px rgba(31, 31, 31, 0.3);
}

.about-wrapper .div-5 {
  position: relative;          /* теперь в потоке */
  z-index: 2;                  /* над фоновой картинкой и эллипсами */
  margin: 40px auto 0 auto;    /* вертикальный отступ сверху, центрирование */
  text-align: center;          /* текст по центру */
  font-family: "tilda-script-non-connect-light", Helvetica;
  font-weight: 400;
  font-size: 43px;
  line-height: normal;
  letter-spacing: 0;

  /* Градиент для текста */
  background: linear-gradient(
    90deg,
    #fd3183 0%,
    #ff87b3 45%,
    #ff85b2 50%,
    #fd3183 95%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


.desktop .text-wrapper-15 {
  font-family: "tilda-script-non-connect-light", Helvetica;
  color: #000000;
}

/* Декоративный эллипс */
.about-wrapper .ellipse-9 {
  position: absolute;        /* можно оставить абсолют, так как это декоративный элемент */
  top: 50%;                  /* позиция относительно блока about-wrapper */
  left: 80%;                 /* например, справа */
  transform: translate(-50%, -50%) rotate(14.27deg); /* центрирование и поворот */
 width: clamp(60px, 6vw, 82px);
height: clamp(80px, 8vw, 107px);
  background-color: rgba(255, 255, 255, 0.56);
  border-radius: 40.87px / 53.51px;
filter: blur(clamp(23px, 2vw, 28.75px));
  z-index: 1;                /* чтобы быть под основным контентом */
}

/* Фото */
.about-wrapper .image {
  position: relative;        /* теперь фото в потоке */
  max-width: 199px;
  width: 170px;
 
  aspect-ratio: 1;
  object-fit: cover;
  margin: 30px auto;         /* отступ сверху, центрирование */
  z-index: 9;                /* поверх декоративного эллипса */
}

.ellipse-10 {
  position: absolute; /* фиксируем на экране, не зависит от секций */
  top: 85%;        /* положение от верхнего края окна */
  left: -10%;    /* сдвиг влево, можно менять */
  width: 370px;
  height: 340px;
  background-color: #ff0059e7;
  border-radius: 243px / 250px;
  transform: rotate(165deg);
  filter: blur(120px);
  mix-blend-mode: plus-lighter;
  z-index: 0;      /* позади всего контента */
  pointer-events: none; /* чтобы не мешал кликам по сайту */
}

.about-wrapper .image-3 {
  position: absolute;
  top: -140px;          /* регулируешь положение */
  left: -19px;
  width: clamp(370px, 35vw, 480px); /* уменьшение начинается раньше, но фото остаётся достаточно большим */
  height: auto;    /* высота автоматически по пропорциям */
  z-index: 2;
}

 .ellipse-11 {
  position: absolute;
 
  right: -240px;
  width: 350px;
  height: 411px;
  background-color: #ff0454;
  border-radius: 243px / 205px;
  filter: blur(150px);
  mix-blend-mode: plus-lighter;
  z-index: 0;
  
  
}

.about-wrapper .ellipse-12 {
  position: absolute;
  bottom: -200px;
  left: -300px;
  width: 517px;
  height: 531px;
  background-color: #ff0f5b;
  border-radius: 308px / 315px;
  transform: rotate(-113deg);
  filter: blur(220px);
  mix-blend-mode: plus-lighter;
  z-index: 0;
}

.view-11 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 150px;
}

.price-blocks-container {
  display: flex;
  justify-content: center;
  gap: 100px;
  flex-wrap: wrap;
}

.price-block {
  position: relative;
  width: 490px;
  min-height: 715px;
  font-family: "Aleo", Helvetica, sans-serif;
    font-weight: 300; /* Regular */
  color: #fff;
}

/* Основной фон */
.price-block__background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(20px) brightness(100%);
  z-index: 1;
}

/* Нижний градиент под цену */
.price-block__gradient {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 115px;
  border-radius: 0 0 10px 10px;
 background: linear-gradient(
    90deg,
     #fd4092 30%,
    #ff84c5 50%,
    
    #ff358c 100%
  );
  z-index: 2;
}

/* Контейнер контента */
.price-block__content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 3;
   margin-top: 2px; /* ⬅️ ОПУСКАЕМ ВНИЗ */
}

.price-block__title {
  font-size: 45px;
  font-weight: 600;
  background: linear-gradient(
    90deg,
     #ff2881 -10%,
    #ff9cca 20%,
      #ff9cca  20%,
    #ff2c84 75%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: 17px;
  margin-left: 11px; /* сдвиг под кружки */
}

.price-block__title2 {
  
  font-size: 45px;
  font-weight: 600;

  background: linear-gradient(
    90deg,
    #ff2881 -10%,
    #fda0cb 20%,
      #fda0cb  20%,
    #ff2c84 85%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: 17px;
  margin-left: 11px; /* сдвиг под кружки */
}

.price-block__titlee {
   white-space: nowrap;      /* текст в одну строку */
  font-size: 45px;
  font-weight: 600;

  background: linear-gradient(
    90deg,
      #ff398c -20%,
    #ff99c9 40%,
      #ff97c8 50%,
    #ff3c8e 130%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: 17px;
  margin-left: 11px; /* сдвиг под кружки */
}
.mobile-text {
   white-space: nowrap;      /* текст в одну строку */
  font-size: 45px;
  font-weight: 600;

  background: linear-gradient(
    90deg,
      #ff398c -9%,
    #ff99c9 25%,
     
    #ff3c8e 80%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: 17px;
  margin-left: 11px; /* сдвиг под кружки */
}

.price-block__title3 {
   white-space: nowrap;      /* текст в одну строку */
  font-size: 45px;
  font-weight: 600;

  background: linear-gradient(
    90deg,
      #ff2881 -20%,
    #ff9cca 25%,
      #ff9cca 10%,
    #ff2c84 60%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: 17px;
  margin-left: 11px; /* сдвиг под кружки */
}

/* Подзаголовок */
.price-block__subtitle {
  font-size: 30px;
  font-weight: 400;
  color: #fff;
 
  margin-bottom: 20px;
    margin-left: 13px; /* сдвиг под кружки */
    text-shadow: 2px 2px 4px rgba(31, 31, 31, 0.4);
  
}

.price-block__feature {
  display: flex;
  align-items: flex-start;  /* выравниваем кружок с верхней линией текста */
  gap: 10px;                /* расстояние между кружком и текстом */
  margin: 15px 5px -1px 13px;
  font-size: 25px;
  color: #fff;
  text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  line-height: 1.4;         /* чтобы многострочный текст не смещался */
  transform: translateY(-9px); /* поднимает весь блок на 5px вверх */
}

.price-block__bullet {
  flex-shrink: 0;            /* не сжимается */
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-top: 10px;           /* подбираем, чтобы центр круга был по первой строке текста */
}

.price-block__text {
  display: inline-block;
  
}


.price-block__price {
  margin-top: auto;          /* толкает цену вниз */
  width: 100%;               /* чтобы можно было центрировать */
  display: flex;
  justify-content: center;   /* ⬅ центр по горизонтали */
  align-items: center;
  font-size: 43px;
  font-weight: 600;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(31, 31, 31, 0.3);
  gap: 8px;
   margin-bottom: 8px; /* ⬅ поднимает цену вверх */
}


.price-block__text {
  display: inline-block;
  word-break: break-word;
}

.desktop .rectangle-13 {
  top: 377px;
  left: 0;
  position: absolute;
  width: 499px;
  height: 699px;
  background-color: #ffffff4f;
  border-radius: 10px;
  backdrop-filter: blur(20px) brightness(100%);
  -webkit-backdrop-filter: blur(20px) brightness(100%);
}

.desktop .text-wrapper-32 {
  top: 0;
  left: 659px;
  width: 410px;
  text-shadow: 3px 3px 5px #0000004a;
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 25px;
  position: absolute;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .rectangle-14 {
  top: 955px;
  left: 0;
  position: absolute;
  width: 499px;
  height: 119px;
  border-radius: 10px;
 background: linear-gradient(
    90deg,
    #ff248a 0%,
   
    #ff6cb0  50%,
   
    #ff248a 100%
  );
}

.desktop .text-wrapper-33 {
  position: absolute;
  top: 411px;
  left: 11px;
  width: 477px;
  -webkit-background-clip: text !important;
  font-family: "Aleo-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 45px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  /* Линейный градиент: серый по бокам, белый центр */
  background: linear-gradient(
    90deg,
    #ff569a 0%,
    #fe94bb 40%,
    #fe94bb  40%,
    #fe94bb  65%,
    #ff5c9d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.desktop .group-19 {
  top: 988px;
  left: 133px;
  width: 181px;
  gap: 5px;
  position: absolute;
  height: 54px;
  display: flex;
}

.desktop .text-wrapper-34 {
  width: 140px;
  height: 54px;
  font-family: "Aleo-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 45px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
   
}



.desktop .group-20 {
  position: absolute;
  top: 814px;
  left: 25px;
  width: 1141px;
  height: 699px;
}

.desktop .rectangle-15 {
  top: 0;
  left: 589px;
  position: absolute;
  width: 499px;
  height: 699px;
  background-color: #ffffff4f;
  border-radius: 10px;
  backdrop-filter: blur(20px) brightness(100%);
  -webkit-backdrop-filter: blur(20px) brightness(100%);
}

.desktop .rectangle-16 {
  top: 580px;
  left: 589px;
  position: absolute;
  width: 499px;
  height: 119px;
  border-radius: 10px;
 background: linear-gradient(
    90deg,
    #ff248a 0%,
   
    #ff70a7  50%,
   
    #ff248a 100%
  );
}


.desktop .text-wrapper-44 {
  position: absolute;
  top: 34px;
  left: 644px;
  width: 477px;
  -webkit-background-clip: text !important;
  font-family: "Aleo-SemiBold", Helvetica;
  font-weight: 600;
  color: transparent;
  font-size: 45px;
  letter-spacing: 0;
  line-height: normal;
 /* Линейный градиент: серый по бокам, белый центр */
  background: linear-gradient(
    90deg,
    #ff5297 -5%,
    #fe94bb 16%,
    #fe94bb  10%,
    #fe94bb  30%,
    #ff579a 50%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.desktop .group-21 {
  top: 608px;
  left: 761px;
  width: 148px;
  gap: 7px;
  position: absolute;
  height: 54px;
  display: flex;
 
}

.footer {
  position: relative;
  width: 100%;
  background: transparent;
}

.footer-inner {
  position: relative;
  min-height: 130px;
  padding: 40px 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.rectangle-17 {
  position: absolute;
  inset: 0;

  background: #fffbfb52;
  backdrop-filter: blur(20px);

  z-index: 0;
}

.footer-inner > *:not(.rectangle-17) {
  position: relative;
  z-index: 1;
}


/* ===== КРУГ С БУКВОЙ ===== */
.footer .ellipse-with-letter {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.68px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -60px; /* поднимаем кружок над прямоугольником */
  background-color: transparent;
  z-index: 1;
  top: 0;
  transform: translateY(30px); /* вместо 30px */
}

/* Буква внутри круга */
.footer .ellipse-with-letter .letter {
 position: absolute; /* ключевой момент */ 
 top: 50%; 
 left: 50%; 
 transform: translate(-55%, -57%); /* подбираем визуальный центр */
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
  font-size: 45px;
  color: #ffffff;
  line-height: 1;
    display: block; /* достаточно, flex родителя центрирует */
   
}

.footer .div-6 {
  font-family: "tilda-script-non-connect-light", Helvetica;
  font-weight: 300;
  font-size: 33px;
  text-align: center;
  letter-spacing: 4px;

  line-height: 1.3;          /* ⬅️ КЛЮЧ */
  padding-bottom: 6px;       /* ⬅️ КЛЮЧ */

  background: linear-gradient(
    90deg,
    #fd3384 -15%,
    #ff91b9 30%,
    #ff8db7 50%,
    #fd3786 115%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  z-index: 1;
}


.footer .text-wrapper-52 {
  letter-spacing: 1.59px;
}



.footer .text-wrapper-53 {
  letter-spacing: 0.99px;
}

/* ===== ОПИСАНИЕ ===== */
.footer .div-7 {
  position: relative;
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
  font-size: 25px;
  text-align: center;
  letter-spacing: 3px;
  color: #ffffff;
 text-shadow: 2px 2px 4px rgba(62, 62, 62, 0.3);
  z-index: 1;

}
.footer .div-88 {
  position: relative;
  font-family: "Aleo-Regular", Helvetica;
  font-weight: 400;
  font-size: clamp(10px, 2.8vw, 25px);
  text-align: center;
  letter-spacing: clamp(1px, 0.5vw, 3px);
  color: #ffffff;
 text-shadow: 2px 2px 4px rgba(62, 62, 62, 0.3);
  z-index: 1;

}

.footer .ellipse-with-letter,
.footer .div-6,
.footer .div-7 {
  position: relative;
  z-index: 1;
}





/* ========== ОБЩИЙ КОНТЕЙНЕР ========== */
.group-24 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
   margin-top: 100px; /* меняй число как нужно: 50px, 150px и т.д. */
   margin-bottom: 180px;
}

/* ========== ОБЩИЕ КНОПКИ (НЕ ТРОГАЕМ) ========== */
.whatsapp-btn,
.telegram-btn,
.kwork-btn,
.Pinterest-btn {
  position: relative;
  display: block;
  width: 532px;
  height: 108px;
  text-decoration: none;
  
}

/* ========== ОБЕРТКИ (НЕ ТРОГАЕМ) ========== */
.whatsapp-wrapper,
.telegram-wrapper,
.kwork-wrapper,
.pinterest-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

/* ========== КОЛОНКА ЛОГО (ИСПРАВЛЕНИЕ) ========== */
.whatsapp-logo,
.telegram-logo,
.kwork-logo,
.pinterest-wrap {
  position: absolute;
  left: -160px;              /* как у тебя было */
  top: 50%;
  transform: translateY(-50%);
  width: 150px;             /* ВАЖНО: одинаковая ширина */
  display: flex;
  align-items: center;
  justify-content: center;  /* центр внутри */
  z-index: 2;
}

/* ====== Эллипсы ====== */
.whatsapp-logo .ellipse-14 {
  width: 89px;
  height: 88px;
  background-color: #00ff2f;
  border-radius: 50%;
  filter: blur(9.37px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.telegram-logo .ellipse-15s {
  width: 89px;
  height: 88px;
  background-color: #07AEFF;
  border-radius: 50%;
  filter: blur(9.37px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kwork-logo .ellipse-16s {
  width: 92px;
  height: 92px;
  background-color: rgb(7, 7, 7);
  border-radius: 50%;
  filter: blur(17px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pinterest-wrap .ellipse-15 {
  width: 83px;
  height: 82px;
  background-color: #fd0a12;
  border-radius: 50%;
  filter: blur(9.37px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ====== ЛОГО ====== */
.whatsapp-logo .element-7 {
  width: 125px;
  height: 125px;
  object-fit: cover;
  z-index: 3;
}

.telegram-logo .element-20 {
  width: 85px;
  height: 85px;
  object-fit: cover;
  z-index: 3;
}

.kwork-logo .element-20s {
  width: 115px;
  height: 115px;
  object-fit: cover;
  z-index: 3;
}

.pinterest-wrap .pinterest-joomla {
  width: 132px;
  height: 74px;
  object-fit: cover;
  z-index: 3;
}

/* ====== ГРАДИЕНТЫ КНОПОК ====== */
.rectangle-18,
.rectangle-19,
.rectangle-20,
.rectangle-21 {
  position: absolute;
  inset: 0;
  background-color: #ff4a92fa;
  border-radius: 7.92px;
  box-shadow: inset 4.75px 4.75px 18.14px #cd3974;
  filter: blur(8.32px);
  mix-blend-mode: screen;
}

.rectangle-22,
.rectangle-23,
.rectangle-24,
.rectangle-25 {
  position: absolute;
  inset: 5px;
  border-radius: 8.32px;
  background: linear-gradient(
    90deg,
    #fe4696 25%,
    #ff85d2 50%,
    #fe4092 95%
  );
}

/* ====== ТЕКСТ ====== */
.WHATSAPP,
.TELEGRAM,
.Kwork,
.Pinterest {
  position: relative;
  text-align: center;
  line-height: 108px;
  font-family: "Aleo-Regular", Helvetica;
  font-size: 38.7px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(30, 30, 30, 0.35);
}

/* ====== ВОЗВРАЩАЕМ ОРИГИНАЛЬНЫЙ HOVER КНОПОК ====== */
.whatsapp-btn,
.telegram-btn,
.kwork-btn,
.Pinterest-btn {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.whatsapp-btn:hover,
.telegram-btn:hover,
.kwork-btn:hover,
.Pinterest-btn:hover {
  transform: translateY(-3px);
}

/* подсветка градиента как раньше */
.whatsapp-btn:hover .rectangle-22,
.telegram-btn:hover .rectangle-23,
.kwork-btn:hover .rectangle-24,
.Pinterest-btn:hover .rectangle-25 {
  filter: brightness(1.1);
}




.desktop .ellipse-16 {
  position: absolute;
  top: 300px;
  left: -190px;
  width: 360px;
  height: 450px;
  background-color: #ff0059e7;
  border-radius: 308.33px/315.61px;
  transform: rotate(-113.12deg);
  filter: blur(140px);
  mix-blend-mode: plus-lighter;
  z-index: 2;
}



.desktop-text-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* центрирует inline-block */
  gap: 30px;
 
    margin-top: 360px; /* ← просто и безопасно */
}
.headline {
  margin: 0;
 
  text-align: center;

  font-family: "Aleo-Bold", Helvetica;
  font-weight: 700;
  font-size: 55px;
  line-height: 1.1;

  background: linear-gradient(
    90deg,
    #666666 -40%,
    #ffffff 20%,
    #ffffff 50%,
    #ffffff 0%,
    #858585 140%
  );

  background-position: center;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
/* Подзаголовок */
.subtitle {
  margin: 0;
  text-align: center;

  display: inline-block;   /* ВАЖНО: ширина = ширина текста */

  font-family: "tilda-script-non-connect-light", Helvetica;
  font-weight: 400;
  font-size: 57px;
  line-height: 1.3;

  background: linear-gradient(
    90deg,
    #ff3284 0%,
    #ff9abf 35%,
    #ff9abf 50%,
    #ff9abf 50%,
    #ff3485 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}




.cards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;         /* расстояние между рядами и кнопкой */
  margin-top: 150px;  /* отступ от блока Портфолио */
  position: relative; /* чтобы линия внутри была относительно контейнера */
}

.cards-row {
  display: flex;
  gap: 50px;          /* расстояние между карточками */
  justify-content: center;
  
}

.card {
  position: relative;      /* для блюра */
  width: 395px;
  height: 518px;
  border-radius: 12px;
  overflow: visible;       /* чтобы блюр был виден */
}

.card-bg {
  position: absolute;
  inset: 1px;             /* чуть больше, чтобы блюр выглядывал */
  background-color: rgba(255,255,255,0.85);
  filter: blur(12px);
  border-radius: 12px;
  z-index: 0;
}

.card img {
  position: relative;
  width: 100%;
  height: 100%;
  
  z-index: 1;
  border-radius: 12px;
  border: 1.5px solid #FFFF;
}

.show-more-btn {
  position: relative;     /* обязательно */
  width: 502px;
  height: 86px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  z-index: 2;
}

.desktop .rectangle-5 {
  top: 0;
  left: 0;
  width: 500px;
  height: 86px;
  background-color: #ff4a92fa;
  border-radius: 9.52px;
  filter: blur(10px);
  mix-blend-mode: screen;
  position: absolute;
  box-shadow: inset 5.71px 5.71px 21.8px #cd3974;
}

.desktop .rectangle-6 {
  top: 2px;
  left: 3px;
  width: 493px;
  height: 82px;
  border-radius: 10px;
  position: absolute;
 
    background: linear-gradient(
    90deg,
    #fe4696 20%,
    #fc87cb 50%,
    #fe4092 90%
  );
}

.desktop .text-wrapper-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
  font-family: "Montserrat",  Helvetica;
  transform: translate(-50%, -54%);
  font-weight: 500;
  color: #fff8f8;
  font-size: 30px;
  
  white-space: nowrap;
}

.show-more-btn {
  position: relative;
  cursor: pointer;
  transition: 0.3s ease;
}

.show-more-btn:hover {
  transform: translateY(-3px);
}

/* подсветка как у остальных */
.show-more-btn:hover .rectangle-6 {
  filter: brightness(1.1);
}

@media (max-width: 768px) {
  .cards-wrapper .card:nth-child(6) {
    display: none;
  }
}
/* скрываем третий ряд до клика */
.hidden-cards {
  display: none;
  
}

.content-height-fix {
  height: 1px;
  margin-top: 6000px; /* подбери по реальной длине */
}

.header {
 position: relative;        /* база для вложенных абсолютных элементов */
  width: 100%;
  height: 120px;             /* можно под твою высоту */
  display: flex;
  align-items: flex-start;   /* прижимаем элементы к верху */
  justify-content: flex-start; /* все слева */
  padding: 20px 50px;        /* отступ сверху и слева/справа */
  box-sizing: border-box;   
 
}



.about-section {
  position: absolute; /* фиксируем поверх фона */
    margin-top: 350px;
  left: 50%;
   transform: translateX(-50%) ; /* начальный размер */
  z-index: 10;        /* чтобы текст был поверх фона */
}


.about-wrapper {
  position: relative;
  width: 100%;
  padding: 180px 80px;
  box-sizing: border-box;
  height: 1056px;
  overflow: hidden;
  z-index: 1;
}

.about-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;

background-image:
  radial-gradient(rgb(255, 255, 255) 25px, transparent 20px);

  background-size: 
   
    20px 20px;

  background-position:
    2px 5px,
    2px 5px,
    2.2px 5px;

  opacity: 0.25;
  pointer-events: none;
  z-index: -1;

}

.container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}


.logo-wrapper {
  position: relative;        /* относительно хедера */
  display: flex;
  align-items: center;       /* вертикальное выравнивание лого и эллипса */
  justify-content: flex-start;
  z-index: 10;
  left: -1%;                   /* прижать к левому краю */
  top: 40;  
  
       
}

.header .container {
  display: flex;
  align-items: flex-start;    /* прижать к верху */
  justify-content: flex-start; /* слева */
  gap: 40px;                  /* расстояние до меню */
  width: 100%;
  position: relative;
}



.gradient-text {
  position: absolute;           /* снимаем с потока */
   top: -140px;                     /* отступ от верхнего края блока */
 margin-left: 620px;
  transform: translateX(-50%);
   font-family: "tilda-script-non-connect-light", Helvetica;
  font-weight: 300;
  font-size: 43px;
  text-align: center;
  letter-spacing: 4.18px;
  line-height: 1.3;       /* увеличиваем высоту строки */
 padding-left: 0.5vw;
  padding-right: 0.5vw;

  background: linear-gradient(
    90deg,
    #fe3a88 0%,
    #ff91b9 45%,
    #ff9abf 50%,
    #ff93ba 50%,
    #fe3a88 95%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  z-index: 5;                  /* поверх фона, но под другими элементами, если нужно */
}

.text-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  z-index: 20;
}

.bullet-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 7px;
  z-index: 200 !important;
}


.about-list p {
  margin: 0;
  font-family: "Aleo-Regular", Helvetica;
 
  line-height: 1.3;
  color: #ffffff;
  text-align: left;
  text-shadow: 4px 4px 5px rgba(0,0,0,0.4);
}

.about-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
    transform: translateY(-50px); /* поднимаем блок текста вверх на 30px */
  max-width: 830px;
  margin-left:480px;    /* 👈 уводим вправо */
}

#about {
  margin-top: 560px; /* 👈 сдвигает ВСЮ секцию вниз */
}





.about-badge {
  position: absolute;
  top: 0px;
  left: 35px;
  width: fit-content;
}

.about-badge .image-2 {
  display: block;
  position: relative;
  width: 140px;
  z-index: 2;
}

.about-badge .rectangle-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 77px;
  height: 74px;
  background-color: #033f8c;
  border-radius: 15px;
  transform: translate(-50%, -50%) rotate(-12.21deg);
  filter: blur(24.2px);
  z-index: 1;
}

.logo-ellipse {
  position: absolute;
  top: 450px;   /* подбираешь */
  left: 1170px;   /* подбираешь */
}

.logo-ellipse .ellipse-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  

}

.logo-ellipse .image {
  position: relative;
  z-index: 2;
  width: 170px;
}

.about-wrapper .container {
  padding-left: 70px; /* сдвиг текста вправо */
  padding-right: 0px; /* чтобы блок не прилипал к правому краю */
  box-sizing: border-box; /* чтобы padding учитывался в ширине */
   padding-top: -20px; /* уменьшаем верхний отступ контейнера */
}

.about-images-wrapper {
  position: absolute;
  left: 595px; /* такое же правило как у текста */
  top: 545px;     /* регулируешь высоту */
  width: 467px;
}

.about-images-wrapper .rectangle-8 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;     /* вместо 464px */
 height: 100%;
  background-color: #ffffff;
  filter: blur(15px);
  z-index: 2;
}

.about-images-wrapper .image-4 {
  position: relative;      /* поверх rectangle */
  z-index: 7;
  width: 100%;             /* совпадает с wrapper */
  display: block;
}



.desktop .abstract-pink-line {
  position: absolute;
  top: -600px; /* положение на странице */
  left: 50%;
  width: 100%;
  height: 2200px;
  mix-blend-mode: color-dodge;
  aspect-ratio: 1.43;
  object-fit: cover;
  transform: translateX(-50%);
  z-index: 0; /* под карточками */
}

.price-header {
  position: relative;
  text-align: center;
  margin-top: 360px;
}

.price-header .ellipse-8 {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);

  width: 290px;
  height: 54px;
  background-color: #fe1962;
  border-radius: 130.5px / 31.5px;
  filter: blur(44.15px);
  mix-blend-mode: plus-lighter;
}

.price-title {
  position: relative;
  z-index: 2;

  display: inline-block;   /* 🔥 ВАЖНО */
  width: fit-content;      /* 🔥 ВАЖНО */

  font-family: "Aleo", Helvetica;
  font-weight: 700;
  font-size: 55px;
  text-align: center;
  line-height: normal;

  background: linear-gradient(
    90deg,
    #aaaaaa -10%,
    #ffffff 30%,
    #ffffff 50%,
    #ffffff 80%,
    #a7a7a7 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.price-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;

  width: 100%;      /* ← теперь это ширина текста */
  height: 1.7px;

  background-color: #ffffff;
  filter: blur(1.2px);
}

html {
  scroll-behavior: smooth;
}

.header {
  position: relative;
  z-index: 1000;
}


.desktop .group-5 {
  position: relative;
  display: flex;
  gap: clamp(14px, 3vw, 25px);
  width: auto;
  z-index: 10;
  margin-top: clamp(20px, 5vw, 60px);

}


.header .group-5 {
  margin-left: auto;
  margin-right: clamp(16px, 4vw, 60px);
}

.desktop .group-6 {
  display: flex;
  position: relative;
  gap: clamp(14px, 3vw, 35px);
}


.desktop .group-6 div,
.desktop .group-6 a {
  font-family: "Aleo-SemiBold", Helvetica;
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 28.7px);
  color: #ffffff;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  overflow: visible;
   min-height: 900px;
  
}

.text-mobile {
  display: none;
}
/* кнопка */
.group-8 {
  position: static;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.ellipse-5 {
  position: absolute;
  bottom: 10%;        /* немного ниже фото, можно подкорректировать */
  left: 58%;           /* центр по горизонтали */
  transform: translateX(-50%);

  width: 430px; /* минимальная 200px, средняя 30vw, максимальная 400px */
  aspect-ratio: 450 / 590;          /* сохраняем пропорции */

  background: #ffffff;
  filter: blur(75px);
  opacity: 0.75;
  z-index: 1;
}

.hero .container {
  display: flex;
  align-items: flex-start;
}


.desktop{
  min-width: 319px;
}


@media (max-width: 1650px) and (min-width: 768px) {
  .hero-content .text-wrapper-2 {
    font-size: clamp(32px, 4.35vw, 50px);
  }
  .hero-content .name {
    font-size: clamp(24px, 3.35vw, 40px);
  }
  .hero-content .subtext {
    font-size: clamp(18px, 2.2vw, 30px);
  }
}
  
@media (max-width: 1500px) and (min-width: 769px) {
  .ellipse-5 {
  width: clamp(420px, 28vw, 430px); /* минимальная 200px, средняя 30vw, максимальная 400px */
  aspect-ratio: 370 / 490;          /* сохраняем пропорции */
}
  .desktop .photo-block {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
     margin-right: clamp(-65px, 1.7vw, 40px);
    width: clamp(320px, 40vw, 500px);
  }
}




/* Адаптив: на мобильных фото под текстом */
@media (max-width: 768px) {
   .hero-inner {
    flex-direction: column;
    align-items: center;
  }

  .hero-content {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 18vh; /* сдвигаем только текст вниз */
     width: 100%;
    align-items: center;
   text-align: center;
   margin-top:170px;
  }
 .hero-content  * {
     text-align: center;
  }
    .desktop .name {
    margin-left: 0 !important;   /* убираем смещение вправо */
    margin-right: 0 !important;
    text-align: center !important; /* центрируем текст внутри блока */
    left: auto !important;         /* сбрасываем position, если есть */
    right: auto !important;
    position: static !important;   /* возвращаем в поток, чтобы не смещался */
    display: block;                /* для надёжного центрирования */
     margin-top: clamp(4px, 3vw, 11px);
      font-size: clamp(25px, 5vw, 40px);
  }
    .desktop .name {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content .text-wrapper-2 {
     font-size: clamp(25px, 6.8vw, 56px);
    white-space: nowrap;
}
  
   .hero-content .subtext{
     font-weight: 400;
    max-width: 40ch;
    font-size: clamp(16px, 3.65vw, 32px);
   }

   
}

@media (max-width: 768px) and (min-width: 767px) {
  .photo-block{
    margin-top: -140px !important;
  }
  .ellipse-5 {
  width: 630px; /* минимальная 200px, средняя 30vw, максимальная 400px */
   
}
}



@media (max-width: 768px) {
  .group-8 {
    transform: none;
    left: auto;
    right: auto;
  }
  
   .photo-wrap {
    width: 120%;
    max-width: 120%;
    margin: 0 auto;
    display: block;
  }

  .photo-block {
    
     margin-top: clamp(-130px, -10vw, -180px);
  
    width: clamp(350px, 76vw, 420px);
    max-width: 100%;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
   
  }
.photo-block .text-wrapper-8{
 font-size: 26px !important;
  text-align: center;
    display: flex;
  align-items: center;
  justify-content: center;
   transform: translate(-50%, -53%);
    text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
  }
.desktop .white-paint {
   width: 120%; /* подстраиваем под маленький экран */
    height: clamp(780px, 60%, 1100px); /* подстраиваем под маленький экран */
    margin-top: 50px;
    
}
.desktop .rectangle-2 {
top:1110px;
z-index: 1;
}
.desktop .rectangle {
  height: clamp(1100px, 100vw, 1400px);
}
.desktop .div {
  margin-top: 20px;
}
.ellipse-5 {
  width: clamp(230px, 36vw, 600px); /* минимальная 200px, средняя 30vw, максимальная 400px */
   aspect-ratio: 220 / 350;          /* сохраняем пропорции */
}
}

@media (max-width: 700px) and (min-width: 429px){
  .desktop .rectangle-2 {
top: calc(1350px - max(0px, (1030px - 100vw)) * 0.78);
z-index: 1;
}
}

@media (max-width: 545px) and (min-width: 429px){
.photo-block .text-wrapper-8{
 font-size:  clamp( 18px, 4.6vw, 60px) !important;
  text-align: center;
   display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -54%);
   text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
  }

  .photo-block{
    left: 49%;
  }
}

@media (max-width: 429px) {
.photo-block .text-wrapper-8{
 font-size:  clamp( 15px, 5vw, 50px) !important;
  text-align: center;
   display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -54%);
   text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
  }
}


@media (max-width: 768px) and (min-width: 767px){
.desktop .rectangle-2 {
top: calc(1370px - max(0px, (1156px - 100vw)) * 0.71) !important;
z-index: 1;
}
}


@media (max-width: 429px) {
.desktop .name {
    margin-left: 0 !important;   /* убираем смещение вправо */
    margin-right: 0 !important;
    text-align: center !important; /* центрируем текст внутри блока */
    left: auto !important;         /* сбрасываем position, если есть */
    right: auto !important;
    position: static !important;   /* возвращаем в поток, чтобы не смещался */
    display: block;                /* для надёжного центрирования */
    margin-top: clamp(6px, 3vw, 3.5px);
      font-size: clamp(18px, 7.3vw, 39px);
      white-space: nowrap;
  }
    .desktop .name {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content .text-wrapper-2 {
    text-align: center;
     font-size: clamp(24px, 10vw, 70px);
     display: inline-block;  /* чтобы перенос работал */
     white-space: normal;
}
  
   .hero-content{
    margin-top: 140px;
   }
    .subtext {
    display: none;
  }

  .text-mobile {
     margin-top: clamp(2px, 4vw, 4px);
     font-weight: 400;
    font-size: clamp(15px, 4vw, 26px);
    display: block;
    max-width: 100%;
  }

    .photo-wrap {
    width: 100%;
    max-width: 108%;
    margin: 0 auto;
    display: block;
  }

     .desktop .photo-block {
  
    width: clamp(460px, 80vw, 800px);

   min-width: 220px;
   max-width: 108%;
    position: relative;
    left: 48%;
    transform: translateX(-50%);
  }
.ellipse-5 {
  width: clamp(100px, 38vw, 240px); /* минимальная 200px, средняя 30vw, максимальная 400px */
   aspect-ratio: 100 / 240;          /* сохраняем пропорции */
}

.desktop .rectangle-2 {
top: calc(1860px - max(0px, (1080px - 100vw)) * 1.5);
z-index: 1;
}

.desktop .rectangle {
  height: clamp(850px, 89vw, 1500px);
}

.desktop .white-paint {
  height: clamp(800px, 125vw, 1300px);
}
}

@media (max-width: 320px) {
.desktop .rectangle-2 {
top: 700px;
z-index: 1;
width: 150%;
}
}



@media (max-width: 429px) and (min-width: 400px){
  
     .desktop .photo-block {
    margin-top: clamp(-140px, -13vw, -300px);
  }
}

@media (max-width: 400px) {
  
     .desktop .photo-block {
    margin-top: clamp(-120px, -20vw, -180px);
  }
}

@media (max-width: 350px) {
  
     .desktop .photo-block {
    margin-top: clamp(-90px, -20vw, -220px);
  }
}

@media (max-width: 270px) {
  
     .desktop .photo-block {
    margin-top: clamp(-80px, -20vw, -100px);
  }
}

/* ==================== */
/* Меню для маленьких экранов */
@media (max-width: 946px) {
  /* Скрываем меню по умолчанию */
  #menu {
  position: absolute;
  top: 100%;       /* 🔥 ровно под header */
  left: 10%;
  width: 100%;

  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;

  transform: translateY(-30px); /* 🔼 поднимаем на 10px */
  padding: 20px 0;
  z-index: 1000;
}

  #menu.active {
    display: flex;
  }

  /* Бургер виден только на мобильных */
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
    position: absolute;
    top: 50%;
    right: 20px; /* отступ от правого края */
  }

  .burger span {
    display: block;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .burger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

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

  .burger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Линия под текстом */
  .group-6 {
    display: inline-block; /* ширина линии = ширина текста */
  }
}

/* Меню для маленьких экранов */
@media (max-width: 747px) {
  /* Скрываем меню по умолчанию */
  #menu {
  position: absolute;
  top: 100%;       /* 🔥 ровно под header */
  left: -3%;
  width: 100%;

  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;

  transform: translateY(-30px); /* 🔼 поднимаем на 10px */
  padding: 20px 0;
  z-index: 1000;
  z-index: 999;
}
 /* Бургер виден только на мобильных */
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
    position: absolute;
    top: 10px;
    right: -35px; /* отступ от правого края */
    z-index: 9999;
  }
}



@media (max-width: 429px) {
  .desktop .group-6 div,
  .desktop .group-6 a {
    font-size: clamp(10px, 3.2vw, 20px); /* новый clamp для очень маленьких экранов */
    
  }

  .desktop .group-6 {
     margin-left: -5vw;   /* сдвигаем контейнер влево */
    gap: 8px; /* чтобы элементы не слипались */
  }
  
    .desktop .group-6::after {
    bottom: -4px; /* линия выше */
    box-shadow: 0 0 0.5px 0.3px #ffffff;
    filter: blur(0.1px);
     opacity: 0.7;                  /* мягкость */
  }
   
  .burger {
    width: 3px;   /* было 25px */
    height: 3px;  /* делаем квадрат */
  }
}

/* Меню для маленьких экранов */
@media (max-width: 747px) {
  /* Скрываем меню по умолчанию */
  #menu {
  position: absolute;
  top: 100%;       /* 🔥 ровно под header */
  left: -3%;
  width: 100%;

  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;

  transform: translateY(-30px); /* 🔼 поднимаем на 10px */
  padding: 20px 0;
  z-index: 1000;
}
 /* Бургер виден только на мобильных */
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
    position: absolute;
    top: 10px;
    right: -35px; /* отступ от правого края */
  }
  .group-6::after {
    bottom: -6px;       /* отступ линии от текста */
   
}
}

/* ==================== */
/* На больших экранах бургер скрыт */
@media (min-width: 946px) {
  .burger {
    display: none;
  }
}



@media (max-width: 1200px) and (min-width: 768px){
  .ellipse-5 {
  width: clamp(240px, 30vw, 630px); /* минимальная 200px, средняя 30vw, максимальная 400px */
   aspect-ratio: 310 / 470;          /* сохраняем пропорции */
}
.hero-content{
   margin-top: clamp(140px, 19.5vw, 230px);
margin-left: clamp(-100px, 1.2vw, 30px);
  }
  .photo-block .text-wrapper-8{
   font-size: clamp(20px, 2.4vw, 32px);
    display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
   transform: translate(-50%, -54%);
    text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
  }

  .subtext{
    font-weight: 400;
  }
}


@media (max-width: 1300px) and (min-width: 768px){
  .photo-block {
    margin-top: -35px;
  }
  
}

@media (max-width: 1100px) and (min-width: 768px){
  .photo-block {
    margin-top: -10px;
  }
}

@media (max-width: 900px) and (min-width: 768px){
  .photo-block {
    margin-top: 5px;
  }
}

@media (max-width: 1385px) and (min-width: 768px){
  .hero-content .name {
  margin-left: 1px;
  }
}

@media (max-width: 1096px) and (min-width: 768px){
.desktop .rectangle-2 {
top: calc(770px - max(0px, (1096px - 100vw)) * 0.67);
}
}


@media (max-width: 1230px) and (min-width: 768px){
  .about-section{
     margin-top: calc(350px - (1230px - 100vw) * 0.73);
  }

 .desktop .p {
  font-size: clamp(45px, 5.3vw, 55px);
  }
  .desktop .ellipse-6 {
   width: clamp(300px, 30vw, 381px);   /* минимум 250px, максимум 381px */
  height: clamp(0px, 6vw, 61px);     /* минимум 50px, максимум 61px */
  filter: blur(clamp(37px, 3.6vw, 55px));
}
}


@media (max-width: 768px){
  .about-section{
    margin-top: 350px;
  }

 .desktop .p {
  font-size: 52px;
  }
    .desktop .ellipse-6 {
   width: clamp(340px, 25vw, 341px);   /* минимум 250px, максимум 381px */
  height: clamp(50px, 6.5vw, 61px);     /* минимум 50px, максимум 61px */
   filter: blur(clamp(37px, 1.8vw, 55px));
}
 
}

@media (max-width: 555px) and (min-width: 429px){

   .about-section{
      margin-top: calc(330px - (540px - 100vw) * 0.5);
  }

 .desktop .p {
  font-size: clamp(34px,9.3vw, 56px);
  }
   .desktop .ellipse-6 {
   width: clamp(250px, 58vw, 480px);   /* минимум 250px, максимум 381px */
  height: clamp(30px, 9vw, 80px);     /* минимум 50px, максимум 61px */
  filter: blur(clamp(31px, 6.5vw, 59px));
}
}


@media (max-width: 429px)  and (min-width: 360px){

   .about-section{
      margin-top: calc(350px - (540px - 100vw) * 0.5);
  }

 .desktop .p {
  font-size: clamp(27px, 9.9vw, 55px);
  }
   .desktop .ellipse-6 {
   width: clamp(230px, 42vw, 391px);   /* минимум 250px, максимум 381px */
  height: clamp(37px, 9.3vw, 61px);     /* минимум 50px, максимум 61px */
  filter: blur(clamp(28px, 2vw, 45px));
}
}

@media (max-width: 360px) {
    .about-section{
      margin-top: calc(330px - (560px - 100vw) * 0.5);
  }

  .desktop .p {
  font-size: clamp(27px, 9.9vw, 55px);
  }
   .desktop .ellipse-6 {
   width: clamp(205px, 40vw, 451px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(19px, 9vw, 57px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(21px, 7.5vw, 30px)) !important;
}
}

@media (max-width: 320px) {
   .about-section{
     margin-top: calc(300px - (510px - 100vw) * 0.7);
  }
  .desktop .p {
  font-size: clamp(26px, 9.9vw, 55px);
  }
   .desktop .ellipse-6 {
   width: clamp(190px, 40vw, 451px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(21px, 9vw, 57px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(22px, 7vw, 30px)) !important;
}
}



@media (max-width: 768px){
.about-wrapper .image-3 {
 display: none;
}
}

@media (max-width: 1460px) and (min-width: 768px)  {
  .desktop .text-wrapper-11,
  .desktop .text-wrapper-12,
  .desktop .text-wrapper-13,
  .desktop .text-wrapper-14 {
   font-size: clamp(18px, 2vw, 29px);
   font-weight: 400;
      max-width: clamp(600px, 60vw, 900px); /* минимальная ширина больше, текст реже переносится */
  }
  .gradient-text {
     font-size: clamp(31px, 3vw, 43px);
     margin-left: calc(305px + (620 - 300) * ((100vw - 768px) / (1500 - 768)));
     top: calc(-140px - ((1460px - 100vw) / 692 * 18));
  }
  .about-list {
  margin-left: calc(200px + (470 - 200) * ((100vw - 768px) / (1460 - 768)));
   transform: translateY(calc(-50px - ((1460px - 100vw) / 692 * 50)));
   
    width: clamp(380px, 65%, 800px); /* минимальная ширина 300px, адаптивно 70%, максимум 800px */
    white-space: normal; /* естественный перенос */
}

.about-images-wrapper {
  width: clamp(320px, 35vw, 467px); 
   left: clamp(260px, 40vw, 595px);
   
}


.bullet-icon{
  margin-top: clamp(4px, calc(5px - 1vw), 7px);
   width: clamp(17px, 2.3vw, 26px);   /* минимум 26px, максимум 40px, середина пропорциональна ширине экрана */
  height: clamp(17px, 2.3vw, 26px);  /* пропорции сохраняем */
}
.logo-ellipse{
  left: 1100px;
}
}

@media (max-width: 1460px) {
.about-wrapper .image-3 {

 left: max(calc(-19px - ((1460px - 100vw) * 0.12)), -600px);
  
}
.about-badge {
 top: clamp(-60px, calc(0px - (1500px - 100vw) * 0.2), 0px);
left: clamp(-500px, 0.1vw, 35px);
}

.logo-ellipse{
   
    top: clamp(220px, 50vw, 450px);
    
}
}


@media (max-width: 1230px) and (min-width:768px){
  #about {
margin-top: clamp(120px, calc(560px - (1230px - 100vw) * 0.8), 560px);
}
}

@media (max-width: 1369px) and (min-width:768px){
.about-wrapper {
  height: clamp(825px, calc(1056px - (1377px - 100vw) * 0.72), 1056px);
  position: relative;
}

.about-images-wrapper {
  position: absolute;
  /* синхронно с высотой фона */
    top: calc(545px - (1056px - clamp(825px, calc(1056px - (1377px - 100vw) * 0.72), 1056px)) * 0.75);
}

.about-badge .image-2 {
    width: clamp(90px, 10vw, 140px);
}
.about-badge .rectangle-9 {
   width: clamp(63px, 5vw, 77px);
  height: clamp(58px, 5vw, 74px);
}

.logo-ellipse .image {
width: clamp(90px, 12vw, 170px);
}
}

@media (max-width: 1370px)  and (min-width:768px){
  .logo-ellipse{
    left: clamp(650px, 77vw, 1050px);
    top: clamp(260px, 35vw, 450px);
}

.logo-ellipse{
    top: clamp(230px, 27vw, 450px);
}
}

@media (max-width: 896px) and (min-width:768px){
.logo-ellipse{
left: 635px;
top: 250px;
}
}

@media (max-width: 833px) and (min-width:768px){
.logo-ellipse{
left:clamp( 590px,50vw,635px);
top: 260px;
}
}

@media (max-width: 1209px) and (min-width:1160px){
.about-images-wrapper {
  position: absolute;
  /* синхронно с высотой фона */
top: clamp(390px, 37.6vw, 520px);
}
}

@media (max-width: 1160px) and (min-width:1045px){
.about-images-wrapper {
  position: absolute;
  /* синхронно с высотой фона */
top: clamp(-100px, 37.1vw, 980px);
}
}

@media (max-width: 1045px) and (min-width:1006px){
.about-images-wrapper {
  position: absolute;
  /* синхронно с высотой фона */
top: clamp(390px, calc(390px + 0.5vw), 395px);     /* фиксированная позиция */

}
}

@media (max-width: 1006px) and (min-width:984px){
.about-images-wrapper {
  position: absolute;
  /* синхронно с высотой фона */
top: clamp(400px, 38vw, 780px);

}
}

@media (max-width: 984px) and (min-width:768px){
.about-images-wrapper {
  position: absolute;
  /* синхронно с высотой фона */
top: clamp(395px, calc(395px + 1vw), 440px);

}
}

@media (max-width: 967px) and (min-width:768px){
.about-images-wrapper {
  position: absolute;
  /* синхронно с высотой фона */
top: clamp(410px, calc(410px + 1vw), 500px);

}
}




@media (max-width: 768px)  {
  .about-wrapper .ellipse-12 {
  position: absolute;
  bottom: -320px;
  left: -200px;
  width: clamp(450px, 30vw, 557px);
  height: clamp(460px, 31vw, 551px);
  filter: blur(clamp(190px, 10vw, 250px));
  background-color: #ff0f5b;
  border-radius: 308px / 315px;
  transform: rotate(-113deg);
  mix-blend-mode: plus-lighter;
  z-index: 0;
 
}

  .about-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;       /* текст занимает всю ширину родителя */
    margin-left: 0;    /* убираем сдвиг */
    transform: none;   /* убираем translate */
    position: relative;
     top: clamp(-120px, 50vw, -70px);
     margin-left: clamp(-80px, -30px, -15px);
    box-sizing: border-box;
    
  }

   .about-wrapper {
    display: block;         /* обычный поток */
    padding-left: 0px;      /* максимально прижимаем к левому краю */
    padding-right: 5px;    /* небольшой отступ справа */
    box-sizing: border-box;
    height: 1000px;
  }

  .text-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .desktop .text-wrapper-11,
  .desktop .text-wrapper-12,
  .desktop .text-wrapper-13,
  .desktop .text-wrapper-14 {
    font-size: clamp(22px, 3.6vw, 27px);
    font-weight: 400;
    width: 100% !important;
  }

 .gradient-text {
    display: inline-block;           /* текстовый блок под ширину текста */
    text-align: center;              /* центрируем текст внутри блока (для многострочного) */
    font-size: clamp(38px, 6vw, 43px);
    margin:0;               /* центрируем блок по горизонтали */

    background: linear-gradient(
        90deg,
        #fe3a88 0%,
        #ff91b9 45%,
        #ff9abf 50%,
        #ff93ba 50%,
        #fe3a88 95%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
     transform: translateX(clamp(-30px, -7.5vw, 0px));
      margin-top: clamp(-30px, -2.2vw, -2px);
}
.text-wrapper {
    display: flex;
    justify-content: center;
}

.bullet-icon{
  margin-top: clamp(4px, calc(5px - 1vw), 7px);
   width: clamp(15px, 3vw, 26px);   /* минимум 26px, максимум 40px, середина пропорциональна ширине экрана */
  height: clamp(15px, 3vw, 26px);  /* пропорции сохраняем */
}
}




@media (max-width: 768px) {
.about-badge .image-2 {
    width: clamp(95px, 16vw, 190px) ;
}
.about-badge .rectangle-9 {
   width: clamp(63px, 5vw, 77px);
  height: clamp(58px, 5vw, 74px);
   filter: blur(clamp(21px, 2vw, 25px));
  
}

.about-badge {
top: clamp(390px, calc(700px - (1377px - 100vw) * 0.4), 700px);
left: 1%;
}
.about-images-wrapper {
  
   width: clamp(380px, 60vw, 450px) !important; 
     left: 50%;
    transform: translateX(-50%);
    display: flex;           /* если внутри картинки, чтобы центрировать */
    justify-content: center;
  margin-top: calc(25px - ((1100px - 100vw) * 0.20));
}


.logo-ellipse .image {
width: clamp(105px, 17vw, 240px);
}
  .logo-ellipse{
  left: clamp(400px, 80vw, 900px);
 top: clamp(330px, calc(630px - (1377px - 100vw) * 0.4), 630px);
}
.about-wrapper {
 height: clamp(912px, calc(1342px - (1377px - 100vw) * 0.56), 1320px);
  position: relative;
}
}


@media (max-width: 555px) {
    .desktop .text-wrapper-11,
  .desktop .text-wrapper-12,
  .desktop .text-wrapper-13,
  .desktop .text-wrapper-14 {
    font-size: clamp(15px, 4.3vw, 38px);
    font-weight: 400;
    width: 100% !important;
  }

    .about-list {
     top: clamp(-950px, -17vw, -50px);
     margin-left: clamp(-100px, -35px, -10px);
  }
  .gradient-text {
    font-size: clamp(27px, 7vw, 48px);
     transform: translateX(clamp(-30px, -7.5vw, 0px));
      margin-top: clamp(-80px, -4vw, -2px);
}
  #about {
       margin-top: calc(-20px - (-450px - 100vw) * 0.5); 
}
.about-images-wrapper {
  
   width: clamp(330px, 68.2vw, 556px) !important; 
     left: 50%;
    transform: translateX(-50%);
    display: flex;           /* если внутри картинки, чтобы центрировать */
    justify-content: center;
   margin-top: -45px;
}
.about-wrapper {
 height: clamp(914px, calc(1385px - (1377px - 100vw) * 0.53), 1340px);
  position: relative;
}

.logo-ellipse .image {
width: clamp(90px, 18.3vw, 300px);
}
  .logo-ellipse{
  left: clamp(320px, 80vw, 980px);
 top: clamp(375px, 67vw, 490px) !important;
}

.about-badge .image-2 {
    width: clamp(40px, 17.3vw, 125px);
}
.about-badge .rectangle-9 {
   width: clamp(52px, 8vw, 77px);
  height: clamp(57px, 8vw, 74px);
   filter: blur(clamp(21px, 2vw, 25px));
}
.about-badge {
top: clamp(390px, 100vw, 420px) ;
left: 1%;
}
}

@media (max-width: 494px) {
   .about-badge {
top: clamp(300px, 88vw, 430px);
}
  .logo-ellipse{
top: clamp(350px, 77vw, 400px)!important ;
}
}

@media (max-width: 528px) {
    .about-list {
     top:clamp(-490px, -14vw, -90px) ;
  }
}

@media (max-width: 450px) {
    .about-list {
     top:clamp(-500px, -14vw, -100px) ;
  }
      .about-images-wrapper {
   width: clamp(250px, 75vw, 550px) !important; 
}
.about-wrapper {
height: clamp(753px, calc(1573px - (1310px - 140vw) * 1), 1600px) !important;
  position: relative;
}

.logo-ellipse .image {
width: clamp(80px, 21vw, 340px);
}
  .logo-ellipse{
  left: 80%;
 top: clamp(272px, 76vw, 340px)!important;
}

.about-badge .image-2 {
    width: clamp(70px, 18.8vw, 175px);
}
.about-badge .rectangle-9 {
   width: clamp(44px, 12vw, 78px);
  height: clamp(48px, 12vw, 76px);
  filter: blur(clamp(16px, 2vw, 24px));
}
.about-badge {
top: clamp(320px, 87vw, 390px) ;
left: 1%;
}
}

@media (max-width: 768px) and (min-width:768px) {
  #about{
  margin-top: 560px; /* 👈 сдвигает ВСЮ секцию вниз */
}
}

@media (max-width: 768px) and (min-width:555px) {
  #about{
  margin-top: 520px; /* 👈 сдвигает ВСЮ секцию вниз */
}
}


@media (max-width: 360px) {
    #about{
       margin-top: calc(330px - (545px - 100vw) * 0.5 + 100px); /* +100px — блок опущен ниже */
  }
    .gradient-text {
      margin-top:-15px;
}
}

@media (max-width: 768px) and (min-width:768px) {
    .gradient-text {
      margin-top: -0px;
}
}

@media (max-width: 320px) {
    #about{
    margin-top: calc(300px - (510px - 100vw) * 0.7 + 100px); /* блок опущен ниже на 100px */
  }
  .gradient-text {
      margin-top: -20px;
}
  .about-images-wrapper {
margin-top:-150px !important;
}
.about-wrapper {
 height: 750px !important;
  position: relative;
}

.about-list {
     top: -105px ;
  }
}


@media (max-width: 480px) {
  .about-images-wrapper {
margin-top: clamp(-150px, calc(425px - (100vw - 1000px) * -0.9), 320px);
}
}

@media (max-width: 480px) and (min-width:320px) {
.about-wrapper {
 height: clamp(56px, calc(1649px - (1277px - 100vw) * 0.92), 1480px);
  position: relative;
}
}




@media (max-width: 1230px) and (min-width: 768px){
  .portfolio-header{
    margin-top: calc(510px - (1520px - 100vw) * 0.37);
  }

 .portfolio-title {
  font-size: clamp(44px, 5vw, 52px) !important;
  }
  .ellipse-7 {
   width: clamp(320px, 36vw, 410px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(0px, 5.3vw, 55px) !important;     /* минимум 50px, максимум 61px */
   filter: blur(clamp(41px, 4.2vw, 65px)) !important;
}
}




@media (max-width: 1470px) and (min-width: 768px){
 /* Карточка */
.card {
  position: relative;
  width: clamp(260px, 27.5vw, 395px);
  height: clamp(340px, 37.5vw, 518px);
  border-radius: 12px;
  overflow: visible; /* оставляем, чтобы блюр вылезал */
}

/* Белый фон с блюром */
.card-bg {
  position: absolute;
  inset: 0; /* занимает всю карточку */
  background-color: rgba(255, 255, 255, 0.85);
  
  /* Адаптивный блюр: чем меньше карточка, тем меньше блюр */
  filter: blur(clamp(4px, 1vw, 12px)); 
  
  border-radius: inherit;
  z-index: 0;
}



}


@media (max-width: 1200px) and (min-width: 768px) {

  .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 40px 50px;
 margin-top: clamp(130px, 16vw, 145px) !important;
  }

  /* ВСЕ ряды превращаем в "невидимые" */
  .cards-row {
    display: contents;
  }

  /* карточки одинаковые */
  .card {
    width: clamp(310px, 28vw, 395px);
    height: clamp(430px, 36vw, 518px);
  }

  /* скрытые */
  .cards-row.hidden-cards {
    display: none;
  }

  .show-more-btn {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 10px;
  }
  .card-bg {
  position: absolute;
 inset: clamp(5px, 3.7vw, 0px) clamp(4px, 3.5vw, 0px) !important;
  background-color: rgba(255,255,255,0.85);
  filter: blur(clamp(6px, 1.5vw, 12px)); /* 👈 ВАЖНО */
  border-radius: 12px;
  z-index: 0;
}

 .show-more-btn {
  position: relative;

  width: clamp(380px, 40vw, 502px);
  height: clamp(70px, 7vw, 86px);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);

  cursor: pointer;
  z-index: 2;
}
.desktop .rectangle-5 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: #ff4a92fa;
  border-radius: 9.52px;
  filter: blur(10px);
  mix-blend-mode: screen;
  position: absolute;
  box-shadow: inset 5.71px 5.71px 21.8px #cd3974;
}

.desktop .rectangle-6 {
  top: 2%;
  left: 1%;
  width: 98%;
  height: 96%;
  border-radius: 10px;
  position: absolute;

  background: linear-gradient(
    90deg,
    #fe4696 20%,
    #fc87cb 50%,
    #fe4092 90%
  );
}

.desktop .text-wrapper-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);

  font-size: clamp(25px, 3vw, 32px);
  text-align: center;

  text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
 font-family: "Montserrat",  Helvetica;
  font-weight: 500;
  color: #fff8f8;
  white-space: nowrap;
} 
}

@media (max-width: 768px){
  .portfolio-header{
margin-top: calc(460px + (100vw - 1100px) * 0.3)  !important;
  }

 .portfolio-title {
  font-size: 48px !important;
  }
   .desktop .ellipse-7 {
   width: 350px;   /* минимум 250px, максимум 381px */
  height: 42px;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(39px, 5vw, 54px)) !important;
}


  .cards-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* 👈 одна колонка */
  justify-content: center;
  gap: 20px; /* можно уменьшить расстояние */
   justify-items: center; /* 👈 ВОТ ЭТО ГЛАВНОЕ */
   margin-top: 120px;
}

  /* ВСЕ ряды превращаем в "невидимые" */
  .cards-row {
    display: contents;
  }

  /* карточки одинаковые */
  .card {
  width: clamp(240px, calc(330px - (555px - 100vw) * 0.3), 330px);
height: clamp(320px, calc(450px - (555px - 100vw) * 0.35), 450px);
  
  }

  /* скрытые */
  .cards-row.hidden-cards {
    display: none;
  }

  .show-more-btn {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 10px;
  }
.card-bg {
  position: absolute;
  inset: 4px 2px;
  background-color: rgba(255,255,255,0.85);
  filter: blur(clamp(6px, 1.5vw, 12px)); /* 👈 ВАЖНО */
  border-radius: 12px;
  z-index: 0;
}
.desktop .abstract-pink-line {
  position: absolute;
  top:40vh; /* смещение от верха, пропорциональное высоте экрана */
  left: 50%;
  width: clamp(600px, 100%, 1600px) !important; /* адаптивная ширина */
  height: clamp(950px, 50vh, 2100px) !important; /* адаптивная высота */

  object-fit: cover;
  transform: translateX(-50%);
  z-index: 0;  
}
}




@media (max-width: 555px) and (min-width: 429px){

   .portfolio-header{
      margin-top: calc(270px - (480px - 100vw) * 0.5) !important;
  }

 .portfolio-title {
  font-size: clamp(29px,8.5vw, 47px) !important;
  }
   .desktop .ellipse-7 {
   width: clamp(230px, 61vw, 381px);   /* минимум 250px, максимум 381px */
  height: clamp(30px, 8.1vw, 80px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(31px, 7.2vw, 60px)) !important;
}

  .cards-wrapper {
    margin-top: clamp(80px, calc(230px - (1300px - 100vw) * 0.15), 120px) !important;
}
 .card-bg {
  position: absolute;
 inset: clamp(2px, 3.6vw, 0px) clamp(2px, 3.5vw, 0px) !important;
  background-color: rgba(255,255,255,0.85);
  filter: blur(clamp(6px, 1.5vw, 12px)); /* 👈 ВАЖНО */
  border-radius: 12px;
  z-index: 0;
}
.desktop .abstract-pink-line {
  position: absolute;
  top:70vh; /* смещение от верха, пропорциональное высоте экрана */
  left: 50%;
  width: clamp(400px, 100%, 1600px) !important; /* адаптивная ширина */
  height: clamp(700px, 50vh, 1500px) !important; /* адаптивная высота */

  object-fit: cover;
  transform: translateX(-50%);
  z-index: 0;  
}
}


@media (max-width: 429px)  and (min-width: 360px){

  .portfolio-header{
      margin-top: calc(300px - (540px - 100vw) * 0.5) !important;
  }

 .portfolio-title {
  font-size: clamp(24px, 8.6vw, 45px) !important;
  }
   .desktop .ellipse-7 {
   width: clamp(190px, 62vw, 371px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(20px, 8vw, 61px);     /* минимум 50px, максимум 61px */
  filter: blur(clamp(27px, 7vw, 45px)) !important;
}
 .cards-wrapper {
    margin-top: clamp(30px, calc(210px - (1200px - 100vw) * 0.15), 120px) !important;
    justify-content: center;
   
}
 .card-bg {
  position: absolute;
 inset: clamp(2px, 3vw, 0px) clamp(1px, 3.5vw, 0px) !important;
  background-color: rgba(255,255,255,0.85);
  filter: blur(clamp(6px, 1.5vw, 12px)); /* 👈 ВАЖНО */
  border-radius: 12px;
  z-index: 0;
}

.desktop .abstract-pink-line {
  position: absolute;
  top:80vh; /* смещение от верха, пропорциональное высоте экрана */
  left: 50%;
  width: clamp(400px, 100%, 1600px) !important; /* адаптивная ширина */
  height: clamp(600px, 50vh, 1500px) !important; /* адаптивная высота */

  object-fit: cover;
  transform: translateX(-50%);
  z-index: 0;  
}
}


@media (max-width: 360px) {
    .portfolio-header{
      margin-top: calc(350px - (630px - 100vw) * 0.5) !important;
  }

  .portfolio-title{
  font-size: clamp(23px, 8.7vw, 45px) !important;
  }
   .desktop .ellipse-7 {
   width: clamp(205px, 30vw, 351px);   /* минимум 250px, максимум 381px */
  height: clamp(0px, 7.8vw, 57px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(25px, 7.3vw, 43px)) !important;
}
 .cards-wrapper {
    margin-top: clamp(40px, calc(210px - (1200px - 100vw) * 0.15), 120px) !important;
    justify-content: center;
   
}
 .card-bg {
  position: absolute;
 inset: clamp(1px, 3vw, 2px) clamp(1px, 3.5vw, 0px) !important;
  background-color: rgba(255,255,255,0.85);
  filter: blur(clamp(6px, 1.5vw, 12px)); /* 👈 ВАЖНО */
  border-radius: 12px;
  z-index: 0;
}
.desktop .abstract-pink-line {
  position: absolute;
  top:75vh; /* смещение от верха, пропорциональное высоте экрана */
  left: 50%;
  width: clamp(400px, 110%, 1600px) !important; /* адаптивная ширина */
  height: clamp(500px, 50vh, 1500px) !important; /* адаптивная высота */

  object-fit: cover;
  transform: translateX(-50%);
  z-index: 0;  
}

}

@media (max-width: 320px) {
   .portfolio-header{
     margin-top: calc(320px - (530px - 100vw) * 0.6) !important;
  }
   .portfolio-title {
  font-size: clamp(26px, 8.8vw, 52px) !important;
  }
  .desktop .ellipse-7 {
   width: clamp(190px, 29vw, 361px);   /* минимум 250px, максимум 381px */
  height: clamp(13px, 8vw, 57px);     /* минимум 50px, максимум 61px */
  filter: blur(clamp(22px, 5.4vw, 45px)) !important;
}
 .cards-wrapper {
    margin-top: clamp(20px, calc(210px - (1200px - 100vw) * 0.15), 120px) !important;
    justify-content: center;
   
}

}

@media (max-width: 429px) {
  /* карточки одинаковые */
  .card {
   width: clamp(200px, calc(300px - (555px - 100vw) * 0.25), 290px) !important;
  height: clamp(280px, calc(420px - (555px - 100vw) * 0.3), 410px) !important;
  gap: 60px !important;
  }
  
  }


@media (max-width: 768px) {
.show-more-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  /* адаптивная ширина и высота */
   width: 410px;  /* макс 502px, минимум 300px */
  height: 78px;   /* высота тоже мягко подстраивается */

  cursor: pointer;
  z-index: 2;
  
}

/* размытие заднего слоя */
.show-more-btn .rectangle-5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff4a92fa;
  border-radius: 9.52px;
  filter: blur(10px);
  mix-blend-mode: screen;
  box-shadow: inset 5.71px 5.71px 21.8px #cd3974;
}

/* основной слой кнопки */
.show-more-btn .rectangle-6 {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    #fe4696 20%,
    #fc87cb 50%,
    #fe4092 90%
  );
}

/* текст строго по центру */
.desktop .text-wrapper-9 {
  position: absolute;

  /* Центрирование внутри кнопки */
  top: 50%;
  left: 50%;
 transform: translate(-50%, -53%);

  /* Подгоняем ширину блока под кнопку */
 
  text-align: center;

 font-family: "Montserrat",  Helvetica;
  font-weight: 500;
  color: #fff8f8;

  /* Плавный размер текста под ширину кнопки */
  font-size: 28px;

  text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
  white-space: nowrap;
}

}


@media (max-width: 555px) {
.show-more-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  /* адаптивная ширина и высота */
    width: clamp(260px, 75vw, 452px) !important;  /* минимум 360px, максимум 502px, растет/уменьшается по 50% ширины экрана */
  height: clamp(52px, 13.8vw, 93px) !important;    /* минимум 70px, максимум 86px, растет/уменьшается по ширине экрана */

  cursor: pointer;
  z-index: 2;
  gap: 30px !important;
}

/* размытие заднего слоя */
.show-more-btn .rectangle-5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff4a92fa;
  border-radius: 9.52px;
  filter: blur(10px);
  mix-blend-mode: screen;
  box-shadow: inset 5.71px 5.71px 21.8px #cd3974;
}

/* основной слой кнопки */
.show-more-btn .rectangle-6 {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    #fe4696 20%,
    #fc87cb 50%,
    #fe4092 90%
  );
}

/* текст строго по центру */
.desktop .text-wrapper-9 {
  position: absolute;

  /* Центрирование внутри кнопки */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);

  /* Подгоняем ширину блока под кнопку */
 
  text-align: center;

 font-family: "Montserrat",  Helvetica;
  font-weight: 500;
  color: #fff8f8;

  /* Плавный размер текста под ширину кнопки */
   font-size: clamp(18px, 4.9vw, 55px);

  text-shadow: 3px 3px 5px rgba(22, 22, 22, 0.35);
  white-space: nowrap;
}

}

/* 🔥 Плавное уменьшение от 1200 до 768 */
@media (max-width: 1200px) and (min-width:768px) {
  .ellipse-10 {
    width: clamp(240px, 32vw, 370px);
    height: clamp(220px, 30vw, 340px);

    /* немного поднимаем, чтобы не уезжал вниз */
    top: 84%;
    left: clamp(-20%, -12vw, -10%);

    /* уменьшаем размытие */
    filter: blur(clamp(80px, 12vw, 120px));
  }
}

/* 🔥 Плавное уменьшение от 1200 до 768 */
@media (max-width: 768px)  {
  .ellipse-10 {
    width: clamp(100px, 32vw, 390px);
    height: clamp(190px, 30vw, 360px);

    /* немного поднимаем, чтобы не уезжал вниз */
    top: 90%;
    left: clamp(-20%, -12vw, -10%);

    /* уменьшаем размытие */
    filter: blur(clamp(60px, 12vw, 170px));
  }
}

@media (max-width: 1230px) and (min-width: 768px){
  .price-header{
    margin-top: calc(790px - (2850px - 100vw) * 0.27);
  }

 .price-title {
  font-size: clamp(46px, 5.3vw, 55px) !important;
  }
  .ellipse-8 {
  width: clamp(245px, 27vw, 290px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(0px, 4.8vw, 58px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(36px, 3.5vw, 59px)) !important;
}
}

@media (max-width: 1400px) and (min-width: 768px){
.view-11 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: clamp(100px, 10vw, 150px);
}

.price-blocks-container {
  
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 колонки */

  /* плавный отступ между карточками */
  gap: clamp(0px, 5.5vw, 170px);
}

/* КАРТОЧКА */
.price-block {
  position: relative;

  /* плавное уменьшение */
  width: clamp(328px, 33vw, 500px);
  min-height: clamp(500px, 50vw, 690px);

  font-family: "Aleo", Helvetica, sans-serif;
  font-weight: 300;
  color: #fff;
}

/* ФОН */
.price-block__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(20px) brightness(100%);
  z-index: 1;
}

/* ГРАДИЕНТ СНИЗУ */
.price-block__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(75px, 8vw, 115px);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(
    90deg,
    #fd4092 30%,
    #ff84c5 50%,
    #ff358c 100%
  );
  z-index: 2;
}



/* ЗАГОЛОВКИ */
.price-block__title,
.price-block__title2,
.price-block__title3,
.price-block__titlee {
  font-size: clamp(30.3px, 3vw, 45px);
  font-weight: 600;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: clamp(12px, 1.2vw, 17px);
  margin-left: 11px;
}

/* ГРАДИЕНТЫ оставляем */
.price-block__title {
  background: linear-gradient(90deg,#ff2881 -10%,#ff9cca 20%,#ff2c84 75%);
  -webkit-background-clip: text;
  
}
.price-block__title2 {
  background: linear-gradient(90deg,#ff2881 -10%,#fda0cb 20%,#ff2c84 85%);
  -webkit-background-clip: text;
}
.price-block__title3 {
  background: linear-gradient(90deg,#ff2881 -20%,#ff9cca 25%,#ff2c84 60%);
  -webkit-background-clip: text;
}
.price-block__titlee {
  white-space: nowrap;
  background: linear-gradient(90deg,#ff398c -20%,#ff99c9 40%,#ff3c8e 130%);
  -webkit-background-clip: text;
}

/* ПОДЗАГОЛОВОК */
.price-block__subtitle {
  font-size: clamp(21px, 2.1vw, 30px);
 margin-bottom: clamp(-40px, 2vw, 20px);
  margin-left: 13px;
  text-shadow: 2px 2px 4px rgba(31,31,31,0.4);
  

}

/* ПУНКТЫ */
.price-block__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin: 10px 5px 0 13px;

  font-size: clamp(18px, 1.77vw, 29px) ;
  line-height: 1.4;

  text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

/* КРУЖОК */
.price-block__bullet {
  flex-shrink: 0;
  width: clamp(6px, 0.6vw, 10px);
  height: clamp(6px, 0.6vw, 10px);
  background-color: #fff;
  border-radius: 50%;
  margin-top: 8px;
}

/* ТЕКСТ */
.price-block__text {
  display: inline-block;
  word-break: break-word;
   font-weight: 400 !important;  /* обычный */
}

.price-block__price {
 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(28px, 2.6vw, 43px);
  font-weight: 600;
  gap: 8px;
  text-shadow: 2px 2px 4px rgba(31,31,31,0.3);
}
/* Контейнер контента карточки */
.price-block__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(15px, 2vw, 30px);
  box-sizing: border-box;
  padding-top: clamp(-20px, 2.2vw, 29px) !important; /* двигаем вниз */
}
}


@media (max-width: 768px){
  .price-header{
margin-top: calc(460px + (100vw - 1100px) * 0.3)  !important;
  }

  .price-title {
  font-size: 51px !important;
  }
  .ellipse-8 {
   width: 270px !important;   /* минимум 250px, максимум 381px */
  height: 45px !important;     /* минимум 50px, максимум 61px */
  filter: blur(35px) !important;
}
}



@media (max-width: 555px) and (min-width: 429px){

  .price-header{
      margin-top: calc(270px - (480px - 100vw) * 0.5) !important;
  }

  .price-title {
  font-size: clamp(40px, 9.4vw, 50px) !important;
  }
    .desktop .ellipse-8 {
   width: clamp(150px, 48vw, 270px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(30px, 7.9vw, 80px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(30px, 6.5vw, 40px)) !important;
}

}



@media (max-width: 429px)  and (min-width: 360px){

  .price-header{
      margin-top: calc(300px - (540px - 100vw) * 0.5) !important;
  }

  .price-title {
  font-size: clamp(35px, 9vw, 46px) !important;
  }
   .ellipse-8 {
   width: clamp(170px, 45vw, 251px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(20px, 7.7vw, 91px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(26px, 6.5vw, 54px)) !important;
}

}


@media (max-width: 360px) {
    .price-header{
      margin-top: calc(350px - (630px - 100vw) * 0.5) !important;
  }

  .price-title{
  font-size: clamp(26px, 9.6vw, 49px) !important;
  }
   .ellipse-8 {
   width: clamp(160px, 48vw, 271px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(0px, 7.8vw, 57px) !important;     /* минимум 50px, максимум 61px */
  filter: blur(clamp(25px, 7.3vw, 43px)) !important;
}

}

@media (max-width: 320px) {
    .price-header{
     margin-top: calc(320px - (530px - 100vw) * 0.6) !important;
  }
   .price-title {
  font-size: clamp(26px, 9.5vw, 52px) !important;
  }
  .ellipse-8 {
   width: clamp(150px, 34vw, 341px) !important;   /* минимум 250px, максимум 381px */
  height: clamp(13px, 9vw, 57px);     /* минимум 50px, максимум 61px */
  filter: blur(clamp(22px, 5.4vw, 45px)) !important;
}

}




@media (max-width: 768px) and (min-width: 430px){
.view-11 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: clamp(100px, 15vw, 190px) !important;
}

.price-blocks-container {
  
  justify-content: center;
  display: grid;
 grid-template-columns: 1fr;

  /* плавный отступ между карточками */
  gap: 50px !important;
}

/* КАРТОЧКА */
.price-block {
  position: relative;

  /* плавное уменьшение */
  width: clamp(320px, 57vw, 750px) !important;
  min-height: clamp(490px, 82vw, 720px);

  font-family: "Aleo", Helvetica, sans-serif;
  font-weight: 300;
  color: #fff;
}

/* ФОН */
.price-block__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(20px) brightness(100%);
  z-index: 1;
}

/* ГРАДИЕНТ СНИЗУ */
.price-block__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(75px, 12vw, 145px) !important;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(
    90deg,
    #fd4092 30%,
    #ff84c5 50%,
    #ff358c 100%
  );
  z-index: 2;
}



/* ЗАГОЛОВКИ */
.price-block__title,
.price-block__title2,
.price-block__title3,
.mobile-text,
.price-block__titlee {
  font-size: clamp(31px, 5.4vw, 65px) !important;
  font-weight: 600;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: clamp(12px, 2.2vw, 30px);
  margin-left: 11px;
}

/* ГРАДИЕНТЫ оставляем */
.price-block__title {
  background: linear-gradient(90deg,#ff2881 -10%,#ff9cca 20%,#ff2c84 75%);
  -webkit-background-clip: text;
  
}
.price-block__title2 {
  background: linear-gradient(90deg,#ff2881 -10%,#fda0cb 20%,#ff2c84 85%);
  -webkit-background-clip: text;
}
.price-block__title3 {
  background: linear-gradient(90deg,#ff2881 -20%,#ff9cca 25%,#ff2c84 60%);
  -webkit-background-clip: text;
}
.price-block__titlee {
  white-space: nowrap;
  background: linear-gradient(90deg,#ff398c -20%,#ff99c9 40%,#ff3c8e 130%);
  -webkit-background-clip: text;
}

/* ПОДЗАГОЛОВОК */
.price-block__subtitle {
  font-size: clamp(21.3px, 3.8vw, 39px) !important;
  margin-bottom: clamp(13px, 3.9vw, 24px) !important;
  margin-left: 13px;
  text-shadow: 2px 2px 4px rgba(31,31,31,0.4);
  

}

/* ПУНКТЫ */
.price-block__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin: 7px 5px 0 13px;

  font-size: clamp(18px, 3.12vw, 34px) ;
  line-height: 1.4;

  text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

/* КРУЖОК */
.price-block__bullet {
  flex-shrink: 0;
  width: clamp(6px, 0.6vw, 10px);
  height: clamp(6px, 0.6vw, 10px);
  background-color: #fff;
  border-radius: 50%;
  margin-top: 8px;
}

/* ТЕКСТ */
.price-block__text {
  display: inline-block;
  word-break: break-word;
   font-weight: 400 !important;  /* обычный */
}

.price-block__price {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(28px, 4.7vw, 47px) !important;
  font-weight: 600;
 
  text-shadow: 2px 2px 4px rgba(31,31,31,0.3);
}
/* Контейнер контента карточки */
.price-block__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(15px, 2.7vw, 35px);
  box-sizing: border-box;
  padding-top: clamp(17px, 2.9vw, 30px) !important; /* двигаем вниз */
}
}

/* мобилка */
@media (max-width: 768px) {
  .price-block__titlee {
    display: none;
  }

  .mobile-text {
    display: inline;
  }
}


@media (max-width: 430px) {
.view-11 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: clamp(85px, 22vw, 190px);
}

.price-blocks-container {
  
  justify-content: center;
  display: grid;
 grid-template-columns: 1fr;

  /* плавный отступ между карточками */
  gap: 50px !important;
}

/* КАРТОЧКА */
.price-block {
  position: relative;

  /* плавное уменьшение */
  width: clamp(250px, 76vw, 700px) !important;
  min-height: clamp(390px, 117vw, 483px) !important;

  font-family: "Aleo", Helvetica, sans-serif;
  font-weight: 300;
  color: #fff;
}

/* ФОН */
.price-block__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(20px) brightness(100%);
  z-index: 1;
}

/* ГРАДИЕНТ СНИЗУ */
.price-block__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(63px, 17.8vw, 145px) !important;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(
    90deg,
    #fd4092 30%,
    #ff84c5 50%,
    #ff358c 100%
  );
  z-index: 2;
}



/* ЗАГОЛОВКИ */
.price-block__title,
.price-block__title2,
.price-block__title3,
.mobile-text,
.price-block__titlee {
  font-size: clamp(25px, 7.3vw, 64px) !important;
  font-weight: 600;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: clamp(9px, 2.5vw, 30px);
  margin-left: 11px;
}

/* ГРАДИЕНТЫ оставляем */
.price-block__title {
  background: linear-gradient(90deg,#ff2881 -10%,#ff9cca 20%,#ff2c84 75%);
  -webkit-background-clip: text;
  
}
.price-block__title2 {
  background: linear-gradient(90deg,#ff2881 -10%,#fda0cb 20%,#ff2c84 85%);
  -webkit-background-clip: text;
}
.price-block__title3 {
  background: linear-gradient(90deg,#ff2881 -20%,#ff9cca 25%,#ff2c84 60%);
  -webkit-background-clip: text;
}
.price-block__titlee {
  white-space: nowrap;
  background: linear-gradient(90deg,#ff398c -20%,#ff99c9 40%,#ff3c8e 130%);
  -webkit-background-clip: text;
}

/* ПОДЗАГОЛОВОК */
.price-block__subtitle {
  font-size: clamp(16.5px, 4.94vw, 40px) !important;
  margin-bottom: clamp(13px, 3.9vw, 24px) !important;
  margin-left: 13px;
  text-shadow: 2px 2px 4px rgba(31,31,31,0.4);
  

}

/* ПУНКТЫ */
.price-block__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin: 7px 5px 0 13px;

  font-size: clamp(14px, 4.3vw, 18px) ;
  line-height: 1.4;

 
}

/* КРУЖОК */
.price-block__bullet {
  flex-shrink: 0;
  width: clamp(6px, 0.6vw, 10px);
  height: clamp(6px, 0.6vw, 10px);
  background-color: #fff;
  border-radius: 50%;
  margin-top: 8px;
}

/* ТЕКСТ */
.price-block__text {
  display: inline-block;
  word-break: break-word;
   font-weight: 400 !important;  /* обычный */
}

.price-block__price {
 
  
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: clamp(24px, 6.8vw, 47px);
  font-weight: 600;
  transform: translate(-0%, -6%);
  text-shadow: 2px 2px 4px rgba(31,31,31,0.3);
}
/* Контейнер контента карточки */
.price-block__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(12px, 2.7vw, 35px);
  box-sizing: border-box;
  padding-top: clamp(13px, 3.7vw, 30px) !important; /* двигаем вниз */
}
}



@media (max-width: 1400px) and (min-width:768px) {
.desktop .ellipse-2 {
  position: absolute;
  top: -220%;
  left: 90%;
  width: clamp(180px, 30vw, 380px);
  height: clamp(230px, 40vw, 501px);
  background-color: #ff0a53f0;
  border-radius: 308.33px / 315.61px;
  transform: rotate(-113.12deg);
  filter: blur(clamp(70px, 12vw, 160px)); /* 👈 плавный blur */
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  z-index: 0;
}
}

@media (max-width: 768px) {
.desktop .ellipse-2 {
  position: absolute;

  top: -140%;
  left: clamp(60%, 86%, 95%);

  width: clamp(140px, 30vw, 390px);
  height: clamp(190px, 40vw, 511px);

  background-color: #ff0a53f0;
  border-radius: 308.33px / 315.61px;

  transform: rotate(-113.12deg);

  filter: blur(clamp(75px, 13vw, 160px)); /* 👈 плавный blur */

  mix-blend-mode: plus-lighter;
  pointer-events: none;
  z-index: 0;
}
}





@media (max-width: 1400px) and  (min-width:768px) {
.desktop-text-container {

  gap: 22px;

 margin-top: clamp(200px, 25vw, 360px);
}

.headline {
font-size: clamp(36px, 4.1vw, 55px) !important;
  line-height: 1.1;
  white-space: normal !important;
  word-break: break-word;
overflow-wrap: break-word;;
}
/* Подзаголовок */
.subtitle {
font-size: clamp(41px, 4.4vw, 55px) !important;
}
}




@media (max-width: 1400px) and (min-width:768px){
/* ========== ОБЩИЙ КОНТЕЙНЕР ========== */
.group-24 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 2.5vw, 55px);
  margin-top: clamp(50px, 7vw, 120px);
  margin-bottom: clamp(100px, 10vw, 180px);
  contain: layout;      /* только layout, paint не ограничивает визуально */
  will-change: transform;
}

/* Кнопки */
.whatsapp-btn,
.telegram-btn,
.kwork-btn,
.Pinterest-btn {
  position: relative;
  display: flex;             /* flex для центрирования текста */
  justify-content: center;   /* по горизонтали */
  align-items: center;       /* по вертикали */
  width: clamp(310px, 43vw, 532px);
  height: clamp(72px, 10vw, 108px);
  text-decoration: none;
}

/* ========== ОБЕРТКИ ========= */
.whatsapp-wrapper,
.telegram-wrapper,
.kwork-wrapper,
.pinterest-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
 
}

/* ====== ЛОГО ===== */
.whatsapp-logo,
.telegram-logo,
.kwork-logo,
.pinterest-wrap {
  position: absolute;
 left: -29%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(80px, 10vw, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* ====== Эллипсы ===== */
.whatsapp-logo .ellipse-14,
.telegram-logo .ellipse-15s,
.kwork-logo .ellipse-16s,
.pinterest-wrap .ellipse-15 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.whatsapp-logo .ellipse-14 { width: clamp(50px, 8vw, 89px); height: clamp(50px, 8vw, 88px); background-color: #00ff2f; filter: blur(8.5px);}
.telegram-logo .ellipse-15s { width: clamp(50px, 7.7vw, 89px); height: clamp(50px, 7.7vw, 88px); background-color: #07AEFF; filter: blur(8px);}
.kwork-logo .ellipse-16s { width: clamp(55px, 8.5vw, 92px); height: clamp(55px, 8.5vw, 92px); background-color: #070707fd; filter: blur(11px);}
.pinterest-wrap .ellipse-15 { width: clamp(50px, 7.7vw, 84px); height: clamp(50px, 7.7vw, 83px); background-color: #fd0a12; filter: blur(8px);}

/* ====== ЛОГО ===== */
.whatsapp-logo .element-7 { width: clamp(75px, 11.3vw, 125px); height: clamp(75px, 11.3vw, 125px);}
.telegram-logo .element-20 { width: clamp(47px, 7.6vw, 85px); height: clamp(47px, 7.6vw, 85px);}
.kwork-logo .element-20s { width: clamp(60px, 9.7vw, 115px); height: clamp(60px, 9.7vw, 115px);}
.pinterest-wrap .pinterest-joomla { width: clamp(65px, 9.9vw, 132px); height: clamp(35px, 6.9vw, 74px);}

/* ====== ГРАДИЕНТЫ КНОПОК ===== */
.rectangle-18,
.rectangle-19,
.rectangle-20,
.rectangle-21 {
  position: absolute;
  inset: 0;
  background-color: #ff4a92fa;
  border-radius: clamp(5px, 1vw, 8px);
  box-shadow: inset clamp(3px, 1vw, 4.75px) clamp(3px, 1vw, 4.75px) clamp(10px, 2vw, 18.14px) #cd3974 !important;
  filter: blur(clamp(5px, 0.7vw, 8.32px));
  mix-blend-mode: screen;
}

.rectangle-22,
.rectangle-23,
.rectangle-24,
.rectangle-25 {
  position: absolute;
  inset: clamp(3px, 1vw, 5px);
  border-radius: clamp(5px, 1vw, 8.32px);
  background: linear-gradient(
    90deg,
    #fe4696 25%,
    #ff85d2 50%,
    #fe4092 95%
  );
}

/* Текст внутри кнопок */
.WHATSAPP,
.TELEGRAM,
.Kwork,
.Pinterest {
  font-family: "Aleo-Regular", Helvetica;
  font-size: clamp(22px, 3.2vw, 38.7px);
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(30, 30, 30, 0.35);
  text-align: center;
  line-height: 1; /* чтобы flex корректно центрировал текст */
}
}




@media (max-width: 768px) and  (min-width:430px) {
.desktop-text-container {

  gap: 22px;

 margin-top: clamp(130px, 24vw, 280px);
}

.headline {
font-size: clamp(29px, 5.5vw, 47px) !important;
  line-height: 1.1;
  white-space: normal !important;
  word-break: break-word;
overflow-wrap: break-word;;
max-width: 95%;
}
/* Подзаголовок */
.subtitle {
font-size: clamp(35px, 6.1vw, 55px) !important;
}


.group-24 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.5vw, 55px);
  margin-top: clamp(50px, 7vw, 120px);
  margin-bottom: clamp(100px, 10vw, 180px);
    contain: layout;      /* только layout, paint не ограничивает визуально */
  will-change: transform;
  
}

/* Кнопки */
.whatsapp-btn,
.telegram-btn,
.kwork-btn,
.Pinterest-btn {
  position: relative;
  display: flex;             /* flex для центрирования текста */
  justify-content: center;   /* по горизонтали */
  align-items: center;       /* по вертикали */
  width: clamp(270px, 45vw, 532px);
  height: clamp(64px, 10vw, 100px); /* безопасная адаптивная высота */
 

  text-decoration: none;
  overflow: visible;   /* чтобы градиенты не обрезались */
  
}

/* ========== ОБЕРТКИ ========= */
.whatsapp-wrapper,
.telegram-wrapper,
.kwork-wrapper,
.pinterest-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
 
}

/* ====== ЛОГО ===== */
.whatsapp-logo,
.telegram-logo,
.kwork-logo,
.pinterest-wrap {
  position: absolute;
 left: -30%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(80px, 10vw, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  will-change: transform;
}

/* ====== Эллипсы ===== */
.whatsapp-logo .ellipse-14,
.telegram-logo .ellipse-15s,
.kwork-logo .ellipse-16s,
.pinterest-wrap .ellipse-15 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
   filter: blur(clamp(3px, 0.7vw, 6px)); /* меньшее значение */
  will-change: transform, opacity; /* подсказка браузеру для ускорения */
}

.whatsapp-logo .ellipse-14 { width: clamp(50px, 7.8vw, 89px); height: clamp(50px, 8.2vw, 88px); background-color: #00ff2f; filter: blur(7px);}
.telegram-logo .ellipse-15s { width: clamp(50px, 7.7vw, 89px); height: clamp(50px, 7.7vw, 88px); background-color: #07AEFF; filter: blur(7px);}
.kwork-logo .ellipse-16s { width: clamp(55px, 9.2vw, 92px); height: clamp(55px, 9.2vw, 92px); background-color: #070707fd; filter: blur(10px);}
.pinterest-wrap .ellipse-15 { width: clamp(50px, 7.8vw, 84px); height: clamp(50px, 7.8vw, 83px); background-color: #fd0a12; filter: blur(7px);}

/* ====== ЛОГО ===== */
.whatsapp-logo .element-7 { width: clamp(75px, 11.3vw, 125px); height: clamp(75px, 11.3vw, 125px);}
.telegram-logo .element-20 { width: clamp(50px, 7.6vw, 85px); height: clamp(50px, 7.6vw, 85px);}
.kwork-logo .element-20s { width: clamp(64px, 10vw, 115px); height: clamp(64px, 10vw, 115px);}
.pinterest-wrap .pinterest-joomla { width: clamp(75px, 10vw, 132px); height: clamp(45px, 7vw, 74px);}

/* ====== ГРАДИЕНТЫ КНОПОК ===== */
.rectangle-18,
.rectangle-19,
.rectangle-20,
.rectangle-21 {
  position: absolute !;
  inset: 0;
  background-color: #ff4a92fa;
  border-radius: 9px;
 
  filter: blur(4px);
  mix-blend-mode: screen;
   pointer-events: none; /* чтобы клики шли на кнопку */
  transform: translateZ(0); /* GPU слой для плавного рендера */
}

.rectangle-22,
.rectangle-23,
.rectangle-24,
.rectangle-25 {
  position: absolute;
  inset: clamp(3px, 1vw, 5px);
  border-radius: clamp(5px, 1vw, 8.32px);
  background: linear-gradient(
    90deg,
    #fe4696 25%,
    #ff85d2 50%,
    #fe4092 95%
  );
   pointer-events: none; /* чтобы клики шли на кнопку */
  transform: translateZ(0); /* GPU слой для плавного рендера */
}

/* Текст внутри кнопок */
.WHATSAPP,
.TELEGRAM,
.Kwork,
.Pinterest {
  font-family: "Aleo-Regular", Helvetica;
  font-size: clamp(21px, 3.2vw, 38.7px);
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(30, 30, 30, 0.35);
  text-align: center;
  line-height: 1; /* чтобы flex корректно центрировал текст */
}
}



@media (max-width: 430px)  {
.desktop-text-container {

  gap: 18px;

 margin-top: clamp(80px, 31vw, 200px);
}

.headline {
font-size: clamp(21px, 6.7vw, 47px) !important;
  line-height: 1.1;
  white-space: normal !important;
  word-break: break-word;
overflow-wrap: break-word;;
max-width: 95%;
}
/* Подзаголовок */
.subtitle {
font-size: clamp(26px, 8.2vw, 55px) !important;
}
}


@media (max-width: 430px) {

.group-24 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(17px, 4.7vw, 55px);
  margin-top: clamp(30px, 11vw, 120px);
  margin-bottom: clamp(100px, 10vw, 180px);
    contain: layout;      /* только layout, paint не ограничивает визуально */
  will-change: transform;
  left: 2%;
}

/* Кнопки */
.whatsapp-btn,
.telegram-btn,
.kwork-btn,
.Pinterest-btn {
  position: relative;
  display: flex;             /* flex для центрирования текста */
  justify-content: center;   /* по горизонтали */
  align-items: center;       /* по вертикали */
  width: clamp(210px, 62.5vw, 532px);
  height: clamp(50px, 14.7vw, 100px); /* безопасная адаптивная высота */
 

  text-decoration: none;
  overflow: visible;   /* чтобы градиенты не обрезались */
  
}

/* ========== ОБЕРТКИ ========= */
.whatsapp-wrapper,
.telegram-wrapper,
.kwork-wrapper,
.pinterest-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
 
}

/* ====== ЛОГО ===== */
.whatsapp-logo,
.telegram-logo,
.kwork-logo,
.pinterest-wrap {
  position: absolute;
left: calc(-24.5% - 4vw);

  top: 50%;
  transform: translateY(-50%);
  width: clamp(80px, 10vw, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  
}

/* ====== Эллипсы ===== */
.whatsapp-logo .ellipse-14,
.telegram-logo .ellipse-15s,
.kwork-logo .ellipse-16s,
.pinterest-wrap .ellipse-15 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
   filter: blur(clamp(3px, 0.7vw, 6px)); /* меньшее значение */
  will-change: transform, opacity; /* подсказка браузеру для ускорения */
}

.whatsapp-logo .ellipse-14 { width: clamp(38px, 11.8vw, 89px); height: clamp(38px, 11.8vw, 88px); background-color: #00ff2f; filter: blur(6px);}
.telegram-logo .ellipse-15s { width: clamp(38px, 11vw, 89px); height: clamp(38px, 11vw, 88px); background-color: #07AEFF; filter: blur(6px);}
.kwork-logo .ellipse-16s { width: clamp(45px, 9.2vw, 92px); height: clamp(45px, 9.2vw, 92px); background-color: rgba(10, 10, 10, 0.992); filter: blur(10px);}
.pinterest-wrap .ellipse-15 { width: clamp(38px, 11vw, 84px); height: clamp(38px, 11vw, 83px); background-color: #fd0a12; filter: blur(6px);}

/* ====== ЛОГО ===== */
.whatsapp-logo .element-7 { width: clamp(57px, 17vw, 125px); height: clamp(57px, 17vw, 125px);}
.telegram-logo .element-20 { width: clamp(38px, 11.5vw, 85px); height: clamp(38px, 11.5vw, 85px);}
.kwork-logo .element-20s { width: clamp(50px, 15vw, 115px); height: clamp(50px, 15vw, 115px);}
.pinterest-wrap .pinterest-joomla { width: clamp(60px, 13.5vw, 132px); height: clamp(35px, 11vw, 74px);}

/* ====== ГРАДИЕНТЫ КНОПОК ===== */
.rectangle-18,
.rectangle-19,
.rectangle-20,
.rectangle-21 {
  position: absolute !;
  inset: 0;
  background-color: #ff4a92fa;
  border-radius: clamp(5px, 1vw, 8px);
 
  filter: blur(4px);
  mix-blend-mode: screen;
   pointer-events: none; /* чтобы клики шли на кнопку */
  transform: translateZ(0); /* GPU слой для плавного рендера */
}

.rectangle-22,
.rectangle-23,
.rectangle-24,
.rectangle-25 {
  position: absolute;
  inset: clamp(3px, 1vw, 5px);
  border-radius: clamp(5px, 1vw, 8.32px);
  background: linear-gradient(
    90deg,
    #fe4696 25%,
    #ff85d2 50%,
    #fe4092 95%
  );
   pointer-events: none; /* чтобы клики шли на кнопку */
  transform: translateZ(0); /* GPU слой для плавного рендера */
}

/* Текст внутри кнопок */
.WHATSAPP,
.TELEGRAM,
.Kwork,
.Pinterest {
  font-family: "Aleo-Regular", Helvetica;
  font-size: clamp(16px, 4.9vw, 38.7px);
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(30, 30, 30, 0.35);
  text-align: center;
  line-height: 1; /* чтобы flex корректно центрировал текст */
}
}

@media (max-width: 460px) {
.group-24 {
left: 1.5%;
}
}

@media (max-width: 390px) {
.whatsapp-logo,
.telegram-logo,
.kwork-logo,
.pinterest-wrap {
left: -33%;
}
}


/* ===== АДАПТИВ 768–1130 ===== */
@media (max-width: 1130px) and (min-width: 768px) {

 .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding-top: 13px;   /* минимальный верхний отступ */
  padding-bottom: 15px; /* минимальный нижний */
  gap: 1px;            /* вертикальное расстояние между элементами */
  min-height: auto;     /* убираем фиксированную высоту */
}

  /* ОБЪЕДИНЯЕМ КРУГ + ЗАГОЛОВОК */
  .footer .div-6 {
    position: relative;
    display: inline-block;
   
    font-size: clamp(27px, 3vw, 31px) !important;
    letter-spacing: 3.3px;
     padding-bottom: 0 !important;       /* ⬅️ КЛЮЧ */
     line-height: 1.4; 
  }


  /* ОПИСАНИЕ */
  .footer .div-88 {
    font-size: clamp(3px, 2.4vw, 23px);
    letter-spacing: clamp(1px, 0.4vw, 2px);
    max-width: 90%;
  }

  /* ФОН — уменьшаем визуальную высоту */
  .rectangle-17 {
    height: 100%;
  }
}



/* По умолчанию (мобилка и планшет) */
.div-7 {
  display: none; /* скрываем первый текст */
}

.div-88 {
  display: block; /* показываем второй */
}

/* Десктоп от 1130px */
@media (min-width: 1130px) {
  .div-7 {
    display: block; /* показываем первый */
  }

  .div-88 {
    display: none; /* скрываем второй */
  }
  
}

@media (max-width: 1130px) {
  .footer .ellipse-with-letter {
    display: none;
  }
}

/* ===== АДАПТИВ 768–1130 ===== */
@media (max-width: 768px)  {

 .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding-top: 13px;   /* минимальный верхний отступ */
  padding-bottom: 15px; /* минимальный нижний */
  gap: 0px;            /* вертикальное расстояние между элементами */
  min-height: auto;     /* убираем фиксированную высоту */

}

  /* ОБЪЕДИНЯЕМ КРУГ + ЗАГОЛОВОК */
  .footer .div-6 {
    position: relative;
    display: inline-block;
    line-height: 1.4; 
    font-size: clamp(19px, 3.6vw, 29px) !important;
    letter-spacing: 3.1px;
     padding-bottom: 0px !important;       /* ⬅️ КЛЮЧ */
  }


  /* ОПИСАНИЕ */
  .footer .div-88 {
    font-size: clamp(13px, 2.6vw, 19px);
    letter-spacing: clamp(1px, 0.4vw, 2px);
    max-width: 90%;
  }

  /* ФОН — уменьшаем визуальную высоту */
  .rectangle-17 {
    height: 100%;
  }
}

@media (max-width: 768px)  {
.desktop .ellipse-16 {
  position: absolute;

  top: 88%;
  left: clamp(-120px, -10vw, -190px);

  width: clamp(180px, 32vw, 370px);
  height: clamp(220px, 37vw, 460px);

  background-color: #ff006fe7;
  border-radius: 50%;

  transform: rotate(-113.12deg);

  filter: blur(clamp(80px, 10vw, 140px));

  mix-blend-mode: plus-lighter;
  z-index: 2;
}
}

@media (max-width: 1400px) and (min-height:768px) {
.desktop .ellipse-16 {
  position: absolute;

  top: 60%;
  left: -15%;

  width: clamp(100px, 33vw, 390px);
  height: clamp(180px, 40vw, 480px);

  background-color: #ff0077e7;
  border-radius: 50%;

  transform: rotate(-113.12deg);

  filter: blur(clamp(100px, 10vw, 140px));

  mix-blend-mode: plus-lighter;
  z-index: 2;
}
}