/* Start:/bitrix/components/ranx/block.landing/templates/100_1_custom/style.css?178774855822012*/
/* 100_1_custom — Слайдер. Токены (--wstudio-*) заданы глобально в
   templates\ranx-landing\assets\css\custom.css (этап 1). Все селекторы
   скоуплены префиксом .wstudio-, чтобы не конфликтовать с Bootstrap/
   theme-* классами Ranx — см. _integration_docs\DESIGN_SYSTEM.md. */

.wstudio-hero-slider {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.wstudio-hero-slider__container {
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
}

@media (min-width: 768px) {
  .wstudio-hero-slider__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-hero-slider__container { padding-inline: var(--wstudio-space-7); }
}

.wstudio-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wstudio-text-gradient {
  color: var(--wstudio-gradient-text-fallback);
  background-image: var(--wstudio-gradient-text-light);
  background-clip: text;
  -webkit-background-clip: text;
  overflow-wrap: break-word;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wstudio-text-gradient {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* -------------------------------------------------------------------------
   КНОПКИ — переопределение вывода штатного Page::getBtn() (класс "btn ...")
   только внутри блока, не глобально (см. ARCHITECTURE.md#форма).
   ------------------------------------------------------------------------- */
.wstudio-hero-slide__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wstudio-space-3);
}

.wstudio-hero-slide__ctas .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--wstudio-space-3) var(--wstudio-space-5);
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--wstudio-radius-sm);
  transition: transform var(--wstudio-dur-fast) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-fast) var(--wstudio-ease-standard),
              filter var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-hero-slide__ctas .btn.btn-primary {
  color: var(--wstudio-color-text);
  background: var(--wstudio-gradient-accent);
  border: 0;
  box-shadow: 0 0 0 rgba(61, 124, 255, 0);
}

.wstudio-hero-slide__ctas .btn.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--wstudio-glow-blue);
}

.wstudio-hero-slide__ctas .btn.btn-primary:active {
  transform: scale(0.97);
}

.wstudio-hero-slide__ctas .btn.btn-transparent {
  color: var(--wstudio-color-text);
  background: transparent;
  border: 1px solid rgba(167, 175, 189, 0.32);
}

.wstudio-hero-slide__ctas .btn.btn-transparent:hover {
  border-color: var(--wstudio-color-accent-blue);
  box-shadow: var(--wstudio-glow-blue);
}

/* -------------------------------------------------------------------------
   ФОНОВЫЕ СВЕЧЕНИЯ ХИРО
   ------------------------------------------------------------------------- */
.wstudio-hero-slider::before {
  content: '';
  position: absolute;
  top: -12%;
  left: 58%;
  transform: translateX(-50%);
  width: min(1100px, 140%);
  height: 55%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-hero-slider::after {
  content: '';
  position: absolute;
  bottom: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120%);
  height: 50%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-hero-slider__viewport {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
}

.wstudio-hero-slider__track {
  position: relative;
  height: 100%;
}

.wstudio-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity var(--wstudio-dur-slide) var(--wstudio-ease-standard),
              transform var(--wstudio-dur-slide) var(--wstudio-ease-standard),
              visibility 0s linear var(--wstudio-dur-slide);
  pointer-events: none;
}

.wstudio-hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity var(--wstudio-dur-slide) var(--wstudio-ease-standard),
              transform var(--wstudio-dur-slide) var(--wstudio-ease-standard);
  pointer-events: auto;
}

.wstudio-hero-slide__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wstudio-space-7);
  align-items: center;
  padding-block: var(--wstudio-space-7);
}

.wstudio-hero-slide__text {
  max-width: 640px;
}

/* .wstudio-hero-slider-префикс здесь и ниже обязателен: Ranx-тема задаёт
   ".block p{color;font-size;line-height}" с той же специфичностью (1 класс
   + 1 тег), и побеждает по порядку загрузки, а не "по смыслу" — см.
   DECISIONS.md, найдено на 100_5_custom, исправлено во всех блоках. */
.wstudio-hero-slider .wstudio-hero-slide__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-blue);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-hero-slide__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: var(--wstudio-fs-h1);
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-5);
  text-wrap: balance;
}

.wstudio-hero-slider .wstudio-hero-slide__desc {
  font-size: var(--wstudio-fs-body-lg);
  color: #B7BFCC;
  max-width: 46ch;
  margin: 0 0 var(--wstudio-space-6);
}

.wstudio-hero-slide__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 60vh;
}

@media (min-width: 1024px) {
  .wstudio-hero-slide__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--wstudio-space-9);
  }

  .wstudio-hero-slide__scene {
    max-height: none;
  }
}

/* -------------------------------------------------------------------------
   УПРАВЛЕНИЕ СЛАЙДЕРОМ
   ------------------------------------------------------------------------- */
.wstudio-hero-slider__controls {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--wstudio-space-3) var(--wstudio-space-4);
  padding-block: var(--wstudio-space-4);
}

@media (min-width: 480px) {
  .wstudio-hero-slider__controls {
    gap: var(--wstudio-space-5);
    padding-block: var(--wstudio-space-5);
  }
}

.wstudio-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid rgba(167, 175, 189, 0.28);
  border-radius: var(--wstudio-radius-sm);
  font-size: 1.5rem;
  color: #B7BFCC;
  background: rgba(23, 27, 35, 0.6);
  cursor: pointer;
  transition: border-color var(--wstudio-dur-fast) var(--wstudio-ease-standard),
              color var(--wstudio-dur-fast) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-slider-btn:hover {
  color: var(--wstudio-color-text);
  border-color: var(--wstudio-color-accent-blue);
  box-shadow: var(--wstudio-glow-blue);
}

.wstudio-slider-indicator {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-4);
}

.wstudio-hero-slider .wstudio-slider-counter {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  color: #8D96A6;
  letter-spacing: 0.04em;
  min-width: 5ch;
  text-align: center;
  margin: 0;
}

.wstudio-slider-counter [data-wstudio-current] {
  color: var(--wstudio-color-text);
}

.wstudio-slider-dots {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-3);
}

.wstudio-slider-dot {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.wstudio-slider-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(167, 175, 189, 0.4);
  transition: background var(--wstudio-dur-fast) var(--wstudio-ease-standard),
              transform var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-slider-dot:hover::before {
  background: var(--wstudio-color-text-secondary);
}

.wstudio-slider-dot.is-active::before {
  background: var(--wstudio-gradient-accent);
  transform: scale(1.35);
}

.wstudio-slider-progress {
  width: 96px;
  height: 2px;
  background: var(--wstudio-color-line);
  border-radius: 2px;
  overflow: hidden;
  display: none;
}

@media (min-width: 768px) {
  .wstudio-slider-progress { display: block; }
}

.wstudio-slider-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--wstudio-gradient-accent);
}

.wstudio-slider-progress__bar.is-animating {
  transition: width linear;
}

/* -------------------------------------------------------------------------
   3D-КОМПОЗИЦИИ — ОБЩЕЕ
   ------------------------------------------------------------------------- */
.wstudio-scene {
  perspective: 1400px;
}

.wstudio-scene::before {
  content: '';
  position: absolute;
  inset: -14%;
  background:
    radial-gradient(55% 55% at 55% 42%, var(--wstudio-glow-ambient-blue), transparent 72%),
    radial-gradient(48% 48% at 40% 62%, var(--wstudio-glow-ambient-violet), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-scene__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-scene__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wstudio-scene__line {
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  filter: drop-shadow(0 0 5px rgba(121, 166, 255, 0.45));
  animation: wstudio-draw-line 1.1s var(--wstudio-ease-standard) forwards;
  animation-delay: 0.35s;
}

.wstudio-scene__stop-start { stop-color: var(--wstudio-connector-active-start); }
.wstudio-scene__stop-end { stop-color: var(--wstudio-connector-active-end); }
.wstudio-scene__marker-fill { fill: var(--wstudio-connector-active-end); }

.wstudio-scene__chart-line {
  stroke: var(--wstudio-connector-active-start);
  filter: drop-shadow(0 0 4px rgba(121, 166, 255, 0.4));
}

@keyframes wstudio-draw-line {
  to { stroke-dashoffset: 0; }
}

.wstudio-panel {
  position: absolute;
  background: linear-gradient(180deg, rgba(26, 31, 41, 0.94), rgba(18, 21, 28, 0.94));
  border: 1px solid rgba(167, 175, 189, 0.24);
  border-radius: var(--wstudio-radius-md);
  box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.05), 0 20px 50px rgba(0, 0, 0, 0.45);
  padding: var(--wstudio-space-3);
  backface-visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: wstudio-panel-in var(--wstudio-dur-slide) var(--wstudio-ease-standard) forwards;
}

@keyframes wstudio-panel-in {
  to {
    opacity: var(--wstudio-panel-opacity, 1);
    transform: translate3d(0, 0, var(--wstudio-panel-z, 0px)) rotateX(var(--wstudio-panel-rx, 0deg)) rotateY(var(--wstudio-panel-ry, 0deg));
  }
}

.wstudio-scene--sites .wstudio-panel--wireframe,
.wstudio-scene--sites .wstudio-panel--code,
.wstudio-scene--bitrix .wstudio-panel--sat,
.wstudio-scene--direct .wstudio-panel--node-search,
.wstudio-scene--generic_1 .wstudio-panel--step-a,
.wstudio-scene--generic_2 .wstudio-panel--from {
  --wstudio-panel-opacity: 0.85;
  border-color: rgba(167, 175, 189, 0.16);
}

.wstudio-panel__label {
  display: block;
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-secondary);
  margin: 0 0 var(--wstudio-space-2);
}

/* ---- сцена "sites" ---- */
.wstudio-scene--sites .wstudio-panel--wireframe {
  left: 2%; bottom: 6%; width: 34%;
  --wstudio-panel-z: -40px; --wstudio-panel-rx: 4deg; --wstudio-panel-ry: 10deg;
  animation-delay: 0.05s;
}
.wstudio-scene--sites .wstudio-panel--code {
  left: 30%; bottom: 30%; width: 32%;
  --wstudio-panel-z: -10px; --wstudio-panel-ry: 6deg;
  animation-delay: 0.18s;
}
.wstudio-scene--sites .wstudio-panel--final {
  left: 44%; top: 12%; width: 44%;
  --wstudio-panel-z: 30px; --wstudio-panel-ry: -6deg;
  border-color: rgba(121, 166, 255, 0.55);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), var(--wstudio-glow-blue), var(--wstudio-glow-soft);
  animation-delay: 0.32s;
}
.wstudio-scene--sites .wstudio-panel--mobile {
  right: 2%; top: 4%; width: 15%; aspect-ratio: 9 / 16;
  --wstudio-panel-z: 10px; --wstudio-panel-ry: -12deg;
  border-color: rgba(167, 175, 189, 0.32);
  animation-delay: 0.46s;
}

.wstudio-panel__wire-row { height: 6px; border-radius: 3px; background: var(--wstudio-color-line); margin: 0 0 var(--wstudio-space-2); width: 70%; }
.wstudio-panel__wire-row--lg { width: 90%; height: 10px; }
.wstudio-panel__wire-row--sm { width: 45%; }
.wstudio-panel__wire-grid { display: flex; gap: var(--wstudio-space-2); margin-top: var(--wstudio-space-3); }
.wstudio-panel__wire-grid span { flex: 1; aspect-ratio: 1; border: 1px dashed var(--wstudio-color-line); border-radius: var(--wstudio-radius-sm); }

.wstudio-panel__code-line { font-family: var(--wstudio-font-mono); font-size: 0.6875rem; line-height: 1.6; color: rgba(244, 246, 250, 0.82); white-space: nowrap; margin: 0; }
.wstudio-panel__code-line--indent { padding-left: 1.25em; }
.wstudio-tok-a { color: var(--wstudio-color-accent-violet); }
.wstudio-tok-b { color: var(--wstudio-color-accent-blue); }
.wstudio-tok-c { color: var(--wstudio-color-text); }

.wstudio-panel__page-bar { height: 8px; width: 40%; background: var(--wstudio-color-line); border-radius: 3px; margin: 0 0 var(--wstudio-space-4); }
.wstudio-panel__page-heading { height: 14px; width: 75%; border-radius: 3px; background: var(--wstudio-gradient-accent); opacity: 0.85; margin: 0 0 var(--wstudio-space-3); }
.wstudio-panel__page-text { height: 6px; width: 90%; border-radius: 3px; background: var(--wstudio-color-line); margin: 0 0 var(--wstudio-space-2); }
.wstudio-panel__page-text--sm { width: 60%; }
.wstudio-panel__page-btn { margin-top: var(--wstudio-space-4); width: 38%; height: 22px; border-radius: var(--wstudio-radius-sm); border: 1px solid var(--wstudio-color-accent-blue); }

.wstudio-panel__mobile-bar { height: 6px; width: 50%; background: var(--wstudio-color-line); border-radius: 3px; margin: 0 0 var(--wstudio-space-3); }
.wstudio-panel__mobile-block { height: 28%; border-radius: var(--wstudio-radius-sm); background: var(--wstudio-gradient-accent); opacity: 0.7; margin: 0 0 var(--wstudio-space-2); }
.wstudio-panel__mobile-block--sm { height: 14%; opacity: 1; background: var(--wstudio-color-line); }

/* ---- сцена "bitrix" ---- */
.wstudio-scene--bitrix .wstudio-panel--core {
  left: 38%; top: 36%; width: 24%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  --wstudio-panel-z: 30px;
  border-color: rgba(121, 166, 255, 0.6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--wstudio-glow-blue), var(--wstudio-glow-soft);
  animation-delay: 0.05s;
}
.wstudio-panel__core-name { font-family: var(--wstudio-font-heading); font-weight: 700; font-size: 0.9375rem; color: var(--wstudio-color-text); }
.wstudio-panel--sat { width: 22%; padding: var(--wstudio-space-3); display: flex; align-items: center; justify-content: center; text-align: center; --wstudio-panel-z: -20px; }
.wstudio-panel__sat-title { font-family: var(--wstudio-font-body); font-weight: 600; font-size: 0.8125rem; color: var(--wstudio-color-text-secondary); }
.wstudio-scene--bitrix .wstudio-panel--sat-a { left: 4%; top: 6%; --wstudio-panel-ry: 10deg; animation-delay: 0.2s; }
.wstudio-scene--bitrix .wstudio-panel--sat-b { right: 2%; top: 2%; --wstudio-panel-ry: -10deg; animation-delay: 0.3s; }
.wstudio-scene--bitrix .wstudio-panel--sat-c { left: 2%; bottom: 6%; --wstudio-panel-ry: 10deg; animation-delay: 0.4s; }
.wstudio-scene--bitrix .wstudio-panel--sat-d { right: 4%; bottom: 2%; --wstudio-panel-ry: -10deg; animation-delay: 0.5s; }

/* ---- сцена "direct" ---- */
.wstudio-panel--node { width: 24%; }
.wstudio-scene--direct .wstudio-panel--node-search { left: 0%; bottom: 8%; --wstudio-panel-z: -20px; --wstudio-panel-ry: 8deg; animation-delay: 0.05s; }
.wstudio-scene--direct .wstudio-panel--node-ad { left: 26%; top: 34%; width: 26%; --wstudio-panel-z: 0px; border-color: rgba(167, 175, 189, 0.32); animation-delay: 0.2s; }
.wstudio-scene--direct .wstudio-panel--node-chart { left: 56%; top: 4%; width: 24%; --wstudio-panel-z: 10px; --wstudio-panel-ry: -6deg; animation-delay: 0.35s; }
.wstudio-scene--direct .wstudio-panel--node-lead {
  right: 2%; top: 26%; width: 16%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  --wstudio-panel-z: 30px;
  border-color: rgba(199, 156, 255, 0.6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--wstudio-glow-violet), var(--wstudio-glow-soft);
  animation-delay: 0.5s;
}
.wstudio-panel__search-bar { height: 26px; border: var(--wstudio-border-hairline); border-radius: var(--wstudio-radius-sm); display: flex; align-items: center; padding-inline: var(--wstudio-space-2); }
.wstudio-panel__search-caret { width: 2px; height: 12px; background: var(--wstudio-color-accent-blue); animation: wstudio-caret-blink 1.1s steps(1) infinite; }
@keyframes wstudio-caret-blink { 50% { opacity: 0; } }
.wstudio-panel__ad-title { height: 8px; width: 80%; background: var(--wstudio-color-accent-blue); opacity: 0.85; border-radius: 3px; margin: 0 0 var(--wstudio-space-2); }
.wstudio-panel__ad-link { height: 5px; width: 45%; background: var(--wstudio-color-text-tertiary); border-radius: 3px; margin: 0 0 var(--wstudio-space-3); }
.wstudio-panel__ad-text { height: 5px; width: 90%; background: var(--wstudio-color-line); border-radius: 3px; }
.wstudio-panel__chart { width: 100%; height: 40px; }
.wstudio-panel__lead-mark { font-size: 1.5rem; color: var(--wstudio-color-accent-violet); }

/* ---- сцены "generic_1" / "generic_2" (новые пресеты, не из прототипа) ---- */
.wstudio-panel--step { width: 26%; }
.wstudio-scene--generic_1 .wstudio-panel--step-a { left: 2%; bottom: 8%; --wstudio-panel-z: -30px; --wstudio-panel-ry: 8deg; animation-delay: 0.05s; }
.wstudio-scene--generic_1 .wstudio-panel--step-b { left: 36%; top: 30%; --wstudio-panel-z: 0px; animation-delay: 0.2s; }
.wstudio-scene--generic_1 .wstudio-panel--step-c { right: 4%; top: 6%; width: 30%; --wstudio-panel-z: 20px; --wstudio-panel-ry: -8deg; border-color: rgba(121, 166, 255, 0.4); animation-delay: 0.35s; }

.wstudio-scene--generic_2 .wstudio-panel--from { left: 4%; top: 30%; width: 30%; --wstudio-panel-z: -20px; --wstudio-panel-ry: 8deg; animation-delay: 0.1s; }
.wstudio-scene--generic_2 .wstudio-panel--to { right: 4%; top: 24%; width: 34%; --wstudio-panel-z: 20px; --wstudio-panel-ry: -6deg; border-color: rgba(121, 166, 255, 0.45); box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--wstudio-glow-blue); animation-delay: 0.3s; }

/* -------------------------------------------------------------------------
   МОБИЛЬНОЕ УПРОЩЕНИЕ (<768px)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .wstudio-hero-slide__scene { opacity: 0.55; }
  .wstudio-scene { perspective: 900px; }
  .wstudio-hero-slider::before,
  .wstudio-hero-slider::after { opacity: 0.55; }
  .wstudio-panel { padding: var(--wstudio-space-2); }
  .wstudio-scene--sites .wstudio-panel--code,
  .wstudio-scene--bitrix .wstudio-panel--sat-c,
  .wstudio-scene--bitrix .wstudio-panel--sat-d,
  .wstudio-scene--direct .wstudio-panel--node-chart,
  .wstudio-scene--generic_1 .wstudio-panel--step-c {
    display: none;
  }
  .wstudio-panel__code-line { font-size: 0.625rem; }
}

/* -------------------------------------------------------------------------
   КУРСОРНЫЙ TILT (устройства с точным указателем; включается JS через is-tiltable)
   ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .wstudio-scene.is-tiltable .wstudio-scene__stage {
    transform: rotateX(var(--wstudio-tilt-x, 0deg)) rotateY(var(--wstudio-tilt-y, 0deg));
  }
}

/* -------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wstudio-hero-slide,
  .wstudio-hero-slide.is-active {
    transition: none;
  }
  .wstudio-panel {
    animation: none;
    opacity: var(--wstudio-panel-opacity, 1);
    transform: translate3d(0, 0, var(--wstudio-panel-z, 0px)) rotateX(var(--wstudio-panel-rx, 0deg)) rotateY(var(--wstudio-panel-ry, 0deg));
  }
  .wstudio-scene__line {
    animation: none;
    stroke-dashoffset: 0;
  }
  .wstudio-panel__search-caret {
    animation: none;
  }
  .wstudio-slider-progress__bar.is-animating {
    transition: none;
  }
}

/* End */


/* Start:/bitrix/components/ranx/block.landing/templates/100_2_custom/style.css?17878109969150*/
/* 100_2_custom — Почему мы. Токены (--wstudio-*) заданы глобально в
   templates\ranx-landing\assets\css\custom.css (этап 1). */

.wstudio-why-us {
  position: relative;
  overflow: hidden;
}

.wstudio-why-us::before {
  content: '';
  position: absolute;
  top: -8%;
  left: -6%;
  width: min(1000px, 90%);
  height: 60%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-why-us::after {
  content: '';
  position: absolute;
  bottom: -14%;
  right: -8%;
  width: min(820px, 80%);
  height: 55%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 76%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-why-us__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
}

@media (min-width: 768px) {
  .wstudio-why-us__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-why-us__container { padding-inline: var(--wstudio-space-7); }
}

.wstudio-why-us__header {
  margin-bottom: var(--wstudio-space-9);
}

/* Единый стандарт ширины заголовка+описания — 50% ширины контента на
   десктопе, во всех блоках кроме слайдера (100_1_custom) — см. DECISIONS.md. */
@media (min-width: 1024px) {
  .wstudio-why-us__header { max-width: 50%; }
}

/* .wstudio-why-us-префикс на этих трёх правилах обязателен: Ranx-тема
   задаёт ".block p{color;font-size;line-height}" с той же специфичностью
   (1 класс + 1 тег) — см. DECISIONS.md. */
.wstudio-why-us .wstudio-why-us__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-blue);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-why-us__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: var(--wstudio-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-5);
  text-wrap: balance;
}

.wstudio-why-us .wstudio-why-us__desc {
  font-size: var(--wstudio-fs-body-lg);
  color: var(--wstudio-color-text-secondary);
  max-width: 56ch;
  margin: 0;
}

.wstudio-why-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wstudio-space-5);
}

@media (min-width: 768px) {
  .wstudio-why-us__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wstudio-why-us__grid { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   КАРТОЧКА ПРЕИМУЩЕСТВА
   ------------------------------------------------------------------------- */
.wstudio-advantage-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--wstudio-space-6) var(--wstudio-space-5) var(--wstudio-space-5);
  background: linear-gradient(180deg, rgba(26, 31, 41, 0.9), rgba(18, 21, 28, 0.94));
  border: 1px solid rgba(167, 175, 189, 0.16);
  border-radius: var(--wstudio-radius-md);
  box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.04), 0 20px 44px rgba(0, 0, 0, 0.32);
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard),
              border-color var(--wstudio-dur-base) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-advantage-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(244, 246, 250, 0.025) 0,
    rgba(244, 246, 250, 0.025) 1px,
    transparent 1px,
    transparent 14px
  );
  pointer-events: none;
}

.wstudio-advantage-card::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 65%;
  height: 55%;
  z-index: 0;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 78%);
  pointer-events: none;
  transition: opacity var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-advantage-card:nth-child(even)::after {
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 78%);
}

.wstudio-advantage-card__num {
  position: absolute;
  top: var(--wstudio-space-3);
  right: var(--wstudio-space-4);
  z-index: 0;
  font-family: var(--wstudio-font-mono);
  font-weight: 700;
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  line-height: 1;
  color: var(--wstudio-color-text);
  opacity: 0.07;
  user-select: none;
}

.wstudio-advantage-card__icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: var(--wstudio-space-5);
}

.wstudio-advantage-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-advantage-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-3);
}

.wstudio-why-us .wstudio-advantage-card__desc {
  position: relative;
  z-index: 1;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--wstudio-color-text-secondary);
  margin: 0;
}

/* -------------------------------------------------------------------------
   PHP-МАРКЕР — квадрат-кнопка с раскрывающейся строкой. Прижат к низу
   карточки, расширяется только по ширине. --wstudio-marker-progress (0..1)
   задаётся JS через requestAnimationFrame (script.js) — та же архитектура
   "один прогресс → calc()/clamp() фазы", что и переходы между блоками
   (этап 15).
   ------------------------------------------------------------------------- */
.wstudio-advantage-card__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-top: auto;
  align-self: flex-start;
  padding-top: var(--wstudio-space-5);
  border: 0;
  background: none;
  cursor: pointer;

  --wstudio-raw: var(--wstudio-marker-progress, 0);
  --wstudio-marker-expand-p: clamp(0, calc(var(--wstudio-raw) / 0.3), 1);
  --wstudio-marker-type-p: clamp(0, calc((var(--wstudio-raw) - 0.3) / 0.7), 1);
}

.wstudio-advantage-card__marker::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(calc(-50% + var(--wstudio-space-5) / 2));
  width: 44px;
  height: 44px;
}

.wstudio-advantage-card__marker-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--wstudio-gradient-accent);
  color: var(--wstudio-color-text);
  font-family: var(--wstudio-font-mono);
  font-weight: 700;
  font-size: 0.6875rem;
  transition: box-shadow var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-advantage-card__marker-code {
  position: relative;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--wstudio-font-mono);
  font-size: clamp(0.5rem, 0.42rem + 0.3vw, 0.6875rem);
  line-height: 1;
  margin-inline-start: calc(6px * var(--wstudio-marker-expand-p, 0));
  max-width: calc((100% - 24px) * var(--wstudio-marker-expand-p, 0));
}

.wstudio-advantage-card__marker-code .wstudio-marker-char {
  display: inline-block;
  opacity: 0;
}

.wstudio-advantage-card__marker[data-wstudio-anim-ready] .wstudio-marker-char {
  opacity: clamp(0, calc(var(--wstudio-marker-type-p) * var(--wstudio-total-chars, 1) - var(--wstudio-i, 0)), 1);
}

.wstudio-advantage-card__marker-code .wstudio-tok-tag { color: var(--wstudio-connector-active-start); }
.wstudio-advantage-card__marker-code .wstudio-tok-string { color: var(--wstudio-connector-active-end); }
.wstudio-advantage-card__marker-code .wstudio-tok-punct { color: var(--wstudio-color-text-secondary); }

.wstudio-advantage-card__marker:focus-visible {
  outline: 2px solid var(--wstudio-color-accent-blue);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-advantage-card:hover {
    transform: translateY(-6px);
    border-color: rgba(121, 166, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.06), 0 28px 60px rgba(0, 0, 0, 0.4), var(--wstudio-glow-soft);
  }

  .wstudio-advantage-card:hover .wstudio-advantage-card__icon img {
    filter: drop-shadow(0 0 10px rgba(121, 166, 255, 0.55));
  }
}

@media (max-width: 767.98px) {
  .wstudio-why-us::before,
  .wstudio-why-us::after {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wstudio-advantage-card {
    transition: none;
  }
}

/* End */


/* Start:/bitrix/components/ranx/block.landing/templates/100_3_custom/style.css?178781101418931*/
/* 100_3_custom — Избранные кейсы. Токены (--wstudio-*) — этап 1.
   Правило CLAUDE.md п.7a: любой класс на <p>/<ul>/<ol>/<dl> получает
   класс-предок .wstudio-cases в начале селектора — иначе Ranx-тема
   ".block p{...}" побеждает по специфичности/порядку загрузки. */

.wstudio-cases {
  position: relative;
  overflow: hidden;
}

.wstudio-cases::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -8%;
  width: min(950px, 85%);
  height: 55%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-cases::after {
  content: '';
  position: absolute;
  bottom: -16%;
  left: -10%;
  width: min(850px, 80%);
  height: 55%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 76%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-cases__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
}

@media (min-width: 768px) {
  .wstudio-cases__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-cases__container { padding-inline: var(--wstudio-space-7); }
}

.wstudio-cases__header {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-6);
  margin-bottom: var(--wstudio-space-9);
}

/* Единый стандарт ширины заголовка+описания — 50% ширины контента на
   десктопе, во всех блоках кроме слайдера (100_1_custom) — см. DECISIONS.md. */
@media (min-width: 1024px) {
  .wstudio-cases__header-text { max-width: 50%; }
}

.wstudio-cases .wstudio-cases__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-violet);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-cases__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: var(--wstudio-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-5);
  text-wrap: balance;
}

.wstudio-cases .wstudio-cases__desc {
  font-size: var(--wstudio-fs-body-lg);
  color: var(--wstudio-color-text-secondary);
  max-width: 58ch;
  margin: 0;
}

@media (min-width: 1024px) {
  .wstudio-cases__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wstudio-space-7);
  }
  .wstudio-cases__header-text { flex: 1 1 auto; }
  .wstudio-cases__filters { flex: 0 0 auto; max-width: 420px; width: 100%; }
}

/* -------------------------------------------------------------------------
   ФИЛЬТР (упрощён относительно прототипа — обычный flex-wrap, без
   горизонтальной прокрутки/fade-краёв/кнопок-стрелок на мобильном)
   ------------------------------------------------------------------------- */
.wstudio-cases__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wstudio-space-2);
}

.wstudio-cases-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 40px;
  padding: 8px 16px;
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--wstudio-color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--wstudio-radius-sm);
  cursor: pointer;
  isolation: isolate;
  transition: color var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-cases-filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(61, 124, 255, 0.45), rgba(138, 92, 246, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-cases-filter-btn.is-active {
  color: var(--wstudio-color-text);
}

.wstudio-cases-filter-btn.is-active::before {
  background: linear-gradient(135deg, rgba(121, 166, 255, 0.85), rgba(199, 156, 255, 0.85));
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-cases-filter-btn:hover { color: var(--wstudio-color-text); }
  .wstudio-cases-filter-btn:hover::before {
    background: linear-gradient(135deg, rgba(121, 166, 255, 0.75), rgba(199, 156, 255, 0.75));
  }
}

.wstudio-cases-filter-btn:active { transform: scale(0.97); }

/* -------------------------------------------------------------------------
   СЕТКА И КАРТОЧКА (Flexbox — тот же приём "неполный ряд тянется", что и
   100_4_custom, см. DECISIONS.md)
   ------------------------------------------------------------------------- */
/* Решение (по запросу пользователя): CSS Grid с фиксированными колонками,
   НЕ Flexbox-растяжение (в отличие от 100_4_custom, где неполный ряд
   специально растягивался). Здесь нужно обратное: если после раскрытия
   "Показать все" в довеске остаётся 1-3 карточки, они НЕ должны тянуться
   во всю ширину — остаются обычного размера, как будто карточек 4, с
   пустым местом справа. Grid именно так и ведёт себя по умолчанию.

   Первая строка — асимметрия 40/30/30 (как в прототипе), остальные — по
   25% каждая (4 в ряд). 20-колоночная база (repeat(20,1fr)) даёт точные
   доли через span: 8+6+6=20 (первая строка), 5+5+5+5=20 (остальные) —
   1fr-треки Grid сами вычитают gap при расчёте ширины, проценты уже
   учитывают отступы. Позиционные nth-child, не привязаны к конкретной
   карточке — не ломаются при сортировке/добавлении/удалении админом. */
.wstudio-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wstudio-space-5);
}

@media (min-width: 768px) {
  .wstudio-cases__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wstudio-cases__grid { grid-template-columns: repeat(20, 1fr); }

  .wstudio-case-card:nth-child(1) { grid-column: span 8; }
  .wstudio-case-card:nth-child(2) { grid-column: span 6; }
  .wstudio-case-card:nth-child(3) { grid-column: span 6; }
  .wstudio-case-card:nth-child(n+4) { grid-column: span 5; }
}

.wstudio-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 31, 41, 0.9), rgba(18, 21, 28, 0.94));
  border: 1px solid rgba(167, 175, 189, 0.16);
  border-radius: var(--wstudio-radius-md);
  box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.04), 0 20px 44px rgba(0, 0, 0, 0.32);
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard),
              border-color var(--wstudio-dur-base) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-case-card[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-case-card:hover {
    transform: translateY(-6px);
    border-color: rgba(121, 166, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.06), 0 28px 60px rgba(0, 0, 0, 0.4), var(--wstudio-glow-soft);
  }
}

.wstudio-case-card__preview {
  position: relative;
  height: clamp(170px, 15vw, 240px);
  background: var(--wstudio-color-bg-panel);
  border-bottom: var(--wstudio-border-hairline);
  overflow: hidden;
}

.wstudio-case-card__preview-link {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-case-card__preview:hover .wstudio-case-card__preview-link {
    transform: scale(1.04);
  }
}

.wstudio-case-card__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wstudio-case-card__badge {
  position: absolute;
  top: var(--wstudio-space-3);
  left: var(--wstudio-space-3);
  z-index: 2;
  pointer-events: none;
  font-family: var(--wstudio-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-secondary);
  background: rgba(10, 12, 16, 0.72);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-sm);
  padding: 4px 10px;
  backdrop-filter: blur(6px);
}

.wstudio-case-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-3);
  flex: 1;
  padding: var(--wstudio-space-4);
}

@media (min-width: 1024px) {
  .wstudio-case-card__body { padding: var(--wstudio-space-5); }
}

.wstudio-case-card__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--wstudio-space-3);
}

.wstudio-cases .wstudio-case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wstudio-space-2);
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wstudio-case-card__tags li {
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-secondary);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-sm);
  padding: 3px 8px;
}

.wstudio-case-card__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.3;
  color: var(--wstudio-color-text);
  margin: 0;
}

.wstudio-case-card__title a {
  color: var(--wstudio-color-text);
  transition: color var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-case-card__title a:hover {
  color: var(--wstudio-connector-active-start);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.wstudio-cases .wstudio-case-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--wstudio-color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wstudio-cases .wstudio-case-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: var(--wstudio-space-2);
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-tertiary);
}

.wstudio-case-card__footer::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wstudio-gradient-accent);
  flex-shrink: 0;
}

.wstudio-case-card__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--wstudio-color-text-secondary);
  transition: color var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-case-card__arrow-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(167, 175, 189, 0.4);
  background: transparent;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard),
              border-color var(--wstudio-dur-base) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-case-card__arrow-icon {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-case-card__arrow:hover { color: var(--wstudio-color-text); }
  .wstudio-case-card__arrow:hover .wstudio-case-card__arrow-ring {
    transform: scale(1.08) rotate(20deg);
    border-color: var(--wstudio-connector-active-start);
    box-shadow: var(--wstudio-glow-soft);
  }
}

/* Реальное изображение кейса (загружено админом) — приоритет над
   концепт-композицией, см. DECISIONS.md. */
.wstudio-case-card__preview--image .wstudio-case-card__preview-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   ПРЕВЬЮ-ПРЕСЕТЫ (5 шт., перенесены из прототипа 1-в-1)
   ------------------------------------------------------------------------- */
.wstudio-case-card__preview--sites .wstudio-node {
  fill: rgba(23, 27, 35, 0.9);
  stroke: rgba(167, 175, 189, 0.35);
  stroke-width: 1.2;
}
.wstudio-case-card__preview--sites .wstudio-node--core {
  fill: rgba(61, 124, 255, 0.22);
  stroke: var(--wstudio-connector-active-start);
}
.wstudio-case-card__preview--sites .wstudio-case-card__lines path { opacity: 0.55; }
.wstudio-scene__stop-start { stop-color: var(--wstudio-connector-active-start); }
.wstudio-scene__stop-end { stop-color: var(--wstudio-connector-active-end); }

.wstudio-case-card__preview--shop .wstudio-case-card__preview-link {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-2);
  padding: var(--wstudio-space-3);
}
.wstudio-shop-core {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  color: var(--wstudio-color-text-secondary);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-sm);
  padding: 2px 8px;
}
.wstudio-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wstudio-space-2);
  flex: 1;
  min-height: 0;
}
.wstudio-shop-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-sm);
  background: rgba(23, 27, 35, 0.6);
}
.wstudio-shop-item__thumb {
  display: block;
  flex: 1;
  min-height: 0;
  border-radius: 4px;
  background: var(--wstudio-gradient-accent);
  opacity: 0.45;
}
.wstudio-shop-item__line {
  display: block;
  height: 4px;
  width: 70%;
  border-radius: 2px;
  background: var(--wstudio-color-line);
}
.wstudio-shop-item__price {
  display: block;
  height: 5px;
  width: 35%;
  border-radius: 2px;
  background: var(--wstudio-color-text-tertiary);
}

.wstudio-case-card__preview--landing .wstudio-case-card__preview-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--wstudio-space-3);
}
.wstudio-landing-block {
  display: block;
  border-radius: 4px;
  background: var(--wstudio-color-line);
}
.wstudio-landing-block--hero {
  height: 34%;
  background: var(--wstudio-gradient-accent);
  opacity: 0.5;
}
.wstudio-landing-features { display: flex; gap: 6px; height: 14%; }
.wstudio-landing-features span {
  flex: 1;
  border-radius: 4px;
  border: 1px dashed var(--wstudio-color-line);
  background: none;
}
.wstudio-landing-block--pricing { height: 20%; }
.wstudio-landing-block--cta {
  height: 12%;
  width: 40%;
  align-self: center;
  background: transparent;
  border: 1px solid var(--wstudio-color-accent-blue);
}

.wstudio-case-card__preview--chat .wstudio-case-card__preview-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--wstudio-space-4);
}
.wstudio-chat-bubble {
  max-width: 72%;
  height: 14px;
  border-radius: 10px;
  background: var(--wstudio-color-line);
}
.wstudio-chat-bubble--in { align-self: flex-start; border-bottom-left-radius: 3px; }
.wstudio-chat-bubble--out {
  align-self: flex-end;
  width: 55%;
  background: var(--wstudio-gradient-accent);
  opacity: 0.55;
  border-bottom-right-radius: 3px;
}
.wstudio-chat-bubble--sm { width: 40%; height: 10px; }
.wstudio-chat-input {
  height: 18px;
  border-radius: var(--wstudio-radius-sm);
  border: var(--wstudio-border-hairline);
  margin-top: 4px;
}

.wstudio-case-card__preview--blueprint .wstudio-case-card__preview-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wstudio-space-4);
}
.wstudio-case-card__preview--blueprint .wstudio-case-card__svg {
  width: 82%;
  height: auto;
}
.wstudio-equip-shape {
  fill: rgba(23, 27, 35, 0.85);
  stroke: rgba(167, 175, 189, 0.35);
  stroke-width: 1.4;
}
.wstudio-equip-dims { stroke: var(--wstudio-color-text-tertiary); }
.wstudio-blueprint-wall { stroke: rgba(167, 175, 189, 0.45); stroke-width: 1.4; }

/* -------------------------------------------------------------------------
   КНОПКА "ВСЕ КЕЙСЫ" / "СВЕРНУТЬ"
   ------------------------------------------------------------------------- */
.wstudio-cases__toggle {
  display: flex;
  justify-content: center;
  margin-top: var(--wstudio-space-7);
}

.wstudio-cases-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wstudio-space-3);
  min-height: 48px;
  padding: var(--wstudio-space-3) var(--wstudio-space-6);
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--wstudio-color-text);
  background: var(--wstudio-color-bg);
  border: 0;
  border-radius: var(--wstudio-radius-sm);
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-cases-toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(61, 124, 255, 0.65), rgba(138, 92, 246, 0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.wstudio-cases-toggle-btn__icon svg {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-cases-toggle-btn[aria-expanded="true"] .wstudio-cases-toggle-btn__icon svg {
  transform: rotate(45deg);
}

.wstudio-cases-toggle-btn:active { transform: scale(0.97); }

@media (max-width: 767.98px) {
  .wstudio-cases::before,
  .wstudio-cases::after { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .wstudio-case-card,
  .wstudio-case-card__preview-link,
  .wstudio-case-card__arrow-ring,
  .wstudio-cases-toggle-btn__icon svg {
    transition: none !important;
  }
}

/* End */


/* Start:/bitrix/components/ranx/block.landing/templates/100_4_custom/style.css?178781100011177*/
/* 100_4_custom — Основные услуги. Токены (--wstudio-*) — этап 1.

   Решение (упрощение относительно прототипа, зафиксировано в DECISIONS.md):
   прототип использовал асимметричную 24-колоночную сетку, жёстко
   привязанную к ровно 5 конкретным карточкам (span 9/8/7/12/12). Так как
   в Ranx карточки можно добавлять/удалять/сортировать, такая раскладка
   стала бы ломаться при другом количестве карточек — заменена на
   равномерную адаптивную сетку (1/2/3 колонки), с тем же визуальным
   языком карточки. */

.wstudio-services {
  position: relative;
  overflow: hidden;
}

.wstudio-services::before {
  content: '';
  position: absolute;
  top: -12%;
  left: 12%;
  width: min(900px, 85%);
  height: 55%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-services::after {
  content: '';
  position: absolute;
  bottom: -16%;
  right: 10%;
  width: min(820px, 78%);
  height: 50%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 76%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-services__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
}

@media (min-width: 768px) {
  .wstudio-services__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-services__container { padding-inline: var(--wstudio-space-7); }
}

.wstudio-services__header {
  margin-bottom: var(--wstudio-space-9);
}

/* Единый стандарт ширины заголовка+описания — 50% ширины контента на
   десктопе, во всех блоках кроме слайдера (100_1_custom) — см. DECISIONS.md. */
@media (min-width: 1024px) {
  .wstudio-services__header { max-width: 50%; }
}

/* .wstudio-services-префикс на этих трёх правилах обязателен: Ranx-тема
   задаёт ".block p{color;font-size;line-height}" с той же специфичностью
   (1 класс + 1 тег) — см. DECISIONS.md. */
.wstudio-services .wstudio-services__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-blue);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-services__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: var(--wstudio-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-5);
  text-wrap: balance;
}

.wstudio-services .wstudio-services__desc {
  font-size: var(--wstudio-fs-body-lg);
  color: var(--wstudio-color-text-secondary);
  max-width: 56ch;
  margin: 0;
}

/* Flexbox, не Grid: при неполном последнем ряду (например 3+2 карточки)
   flex-grow сам растягивает карточки этого ряда, заполняя ширину без
   пустого "хвоста" — 2 карточки станут 50/50, а не 33/33 с дыркой.
   Grid с фиксированным числом колонок так не умеет (нужен был бы JS/
   отдельный класс под конкретное число карточек). */
.wstudio-services__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wstudio-space-5);
}

.wstudio-service-card {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .wstudio-service-card {
    flex: 1 1 calc(50% - var(--wstudio-space-5) / 2);
  }
}

@media (min-width: 1024px) {
  .wstudio-service-card {
    flex: 1 1 calc(33.333% - var(--wstudio-space-5) * 2 / 3);
  }
}

.wstudio-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--wstudio-space-6) var(--wstudio-space-5) var(--wstudio-space-5);
  background: linear-gradient(180deg, rgba(26, 31, 41, 0.9), rgba(18, 21, 28, 0.94));
  border: 1px solid rgba(167, 175, 189, 0.16);
  border-radius: var(--wstudio-radius-md);
  box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.04), 0 20px 44px rgba(0, 0, 0, 0.32);
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard),
              border-color var(--wstudio-dur-base) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(121, 166, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.06), 0 26px 56px rgba(0, 0, 0, 0.38), var(--wstudio-glow-soft);
  }
}

.wstudio-service-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wstudio-space-3);
  margin-bottom: var(--wstudio-space-5);
}

.wstudio-service-card__preview-link {
  position: relative;
  display: block;
  width: fit-content;
  border-radius: var(--wstudio-radius-sm);
}

.wstudio-service-card__preview-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.wstudio-service-card__preview-link:focus-visible {
  outline: 2px solid var(--wstudio-color-accent-blue);
  outline-offset: 4px;
}

.wstudio-service-card__icon {
  display: block;
  width: 56px;
  height: 56px;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-service-card__preview-link:hover .wstudio-service-card__icon,
  .wstudio-service-card__preview-link:focus-visible .wstudio-service-card__icon {
    transform: scale(1.08);
  }

  .wstudio-service-card__preview-link:hover .wstudio-service-card__icon img,
  .wstudio-service-card__preview-link:focus-visible .wstudio-service-card__icon img {
    filter: drop-shadow(0 0 12px rgba(121, 166, 255, 0.6));
  }
}

.wstudio-service-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-service-card__title-link:hover {
  color: var(--wstudio-connector-active-start);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.wstudio-service-card__title-link:focus-visible {
  outline: 2px solid var(--wstudio-color-accent-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.wstudio-service-card__caption {
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-tertiary);
  white-space: nowrap;
}

.wstudio-service-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-3);
}

.wstudio-service-card__num {
  position: absolute;
  top: var(--wstudio-space-4);
  right: var(--wstudio-space-5);
  z-index: 0;
  font-family: var(--wstudio-font-mono);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
  line-height: 1;
  color: var(--wstudio-color-text);
  opacity: 0.06;
  user-select: none;
  pointer-events: none;
}

.wstudio-service-card__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--wstudio-color-text);
  max-width: 34ch;
  margin: 0;
}

.wstudio-services .wstudio-service-card__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--wstudio-color-text-secondary);
  margin: 0;
}

.wstudio-service-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-2);
  margin: var(--wstudio-space-1) 0 0;
  padding: 0;
  list-style: none;
}

.wstudio-service-card__list li {
  position: relative;
  padding-left: var(--wstudio-space-4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--wstudio-color-text-secondary);
}

.wstudio-service-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--wstudio-gradient-accent);
}

.wstudio-service-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wstudio-space-3);
  margin-top: var(--wstudio-space-5);
  padding-top: var(--wstudio-space-4);
  border-top: var(--wstudio-border-hairline);
}

.wstudio-service-card__price {
  font-family: var(--wstudio-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--wstudio-color-text-tertiary);
}

.wstudio-service-card__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--wstudio-color-text-secondary);
  transition: color var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-service-card__arrow-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(167, 175, 189, 0.4);
  background: transparent;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard),
              border-color var(--wstudio-dur-base) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-service-card__arrow-icon {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-service-card__arrow:hover {
    color: var(--wstudio-color-text);
  }

  .wstudio-service-card__arrow:hover .wstudio-service-card__arrow-ring {
    transform: scale(1.08) rotate(20deg);
    border-color: var(--wstudio-connector-active-start);
    box-shadow: var(--wstudio-glow-soft);
  }

  .wstudio-service-card__arrow:hover .wstudio-service-card__arrow-icon {
    transform: translate(2px, -2px);
  }
}

.wstudio-service-card__arrow:focus-visible .wstudio-service-card__arrow-ring {
  border-color: var(--wstudio-connector-active-start);
}

.wstudio-service-card__arrow:active .wstudio-service-card__arrow-ring {
  transform: scale(0.94);
}

@media (max-width: 767.98px) {
  .wstudio-services::before,
  .wstudio-services::after {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wstudio-service-card,
  .wstudio-service-card__icon,
  .wstudio-service-card__icon img,
  .wstudio-service-card__arrow-ring,
  .wstudio-service-card__arrow-icon {
    transition: none !important;
  }
}

/* End */


/* Start:/bitrix/components/ranx/block.landing/templates/100_5_custom/style.css?178781276813030*/
/* 100_5_custom — О студии. Токены (--wstudio-*) — этап 1. */

.wstudio-studio {
  position: relative;
  overflow: hidden;
}

.wstudio-studio::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 6%;
  width: min(760px, 70%);
  height: 46%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 76%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-studio::after {
  content: '';
  position: absolute;
  bottom: -12%;
  right: 6%;
  width: min(700px, 66%);
  height: 42%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-studio__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
}

@media (min-width: 768px) {
  .wstudio-studio__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-studio__container { padding-inline: var(--wstudio-space-7); }
}

.wstudio-studio__top {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-5);
  margin-bottom: var(--wstudio-space-9);
}

/* Единый стандарт ширины заголовка+описания — 50% ширины контента на
   десктопе, во всех блоках кроме слайдера (100_1_custom) — см. DECISIONS.md. */
@media (min-width: 1024px) {
  .wstudio-studio__header { max-width: 50%; }
}

/* .wstudio-studio-префикс на всех p-правилах ниже обязателен: Ranx-тема
   задаёт ".block p{color;font-size;line-height}" с той же специфичностью
   (1 класс + 1 тег) — см. DECISIONS.md. */
.wstudio-studio .wstudio-studio__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-blue);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-studio__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: var(--wstudio-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wstudio-color-text);
  margin: 0;
  text-wrap: balance;
}

.wstudio-studio__top-row {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-6);
}

@media (min-width: 1024px) {
  .wstudio-studio__top-row {
    flex-direction: row;
    align-items: center;
    gap: var(--wstudio-space-8);
  }
}

.wstudio-studio .wstudio-studio__desc {
  margin: 0;
  font-size: var(--wstudio-fs-body-lg);
  color: var(--wstudio-color-text-secondary);
  max-width: 56ch;
}

@media (min-width: 1024px) {
  /* 60%, не 50% — намеренно совпадает с .wstudio-studio__primary (цитата)
     ниже, чтобы автор-блок (фото+имя) в этой строке начинался на той же
     вертикали, что список тезисов в строке под ней — иначе колонки едут
     вразнобой (баг с живого сайта, см. DECISIONS.md). */
  .wstudio-studio .wstudio-studio__desc {
    flex: 0 0 60%;
    max-width: none;
  }
}

.wstudio-studio__content {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-7);
}

@media (min-width: 1024px) {
  .wstudio-studio__content {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--wstudio-space-8);
  }
}

.wstudio-studio__primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wstudio-space-6);
  min-width: 0;
}

@media (min-width: 1024px) {
  .wstudio-studio__primary {
    flex: 0 0 60%;
    max-width: 60%;
  }
}

.wstudio-studio__quote {
  position: relative;
  align-self: stretch;
  margin: 0;
  padding-left: var(--wstudio-space-6);
  max-width: 640px;
}

.wstudio-studio__quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  background: var(--wstudio-gradient-accent);
}

.wstudio-studio__quote::after {
  content: '\201C';
  position: absolute;
  top: -0.5em;
  left: var(--wstudio-space-4);
  font-family: var(--wstudio-font-heading);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  line-height: 1;
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
  /* Кавычка — в цвете темы (тот же градиентный акцент, что у выделенной
     части заголовка, .wstudio-text-gradient). Текст цитаты ниже —
     наоборот, обычный белый, не градиент (см. DECISIONS.md, уточнение). */
  color: var(--wstudio-gradient-text-fallback);
  background-image: var(--wstudio-gradient-text-light);
  background-clip: text;
  -webkit-background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wstudio-studio__quote::after {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.wstudio-studio .wstudio-studio__quote p {
  position: relative;
  margin: 0;
  font-family: var(--wstudio-font-heading);
  font-weight: 600;
  font-size: clamp(1.375rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.32;
  color: var(--wstudio-color-text);
}

.wstudio-studio .wstudio-studio__quote p::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.15em;
  background: var(--wstudio-gradient-accent);
  animation: wstudio-caret-blink 1.1s steps(1) infinite;
}

@keyframes wstudio-caret-blink {
  50% { opacity: 0; }
}

/* Кнопка "О студии" — рендерится штатным Page::getBtn() (класс "btn
   btn-transparent"/"btn-primary"). Тот же паттерн, что "Все кейсы"
   (100_3_custom\.wstudio-cases-toggle-btn) — градиентная рамка-маска,
   тёмный фон, свечение на hover — НО там кнопка полностью своя (без
   классов btn/btn-transparent), а здесь штатная, и цветовая тема сайта
   (`themes\{code}\color.css`) задаёт border-color на :hover с !important
   (реальный акцентный цвет сайта, не наш градиент) — поэтому все
   переопределяемые свойства идут с !important, иначе тема их всё равно
   перебивает (см. DECISIONS.md, баг-фикс №2). Без !important кнопка
   выглядела гибридно — то тёмная, то с чужим цветным контуром на hover. */
.wstudio-studio__primary .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wstudio-space-3);
  min-height: 48px;
  padding: var(--wstudio-space-3) var(--wstudio-space-6) !important;
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.9375rem !important;
  line-height: 1.3 !important;
  color: var(--wstudio-color-text) !important;
  background: var(--wstudio-color-bg) !important;
  border: none !important;
  border-radius: var(--wstudio-radius-sm) !important;
  box-shadow: none !important;
  isolation: isolate;
  transition: transform var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-studio__primary .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(61, 124, 255, 0.65), rgba(138, 92, 246, 0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-studio__primary .btn:focus {
  color: var(--wstudio-color-text) !important;
  background: var(--wstudio-color-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-studio__primary .btn:hover {
    color: var(--wstudio-color-text) !important;
    background: var(--wstudio-color-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--wstudio-glow-soft) !important;
  }

  .wstudio-studio__primary .btn:hover::before {
    background: linear-gradient(135deg, rgba(121, 166, 255, 0.9), rgba(199, 156, 255, 0.9));
  }
}

.wstudio-studio__primary .btn:active {
  transform: scale(0.97);
}

/* -------------------------------------------------------------------------
   АВТОРСКАЯ ГРУППА
   ------------------------------------------------------------------------- */
.wstudio-studio__author {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-5);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .wstudio-studio__author {
    flex: 1 1 0%;
  }
}

.wstudio-studio__author-photo {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: clamp(80px, 4vw + 3rem, 116px);
  height: clamp(80px, 4vw + 3rem, 116px);
  border-radius: 50%;
  isolation: isolate;
}

.wstudio-studio__author-photo::before {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 72%);
  pointer-events: none;
}

.wstudio-studio__author-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  padding: 2px;
  background: var(--wstudio-gradient-accent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.wstudio-studio__author-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-studio__author-photo:hover img {
    transform: scale(1.04);
  }
}

.wstudio-studio__author-info {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-2);
  min-width: 0;
}

.wstudio-studio .wstudio-studio__author-name {
  margin: 0;
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.3125rem);
  color: var(--wstudio-color-text);
}

.wstudio-studio .wstudio-studio__author-role {
  margin: 0;
  font-family: var(--wstudio-font-body);
  font-size: clamp(0.875rem, 0.3vw + 0.8rem, 1rem);
  color: var(--wstudio-color-text-secondary);
}

.wstudio-studio__author-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wstudio-space-2);
  margin-top: var(--wstudio-space-2);
}

.wstudio-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--wstudio-space-2) var(--wstudio-space-4);
  font-family: var(--wstudio-font-mono);
  font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem);
  letter-spacing: 0.02em;
  color: var(--wstudio-color-text-secondary);
  background: transparent;
  border-radius: var(--wstudio-radius-sm);
  isolation: isolate;
}

.wstudio-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(61, 124, 255, 0.55), rgba(138, 92, 246, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* -------------------------------------------------------------------------
   ТЕЗИСЫ
   ------------------------------------------------------------------------- */
.wstudio-studio__theses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wstudio-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .wstudio-studio__theses { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wstudio-studio__theses {
    grid-template-columns: 1fr;
    flex: 1;
  }
}

.wstudio-studio__thesis {
  display: flex;
  gap: var(--wstudio-space-3);
  align-items: flex-start;
  padding-left: var(--wstudio-space-4);
  border-left: 1px solid var(--wstudio-color-line);
}

.wstudio-studio__thesis-num {
  flex-shrink: 0;
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  color: var(--wstudio-color-text-tertiary);
  line-height: 1.5;
}

.wstudio-studio .wstudio-studio__thesis p {
  margin: 0;
  font-size: var(--wstudio-fs-body);
  line-height: 1.5;
  color: var(--wstudio-color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-studio__thesis {
    transition: border-color var(--wstudio-dur-base) var(--wstudio-ease-standard);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wstudio-studio .wstudio-studio__quote p::after {
    animation: none;
  }
  .wstudio-studio__author-photo img,
  .wstudio-studio__primary .btn {
    transition: none !important;
  }
}

/* End */


/* Start:/bitrix/components/ranx/block.landing/templates/100_6_custom/style.css?178781227412719*/
/* 100_6_custom — Полезные статьи. Токены (--wstudio-*) — этап 1.
   Правило CLAUDE.md п.7a: класс-предок .wstudio-articles на всех <p>. */

.wstudio-articles {
  position: relative;
  overflow: hidden;
}

.wstudio-articles::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -8%;
  width: min(900px, 82%);
  height: 52%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-articles::after {
  content: '';
  position: absolute;
  bottom: -14%;
  left: -8%;
  width: min(800px, 76%);
  height: 48%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 76%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-articles__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
}

@media (min-width: 768px) {
  .wstudio-articles__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-articles__container { padding-inline: var(--wstudio-space-7); }
}

.wstudio-articles__header {
  margin-bottom: var(--wstudio-space-8);
}

/* Единый стандарт ширины заголовка+описания — 50% ширины контента на
   десктопе, во всех блоках кроме слайдера (100_1_custom) — см. DECISIONS.md. */
@media (min-width: 1024px) {
  .wstudio-articles__header { max-width: 50%; }
}

.wstudio-articles .wstudio-articles__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-blue);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-articles__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: var(--wstudio-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-5);
  text-wrap: balance;
}

.wstudio-articles .wstudio-articles__desc {
  font-size: var(--wstudio-fs-body-lg);
  color: var(--wstudio-color-text-secondary);
  max-width: 56ch;
  margin: 0;
}

.wstudio-articles__layout {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-5);
}

@media (min-width: 1024px) {
  .wstudio-articles__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--wstudio-space-6);
  }

  .wstudio-article-card--primary {
    flex: 0 0 clamp(280px, 30%, 360px);
  }

  .wstudio-articles__ribbon {
    flex: 1;
    min-width: 0;
  }
}

.wstudio-articles__ribbon {
  display: flex;
  gap: var(--wstudio-space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px;
  border-radius: var(--wstudio-radius-md);
}

.wstudio-articles__ribbon::-webkit-scrollbar {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-articles__ribbon {
    cursor: grab;
  }
  .wstudio-articles__ribbon.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
}

.wstudio-articles__ribbon .wstudio-article-card {
  flex: 0 0 78vw;
  scroll-snap-align: start;
}

@media (min-width: 480px) {
  .wstudio-articles__ribbon .wstudio-article-card {
    flex: 0 0 clamp(260px, 32vw, 320px);
  }
}

@media (min-width: 1024px) {
  .wstudio-articles__ribbon .wstudio-article-card {
    flex: 0 0 clamp(240px, 21vw, 300px);
  }
}

/* Некликабельна принципиально — БЕЗ подъёма/стрелки/курсора-указателя при
   hover (в отличие от .wstudio-case-card/.wstudio-service-card) — статьи
   ещё не написаны, страниц не существует. */
.wstudio-article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-3);
  height: 100%;
  padding: var(--wstudio-space-5);
  background: linear-gradient(180deg, rgba(26, 31, 41, 0.9), rgba(18, 21, 28, 0.94));
  border: 1px solid rgba(167, 175, 189, 0.16);
  border-radius: var(--wstudio-radius-md);
  box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.04), 0 20px 44px rgba(0, 0, 0, 0.32);
  transition: border-color var(--wstudio-dur-base) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-article-card:hover {
    border-color: rgba(121, 166, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.05), 0 22px 48px rgba(0, 0, 0, 0.36), var(--wstudio-glow-soft);
  }
}

.wstudio-article-card--primary {
  padding: var(--wstudio-space-6) var(--wstudio-space-5) var(--wstudio-space-5);
}

.wstudio-article-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wstudio-space-3);
}

.wstudio-article-card__kicker {
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-connector-active-start);
}

.wstudio-article-card__badge {
  align-self: flex-start;
  font-family: var(--wstudio-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-secondary);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-sm);
  padding: 3px 9px;
  white-space: nowrap;
}

.wstudio-article-card__surface {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-2);
}

.wstudio-article-card__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.32;
  color: var(--wstudio-color-text);
  margin: 0;
}

.wstudio-article-card--primary .wstudio-article-card__title {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.24;
}

.wstudio-articles .wstudio-article-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--wstudio-color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wstudio-article-card--primary .wstudio-article-card__desc {
  font-size: 0.9375rem;
  -webkit-line-clamp: 3;
}

.wstudio-article-card__more {
  align-self: flex-start;
  margin-top: var(--wstudio-space-1);
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--wstudio-connector-active-start);
  transition: color var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-article-card__more:hover {
  color: var(--wstudio-color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* -------------------------------------------------------------------------
   ПРОГРЕСС + НАВИГАЦИЯ — тот же паттерн, что у карусели отзывов
   (100_8_custom): тонкая шкала прогресса + диапазон "01–02 / 05" отдельной
   строкой над стрелками, НЕ единая строка "стрелка-счётчик-стрелка"
   слайдера — см. DECISIONS.md (баг-фикс, изначально был скопирован не тот
   паттерн, до того как реальная карусель отзывов была реализована).
   ------------------------------------------------------------------------- */
.wstudio-articles__ribbon-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-2);
  min-width: 0;
}

.wstudio-articles__progress-row {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-3);
  margin-top: 10px;
}

.wstudio-articles__progress {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: var(--wstudio-color-line);
  overflow: hidden;
}

.wstudio-articles__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--wstudio-progress, 0));
  background: var(--wstudio-gradient-accent);
  box-shadow: 0 0 12px rgba(121, 166, 255, 0.35);
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-articles .wstudio-articles__progress-count {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--wstudio-color-text-secondary);
  white-space: nowrap;
}

.wstudio-articles__nav {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-2);
  flex-shrink: 0;
}

.wstudio-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid rgba(167, 175, 189, 0.28);
  border-radius: var(--wstudio-radius-sm);
  font-size: 1.5rem;
  color: #B7BFCC;
  background: rgba(23, 27, 35, 0.6);
  cursor: pointer;
  transition: border-color var(--wstudio-dur-fast) var(--wstudio-ease-standard),
              color var(--wstudio-dur-fast) var(--wstudio-ease-standard),
              box-shadow var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-slider-btn:hover {
  color: var(--wstudio-color-text);
  border-color: var(--wstudio-color-accent-blue);
  box-shadow: var(--wstudio-glow-blue);
}

.wstudio-articles-nav-btn {
  width: 36px;
  height: 36px;
  font-size: 1.125rem;
}

.wstudio-articles-nav-btn.is-disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wstudio-articles__progress-fill { transition: none !important; }
}

.wstudio-articles__footer {
  margin-top: var(--wstudio-space-7);
  text-align: center;
}

/* Кнопка "Все статьи" — рендерится штатным Page::getBtn(). Тот же паттерн,
   что "Все кейсы" (100_3_custom) и "О студии" (100_5_custom) — градиентная
   рамка-маска, тёмный фон, свечение на hover, все свойства с !important,
   т.к. цветовая тема сайта (themes\{code}\color.css) задаёт border-color
   на :hover тоже с !important (реальный акцентный цвет сайта) — без
   !important кнопка выглядела гибридно (см. DECISIONS.md, баг-фикс №2). */
.wstudio-articles__footer .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wstudio-space-3);
  min-height: 48px;
  padding: var(--wstudio-space-3) var(--wstudio-space-6) !important;
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.9375rem !important;
  line-height: 1.3 !important;
  color: var(--wstudio-color-text) !important;
  background: var(--wstudio-color-bg) !important;
  border: none !important;
  border-radius: var(--wstudio-radius-sm) !important;
  box-shadow: none !important;
  isolation: isolate;
  transition: transform var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-articles__footer .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(61, 124, 255, 0.65), rgba(138, 92, 246, 0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-articles__footer .btn:focus {
  color: var(--wstudio-color-text) !important;
  background: var(--wstudio-color-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-articles__footer .btn:hover {
    color: var(--wstudio-color-text) !important;
    background: var(--wstudio-color-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--wstudio-glow-soft) !important;
  }

  .wstudio-articles__footer .btn:hover::before {
    background: linear-gradient(135deg, rgba(121, 166, 255, 0.9), rgba(199, 156, 255, 0.9));
  }
}

.wstudio-articles__footer .btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .wstudio-articles__footer .btn { transition: none !important; }
}

@media (max-width: 767.98px) {
  .wstudio-articles::before,
  .wstudio-articles::after { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .wstudio-article-card { transition: none !important; }
  .wstudio-articles__ribbon { scroll-behavior: auto !important; }
}

/* End */


/* Start:/bitrix/components/ranx/block.landing/templates/100_7_custom/style.css?178781434815346*/
/* 100_7_custom — Получить консультацию. Токены (--wstudio-*) — этап 1.
   Правило CLAUDE.md п.7a: класс-предок .wstudio-consultation на всех <p>
   (включая случаи, когда класс уже составной, напр. wstudio-consultation__
   contact на <p> у email/MAX-строк — на <a> он безопасен, но для
   единообразия префикс добавлен везде). */

.wstudio-consultation {
  position: relative;
  overflow: hidden;
  /* Секция чуть светлее соседних блоков — выделяет конверсионный блок,
     как и в прототипе; следующая ступень фона, не произвольный цвет. */
  background: var(--wstudio-color-bg-panel);
}

.wstudio-consultation::before {
  content: '';
  position: absolute;
  top: -8%;
  right: 8%;
  width: min(720px, 64%);
  height: 44%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-violet), transparent 76%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-consultation::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: 6%;
  width: min(680px, 60%);
  height: 40%;
  background: radial-gradient(closest-side, var(--wstudio-glow-ambient-blue), transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.wstudio-consultation__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-7);
}

@media (min-width: 768px) {
  .wstudio-consultation__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-consultation__container {
    padding-inline: var(--wstudio-space-7);
    flex-direction: row;
    align-items: flex-start;
    gap: var(--wstudio-space-8);
  }
}

.wstudio-consultation__intro {
  min-width: 0;
}

/* Единый стандарт ширины заголовка+описания — 50% ширины контента на
   десктопе, во всех блоках кроме слайдера (100_1_custom) — см. DECISIONS.md.
   Было 38% (форма занимала оставшиеся 62%) — выровнено до честного 50/50. */
@media (min-width: 1024px) {
  .wstudio-consultation__intro {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.wstudio-consultation .wstudio-consultation__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-blue);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-consultation__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: var(--wstudio-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-4);
  text-wrap: balance;
}

.wstudio-consultation .wstudio-consultation__desc {
  margin: 0 0 var(--wstudio-space-6);
  font-size: var(--wstudio-fs-body-lg);
  color: var(--wstudio-color-text-secondary);
  max-width: 46ch;
}

.wstudio-consultation__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-3);
}

.wstudio-consultation .wstudio-consultation__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--wstudio-space-3);
  width: fit-content;
  font-family: var(--wstudio-font-body);
  font-weight: 500;
  font-size: var(--wstudio-fs-body);
  color: var(--wstudio-color-text);
  border-radius: var(--wstudio-radius-sm);
  margin: 0;
  transition: color var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  a.wstudio-consultation__contact:hover {
    color: var(--wstudio-connector-active-start);
  }
  a.wstudio-consultation__contact:hover .wstudio-consultation__contact-icon {
    border-color: rgba(121, 166, 255, 0.6);
    box-shadow: var(--wstudio-glow-soft);
  }
}

a.wstudio-consultation__contact:focus-visible {
  outline-offset: 4px;
}

.wstudio-consultation__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--wstudio-color-accent-blue);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-sm);
  background: var(--wstudio-color-bg-card);
  transition: border-color var(--wstudio-dur-fast) var(--wstudio-ease-standard), box-shadow var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-consultation__contact-icon svg {
  width: 16px;
  height: 16px;
}

.wstudio-consultation__contact-icon-letter {
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
}

.wstudio-consultation__contact--disabled {
  cursor: default;
}

/* -------------------------------------------------------------------------
   ПАНЕЛЬ ФОРМЫ — контейнер вокруг штатного ranx:form.landing. Разметка
   ПОЛЕЙ формы (инпуты/лейблы/чекбоксы) — ответственность компонента, не
   переопределяется здесь (см. ARCHITECTURE.md#форма) — известное
   ограничение первой итерации, см. TESTING.md/PROGRESS.md. КНОПКА
   отправки — исключение, стилизована ниже (тот же паттерн, что "Все
   кейсы"/"О студии"/"Все статьи" — градиентная рамка-маска, !important
   обязателен из-за !important в цветовой теме сайта на :hover, см.
   DECISIONS.md, баг-фикс №2).
   ------------------------------------------------------------------------- */
.wstudio-consultation__panel {
  position: relative;
  min-width: 0;
  padding: var(--wstudio-space-6) var(--wstudio-space-5);
  background: var(--wstudio-color-bg-card);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-lg);
  box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.04), 0 24px 56px rgba(0, 0, 0, 0.34);
}

@media (min-width: 768px) {
  .wstudio-consultation__panel { padding: var(--wstudio-space-7); }
}

@media (min-width: 1024px) {
  .wstudio-consultation__panel { flex: 1; }
}

.wstudio-consultation__panel .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wstudio-space-3);
  min-height: 48px;
  padding: var(--wstudio-space-3) var(--wstudio-space-6) !important;
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.9375rem !important;
  line-height: 1.3 !important;
  color: var(--wstudio-color-text) !important;
  background: var(--wstudio-color-bg) !important;
  border: none !important;
  border-radius: var(--wstudio-radius-sm) !important;
  box-shadow: none !important;
  isolation: isolate;
  transition: transform var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-consultation__panel .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(61, 124, 255, 0.65), rgba(138, 92, 246, 0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-consultation__panel .btn:focus {
  color: var(--wstudio-color-text) !important;
  background: var(--wstudio-color-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-consultation__panel .btn:hover {
    color: var(--wstudio-color-text) !important;
    background: var(--wstudio-color-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--wstudio-glow-soft) !important;
  }

  .wstudio-consultation__panel .btn:hover::before {
    background: linear-gradient(135deg, rgba(121, 166, 255, 0.9), rgba(199, 156, 255, 0.9));
  }
}

.wstudio-consultation__panel .btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .wstudio-consultation__panel .btn { transition: none !important; }
}

/* -------------------------------------------------------------------------
   ПОЛЯ ФОРМЫ (ranx:form.landing, шаблон .default) — саму форму (валидацию/
   AJAX/CAPTCHA/структуру полей) не трогаем, стилизуем только внешний вид
   штатной разметки (.form-group/label/.form-control/.custom-control-*),
   перенос 1-в-1 из прототипа (.form-field*, styles.css разд. "Форма
   консультации") — решение пользователя, см. DECISIONS.md (пересмотр
   более раннего "не переопределяем поля формы"). !important — Bootstrap
   даёт своим :focus/:checked состояниям собственную специфичность/цвет
   (та же причина, что и у кнопок, см. баг-фикс №2 в DECISIONS.md).
   ------------------------------------------------------------------------- */
.wstudio-consultation__panel .form {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-5);
}

.wstudio-consultation__panel .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

.wstudio-consultation__panel .form-group + .form-group {
  margin-top: var(--wstudio-space-5);
}

.wstudio-consultation__panel .form-group label {
  margin: 0;
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-tertiary);
}

.wstudio-consultation__panel .form-group label span {
  color: var(--wstudio-color-accent-violet);
}

.wstudio-consultation__panel .form-control {
  width: 100%;
  height: auto;
  padding: var(--wstudio-space-3) var(--wstudio-space-4) !important;
  font-family: var(--wstudio-font-body);
  font-size: var(--wstudio-fs-body);
  color: var(--wstudio-color-text) !important;
  background: rgba(244, 246, 250, 0.045) !important;
  border: var(--wstudio-border-hairline) !important;
  border-radius: var(--wstudio-radius-sm) !important;
  box-shadow: none !important;
  transition: border-color var(--wstudio-dur-fast) var(--wstudio-ease-standard), box-shadow var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-consultation__panel .form-control::placeholder {
  color: var(--wstudio-color-text-tertiary);
  opacity: 1;
}

.wstudio-consultation__panel textarea.form-control {
  resize: vertical;
  min-height: 92px;
}

/* Стрелка нативного select — CSS-градиенты вместо изображения, как в прототипе */
.wstudio-consultation__panel select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wstudio-color-text-secondary) 50%),
    linear-gradient(135deg, var(--wstudio-color-text-secondary) 50%, transparent 50%) !important;
  background-position: calc(100% - 22px) center, calc(100% - 17px) center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: var(--wstudio-space-8) !important;
}

.wstudio-consultation__panel select.form-control option {
  color: var(--wstudio-color-text);
  background: var(--wstudio-color-bg-card);
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-consultation__panel .form-control:hover {
    border-color: rgba(167, 175, 189, 0.32) !important;
  }
}

.wstudio-consultation__panel .form-control:focus {
  outline: none;
  border-color: var(--wstudio-color-accent-blue) !important;
  box-shadow: var(--wstudio-glow-soft) !important;
}

.wstudio-consultation__panel .form-control.is-invalid {
  border-color: var(--wstudio-color-accent-violet) !important;
  box-shadow: 0 0 0 1px var(--wstudio-color-accent-violet) !important;
}

.wstudio-consultation__panel .invalid-feedback {
  margin: 0;
  font-family: var(--wstudio-font-body);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--wstudio-color-accent-violet) !important;
}

/* -------------------------------------------------------------------------
   ЧЕКБОКСЫ (согласие на обработку данных и т.п.) — Bootstrap custom-control,
   перекрашиваем псевдоэлементы под тёмную тему вместо нативного вида.
   ------------------------------------------------------------------------- */
.wstudio-consultation__panel .custom-control {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 0;
  padding-left: 0;
}

.wstudio-consultation__panel .custom-control-input {
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}

.wstudio-consultation__panel .custom-control-label {
  position: relative;
  display: inline-block;
  padding-left: calc(18px + var(--wstudio-space-3));
  margin: 0;
  font-family: var(--wstudio-font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--wstudio-color-text-secondary) !important;
  cursor: pointer;
}

.wstudio-consultation__panel .custom-control-label a {
  color: var(--wstudio-color-accent-blue);
}

.wstudio-consultation__panel .custom-control-label::before {
  content: '';
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 18px;
  height: 18px;
  background-color: rgba(244, 246, 250, 0.045) !important;
  border: var(--wstudio-border-hairline) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background-color var(--wstudio-dur-fast) var(--wstudio-ease-standard), border-color var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-consultation__panel .custom-control-label::after {
  content: '';
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 18px;
  height: 18px;
  background: no-repeat center / 70% 70%;
}

.wstudio-consultation__panel .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--wstudio-color-accent-blue) !important;
  border-color: var(--wstudio-color-accent-blue) !important;
}

.wstudio-consultation__panel .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

.wstudio-consultation__panel .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--wstudio-glow-soft) !important;
}

.wstudio-consultation__panel .custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: var(--wstudio-color-accent-violet) !important;
}

@media (max-width: 767.98px) {
  .wstudio-consultation::before,
  .wstudio-consultation::after { opacity: 0.55; }
}

/* End */


/* Start:/bitrix/components/ranx/block.landing/templates/100_8_custom/style.css?178781226816698*/
/* 100_8_custom — Отзывы. Токены (--wstudio-*) — этап 1. За основу карточки —
   штатный 12_1 (générик-свойства POST/MARK/CHECK + модалка _POPUP), карусель
   ленты и фильтр — паттерны 100_6_custom/100_3_custom (см. DECISIONS.md).
   Правило CLAUDE.md п.7a: класс-предок .wstudio-reviews на всех <p>. */

.wstudio-reviews__container {
  width: 100%;
  max-width: var(--wstudio-container-max);
  margin-inline: auto;
  padding-inline: var(--wstudio-space-4);
}

@media (min-width: 768px) {
  .wstudio-reviews__container { padding-inline: var(--wstudio-space-6); }
}

@media (min-width: 1024px) {
  .wstudio-reviews__container { padding-inline: var(--wstudio-space-7); }
}

/* -------------------------------------------------------------------------
   ШАПКА: заголовок + рейтинг
   ------------------------------------------------------------------------- */
.wstudio-reviews__top {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-6);
  margin-bottom: var(--wstudio-space-6);
}

@media (min-width: 1024px) {
  .wstudio-reviews__top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wstudio-space-7);
  }
}

.wstudio-reviews__header-text {
  min-width: 0;
  flex: 1;
}

/* Единый стандарт ширины заголовка+описания — 50% ширины контента на
   десктопе, во всех блоках кроме слайдера (100_1_custom) — см. DECISIONS.md.
   Раньше здесь не было предела вообще (заголовок растягивался на всю
   доступную ширину строки минус рейтинг-бейдж) — баг с живого сайта. */
@media (min-width: 1024px) {
  .wstudio-reviews__header-text { max-width: 50%; }
}

.wstudio-reviews .wstudio-reviews__label {
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wstudio-color-accent-blue);
  margin: 0 0 var(--wstudio-space-4);
}

.wstudio-reviews__title {
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: var(--wstudio-fs-h2);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--wstudio-color-text);
  margin: 0 0 var(--wstudio-space-3);
  text-wrap: balance;
}

.wstudio-reviews .wstudio-reviews__desc {
  margin: 0;
  font-size: var(--wstudio-fs-body-lg);
  color: var(--wstudio-color-text-secondary);
  max-width: 56ch;
}

.wstudio-reviews__rating {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--wstudio-space-4) var(--wstudio-space-5);
  background: var(--wstudio-color-bg-card);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-md);
}

.wstudio-reviews .wstudio-reviews__rating-count {
  margin: 0;
  font-family: var(--wstudio-font-mono);
  font-size: var(--wstudio-fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-secondary);
}

.wstudio-reviews .wstudio-reviews__rating-value {
  margin: 0;
  font-family: var(--wstudio-font-heading);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--wstudio-color-text);
}

.wstudio-reviews__rating-stars {
  display: inline-flex;
  gap: 2px;
}

.wstudio-reviews .wstudio-reviews__rating-caption {
  margin: 0;
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wstudio-color-text-secondary);
}

/* -------------------------------------------------------------------------
   ЗВЁЗДЫ (общая геометрия для шапки/карточек/модалки)
   ------------------------------------------------------------------------- */
.wstudio-icon-star {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: var(--wstudio-color-accent-blue);
}

.wstudio-icon-star--off {
  fill: none;
  stroke: var(--wstudio-color-line);
  stroke-width: 1.5;
  color: transparent;
}

/* -------------------------------------------------------------------------
   КОНТРОЛЫ: фильтр + CTA
   ------------------------------------------------------------------------- */
.wstudio-reviews__controls {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-4);
  margin-bottom: var(--wstudio-space-6);
}

@media (min-width: 768px) {
  .wstudio-reviews__controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.wstudio-reviews__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wstudio-space-2);
}

.wstudio-reviews-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 40px;
  padding: 8px 16px;
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--wstudio-color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--wstudio-radius-sm);
  cursor: pointer;
  transition: color var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-reviews-filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(61, 124, 255, 0.45), rgba(138, 92, 246, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-reviews-filter-btn.is-active { color: var(--wstudio-color-text); }
.wstudio-reviews-filter-btn.is-active::before {
  background: linear-gradient(135deg, rgba(121, 166, 255, 0.85), rgba(199, 156, 255, 0.85));
}

@media (hover: hover) and (pointer: fine) {
  .wstudio-reviews-filter-btn:hover { color: var(--wstudio-color-text); }
  .wstudio-reviews-filter-btn:hover::before {
    background: linear-gradient(135deg, rgba(121, 166, 255, 0.75), rgba(199, 156, 255, 0.75));
  }
}

.wstudio-reviews-filter-btn:active { transform: scale(0.97); }

/* -------------------------------------------------------------------------
   КАРУСЕЛЬ ЛЕНТЫ
   ------------------------------------------------------------------------- */
.wstudio-reviews__carousel {
  display: flex;
  flex-direction: column;
  gap: var(--wstudio-space-5);
}

.wstudio-reviews__track {
  display: flex;
  align-items: stretch;
  gap: var(--wstudio-space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--wstudio-space-4);
  scrollbar-width: none;
  cursor: grab;
  margin: 0 calc(-1 * var(--wstudio-space-4));
  padding: 4px var(--wstudio-space-4) var(--wstudio-space-2);
}

.wstudio-reviews__track::-webkit-scrollbar { display: none; }

.wstudio-reviews__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.wstudio-reviews__track.is-dragging,
.wstudio-reviews__track.is-dragging * {
  user-select: none;
}

/* Число видимых карточек по брейкпоинту (2/3/4) — та же формула, что в
   прототипе (DECISIONS.md №26): ширина карточки вычисляется через
   --wstudio-reviews-visible, а не фиксируется в пикселях, чтобы прогресс/
   счётчик "01–04 / 20" в JS совпадал с реальной раскладкой. */
@media (min-width: 768px) {
  .wstudio-reviews__track {
    --wstudio-reviews-visible: 2;
    --wstudio-reviews-gap: var(--wstudio-space-5);
    gap: var(--wstudio-reviews-gap);
  }
}

@media (min-width: 1024px) {
  .wstudio-reviews__track {
    --wstudio-reviews-visible: 3;
    --wstudio-reviews-gap: var(--wstudio-space-6);
    gap: var(--wstudio-reviews-gap);
  }
}

@media (min-width: 1440px) {
  .wstudio-reviews__track {
    --wstudio-reviews-visible: 4;
  }
}

/* -------------------------------------------------------------------------
   КАРТОЧКА ОТЗЫВА
   ------------------------------------------------------------------------- */
.wstudio-review-card {
  flex: 0 0 calc(100% - var(--wstudio-space-5));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--wstudio-space-5);
  background: var(--wstudio-color-bg-card);
  border: var(--wstudio-border-hairline);
  border-radius: var(--wstudio-radius-lg);
}

.wstudio-review-card[hidden] { display: none; }

@media (min-width: 768px) {
  .wstudio-review-card {
    flex-basis: calc((100% - (var(--wstudio-reviews-visible) - 1) * var(--wstudio-reviews-gap)) / var(--wstudio-reviews-visible));
  }
}

.wstudio-review-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--wstudio-space-3);
  margin-bottom: var(--wstudio-space-4);
}

.wstudio-review-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--wstudio-color-bg-panel);
  background-size: cover;
  background-position: center;
}

.wstudio-review-card__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wstudio-color-text-secondary);
  border: var(--wstudio-border-hairline);
}

.wstudio-review-card__avatar--placeholder svg {
  width: 20px;
  height: 20px;
}

.wstudio-review-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wstudio-review-card__author {
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--wstudio-color-text);
}

.wstudio-review-card__post {
  font-size: 0.8125rem;
  color: var(--wstudio-color-text-secondary);
}

.wstudio-review-card__stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 2px;
}

.wstudio-reviews .wstudio-review-card__text {
  flex: 1;
  margin: 0 0 var(--wstudio-space-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--wstudio-color-text-secondary);
}

.wstudio-review-card__more {
  align-self: flex-start;
  margin-bottom: var(--wstudio-space-3);
  font-family: var(--wstudio-font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--wstudio-color-accent-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wstudio-review-card__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wstudio-space-3);
  padding-top: var(--wstudio-space-3);
  border-top: var(--wstudio-border-hairline);
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}

.wstudio-review-card__num { color: var(--wstudio-color-text-secondary); }
.wstudio-review-card__source {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--wstudio-color-text);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   ПРОГРЕСС + НАВИГАЦИЯ (перенос 1-в-1 из прототипа, styles.css разд. 39 —
   тонкая шкала прогресса + диапазон "01–04 / 20" над строкой стрелок,
   НЕ единая строка "стрелка-счётчик-стрелка", как у слайдера. См.
   DECISIONS.md — баг-фикс, изначально был скопирован не тот паттерн.)
   ------------------------------------------------------------------------- */
.wstudio-reviews__progress-row {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-3);
  margin-top: 10px;
}

.wstudio-reviews__progress {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: var(--wstudio-color-line);
  overflow: hidden;
}

.wstudio-reviews__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--wstudio-progress, 0));
  background: var(--wstudio-gradient-accent);
  box-shadow: 0 0 12px rgba(121, 166, 255, 0.35);
  transition: transform var(--wstudio-dur-base) var(--wstudio-ease-standard);
}

.wstudio-reviews .wstudio-reviews__progress-count {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--wstudio-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--wstudio-color-text-secondary);
  white-space: nowrap;
}

.wstudio-reviews__nav {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-2);
  flex-shrink: 0;
}

.wstudio-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid rgba(167, 175, 189, 0.28);
  border-radius: var(--wstudio-radius-sm);
  font-size: 1.5rem;
  color: #B7BFCC;
  background: rgba(23, 27, 35, 0.6);
  cursor: pointer;
  transition: color var(--wstudio-dur-fast) var(--wstudio-ease-standard), border-color var(--wstudio-dur-fast) var(--wstudio-ease-standard), box-shadow var(--wstudio-dur-fast) var(--wstudio-ease-standard);
}

.wstudio-slider-btn:hover {
  color: var(--wstudio-color-text);
  border-color: var(--wstudio-color-accent-blue);
  box-shadow: var(--wstudio-glow-blue);
}

.wstudio-reviews-nav-btn {
  width: 36px;
  height: 36px;
}

.wstudio-reviews-nav-btn svg,
.wstudio-reviews-nav-btn span { font-size: 1.125rem; }

.wstudio-reviews-nav-btn.is-disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wstudio-reviews__progress-fill { transition: none !important; }
}

/* -------------------------------------------------------------------------
   МОДАЛКА (._POPUP/js-card-modal, содержимое рендерится modal.php внутри
   штатного #cardModal). Штатная разметка #cardModal живёт в modals.php,
   штатные стили — assets\css\modal.css: там она захардкожена светлой
   (белый фон, тёмный текст) независимо от цветовой темы сайта — это общий
   "card modal" стиль Ranx (используется и другими блоками, например 12_1),
   не специфичный для нас. modal.css — общий файл вне зоны "safe"
   (правится не только под наш блок), поэтому тёмное оформление добавлено
   здесь, в CSS блока, а не в общем файле — см. DECISIONS.md. Если на
   странице есть другой блок с модалкой через тот же #cardModal, она тоже
   получит тёмное оформление (в контексте тёмной темы сайта это не
   проблема, скорее корректнее светлого варианта по умолчанию).
   ------------------------------------------------------------------------- */
#cardModal .modal-content {
  background: var(--wstudio-color-bg-card);
  border: var(--wstudio-border-hairline);
}

#cardModal .modal-title,
#cardModal .modal-body {
  color: var(--wstudio-color-text);
}

#cardModal .modal-body ul,
#cardModal .modal-body ol,
#cardModal .modal-body dl {
  color: var(--wstudio-color-text-secondary);
}

#cardModal .close svg {
  stroke: var(--wstudio-color-text-secondary);
}

#cardModal .modal-card-back,
#cardModal .modal-card-back-icon {
  color: var(--wstudio-color-text-secondary);
}

#cardModal .modal-card-back:hover,
#cardModal .modal-card-back:hover .modal-card-back-icon {
  color: var(--wstudio-color-text);
}

.wstudio-review-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wstudio-space-3);
  margin-bottom: var(--wstudio-space-4);
}

.wstudio-review-modal__user {
  display: flex;
  align-items: center;
  gap: var(--wstudio-space-3);
}

.wstudio-review-modal__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--wstudio-color-bg-panel);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.wstudio-review-modal__post {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wstudio-color-text-secondary);
}

.wstudio-review-modal__name {
  margin: 0;
  font-family: var(--wstudio-font-heading);
  font-weight: 700;
  color: var(--wstudio-color-text);
}

.wstudio-review-modal__stars {
  display: inline-flex;
  gap: 2px;
}

.wstudio-review-modal__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wstudio-color-text-secondary);
}

/* End */
/* /bitrix/components/ranx/block.landing/templates/100_1_custom/style.css?178774855822012 */
/* /bitrix/components/ranx/block.landing/templates/100_2_custom/style.css?17878109969150 */
/* /bitrix/components/ranx/block.landing/templates/100_3_custom/style.css?178781101418931 */
/* /bitrix/components/ranx/block.landing/templates/100_4_custom/style.css?178781100011177 */
/* /bitrix/components/ranx/block.landing/templates/100_5_custom/style.css?178781276813030 */
/* /bitrix/components/ranx/block.landing/templates/100_6_custom/style.css?178781227412719 */
/* /bitrix/components/ranx/block.landing/templates/100_7_custom/style.css?178781434815346 */
/* /bitrix/components/ranx/block.landing/templates/100_8_custom/style.css?178781226816698 */