/* Head row: stretch banner to match the right (servers) block height.
   The right block keeps its own height untouched. */
.head_block {
  align-items: stretch;
}

.sortion_block_head {
  display: flex;
}

.swiper {
  position: relative;
  width: 100%;
  height: 100%;              /* fill the row, matching the right block */
  min-height: 250px;
  clip-path: none;           /* cleaner rounded corners instead of the notch */
  border-radius: 20px;       /* solution2 panel radius */
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 7%);
  box-shadow: 0 18px 44px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 5%);
  transition: box-shadow .35s ease, border-color .35s ease;
}

/* Subtle brand-green glow on hover, matching the site accent */
.swiper:hover {
  border-color: rgb(79 234 159 / 28%);
  box-shadow: 0 22px 54px rgb(0 0 0 / 40%),
              0 0 0 1px rgb(79 234 159 / 12%),
              0 0 34px rgb(79 234 159 / 12%),
              inset 0 1px 0 rgb(255 255 255 / 6%);
}

/* Thin brand accent line along the top edge */
.swiper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 5;
  background: linear-gradient(90deg, rgb(79 234 159 / 0%), rgb(79 234 159 / 70%) 50%, rgb(79 234 159 / 0%));
  opacity: .55;
  pointer-events: none;
}

.image-slider {
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

.image-slider__slide {
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
}

/* The image cell becomes a bottom-aligned flex stack so the title,
   subtitle and button flow with real gaps and never overlap,
   regardless of how long the title wraps. */
.image-slider__image {
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding: 28px;
  padding-right: 34%;   /* keep text clear of the pagination toggle */
}

/* Dark gradient scrim so the text stays readable over any image.
   Two layers: a soft left wash + a bottom fade, tinted toward the
   dark solution2 panel colour for a cohesive look. */
.image-slider__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background:
    linear-gradient(
      90deg,
      rgb(15 17 24 / 88%) 0%,
      rgb(15 17 24 / 58%) 34%,
      rgb(15 17 24 / 8%) 66%,
      rgb(15 17 24 / 0%) 100%
    ),
    linear-gradient(
      0deg,
      rgb(15 17 24 / 72%) 0%,
      rgb(15 17 24 / 0%) 42%
    );
  pointer-events: none;
  z-index: 1;
}

/* ---------- Title (flows first) ---------- */
.image-slider__image h3 {
  position: relative;
  order: 1;
  z-index: 2;
  max-width: 100%;
  margin: 0;
  font-family: "Unbounded";
  font-size: 27px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* subtle light-to-mint gradient text for a premium look */
  background: linear-gradient(180deg, #ffffff 0%, #eafff5 55%, #b8ffe0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  filter: drop-shadow(0 3px 16px rgb(0 0 0 / 55%));
}

/* ---------- Subtitle (flows under the title) ---------- */
.image-slider__image p {
  position: relative;
  order: 2;
  z-index: 2;
  max-width: 100%;
  width: auto;
  margin: 0;
  padding-left: 15px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  color: rgb(233 238 245 / 85%);
  text-wrap: wrap;
  text-shadow: 0 1px 10px rgb(0 0 0 / 60%);
  -webkit-text-shadow: 0 1px 10px rgb(0 0 0 / 60%);
}

/* Brand-green accent bar to the left of the subtitle */
.image-slider__image p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5be9a3, #22b877);
  box-shadow: 0 0 14px rgb(79 234 159 / 70%);
}

/* ---------- Background image: soft blur+scale transition ---------- */
.image-slider__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.08);
  filter: blur(6px) brightness(.9);
  transition: transform 7s ease, filter .9s ease;
}

/* Active slide: image sharpens and slowly drifts (Ken-Burns-lite) */
.swiper-slide-active .image-slider__image img {
  transform: scale(1.14);
  filter: blur(0) brightness(1);
}

/* =========================================================
   TEXT ENTRANCE — cascade in when a slide becomes active.
   .is-animating is toggled by swiper-init.js on slide change.
   ========================================================= */
.image-slider__image h3,
.image-slider__image p,
.image-slider__image .swiper_btn {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
}

.swiper-slide-active.is-animating .image-slider__image h3,
.swiper-slide-active.is-animating .image-slider__image p,
.swiper-slide-active.is-animating .image-slider__image .swiper_btn {
  animation: pbSlideInUp .7s cubic-bezier(.22,.61,.36,1) forwards;
}

.swiper-slide-active.is-animating .image-slider__image h3 {
  animation-delay: .05s;
}
.swiper-slide-active.is-animating .image-slider__image p {
  animation-delay: .16s;
}
.swiper-slide-active.is-animating .image-slider__image .swiper_btn {
  animation-delay: .28s;
}

/* Fallback: if JS hasn't tagged it yet, still show the active slide's text */
.swiper-slide-active .image-slider__image h3,
.swiper-slide-active .image-slider__image p,
.swiper-slide-active .image-slider__image .swiper_btn {
  opacity: 1;
  transform: none;
  filter: none;
}

@keyframes pbSlideInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-slider__image h3,
  .image-slider__image p,
  .image-slider__image .swiper_btn {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
  .image-slider__image img {
    filter: none;
    transition: none;
  }
}

/* Arrows removed — navigation is handled by the pagination toggle below */
.swiper-button-next,
.swiper-button-prev,
.swiper-buttons {
  display: none !important;
}

/* =========================================================
   PAGINATION TOGGLE — dots + running autoplay progress
   The active bullet stretches into a capsule; a green bar
   inside it fills up as the autoplay counts down (--pb-progress
   is set from swiper-init.js).
   ========================================================= */
.image-slider .swiper-pagination {
  position: absolute;
  bottom: 18px !important;
  right: 18px !important;
  left: auto !important;
  width: auto !important;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgb(16 18 26 / 42%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / 8%);
  box-shadow: 0 8px 22px rgb(0 0 0 / 30%);
  z-index: 6;
}

.image-slider .swiper-pagination-bullet {
  position: relative;
  width: 8px;
  height: 8px;
  margin: 0 !important;
  border-radius: 999px;
  background: rgb(255 255 255 / 32%);
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
  transition: width .35s cubic-bezier(.4,0,.2,1),
              background-color .3s ease;
}

.image-slider .swiper-pagination-bullet:hover {
  background: rgb(255 255 255 / 55%);
}

/* Active bullet → capsule track */
.image-slider .swiper-pagination-bullet-active {
  --pb-progress: 0;
  width: 34px;
  background: rgb(255 255 255 / 18%);
}

/* Green fill running left→right, driven by the autoplay timer */
.image-slider .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(var(--pb-progress, 0));
  background: linear-gradient(90deg, #5be9a3, #22b877);
  box-shadow: 0 0 10px rgb(79 234 159 / 55%);
  transition: transform .18s linear;
}

.image-slider .swiper-pagination-fraction {
  font-size: 20px;
  color: #fff;
}

/* Old floating autoplay ring is replaced by the progress inside the
   active pagination bullet — hide it. */
.autoplay-progress {
  display: none !important;
}

@media (max-width: 768.9px) {
  .right-swiper__block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 30px;
    height: 370px;
  }
}

@media (min-width: 769px) {
  .right-swiper__block {
    display: flex;
    flex-direction: column;
    height: 95%;

    margin-bottom: 30px;
    justify-content: space-between;
    gap: 10px;
  }
}

.right-swiper__second {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
}

.card.right-swiper__store {
  width: 70%;
}

.card.right-swiper__ds {
  width: 30%;
}

.right-swiper__online {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
}

.card.right-swiper__site {
  width: 50%;
}

.card.right-swiper__server {
  width: 50%;
}

.card.right-swiper__sc,
.card.right-swiper__store,
.card.right-swiper__ds,
.card.right-swiper__site,
.card.right-swiper__server {
  display: flex;
  position: relative;
  height: 100%;
        background-image: linear-gradient(270deg, #141213, #182134b0);
  overflow: hidden;
  justify-content: center;
  padding: 0 30px;
  margin-bottom: 10px;
  font-family: "Unbounded";
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-head) !important;
  transition: 0.3s;
  border-color: #050505;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  border-radius: 15px;
}

.card.right-swiper__sc:hover,
.card.right-swiper__store:hover,
.card.right-swiper__ds:hover,
.card.right-swiper__site:hover,
.card.right-swiper__server:hover {
  filter: brightness(115%);
  -webkit-filter: brightness(115%);
}

.card.right-swiper__site,
.card.right-swiper__server {
  cursor: default;
}

.card.right-swiper__ds {
  align-items: center;
}

.card.right-swiper__store {
  color: var(--money);
}

.card.right-swiper__sc img {
  position: absolute;
  right: -7px;
  height: auto;
  background-image: linear-gradient(273deg, color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
  width: 48%;
  top: -4px;
  transform: scale(0.9);
}

.card.right-swiper__store img {
  position: absolute;
  right: 7px;
  height: auto;
  width: 50%;
  top: 11px;
  transform: scale(1.3);
}


.card.right-swiper__sc:before,
.card.right-swiper__store:before,
.card.right-swiper__ds:before,
.card.right-swiper__site:before,
.card.right-swiper__server:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(270deg, var(--border-color), #000000);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: shimmer 2s linear infinite;
  animation-play-state: paused;
}

.card.right-swiper__sc:hover:before,
.card.right-swiper__store:hover:before,
.card.right-swiper__ds:hover:before,
.card.right-swiper__site:hover:before,
.card.right-swiper__server:hover:before {
  opacity: 0.2;
  animation-play-state: running;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.card.right-swiper__ds:before {
  background-image: linear-gradient(270deg, #5865f2, transparent);
}

.card.right-swiper__site:before {
  background-image: linear-gradient(270deg, #19ff8c, transparent);
}

.card.right-swiper__server:before {
  background-image: linear-gradient(270deg, var(--border-color), transparent);
}

.card.right-swiper__ds svg {
  width: 40px;
  height: auto;
  fill: #5865f2;
  transition: 0.5s ease-in-out;
}
.swipe-count-server {
  font-family: "Unbounded";
  font-size: 30px;
  color: var(--purple);
  font-weight: 700;
  margin-top: -3px;
}
.swipe-count {
  font-family: "Unbounded";
  font-size: 30px;
  color: var(--green);
  font-weight: 700;
  margin-top: -3px;
}

.card.right-swiper__ds:hover svg {
  transform: scale(1.3) rotateZ(360deg);
}

.right-swiper__site svg,
.right-swiper__server svg {
  position: absolute;
  width: 100px;
  height: auto;
  right: -21px;
  fill: var(--border-color);
  opacity: 0.1;
}

.right-swiper__server svg {
  fill: var(--border-color);
}

.card .right-swiper__site,
.card .right-swiper__server {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.swipe-title__count,
.swipe-title__count-server {
  font-size: 16px;
  color: var(--green);
  font-weight: 700;
  opacity: 0.9;
  font-family: "SF Pro Display", sans-serif;
}

.swipe-title__count-server {
  color: #ffe9e9f5;
}

/* =========================================================
   "Подробнее" BUTTON — modern pill with a running shine,
   an arrow that sits in a circular chip on the right.
   ========================================================= */
.image-slider__image .swiper_btn {
  display: inline-flex;
  position: relative;
  order: 3;
  margin-top: 6px;
  z-index: 3;
  align-items: center;
  justify-content: center;
  height: 44px;
  line-height: normal;
  /* Site-wide brand button gradient (--GLOBAL) so it feels native */
  background: var(--GLOBAL, radial-gradient(100% 100% at 50% 0, #4fea9f 0, #38644f 100%));
  border: 1px solid rgb(255 255 255 / 14%);
  box-shadow: 0 14px 32px rgb(45 132 92 / 42%),
              inset 0 1px 0 rgb(255 255 255 / 26%);
  padding: 0 52px 0 22px;      /* room for the arrow chip on the right */
  border-radius: 16px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .015em;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s ease, filter .25s ease;
}

/* Running diagonal shine sweep */
.image-slider__image .swiper_btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgb(255 255 255 / 45%) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: pbBtnShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pbBtnShine {
  0%   { left: -60%; }
  22%  { left: 130%; }
  100% { left: 130%; }
}

.image-slider__image .swiper_btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 20px 42px rgb(45 132 92 / 54%),
              inset 0 1px 0 rgb(255 255 255 / 30%);
}

.image-slider__image .swiper_btn:active {
  transform: translateY(0) scale(.985);
}

/* Arrow chip on the right side of the button */
.swiper_btn svg {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  fill: #ffffff;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}

.swiper_btn:hover svg {
  background: rgb(255 255 255 / 30%);
  transform: translateY(-50%) translateX(3px) rotate(45deg);
}

/* Legacy ripple element — no longer used in the new design */
.swiper_action_svg {
  display: none;
}

.swiper-slide {
  width: 100% !important;
}

/* =========================================================
   RESPONSIVE — tablet & phone
   ========================================================= */

/* Tablet / stacked layout */
@media (max-width: 991px) {
  .head_block {
    flex-direction: column;
    gap: 14px;
  }

  .sortion_block_head {
    width: 100%;
    height: auto;          /* override mob.css fixed 311px */
    display: block;
  }

  .swiper {
    height: 240px;
    min-height: 240px;
    border-radius: 18px;
  }

  .image-slider,
  .image-slider__slide,
  .image-slider__image,
  .image-slider__image::after {
    border-radius: 18px;
  }

  .image-slider__image {
    padding: 22px;
    padding-right: 30%;
    gap: 8px;
  }

  .image-slider__image h3 {
    font-size: 22px;
  }

  .image-slider__image p {
    padding-left: 12px;
    font-size: 12.5px;
  }

  .image-slider__image .swiper_btn {
    height: 38px;
    font-size: 12.5px;
    border-radius: 13px;
  }

  .image-slider .swiper-pagination {
    bottom: 14px !important;
    right: 14px !important;
    padding: 6px 9px;
    gap: 7px;
  }
}

/* Phone: tighter type so nothing collides on a narrow screen */
@media (max-width: 600px) {
  .swiper {
    height: 200px;
    min-height: 200px;
    border-radius: 16px;
  }

  .image-slider,
  .image-slider__slide,
  .image-slider__image,
  .image-slider__image::after {
    border-radius: 16px;
  }

  /* Stronger bottom scrim: text sits over the busiest part on small screens */
  .image-slider__image::after {
    background:
      linear-gradient(
        0deg,
        rgb(15 17 24 / 90%) 0%,
        rgb(15 17 24 / 45%) 46%,
        rgb(15 17 24 / 0%) 78%
      );
  }

  .image-slider__image {
    padding: 16px;
    padding-right: 20%;
    gap: 6px;
  }

  .image-slider__image h3 {
    font-size: 18px;
    line-height: 1.15;
  }

  .image-slider__image p {
    padding-left: 10px;
    font-size: 11.5px;
    /* keep it to a single tidy line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .image-slider__image .swiper_btn {
    height: 34px;
    padding: 0 44px 0 16px;
    font-size: 12px;
    border-radius: 12px;
  }

  .swiper_btn svg {
    width: 26px;
    height: 26px;
    padding: 8px;
    right: 5px;
  }

  /* Compact toggle, tucked into the top-right so it clears the text/button */
  .image-slider .swiper-pagination {
    top: 12px !important;
    bottom: auto !important;
    right: 12px !important;
    padding: 5px 8px;
    gap: 6px;
  }

  .image-slider .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
  }

  .image-slider .swiper-pagination-bullet-active {
    width: 28px;
  }
}