/* =========================================================
   SYSLAB MOBILE PERFORMANCE LAYER V3
   Подключается отдельным media-link после style.css.
   Цель: лёгкие мобильные анимации без blur, sticky hover и лишних теней.
   ========================================================= */

:root {
  --syslab-reveal-y: 14px;
  --syslab-reveal-duration: .44s;
  --syslab-reveal-ease: cubic-bezier(.22, .9, .28, 1);
  --syslab-mobile-card-bg: linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.032));
  --syslab-mobile-card-shadow: 0 12px 26px rgba(0,0,0,0.17), inset 0 1px 0 rgba(255,255,255,0.032);
  --syslab-mobile-card-shadow-soft: 0 10px 22px rgba(0,0,0,0.145), inset 0 1px 0 rgba(255,255,255,0.028);
  --syslab-carousel-edge: 24px;
  --syslab-carousel-gap: 12px;
}

html,
body {
  overflow-x: hidden !important;
  scroll-behavior: auto !important;
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

.dynamic-bg,
.scroll-ambient,
.bg-grid,
.glow,
.glow-1,
.glow-2,
.glow-3,
body::before,
body::after,
.section::before,
.section::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

.site-header,
.main-nav,
.card,
.service-card,
.blog-card,
.price-card,
.faq-item,
.step,
.content-card,
.contact-box,
.hero-image-card,
.glass-card,
.service-item,
.btn,
.mobile-floating-contacts,
.mobile-floating-contact {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: rgba(5, 11, 20, 0.96) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
}

body.header-scrolled .site-header {
  background: rgba(5, 11, 20, 0.98) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
}

.section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.center-video-inner,
.main-video-inner {
  padding-top: 104px !important;
  padding-bottom: 62px !important;
}

.center-video-hero,
.main-video-hero {
  min-height: 100svh !important;
  contain: layout paint !important;
}

.page-hero {
  padding-top: 116px !important;
}

.center-video-bg,
.main-video-bg {
  inset: -4px !important;
  width: calc(100% + 8px) !important;
  height: calc(100% + 8px) !important;
  opacity: .72 !important;
  transform: translateZ(0) scale(1.01) !important;
  filter: none !important;
  will-change: auto !important;
}

.center-video-overlay,
.main-video-shade,
.hero-video-overlay {
  background: linear-gradient(180deg, rgba(5,11,20,.48) 0%, rgba(5,11,20,.78) 60%, rgba(5,11,20,.94) 100%) !important;
}

.card,
.service-card,
.blog-card,
.price-card,
.step,
.content-card,
.contact-box,
.hero-image-card,
.glass-card,
.service-item {
  background: var(--syslab-mobile-card-bg) !important;
  box-shadow: var(--syslab-mobile-card-shadow) !important;
  outline: none !important;
}

.faq-item {
  background: var(--syslab-mobile-card-bg) !important;
  box-shadow: var(--syslab-mobile-card-shadow-soft) !important;
  outline: none !important;
  contain: paint !important;
}

.card:hover,
.card:active,
.service-card:hover,
.service-card:active,
.blog-card:hover,
.blog-card:active,
.price-card:hover,
.price-card:active,
.step:hover,
.step:active,
.content-card:hover,
.content-card:active,
.contact-box:hover,
.contact-box:active,
.hero-image-card:hover,
.hero-image-card:active,
.glass-card:hover,
.glass-card:active,
.service-item:hover,
.service-item:active,
.faq-item:hover,
.faq-item:active,
.faq-item:focus,
.faq-item:focus-within {
  transform: translate3d(0,0,0) !important;
  box-shadow: var(--syslab-mobile-card-shadow) !important;
  filter: none !important;
  -webkit-filter: none !important;
  outline: none !important;
}

.faq-item:hover,
.faq-item:active,
.faq-item:focus,
.faq-item:focus-within {
  box-shadow: var(--syslab-mobile-card-shadow-soft) !important;
}

.card::before,
.card::after,
.service-card::before,
.service-card::after,
.blog-card::before,
.blog-card::after,
.price-card::before,
.price-card::after,
.step::before,
.step::after,
.content-card::before,
.content-card::after,
.service-item::before,
.service-item::after,
.problems .card::before,
.problems .card::after,
.formats .price-card::before,
.formats .price-card::after {
  pointer-events: none !important;
}

.problems .card::before,
.problems .card::after,
.problems .card:hover::before,
.problems .card:hover::after,
.problems .card:active::before,
.problems .card:active::after,
.formats .price-card::before,
.formats .price-card::after,
.formats .price-card:hover::before,
.formats .price-card:hover::after,
.formats .price-card:active::before,
.formats .price-card:active::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Reveal остаётся, но легче. FAQ-карточки на мобильной видны сразу — без лагов при скролле. */
main .reveal:not(.visible),
.blog-hero .reveal:not(.visible),
.contacts .contact-box.reveal:not(.visible) {
  opacity: 0 !important;
  transform: translate3d(0, var(--syslab-reveal-y), 0) !important;
  transition: opacity var(--syslab-reveal-duration) var(--syslab-reveal-ease), transform var(--syslab-reveal-duration) var(--syslab-reveal-ease) !important;
  will-change: opacity, transform !important;
}

main .reveal.visible,
.blog-hero .reveal.visible,
.contacts .contact-box.reveal.visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: auto !important;
}

main .faq-item.reveal,
main .faq-item.reveal.visible,
main .faq .faq-item.reveal,
main .faq .faq-item.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
  will-change: auto !important;
}

.center-video-hero .reveal,
.center-video-hero .reveal.visible,
.hero .reveal,
.hero .reveal.visible,
.center-video-content.reveal,
.center-video-content.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Mobile menu: only opacity + transform. */
.site-header,
.site-header .container,
.site-header .header-inner {
  overflow: visible !important;
  contain: none !important;
}

.main-nav {
  display: flex !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, -12px, 0) scaleY(.965) !important;
  transform-origin: top center !important;
  clip-path: none !important;
  max-height: none !important;
  transition: transform .24s cubic-bezier(.22, .9, .26, 1), opacity .2s ease, visibility 0s linear .24s !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
}

.main-nav.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scaleY(1) !important;
  transition: transform .24s cubic-bezier(.22, .9, .26, 1), opacity .2s ease, visibility 0s linear 0s !important;
}

.main-nav a,
.main-nav.is-open a {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

/* Mobile carousels: мягкая прокрутка без анимации самих карточек. */
.syslab-mobile-carousel-dots {
  display: none !important;
}

.blog-preview,
.formats {
  overflow-x: clip !important;
}

.blog-preview .container,
.formats .container {
  width: min(560px, calc(100% - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

.blog-preview .section-head,
.formats .section-head {
  max-width: 100% !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-bottom: 28px !important;
  text-align: center !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel,
.formats .pricing-grid.is-syslab-mobile-carousel {
  box-sizing: border-box !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: var(--syslab-carousel-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 2px var(--syslab-carousel-edge) 46px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: var(--syslab-carousel-edge) !important;
  scroll-padding-right: var(--syslab-carousel-edge) !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  touch-action: pan-x pan-y !important;
  contain: none !important;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%) !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel::-webkit-scrollbar,
.formats .pricing-grid.is-syslab-mobile-carousel::-webkit-scrollbar {
  display: none !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card {
  box-sizing: border-box !important;
  flex: 0 0 calc(100% - 48px) !important;
  width: calc(100% - 48px) !important;
  min-width: calc(100% - 48px) !important;
  max-width: calc(100% - 48px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  transform: translate3d(0, 0, 0) !important;
  box-shadow: var(--syslab-shadow-carousel-mobile) !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card > a,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card > a {
  display: flex !important;
  min-height: 258px !important;
  flex-direction: column !important;
  padding: 24px !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card .card-cta {
  margin-top: auto !important;
}

.formats .pricing-grid.is-syslab-mobile-carousel .price-card {
  padding: 24px !important;
}

.formats .pricing-grid.is-syslab-mobile-carousel .price-card ul {
  margin-top: 14px !important;
}

.syslab-mobile-carousel-dots.is-enabled {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  height: 24px !important;
  line-height: 0 !important;
  margin: -22px 0 0 !important;
}

.syslab-mobile-carousel-dot,
.syslab-mobile-carousel-dot.is-active,
.syslab-mobile-carousel-dot[aria-current="true"] {
  appearance: none !important;
  position: relative !important;
  display: block !important;
  flex: 0 0 8px !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(94,224,255,.24) !important;
  opacity: .58 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: scale(.95) !important;
  cursor: pointer !important;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.syslab-mobile-carousel-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: var(--accent, #5ee0ff) !important;
  opacity: 0 !important;
  transform: scale(.66) !important;
  transition: transform .18s ease, opacity .18s ease !important;
}

.syslab-mobile-carousel-dot.is-active,
.syslab-mobile-carousel-dot[aria-current="true"] {
  background: rgba(94,224,255,.32) !important;
  opacity: 1 !important;
  box-shadow: 0 0 10px rgba(94,224,255,.22) !important;
  transform: scale(1.15) !important;
}

.syslab-mobile-carousel-dot.is-active::after,
.syslab-mobile-carousel-dot[aria-current="true"]::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.blog-preview .center-actions {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  overflow: visible !important;
  contain: none !important;
  padding-top: 2px !important;
  padding-bottom: 8px !important;
}

.blog-preview .center-actions .btn {
  width: auto !important;
  min-width: 196px !important;
  max-width: min(100%, 280px) !important;
}

footer .container,
footer .footer-inner,
.site-footer .container,
.site-footer .footer-inner {
  width: calc(100% - 32px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  main .reveal,
  main .reveal.visible,
  .blog-hero .reveal,
  .blog-hero .reveal.visible,
  .contacts .contact-box.reveal,
  .contacts .contact-box.reveal.visible,
  .main-nav,
  .main-nav.is-open,
  .faq-content,
  .faq-item summary::after,
  .syslab-mobile-carousel-dot,
  .syslab-mobile-carousel-dot::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .main-nav:not(.is-open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .main-nav.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .blog-preview .blog-grid.is-syslab-mobile-carousel,
  .formats .pricing-grid.is-syslab-mobile-carousel {
    scroll-behavior: auto !important;
  }
}

/* Extra mobile tap hygiene for static/non-clickable cards. */
.problems .card,
.problems .card:hover,
.problems .card:active,
.problems .card:focus,
.problems .card:focus-within,
.formats .price-card,
.formats .price-card:hover,
.formats .price-card:active,
.formats .price-card:focus,
.formats .price-card:focus-within {
  border-color: var(--border) !important;
  background: var(--syslab-mobile-card-bg) !important;
  box-shadow: var(--syslab-mobile-card-shadow) !important;
  transform: none !important;
}

.formats .price-card.featured,
.formats .price-card.featured:hover,
.formats .price-card.featured:active,
.formats .price-card.featured:focus,
.formats .price-card.featured:focus-within {
  border-color: rgba(94, 224, 255, 0.34) !important;
  background: var(--syslab-glass-bg-featured, linear-gradient(180deg, rgba(94,224,255,0.12), rgba(255,255,255,0.04))) !important;
}

.faq-item:hover::after,
.faq-item:active::after,
.faq-item:focus::after,
.faq-item:focus-within::after {
  opacity: 0 !important;
}

.faq-item[open]::after,
.faq-item.is-opening::after {
  opacity: 1 !important;
}

/* =========================================================
   SYSLAB MOBILE FAQ FIX V4
   FAQ на телефонах без height-анимации и без правого плюса:
   это убирает тормоза и артефакты при закрытии details.
   ========================================================= */
.faq-item,
.faq-item:hover,
.faq-item:active,
.faq-item:focus,
.faq-item:focus-within {
  transform: none !important;
  box-shadow: var(--syslab-mobile-card-shadow-soft) !important;
  transition: border-color .12s ease, background .12s ease !important;
}

.faq-item summary::after {
  content: none !important;
  display: none !important;
}

.faq-item summary::marker {
  content: "" !important;
}

.faq-item summary::-webkit-details-marker {
  display: none !important;
}

.faq-content,
.faq-item[open] .faq-content,
.faq-item.is-opening .faq-content,
.faq-item.is-closing .faq-content,
.faq-item.is-mobile-opening .faq-content,
.faq-item.is-mobile-closing .faq-content {
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

.faq-item:not([open]) .faq-content {
  display: none !important;
}

.faq-item[open]::after,
.faq-item.is-opening::after,
.faq-item:hover::after,
.faq-item:active::after,
.faq-item:focus::after,
.faq-item:focus-within::after {
  opacity: 0 !important;
}

.faq-item[open] {
  border-color: rgba(94, 224, 255, 0.20) !important;
}

/* Статичные плашки на touch не должны получать новую тень при нажатии. */
.card,
.card:hover,
.card:active,
.card:focus,
.card:focus-within,
.step,
.step:hover,
.step:active,
.step:focus,
.step:focus-within,
.content-card,
.content-card:hover,
.content-card:active,
.content-card:focus,
.content-card:focus-within,
.contact-box,
.contact-box:hover,
.contact-box:active,
.contact-box:focus,
.contact-box:focus-within,
.hero-image-card,
.hero-image-card:hover,
.hero-image-card:active,
.hero-image-card:focus,
.hero-image-card:focus-within,
.glass-card,
.glass-card:hover,
.glass-card:active,
.glass-card:focus,
.glass-card:focus-within {
  transform: none !important;
  filter: none !important;
  box-shadow: var(--syslab-mobile-card-shadow) !important;
  outline: none !important;
}

/* =========================================================
   SYSLAB MOBILE CAROUSEL TAP SHADOW FIX V6
   На touch-устройствах карточки в каруселях не должны менять
   тень при долгом нажатии/зажатии пальцем. В прошлых слоях
   active/hover из style.css перебивали обычное состояние и
   визуально "гасили" тень. Здесь все состояния сведены к одному.
   ========================================================= */
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:hover,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:active,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:focus,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:focus-within,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:hover,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:active,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:focus,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:focus-within,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:hover,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:active,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:focus,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:focus-within {
  transform: translate3d(0, 0, 0) !important;
  box-shadow: var(--syslab-shadow-carousel-mobile, var(--syslab-mobile-card-shadow)) !important;
  filter: none !important;
  -webkit-filter: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: border-color .14s ease, background .14s ease !important;
}

.formats .pricing-grid.is-syslab-mobile-carousel .price-card.featured,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card.featured:hover,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card.featured:active,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card.featured:focus,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card.featured:focus-within {
  border-color: rgba(94, 224, 255, 0.34) !important;
  background: var(--syslab-glass-bg-featured, linear-gradient(180deg, rgba(94,224,255,0.12), rgba(255,255,255,0.04))) !important;
  box-shadow: var(--syslab-shadow-carousel-mobile, var(--syslab-mobile-card-shadow)) !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card > a,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card > a:hover,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card > a:active,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card > a:focus,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card > a,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card > a:hover,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card > a:active,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card > a:focus {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card::before,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card::after,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:hover::before,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:hover::after,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:active::before,
.blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:active::after,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card::before,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card::after,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:hover::before,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:hover::after,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:active::before,
.blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:active::after,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card::before,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card::after,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:hover::before,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:hover::after,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:active::before,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card:active::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

/* =========================================================
   SYSLAB MOBILE FAQ FULL-CARD TAP FIX V7
   На телефонах вся закрытая FAQ-плашка является зоной нажатия.
   ========================================================= */
.faq-item > summary {
  box-sizing: border-box !important;
  width: calc(100% + 40px) !important;
  min-height: 58px !important;
  margin: -18px -20px !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.faq-item[open] > summary,
.faq-item.is-opening > summary,
.faq-item.is-closing > summary,
.faq-item.is-mobile-opening > summary,
.faq-item.is-mobile-closing > summary {
  margin: -18px -20px 0 -20px !important;
}

.faq-item > summary:active,
.faq-item > summary:focus,
.faq-item > summary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* =========================================================
   SYSLAB FAQ CARD CLICK / SPACING FIX V9
   Стабильная геометрия FAQ: без растягивания summary отрицательными
   margin, без лишнего пустого отступа внутри открытой плашки.
   Клик по всей карточке обрабатывается в script.js.
   ========================================================= */
.faq-item {
  cursor: pointer !important;
}

.faq-item > summary,
.faq-item[open] > summary,
.faq-item.is-opening > summary,
.faq-item.is-closing > summary,
.faq-item.is-mobile-opening > summary,
.faq-item.is-mobile-closing > summary {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.faq-content {
  padding: 0 !important;
}

.faq-content > *:first-child,
.faq-content > p:first-child {
  margin-top: 8px !important;
}

.faq-content p {
  margin: 8px 0 0 !important;
}

.faq-content > *:last-child {
  margin-bottom: 0 !important;
}

.faq-item > summary:active,
.faq-item > summary:focus,
.faq-item > summary:focus-visible,
.faq-item:active,
.faq-item:focus,
.faq-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* =========================================================
   SYSLAB MOBILE QUICK LINKS POLISH V11
   Делаем блок "Направления помощи" на телефоне визуально аккуратнее:
   ровная сетка 2x4, более мягкие карточки и лучшее выравнивание текста.
   ========================================================= */

.quick-services {
  padding-top: 52px !important;
  padding-bottom: 62px !important;
}

.quick-services .section-head {
  margin-bottom: 26px !important;
}

.quick-services .section-head h2 {
  max-width: 9.5ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.12 !important;
}

.quick-services .section-head p {
  max-width: 32ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.5 !important;
  color: rgba(222, 230, 245, 0.84) !important;
}

.quick-services .quick-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

.quick-services .quick-links a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 12px 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.045) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.14) !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: rgba(242, 246, 255, 0.95) !important;
}

.quick-services .quick-links a:hover,
.quick-services .quick-links a:active,
.quick-services .quick-links a:focus {
  transform: none !important;
  border-color: rgba(94, 224, 255, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 26px rgba(0,0,0,0.16) !important;
}

@media (max-width: 380px) {
  .quick-services .section-head h2 {
    max-width: 10.5ch !important;
    font-size: clamp(2rem, 8vw, 2.35rem) !important;
  }

  .quick-services .quick-links {
    gap: 10px !important;
    width: min(100%, 360px) !important;
  }

  .quick-services .quick-links a {
    min-height: 54px !important;
    padding: 10px 8px !important;
    font-size: 13.5px !important;
  }
}


/* =========================================================
   SYSLAB MOBILE QUICK LINKS TEXT TUNING V12
   Исправляем типографику блока "Направления помощи" на мобильной:
   возвращаем акцентный цвет eyebrow, делаем заголовок светлее,
   шире и визуально ближе к блоку "Типовые ситуации".
   ========================================================= */

.quick-services .section-head .eyebrow {
  color: var(--accent) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
}

.quick-services .section-head h2 {
  max-width: 12.8ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(2.35rem, 7.9vw, 3.2rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: rgba(242, 246, 255, 0.98) !important;
  text-wrap: balance !important;
}

.quick-services .section-head p {
  max-width: 34ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  color: rgba(223, 231, 245, 0.88) !important;
  text-wrap: pretty !important;
}

@media (max-width: 380px) {
  .quick-services .section-head h2 {
    max-width: 13.5ch !important;
    font-size: clamp(2.15rem, 8vw, 2.8rem) !important;
  }

  .quick-services .section-head p {
    max-width: 31ch !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}


/* =========================================================
   SYSLAB MOBILE QUICK LINKS HEADING BALANCE V15
   Приводим блок "Направления помощи" ближе к "Типовые ситуации":
   одинаковый размер eyebrow и более сбалансированный перенос заголовка.
   ========================================================= */

.quick-services .section-head .eyebrow {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  color: var(--accent) !important;
}

.quick-services .section-head h2 {
  max-width: 15.2ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(2.05rem, 7.2vw, 2.85rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.028em !important;
  color: rgba(242, 246, 255, 0.98) !important;
  text-wrap: balance !important;
}

.quick-services .section-head p {
  max-width: 35ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: rgba(223, 231, 245, 0.88) !important;
}

@media (max-width: 380px) {
  .quick-services .section-head h2 {
    max-width: 15.8ch !important;
    font-size: clamp(1.95rem, 7.8vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }

  .quick-services .section-head p {
    max-width: 31ch !important;
    font-size: 15px !important;
    line-height: 1.52 !important;
  }
}


/* =========================================================
   SYSLAB MOBILE TYPOGRAPHY NORMALIZE V16
   Выравниваем мобильную типографику по всему сайту:
   секционные eyebrow / h2 / описания становятся единообразными,
   а блок "Направления помощи" больше не выбивается по размеру.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .section-head .eyebrow,
  .quick-services .section-head .eyebrow,
  .problems .section-head .eyebrow,
  .services .section-head .eyebrow,
  .formats .section-head .eyebrow,
  .blog-preview .section-head .eyebrow,
  .faq .section-head .eyebrow,
  .contacts .section-head .eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
  }

  .section-head h2,
  .quick-services .section-head h2,
  .problems .section-head h2,
  .services .section-head h2,
  .formats .section-head h2,
  .blog-preview .section-head h2,
  .faq .section-head h2,
  .contacts .section-head h2 {
    font-size: clamp(28px, 7.2vw, 38px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section-head p,
  .quick-services .section-head p,
  .problems .section-head p,
  .services .section-head p,
  .formats .section-head p,
  .blog-preview .section-head p,
  .faq .section-head p,
  .contacts .section-head p {
    font-size: 15px !important;
    line-height: 1.56 !important;
    max-width: 34ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .quick-services .section-head {
    margin-bottom: 24px !important;
  }

  .quick-services .section-head h2 {
    max-width: 14.6ch !important;
  }

  .quick-services .section-head p {
    max-width: 33ch !important;
  }
}


/* =========================================================
   SYSLAB MOBILE HERO POSITION TWEAK V17
   Поднимаем верхний текстовый блок на мобильной версии,
   чтобы теги, заголовок и кнопки не были слишком низко.
   ========================================================= */

.center-video-inner,
.main-video-inner {
  padding-top: 88px !important;
  padding-bottom: 54px !important;
}

.center-video-inner > .center-video-content,
.center-video-inner > .center-video-content.reveal,
.center-video-content.reveal.visible {
  transform: translateY(-2.2vh) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero-tech-tags {
  margin-bottom: 12px !important;
}

.center-video-content h1,
.typewriter-title {
  margin-bottom: 16px !important;
}

.center-video-content .hero-text {
  margin-bottom: 24px !important;
}


/* =========================================================
   SYSLAB HERO TRUE CENTER MOBILE V18
   На телефонах первый экран тоже стремится к визуальному центру,
   при этом нижняя кнопка остаётся в зоне видимости.
   ========================================================= */

.center-video-hero,
.main-video-hero {
  padding-top: 0 !important;
}

.center-video-inner,
.main-video-inner {
  min-height: calc(100svh - var(--syslab-header-height)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.center-video-inner > .center-video-content,
.center-video-inner > .center-video-content.reveal,
.center-video-content.reveal.visible {
  transform: translateY(-5.3vh) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero-tech-tags {
  margin-bottom: 12px !important;
}

.center-video-content h1,
.typewriter-title {
  margin-bottom: 14px !important;
}

.center-video-content .hero-text {
  margin-bottom: 22px !important;
}

@media (max-height: 780px) {
  .center-video-inner > .center-video-content,
  .center-video-inner > .center-video-content.reveal,
  .center-video-content.reveal.visible {
    transform: translateY(-3.2vh) !important;
  }
}

/* =========================================================
   SYSLAB MOBILE UX RHYTHM V20
   Финальный мобильный слой после старых overrides: ровные отступы
   между секциями, каруселями, FAQ и контактным блоком.
   ========================================================= */

.section {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

.section-head {
  margin-bottom: 24px !important;
}

.quick-services {
  padding-top: 46px !important;
  padding-bottom: 48px !important;
}

.problems,
.services,
.formats {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.faq {
  padding-top: 48px !important;
  padding-bottom: 34px !important;
}

.blog-preview {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

.contacts {
  padding-top: 42px !important;
  padding-bottom: 64px !important;
}

.page-hero.section {
  padding-top: 112px !important;
  padding-bottom: 34px !important;
}

.page-hero.section + .section,
.blog-article-section {
  padding-top: 38px !important;
}

.blog-article-section {
  padding-bottom: 42px !important;
}

.blog-article-section + .section {
  padding-top: 42px !important;
  padding-bottom: 58px !important;
}

.cards-grid,
.service-card-grid,
.pricing-grid,
.two-col,
.article-layout {
  gap: 14px !important;
}

.faq-list {
  gap: 12px !important;
}

.contact-box {
  padding: 24px !important;
  gap: 22px !important;
}

.blog-preview .blog-grid.is-syslab-mobile-carousel,
.formats .pricing-grid.is-syslab-mobile-carousel {
  padding-bottom: 32px !important;
}


/* =========================================================
   SYSLAB MOBILE TEXT WRAP V22
   Исправляет слишком узкие переносы заголовков и описаний
   на главной странице в мобильной версии.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .text-nowrap {
    white-space: nowrap !important;
  }

  .section-head,
  .quick-services .section-head,
  .problems .section-head,
  .services .section-head,
  .formats .section-head,
  .blog-preview .section-head,
  .faq .section-head,
  .contacts .section-head {
    width: 100% !important;
    max-width: min(100%, 430px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  .section-head h2,
  .quick-services .section-head h2,
  .problems .section-head h2,
  .services .section-head h2,
  .formats .section-head h2,
  .blog-preview .section-head h2,
  .faq .section-head h2,
  .contacts .section-head h2 {
    width: min(100%, 404px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(29px, 8.05vw, 36px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  .quick-services .section-head h2 {
    width: min(100%, 390px) !important;
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.17 !important;
  }

  .section-head p:not(.eyebrow),
  .quick-services .section-head p:not(.eyebrow),
  .problems .section-head p:not(.eyebrow),
  .services .section-head p:not(.eyebrow),
  .formats .section-head p:not(.eyebrow),
  .blog-preview .section-head p:not(.eyebrow),
  .faq .section-head p:not(.eyebrow),
  .contacts .section-head p:not(.eyebrow) {
    width: min(100%, 392px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  .quick-services .section-head p:not(.eyebrow) {
    width: min(100%, 382px) !important;
  }

  .blog-preview .section-head p:not(.eyebrow),
  .formats .section-head p:not(.eyebrow) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 380px) {
  .section-head,
  .quick-services .section-head,
  .problems .section-head,
  .services .section-head,
  .formats .section-head,
  .blog-preview .section-head,
  .faq .section-head,
  .contacts .section-head {
    max-width: 100% !important;
  }

  .section-head h2,
  .quick-services .section-head h2,
  .problems .section-head h2,
  .services .section-head h2,
  .formats .section-head h2,
  .blog-preview .section-head h2,
  .faq .section-head h2,
  .contacts .section-head h2 {
    width: min(100%, 352px) !important;
    font-size: clamp(28px, 8.25vw, 33px) !important;
    line-height: 1.19 !important;
  }

  .section-head p:not(.eyebrow),
  .quick-services .section-head p:not(.eyebrow),
  .problems .section-head p:not(.eyebrow),
  .services .section-head p:not(.eyebrow),
  .formats .section-head p:not(.eyebrow),
  .blog-preview .section-head p:not(.eyebrow),
  .faq .section-head p:not(.eyebrow),
  .contacts .section-head p:not(.eyebrow) {
    width: min(100%, 344px) !important;
    font-size: 14.8px !important;
    line-height: 1.57 !important;
  }
}

@media (max-width: 340px) {
  .section-head h2,
  .quick-services .section-head h2,
  .problems .section-head h2,
  .services .section-head h2,
  .formats .section-head h2,
  .blog-preview .section-head h2,
  .faq .section-head h2,
  .contacts .section-head h2 {
    width: 100% !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
  }

  .section-head p:not(.eyebrow),
  .quick-services .section-head p:not(.eyebrow),
  .problems .section-head p:not(.eyebrow),
  .services .section-head p:not(.eyebrow),
  .formats .section-head p:not(.eyebrow),
  .blog-preview .section-head p:not(.eyebrow),
  .faq .section-head p:not(.eyebrow),
  .contacts .section-head p:not(.eyebrow) {
    width: 100% !important;
    font-size: 14.5px !important;
  }
}