/* ==========================================================================
   Promodex — new design blocks (ported from designer mockup style_custom.css)
   1) Header CTA with animated gradient border  (.color-border)
   2) Services list 01–08 restyle               (.services-ideas-custom)  — service/category.twig
   3) Clients logos two-row marquee              (.brands-block)          — service/category.twig
   4) Footer: CTA (.goto-wrapper), awards slider (.brend_sec-slider), footer (.pdx-nd-footer)
   All rules are scoped to the new block classes so other pages are not affected.
   ========================================================================== */

/* ---------- 1. Header CTA: animated gradient border ---------- */
.color-border {
  --border-size: 2px;
  position: relative;
  display: inline-flex;
  padding: var(--border-size);
  border-radius: 100px;
  background: #030101;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.color-border::before {
  content: "";
  position: absolute;
  inset: -160%;
  background: conic-gradient(from 0deg, #00d9ff, #015cdb, #01abd6, #00d9ff);
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 0;
  animation: gradientRotate 2.5s linear infinite;
}
.color-border__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border-radius: inherit;
  background: #040202;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.color-border__content:hover,
.color-border__content:focus {
  color: #fff;
  text-decoration: none;
}
@keyframes gradientRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.color-border:hover {
  box-shadow: 0 10px 40px rgba(0, 217, 255, 0.18), 0 10px 40px rgba(123, 44, 255, 0.18);
}
/* same as the previous .custom-estimate-btn: hidden below 1024px */
@media (max-width: 1023px) {
  .color-border {
    display: none;
  }
}

/* ---------- 2. Services list 01–08 (service/category.twig) ----------
   Selectors are one class stronger than the mockup so they beat the inline
   <style> of category.twig, which is output after this file. */
.services-ideas.services-ideas-custom {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  /* mockup: nowrap — wrap added so cards (width:100%) stack between 601–767px */
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 0;
}
.services-ideas-custom .services-ideas__card {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  column-gap: 16px;
  padding: 16px 0;
  border-radius: 0;
}
.services-ideas-custom .services-ideas__card:hover {
  background: transparent;
}
.services-ideas-custom .services-ideas__array-block {
  right: 0;
  top: 18px;
  bottom: auto;
  width: 14px;
  height: 14px;
}
.services-ideas-custom .services-ideas__card::after {
  display: none;
}
.services-ideas-custom .services-ideas__card::before {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  margin: 0;
}
.services-ideas-custom .services-ideas__card-name {
  color: #fff;
  font-size: 16px !important;
  padding-right: 24px; /* keeps long names clear of the arrow */
}
.services-ideas-custom .services-ideas__array-block svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
@media (max-width: 767px) {
  /* 14px arrows + 6px gap: shift by one step so the second arrow lands in place */
  .services-ideas-custom .services-ideas__card:hover .services-ideas__array-main,
  .services-ideas-custom .services-ideas__card:hover .services-ideas__array-other {
    transform: translateY(-20px);
  }
}
@media (min-width: 768px) {
  .services-ideas.services-ideas-custom {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    column-gap: 60px;
    row-gap: 0;
  }
  .services-ideas-custom .services-ideas__card {
    width: calc(50% - 30px);
    column-gap: 24px;
    padding: 26px 0;
  }
  .services-ideas-custom .services-ideas__card::before {
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
  }
  .services-ideas-custom .services-ideas__card-name {
    color: #fff;
    font-size: 20px !important;
    padding-right: 30px;
  }
  .services-ideas-custom .services-ideas__array-block {
    right: 0;
    top: 26px;
    width: 18px;
    height: 18px;
  }
}

/* ---------- 3. Clients logos marquee (service/category.twig) ----------
   --shift / --dur are written by pdx-nd.js; without them the rows stay static. */
.brands-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brands-block .brand-row {
  overflow: hidden;
  width: 100%;
}
.brands-block .brand-track {
  display: flex;
  width: max-content;
  gap: 4px;
}
.brands-block .brand-row.row-left .brand-track  { animation: brandsLeft  var(--dur) linear infinite; }
.brands-block .brand-row.row-right .brand-track { animation: brandsRight var(--dur) linear infinite; }
.brands-block .brand-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  height: 80px;
  width: 140px;
  padding: 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: 10px;
  white-space: nowrap;
  background: rgba(29, 28, 28, 0.698); /* #1D1C1CB2 */
}
@media (min-width: 1024px) {
  .brands-block .brand-item {
    height: 180px;
    width: 320px;
    border-radius: 24px;
    padding: 24px;
  }
}
.brands-block .brand-item svg,
.brands-block .brand-item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
@keyframes brandsLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--shift) * -1)); }
}
@keyframes brandsRight {
  from { transform: translateX(calc(var(--shift) * -1)); }
  to   { transform: translateX(0); }
}
@media (max-width: 767px) {
  .section.customers.pdx-nd-customers {
    margin-top: 70px;
  }
}

/* ---------- 4a. Footer CTA "Готові створити щось вражаюче?" ---------- */
.goto-wrapper {
  padding-top: 40px;
  position: relative;
  z-index: 4;
}
@media (min-width: 1024px) {
  .goto-wrapper { padding-top: 100px; }
}
@media (min-width: 1200px) {
  .goto-wrapper { padding-top: 180px; }
}
.goto-wrapper .goto_title {
  font-weight: 500;
  font-size: 44px;
  line-height: 120%;
  color: #fff;
  text-align: center;
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  .goto-wrapper .goto_title {
    font-size: 34px;
    margin-bottom: 32px;
  }
}
.goto-wrapper .goto_btn-wrap {
  text-align: center;
  position: relative;
  z-index: 3;
}
.goto-wrapper .goto_btn-ins {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 500px;
  z-index: 3;
}
.goto-wrapper .goto_btn {
  font-weight: 600;
  font-size: 26px;
  line-height: 82px;
  letter-spacing: -0.5px;
  text-align: center;
  height: 90px;
  border-radius: 500px;
  min-width: 320px;
  color: #060606;
  background: #fff;
  display: inline-block;
  text-transform: none;
  border: 1px solid #fff;
  text-decoration: none;
  padding: 4px 32px;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .goto-wrapper .goto_btn {
    font-size: 22px;
    line-height: 64px;
    letter-spacing: -0.02px;
    height: 72px;
    padding: 4px 16px;
    min-width: 293px;
  }
}
/* fill-from-cursor hover (positions written by pdx-nd.js) */
.goto-wrapper .contact-button {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  transition: color 0.4s ease;
}
.goto-wrapper .contact-button__bg {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--d, 0px);
  height: var(--d, 0px);
  background: #060606;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: -1;
}
.goto-wrapper .contact-button__text {
  position: relative;
}
.goto-wrapper .contact-button.is-hover,
.goto-wrapper .contact-button.is-hover:hover {
  color: #fff;
}
.goto-wrapper .contact-button.is-hover .contact-button__bg {
  transform: translate(-50%, -50%) scale(1.01);
}
.goto-wrapper .contact-button:focus-visible {
  outline: 2px solid #01abd6;
  outline-offset: 4px;
}

/* ---------- 4b. Awards slider "Нагороди та відзнаки" ---------- */
.goto-wrapper .brend_sec-slider,
.pdx-nd-awards .brend_sec-slider {
  margin-top: 40px;
}
.goto-wrapper .brend_title,
.pdx-nd-awards .brend_title {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  margin-bottom: 16px;
  color: rgba(250, 250, 250, 0.5);
}
@media (min-width: 1024px) {
.goto-wrapper .brend_title,
.pdx-nd-awards .brend_title {
    font-size: 16px;
    margin-bottom: 24px;
  }
}
.goto-wrapper .swiperBrend,
.pdx-nd-awards .swiperBrend {
  width: 740px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.goto-wrapper .swiperBrend .swiper-wrapper,
.pdx-nd-awards .swiperBrend .swiper-wrapper {
  transition-timing-function: linear !important;
}
.goto-wrapper .swiper-slide.brend__elem,
.pdx-nd-awards .swiper-slide.brend__elem {
  width: 200px;
  height: auto;
}
.goto-wrapper .brend__elem-img,
.pdx-nd-awards .brend__elem-img {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}
/* laurel + place + platform (reuses the About page .position-item__header) */
.goto-wrapper .brend__elem-img .position-item__header,
.pdx-nd-awards .brend__elem-img .position-item__header {
  margin-bottom: 0;
  min-height: 66px;
  padding-left: 30px;
  padding-right: 30px;
  color: #fff;
}
.goto-wrapper .brend__elem-img .position-item__title,
.pdx-nd-awards .brend__elem-img .position-item__title {
  font-size: 20px;
  line-height: 130%;
}
.goto-wrapper .brend__elem-img .position-item_subtitle,
.pdx-nd-awards .brend__elem-img .position-item_subtitle {
  font-size: 12px;
  line-height: 16px;
}
.goto-wrapper .brend__elem-text,
.pdx-nd-awards .brend__elem-text {
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  text-align: center;
  margin-top: 8px;
  padding: 0 6px 6px 6px;
  color: #fff;
}

/* About page: same ribbon on the page background */
.pdx-nd-awards .brend_sec-slider { margin-top: 0; }
.pdx-nd-awards .swiperBrend { width: 1100px; }
/* ---------- 4c. Footer ---------- */
.pdx-nd-footer {
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .pdx-nd-footer { padding-top: 60px; }
}
.pdx-nd-footer .container,
.pdx-nd-footer .footer_bot {
  position: relative;
}

/* animated blob background */
.pdx-nd-footer .blob-stage {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
/* .blob-box повторяет размеры бывшего SVG (1600×1092), слои с запасом 200 по краям (2000×1492) */
.pdx-nd-footer .blob-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  aspect-ratio: 1600 / 1092;
  transform: translate(-50%, -50%);
}
@media (max-width: 767px) {
  .pdx-nd-footer .blob-box {
    bottom: 0;
    top: auto;
    left: 0;
    width: auto;
    height: 100%;
    transform: none;
  }
}
.pdx-nd-footer .blob-l {
  position: absolute;
  left: -12.5%;
  top: -18.315%;
  width: 125%;
  height: 136.63%;
  max-width: none;
  opacity: .64;
  will-change: transform;
  backface-visibility: hidden;
}
.pdx-nd-footer .blob-l-1 { transform-origin: 20.98% 43.67%; animation: pdxMoveA 18s ease-in-out infinite; }
.pdx-nd-footer .blob-l-2 { transform-origin: 6.23% 31.17%;  animation: pdxMoveB 14s ease-in-out infinite; }
.pdx-nd-footer .blob-l-3 { transform-origin: 72.33% 99.95%; animation: pdxMoveC 20s ease-in-out infinite; }
.pdx-nd-footer .blob-l-4 { transform-origin: 89.32% 98.49%; animation: pdxMoveD 16s ease-in-out infinite; }
@keyframes pdxMoveA {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-70px, 45px) scale(1.18); }
  50%  { transform: translate(35px, -55px) scale(0.88); }
  75%  { transform: translate(65px, 30px) scale(1.12); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes pdxMoveB {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(60px, -45px) scale(0.86); }
  50%  { transform: translate(-55px, 35px) scale(1.2); }
  75%  { transform: translate(35px, 60px) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes pdxMoveC {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(55px, -65px) scale(1.16); }
  50%  { transform: translate(-65px, 40px) scale(0.86); }
  75%  { transform: translate(45px, 55px) scale(1.14); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes pdxMoveD {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-60px, -45px) scale(0.87); }
  50%  { transform: translate(65px, 55px) scale(1.18); }
  75%  { transform: translate(-40px, 30px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
/* paused by pdx-nd.js while the footer is off-screen */
.pdx-nd-footer.pdx-nd-paused .blob-l {
  animation-play-state: paused;
}

/* middle: nav columns + contacts */
.pdx-nd-footer .footer-midle {
  padding: 40px 0;
}
.pdx-nd-footer .footer_nav-el-bl {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  column-gap: 24px;
}
.pdx-nd-footer .footer_nav-wrap {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
}
.pdx-nd-footer .footer_nav-title {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #fff;
  margin-bottom: 24px;
}
.pdx-nd-footer .nav_footer {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 264px;
  max-width: 100%;
}
.pdx-nd-footer .nav_footer li {
  display: block;
  margin-bottom: 6px;
}
.pdx-nd-footer .nav_footer li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #CACACA;
  cursor: pointer;
}
.pdx-nd-footer .footer-tel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 22px;
  line-height: 100%;
  text-align: right;
  color: #fff;
  text-decoration: none;
}
.pdx-nd-footer .footer-em {
  display: block;
  margin: 16px 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  text-align: right;
  color: #fff;
  text-decoration: none;
}
.pdx-nd-footer .footer-tel:hover,
.pdx-nd-footer .footer-em:hover {
  color: #fff;
  text-decoration: none;
}
@media (min-width: 767px) {
  .pdx-nd-footer .footer-tel { margin-bottom: 16px; }
  .pdx-nd-footer .footer-em  { margin: 36px 0 32px 0; }
}
@media (max-width: 1200px) {
  .pdx-nd-footer .footer-midle .nav_footer {
    width: auto;
    margin-right: 32px;
  }
}
@media (max-width: 1024px) {
  .pdx-nd-footer .footer-em,
  .pdx-nd-footer .footer-tel {
    text-align: left;
    margin-bottom: 14px;
  }
  .pdx-nd-footer .footer-em {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .pdx-nd-footer .footer_bot-img svg {
    max-height: 70px;
  }
}
@media (min-width: 1024px) {
  .pdx-nd-footer .footer-midle {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    column-gap: 24px;
    padding: 80px 0 40px 0;
  }
  .pdx-nd-footer .footer_nav-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    column-gap: 24px;
  }
  .pdx-nd-footer .footer-socials {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}
@media (max-width: 768px) {
  .pdx-nd-footer .footer_nav-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  .pdx-nd-footer .nav_footer li a {
    font-size: 14px;
  }
  .pdx-nd-footer .nav_footer li {
    margin-bottom: 6px;
  }
  .pdx-nd-footer .footer_nav-el-bl {
    display: block;
    margin-bottom: 24px;
    width: 50%;
  }
  .pdx-nd-footer .footer_nav-wrap {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .pdx-nd-footer .footer-midle .nav_footer {
    width: auto;
    margin-right: 0;
    margin-bottom: 24px;
  }
}

/* hover text-swap on footer links (pure CSS) */
.pdx-nd-footer .swap-link {
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4em;
  vertical-align: top;
}
.pdx-nd-footer .swap-inner {
  display: block;
  transition: transform 0.35s ease;
}
.pdx-nd-footer .swap-line {
  display: block;
  transition: opacity 0.35s ease;
}
.pdx-nd-footer .swap-line--hover {
  color: #01abd6;
}
.pdx-nd-footer .swap-link:hover .swap-inner,
.pdx-nd-footer .swap-link:focus-visible .swap-inner {
  transform: translateY(-1.4em);
}
.pdx-nd-footer .swap-link:hover .swap-line:first-child,
.pdx-nd-footer .swap-link:focus-visible .swap-line:first-child {
  opacity: 0;
}

/* bottom row (overrides of the theme .footer-bottom / .fb__nav-item / .copyright) */
.pdx-nd-footer .fb__nav-item {
  border: none;
}
@media (max-width: 768px) {
  .pdx-nd-footer .footer-bottom {
    margin-top: 20px;
  }
  .pdx-nd-footer .footer-bottom__nav {
    display: block;
  }
  .pdx-nd-footer .footer-bottom__nav a {
    display: inline-block;
    text-align: center;
    margin: 3px 0;
    padding: 0;
    width: 100%;
  }
  .pdx-nd-footer .copyright {
    padding: 10px 0;
  }
}

/* big PROMODEX wordmark */
.pdx-nd-footer .footer_bot {
  text-align: center;
}
.pdx-nd-footer .marquee_foot {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.pdx-nd-footer .marquee_foot-track {
  display: flex;
  width: auto;
}
.pdx-nd-footer .footer_bot-img svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
@media (min-width: 1100px) {
  .pdx-nd-footer .footer_bot-img svg { width: 100%; }
}
@media (max-width: 768px) {
  .pdx-nd-footer .footer_bot-img svg { max-height: 40px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .color-border::before,
  .brands-block .brand-track,
  .pdx-nd-footer .blob-l {
    animation: none !important;
  }
}

/* Нумерация 01–99 без «010» */
.section.ideas .services-ideas.services-ideas-custom .services-ideas__card::before{content:counter(list-item, decimal-leading-zero)}

/* ---------- SEO text (service pages): on mobile the same 360px scroll box as on desktop ---------- */
@media screen and (max-width: 768px) {
  .text-grid__right {
    max-height: 360px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 12px;
  }
}

/* ---------- smooth scroll (Lenis 1.3.27, desktop only; see pdx-nd.js) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis {
  scroll-behavior: auto; /* style.css sets smooth — it fights Lenis */
}
.lenis.lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis .text-grid__right {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* =====================================================================
   Главная, новый дизайн (макет promo.htm): первый экран, «Про нас», карточки услуг, отзывы
   ===================================================================== */

/* ---------- 5a. Первый экран: на всю высоту окна, под прозрачной шапкой ---------- */
.pdx-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  margin-top: -72px;           /* .app padding-top: шапка фиксированная, экран начинается от верха окна */
  margin-bottom: 0;
  overflow: hidden;
  background: #000;
  z-index: 1;
}
@media (min-width: 1024px) {
  .pdx-hero { margin-top: -110px; min-height: 640px; }
}
.pdx-hero__poster,
.pdx-hero__poster img,
.pdx-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdx-hero__poster { z-index: 0; }
.pdx-hero__poster img { display: block; height: calc(100% - 1px); }   /* на 1px меньше экрана: Chrome не считает «главным элементом» картинки ровно во весь экран, и LCP уходил на кнопку «Подати заявку»; так LCP — постер первого экрана */
.pdx-hero__video {
  z-index: 1;
  opacity: 0;                 /* видео проявляется, когда реально пошло воспроизведение */
  transition: opacity .8s ease;
}
.pdx-hero__video.is-playing { opacity: 1; }
.pdx-hero::after {            /* затемнение снизу, чтобы текст и рейтинги читались на видео */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(6,6,6,.85) 0%, rgba(6,6,6,0) 100%);
  z-index: 2;
  pointer-events: none;
}
.pdx-hero .scroll-down-btn { z-index: 5; }
.pdx-hero__bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding-bottom: 8px;
}
.pdx-hero .video-text-bott-pos {
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .pdx-hero .video-text-bott-pos { width: 660px; }
}
.pdx-hero .video-text-bott-type,
.pdx-hero .video-text-bott-type2,
.pdx-hero .video-text-bott-midd {
  line-height: 100%;
  margin: 6px 0;
  color: #fff;
  text-align: justify;
  text-align-last: justify;
}
.pdx-hero .video-text-bott-type  { font-weight: 800; font-size: 30px; letter-spacing: 1.5px; }
.pdx-hero .video-text-bott-type2 { font-weight: 800; font-size: 25px; }
.pdx-hero .video-text-bott-midd  { font-weight: 400; font-size: 15px; letter-spacing: 4.8px; }
@media (min-width: 1024px) {
  .pdx-hero .video-text-bott-type  { font-size: 60px; letter-spacing: 1.8px; }
  .pdx-hero .video-text-bott-type2 { font-size: 52px; }
  .pdx-hero .video-text-bott-midd  { font-size: 30px; letter-spacing: 9.6px; }
}
.pdx-hero .clutch-bott-pos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 24px;
}
@media (min-width: 1024px) {
  .pdx-hero .clutch-bott-pos { column-gap: 50px; }
}
.pdx-hero .clutch-bott-el { margin: 24px 0; text-align: center; }
.pdx-hero .clutch-bott-title img { display: block; height: 22px; width: auto; margin: 0 auto 6px; }
.pdx-hero .clutch-star-wr { display: flex; justify-content: center; align-items: center; column-gap: 4px; }
.pdx-hero .clutch-star img { display: block; width: 14px; height: 14px; }
.pdx-hero .clutch-bott-num { font-weight: 700; font-size: 14px; line-height: 130%; color: #fff; }
.pdx-hero .clutch-bott-total { font-weight: 400; font-size: 12px; line-height: 130%; color: #fff; }
@media (min-width: 768px) {
  .pdx-hero .clutch-bott-el { display: flex; align-items: center; column-gap: 16px; margin: 32px 0; }
  .pdx-hero .clutch-bott-title img { height: 26px; margin: 0; }
  .pdx-hero .clutch-bott-block { display: flex; align-items: center; column-gap: 10px; padding: 10px 16px; border-radius: 44px; background: rgba(255,255,255,.06); }
  .pdx-hero .clutch-star-wr { flex-direction: row-reverse; column-gap: 10px; }
  .pdx-hero .clutch-star img { width: 17px; height: 17px; }
  .pdx-hero .clutch-bott-num { font-size: 16px; }
  .pdx-hero .clutch-bott-total { font-size: 14px; }
}

@media (max-width: 1023px) {
  .pdx-hero .scroll-down-btn { display: none; }
}
@media (max-width: 767px) {
  .pdx-hero__bottom { padding-bottom: 96px; }   /* рейтинги выше плавающей кнопки «Подати заявку» */
  .pdx-hero .video-text-bott-pos { width: 280px; }
  .pdx-hero .video-text-bott-type  { font-size: 25px; letter-spacing: 1px; }
  .pdx-hero .video-text-bott-midd  { font-size: 12px; letter-spacing: 3.9px; }
  .pdx-hero .video-text-bott-type2 { font-size: 21px; }
  .pdx-hero .clutch-bott-el { margin: 20px 0 0; }
}

/* ---------- 5b. «Про нас»: подсветка слов при прокрутке ---------- */
.pdx-about.section { margin-bottom: 0; }
.pdx-about .magic-text-wrapper { margin-top: 60px; }
@media (min-width: 1024px) { .pdx-about .magic-text-wrapper { margin-top: 120px; } }
.pdx-about .magic-text-pos { width: 1050px; max-width: 100%; margin: 0 auto 60px; }
.pdx-about .magic-text-title { font-weight: 500; font-size: 16px; line-height: 100%; text-align: center; margin-bottom: 16px; }
@media (min-width: 768px) { .pdx-about .magic-text-title { font-size: 20px; } }
.pdx-about h2.magic-text {
  margin: 0;
  max-width: none;
  text-align: center;
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  color: #fff;                 /* без JS / при «уменьшить движение» — обычный белый текст */
}
@media (min-width: 1024px) { .pdx-about h2.magic-text { font-size: 40px; } }
.pdx-about.is-magic h2.magic-text { color: rgba(255,255,255,.2); }
.pdx-about .magic-word { position: relative; display: inline-block; }
.pdx-about .magic-word::after {   /* белая копия слова — только визуально, в тексте страницы слово одно */
  content: attr(data-w);
  position: absolute;
  left: 0; top: 0;
  color: #fff;
  opacity: var(--o, 0);
  transition: opacity .15s linear;
  pointer-events: none;
}

/* ---------- 5c. Карточки услуг (названия из разделов услуг) ---------- */
.pdx-svc { position: relative; z-index: 10; margin-bottom: 60px; overflow: hidden; } /* лента карточек уходит за правый край, но без горизонтальной прокрутки страницы */
@media (min-width: 768px) { .pdx-svc { margin-bottom: 180px; } }
.pdx-svc .swiperServic { overflow: visible; }
.pdx-svc .serv__elem {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 130px;
  padding: 20px;
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(29,28,28,.8);
  color: #fff;
  text-decoration: none;
}
.pdx-svc .slide_top-bg {
  position: absolute; left: 0; bottom: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(rgba(29,28,28,.8) 0%, rgba(0,170,214,.8) 100%);
  transition: .3s linear;
}
.pdx-svc .arrow_top { position: absolute; top: 16px; right: 16px; z-index: 10; width: 14px; height: 14px; transition: .3s linear; }
.pdx-svc .arrow_top svg { display: block; width: 100%; height: 100%; }
.pdx-svc .arrow_top-bg {
  position: absolute; top: 0; right: 0;
  width: 60px; height: 60px;
  background: url(/catalog/view/theme/default/img/nd/svc-arr2.svg) center / cover no-repeat;
  transition: .3s linear .1s;
}
.pdx-svc .service_image-wrap { position: relative; z-index: 5; display: block; width: 44px; height: 44px; }
.pdx-svc .icon_norm, .pdx-svc .icon_hover { display: block; width: 100%; height: 100%; transition: .3s linear; }
.pdx-svc .icon_hover { position: absolute; left: 0; top: 0; opacity: 0; }
.pdx-svc .service_text-wrap { position: relative; display: block; margin-top: 16px; }
.pdx-svc .service_text-top { display: none; font-size: 14px; line-height: 120%; margin-bottom: 12px; color: rgba(255,255,255,.5); }
.pdx-svc .service_text-title { display: block; font-weight: 500; font-size: 18px; line-height: 120%; color: #fff; }
@media (max-width: 767px) {
  .pdx-svc .container { max-width: 100%; }
  .pdx-svc .swiperServic .swiper-wrapper { display: flex; flex-direction: column; transform: none !important; }
  .pdx-svc .serv__elem-slide { width: 100% !important; }
}
@media (min-width: 768px) {
  .pdx-svc .swiperServic .serv__elem-slide { width: 340px; }
  .pdx-svc .serv__elem { min-height: 360px; padding: 32px; margin-bottom: 0; border-radius: 24px; }
  .pdx-svc .arrow_top { top: 32px; right: 32px; width: 16px; height: 16px; z-index: auto; }
  .pdx-svc .arrow_top-bg { right: -30px; top: -30px; width: 40px; height: 40px; opacity: 0; background-image: url(/catalog/view/theme/default/img/nd/svc-arr.svg); background-size: 40px 40px; }
  .pdx-svc .service_image-wrap { width: 60px; height: 60px; }
  .pdx-svc .service_text-top { display: block; }
  .pdx-svc .service_text-title { font-size: 24px; }
  .pdx-svc .serv__elem:hover .slide_top-bg { bottom: 0; }
  .pdx-svc .serv__elem:hover .arrow_top { right: 26px; top: 26px; }
  .pdx-svc .serv__elem:hover .arrow_top path { fill-opacity: 1; }
  .pdx-svc .serv__elem:hover .icon_norm { opacity: 0; }
  .pdx-svc .serv__elem:hover .icon_hover { opacity: 1; }
  .pdx-svc .serv__elem:hover .arrow_top-bg { width: 100px; height: 100px; background-size: 100px 100px; background-image: url(/catalog/view/theme/default/img/nd/svc-arr2.svg); right: -1px; top: -1px; opacity: 1; }
}
.pdx-svc .service_text-el { display: none; }
@media (min-width: 768px) {
  .pdx-svc .service_text-el { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 16px; line-height: 140%; color: #fff; transition: .3s linear; }
  .pdx-svc .serv__elem:hover .service_text-el,
  .pdx-svc .serv__elem:focus-visible .service_text-el { max-height: 6em; opacity: 1; margin-top: 8px; }
}
.pdx-svc .serv__elem:focus-visible { outline: 2px solid #00aad6; outline-offset: 3px; }

/* ---------- 5d. Отзывы: шапка по центру, рейтинги-вкладки, новые карточки (template/reviews*.html) ---------- */
.comments-new .comments-new__head {
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.comments-new .comments-new__left { align-items: center; max-width: 900px; gap: 12px; }
.comments-new .comments-new__left .title { text-align: center; }
.comments-new .comments-new__left .subtitle { text-align: center; width: auto; max-width: 900px; font-size: 16px; }
.comments-new .comments-new__left .btn-link__clutch,
.comments-new .comments-new__left .btn-link__it { display: none !important; }
.comments-new .comments-new__tabs.pdx-rbadges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
@media (min-width: 1024px) { .comments-new .comments-new__tabs.pdx-rbadges { gap: 16px 50px; } }
.comments-new .pdx-rbadges .pdx-rbadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.comments-new .pdx-rbadges .pdx-rbadge::after,
.comments-new .pdx-rbadges .pdx-rbadge::before { display: none; content: none; }
/* перебиваем старые стили вкладок из шаблонов страниц (opacity .5, рамка у активной) */
.comments-new .pdx-rbadges .pdx-rbadge,
.comments-new .pdx-rbadges .pdx-rbadge.active { opacity: 1 !important; border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.comments-new .pdx-rbadge__logo img { display: block; height: 22px; width: auto; }
.comments-new .pdx-rbadge__pill { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 44px; background: rgba(255,255,255,.06); border: 1px solid transparent; transition: border-color .3s ease, background-color .3s ease; }
.comments-new .pdx-rbadge:hover .pdx-rbadge__pill { background: rgba(255,255,255,.1); }
.comments-new .pdx-rbadge.active .pdx-rbadge__pill { border-color: rgba(0,170,214,.45); }   /* чьи отзывы сейчас показаны */
.comments-new .pdx-rbadge__val { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; line-height: 130%; }
.comments-new .pdx-rbadge__val img { width: 14px; height: 14px; }
.comments-new .pdx-rbadge__total { font-size: 12px; line-height: 130%; }
.comments-new .pdx-rbadge:focus-visible { outline: 2px solid #00aad6; outline-offset: 4px; }
@media (min-width: 768px) {
  .comments-new .pdx-rbadges .pdx-rbadge { flex-direction: row; gap: 16px; }
  .comments-new .pdx-rbadge__logo img { height: 26px; }
  .comments-new .pdx-rbadge__pill { padding: 10px 16px; }
  .comments-new .pdx-rbadge__val { font-size: 16px; gap: 8px; }
  .comments-new .pdx-rbadge__val img { width: 17px; height: 17px; }
  .comments-new .pdx-rbadge__total { font-size: 14px; }
}

/* карточка отзыва — как в макете */
.comments-new .comments__slide.comment-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  height: 370px;
  padding: 24px 20px;
  border-radius: 20px;
  background: rgba(29,28,28,.7);
  border: 0;
}
.comments-new .comment-block .comment-block__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #343434;
}
.comments-new .comment-block .comment-block__top-left { display: flex; align-items: center; gap: 12px; }
.comments-new .comment-block .rating-new__value { font-size: 20px; font-weight: 500; line-height: 1.3; }
.comments-new .comment-block .comment-block__top img { display: block; height: 20px; width: auto; }
.comments-new .comment-block .comment-block__review-text {
  flex: 1 1 auto;
  padding-top: 16px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  max-height: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}
.comments-new .comment-block .comment-block__footer { display: flex; flex-direction: column; gap: 8px; }
.comments-new .comment-block .comment-block__author { font-size: 16px; font-weight: 500; line-height: 1.3; }
.comments-new .comment-block .comment-block__position { font-size: 14px; line-height: 1.3; color: #969a9f; }
@media (min-width: 768px) {
  .comments-new .comments__slide.comment-block { height: 490px; padding: 40px; border-radius: 24px; }
  .comments-new .comment-block .comment-block__top { padding-bottom: 32px; }
  .comments-new .comment-block .comment-block__top-left { gap: 16px; }
  .comments-new .comment-block .rating-new__value { font-size: 24px; }
  .comments-new .comment-block .comment-block__top img { height: 22px; }
  .comments-new .comment-block .comment-block__review-text { padding-top: 32px; font-size: 18px; line-height: 1.6; }
  .comments-new .comment-block .comment-block__author { font-size: 20px; }
  .comments-new .comment-block .comment-block__position { font-size: 16px; }
}

/* лента отзывов: карточки фиксированной ширины, уходят за правый край экрана (как в макете) */
.comments-new { overflow-x: clip; }
.comments-new .comments__block .swiper { overflow: visible; padding: 0; }
.comments-new .comments__slide.comment-block { width: 286px; border-radius: 16px; background: rgba(29,28,28,.7); } /* как плитки логотипов */
.comments-new .comments__block--3 .comment-block__top img { height: 22px; }
.comments-new .comments-bullets3 { display: none; }
@media (min-width: 768px) {
  .comments-new .comments__slide.comment-block { width: 460px; border-radius: 16px; }
}
@media (max-width: 767px) { .comments-new .comments__block .swiper { margin-left: 20px; } }

/* пустой HTML-модуль в конце страницы (<p><br></p>) не должен давать лишний отступ перед футером */
.module-html:has(> .description > p:only-child > br:only-child) { display: none; }
/* отзывы без подложки (на всех страницах): секция как обычный блок, отступы как у остальных секций */
section.comments-new { background: none !important; border-radius: 0 !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 0 !important; }
section.comments-new::after, section.comments-new::before { content: none !important; display: none !important; }

/* ---------- Кейсы (главная, портфолио): расстояние между кейсами −33% ---------- */
.works-grid .work-card.work-card:nth-child(odd) { margin-bottom: 107px !important; }
.works-grid .work-card.work-card:nth-child(even),
.works-grid .work-card.work-card:nth-child(2) { margin-top: 107px !important; }
@media screen and (max-width: 1200px) {
  .works-grid .work-card.work-card:nth-child(odd) { margin-bottom: 51px !important; }
  .works-grid .work-card.work-card:nth-child(even),
  .works-grid .work-card.work-card:nth-child(2) { margin-top: 51px !important; }
}
@media screen and (max-width: 1024px) {
  .works-grid .work-card.work-card:nth-child(odd) { margin-bottom: 46px !important; }
  .works-grid .work-card.work-card:nth-child(even),
  .works-grid .work-card.work-card:nth-child(2) { margin-top: 46px !important; }
}
@media screen and (max-width: 768px) {
  .works-grid .work-card.work-card:nth-child(odd) { margin-bottom: 58px !important; }
  .works-grid .work-card.work-card:nth-child(even),
  .works-grid .work-card.work-card:nth-child(2) { margin-top: 58px !important; }
}
@media screen and (max-width: 580px) {
  .works-grid .work-card.work-card:nth-child(odd),
  .works-grid .work-card.work-card:nth-child(even) { margin-bottom: 20px !important; }
  .works-grid .work-card.work-card:nth-child(even),
  .works-grid .work-card.work-card:nth-child(2) { margin-top: 0 !important; }
}
/* 404: без лишнего нижнего отступа (240px) — расстояние до футера задаёт общий отступ 120/80px */
.banner .error-page { margin-bottom: 0 !important; }

/* ---------- Кнопка «Зв’язатися з нами» в шапке: shiny grain (свой код по мотивам Framer «Shiny Grain Button», цвета Promodex) ----------
   По краю бежит светлая дуга, за ней внутри кнопки тянется голубая заливка с точечным «зерном».
   При наведении дуга и заливка ярче, снизу поднимается свечение. Угол дуги — переменная --pdx-a (одна на рамку и заливку). */
@property --pdx-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes pdxSweep { to { --pdx-a: 360deg; } }
.color-border.color-btn {
  --border-size: 1.5px;
  --pdx-a: 0deg;
  background: rgba(0,217,255,.18);
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
  isolation: isolate;
  animation: pdxSweep 3.6s linear infinite;
}
/* рамка: светлая дуга */
.color-border.color-btn::before {
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--pdx-a), transparent 0deg, transparent 230deg, rgba(1,92,219,.85) 290deg, #00d9ff 335deg, #e9fbff 348deg, rgba(0,217,255,.4) 356deg, transparent 360deg);
  animation: none;
  transform: none;
}
/* рамка при наведении: дуга шире */
.color-border.color-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--pdx-a), transparent 0deg, transparent 150deg, rgba(1,92,219,.9) 230deg, #01abd6 300deg, #00d9ff 340deg, #ffffff 356deg, transparent 360deg);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.color-border.color-btn:hover::after,
.color-border.color-btn:focus-within::after { opacity: 1; }
.color-border.color-btn:hover { box-shadow: 0 10px 40px rgba(0,217,255,.22), 0 6px 24px rgba(1,92,219,.25); }

.color-border.color-btn .color-border__content {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  background: #050506;
  font-size: 14px;
}
/* голубая заливка, идущая за дугой + блик сверху + свечение снизу (при наведении) */
.color-border.color-btn .color-border__content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(70% 90% at 50% 125%, rgba(0,217,255,var(--pdx-glow,0)) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 45%),
    conic-gradient(from var(--pdx-a), transparent 0deg, transparent 200deg, rgba(1,92,219,.25) 265deg, rgba(1,171,214,.5) 315deg, rgba(0,217,255,.62) 338deg, rgba(0,217,255,.25) 352deg, transparent 360deg);
  opacity: .9;
  transition: opacity .45s ease, --pdx-glow .45s ease;
  pointer-events: none;
}
/* «зерно»: точки видны только там, где заливка */
.color-border.color-btn .color-border__content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(rgba(190,245,255,.75) .7px, transparent 1px) 0 0 / 5px 5px;
  -webkit-mask-image: conic-gradient(from var(--pdx-a), transparent 0deg, transparent 240deg, rgba(0,0,0,.45) 295deg, #000 338deg, rgba(0,0,0,.3) 352deg, transparent 360deg);
  mask-image: conic-gradient(from var(--pdx-a), transparent 0deg, transparent 240deg, rgba(0,0,0,.45) 295deg, #000 338deg, rgba(0,0,0,.3) 352deg, transparent 360deg);
  opacity: .7;
  pointer-events: none;
}
@property --pdx-glow { syntax: '<number>'; inherits: true; initial-value: 0; }
.color-border.color-btn:hover .color-border__content::before,
.color-border.color-btn .color-border__content:focus-visible::before { opacity: 1; --pdx-glow: .5; }
.color-border.color-btn .color-border__content:focus-visible { outline: 2px solid #00d9ff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .color-border.color-btn { animation: none; --pdx-a: 90deg; }
}

/* Карточки услуг на главной (>=768px): липкая горизонтальная лента — ряд едет влево вместе с прокруткой страницы (как на addifico.com).
   Высоту секции и сдвиг ряда считает pdx-nd.js (setupServicesSlider). overflow: clip вместо hidden — иначе не работает sticky. */
.pdx-svc.pdx-svc--hscroll { overflow: visible; overflow-x: clip; }
.pdx-svc.pdx-svc--hscroll > .container { position: sticky; top: var(--pdx-svc-top, 140px); }
.pdx-svc.pdx-svc--hscroll .swiperServic .swiper-wrapper { display: flex; gap: 16px; will-change: transform; transition: none; }
.pdx-svc.pdx-svc--hscroll .swiperServic .serv__elem-slide { flex-shrink: 0; margin: 0 !important; }
/* заголовок «Послуги» — прилипает вместе с карточками (как «Services» на addifico.com) */
.pdx-svc .pdx-svc__title { margin: 0 0 24px; text-align: left; }
@media (min-width: 768px) { .pdx-svc .pdx-svc__title { margin-bottom: 40px; } }

/* ==========================================================================
   Услуги раздела «Галузі» (template/service/service_industry.twig): новый вид двух блоков — «Розробляємо бізнес-рішення під ключ» и «Метод роботи», контент тот же
   ========================================================================== */
/* «Розробляємо бізнес-рішення під ключ»: 5 колонок 01–05, светящиеся точки на стыках, градиентный фон */
.pdx-industry .dev-work { padding: 1px 0 40px; background: url(/catalog/view/theme/default/img/nd/ind/fon_m.webp) center bottom / contain no-repeat; }
.pdx-industry .dev-work .section__header { max-width: 100%; border-top: 1px solid #464646; padding-top: 60px; margin-bottom: 24px; }
.pdx-industry .dev-block-wrap { display: block; }
.pdx-industry .dev-block_el { position: relative; width: 100%; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.pdx-industry .dev-block_top { margin: 0 0 12px; font-size: 14px; line-height: 140%; color: rgba(255,255,255,.4); }
.pdx-industry .dev-block_title { margin: 0 0 12px; font-size: 20px; font-weight: 400; line-height: 140%; color: #fff; }
.pdx-industry .dev-block_text { margin: 0; font-size: 16px; line-height: 140%; color: rgba(255,255,255,.8); }
.pdx-industry .btn_wr { margin-top: 40px; text-align: center; }
@media (min-width: 768px) {
  .pdx-industry .dev-work { padding: 10px 0 60px; background-image: url(/catalog/view/theme/default/img/nd/ind/fon_t.webp); background-size: cover; }
  .pdx-industry .dev-work .section__header { padding-top: 80px; margin-bottom: 60px; }
  .pdx-industry .dev-block-wrap { display: flex; align-items: stretch; }
  .pdx-industry .dev-block_el { width: 20%; padding: 0 24px 24px; border-right: 1px solid rgba(255,255,255,.1); }
  .pdx-industry .dev-block_el:last-child { border-right: 0; }
  .pdx-industry .dev-block_el::before { content: ""; position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; border-radius: 50%; background: #00aad6; box-shadow: 0 0 4px 8px rgba(0,170,214,.45); z-index: 2; }
  .pdx-industry .dev-block_el:last-child::before { display: none; }
  .pdx-industry .dev-block_top { margin-bottom: 40px; }
  .pdx-industry .dev-block_title { font-size: 24px; margin-bottom: 16px; }
}

/* «Метод роботи»: 6 карточек, круглая голубая иконка сверху */
.pdx-industry .dev-metod { padding: 1px 0 40px; }
.pdx-industry .metod-block-wrap { padding-top: 12px; }
.pdx-industry .metod-block_el { position: relative; width: 100%; margin-top: 40px; padding: 44px 12px 24px; text-align: center; border-radius: 16px; border-bottom: 1px solid rgba(255,255,255,.12); background: linear-gradient(174.48deg, rgba(2,58,72,.2) 62.79%, rgba(2,58,72,.8) 100.01%); }
.pdx-industry .metod-block_img { position: absolute; top: -30px; left: 50%; margin-left: -30px; width: 60px; height: 60px; border-radius: 60px; background: #00aad6; display: flex; align-items: center; justify-content: center; }
.pdx-industry .metod-block_img img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.pdx-industry .metod-block_text { margin: 0; font-size: 16px; line-height: 140%; color: #fff; text-align: center; }
@media (min-width: 768px) {
  .pdx-industry .dev-metod { padding-bottom: 60px; }
  .pdx-industry .metod-block-wrap { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 16px; padding-top: 0; }
  .pdx-industry .metod-block_el { width: calc(33.33% - 11px); margin-top: 60px; padding: 52px 24px 24px; }
}


/* ===== Услуги раздела «Технології розробки» (template/service/service_tech.twig): новый вид двух блоков, контент тот же ===== */
/* «Розробляємо бізнес-рішення під ключ»: заголовок в первой ячейке, 01–05 в сетке по 3, неоновые номера */
.pdx-tech .dev-solut { padding: 1px 0 60px; background: url(/catalog/view/theme/default/img/nd/tech/fon_fm.webp) center bottom / contain no-repeat; }
.pdx-tech .dev-solut-wrap { display: block; }
.pdx-tech .dev-solut_el { position: relative; width: 100%; margin: 24px 0; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.16); }
.pdx-tech .dev-solut_el::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 55px; background: linear-gradient(0deg, rgba(0,89,112,0) 0%, #00aad6 100%); }
.pdx-tech .dev-solut_el:first-child { border-left: 0; padding-left: 0; }
.pdx-tech .dev-solut_el:first-child::before { display: none; }
.pdx-tech .dev-solut_el .title { margin: 0; text-align: left; }
.pdx-tech .dev-solut_icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 52px; margin-bottom: 24px; padding: 10px; border-radius: 16px; box-shadow: inset -3px -1px 12.8px 0 #00aad6; background: linear-gradient(180deg, rgba(0,35,44,.2) 0%, rgba(0,170,214,.2) 100%); color: #00aad6; font-size: 16px; font-weight: 400; line-height: 120%; }
.pdx-tech .dev-solut_title { margin: 0 0 12px; font-size: 20px; font-weight: 500; line-height: 120%; color: #fff; }
.pdx-tech .dev-solut_text { margin: 0; font-size: 16px; line-height: 140%; color: rgba(255,255,255,.8); }
@media (min-width: 768px) {
  .pdx-tech .dev-solut { padding: 60px 0; background-image: url(/catalog/view/theme/default/img/nd/tech/fon_fd.webp); background-size: cover; }
  .pdx-tech .dev-solut-wrap { display: flex; flex-wrap: wrap; align-items: stretch; }
  .pdx-tech .dev-solut_el { width: 33.33%; margin: 0 0 50px; padding: 0 24px 24px; }
  .pdx-tech .dev-solut_el:first-child { padding: 0 24px 24px 0; }
  .pdx-tech .dev-solut_icon { width: 60px; height: 60px; }
  .pdx-tech .dev-solut_title { font-size: 24px; margin-bottom: 16px; }
}
/* «Метод роботи»: карточки с тонкой рамкой-градиентом, контурные иконки слева, нечётные карточки с бирюзовым низом */
.pdx-tech .dev-met { padding: 60px 0 40px; }
.pdx-tech .met-block-wrap { display: block; }
.pdx-tech .met-block_el-wr { position: relative; width: 100%; margin-bottom: 16px; }
.pdx-tech .met-block_el-wr::before { content: ""; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 16px; background: linear-gradient(77.56deg, rgba(255,255,255,0) 18.07%, rgba(255,255,255,.1) 81.93%); }
.pdx-tech .met-block_el-wr::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 16px; background: #060606; z-index: 1; }
.pdx-tech .met-block_el { position: relative; z-index: 2; height: 100%; width: 100%; margin: 0; padding: 16px; border-radius: 16px; text-align: left; }
.pdx-tech .met-block_el-wr:nth-child(2n+1) .met-block_el { background: linear-gradient(174.48deg, rgba(2,58,72,.2) 62.79%, rgba(2,58,72,.8) 100.01%); }
.pdx-tech .met-block_img { display: flex; align-items: center; width: 44px; height: 44px; margin-bottom: 12px; }
.pdx-tech .met-block_img img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.pdx-tech .met-block_text { margin: 0; font-size: 16px; font-weight: 400; line-height: 140%; color: #fff; text-align: left; }
@media (min-width: 768px) {
  .pdx-tech .dev-met { padding: 80px 0 60px; }
  .pdx-tech .met-block-wrap { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 16px; }
  .pdx-tech .met-block_el-wr { width: calc(33.33% - 11px); }
  .pdx-tech .met-block_el { padding: 32px; }
  .pdx-tech .met-block_img { width: 52px; height: 52px; margin-bottom: 16px; }
}
/* отрасли и технологии: без разделительной линии под текстовым блоком (линия была от старого дизайна услуг) */
.pdx-tech .you-need .container, .pdx-industry .you-need .container { border-bottom: 0; }
/* отрасли и технологии: фон блоков сливается с цветом страницы */
.pdx-tech .dev-solut, .pdx-industry .dev-work { overflow: hidden; background-color: #060606; background-blend-mode: lighten; }

/* технологии: блок «Promodex - ваш надійний партнер» — галочки в 2 колонки и плашка «Хочете знати вартість?» (макет promoservic3, блок dev-check) */
.pdx-tech .dev-check { padding: 40px 0 60px; }
.pdx-tech .dev-check .section__header { margin-bottom: 32px; }
.pdx-tech .dev-ch-wrap { display: block; }
.pdx-tech .dev-ch-el { display: flex; align-items: center; column-gap: 12px; width: 100%; margin-bottom: 12px; }
.pdx-tech .dev-ch-icon { flex: 0 0 auto; width: 35px; height: 35px; }
.pdx-tech .dev-ch-icon img { display: block; width: 35px; height: 35px; }
.pdx-tech .dev-ch-text { margin: 0; font-size: 16px; font-weight: 500; line-height: 130%; color: #fff; text-align: left; }
.pdx-tech .dev-price-wrap { margin-top: 40px; padding: 1px; border-radius: 16px; background: linear-gradient(77.56deg, rgba(255,255,255,.1) 18.07%, rgba(255,255,255,0) 81.93%); }
.pdx-tech .dev-price-ins { display: block; padding: 24px; border-radius: 16px; background: #060606 linear-gradient(269.91deg, rgba(0,94,118,.2) 0.08%, rgba(0,58,73,.8) 99.92%); }
.pdx-tech .dev-price-text { flex: 1 1 auto; }
.pdx-tech .dev-pr-title { margin: 0 0 12px; font-size: 26px; font-weight: 500; line-height: 110%; color: #fff; text-align: center; }
.pdx-tech .dev-pr-text { margin: 0; font-size: 14px; font-weight: 400; line-height: 130%; color: #fff; text-align: center; }
.pdx-tech .dev-price-btn-wr { margin: 0; text-align: center; }
.pdx-tech .dev-price-btn { display: inline-block; min-width: 220px; height: 60px; margin: 24px auto 0; padding: 20px 32px; border: 0; border-radius: 30px; background: #00aad6; color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer; transition: .2s linear; }
.pdx-tech .dev-price-btn:hover { background: linear-gradient(90.08deg, #215aee 0.06%, #00aad6 102.4%); color: #fff; }
@media (min-width: 768px) {
  .pdx-tech .dev-check { padding: 60px 0 80px; }
  .pdx-tech .dev-check .section__header { margin-bottom: 48px; }
  .pdx-tech .dev-ch-wrap { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 24px; }
  .pdx-tech .dev-ch-el { width: calc(50% - 12px); column-gap: 16px; margin-bottom: 32px; }
  .pdx-tech .dev-ch-text { font-size: 20px; }
  .pdx-tech .dev-price-wrap { margin-top: 28px; border-radius: 20px; }
  .pdx-tech .dev-price-ins { display: flex; align-items: center; column-gap: 24px; padding: 34px 60px; border-radius: 20px; }
  .pdx-tech .dev-pr-title { font-size: 40px; text-align: left; }
  .pdx-tech .dev-pr-text { font-size: 20px; text-align: left; }
  .pdx-tech .dev-price-btn { margin: 20px auto; }
}
/* технологии: одна разделительная линия над блоком «Розробляємо бізнес-рішення» — как в макете (ширина контейнера) */
.pdx-tech .dev-solut-wrap { border-top: 1px solid #464646; padding-top: 36px; }
@media (min-width: 768px) { .pdx-tech .dev-solut { padding-top: 10px; } .pdx-tech .dev-solut-wrap { padding-top: 80px; } }
/* Курсор-рука на всём, что кликается: в style.css у span/p/h1–h5/li стоит cursor: default, и текст внутри ссылок и кнопок показывал стрелку */
a span, a p, a h1, a h2, a h3, a h4, a h5, a li, button span, button p, label span, [role="button"] span, [role="link"] span { cursor: inherit; }
a[href], button, [role="button"], [role="link"] { cursor: pointer; }
.goto-wrapper .goto_btn-ins, .serv__elem, .serv__elem *, .pdx-nd-footer .swap-link * { cursor: pointer; }
/* Рейтинги в первом экране — кликабельные: ведут к отзывам с нужной вкладкой; слой с фоновым свечением (.back2) лежал поверх них */
.back1, .back2 { pointer-events: none; }   /* декоративное свечение — не перехватывает наведение и клики */
.pdx-hero [data-pdx-goto], .pdx-hero [data-pdx-goto] * { cursor: pointer; }
.pdx-hero .clutch-bott-block { border: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease; }
.pdx-hero [data-pdx-goto]:hover .clutch-bott-block, .pdx-hero [data-pdx-goto]:focus-visible .clutch-bott-block { border-color: rgba(0,170,214,.6); }
.pdx-hero [data-pdx-goto]:focus-visible { outline: none; }
/* Выпадающее меню «Послуги» в шапке — расположение как в макете promoservic3 (плотнее: строки без растяжения, иконки технологий 44px) */
.header__drop-down-menu .services-lists-block { align-items: start; }
.header__drop-down-menu .services-lists-container { gap: 2px 120px !important; height: auto !important; }
.header__drop-down-menu .services-list-wrapper { height: auto; min-height: 0; align-self: start; }
.header__drop-down-menu .services-lists-technologies a { gap: 8px; }
.header__drop-down-menu .services-lists-technologies a img { width: 44px; height: 44px; object-fit: contain; }
@media (min-width: 768px) { .header__drop-down-menu .services-list-title { font-size: 14px; font-weight: 500; line-height: 100%; } }
/* технологии: кнопка «Прорахунок проєкту» — голубой чуть глубже (#007FA3), контраст с белым текстом 4,6 (норма 4,5) */
.pdx-tech .dev-price-btn { background: #007fa3; }
/* Свечение фона (.back, .back1, .back2) — те же картинки, уменьшенные в 10 раз (браузер растягивает размытый градиент без видимой разницы).
   Лёгкий файл (~2 КБ) Chrome не считает «главным элементом» страницы (LCP): раньше им было декоративное свечение */
.back { background-image: url(../img/glow-3.webp); }
.back1 { background-image: url(../img/glow-1.webp); }
.back2 { background-image: url(../img/glow-2.webp); }
/* «Рябь» (анимированное зерно поверх сайта) убрана со всего проекта — по просьбе Алекса, 22.10 */
.grain, .comments-new::after { display: none !important; }

/* ---------- 23.10 правки мобильной версии (Алекс) ---------- */
@media (max-width: 767.98px) {
  /* Главная: слоган крупнее (как на планшете) */
  .pdx-hero .video-text-bott-pos { width: 320px; }
  .pdx-hero .video-text-bott-type  { font-size: 30px; letter-spacing: 1.5px; }
  .pdx-hero .video-text-bott-midd  { font-size: 15px; letter-spacing: 4.6px; }
  .pdx-hero .video-text-bott-type2 { font-size: 25px; }
  /* Главная: рейтинги — три равные колонки, каждая по центру своей колонки (Google ровно посередине) */
  .pdx-hero .clutch-bott-pos { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px; }
  .pdx-hero .clutch-bott-el { display: flex; flex-direction: column; align-items: center; }
  /* Главная: отступ от рейтингов до «Про нас» в 2 раза меньше (было 186px) */
  #scroll-to.pdx-about.is-magic { padding-top: 7px; }
  /* Главная: без свечения поверх первого экрана */
  .app:has(.pdx-hero) .back2 { display: none; }

  /* Отзывы: IT Rating / Google / Clutch в три колонки — логотип, звезда с оценкой, число отзывов */
  .comments-new .comments-new__tabs.pdx-rbadges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; width: 100%; }
  .comments-new .pdx-rbadges .pdx-rbadge { gap: 12px; }
  .comments-new .pdx-rbadge__logo { height: 26px; display: flex; align-items: center; }
  .comments-new .pdx-rbadge__logo img { height: 24px; }
  .comments-new .pdx-rbadge__pill { flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
  .comments-new .pdx-rbadge:hover .pdx-rbadge__pill { background: none; }
  .comments-new .pdx-rbadge__val { flex-direction: row-reverse; gap: 8px; font-size: 18px; font-weight: 500; }
  .comments-new .pdx-rbadge__val img { width: 20px; height: 20px; }
  .comments-new .pdx-rbadge__total { font-size: 14px; color: rgba(255,255,255,.85); }
  .comments-new .pdx-rbadge.active .pdx-rbadge__total { color: #00aad6; }   /* чьи отзывы сейчас показаны */

  /* Портфолио: раскрытый список категорий — на всю ширину экрана, без полей по бокам */
  /* родитель списка (fixed, overflow:hidden) сидит в контейнере с полями 20px — растягиваем его на весь экран */
  .work-tab .work-tab__header { left: calc(50% - 50vw); right: auto; width: 100vw; max-width: none; padding-left: 0; padding-right: 0; box-sizing: border-box; }
}
/* Отзывы: точки под лентой — видно 5 штук вокруг текущей (иначе 24 точки сжимаются в ноль), см. pdx-nd.js */
.comments-bullets .swiper-pagination-bullet,
.comments-bullets2 .swiper-pagination-bullet { flex-shrink: 0; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #3a3a42 !important; opacity: 1; }
/* текущая — голубая точка в кольце (фирменный цвет) */
.comments-new .comments-bullets .swiper-pagination-bullet-active,
.comments-new .comments-bullets2 .swiper-pagination-bullet-active,
.comments-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 8px !important; height: 8px !important; background: #3fb6e0 !important; }
.comments-new .comments-bullets .swiper-pagination-bullet-active::after,
.comments-new .comments-bullets2 .swiper-pagination-bullet-active::after,
.comments-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::after { width: 20px !important; height: 20px !important; border: 2px solid #2b7fe6 !important; border-radius: 50% !important; box-sizing: border-box; }
.comments-bullets .swiper-pagination-bullet.pdx-far,
.comments-bullets2 .swiper-pagination-bullet.pdx-far { display: none; }