:root {
  --color-bg1: rgb(108, 0, 162);
  --color-bg2: rgb(0, 17, 82);
  --color1: 18, 113, 255;
  --color2: 221, 74, 255;
  --color3: 100, 220, 255;
  --color4: 200, 50, 50;
  --color5: 180, 180, 50;
  --color-interactive: 140, 100, 255;
  --circle-size: 80%;
  --blending: hard-light;
  --color-two-1: 240, 146, 245;
  --color-two-2: 117, 213, 243;
  --color-two-3: 179, 136, 230;
  --color-two-4: 132, 148, 235;
  --color-two-5: 161, 158, 234;
}

@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}

@media (min-width: 1700px) {
    .works-title {
        font-size: 38px;
    }
}

@media (min-width: 1440px) {
    .works-img {
        flex: 1;
        height: 100%;
        width: 50%;
        object-fit: contain;
    }
}

@media (min-width: 1440px) {
    h1.title {
        font-size: 4em;
        max-width: 1100px;
    }
}

@media (min-width: 1440px) {
    .benefits-list {
        width: auto;
        flex: none;
    }
    .benefits-img {
        min-width: 350px;
    }
}

.main-screen__title-wrap {
    justify-content: space-between;
}

/*.menu {*/
/*    gap: unset;*/
/*}*/

.swiper-wrapper .swiper-slide.section:nth-child(even) {
    background-color: white;
}

@media (min-device-width: 960px) and (max-width: 1440px) {
    .contacts-list .title-m {
        margin-bottom: 0;
    }

    .contacts-form, .contacts-list {
        padding: 50px 20px 0 20px;
    }

    .team__description {
        gap: 15px;
    }

    .team__description p {
        font-size: 13px;
    }

    .title {
        font-size: 93px;
    }

    .services-list {
        max-width: 430px;
        width: auto;
    }

    .benefits-list {
        max-width: 320px;
        width: auto;
    }

    .portfolio-item__name {
        font-size: 70px;
    }

    .swiper-slide {
        height: calc(100vh - 100px);
    }
}

.main-screen .button {
  padding: 20px 40px;
}

@media (max-width: 1199px) {
  .main-screen .button {
    padding: 10px 30px;
  }
}

.gradient-bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  background: linear-gradient(40deg, rgb(108 0 162 / 20%), rgb(153 173 248));
  top: 0;
  left: 0;
  z-index: 1;
}
  
  .gradients-container {
    filter: blur(10px) ;
    width: 100%;
    height: 100%;
    z-index: -9999999999999;
  }

  .g1 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: center center;
    animation: moveVertical 30s ease infinite;

    opacity: 1;
  }

  .two .g1 {
    background: radial-gradient(circle at center, rgba(var(--color-two-1), 0.8) 0, rgba(var(--color-two-1), 0) 50%) no-repeat;
  }

  .g2 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color2), 0) 0, rgba(var(--color2), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;

    opacity: 1;
  }

  .two .g2 {
    background: radial-gradient(circle at center, rgba(var(--color-two-2), 0.8) 0, rgba(var(--color-two-2), 0) 50%) no-repeat;
  }

  .g3 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);

    transform-origin: calc(50% + 400px);
    animation: moveInCircle 40s linear infinite;

    opacity: 1;
  }

  .two .g3 {
    background: radial-gradient(circle at center, rgba(var(--color-two-3), 0.8) 0, rgba(var(--color-two-3), 0) 50%) no-repeat;
  }

  .g4 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 40s ease infinite;

    opacity: 0.7;
  }

  .two .g4 {
    background: radial-gradient(circle at center, rgba(var(--color-two-4), 0.8) 0, rgba(var(--color-two-4), 0) 50%) no-repeat;
  }

  .g5 {
    position: absolute;
    background: radial-gradient(circle at center, rgb(50 180 167 / 80%) 0, rgba(var(--color5), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
    opacity: 1;
  }

  .two .g5 {
    background: radial-gradient(circle at center, rgba(var(--color-two-5), 0.8) 0, rgba(var(--color-two-5), 0) 50%) no-repeat;
  }

  .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.7;
  }
.main-screen__title-wrap {
    justify-content: center;
    z-index: 2;
}
/* Плавна «левітація» без смикань — все в одному transform */
.main-screen__img{
  z-index:2;
  display:block;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  /* налаштовувані амплітуди */
  --float-range: 8px;   /* вертикальна амплітуда */
  --tilt-range: .2deg;  /* кут покачування */
  --breathe-range: .004;/* «дихання» (масштаб) */

  animation: float 8.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.22));
}

/* Один keyframes керує translate+rotate+scale одразу */
@keyframes float{
  0%{
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
  20%{
    transform: translate3d(0, calc(var(--float-range)*-0.15), 0)
               rotate(calc(var(--tilt-range)*.6))
               scale(calc(1 + var(--breathe-range)*.2));
  }
  50%{
    transform: translate3d(0, calc(var(--float-range)*-1), 0)
               rotate(calc(var(--tilt-range)*-1))
               scale(calc(1 + var(--breathe-range)));
  }
  80%{
    transform: translate3d(0, calc(var(--float-range)*-0.35), 0)
               rotate(calc(var(--tilt-range)*.3))
               scale(calc(1 + var(--breathe-range)*.3));
  }
  100%{
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
}

.main-screen__bubble {
  position: absolute;
  z-index: 100;
  opacity: 0;
  animation: floatBubble linear infinite;
  will-change: transform, opacity;
}

.main-screen__bubble img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes floatBubble {
  0% {
    transform: translate(-60%, 100vh) scale(1);
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translate(-40%, -20vh) scale(1.2);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(-45%, -160vh) scale(1.1);
    opacity: 1;
  }
}

.main-screen__bubble.bubble-1 {
  left: 10vw;
  width: 25vw;
  height: 25vw;
  animation-duration: 7s;
  animation-delay: 0s;
}

.main-screen__bubble.bubble-2 {
  left: 28vw;
  bottom: 15vw;
  width: 18vw;
  height: 18vw;
  animation-duration: 9s;
  animation-delay: 3s;
}

.main-screen__bubble.bubble-3 {
  top: 0;
  left: 50vw;
  width: 22vw;
  height: 22vw;
  animation-duration: 10s;
  animation-delay: 6s;
}

.main-screen__bubble.bubble-4 {
  left: 0;
  bottom: 0;
  width: 30vw;
  height: 30vw;
  animation-duration: 8s;
  animation-delay: 1s;
}

.main-screen__bubble.bubble-5 {
  left: 68vw;
  bottom: 18vw;
  width: 20vw;
  height: 20vw;
  animation-duration: 11s;
  animation-delay: 4s;
}

.two .main-screen__title-wrap {
  gap: 100px;
}

@media (max-width: 1199px) {
  .two .main-screen__title-wrap {
    gap: 60px;
  }
}

/* опціонально — трохи сильніше на hover, все ще плавно */
.main-screen__img:hover{
  --float-range: 10px;
  --tilt-range: .55deg;
  --breathe-range: .008;
}

/* повага до reduce-motion */
@media (prefers-reduced-motion: reduce){
  .main-screen__img{ animation: none; transform: none; }
}