adata-ui 2.1.41-beta.0 → 2.1.41-beta.1

package/CLAUDE.md

@@ -35,7 +35,8 @@ adata-ui — UI-кит проектов adata.kz, оформленный как
 
 - **Примитивные шкалы (`gray-*`, `red-*`, `brand-*`, `secondary-*`, `white`/`black`) константны в обеих темах.** Под `.dark` переключаются только семантические токены (блоки `@generated-semantic-colors[-dark]` в theme.css, источник — Figma-артефакт «Семантические цвета»).
 - В новом коде цвета задавать семантикой: `text-primary/secondary/quaternary/disabled/brand/link/success/warning/danger`, `bg-main/subtle/muted/overlay/badge/brand[-subtle]/{success,warning,danger,red…rose}[-subtle]`, `border-default/strong/focus/brand/…`, `bg-action-{primary,secondary,danger}[-hover|-active]` + `text-action-*-fg`, `text/fill/stroke-icon-*`, `fill-main`/`stroke-main` (флип белых заливок иллюстраций). Реестр и маппинг — `git show 69039ec:docs/color-migration.md`.
-- **Роли поверхностей (по Figma-макетам ДС)**: страница — `bg-main`; карточки/секции — `bg-subtle` + `border-default` (subtle полупрозрачен и без бордера не читается); утилитарный непрозрачный серый (thead, скелетоны, зебра, треки, плашки) — `bg-muted`; hover поверхностей — `bg-action-secondary-hover` (не `bg-subtle` — в дарке невидим). **`bg-canvas` не использовать** (dark #1E2939 сине-серый, выведен из употребления).
+- **Роли поверхностей (по Figma-макетам ДС)**: страница — `bg-main`; карточки/секции — `bg-subtle` + `border-default` (subtle полупрозрачен и без бордера не читается); утилитарный непрозрачный серый (thead, скелетоны, зебра, треки, плашки) — `bg-muted`; hover поверхностей — `bg-action-secondary-hover` (не `bg-subtle` — в дарке невидим); «утопленная» зона (инпуты, плитки, «экраны» иллюстраций) — `bg-canvas` (dark #0F0F10 — глубже `bg-main`; прежний сине-серый #1E2939 заменён аудитом семантических цветов 2026-08).
+- **Пара иконка+плитка**: цвет `text-icon-{цвет}` всегда идёт с плиткой `bg-{цвет}-subtle` того же оттенка — колор-кодирование блоков (лендинги, карточки модулей) строится только так.
 - Примитив в разметке легален, когда цвет должен быть одинаков в темах: инвертированные поверхности (`bg-secondary-500` футера/тултипов), белый декор на цветном (`bg-white` точки/бегунки), `chart-*`, `surface-dark*`. Цветовые `dark:`-классы разрешены для краевых случаев без токена (`dark:bg-white/5`-тинты и т.п.).
 - Для ring/outline border-токены доступны var-синтаксисом: `ring-(--border-color-default)`, `outline-(--border-color-danger)/60`.
 - В `<style>`-блоках: `var(--text-color-*)`, `var(--background-color-*)`, `var(--border-color-*)`, `var(--color-action-*|icon-*)`; полупрозрачность — `color-mix(in srgb, var(--…) N%, transparent)`. `theme('colors…')` в v4 не работает. **Не вешать `/N` на полупрозрачные токены** (`bg-subtle`, `bg-overlay`, dark `brand-subtle`/`danger-subtle`) — альфа перемножается.

package/assets/styles/main.css

@@ -1,6 +1,7 @@
-/* CSS-вход adata-ui: подключается конфигом слоя (css: в nuxt.config.ts),
-   консьюмерам ничего настраивать не нужно. Свой @import "tailwindcss"
-   в приложении не заводить — будет второй tailwind-корень и дубли утилит. */
+/* CSS-вход adata-ui. Подключать его обязан КОНСЬЮМЕР (css: в своём nuxt.config),
+   а не слой: у слоя из node_modules Nuxt дописывает авто-импорты в сам CSS и
+   ломает dev-SSR. Свой @import "tailwindcss" в приложении не заводить —
+   будет второй tailwind-корень и дубли утилит. */
 @import "tailwindcss";
 @import "./theme.css";
 @import "./ui.css";

package/assets/styles/theme.css

@@ -7,15 +7,22 @@
 @theme static {
   --font-sans: "Open Sans", sans-serif;
 
+  /* Точка, с которой лендинги ДС-2026 расширяют контейнер (макет: min-[1920px]) */
+  --breakpoint-3xl: 1920px;
+  /* Дефолтная шкала v4 кончается на --container-7xl = 80rem = 1280px */
+  --container-8xl: 96rem;
+
   --radius-*: initial;
   --radius: 4px;
   --radius-xs: 4px;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-10: 10px;
+  --radius-14: 14px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 20px;
+  --radius-3xl: 24px;
 
   --text-display-hero: 60px;
   --text-display-hero--line-height: 72px;
@@ -288,9 +295,9 @@
     --text-color-danger: #FF6467;
     /* bg */
     --background-color-main: #161617;
-    --background-color-canvas: #1E2939;
+    --background-color-canvas: #0F0F10;
     --background-color-subtle: #171717;
-    --background-color-muted: #262626;
+    --background-color-muted: #1F1F21;
     --background-color-overlay: #00000099;
     --background-color-brand: #068DFF;
     --background-color-brand-subtle: #068DFF1A;

package/assets/styles/ui.css

@@ -14,6 +14,18 @@ body {
   background-color: var(--background-color-main);
 }
 
+/* Отключает жёлоб скроллбара на страницах со своим скроллом (схемы связей).
+   Вешается через useHead({ htmlAttrs: { class: … } }) и снимается при уходе со
+   страницы — в отличие от глобального <style> в layout'е, который утекал в
+   <head> навсегда. Специфичность класса выше html, !important не нужен. */
+html.no-scroll-gutter {
+  scrollbar-gutter: initial;
+}
+
+html.no-scroll-gutter::-webkit-scrollbar {
+  width: 0;
+}
+
 html::-webkit-scrollbar {
   width: 15px;
 }
@@ -168,3 +180,68 @@ input[type="number"] {
   clip: rect(0 0 0 0);
   overflow: hidden;
 }
+
+/* Подложка hero-иллюстраций лендингов (§05 аудита: декоративный градиент — литерал).
+   Тема — по классу .dark, как у .bg-gradient-blue. */
+.a-illus-backdrop {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(145deg, #e4f2ff 0%, #c3e1ff 48%, #a5d2ff 100%);
+  box-shadow: 0 30px 60px -28px rgba(6, 141, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
+}
+
+.a-illus-backdrop::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(130px 130px at 80% 16%, rgba(255, 255, 255, .6), transparent 70%);
+  pointer-events: none;
+}
+
+.a-illus-backdrop::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(rgba(6, 141, 255, .16) 1.3px, transparent 1.4px);
+  background-size: 15px 15px;
+  opacity: .55;
+  mask-image: linear-gradient(135deg, #000, transparent 55%);
+  pointer-events: none;
+}
+
+.dark .a-illus-backdrop {
+  background: linear-gradient(145deg, #15273b 0%, #101a27 55%, #0d1622 100%);
+  box-shadow: 0 30px 60px -28px rgba(6, 141, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
+}
+
+.dark .a-illus-backdrop::before {
+  background: radial-gradient(130px 130px at 80% 16%, rgba(6, 141, 255, .14), transparent 70%);
+}
+
+/* Голубой ореол за hero лендинга (§05 аудита: декоративный градиент — литерал).
+   Тёмного варианта нет намеренно: та же rgba читается и на #fff, и на #161617.
+   Вешать на корень страницы лендинга, а не на body — pk-frontend это всё
+   приложение, а не набор лендингов. */
+.a-page-glow {
+  position: relative;
+  z-index: 0;
+}
+
+/* z-index: -1 красится поверх фона хоста, но под его контентом — только если у
+   хоста есть свой контекст наложения (z-index: 0 выше). */
+.a-page-glow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-image: radial-gradient(
+    closest-side circle,
+    rgba(43, 127, 255, .1) 0%,
+    rgba(43, 127, 255, .05) 48%,
+    rgba(43, 127, 255, 0) 100%
+  );
+  background-size: 1500px 1500px;
+  background-position: 50% -420px;
+}

package/components/elements/button/AButtonV2.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 
-type View = 'solid' | 'outline' | 'ghost' | 'soft'
+type View = 'solid' | 'outline' | 'ghost' | 'soft' | 'gradient'
 type Size = 'xs' | 'sm' | 'md' | 'lg'
 type Color = 'blue' | 'green' | 'red' | 'gray' | 'white'
-type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 
 const props = withDefaults(defineProps<{
   view?: View
@@ -16,6 +16,8 @@ const props = withDefaults(defineProps<{
   loading?: boolean
   disabled?: boolean
   block?: boolean
+  glow?: boolean
+  square?: boolean
   type?: 'button' | 'submit' | 'reset'
 }>(), {
   view: 'solid',
@@ -26,6 +28,8 @@ const props = withDefaults(defineProps<{
   loading: false,
   disabled: false,
   block: false,
+  glow: false,
+  square: false,
   type: 'button',
 })
 
@@ -33,38 +37,65 @@ const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
 const VIEW_CLASS: Record<Color, Record<View, string>> = {
   blue: {
-    solid: 'bg-action-primary text-action-primary-fg shadow-xs hover:bg-action-primary-hover hover:shadow-md active:bg-action-primary-active',
+    solid: 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover active:bg-action-primary-active',
+    gradient: 'bg-linear-to-r from-brand-500 to-brand-400 text-inverted hover:brightness-105',
     outline: 'border border-brand bg-action-secondary text-brand hover:bg-brand-subtle active:bg-blue-subtle',
     ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
     soft: 'bg-brand-subtle text-brand hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
   },
   green: {
-    solid: 'bg-success text-white shadow-xs hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
+    solid: 'bg-success text-white hover:bg-green-700 active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
+    gradient: 'bg-linear-to-r from-green-600 to-green-500 text-inverted hover:brightness-105',
     outline: 'border border-success bg-action-secondary text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
     ghost: 'text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
     soft: 'bg-success-subtle text-success hover:bg-green-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
   },
   red: {
-    solid: 'bg-action-danger text-action-danger-fg shadow-xs hover:bg-action-danger-hover hover:shadow-md active:bg-action-danger-hover',
+    solid: 'bg-action-danger text-action-danger-fg hover:bg-action-danger-hover active:bg-action-danger-hover',
+    gradient: 'bg-linear-to-r from-red-600 to-red-500 text-inverted hover:brightness-105',
     outline: 'border border-danger bg-action-secondary text-danger hover:bg-danger-subtle active:bg-red-subtle',
     ghost: 'text-danger hover:bg-danger-subtle active:bg-red-subtle',
     soft: 'bg-danger-subtle text-danger hover:bg-red-subtle active:bg-red-200/70 dark:active:bg-red-500/25',
   },
   gray: {
     /* осознанно константный серый solid: action-gray триады нет в ДС */
-    solid: 'bg-gray-500 text-white shadow-xs hover:bg-gray-600 hover:shadow-md active:bg-gray-700',
+    solid: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',
+    gradient: 'bg-linear-to-r from-gray-600 to-gray-500 text-inverted hover:brightness-105',
     outline: 'border border-strong bg-action-secondary text-primary hover:border-strong hover:bg-action-secondary-hover active:bg-badge',
     ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
     soft: 'bg-badge text-quaternary hover:bg-badge active:bg-badge/70',
   },
   white: {
-    solid: 'bg-main text-brand-600 shadow-xs hover:bg-brand-subtle hover:shadow-md active:bg-blue-subtle',
+    solid: 'bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    gradient: 'bg-linear-to-r from-white to-brand-50 text-brand-600 hover:brightness-105',
     outline: 'border border-brand bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
     ghost: 'text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
     soft: 'bg-brand-subtle text-brand-600 hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
   },
 }
 
+/* Тень вынесена из VIEW_CLASS: конфликт shadow-утилит Tailwind решает порядком
+   в стилях, а не порядком классов, поэтому glow должен ЗАМЕНЯТЬ базовую тень. */
+const RAISED_VIEWS: View[] = ['solid', 'gradient']
+
+const BASE_ELEVATION = 'shadow-xs hover:shadow-md'
+
+/* Цветная тень: форма и цвет раздельно. Тон берётся из примитивов, а не из
+   семантики — ореол не должен сам менять оттенок между темами; пара dark: —
+   осознанная подгонка плотности (на #161617 40% блюмит). */
+const GLOW_CLASS: Record<Color, string> = {
+  blue: 'shadow-md shadow-brand-500/30 hover:shadow-lg hover:shadow-brand-500/40 dark:shadow-brand-400/25 dark:hover:shadow-brand-400/35',
+  green: 'shadow-md shadow-green-600/30 hover:shadow-lg hover:shadow-green-600/40 dark:shadow-green-500/25 dark:hover:shadow-green-500/35',
+  red: 'shadow-md shadow-red-600/30 hover:shadow-lg hover:shadow-red-600/40 dark:shadow-red-500/25 dark:hover:shadow-red-500/35',
+  gray: 'shadow-md shadow-gray-500/25 hover:shadow-lg hover:shadow-gray-500/35 dark:shadow-gray-400/20 dark:hover:shadow-gray-400/30',
+  white: 'shadow-md shadow-brand-500/25 hover:shadow-lg hover:shadow-brand-500/35 dark:shadow-brand-400/20 dark:hover:shadow-brand-400/30',
+}
+
+const elevationClass = computed(() => {
+  if (!RAISED_VIEWS.includes(props.view)) return ''
+  return props.glow ? GLOW_CLASS[props.color] : BASE_ELEVATION
+})
+
 const SIZE_CLASS: Record<Size, string> = {
   xs: 'h-6 gap-1 px-2 text-body-sm',
   sm: 'h-8 gap-1.5 px-3 text-body-sm',
@@ -72,13 +103,24 @@ const SIZE_CLASS: Record<Size, string> = {
   lg: 'h-12 gap-2.5 px-5 text-body-lg',
 }
 
+/* Квадрат под одну иконку: ЗАМЕНЯЕТ SIZE_CLASS, а не дописывается к нему —
+   `px-0` рядом с `px-4` проиграет (конфликт решает порядок в stylesheet), из-за
+   чего такие кнопки обычно лепят через `!w-10 !px-0`. */
+const SQUARE_CLASS: Record<Size, string> = {
+  xs: 'size-6',
+  sm: 'size-8',
+  md: 'size-10',
+  lg: 'size-12',
+}
+
 const ROUNDED_CLASS: Record<Rounded, string> = {
-  none: 'rounded-none',
-  sm: 'rounded-sm',
-  md: 'rounded-md',
-  lg: 'rounded-lg',
-  xl: 'rounded-xl',
-  full: 'rounded-full',
+  'none': 'rounded-none',
+  'sm': 'rounded-sm',
+  'md': 'rounded-md',
+  'lg': 'rounded-lg',
+  'xl': 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  'full': 'rounded-full',
 }
 
 const ICON_SIZE: Record<Size, string> = {
@@ -98,10 +140,11 @@ function onClick(event: MouseEvent) {
   <button
     :type="type"
     :disabled="disabled || loading"
-    class="button-v2 inline-flex select-none items-center justify-center font-semibold transition-all duration-150 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+    class="button-v2 inline-flex items-center justify-center font-semibold transition-all duration-150 select-none focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
       VIEW_CLASS[color][view],
-      SIZE_CLASS[size],
+      elevationClass,
+      square ? SQUARE_CLASS[size] : SIZE_CLASS[size],
       ROUNDED_CLASS[rounded],
       block ? 'w-full' : '',
       iconRight ? 'flex-row-reverse' : '',

package/components/elements/count-up/ACountUp.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// Декоративный счётчик: анимирует 0 → `to` при монтировании.
+// С пропом `play` поведение другое: значение сразу стоит на `to`, а анимация
+// играет заново на каждое изменение триггера (ховер карточки в лендингах).
+const props = withDefaults(defineProps<{
+  to: number
+  duration?: number
+  suffix?: string
+  locale?: string
+  play?: number
+}>(), {
+  duration: 1100,
+  suffix: '',
+  locale: 'ru-RU',
+})
+
+const isTriggered = computed(() => props.play !== undefined)
+
+const value = ref(isTriggered.value ? props.to : 0)
+const display = computed(() => `${Math.round(value.value).toLocaleString(props.locale)}${props.suffix}`)
+
+let raf = 0
+
+function run() {
+  cancelAnimationFrame(raf)
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    value.value = props.to
+    return
+  }
+  value.value = 0
+  let start = 0
+  const step = (ts: number) => {
+    if (!start) start = ts
+    const progress = Math.min(1, (ts - start) / props.duration)
+    value.value = props.to * (1 - (1 - progress) ** 3)
+    if (progress < 1) raf = requestAnimationFrame(step)
+  }
+  raf = requestAnimationFrame(step)
+}
+
+onMounted(() => {
+  if (!isTriggered.value) run()
+})
+
+watch(() => props.play, (next) => {
+  if (next) run()
+})
+
+onUnmounted(() => cancelAnimationFrame(raf))
+</script>
+
+<template>
+  <span>{{ display }}</span>
+</template>

package/components/elements/curve-block-v2/ACurveBlockV2.vue

@@ -8,24 +8,24 @@ withDefaults(defineProps<{
   description: string
   to?: string
   color?: string
+  tint?: string
   forceActive?: boolean
-  hoverAccent?: boolean
 }>(), {
-  color: '#068dff',
+  color: 'var(--color-icon-brand)',
+  tint: undefined,
   forceActive: true,
-  hoverAccent: false,
 })
 </script>
-`
+
 <template>
-  <NuxtLinkLocale
+  <nuxt-link-locale
     :to="to"
-    :style="{ '--cb-color': color }"
-    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-default bg-main p-6 text-left transition-all duration-200 hover:-translate-y-1 hover:border-strong hover:shadow-lg"
-    :class="{ 'active-item': !to && forceActive, 'hover-accent': hoverAccent }"
+    :style="{ '--cb-color': color, '--cb-tint': tint }"
+    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-default bg-main p-6 text-left"
+    :class="{ 'active-item': !to && forceActive }"
     active-class="active-item"
   >
-    <div class="arrow-icon absolute right-4 top-4 flex size-7 items-center justify-center rounded-full bg-brand-subtle p-2 text-brand">
+    <div class="arrow-icon absolute top-4 right-4 flex size-8 items-center justify-center rounded-full bg-canvas p-2 text-secondary transition-all duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
       <svg
         class="size-2"
         viewBox="16 16 16 16"
@@ -49,36 +49,72 @@ withDefaults(defineProps<{
     </div>
 
     <div class="flex flex-col gap-2 pr-6">
-      <p class="title text-body-lg-strong text-primary">
+      <p class="title text-h5 text-primary transition-colors duration-200">
         {{ title }}
       </p>
-      <p class="text-body-md leading-relaxed text-secondary">
+      <p class="text-body-md leading-relaxed text-quaternary">
         {{ description }}
       </p>
     </div>
-  </NuxtLinkLocale>
+  </nuxt-link-locale>
 </template>
 
 <style scoped>
+.curve-block-v2 {
+  --cb-fill: var(--cb-tint, color-mix(in srgb, var(--cb-color) 10%, transparent));
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
 .icon-item {
-  background-color: color-mix(in srgb, var(--cb-color) 10%, transparent);
+  background-color: var(--cb-fill);
   color: var(--cb-color);
 }
 
-.hover-accent:hover {
+.curve-block-v2:hover {
+  transform: translateY(-4px);
   border-color: var(--cb-color);
+  box-shadow: 0 0 22px -12px var(--cb-color);
+}
+
+.curve-block-v2:hover .title,
+.curve-block-v2:hover .arrow-icon {
+  color: var(--cb-color);
+}
+
+.curve-block-v2:hover .arrow-icon {
+  background-color: var(--cb-fill);
 }
 
 .active-item {
   border-color: var(--cb-color);
-  background-color: color-mix(in srgb, var(--cb-color) 10%, transparent);
+  box-shadow: 0 0 22px -12px var(--cb-color);
 }
+
+.active-item:hover {
+  transform: none;
+}
+
 .active-item .title,
 .active-item .arrow-icon {
   color: var(--cb-color);
 }
-.active-item .icon-item {
-  background-color: var(--cb-color);
-  color: var(--color-icon-on-brand);
+
+.active-item .arrow-icon {
+  background-color: var(--cb-fill);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .curve-block-v2,
+  .curve-block-v2 .title,
+  .curve-block-v2 .arrow-icon {
+    transition: none;
+  }
+
+  .curve-block-v2:hover {
+    transform: none;
+  }
 }
 </style>

package/components/elements/infinite-carousel/AInfiniteCarousel.vue

@@ -1,10 +1,31 @@
 <script setup lang="ts">
-
+/* fade: gradient — краевые градиенты на bg-main (историческое поведение,
+   верно только когда карусель лежит на основной поверхности);
+   mask — краевая маска, не зависящая от фона под каруселью. */
+withDefaults(defineProps<{
+  duration?: number
+  pauseOnHover?: boolean
+  fade?: 'gradient' | 'mask' | 'none'
+}>(), {
+  duration: 25,
+  pauseOnHover: false,
+  fade: 'gradient',
+})
 </script>
 
 <template>
-  <div class="carousel overflow-hidden w-full relative">
-    <div class="flex w-max animate-scroll">
+  <div
+    class="carousel relative w-full overflow-hidden"
+    :class="[
+      fade === 'gradient' ? 'carousel--fade-gradient' : '',
+      fade === 'mask' ? 'carousel--fade-mask' : '',
+      pauseOnHover ? 'carousel--pausable' : '',
+    ]"
+  >
+    <div
+      class="animate-scroll flex w-max"
+      :style="{ animationDuration: `${duration}s` }"
+    >
       <div
         v-for="i in 2"
         :key="i"
@@ -16,17 +37,22 @@
   </div>
 </template>
 
-<style lang="scss">
+<style scoped>
 @keyframes scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
 }
+
 .animate-scroll {
   animation: scroll 25s linear infinite;
 }
 
-.carousel:before,
-.carousel:after {
+.carousel--pausable:hover .animate-scroll {
+  animation-play-state: paused;
+}
+
+.carousel--fade-gradient:before,
+.carousel--fade-gradient:after {
   position: absolute;
   top: 0;
   width: 120px;
@@ -35,13 +61,25 @@
   z-index: 2;
 }
 
-.carousel:before {
+.carousel--fade-gradient:before {
   left: 0;
   background: linear-gradient(to left, transparent, var(--background-color-main));
 }
 
-.carousel:after {
+.carousel--fade-gradient:after {
   right: 0;
   background: linear-gradient(to right, transparent, var(--background-color-main));
 }
+
+/* Маска читает только альфу, поэтому #000 здесь — не цвет (осознанное
+   исключение из запрета сырых hex). */
+.carousel--fade-mask {
+  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-scroll {
+    animation: none;
+  }
+}
 </style>

package/components/elements/section-heading/ASectionHeading.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Заголовок блока лендинга: Display/Small → Display/Large + подзаголовок.
+// Бейджи-eyebrow в блоках не используются — они живут только в hero и форме обратной связи.
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  center?: boolean
+}>(), {
+  title: '',
+  subtitle: '',
+  center: false,
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2.5"
+    :class="center ? 'items-center text-center' : 'text-left'"
+  >
+    <h2 class="text-display-sm text-primary md:text-display-lg">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h2>
+    <p
+      v-if="subtitle || $slots.subtitle"
+      class="text-body-lg text-quaternary"
+      :class="{ 'max-w-2xl': center }"
+    >
+      <slot name="subtitle">
+        {{ subtitle }}
+      </slot>
+    </p>
+  </div>
+</template>