/* =========================================================
   Gotham Pro webfont
   Файлы шрифта должны лежать в /fonts/
   ========================================================= */

@font-face {
  font-family: "Gotham Pro";
  src: url("fonts/gothampro_medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("fonts/gothampro_mediumitalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}


:root {
  --bg: #050b14;
  --surface: rgba(11, 18, 32, 0.72);
  --text: #eef4ff;
  --muted: #95a6c4;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #5ee0ff;
  --accent-2: #6b8cff;
  --accent-3: #8b5cf6;
  --radius-lg: 28px;
  --radius-md: 20px;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(94, 224, 255, 0.13), transparent 26rem),
    radial-gradient(circle at 85% 15%, rgba(107, 140, 255, 0.14), transparent 22rem),
    radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.12), transparent 26rem),
    linear-gradient(180deg, #050b14 0%, #070d18 40%, #050b14 100%);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.bg-grid {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 85%);
  opacity: 0.55; z-index: -3;
}
.glow {
  position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.35;
  z-index: -2; pointer-events: none; animation: drift 12s ease-in-out infinite alternate;
}
.glow-1 { width: 280px; height: 280px; top: 10%; left: -60px; background: rgba(94,224,255,0.25); }
.glow-2 { width: 240px; height: 240px; top: 18%; right: -40px; background: rgba(107,140,255,0.22); animation-duration: 14s; }
.glow-3 { width: 300px; height: 300px; bottom: 6%; left: 40%; background: rgba(139,92,246,0.18); animation-duration: 16s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(18px,-24px,0) scale(1.08); } }

.container { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
.container.narrow { width: min(860px, calc(100% - 32px)); }
.section { padding: 92px 0; }

.site-header {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px);
  background: rgba(5, 11, 20, 0.72); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.logo-mark {
  width: 46px; height: 46px; border-radius: 15px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04101a;
  font-size: 15px; font-weight: 900; box-shadow: 0 12px 30px rgba(94,224,255,0.28);
}
.logo-text { letter-spacing: -0.02em; }
.main-nav { display: flex; align-items: center; gap: 24px; color: var(--muted); }
.main-nav a { position: relative; transition: color .2s ease; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .25s ease;
}
.main-nav a:hover { color: var(--text); }
.main-nav a:hover::after { width: 100%; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--text); border-radius: 999px; }

.hero { padding-top: 88px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
.eyebrow {
  margin: 0 0 16px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(42px, 7vw, 72px); line-height: .98; letter-spacing: -0.06em; margin-bottom: 22px; max-width: 820px; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.04; letter-spacing: -0.04em; margin-bottom: 14px; }
h3 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 10px; }
.hero-text { font-size: 20px; color: var(--muted); max-width: 720px; margin-bottom: 28px; }

.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 22px; border-radius: 999px; font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04101a; box-shadow: 0 16px 38px rgba(94,224,255,0.24); }
.btn-secondary { border: 1px solid var(--border); background: rgba(255,255,255,0.05); }
.btn-secondary:hover { border-color: rgba(94,224,255,0.45); }
.btn-light { background: rgba(255,255,255,0.95); color: #07111c; }

.hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-points span { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,0.04); }

.hero-visual { position: relative; min-height: 520px; }
.hero-image-card, .card, .service-card, .price-card, .faq-item, .step, .contact-box, .content-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
  border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
.hero-image-card { border-radius: 30px; padding: 18px; transform-style: preserve-3d; transition: transform .25s ease; }
.hero-image-card img { width: 100%; border-radius: 22px; }
.floating-widget {
  position: absolute; min-width: 180px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(11,18,32,0.76); box-shadow: var(--shadow); backdrop-filter: blur(12px); animation: floaty 5s ease-in-out infinite;
}
.floating-widget strong { display: block; margin-bottom: 4px; font-size: 15px; }
.floating-widget span { color: var(--muted); font-size: 14px; }
.widget-left { left: -10px; bottom: 42px; }
.widget-right { right: -10px; top: 48px; animation-delay: 1.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.section-head { max-width: 760px; margin-bottom: 38px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head p:not(.eyebrow), .card p, .service-card p, .price-card p, .faq-item p, .step p, .content-card p, .contact-box p { color: var(--muted); }

.cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.card { padding: 22px; border-radius: 22px; transition: transform .24s ease, border-color .24s ease; }

.service-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-card { border-radius: 22px; transition: transform .24s ease, border-color .24s ease; }
.service-card a { display: block; padding: 24px; min-height: 100%; }


.card:hover, .service-card:hover, .price-card:hover, .faq-item:hover, .step:hover, .hero-image-card:hover, .content-card:hover {
  transform: translateY(-6px); border-color: rgba(94,224,255,0.40);
}

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.price-card { position: relative; border-radius: 24px; padding: 28px; transition: transform .24s ease, border-color .24s ease; }
.price-card ul { padding-left: 18px; margin-bottom: 0; color: var(--muted); }
.price-card.featured { border-color: rgba(94,224,255,0.34); background: linear-gradient(180deg, rgba(94,224,255,0.12), rgba(255,255,255,0.04)); }
.badge { display: inline-flex; margin-bottom: 16px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: rgba(94,224,255,0.12); color: var(--accent); }

.faq-list { display: grid; gap: 14px; }
.faq-item { border-radius: 18px; padding: 18px 20px; transition: transform .24s ease, border-color .24s ease; }
.faq-item summary { cursor: pointer; font-weight: 850; }
.faq-item p { margin: 14px 0 0; }

.contact-box {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; border-radius: 30px; padding: 36px;
}

.page-hero { padding-top: 92px; padding-bottom: 54px; }
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
.content-card { border-radius: 24px; padding: 28px; transition: transform .24s ease, border-color .24s ease; }
.check-list { margin: 0; padding: 0; list-style: none; color: var(--muted); }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 14px; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 900;
}

.site-footer { padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.08); color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; }
.footer-inner a:hover { color: var(--text); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }

@media (max-width: 1024px) {
  .hero-grid, .contact-box, .two-col { grid-template-columns: 1fr; }
  .service-card-grid, .pricing-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: repeat(2,1fr); }
  .hero-visual { min-height: auto; }
  .widget-left { left: 10px; bottom: 16px; }
  .widget-right { right: 10px; top: 16px; }
}
@media (max-width: 760px) {
  .section { padding: 68px 0; }
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute; top: 76px; left: 16px; right: 16px; display: none; flex-direction: column; align-items: stretch;
    gap: 0; border: 1px solid var(--border); border-radius: 18px; padding: 10px; background: rgba(5,11,20,0.96); box-shadow: var(--shadow);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 14px 12px; border-radius: 12px; }
  .main-nav a::after { display: none; }
  .main-nav a:hover { background: rgba(255,255,255,0.05); }
  .cards-grid { grid-template-columns: 1fr; }
  .hero-actions, .contact-actions { flex-direction: column; }
  .btn { width: 100%; }
  h1 { font-size: clamp(36px, 11vw, 54px); }
  .hero-text { font-size: 18px; }
  .floating-widget { position: static; margin-top: 14px; }
  .footer-inner { flex-direction: column; }
}


.quick-services {
  padding-top: 34px;
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.quick-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-weight: 800;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.quick-links a:hover {
  transform: translateY(-3px);
  border-color: rgba(94,224,255,0.45);
  background: rgba(94,224,255,0.10);
}

.btn-ghost {
  border: 1px solid rgba(94,224,255,0.28);
  background: rgba(94,224,255,0.08);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: rgba(94,224,255,0.55);
  background: rgba(94,224,255,0.13);
}



/* =========================================================
   CENTERED VIDEO HERO
   ========================================================= */

.center-video-hero {
  position: relative !important;
  min-height: calc(100vh - 76px) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #050b14 !important;
}

.center-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  z-index: 0 !important;
  opacity: 0.78 !important;
  filter: brightness(0.72) contrast(1.04) saturate(1.03) !important;
}

.center-video-fallback {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(120deg, rgba(5,11,20,0.40), rgba(5,11,20,0.16))important;
  z-index: -1 !important;
}

.center-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(5,11,20,0.40) 0%, rgba(5,11,20,0.58) 50%, rgba(5,11,20,0.78) 100%),
    radial-gradient(circle at center, rgba(5,11,20,0.08), rgba(5,11,20,0.50)) !important;
}

.center-video-inner {
  position: relative !important;
  z-index: 2 !important;
  min-height: calc(100vh - 76px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-top: 96px !important;
  padding-bottom: 72px !important;
}

.center-video-content {
  width: min(920px, 100%) !important;
  margin: 0 auto !important;
}

.center-video-content .eyebrow {
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 18px !important;
}

.center-video-content h1 {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 18px !important;
  font-size: clamp(44px, 7vw, 86px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.06em !important;
  text-shadow: 0 8px 28px rgba(0,0,0,0.42) !important;
}

.center-video-content .hero-text {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 30px !important;
  font-size: 22px !important;
  color: rgba(238,244,255,0.90) !important;
  text-shadow: 0 4px 18px rgba(0,0,0,0.28) !important;
}

.center-actions {
  justify-content: center !important;
}

.center-video-content .hero-points {
  justify-content: center !important;
}

.center-video-content .hero-points span {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(238,244,255,0.86) !important;
}

@media (max-width: 900px) {
  .center-video-hero,
  .center-video-inner {
    min-height: auto !important;
  }

  .center-video-inner {
    padding-top: 92px !important;
    padding-bottom: 56px !important;
  }

  .center-video-content h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
  }

  .center-video-content .hero-text {
    font-size: 18px !important;
  }

  .center-video-overlay {
    background:
      linear-gradient(180deg, rgba(5,11,20,0.44) 0%, rgba(5,11,20,0.88) 100%) !important;
  }
}


/* Mobile video optimization */
.center-video-bg {
  will-change: transform;
  transform: translateZ(0);
}

@media (max-width: 760px) {
  .center-video-bg {
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.68 !important;
    filter: brightness(0.68) contrast(1.02) saturate(1.02) !important;
  }

  .center-video-inner {
    padding-top: 86px !important;
    padding-bottom: 48px !important;
  }

  .center-video-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .center-video-content h1 {
    text-shadow: 0 8px 28px rgba(0,0,0,0.58) !important;
  }

  .center-video-content .hero-text {
    text-shadow: 0 6px 22px rgba(0,0,0,0.50) !important;
  }
}





/* =========================================================
   MOBILE VIDEO PERFORMANCE MODE
   ПК: видео и эффекты остаются.
   Телефон: видео остается, но без тяжелых фильтров/blur.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .center-video-hero {
    min-height: 100svh !important;
    contain: layout paint !important;
    transform: none !important;
  }

  .center-video-inner {
    min-height: 100svh !important;
    padding-top: 86px !important;
    padding-bottom: 70px !important;
  }

  .center-video-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.72 !important;

    /* На телефоне filters сильно тормозят */
    filter: none !important;
    will-change: auto !important;
    transform: translateZ(0) !important;
  }

  .center-video-overlay {
    background:
      linear-gradient(180deg, rgba(5,11,20,0.45) 0%, rgba(5,11,20,0.76) 58%, rgba(5,11,20,0.92) 100%) !important;
  }

  .center-video-content {
    width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .center-video-content h1 {
    font-size: clamp(34px, 11vw, 52px) !important;
    line-height: 0.98 !important;
    text-shadow: 0 6px 24px rgba(0,0,0,0.60) !important;
  }

  .center-video-content .hero-text {
    font-size: 17px !important;
    line-height: 1.55 !important;
    max-width: 96% !important;
    text-shadow: 0 4px 18px rgba(0,0,0,0.55) !important;
  }

  .center-actions {
    gap: 10px !important;
  }
}


/* SYSLAB CLIENT-FACING TEXT TWEAKS */
.quick-services .section-head .eyebrow,
.services .section-head .eyebrow {
  color: var(--accent);
}

.quick-services {
  padding-top: 72px;
  padding-bottom: 72px;
}

.quick-links a {
  min-width: 118px;
}







/* syslab fixed typewriter title - Mindpro-like */
.typewriter-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  text-transform: uppercase !important;
}

.typewriter-title .static-title-line,
.typewriter-title .typing-line {
  display: block !important;
  width: 100% !important;
}

.typewriter-title .typing-line {
  min-height: 1.02em !important;
  white-space: nowrap !important;
}

#typed-text {
  display: inline !important;
}

.typing-caret {
  display: inline-block !important;
  margin-left: 5px !important;
  color: var(--accent) !important;
  animation: caretBlink 0.8s steps(1) infinite !important;
}

@keyframes caretBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (max-width: 760px) {
  .typewriter-title .typing-line {
    white-space: normal !important;
    min-height: 1.12em !important;
  }

  .typing-caret {
    animation: caretBlink 0.8s steps(1) infinite !important;
  }
}






/* =========================================================
   SYSLAB READABLE HERO TITLE
   Финальная правка заголовка: убираем склеенность букв.
   ========================================================= */

.center-video-content h1,
.typewriter-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 750 !important;
  font-size: clamp(40px, 5.2vw, 66px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  font-stretch: normal !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
}

.typewriter-title .static-title-line,
.typewriter-title .typing-line {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
}

.typewriter-title .typing-line {
  min-height: 1.18em !important;
  white-space: normal !important;
}

#typed-text {
  display: inline !important;
  font-weight: 750 !important;
  letter-spacing: 0.005em !important;
}

.typing-caret {
  font-weight: 600 !important;
  margin-left: 7px !important;
  color: var(--accent) !important;
}

@media (max-width: 760px) {
  .center-video-content h1,
  .typewriter-title {
    font-size: clamp(32px, 9.4vw, 44px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    font-weight: 750 !important;
  }

  .typewriter-title .static-title-line,
  .typewriter-title .typing-line,
  #typed-text {
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    font-weight: 750 !important;
  }
}



/* =========================================================
   SYSLAB UNIFIED TYPOGRAPHY
   Единый шрифт для главной и внутренних страниц.
   ========================================================= */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

h1,
h2,
h3,
.logo-text,
.btn,
.main-nav,
.eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Внутренние страницы */
body h1:not(.typewriter-title) {
  font-weight: 750 !important;
  font-size: clamp(38px, 5.1vw, 64px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  font-stretch: normal !important;
}

body h2 {
  font-weight: 750 !important;
  font-size: clamp(30px, 3.6vw, 44px) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.002em !important;
  text-transform: none !important;
}

body h3 {
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Главная с typewriter */
.center-video-content h1,
.typewriter-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 750 !important;
  font-size: clamp(40px, 5.2vw, 66px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  font-stretch: normal !important;
}

.typewriter-title .static-title-line,
.typewriter-title .typing-line,
#typed-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
}

.typing-caret {
  font-weight: 600 !important;
  margin-left: 7px !important;
}

/* Карточки на внутренних страницах */
.content-card h2,
.price-card h3,
.card h3,
.service-card h3,
.faq-item summary {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 760px) {
  body h1:not(.typewriter-title) {
    font-size: clamp(32px, 9vw, 46px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  body h2 {
    font-size: clamp(28px, 7.2vw, 38px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  .center-video-content h1,
  .typewriter-title {
    font-size: clamp(32px, 9.4vw, 44px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  .typewriter-title .static-title-line,
  .typewriter-title .typing-line,
  #typed-text {
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }
}



/* =========================================================
   SYSLAB.KZ BRAND + MOBILE TYPEWRITER FIX
   ========================================================= */

.logo-text {
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

#typed-text {
  display: inline !important;
  visibility: visible !important;
}

.typing-line {
  display: block !important;
  min-height: 1.18em !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .typewriter-title,
  .typewriter-title .static-title-line,
  .typewriter-title .typing-line,
  #typed-text {
    display: block !important;
    visibility: visible !important;
  }

  .typing-caret {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .logo-text {
    font-size: 15px !important;
  }
}



/* =========================================================
   SYSLAB MOBILE CARET FIX
   Курсор typewriter всегда остается в одной строке с текстом.
   ========================================================= */

.typewriter-title .typing-line {
  display: block !important;
  white-space: nowrap !important;
  min-height: 1.18em !important;
}

.typewriter-title #typed-text,
.typewriter-title .typing-caret {
  display: inline !important;
  width: auto !important;
}

.typewriter-title .typing-caret {
  line-height: inherit !important;
  vertical-align: baseline !important;
  margin-left: 6px !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .typewriter-title .typing-line {
    display: block !important;
    white-space: nowrap !important;
    min-height: 1.18em !important;
  }

  .typewriter-title #typed-text,
  .typewriter-title .typing-caret {
    display: inline !important;
    width: auto !important;
  }

  .typewriter-title .typing-caret {
    line-height: inherit !important;
    vertical-align: baseline !important;
    margin-left: 5px !important;
  }
}



/* =========================================================
   SYSLAB BUTTON COLOR FIX
   Делаем главную кнопку аккуратнее: белый текст + более глубокий синий градиент.
   ========================================================= */

.btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #14b8ff 0%, #2563eb 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 38px rgba(37, 99, 235, 0.34), 0 0 0 1px rgba(94, 224, 255, 0.10) inset !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22) !important;
}

.btn-primary:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #38c9ff 0%, #3b82f6 100%) !important;
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

.btn-primary:visited,
.btn-primary:active,
.btn-primary:focus {
  color: #ffffff !important;
}

/* На телефоне кнопка тоже должна выглядеть мягко и без чёрного текста */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #14b8ff 0%, #2563eb 100%) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25) !important;
  }
}



/* =========================================================
   SYSLAB DESKTOP BUTTON FONT FIX
   На ПК кнопки тоньше, на телефоне оставляем жирнее.
   ========================================================= */

@media (min-width: 761px) {
  .btn {
    font-weight: 680 !important;
    letter-spacing: 0.005em !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-light {
    font-weight: 680 !important;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .btn {
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }
}



/* =========================================================
   SYSLAB FAQ FONT FIX
   Делаем частые вопросы более читаемыми.
   ========================================================= */

.faq-item summary {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 620 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: rgba(238, 244, 255, 0.92) !important;
}

.faq-item p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: rgba(169, 183, 201, 0.96) !important;
}

.faq-item {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* Стрелка details тоже мягче */
.faq-item summary::marker {
  color: rgba(94, 224, 255, 0.95) !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .faq-item summary {
    font-size: 16px !important;
    font-weight: 620 !important;
    line-height: 1.45 !important;
  }

  .faq-item p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}



/* =========================================================
   SYSLAB QUICK LINKS FONT FIX
   Смягчаем шрифт в блоке популярных услуг.
   ========================================================= */

.quick-services .section-head .eyebrow {
  font-weight: 650 !important;
  letter-spacing: 0.10em !important;
}

.quick-services .section-head h2 {
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

.quick-services .section-head p {
  font-weight: 400 !important;
}

.quick-links a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  color: rgba(238, 244, 255, 0.92) !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .quick-services .section-head h2 {
    font-weight: 720 !important;
  }

  .quick-links a {
    font-size: 15px !important;
    font-weight: 650 !important;
  }
}



/* =========================================================
   SYSLAB GLOBAL FONT POLISH
   Общая полировка жирности шрифтов по всему сайту.
   ========================================================= */

/* Навигация и логотип */
.logo-text {
  font-weight: 620 !important;
  letter-spacing: -0.005em !important;
}

.main-nav {
  font-weight: 480 !important;
}

.main-nav a {
  font-weight: 480 !important;
}

/* Маленькие технические подписи: Linux • VPS/VDS • Plesk... */
.eyebrow {
  font-weight: 580 !important;
  letter-spacing: 0.095em !important;
}

/* Главные заголовки оставляем выразительными, но не чрезмерно жирными */
h1,
.center-video-content h1,
.typewriter-title,
.typewriter-title .static-title-line,
.typewriter-title .typing-line,
#typed-text {
  font-weight: 720 !important;
}

/* Заголовки секций и карточек */
h2,
.section-head h2 {
  font-weight: 680 !important;
  letter-spacing: 0 !important;
}

h3,
.card h3,
.service-card h3,
.price-card h3,
.step h3,
.content-card h2 {
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}

/* Описания */
p,
.card p,
.service-card p,
.price-card p,
.step p,
.content-card p,
.contact-box p,
.section-head p {
  font-weight: 400 !important;
}

/* Ссылки "Подробнее →" */
.service-card span,
.service-item span,
a span,
.quick-links a,
.content-card a {
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

/* Карточки услуг */
.service-card a {
  font-weight: 400 !important;
}

.service-card span {
  color: rgba(94, 224, 255, 0.92) !important;
}

/* Кнопки на ПК — аккуратнее и легче */
@media (min-width: 761px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-light {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }
}

/* FAQ */
.faq-item summary {
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

.faq-item p {
  font-weight: 400 !important;
}

/* Списки на внутренних страницах */
.check-list li {
  font-weight: 400 !important;
}

/* Популярные услуги */
.quick-links a {
  font-size: 15px !important;
  font-weight: 560 !important;
}

/* Мобильная версия: чуть плотнее, но без излишней жирности */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .logo-text {
    font-weight: 620 !important;
  }

  .eyebrow {
    font-weight: 580 !important;
    letter-spacing: 0.085em !important;
  }

  h1,
  .center-video-content h1,
  .typewriter-title,
  .typewriter-title .static-title-line,
  .typewriter-title .typing-line,
  #typed-text {
    font-weight: 720 !important;
  }

  h2,
  .section-head h2 {
    font-weight: 680 !important;
  }

  h3,
  .card h3,
  .service-card h3,
  .price-card h3,
  .step h3,
  .content-card h2 {
    font-weight: 620 !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-light {
    font-weight: 700 !important;
  }

  .quick-links a,
  .service-card span {
    font-weight: 580 !important;
  }

  .faq-item summary {
    font-weight: 560 !important;
  }
}



/* =========================================================
   SYSLAB BADGE FONT FIX
   Смягчаем бейдж "Популярно".
   ========================================================= */

.badge {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  color: rgba(94, 224, 255, 0.95) !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .badge {
    font-size: 13px !important;
    font-weight: 580 !important;
  }
}



/* =========================================================
   SYSLAB SCROLL AMBIENT BACKGROUND
   Плавный перелив фона при скролле.
   На ПК активно, на телефоне облегчённо.
   ========================================================= */

:root {
  --ambient-y: 18%;
  --ambient-x: 50%;
  --ambient-opacity: 0.42;
  --ambient-shift: 0px;
}

.scroll-ambient {
  position: fixed;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  opacity: var(--ambient-opacity);
  background:
    radial-gradient(circle at var(--ambient-x) var(--ambient-y), rgba(94, 224, 255, 0.22), transparent 28rem),
    radial-gradient(circle at calc(100% - var(--ambient-x)) calc(100% - var(--ambient-y)), rgba(37, 99, 235, 0.18), transparent 30rem),
    radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.12), transparent 32rem);
  transform: translate3d(0, var(--ambient-shift), 0);
  transition: opacity .25s ease;
  will-change: transform, opacity, background;
}

/* Ещё один лёгкий перелив для секций */
.section {
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.38;
  background:
    radial-gradient(circle at 20% 20%, rgba(94, 224, 255, 0.045), transparent 30rem),
    radial-gradient(circle at 80% 80%, rgba(107, 140, 255, 0.045), transparent 28rem);
}

/* На hover/scroll визуально фон становится чуть живее */
body.is-scrolling .scroll-ambient {
  opacity: 0.52;
}

/* Сохраняем видео-hero выше декоративного слоя */
.center-video-hero,
.main-video-hero {
  isolation: isolate;
}

/* На телефоне убираем тяжёлую динамику, оставляем лёгкий статичный фон */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .scroll-ambient {
    display: block !important;
    inset: 0;
    opacity: 0.18 !important;
    transform: none !important;
    will-change: auto !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(94, 224, 255, 0.13), transparent 18rem),
      radial-gradient(circle at 50% 88%, rgba(37, 99, 235, 0.10), transparent 20rem);
  }

  .section::before {
    display: none !important;
  }

  body.is-scrolling .scroll-ambient {
    opacity: 0.18 !important;
  }
}



/* =========================================================
   SYSLAB SOFT GLOW BACKGROUND
   Мягкие световые пятна:
   - голубой glow слева
   - сине-фиолетовый glow справа
   - слабая центральная подсветка
   ========================================================= */

:root {
  --soft-glow-left-x: -8%;
  --soft-glow-left-y: 18%;
  --soft-glow-right-x: 108%;
  --soft-glow-right-y: 24%;
  --soft-glow-center-x: 50%;
  --soft-glow-center-y: 42%;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    radial-gradient(
      circle at var(--soft-glow-left-x) var(--soft-glow-left-y),
      rgba(94, 224, 255, 0.16) 0%,
      rgba(94, 224, 255, 0.09) 16%,
      rgba(94, 224, 255, 0.04) 28%,
      transparent 46%
    ),
    radial-gradient(
      circle at var(--soft-glow-center-x) var(--soft-glow-center-y),
      rgba(120, 160, 255, 0.055) 0%,
      rgba(120, 160, 255, 0.025) 20%,
      transparent 42%
    );
  filter: blur(10px);
  opacity: 0.95;
}

body::after {
  background:
    radial-gradient(
      circle at var(--soft-glow-right-x) var(--soft-glow-right-y),
      rgba(96, 120, 255, 0.13) 0%,
      rgba(132, 92, 246, 0.08) 20%,
      rgba(132, 92, 246, 0.035) 32%,
      transparent 48%
    );
  filter: blur(14px);
  opacity: 0.92;
}

/* Дополнительная глубина в секциях */
.section:nth-of-type(odd)::after,
.section:nth-of-type(even)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.20;
}

.section:nth-of-type(odd)::after {
  background:
    radial-gradient(circle at 12% 30%, rgba(94, 224, 255, 0.06), transparent 30rem);
}

.section:nth-of-type(even)::after {
  background:
    radial-gradient(circle at 88% 38%, rgba(132, 92, 246, 0.05), transparent 32rem);
}

/* Чуть живее при скролле, но без перегруза */
body.is-scrolling::before {
  opacity: 1;
}

body.is-scrolling::after {
  opacity: 0.98;
}

/* На мобильной версии делаем всё гораздо мягче */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body::before {
    background:
      radial-gradient(
        circle at 10% 18%,
        rgba(94, 224, 255, 0.10) 0%,
        rgba(94, 224, 255, 0.05) 18%,
        transparent 42%
      ),
      radial-gradient(
        circle at 50% 40%,
        rgba(120, 160, 255, 0.025) 0%,
        transparent 40%
      );
    filter: blur(8px);
    opacity: 0.75;
  }

  body::after {
    background:
      radial-gradient(
        circle at 92% 24%,
        rgba(132, 92, 246, 0.08) 0%,
        rgba(96, 120, 255, 0.035) 22%,
        transparent 40%
      );
    filter: blur(10px);
    opacity: 0.7;
  }

  .section:nth-of-type(odd)::after,
  .section:nth-of-type(even)::after {
    opacity: 0.12;
  }
}



/* =========================================================
   SYSLAB SCROLL-ANIMATED SOFT GLOW
   Мягкие свечения двигаются при скролле.
   ========================================================= */

:root {
  --soft-glow-left-x: -8%;
  --soft-glow-left-y: 18%;
  --soft-glow-right-x: 108%;
  --soft-glow-right-y: 24%;
  --soft-glow-center-x: 50%;
  --soft-glow-center-y: 42%;
  --soft-glow-left-opacity: 0.95;
  --soft-glow-right-opacity: 0.92;
  --soft-glow-center-opacity: 1;
}

body::before,
body::after {
  transition:
    opacity 0.35s ease,
    filter 0.45s ease,
    background-position 0.45s ease;
  will-change: opacity, filter;
}

body::before {
  background:
    radial-gradient(
      circle at var(--soft-glow-left-x) var(--soft-glow-left-y),
      rgba(94, 224, 255, 0.16) 0%,
      rgba(94, 224, 255, 0.09) 16%,
      rgba(94, 224, 255, 0.04) 28%,
      transparent 46%
    ),
    radial-gradient(
      circle at var(--soft-glow-center-x) var(--soft-glow-center-y),
      rgba(120, 160, 255, 0.055) 0%,
      rgba(120, 160, 255, 0.025) 20%,
      transparent 42%
    );
  opacity: var(--soft-glow-left-opacity);
}

body::after {
  background:
    radial-gradient(
      circle at var(--soft-glow-right-x) var(--soft-glow-right-y),
      rgba(96, 120, 255, 0.13) 0%,
      rgba(132, 92, 246, 0.08) 20%,
      rgba(132, 92, 246, 0.035) 32%,
      transparent 48%
    );
  opacity: var(--soft-glow-right-opacity);
}

body.is-scrolling::before {
  filter: blur(12px);
}

body.is-scrolling::after {
  filter: blur(16px);
}

/* На мобильной версии оставляем мягко и почти статично */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root {
    --soft-glow-left-x: 10%;
    --soft-glow-left-y: 18%;
    --soft-glow-right-x: 92%;
    --soft-glow-right-y: 24%;
    --soft-glow-center-x: 50%;
    --soft-glow-center-y: 40%;
    --soft-glow-left-opacity: 0.75;
    --soft-glow-right-opacity: 0.70;
    --soft-glow-center-opacity: 0.8;
  }

  body::before,
  body::after {
    transition: opacity 0.25s ease;
    will-change: auto !important;
  }

  body.is-scrolling::before,
  body.is-scrolling::after {
    filter: none !important;
  }
}



/* =========================================================
   SYSLAB DYNAMIC BACKGROUND V2
   Более эффектный фон: несколько световых слоёв двигаются при скролле.
   ========================================================= */

:root {
  --dyn-cyan-x: -8vw;
  --dyn-cyan-y: 20vh;
  --dyn-blue-x: 84vw;
  --dyn-blue-y: 24vh;
  --dyn-violet-x: 48vw;
  --dyn-violet-y: 74vh;
  --dyn-beam-1-x: 8vw;
  --dyn-beam-1-y: 18vh;
  --dyn-beam-2-x: 74vw;
  --dyn-beam-2-y: 58vh;
  --dyn-mesh-x: 0px;
  --dyn-mesh-y: 0px;
  --dyn-rotate: 0deg;
  --dyn-opacity: 1;
}

body {
  position: relative;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

.dynamic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--dyn-opacity);
  background:
    radial-gradient(circle at 50% 45%, rgba(70, 120, 255, 0.035), transparent 36rem),
    radial-gradient(circle at 50% 100%, rgba(94, 224, 255, 0.025), transparent 32rem);
}

.dynamic-bg__mesh {
  position: absolute;
  inset: -20%;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(94, 224, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 224, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  transform:
    translate3d(var(--dyn-mesh-x), var(--dyn-mesh-y), 0)
    rotate(var(--dyn-rotate));
  mask-image: radial-gradient(circle at center, black 24%, transparent 72%);
  will-change: transform;
}

.dynamic-bg__orb {
  position: absolute;
  width: 38vw;
  height: 38vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 999px;
  filter: blur(74px);
  opacity: 0.48;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.dynamic-bg__orb--cyan {
  left: 0;
  top: 0;
  background:
    radial-gradient(circle, rgba(94, 224, 255, 0.46) 0%, rgba(94, 224, 255, 0.18) 34%, transparent 70%);
  transform: translate3d(var(--dyn-cyan-x), var(--dyn-cyan-y), 0);
}

.dynamic-bg__orb--blue {
  left: 0;
  top: 0;
  background:
    radial-gradient(circle, rgba(37, 99, 235, 0.42) 0%, rgba(37, 99, 235, 0.16) 34%, transparent 70%);
  transform: translate3d(var(--dyn-blue-x), var(--dyn-blue-y), 0);
}

.dynamic-bg__orb--violet {
  left: 0;
  top: 0;
  width: 34vw;
  height: 34vw;
  background:
    radial-gradient(circle, rgba(139, 92, 246, 0.38) 0%, rgba(139, 92, 246, 0.14) 38%, transparent 72%);
  transform: translate3d(var(--dyn-violet-x), var(--dyn-violet-y), 0);
}

.dynamic-bg__beam {
  position: absolute;
  width: 48vw;
  height: 14vw;
  min-width: 560px;
  min-height: 140px;
  border-radius: 999px;
  filter: blur(44px);
  opacity: 0.24;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.dynamic-bg__beam--one {
  left: 0;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(94, 224, 255, 0.36), transparent);
  transform:
    translate3d(var(--dyn-beam-1-x), var(--dyn-beam-1-y), 0)
    rotate(-18deg);
}

.dynamic-bg__beam--two {
  left: 0;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(132, 92, 246, 0.30), rgba(37, 99, 235, 0.22), transparent);
  transform:
    translate3d(var(--dyn-beam-2-x), var(--dyn-beam-2-y), 0)
    rotate(22deg);
}

/* У старых мягких свечений снижаем влияние, чтобы новый слой был главным */
body::before,
body::after {
  opacity: 0.42 !important;
}

/* При скролле фон становится чуть живее */
body.is-scrolling .dynamic-bg__orb--cyan {
  opacity: 0.56;
}

body.is-scrolling .dynamic-bg__orb--blue {
  opacity: 0.54;
}

body.is-scrolling .dynamic-bg__orb--violet {
  opacity: 0.48;
}

body.is-scrolling .dynamic-bg__beam {
  opacity: 0.30;
}

/* На мобильной версии — статичный и лёгкий фон */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .dynamic-bg {
    opacity: 0.42;
    background:
      radial-gradient(circle at 12% 20%, rgba(94, 224, 255, 0.10), transparent 18rem),
      radial-gradient(circle at 88% 28%, rgba(37, 99, 235, 0.09), transparent 18rem),
      radial-gradient(circle at 50% 90%, rgba(139, 92, 246, 0.08), transparent 20rem);
  }

  .dynamic-bg__mesh,
  .dynamic-bg__beam {
    display: none;
  }

  .dynamic-bg__orb {
    filter: blur(52px);
    opacity: 0.22 !important;
    will-change: auto;
  }

  .dynamic-bg__orb--cyan {
    transform: translate3d(-28vw, 10vh, 0);
  }

  .dynamic-bg__orb--blue {
    transform: translate3d(66vw, 16vh, 0);
  }

  .dynamic-bg__orb--violet {
    transform: translate3d(22vw, 72vh, 0);
  }

  body::before,
  body::after {
    opacity: 0.22 !important;
  }
}



/* =========================================================
   SYSLAB FIXED BLUR HEADER
   Шапка всегда закреплена сверху.
   Контент прокручивается под ней.
   Фон шапки полупрозрачный с blur.
   ========================================================= */

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(5, 11, 20, 0.58) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

body.header-scrolled .site-header {
  background: rgba(5, 11, 20, 0.76) !important;
  border-bottom-color: rgba(94, 224, 255, 0.12) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.26) !important;
}

/* Чтобы якоря не прятались под фиксированной шапкой */
section,
[id] {
  scroll-margin-top: 92px;
}

/* Первый экран должен начинаться под шапкой визуально, но фон/видео уходят под неё */
.center-video-hero,
.main-video-hero,
.hero,
.page-hero {
  padding-top: 76px !important;
}

/* Если у hero уже есть внутренний отступ, не даём тексту залезать под шапку */
.center-video-inner,
.main-video-inner {
  padding-top: 118px !important;
}

/* Внутренние страницы */
.page-hero {
  padding-top: 138px !important;
}

/* Динамический фон не должен перекрывать шапку */
.dynamic-bg,
.scroll-ambient,
.bg-grid,
.glow {
  z-index: 0 !important;
}

main,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-header {
  isolation: isolate;
}

/* Мобильная версия: blur легче, чтобы не тормозило */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-header {
    background: rgba(5, 11, 20, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

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

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

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




/* =========================================================
   SYSLAB REMOVE SVG VIDEO FALLBACK
   Убраны старый SVG hero и старый SVG poster.
   Видео грузится напрямую из MP4.
   ========================================================= */

.center-video-fallback,
.video-fallback,
.main-video-poster {
  background: #050b14 !important;
}



/* =========================================================
   SYSLAB LANGUAGE SWITCH
   RU/KZ language switch in header.
   ========================================================= */

.lang-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(94, 224, 255, 0.22) !important;
  border-radius: 999px !important;
  color: rgba(238, 244, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.lang-switch:hover {
  color: #ffffff !important;
  border-color: rgba(94, 224, 255, 0.48) !important;
  background: rgba(94, 224, 255, 0.10) !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .lang-switch {
    width: 100% !important;
    justify-content: flex-start !important;
    border-radius: 14px !important;
    height: 42px !important;
    font-size: 15px !important;
  }
}



/* =========================================================
   syslab.kz LOWERCASE BRAND + STABLE BACKGROUND ANIMATION
   - название бренда в нижнем регистре
   - убрано мерцание фона при скролле
   - анимация фона сохранена через transform
   ========================================================= */

/* Логотип: lowercase */
.logo-text {
  text-transform: lowercase !important;
}

.logo-domain {
  color: #00D9FF !important;
}

/* Стабилизация слоёв фона */
.dynamic-bg {
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  contain: paint !important;
  will-change: transform !important;
}

/* Не меняем opacity/filter во время скролла — это и давало мерцание */
body.is-scrolling .dynamic-bg,
body.is-scrolling .dynamic-bg__orb,
body.is-scrolling .dynamic-bg__beam,
body.is-scrolling::before,
body.is-scrolling::after {
  opacity: inherit !important;
  filter: inherit !important;
}

/* Движение остаётся, но только через transform */
.dynamic-bg__mesh,
.dynamic-bg__orb,
.dynamic-bg__beam {
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: none !important;
}

/* Убираем конфликтующие псевдо-glow от body, чтобы фон не мигал */
body::before,
body::after {
  transition: none !important;
  animation: none !important;
}

/* Секции не должны создавать лишние мигающие overlay-слои */
.section::before,
.section::after {
  transition: none !important;
}

/* Плавный скролл для якорей */
html {
  scroll-behavior: smooth !important;
}

/* Кнопка наверх/якоря не должны прятаться под фиксированной шапкой */
#top,
[id] {
  scroll-margin-top: 96px;
}

/* На телефоне фон остаётся облегчённым */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: smooth !important;
  }

  .dynamic-bg,
  .scroll-ambient,
  .bg-grid,
  .glow,
  .glow-1,
  .glow-2,
  .glow-3 {
    display: none !important;
  }

  body::before,
  body::after {
    content: none !important;
    display: none !important;
  }
}



/* =========================================================
   syslab.kz SMOOTH GLOW BACKGROUND
   Плавный фон без мерцаний и без геометрических полос.
   Анимация сохранена: мягкие radial glow-пятна смещаются при скролле.
   ========================================================= */

:root {
  --smooth-cyan-x: 14%;
  --smooth-cyan-y: 32%;
  --smooth-blue-x: 88%;
  --smooth-blue-y: 28%;
  --smooth-violet-x: 62%;
  --smooth-violet-y: 78%;
  --smooth-center-x: 50%;
  --smooth-center-y: 52%;
}

/* Оставляем один общий слой фона */
.dynamic-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  contain: paint !important;
  will-change: background !important;
  background:
    radial-gradient(circle at var(--smooth-cyan-x) var(--smooth-cyan-y),
      rgba(94, 224, 255, 0.145) 0%,
      rgba(94, 224, 255, 0.075) 16%,
      rgba(94, 224, 255, 0.030) 31%,
      transparent 52%),
    radial-gradient(circle at var(--smooth-blue-x) var(--smooth-blue-y),
      rgba(37, 99, 235, 0.135) 0%,
      rgba(37, 99, 235, 0.070) 18%,
      rgba(37, 99, 235, 0.026) 34%,
      transparent 54%),
    radial-gradient(circle at var(--smooth-violet-x) var(--smooth-violet-y),
      rgba(139, 92, 246, 0.120) 0%,
      rgba(139, 92, 246, 0.060) 18%,
      rgba(139, 92, 246, 0.024) 34%,
      transparent 56%),
    radial-gradient(circle at var(--smooth-center-x) var(--smooth-center-y),
      rgba(120, 160, 255, 0.045) 0%,
      rgba(120, 160, 255, 0.020) 24%,
      transparent 50%);
}

/* Убираем старые элементы, которые давали резкие полосы/треугольники */
.dynamic-bg__mesh,
.dynamic-bg__orb,
.dynamic-bg__beam,
.dynamic-bg__beam--one,
.dynamic-bg__beam--two {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Убираем конфликтующие псевдо-слои body, чтобы не было мерцания */
body::before,
body::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
}

/* Старые scroll/glow слои не должны вмешиваться */
.scroll-ambient,
.glow,
.glow-1,
.glow-2,
.glow-3 {
  display: none !important;
}

/* Секции не создают лишние цветные пятна поверх карточек */
.section::before,
.section::after {
  display: none !important;
  content: none !important;
}

/* Контент всегда выше фона */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

/* При скролле не меняем opacity/filter — именно это часто мерцает */
body.is-scrolling .dynamic-bg {
  opacity: 1 !important;
  filter: none !important;
}

/* Мобильная версия: фон статичный и лёгкий */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .dynamic-bg {
    display: block !important;
    opacity: 0.55 !important;
    background:
      radial-gradient(circle at 12% 24%,
        rgba(94, 224, 255, 0.075) 0%,
        rgba(94, 224, 255, 0.030) 24%,
        transparent 52%),
      radial-gradient(circle at 90% 34%,
        rgba(37, 99, 235, 0.070) 0%,
        rgba(37, 99, 235, 0.025) 26%,
        transparent 56%),
      radial-gradient(circle at 50% 88%,
        rgba(139, 92, 246, 0.060) 0%,
        rgba(139, 92, 246, 0.022) 26%,
        transparent 58%);
    will-change: auto !important;
  }
}












/* =========================================================
   syslab.kz TEXT LOGO ONLY
   Шапка без SVG-иконки: только текст syslab.kz.
   ========================================================= */

.logo-text-only {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
}

.logo-mark,
.logo-mark-img,
.logo-mark-css {
  display: none !important;
}

.logo-text {
  display: inline-flex !important;
  align-items: baseline !important;
  white-space: nowrap !important;
  font-family: "Gotham Pro", "Montserrat", Arial, sans-serif !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  text-transform: lowercase !important;
  color: #f3f6fb !important;
  text-shadow: none !important;
}

.logo-domain {
  color: #00D9FF !important;
  margin-left: 0 !important;
  font-family: "Gotham Pro", "Montserrat", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-shadow: none !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .logo-text {
    font-size: 21px !important;
    letter-spacing: -0.04em !important;
  }
}









/* =========================================================
   syslab.kz FOOTER TOP LINK = HEADER NAV FONT
   "Наверх / Жоғары" использует такой же шрифт, как меню в шапке.
   Gotham Pro остаётся только для копирайта syslab.kz.
   ========================================================= */

.site-footer .footer-copy,
.site-footer .copyright,
.site-footer p:first-child,
.footer .footer-copy,
.footer .copyright,
.footer p:first-child {
  font-family: "Gotham Pro", "Montserrat", Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Ссылка "Наверх / Жоғары" — как пункты меню: Услуги / Форматы / FAQ / Контакты */
.site-footer a[href="#top"],
.site-footer a[href*="#top"],
.site-footer .back-to-top,
.site-footer .to-top,
.footer a[href="#top"],
.footer a[href*="#top"],
.footer .back-to-top,
.footer .to-top {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--muted, #A9B6CB) !important;
  text-decoration: none !important;
}



/* =========================================================
   syslab.kz BLOG AND CASES
   ========================================================= */

.blog-hero .hero-text {
  max-width: 780px;
}

.blog-grid .service-card a {
  min-height: 300px;
}

.blog-card h3 {
  margin-top: 14px;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.case-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(94, 224, 255, 0.22);
  border-radius: 999px;
  background: rgba(94, 224, 255, 0.07);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.small-meta {
  margin-top: 0;
  margin-bottom: 10px;
}

.small-meta span {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 22px;
  align-items: start;
}

.blog-article {
  padding: 34px;
}

.blog-article h2 {
  margin-top: 30px;
  margin-bottom: 12px;
}

.blog-article h2:first-child {
  margin-top: 0;
}

.blog-article p {
  margin: 0 0 16px;
}

.blog-article code {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #dcefff;
}

.case-steps {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--muted);
}

.case-steps li {
  padding-left: 4px;
}



.mini-note {
  display: grid;
  gap: 8px;
  margin: 22px 0;
  padding: 16px;
  border: 1px solid rgba(94, 224, 255, 0.18);
  border-radius: 18px;
  background: rgba(94, 224, 255, 0.06);
}

.mini-note strong {
  color: var(--text);
}

.mini-note span {
  color: var(--muted);
}

.compact-actions {
  display: grid;
  gap: 10px;
}

.compact-actions .btn {
  width: 100%;
  justify-content: center;
}

.blog-preview .center-actions {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
  }

  .blog-grid .service-card a {
    min-height: auto;
  }
}



/* =========================================================
   syslab.kz CASE META PILLS FONT FIX
   Плашки кейсов сделаны менее жирными.
   ========================================================= */

.case-meta span {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  font-size: 13px !important;
}

.small-meta span {
  font-weight: 600 !important;
  font-size: 12px !important;
}






/* =========================================================
   syslab.kz UNIFIED SECTION EYEBROWS
   Все подписи секций единым шрифтом:
   "Услуги", "Когда нужна техническая помощь", "Қызметтер" и т.д.
   ========================================================= */

.eyebrow,
.section-head .eyebrow,
.page-hero .eyebrow,
.blog-hero .eyebrow,
p.eyebrow,
span.eyebrow {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent, #5ee0ff) !important;
  font-style: normal !important;
  text-shadow: none !important;
}

/* На главной оба верхних label выглядят одинаково */
#services .eyebrow,
.problems .eyebrow,
section[id="services"] .eyebrow,
section[id="problems"] .eyebrow {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
}



/* =========================================================
   syslab.kz PREMIUM ICONS RENDER FIX
   Исправляет размер и отображение SVG-иконок.
   Иконки теперь маленькие, контурные и без чёрной заливки.
   ========================================================= */

.card,
.service-card,
.price-card,
.content-card {
  position: relative;
  overflow: hidden;
}

.card::after,
.service-card::after,
.price-card::after,
.content-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(94, 224, 255, 0.08) 38%,
    rgba(139, 92, 246, 0.07) 52%,
    transparent 72%
  );
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .85s ease, opacity .35s ease;
}

.card:hover::after,
.service-card:hover::after,
.price-card:hover::after,
.content-card:hover::after {
  transform: translateX(120%);
  opacity: 1;
}

.card-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  border-radius: 15px !important;
  color: #5ee0ff !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 38%),
    linear-gradient(135deg, rgba(94,224,255,0.20), rgba(107,140,255,0.14) 55%, rgba(139,92,246,0.12)) !important;
  border: 1px solid rgba(94, 224, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    0 14px 28px rgba(0, 0, 0, 0.20),
    0 0 18px rgba(94, 224, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, color .28s ease !important;
}

.card-icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  overflow: visible !important;
}

.card-icon svg,
.card-icon svg *,
.card-icon path,
.card-icon circle,
.card-icon rect,
.card-icon line,
.card-icon polyline,
.card-icon polygon,
.card-icon ellipse {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}

.service-card a.has-card-icon {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.service-card a.has-card-icon p,
.price-card.has-card-icon p,
.card.has-card-icon p {
  flex: 1 1 auto;
}

.card:hover .card-icon,
.service-card:hover .card-icon,
.price-card:hover .card-icon,
.content-card:hover .card-icon {
  transform: translateY(-3px) scale(1.04) !important;
  color: #ffffff !important;
  border-color: rgba(94, 224, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.17),
    0 18px 34px rgba(22, 40, 90, 0.26),
    0 0 22px rgba(94, 224, 255, 0.18) !important;
}

.price-card.featured .card-icon {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.20), transparent 38%),
    linear-gradient(135deg, rgba(94,224,255,0.30), rgba(107,140,255,0.20) 55%, rgba(139,92,246,0.16)) !important;
}







@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .card-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px !important;
    margin-bottom: 14px !important;
    border-radius: 14px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 10px 20px rgba(0,0,0,0.18) !important;
  }

  .card-icon svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }

  .card::after,
  .service-card::after,
  .price-card::after,
  .content-card::after {
    display: none !important;
  }
}



/* =========================================================
   syslab.kz ICONS ONLY ON HOMEPAGE SELECTED BLOCKS
   Иконки работают только там, где JS добавляет .has-card-icon:
   - главная: "Когда нужна техническая помощь"
   - главная: "Техническое сопровождение сайтов и серверов"
   ========================================================= */

.card:not(.has-card-icon) .card-icon,
.service-card:not(.has-card-icon) .card-icon,
.price-card:not(.has-card-icon) .card-icon,
.content-card:not(.has-card-icon) .card-icon {
  display: none !important;
}

.card:not(.has-card-icon)::after,
.service-card:not(.has-card-icon)::after,
.price-card:not(.has-card-icon)::after,
.content-card:not(.has-card-icon)::after {
  display: none !important;
}












/* =========================================================
   syslab.kz BLOG SIDEBAR FINAL STICKY FIX
   Правый блок "Что важно / Маңызды":
   - без внутреннего скролла;
   - ровно стоит по верху основного блока;
   - при прокрутке остаётся ниже шапки сайта;
   - не заезжает под header.
   ========================================================= */

.article-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr) !important;
  gap: 28px !important;
  align-items: start !important;
  overflow: visible !important;
}

.blog-article {
  align-self: start !important;
}

.blog-sidebar {
  position: sticky !important;
  top: 104px !important;
  align-self: start !important;
  margin-top: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 10 !important;
}

.blog-sidebar.reveal {
  opacity: 0 !important;
  transform: translateY(26px) !important;
  transition: opacity .7s ease, transform .7s ease !important;
  will-change: opacity, transform !important;
}

.blog-sidebar.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Убираем возможный внутренний скролл у вложенных элементов */
.blog-sidebar *,
.blog-sidebar .mini-note,
.blog-sidebar .contact-actions {
  max-height: none !important;
  overflow: visible !important;
}

/* Чтобы якорные переходы не прятали заголовки под шапкой */
.blog-article-section,
.blog-article,
.blog-sidebar {
  scroll-margin-top: 120px !important;
}

@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr) !important;
    gap: 22px !important;
  }

  .blog-sidebar,
  .blog-sidebar.reveal,
  .blog-sidebar.reveal.visible {
    top: 98px !important;
  }
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr !important;
  }

  .blog-sidebar,
  .blog-sidebar.reveal,
  .blog-sidebar.reveal.visible {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Явно сохраняем scroll-reveal для FAQ и sidebar-блоков,
   чтобы они анимировались так же, как остальные карточки сайта. */
main .faq-item.reveal,
main .blog-sidebar.reveal,
main .content-card.reveal {
  opacity: 0 !important;
  transform: translateY(26px) !important;
  transition: opacity .7s ease, transform .7s ease !important;
  will-change: opacity, transform !important;
}

main .faq-item.reveal.visible,
main .blog-sidebar.reveal.visible,
main .content-card.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}






/* =========================================================
   syslab.kz CTA FONT + ALIGN FINAL FIX
   Единый стиль для:
   - Читать кейс →
   - Кейсті оқу →
   - Подробнее →
   - Толығырақ →
   Шрифт легче, высота в карточках выровнена.
   ========================================================= */

/* Карточки со ссылкой выстраиваются колонкой, чтобы CTA был ровно внизу */
.service-card > a,
.blog-card > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
}

.service-card > a > p,
.blog-card > a > p {
  flex: 1 1 auto !important;
}

/* Плашки кейсов не двигаются и не меняют letter-spacing */
.case-meta span,
.small-meta span,
.blog-card .case-meta span,
.blog-card:hover .case-meta span,
.service-card:hover .case-meta span {
  transform: none !important;
  letter-spacing: -0.015em !important;
  font-weight: 600 !important;
}

/* Единый стиль CTA-ссылок */
.card-cta,
.service-card > a > span.card-cta,
.blog-card > a > span.card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  margin-top: auto !important;
  padding-top: 18px !important;
  color: var(--accent, #5ee0ff) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  transform: none !important;
  transition:
    transform .22s ease,
    color .22s ease !important;
}

/* Hover только на самой CTA-ссылке */
.service-card:hover > a > span.card-cta,
.blog-card:hover > a > span.card-cta {
  transform: translateX(3px) !important;
  color: #7ee7ff !important;
  letter-spacing: 0 !important;
}

/* Отменяем старые правила, которые делали любой span жирным/подвижным */
.service-card span:not(.card-cta),
.blog-card span:not(.card-cta),
.service-card:hover span:not(.card-cta),
.blog-card:hover span:not(.card-cta) {
  transform: none !important;
  letter-spacing: inherit !important;
}

/* На мобильных без лишней анимации */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .card-cta,
  .service-card > a > span.card-cta,
  .blog-card > a > span.card-cta,
  .service-card:hover > a > span.card-cta,
  .blog-card:hover > a > span.card-cta {
    transform: none !important;
    transition: none !important;
    font-weight: 500 !important;
  }
}



/* =========================================================
   syslab.kz BLOG SIDEBAR TYPOGRAPHY FIX
   Правый блок "Что важно / Маңызды":
   меньше заголовок, больше воздуха внутри блока.
   ========================================================= */

.blog-sidebar {
  padding: 30px 28px !important;
}

.blog-sidebar .eyebrow {
  margin-bottom: 16px !important;
  font-size: 12px !important;
  letter-spacing: 0.13em !important;
}

.blog-sidebar h2 {
  margin: 0 0 18px !important;
  font-size: clamp(28px, 2.25vw, 36px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.035em !important;
}

.blog-sidebar p {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  line-height: 1.72 !important;
}

.blog-sidebar .mini-note {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  padding: 18px 20px !important;
}

.blog-sidebar .mini-note strong {
  display: block !important;
  margin-bottom: 10px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.blog-sidebar .mini-note span {
  display: block !important;
  line-height: 1.68 !important;
}

.blog-sidebar .compact-actions,
.blog-sidebar .contact-actions {
  gap: 12px !important;
}

@media (max-width: 1100px) {
  .blog-sidebar {
    padding: 28px 24px !important;
  }

  .blog-sidebar h2 {
    font-size: clamp(26px, 2.4vw, 32px) !important;
  }
}

@media (max-width: 900px) {
  .blog-sidebar {
    padding: 26px 22px !important;
  }

  .blog-sidebar h2 {
    font-size: 28px !important;
  }
}



/* =========================================================
   syslab.kz MOBILE ICONS LITE MODE
   На телефонах иконки остаются, но без тяжёлых эффектов:
   - без backdrop-filter;
   - без blur/shine-анимаций;
   - без больших теней;
   - без hover-transform;
   - без светового блика карточек.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .card.has-card-icon::after,
  .service-card.has-card-icon::after,
  .price-card.has-card-icon::after,
  .content-card.has-card-icon::after,
  .card::after,
  .service-card::after,
  .price-card::after,
  .content-card::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    transition: none !important;
  }

  .card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-basis: 40px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    color: #5ee0ff !important;
    background: rgba(94, 224, 255, 0.08) !important;
    border: 1px solid rgba(94, 224, 255, 0.18) !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .card-icon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .card-icon svg *,
  .card-icon path,
  .card-icon circle,
  .card-icon rect,
  .card-icon line,
  .card-icon polyline,
  .card-icon polygon,
  .card-icon ellipse {
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }

  .card:hover .card-icon,
  .service-card:hover .card-icon,
  .price-card:hover .card-icon,
  .content-card:hover .card-icon {
    transform: none !important;
    color: #5ee0ff !important;
    border-color: rgba(94, 224, 255, 0.18) !important;
    box-shadow: none !important;
  }

  .card.has-card-icon *,
  .service-card.has-card-icon * {
    will-change: auto !important;
  }
}


/* =========================================================
   SYSLAB: top-right icons inside homepage cards
   ========================================================= */
.card.has-card-icon {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 24px 92px 24px 24px !important;
}

.service-card.has-card-icon {
  position: relative !important;
}

.service-card a.has-card-icon {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 100% !important;
  padding: 24px 92px 24px 24px !important;
}

.card.has-card-icon .card-icon,
.service-card a.has-card-icon .card-icon {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  margin: 0 !important;
}

.card.has-card-icon h3,
.service-card a.has-card-icon h3 {
  margin: 0 0 12px 0 !important;
  width: 100% !important;
}

.card.has-card-icon p,
.service-card a.has-card-icon p {
  margin: 0 !important;
  width: 100% !important;
  flex: 0 1 auto !important;
}

@media (max-width: 760px) {
  .card.has-card-icon {
    padding: 22px 80px 22px 22px !important;
  }

  .service-card a.has-card-icon {
    padding: 22px 80px 22px 22px !important;
  }

  .card.has-card-icon .card-icon,
  .service-card a.has-card-icon .card-icon {
    top: 20px !important;
    right: 20px !important;
  }
}



/* =========================================================
   syslab.kz SEO / CLEANUP FINAL OVERRIDES
   Небольшие безопасные правки после аудита.
   ========================================================= */

img {
  max-width: 100%;
  height: auto;
}

a {
  text-underline-offset: 3px;
}

main {
  position: relative;
  z-index: 1;
}












/* =========================================================
   syslab.kz FINAL CLEAN HERO / MOBILE / SEO CSS
   Финальный компактный блок после правок:
   - fixed header;
   - аккуратное позиционирование hero;
   - мобильный статичный фон с еле заметной сеткой;
   - корректный перенос строки технологий;
   - аккуратные заголовки карточек услуг.
   ========================================================= */

:root {
  --syslab-header-height: 72px;
}

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transform: none !important;
  will-change: auto !important;
}

body {
  padding-top: var(--syslab-header-height) !important;
}

html {
  scroll-padding-top: calc(var(--syslab-header-height) + 18px) !important;
}

/* Hero vertical balance */
.center-video-hero {
  min-height: calc(100vh - var(--syslab-header-height)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

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

@media (min-width: 761px) {
  .center-video-inner > .center-video-content,
  .center-video-inner > .center-video-content.reveal,
  .center-video-content.reveal.visible {
    transform: translateY(-6vh) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .center-video-inner > .center-video-content,
  .center-video-inner > .center-video-content.reveal,
  .center-video-content.reveal.visible {
    transform: translateY(-4vh) !important;
  }
}

/* Hero tech tags */
.hero-tech-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  max-width: min(860px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.hero-tech-tags span:not(.tag-break) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  color: var(--accent, #5ee0ff) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.hero-tech-tags .tag-break {
  display: none !important;
}

.hero-tech-tags span:not(.tag-break):not(:last-child)::after {
  content: "•" !important;
  margin: 0 9px !important;
  color: rgba(94, 224, 255, 0.75) !important;
}

/* Service cards typography */
.service-card h3,
.service-card a.has-card-icon h3 {
  line-height: 1.28 !important;
  letter-spacing: -0.018em !important;
  margin-bottom: 14px !important;
}

.service-card a.has-card-icon h3 {
  max-width: calc(100% - 54px) !important;
}

.service-card p {
  line-height: 1.62 !important;
}

/* Mobile */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root {
    --syslab-header-height: 72px;
  }

  .site-header {
    min-height: var(--syslab-header-height) !important;
    background:
      linear-gradient(180deg, rgba(4, 10, 20, 0.98), rgba(4, 10, 20, 0.92)) !important;
    border-bottom: 1px solid rgba(94, 224, 255, 0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body {
    background-color: #050b14 !important;
    background-image:
      linear-gradient(rgba(94, 224, 255, 0.010) 1px, transparent 1px),
      linear-gradient(90deg, rgba(94, 224, 255, 0.010) 1px, transparent 1px),
      radial-gradient(circle at 10% 16%, rgba(94, 224, 255, 0.085), transparent 34%),
      radial-gradient(circle at 86% 28%, rgba(56, 104, 255, 0.095), transparent 38%),
      radial-gradient(circle at 62% 78%, rgba(129, 92, 246, 0.070), transparent 42%),
      linear-gradient(135deg, #050b14 0%, #061022 56%, #070b1c 100%) !important;
    background-size:
      32px 32px,
      32px 32px,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100% !important;
    background-position:
      center top,
      center top,
      center top,
      center top,
      center top,
      center top !important;
    background-attachment: scroll !important;
  }

  .center-video-hero {
    min-height: calc(100svh - var(--syslab-header-height)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background-color: #030914 !important;
  }

  .center-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(1.5vh) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .center-video-content .eyebrow {
    margin-bottom: 16px !important;
  }

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

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

  .hero-tech-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px 8px !important;
    max-width: 340px !important;
    margin-bottom: 14px !important;
  }

  .hero-tech-tags .tag-break {
    display: block !important;
    flex-basis: 100% !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .hero-tech-tags span:not(.tag-break) {
    font-size: 10.6px !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
  }

  .hero-tech-tags span:not(.tag-break)::after {
    content: none !important;
  }

  .service-card h3,
  .service-card a.has-card-icon h3 {
    line-height: 1.24 !important;
    margin-bottom: 12px !important;
  }

  .service-card a.has-card-icon h3 {
    max-width: calc(100% - 48px) !important;
  }

  .service-card p {
    line-height: 1.58 !important;
  }

  .bg-grid,
  .dynamic-bg,
  .scroll-ambient,
  .glow,
  .glow-1,
  .glow-2,
  .glow-3 {
    display: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  body::before,
  body::after {
    display: none !important;
  }

  .site-header,
  main,
  footer {
    position: relative !important;
    z-index: 2 !important;
  }

  .site-header {
    position: fixed !important;
    z-index: 9999 !important;
  }

  section,
  .section {
    background-color: transparent !important;
  }
}

@media (max-width: 760px) and (max-height: 760px) {
  .center-video-inner > .center-video-content,
  .center-video-inner > .center-video-content.reveal,
  .center-video-content.reveal.visible {
    transform: translateY(0) !important;
  }
}






/* =========================================================
   syslab.kz MOBILE VIDEO LOAD + SOFT FOOTER FINAL
   - Видео на мобильной версии видно, если файл доступен.
   - Плавный переход от hero-видео к основному фону.
   - Футер чуть светлее, без видимой сетки.
   ========================================================= */

.center-video-bg {
  display: block !important;
  visibility: visible !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .center-video-hero {
    position: relative !important;
    overflow: hidden !important;
    background-color: #030914 !important;
  }

  .center-video-bg {
    display: block !important;
    visibility: visible !important;
    opacity: 0.74 !important;
    filter: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    z-index: 0 !important;
  }

  .center-video-fallback {
    z-index: -1 !important;
  }

  .center-video-overlay {
    z-index: 1 !important;
    background:
      linear-gradient(
        180deg,
        rgba(3, 9, 20, 0.34) 0%,
        rgba(3, 9, 20, 0.54) 48%,
        rgba(3, 9, 20, 0.74) 100%
      ) !important;
  }

  .center-video-inner {
    position: relative !important;
    z-index: 3 !important;
  }

  .center-video-hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 260px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(
      180deg,
      rgba(3, 9, 20, 0) 0%,
      rgba(3, 9, 20, 0.42) 35%,
      rgba(4, 10, 20, 0.82) 72%,
      #050b14 100%
    ) !important;
  }

  .center-video-hero + .section,
  .center-video-hero + section {
    background:
      linear-gradient(
        180deg,
        #050b14 0%,
        rgba(5, 12, 24, 0.98) 130px,
        transparent 300px
      ) !important;
  }

  .site-footer,
  footer {
    position: relative !important;
    z-index: 3 !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(94, 224, 255, 0.055), transparent 34%),
      radial-gradient(circle at 86% 12%, rgba(56, 104, 255, 0.060), transparent 36%),
      linear-gradient(180deg, rgba(8, 15, 30, 0.96), rgba(5, 11, 20, 0.98)) !important;
    background-color: #070d18 !important;
    border-top: 1px solid rgba(94, 224, 255, 0.10) !important;
    overflow: hidden !important;
  }

  .site-footer::before,
  .site-footer::after,
  footer::before,
  footer::after {
    content: none !important;
    display: none !important;
  }

  .site-footer .container,
  footer .container,
  .footer-inner {
    position: relative !important;
    z-index: 2 !important;
  }
}




/* =========================================================
   syslab.kz SEO FINAL FIXES
   - H1 has stable SEO aria-label.
   - Typewriter cursor is decorative CSS, not text.
   - Header/footer safe edges preserved.
   ========================================================= */

/* Убираем старый текстовый курсор из DOM, если он где-то остался */
.typing-caret {
  display: none !important;
}

/* Декоративный курсор через CSS, чтобы символ "|" не попадал в текст H1 */
.typewriter-title .typing-line::after {
  content: "|" !important;
  display: inline-block !important;
  margin-left: 1px !important;
  color: var(--accent, #5ee0ff) !important;
  animation: caretBlink 0.8s steps(1) infinite !important;
}

/* Десктоп: одинаковые безопасные отступы у шапки и футера */
@media (min-width: 1024px) {
  .site-header .container,
  .site-header .container.header-inner,
  .site-header .header-inner,
  .site-footer .container,
  .site-footer .container.footer-inner,
  .site-footer .footer-inner,
  footer .container,
  footer .container.footer-inner,
  footer .footer-inner {
    width: min(1140px, calc(100% - 96px)) !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Планшеты / узкий десктоп */
@media (min-width: 761px) and (max-width: 1023px) {
  .site-header .container,
  .site-header .container.header-inner,
  .site-header .header-inner,
  .site-footer .container,
  .site-footer .container.footer-inner,
  .site-footer .footer-inner,
  footer .container,
  footer .container.footer-inner,
  footer .footer-inner {
    width: calc(100% - 64px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Мобильная версия */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-header .container,
  .site-header .container.header-inner,
  .site-header .header-inner,
  .site-footer .container,
  .site-footer .container.footer-inner,
  .site-footer .footer-inner,
  footer .container,
  footer .container.footer-inner,
  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;
  }
}






/* =========================================================
   syslab.kz TYPEWRITER CURSOR ON TEXT FINAL
   Курсор привязан к самому печатаемому тексту #typed-text,
   а не к контейнеру строки. Это убирает большой пробел перед "|".
   ========================================================= */

/* Старый курсор у контейнера полностью отключаем */
.typewriter-title .typing-line::after {
  content: none !important;
  display: none !important;
}

/* Строка с печатаемым текстом не должна растягивать курсор */
.typewriter-title .typing-line {
  display: inline !important;
  white-space: normal !important;
}

/* Печатаемый текст и курсор находятся в одном inline-потоке */
#typed-text {
  display: inline !important;
  white-space: normal !important;
}

#typed-text::after {
  content: "|" !important;
  display: inline-block !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  color: var(--accent, #5ee0ff) !important;
  animation: caretBlink 0.8s steps(1) infinite !important;
  transform: translateX(1px) !important;
}

/* На мобильной версии так же без лишнего отступа */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .typewriter-title .typing-line {
    display: inline !important;
  }

  #typed-text {
    display: inline !important;
  }

  #typed-text::after {
    margin-left: 0 !important;
    transform: translateX(1px) !important;
  }
}



/* =========================================================
   syslab.kz MOBILE MENU SMOOTH DROPDOWN
   Плавное мобильное меню из шапки:
   - раскрывается сверху вниз;
   - без пустых боковых зазоров;
   - затемняет фон под меню;
   - burger плавно превращается в крестик.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-header {
    overflow: visible !important;
    z-index: 10000 !important;
  }

  .site-header::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--syslab-header-height, 72px) !important;
    bottom: 0 !important;
    z-index: 9997 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: rgba(2, 7, 14, 0.42) !important;
    transition: opacity .28s ease !important;
  }

  body.nav-open .site-header::after {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .nav-toggle {
    position: relative !important;
    z-index: 10001 !important;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(147, 176, 216, 0.22) !important;
    background: rgba(7, 14, 27, 0.76) !important;
    transition:
      border-color .22s ease,
      background .22s ease,
      box-shadow .22s ease !important;
  }

  .nav-toggle:hover,
  .nav-toggle[aria-expanded="true"] {
    border-color: rgba(94, 224, 255, 0.34) !important;
    background: rgba(10, 20, 38, 0.92) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26) !important;
  }

  .nav-toggle span {
    position: absolute !important;
    left: 50% !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(238, 244, 255, 0.94) !important;
    transform: translateX(-50%) !important;
    transition:
      transform .24s ease,
      opacity .18s ease,
      top .24s ease !important;
  }

  .nav-toggle span:nth-child(1) {
    top: 15px !important;
  }

  .nav-toggle span:nth-child(2) {
    top: 22px !important;
  }

  .nav-toggle span:nth-child(3) {
    top: 29px !important;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    top: 22px !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(0.4) !important;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 22px !important;
    transform: translateX(-50%) rotate(-45deg) !important;
  }

  .main-nav {
    position: fixed !important;
    top: var(--syslab-header-height, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    overflow: hidden !important;

    border: 0 !important;
    border-top: 1px solid rgba(94, 224, 255, 0.10) !important;
    border-bottom: 1px solid rgba(94, 224, 255, 0.16) !important;
    border-radius: 0 0 22px 22px !important;
    background:
      linear-gradient(180deg, rgba(4, 10, 20, 0.98), rgba(5, 12, 24, 0.96)) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42) !important;

    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-16px) !important;
    clip-path: inset(0 0 100% 0 round 0 0 22px 22px) !important;

    transition:
      max-height .38s cubic-bezier(.22, .9, .26, 1),
      opacity .24s ease,
      transform .38s cubic-bezier(.22, .9, .26, 1),
      clip-path .38s cubic-bezier(.22, .9, .26, 1),
      padding .38s cubic-bezier(.22, .9, .26, 1) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .main-nav.is-open {
    max-height: min(70vh, 440px) !important;
    padding: 12px 16px 14px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    clip-path: inset(0 0 0 0 round 0 0 22px 22px) !important;
  }

  .main-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 52px !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(147, 176, 216, 0.10) !important;
    color: rgba(198, 213, 236, 0.92) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;

    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition:
      opacity .26s ease,
      transform .28s ease,
      color .18s ease,
      background .18s ease !important;
  }

  .main-nav a:last-child {
    border-bottom: 0 !important;
  }

  .main-nav.is-open a {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .main-nav.is-open a:nth-child(1) { transition-delay: .04s !important; }
  .main-nav.is-open a:nth-child(2) { transition-delay: .07s !important; }
  .main-nav.is-open a:nth-child(3) { transition-delay: .10s !important; }
  .main-nav.is-open a:nth-child(4) { transition-delay: .13s !important; }
  .main-nav.is-open a:nth-child(5) { transition-delay: .16s !important; }
  .main-nav.is-open a:nth-child(6) { transition-delay: .19s !important; }

  .main-nav a::after {
    content: none !important;
    display: none !important;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    color: #eef4ff !important;
    background: transparent !important;
  }

  .main-nav .lang-switch {
    justify-content: center !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    border: 1px solid rgba(94, 224, 255, 0.22) !important;
    border-radius: 14px !important;
    color: rgba(238, 244, 255, 0.94) !important;
    background: rgba(94, 224, 255, 0.06) !important;
  }

  body.nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .main-nav,
  .main-nav a,
  .nav-toggle,
  .nav-toggle span,
  .site-header::after {
    transition: none !important;
  }
}



/* =========================================================
   syslab.kz MOBILE PERFORMANCE + TAP HIGHLIGHT FIX
   Оптимизация мобильных анимаций:
   - меню открывается через transform + opacity вместо max-height/clip-path;
   - меньше layout-пересчётов на телефоне;
   - убрано некрасивое квадратное выделение при тапе;
   - focus-visible для клавиатуры сохранён.
   ========================================================= */

/* Убираем стандартное квадратное выделение при тапе на Android/iOS */
html,
body,
a,
button,
summary,
input,
textarea,
select,
.btn,
.nav-toggle,
.main-nav a,
.quick-links a,
.lang-switch {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none;
}

a,
button,
summary,
.btn,
.nav-toggle,
.main-nav a,
.quick-links a,
.lang-switch {
  touch-action: manipulation !important;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.nav-toggle:focus:not(:focus-visible),
.main-nav a:focus:not(:focus-visible),
.quick-links a:focus:not(:focus-visible),
.lang-switch:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

a:active,
button:active,
summary:active,
.btn:active,
.nav-toggle:active,
.main-nav a:active,
.quick-links a:active,
.lang-switch:active {
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* Оставляем нормальную обводку только для клавиатурной навигации */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
.main-nav a:focus-visible,
.quick-links a:focus-visible,
.lang-switch:focus-visible {
  outline: 2px solid rgba(94, 224, 255, 0.55) !important;
  outline-offset: 3px !important;
}

/* Мобильная оптимизация меню */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-header {
    contain: layout paint style !important;
    overflow: visible !important;
    z-index: 10000 !important;
  }

  .site-header::after {
    will-change: opacity !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    transition: opacity .22s ease !important;
  }

  .nav-toggle {
    contain: layout paint style !important;
    will-change: transform, background-color, border-color !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .nav-toggle span {
    will-change: transform, opacity !important;
    transform: translate3d(-50%, 0, 0) !important;
    backface-visibility: hidden !important;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translate3d(-50%, 0, 0) rotate(45deg) !important;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
    transform: translate3d(-50%, 0, 0) scaleX(0.4) !important;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translate3d(-50%, 0, 0) rotate(-45deg) !important;
  }

  /*
    ВАЖНО: переопределяем старое меню.
    Старое было через max-height + clip-path, это может лагать.
    Новое: transform + opacity + visibility.
  */
  .main-nav {
    position: fixed !important;
    top: var(--syslab-header-height, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 16px 14px !important;
    overflow: hidden !important;

    border: 0 !important;
    border-top: 1px solid rgba(94, 224, 255, 0.10) !important;
    border-bottom: 1px solid rgba(94, 224, 255, 0.16) !important;
    border-radius: 0 0 22px 22px !important;
    background:
      linear-gradient(180deg, rgba(4, 10, 20, 0.98), rgba(5, 12, 24, 0.96)) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform-origin: top center !important;
    transform: translate3d(0, -12px, 0) scaleY(0.965) !important;
    clip-path: none !important;

    contain: layout paint style !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;

    transition:
      transform .24s cubic-bezier(.22, .9, .26, 1),
      opacity .18s ease,
      visibility 0s linear .24s !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

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

  .main-nav a {
    min-height: 50px !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    -webkit-user-select: none !important;
    user-select: none !important;

    opacity: 1 !important;
    transform: none !important;
    transition:
      color .16s ease,
      background-color .16s ease !important;
    will-change: auto !important;
  }

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

  .main-nav a:active,
  .main-nav .lang-switch:active,
  .btn:active,
  .quick-links a:active {
    background-color: rgba(94, 224, 255, 0.08) !important;
    transform: none !important;
  }

  body.nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }
}

/* Для слабых устройств и reduced motion оставляем почти такую же визуально, но без лишних transition */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .site-header::after,
  .main-nav,
  .main-nav.is-open,
  .main-nav a,
  .nav-toggle,
  .nav-toggle span {
    transition: none !important;
    will-change: auto !important;
  }
}



/* =========================================================
   syslab.kz MOBILE MENU VISIBLE + HERO BUTTONS WIDTH FIX
   - Исправляет проблему, когда burger превращается в крестик,
     но меню не видно.
   - Причина: contain: paint/style на .site-header может обрезать
     fixed/absolute меню внутри шапки.
   - Кнопки hero на мобильной версии сделаны уже и аккуратнее.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  /* Нельзя использовать contain: paint на header, иначе меню может обрезаться */
  .site-header {
    contain: none !important;
    overflow: visible !important;
    z-index: 10000 !important;
  }

  .site-header .container,
  .site-header .header-inner,
  .site-header .container.header-inner {
    overflow: visible !important;
    contain: none !important;
  }

  .main-nav {
    position: fixed !important;
    top: var(--syslab-header-height, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -12px, 0) scaleY(0.965) !important;
    transform-origin: top center !important;

    max-height: none !important;
    height: auto !important;
    clip-path: none !important;
    margin: 0 !important;
    padding: 12px 16px 14px !important;

    border: 0 !important;
    border-top: 1px solid rgba(94, 224, 255, 0.10) !important;
    border-bottom: 1px solid rgba(94, 224, 255, 0.16) !important;
    border-radius: 0 0 22px 22px !important;
    background:
      linear-gradient(180deg, rgba(4, 10, 20, 0.985), rgba(5, 12, 24, 0.965)) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34) !important;

    transition:
      transform .24s cubic-bezier(.22, .9, .26, 1),
      opacity .18s ease,
      visibility 0s linear .24s !important;

    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    contain: layout style !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .main-nav.is-open,
  body.nav-open .main-nav {
    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 .18s ease,
      visibility 0s linear 0s !important;
  }

  .nav-toggle {
    z-index: 10001 !important;
  }

  /* Затемнение фона под открытым меню */
  body.nav-open::before {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--syslab-header-height, 72px) !important;
    bottom: 0 !important;
    z-index: 9997 !important;
    background: rgba(2, 7, 14, 0.42) !important;
    pointer-events: none !important;
  }

  /* Hero-кнопки не растягиваются слишком широко */
  .center-video-content .hero-actions,
  .center-video-content .center-actions,
  .hero-actions,
  .center-actions {
    align-items: center !important;
  }

  .center-video-content .hero-actions .btn,
  .center-video-content .center-actions .btn,
  .hero-actions .btn,
  .center-actions .btn {
    width: min(100%, 370px) !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .center-video-content .hero-actions .btn-primary,
  .center-video-content .center-actions .btn-primary {
    max-width: 390px !important;
  }
}

@media (max-width: 390px) {
  .center-video-content .hero-actions .btn,
  .center-video-content .center-actions .btn,
  .hero-actions .btn,
  .center-actions .btn {
    width: calc(100% - 28px) !important;
    max-width: 340px !important;
  }
}



/* =========================================================
   syslab.kz BURGER FINAL FIX
   Один JS-обработчик + меню поверх страницы.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-header,
  .site-header .container,
  .site-header .header-inner,
  .site-header .container.header-inner {
    overflow: visible !important;
    contain: none !important;
  }

  .nav-toggle {
    pointer-events: auto !important;
    z-index: 10002 !important;
  }

  .main-nav {
    pointer-events: none !important;
    z-index: 10001 !important;
  }

  .main-nav.is-open,
  body.nav-open .main-nav {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) scaleY(1) !important;
  }

  body.nav-open::before {
    z-index: 10000 !important;
  }
}



/* =========================================================
   syslab.kz MOBILE HEADER LANGUAGE + FOOTER TOP RIGHT
   - На мобильной версии переключатель языка вынесен в шапку слева от burger.
   - В раскрытом мобильном меню переключатель языка скрыт.
   - В подвале "Наверх / Жоғары" всегда справа.
   ========================================================= */

.header-lang-mobile {
  display: none;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .header-inner {
    display: flex !important;
    align-items: center !important;
  }

  .logo {
    margin-right: auto !important;
  }

  .header-lang-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    margin-left: auto !important;
    margin-right: 10px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(94, 224, 255, 0.28) !important;
    background: rgba(7, 14, 27, 0.76) !important;
    color: rgba(238, 244, 255, 0.94) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    transition:
      border-color .18s ease,
      background-color .18s ease,
      color .18s ease !important;
  }

  .header-lang-mobile:active {
    background: rgba(94, 224, 255, 0.10) !important;
    border-color: rgba(94, 224, 255, 0.45) !important;
  }

  /* В мобильном выпадающем меню язык больше не нужен */
  .main-nav .lang-switch {
    display: none !important;
  }

  /* Если язык скрыт, последний видимый пункт не должен иметь нижнюю линию */
  .main-nav a:nth-last-child(2) {
    border-bottom: 0 !important;
  }
}

/* Подвал: "Наверх / Жоғары" всегда справа */
.site-footer .footer-inner,
footer .footer-inner,
.site-footer .container.footer-inner,
footer .container.footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.site-footer a[href="#top"],
footer a[href="#top"],
.site-footer a[href="/#top"],
footer a[href="/#top"],
.site-footer a[href="/kz/#top"],
footer a[href="/kz/#top"] {
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-footer .footer-inner,
  footer .footer-inner,
  .site-footer .container.footer-inner,
  footer .container.footer-inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .site-footer a[href="#top"],
  footer a[href="#top"],
  .site-footer a[href="/#top"],
  footer a[href="/#top"],
  .site-footer a[href="/kz/#top"],
  footer a[href="/kz/#top"] {
    margin-left: auto !important;
    text-align: right !important;
  }
}



/* =========================================================
   syslab.kz MOBILE LANGUAGE PILL REFINEMENT
   Переключатель языка в мобильной шапке сделан легче:
   - не выглядит как вторая burger-кнопка;
   - компактная pill-форма;
   - меньше визуального веса рядом с меню.
   ========================================================= */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .header-lang-mobile {
    width: auto !important;
    min-width: 42px !important;
    height: 34px !important;
    padding: 0 11px !important;
    margin-left: auto !important;
    margin-right: 9px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(94, 224, 255, 0.22) !important;
    background: rgba(94, 224, 255, 0.045) !important;
    color: rgba(238, 244, 255, 0.88) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;

    box-shadow: none !important;
    transform: translateY(0) !important;
    transition:
      color .18s ease,
      border-color .18s ease,
      background-color .18s ease !important;
  }

  .header-lang-mobile:hover,
  .header-lang-mobile:focus-visible {
    color: #eef4ff !important;
    border-color: rgba(94, 224, 255, 0.42) !important;
    background: rgba(94, 224, 255, 0.075) !important;
  }

  .header-lang-mobile:active {
    color: #ffffff !important;
    border-color: rgba(94, 224, 255, 0.48) !important;
    background: rgba(94, 224, 255, 0.10) !important;
    transform: translateY(0) !important;
  }

  .nav-toggle {
    width: 46px !important;
    height: 46px !important;
  }
}

@media (max-width: 370px) {
  .header-lang-mobile {
    min-width: 38px !important;
    height: 32px !important;
    padding: 0 9px !important;
    margin-right: 7px !important;
    font-size: 11px !important;
  }
}



/* =========================================================
   syslab.kz FOOTER TEXT ALIGN FIX
   Выравнивает © 2026 syslab.kz и Наверх / Жоғары по одной линии.
   ========================================================= */

.site-footer .footer-inner,
footer .footer-inner,
.site-footer .container.footer-inner,
footer .container.footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.site-footer .footer-inner > *,
footer .footer-inner > *,
.site-footer .container.footer-inner > *,
footer .container.footer-inner > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.site-footer a[href="#top"],
footer a[href="#top"],
.site-footer a[href="/#top"],
footer a[href="/#top"],
.site-footer a[href="/kz/#top"],
footer a[href="/kz/#top"] {
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;
  transform: none !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-footer .footer-inner,
  footer .footer-inner,
  .site-footer .container.footer-inner,
  footer .container.footer-inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-footer .footer-inner > *,
  footer .footer-inner > *,
  .site-footer .container.footer-inner > *,
  footer .container.footer-inner > * {
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}



/* =========================================================
   syslab.kz FOOTER COPYRIGHT FORMAT
   Формат футера: ©syslab.kz 2026
   ========================================================= */

.site-footer .footer-inner,
footer .footer-inner {
  column-gap: 18px !important;
}

.site-footer .footer-inner > *,
footer .footer-inner > * {
  white-space: nowrap !important;
}



/* =========================================================
   syslab.kz FOOTER COPYRIGHT GAP FIX
   Исправляет слипание: ©syslab.kz2026 -> ©syslab.kz 2026
   Причина была в inline-flex у <p>, где обычный пробел схлопывался.
   ========================================================= */

.site-footer .footer-copy,
footer .footer-copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.site-footer .footer-copy span,
footer .footer-copy span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-footer .footer-copy,
  footer .footer-copy {
    gap: 5px !important;
  }
}



/* =========================================================
   syslab.kz DESKTOP VIDEO LIGHTER + HERO BLUR BUTTONS + FOOTER © 2026
   ========================================================= */

/* Футер: формат © 2026 */
.site-footer .footer-copy,
footer .footer-copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

/* Десктоп: видео на первом экране немного светлее */
@media (min-width: 761px) {
  .center-video-bg,
  .hero-video-bg,
  .hero-video,
  .video-bg,
  .hero video,
  .center-video-hero video {
    filter: brightness(0.88) contrast(1.03) saturate(1.05) !important;
  }

  .center-video-overlay,
  .hero-video-overlay,
  .video-overlay,
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(5,11,20,0.22) 0%, rgba(5,11,20,0.34) 50%, rgba(5,11,20,0.52) 100%),
      radial-gradient(circle at center, rgba(94,224,255,0.08), transparent 55%) !important;
  }

  /* Верхние secondary-кнопки: WhatsApp / Смотреть услуги с blur */
  .center-video-hero .hero-actions .btn-ghost,
  .center-video-hero .hero-actions a[href*="wa.me"],
  .hero .hero-actions .btn-ghost,
  .hero .hero-actions a[href*="wa.me"],
  .hero-actions .btn-ghost,
  .hero-actions a[href*="wa.me"] {
    background: rgba(8, 18, 34, 0.42) !important;
    border-color: rgba(94, 224, 255, 0.24) !important;
    color: rgba(238, 244, 255, 0.90) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 14px 34px rgba(0,0,0,0.18) !important;
  }

  .center-video-hero .hero-actions .btn-ghost:hover,
  .center-video-hero .hero-actions a[href*="wa.me"]:hover,
  .hero .hero-actions .btn-ghost:hover,
  .hero .hero-actions a[href*="wa.me"]:hover,
  .hero-actions .btn-ghost:hover,
  .hero-actions a[href*="wa.me"]:hover {
    background: rgba(14, 28, 50, 0.54) !important;
    border-color: rgba(94, 224, 255, 0.38) !important;
  }
}






/* =========================================================
   syslab.kz HERO GLASS BUTTONS WITHOUT BLUR JUMP
   Настоящий backdrop-filter убран, т.к. он резко дорисовывается браузером при первом рендере.
   Вместо него используется стабильный glass-эффект без скачка.
   ========================================================= */

@media (min-width: 761px) {
  .center-video-hero .hero-actions .btn-ghost,
  .center-video-hero .hero-actions a[href*="wa.me"],
  .hero .hero-actions .btn-ghost,
  .hero .hero-actions a[href*="wa.me"],
  .hero-actions .btn-ghost,
  .hero-actions a[href*="wa.me"] {
    background:
      linear-gradient(180deg, rgba(17, 31, 52, .62), rgba(8, 18, 34, .50)) !important;
    border-color: rgba(94, 224, 255, .26) !important;
    color: rgba(238, 244, 255, .92) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -18px 36px rgba(94,224,255,.035),
      0 14px 34px rgba(0,0,0,.18) !important;
    animation: none !important;
    transition:
      background-color .22s ease,
      border-color .22s ease,
      box-shadow .22s ease,
      transform .22s ease !important;
  }

  .center-video-hero .hero-actions .btn-ghost:hover,
  .center-video-hero .hero-actions a[href*="wa.me"]:hover,
  .hero .hero-actions .btn-ghost:hover,
  .hero .hero-actions a[href*="wa.me"]:hover,
  .hero-actions .btn-ghost:hover,
  .hero-actions a[href*="wa.me"]:hover {
    background:
      linear-gradient(180deg, rgba(22, 39, 64, .70), rgba(10, 23, 42, .58)) !important;
    border-color: rgba(94, 224, 255, .38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -18px 38px rgba(94,224,255,.055),
      0 16px 38px rgba(0,0,0,.22) !important;
  }
}


/* =========================================================
   SYSLAB FAQ STABLE ACCORDION
   Стабильное раскрытие без мерцания: FAQ больше не использует
   backdrop-filter и hover-transform, чтобы не конфликтовать с
   анимированным фоном.
   ========================================================= */

.faq-item {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
  cursor: pointer !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.faq-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  background:
    linear-gradient(135deg, rgba(94, 224, 255, .035), rgba(124, 92, 255, .03)),
    radial-gradient(circle at 12% 0%, rgba(94, 224, 255, .06), transparent 36%) !important;
  transition: opacity .22s ease !important;
}

.faq-item > summary,
.faq-item .faq-content {
  position: relative !important;
  z-index: 1 !important;
}

.faq-item[open],
.faq-item.is-opening,
.faq-item:hover,
.faq-item.faq-animated:hover {
  border-color: rgba(94,224,255,0.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.038)) !important;
  box-shadow: var(--shadow) !important;
}

/* Убираем движение всей плашки на hover — оно вызывало перерасчёт blur/fon и артефакты. */
.faq-item:hover,
.faq-item.faq-animated:hover {
  transform: none !important;
}

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

.faq-item summary {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
}

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

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

.faq-item summary::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid rgba(94, 224, 255, .96) !important;
  transform: rotate(0deg) !important;
  transform-origin: 45% 50% !important;
  transition: transform .30s cubic-bezier(.22, 1, .36, 1), filter .22s ease !important;
}

.faq-item[open] summary::before,
.faq-item.is-opening summary::before {
  transform: rotate(90deg) !important;
  filter: drop-shadow(0 0 7px rgba(94, 224, 255, .42)) !important;
}

.faq-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: none !important;
  transition:
    height .36s cubic-bezier(.22, 1, .36, 1),
    opacity .18s linear !important;
  will-change: height, opacity;
}

.faq-item[open] .faq-content {
  opacity: 1;
  transform: none !important;
}

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

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

.faq-item.is-closing .faq-content {
  opacity: 0;
  transform: none !important;
}

.card,
.step,
.hero-image-card,
.content-card,
.contact-box,
.price-card {
  cursor: default !important;
}

.card:hover,
.step:hover,
.hero-image-card:hover,
.content-card:hover,
.contact-box:hover,
.price-card:hover {
  transform: none !important;
  border-color: var(--border) !important;
}

.price-card.featured:hover {
  border-color: rgba(94,224,255,0.34) !important;
  background: linear-gradient(180deg, rgba(94,224,255,0.12), rgba(255,255,255,0.04)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item::after,
  .faq-item summary::before,
  .faq-content {
    transition: none !important;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .faq-item {
    contain: layout paint !important;
  }

  .faq-item summary {
    gap: 9px !important;
  }

  .faq-item summary::before {
    border-top-width: 5px !important;
    border-bottom-width: 5px !important;
    border-left-width: 8px !important;
  }
}

/* =========================================================
   SYSLAB FAQ MOBILE LITE ANIMATION
   На телефонах раскрытие FAQ больше не анимирует height.
   Остаётся лёгкая анимация стрелки и появления текста через
   opacity/translate — меньше repaint/reflow и без тормозов.
   ========================================================= */

@keyframes faqMobileContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes faqMobileContentOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -3px, 0);
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .faq-item,
  .faq-item[open],
  .faq-item.is-opening,
  .faq-item:hover,
  .faq-item.faq-animated:hover {
    contain: paint !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
    transition: border-color .14s ease !important;
    transform: none !important;
  }

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

  .faq-item::after {
    display: block !important;
    opacity: 0 !important;
    background:
      linear-gradient(135deg, rgba(94, 224, 255, .035), rgba(124, 92, 255, .03)),
      radial-gradient(circle at 12% 0%, rgba(94, 224, 255, .06), transparent 36%) !important;
    transition: none !important;
  }

  .faq-content {
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .faq-item[open] .faq-content {
    animation: faqMobileContentIn .16s ease-out both !important;
    will-change: opacity, transform !important;
  }

  .faq-item.is-mobile-closing .faq-content {
    animation: faqMobileContentOut .12s ease-in both !important;
    will-change: opacity, transform !important;
  }

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

  .faq-item summary {
    gap: 9px !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .faq-item summary::before {
    border-top-width: 5px !important;
    border-bottom-width: 5px !important;
    border-left-width: 8px !important;
    transition: transform .16s ease-out !important;
    filter: none !important;
    will-change: transform !important;
  }

  .faq-item[open] summary::before,
  .faq-item.is-opening summary::before,
  .faq-item.is-mobile-opening summary::before {
    transform: rotate(90deg) !important;
    filter: none !important;
  }

  .faq-item.is-mobile-closing summary::before {
    transform: rotate(0deg) !important;
    filter: none !important;
  }
}



/* SYSLAB FORMAT CARDS HOVER FIX */
.formats .price-card,
.formats .price-card * {
  cursor: default !important;
}

.formats .price-card:hover {
  transform: none !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.formats .price-card.featured:hover {
  transform: none !important;
  border-color: rgba(94,224,255,0.34) !important;
  background: linear-gradient(180deg, rgba(94,224,255,0.12), rgba(255,255,255,0.04)) !important;
  box-shadow: var(--shadow) !important;
}


/* SYSLAB BLOG ARTICLE REVEAL GUARD */
.blog-article-section .blog-article.reveal:not(.visible),
.blog-article-section .blog-sidebar.reveal:not(.visible) {
  pointer-events: none !important;
}

.blog-article-section .blog-article.reveal.visible,
.blog-article-section .blog-sidebar.reveal.visible {
  pointer-events: auto !important;
}

/* =========================================================
   Mobile floating contact buttons
   ========================================================= */
.mobile-floating-contacts {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(94, 224, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(13, 29, 50, 0.90), rgba(5, 13, 27, 0.88));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 22px, 0) scale(0.90);
  transform-origin: center bottom;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Important is intentional: mobile performance mode above globally shortens transitions. */
.mobile-floating-contacts.is-ready {
  transition-property: opacity, transform !important;
  transition-duration: .42s, .48s !important;
  transition-timing-function: ease, cubic-bezier(.18, .86, .26, 1) !important;
  transition-delay: 0s, 0s !important;
}

.mobile-floating-contacts.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.mobile-floating-contact {
  position: relative;
  overflow: hidden;
  width: 54px;
  height: 54px;
  min-width: 54px;
  flex: 0 0 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  opacity: 1;
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}

.mobile-floating-contact svg {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
}

.mobile-floating-contact svg,
.mobile-floating-contact svg *,
.mobile-floating-contact svg path,
.mobile-floating-contact svg circle,
.mobile-floating-contact svg g {
  fill: #fff !important;
  stroke: none !important;
}

.mobile-floating-contact--telegram {
  color: #fff;
  background: linear-gradient(135deg, #2bb8ff 0%, #2872f0 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 30px rgba(39, 119, 246, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.mobile-floating-contact--telegram svg {
  width: 30px;
  height: 30px;
  transform: translateX(0) translateY(0);
}

.mobile-floating-contact--whatsapp {
  color: #fff;
  background: linear-gradient(180deg, rgba(18, 37, 62, 0.98), rgba(6, 18, 34, 0.98));
  border-color: rgba(94, 224, 255, 0.24);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.mobile-floating-contact--whatsapp svg {
  width: 29px;
  height: 29px;
  transform: translateX(0) translateY(0);
}

.mobile-floating-contact:active {
  transform: translateY(1px) scale(0.94) !important;
}

.mobile-floating-contact__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .mobile-floating-contacts {
    display: flex;
  }

  body.nav-open .mobile-floating-contacts {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 22px, 0) scale(0.90);
  }
}

@media (max-width: 380px) {
  .mobile-floating-contacts {
    gap: 7px;
    padding: 5px;
  }

  .mobile-floating-contact {
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex-basis: 50px;
  }

  .mobile-floating-contact svg {
    width: 29px;
    height: 29px;
  }

  .mobile-floating-contact--telegram svg {
    width: 27px;
    height: 27px;
    transform: translateX(0) translateY(0);
  }

  .mobile-floating-contact--whatsapp svg {
    width: 26px;
    height: 26px;
    transform: translateX(0) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-floating-contacts {
    transition: none !important;
  }
}

/* =========================================================
   SYSLAB CLEAN MOBILE CAROUSELS
   Блоки "Блог" и "Форматы работы" становятся каруселями
   только на реальном мобильном/touch-устройстве.
   Десктоп, включая суженное окно браузера, остаётся обычной сеткой.
   ========================================================= */

.syslab-mobile-carousel-dots {
  display: none !important;
}

@media (max-width: 760px) and (pointer: coarse), (max-width: 760px) and (hover: none) {
  .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 .section-head > p:not(.eyebrow),
  .formats .section-head > p:not(.eyebrow) {
    max-width: 34ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    line-height: 1.55 !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: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 2px 24px 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 24px !important;
    scroll-padding-right: 24px !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) 14px,
      rgba(0,0,0,1) calc(100% - 14px),
      rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to right,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,1) 14px,
      rgba(0,0,0,1) calc(100% - 14px),
      rgba(0,0,0,0) 100%) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !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: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    outline: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !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;
    -webkit-tap-highlight-color: transparent !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;
  }

  .blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:hover,
  .blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:hover,
  .formats .pricing-grid.is-syslab-mobile-carousel .price-card:hover,
  .formats .pricing-grid.is-syslab-mobile-carousel .price-card.featured:hover,
  .blog-preview .blog-grid.is-syslab-mobile-carousel .service-card:active,
  .blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card:active,
  .formats .pricing-grid.is-syslab-mobile-carousel .price-card:active {
    transform: translate3d(0, 0, 0) !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    outline: none !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 {
    border-color: rgba(94,224,255,0.34) !important;
    background: linear-gradient(180deg, rgba(94,224,255,0.12), rgba(255,255,255,0.04)) !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 .blog-card::before,
  .blog-preview .blog-grid.is-syslab-mobile-carousel .blog-card::after,
  .formats .pricing-grid.is-syslab-mobile-carousel .price-card::before,
  .formats .pricing-grid.is-syslab-mobile-carousel .price-card::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-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: 10px 0 0 !important;
  }

  .syslab-mobile-carousel-dot,
  .syslab-mobile-carousel-dot.is-active,
  .syslab-mobile-carousel-dot[aria-current="true"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(94, 224, 255, 0.24) !important;
    opacity: 0.58 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: scale(0.95) !important;
    transform-origin: center center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform .22s ease, opacity .22s ease, background .22s ease, box-shadow .22s ease !important;
  }

  .syslab-mobile-carousel-dot::before {
    content: none !important;
    display: none !important;
  }

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

  .syslab-mobile-carousel-dot.is-active,
  .syslab-mobile-carousel-dot[aria-current="true"] {
    background: rgba(94, 224, 255, 0.32) !important;
    opacity: 1 !important;
    box-shadow: 0 0 12px rgba(94, 224, 255, 0.28) !important;
    transform: scale(1.18) !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;
  }
}

@media (min-width: 761px), (hover: hover) and (pointer: fine) {
  .syslab-mobile-carousel-dots,
  .syslab-mobile-carousel-dots.is-enabled {
    display: none !important;
  }

  .blog-preview .blog-grid,
  .formats .pricing-grid {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* =========================================================
   SYSLAB UX / PERFORMANCE LAYER V3
   Чистый финальный слой без повторяющихся override-блоков.
   Desktop остаётся визуально насыщенным, mobile получает лёгкие
   opacity/transform-анимации без тяжёлых hover/tap эффектов.
   ========================================================= */

:root {
  --syslab-reveal-y: 22px;
  --syslab-reveal-duration: .62s;
  --syslab-reveal-ease: cubic-bezier(.22, .9, .28, 1);
  --syslab-glass-blur: 14px;
  --syslab-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.032));
  --syslab-glass-bg-featured: linear-gradient(180deg, rgba(94,224,255,0.12), rgba(255,255,255,0.04));
  --syslab-shadow-card: 0 26px 78px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(10, 21, 48, 0.20), inset 0 1px 0 rgba(255,255,255,0.055);
  --syslab-shadow-card-soft: 0 20px 56px rgba(0, 0, 0, 0.24), 0 6px 18px rgba(10, 21, 48, 0.16), inset 0 1px 0 rgba(255,255,255,0.045);
  --syslab-shadow-card-mobile: 0 14px 30px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.035);
  --syslab-shadow-carousel-mobile: 0 24px 56px rgba(0,0,0,0.13), 0 10px 28px rgba(8,18,44,0.10), inset 0 1px 0 rgba(255,255,255,0.032);
  --syslab-carousel-edge: 24px;
  --syslab-carousel-gap: 12px;
}

.video-play-fallback {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 4;
  transform: translateX(-50%);
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(7, 15, 28, 0.78);
  color: #eef4ff;
  font-weight: 800;
  backdrop-filter: none;
}

.video-play-fallback:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.center-video-hero {
  overflow: hidden !important;
  background: #050b14 !important;
}

.center-video-bg {
  display: block !important;
  position: absolute !important;
  inset: -3px !important;
  width: calc(100% + 6px) !important;
  height: calc(100% + 6px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translateZ(0) scale(1.006) !important;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
}

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

.faq-item,
.faq-item:hover,
.faq-item:active,
.faq-item:focus,
.faq-item:focus-within {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)) !important;
  border-color: var(--border) !important;
  box-shadow: var(--syslab-shadow-card-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.faq-item {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
  cursor: pointer !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

.faq-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  background: linear-gradient(135deg, rgba(94,224,255,.035), rgba(124,92,255,.03)), radial-gradient(circle at 12% 0%, rgba(94,224,255,.06), transparent 36%) !important;
  transition: opacity .2s ease !important;
}

.faq-item > summary,
.faq-item .faq-content {
  position: relative !important;
  z-index: 1 !important;
}

.faq-item[open],
.faq-item.is-opening,
.faq-item:hover,
.faq-item.faq-animated:hover {
  border-color: rgba(94,224,255,0.22) !important;
  box-shadow: var(--syslab-shadow-card-soft) !important;
}

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

.faq-item summary {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

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

.faq-item summary::after {
  content: "+";
  margin-left: auto;
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
  transform: translate3d(0,0,0) rotate(0deg);
  transition: transform .22s ease;
}

.faq-item[open] summary::after,
.faq-item.is-opening summary::after {
  transform: translate3d(0,0,0) rotate(45deg);
}

.faq-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: none !important;
  transition: height .32s cubic-bezier(.22, 1, .36, 1), opacity .18s linear !important;
  will-change: height, opacity;
}

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

.faq-item.is-closing .faq-content {
  opacity: 0 !important;
}

.formats .price-card .badge {
  display: none !important;
}

.formats .price-card.featured {
  border-color: rgba(94,224,255,0.34) !important;
  background: var(--syslab-glass-bg-featured) !important;
}

.formats .price-card.featured h3,
.formats .pricing-grid.is-syslab-mobile-carousel .price-card.featured h3 {
  padding-top: 0 !important;
}

.blog-preview .center-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow: visible !important;
  contain: none !important;
}

.blog-preview .center-actions .btn {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

main .reveal,
.blog-hero .reveal,
.contacts .contact-box.reveal {
  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), border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
  transition-delay: 0s !important;
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
}

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

main .delay-1.reveal,
main .delay-2.reveal,
main .delay-3.reveal,
.delay-1,
.delay-2,
.delay-3 {
  transition-delay: 0s !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;
}

.syslab-carousel-reveal .blog-grid,
.syslab-carousel-reveal .pricing-grid,
.syslab-carousel-reveal .service-card,
.syslab-carousel-reveal .blog-card,
.syslab-carousel-reveal .price-card {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

.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 {
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  outline: 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;
  pointer-events: none !important;
}

@media (min-width: 761px), (hover: hover) and (pointer: fine) {
  .card,
  .service-card,
  .blog-card,
  .price-card,
  .step,
  .content-card,
  .contact-box,
  .hero-image-card,
  .glass-card {
    backdrop-filter: blur(var(--syslab-glass-blur)) saturate(132%) !important;
    -webkit-backdrop-filter: blur(var(--syslab-glass-blur)) saturate(132%) !important;
    box-shadow: var(--syslab-shadow-card) !important;
  }

  .card:hover,
  .service-card:hover,
  .blog-card:hover,
  .price-card:hover,
  .step:hover,
  .content-card:hover,
  .contact-box:hover,
  .hero-image-card:hover,
  .glass-card:hover {
    box-shadow: var(--syslab-shadow-card) !important;
  }

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

  .formats .price-card h3 {
    white-space: nowrap !important;
    font-size: clamp(18px, 1.42vw, 22px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
  }

  .formats .price-card {
    padding-top: 30px !important;
  }

  .blog-preview .center-actions .btn {
    width: auto !important;
    min-width: 220px !important;
    max-width: 320px !important;
  }

  .syslab-mobile-carousel-dots,
  .syslab-mobile-carousel-dots.is-enabled,
  .blog-carousel-dots,
  .formats-carousel-dots {
    display: none !important;
  }

  .blog-preview .blog-grid.is-syslab-mobile-carousel,
  .formats .pricing-grid.is-syslab-mobile-carousel {
    display: grid !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .blog-preview .blog-grid.is-syslab-mobile-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .formats .pricing-grid.is-syslab-mobile-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (min-width: 1024px) {
  .site-header .container,
  .site-header .container.header-inner,
  .site-header .header-inner,
  .site-footer .container,
  .site-footer .container.footer-inner,
  .site-footer .footer-inner,
  footer .container,
  footer .container.footer-inner,
  footer .footer-inner {
    width: min(1140px, calc(100% - 96px)) !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .site-header .container,
  .site-header .container.header-inner,
  .site-header .header-inner,
  .site-footer .container,
  .site-footer .container.footer-inner,
  .site-footer .footer-inner,
  footer .container,
  footer .container.footer-inner,
  footer .footer-inner {
    width: calc(100% - 48px) !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 {
    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;
  }

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

/* =========================================================
   SYSLAB FAQ TAP FIX V4
   Убирает дублирующий плюс справа и оставляет один понятный
   индикатор раскрытия — голубой треугольник слева.
   ========================================================= */
.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;
}

/* =========================================================
   SYSLAB V5 — STATIC DESKTOP FORMAT CARDS
   Блок "Форматы работы" не является кликабельным, поэтому
   на десктопе карточки не должны менять тень/подниматься при hover.
   ========================================================= */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .formats .price-card,
  .formats .price-card:hover,
  .formats .price-card:active,
  .formats .price-card:focus,
  .formats .price-card:focus-within {
    cursor: default !important;
    transform: none !important;
    border-color: var(--border) !important;
    background: var(--syslab-glass-bg) !important;
    box-shadow: var(--syslab-shadow-card) !important;
    filter: none !important;
    -webkit-filter: none !important;
    outline: none !important;
    transition-property: border-color, background-color, background, transform !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;
    box-shadow: var(--syslab-shadow-card) !important;
    transform: none !important;
  }

  .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;
    pointer-events: none !important;
  }
}

/* =========================================================
   SYSLAB FAQ FULL-CARD TAP FIX V7
   Summary expands to the whole closed FAQ card, so the FAQ opens
   when the user taps/clicks the card area, not only the text.
   ========================================================= */
.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;
}

.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:focus,
.faq-item > summary:focus-visible,
.faq-item > summary:active {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   SYSLAB FAQ DESKTOP CLOSE GLITCH FIX V8
   V7 made the <summary> occupy the whole card with negative margins.
   That helped tap area, but on desktop it changed card geometry while
   the details element was closing. We keep the full-card click behavior
   in JS and return the desktop summary to a stable layout.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .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;
  }
}

/* =========================================================
   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 QUICK LINKS 4x2 LAYOUT FIX V10
   Направления помощи на десктопе держим ровной сеткой:
   4 плашки в ряд, 2 ряда для 8 направлений.
   ========================================================= */

@media (min-width: 761px) {
  .quick-services .quick-links {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  .quick-services .quick-links a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

@media (min-width: 761px) and (max-width: 940px) {
  .quick-services .quick-links {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    gap: 12px !important;
  }

  .quick-services .quick-links a {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   SYSLAB QUICK LINKS DESKTOP BLUR RESTORE V13
   Возвращаем glass/blur эффект для плашек блока "Направления помощи"
   только на десктопе. Мобильную версию не трогаем.
   ========================================================= */

@media (min-width: 761px) {
  .quick-services .quick-links a {
    background: rgba(255, 255, 255, 0.065) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 10px 28px rgba(0, 0, 0, 0.14) !important;
  }

  .quick-services .quick-links a:hover {
    background: rgba(94, 224, 255, 0.09) !important;
    border-color: rgba(94, 224, 255, 0.24) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    backdrop-filter: blur(16px) saturate(130%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 14px 34px rgba(0, 0, 0, 0.16) !important;
  }
}


/* =========================================================
   SYSLAB FAQ DESKTOP BLUR RESTORE V14
   Возвращаем blur/glass эффект у FAQ-плашек на десктопе.
   Мобильную версию не затрагиваем.
   ========================================================= */

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .faq-item,
  .faq-item:hover,
  .faq-item:active,
  .faq-item:focus,
  .faq-item:focus-within,
  .faq-item[open],
  .faq-item.is-opening,
  .faq-item.faq-animated:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.03)) !important;
    -webkit-backdrop-filter: blur(var(--syslab-glass-blur)) saturate(132%) !important;
    backdrop-filter: blur(var(--syslab-glass-blur)) saturate(132%) !important;
    box-shadow: var(--syslab-shadow-card-soft) !important;
  }
}


/* =========================================================
   SYSLAB FAQ DESKTOP BLUR OFF V17
   По запросу отключаем blur у FAQ-плашек в десктопной версии,
   сохраняя фон и тень без glass-размытия.
   ========================================================= */

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .faq-item,
  .faq-item:hover,
  .faq-item:active,
  .faq-item:focus,
  .faq-item:focus-within,
  .faq-item[open],
  .faq-item.is-opening,
  .faq-item.faq-animated:hover {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* =========================================================
   SYSLAB HERO TRUE CENTER DESKTOP V18
   Убираем лишний верхний зазор на первом экране и поднимаем
   весь hero-блок ближе к реальному центру экрана на десктопе.
   ========================================================= */

@media (min-width: 761px) {
  .center-video-hero {
    padding-top: 0 !important;
    min-height: calc(100vh - var(--syslab-header-height)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

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

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

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

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

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

@media (min-width: 761px) and (max-height: 860px) {
  .center-video-inner > .center-video-content,
  .center-video-inner > .center-video-content.reveal,
  .center-video-content.reveal.visible {
    transform: translateY(-5.5vh) !important;
  }
}


/* =========================================================
   SYSLAB FAQ ARROW CLOSE SYNC V19
   При закрытии FAQ стрелка возвращается сразу вместе с анимацией
   высоты, а не после полного схлопывания плашки.
   ========================================================= */
.faq-item.is-closing summary::before,
.faq-item.is-mobile-closing summary::before {
  transform: rotate(0deg) !important;
  filter: none !important;
}

/* =========================================================
   SYSLAB FOOTER COPY FONT SYNC V19
   © 2026 использует тот же размер, вес и семейство шрифта,
   что и ссылка Наверх / Жоғары.
   ========================================================= */
.site-footer .footer-copy,
.site-footer .footer-copy span,
footer .footer-copy,
footer .footer-copy span {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--muted, #A9B6CB) !important;
}

/* Более точный override старого правила .site-footer p:first-child с Gotham Pro. */
.site-footer .footer-inner > p.footer-copy:first-child,
.site-footer .footer-inner > p.footer-copy:first-child span,
footer .footer-inner > p.footer-copy:first-child,
footer .footer-inner > p.footer-copy:first-child span {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--muted, #A9B6CB) !important;
}

/* =========================================================
   SYSLAB UX/UI SPACING PASS V20
   Единая вертикальная сетка для главной, блога и внутренних страниц.
   Цель: убрать случайные большие пустоты между FAQ / блогом / контактами
   и выровнять ритм секций на desktop и touch-экранах.
   ========================================================= */

:root {
  --syslab-section-y: 76px;
  --syslab-section-y-compact: 58px;
  --syslab-section-head-gap: 32px;
  --syslab-card-gap: 20px;
}

.section-head p:last-child,
.contact-box p:last-child,
.content-card p:last-child,
.service-card p:last-child,
.price-card p:last-child,
.blog-card p:last-child {
  margin-bottom: 0 !important;
}

.cards-grid,
.service-card-grid,
.pricing-grid {
  gap: var(--syslab-card-gap) !important;
}

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

@media (min-width: 761px) {
  .section {
    padding-top: var(--syslab-section-y) !important;
    padding-bottom: var(--syslab-section-y) !important;
  }

  .section-head {
    margin-bottom: var(--syslab-section-head-gap) !important;
  }

  .quick-services {
    padding-top: 74px !important;
    padding-bottom: 72px !important;
  }

  .problems {
    padding-top: 74px !important;
    padding-bottom: 76px !important;
  }

  .services {
    padding-top: 76px !important;
    padding-bottom: 72px !important;
  }

  .formats {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

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

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

  .contacts {
    padding-top: 60px !important;
    padding-bottom: 88px !important;
  }

  .blog-preview .section-head {
    margin-bottom: 34px !important;
  }

  .contacts .contact-box {
    margin-top: 0 !important;
  }

  .contact-box {
    padding: 36px !important;
  }

  .page-hero.section {
    padding-top: 92px !important;
    padding-bottom: 42px !important;
  }

  .page-hero.section + .section {
    padding-top: 48px !important;
  }

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

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

  .two-col,
  .article-layout {
    row-gap: 22px !important;
  }

  .service-card a,
  .blog-card > a {
    padding: 24px !important;
  }
}

@media (min-width: 1200px) {
  .section-head.center {
    max-width: 780px !important;
  }

  .contacts .contact-box {
    min-height: 236px !important;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root {
    --syslab-card-gap: 14px;
  }

  .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: var(--syslab-card-gap) !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 FOOTER NAV FONT SYNC V21
   © 2026 и Наверх / Жоғары используют тот же шрифт,
   что и пункты меню в шапке: Услуги / Форматы / Блог / FAQ / Контакты.
   Блок стоит в самом конце, чтобы перекрыть старые правила футера.
   ========================================================= */
.site-footer .footer-copy,
.site-footer .footer-copy span,
footer .footer-copy,
footer .footer-copy span,
.site-footer .footer-inner > a[href="#top"],
footer .footer-inner > a[href="#top"],
.site-footer .footer-inner > a[href="/#top"],
footer .footer-inner > a[href="/#top"],
.site-footer .footer-inner > a[href="/kz/#top"],
footer .footer-inner > a[href="/kz/#top"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 480 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--muted, #95a6c4) !important;
}

.site-footer .footer-inner > a[href="#top"]:hover,
footer .footer-inner > a[href="#top"]:hover,
.site-footer .footer-inner > a[href="/#top"]:hover,
footer .footer-inner > a[href="/#top"]:hover,
.site-footer .footer-inner > a[href="/kz/#top"]:hover,
footer .footer-inner > a[href="/kz/#top"]:hover {
  color: var(--text, #eef4ff) !important;
}