html, body {
  background-color: #CEE5F6 !important;
  background: #CEE5F6 !important;
  margin: 0;
  padding: 0;
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Фон: нежно-небесно голубой перламутр ===== */
.cyber-circuit-svg, .cyber-suit-pattern, .grid-mesh, .aurora-portal, .ao-topo, .topographic-contour-svg {
  display: none !important;
}

.viewport-canvas {
  background:
    /* мягкий небесно-лазурный свет сверху */
    radial-gradient(95% 75% at 30% 15%, rgba(180, 220, 248, 0.95) 0%, transparent 72%),
    /* дополнительный воздушный небесный оттенок в центре */
    radial-gradient(85% 65% at 75% 45%, rgba(195, 230, 252, 0.75) 0%, transparent 68%),
    /* деликатный сиреневый отлив сверху справа */
    radial-gradient(50% 35% at 95% 5%, rgba(216, 214, 242, 0.22) 0%, transparent 65%),
    /* нежный розовый отблеск снизу слева */
    radial-gradient(45% 30% at 0% 100%, rgba(238, 220, 228, 0.16) 0%, transparent 65%),
    /* едва заметное тепло у горизонта снизу справа (уменьшено) */
    radial-gradient(35% 25% at 100% 100%, rgba(226, 208, 176, 0.07) 0%, transparent 60%),
    /* основа: чистый нежно-небесный градиент */
    linear-gradient(180deg, #CEE5F6 0%, #D8ECF8 40%, #E3F2FB 70%, #EDF6FC 100%) !important;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* тонкое зерно, как у тиснёной бумаги */
.viewport-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .36  0 0 0 0 .45  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* перламутровый блик: скользит по поверхности */
.viewport-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .50;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255, 0.65) 45%, rgba(215, 238, 255, 0.40) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: aoPearl 40s ease-in-out infinite alternate;
}
@keyframes aoPearl {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@media (prefers-reduced-motion:reduce) {
  .viewport-canvas::before { animation: none; }
}

/* Shadow Rock Hero Text Gradient */
.anim-hero-text-grad {
  display: inline-block;
  color: #0f172a !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Перламутровый сапфировый градиент заголовков */

/* Изумрудный перламутровый градиент (для «ВАША НОВАЯ РЕАЛЬНОСТЬ») */
.emerald-title-gradient {
  background: linear-gradient(
    135deg,
    #065f46 0%,
    #059669 25%,
    #34d399 45%,
    #10b981 65%,
    #047857 85%,
    #065f46 100%
  ) !important;
  background-size: 240% 240% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: pearlTitleGradientGlide 6s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 14px rgba(16, 185, 129, 0.25));
  display: inline;
}

.pearl-title-gradient {
  background: linear-gradient(
    135deg,
    #075985 0%,
    #0284c7 25%,
    #38bdf8 45%,
    #0284c7 65%,
    #082f49 85%,
    #075985 100%
  ) !important;
  background-size: 240% 240% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: pearlTitleGradientGlide 6s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 14px rgba(2, 132, 199, 0.18));
  display: inline;
}
@keyframes pearlTitleGradientGlide {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.manifesto-stat-gradient {
  background: linear-gradient(
    135deg,
    #0284c7 0%,
    #38bdf8 30%,
    #0369a1 60%,
    #0284c7 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: pearlTitleGradientGlide 5s ease-in-out infinite !important;
  filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.2));
  display: inline;
}


/* Shadow Rock Header Navigation Button */
.ao-nav-cta {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}
.ao-nav-cta:hover {
  background: #1e293b !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35) !important;
}

/* 1. ЛОКАЛЬНЫЙ ШРИФТ BENZIN SEMIBOLD (ОСНОВНОЙ ШРИФТ ЗАГОЛОВКОВ) */
    @font-face {
      font-family: 'Benzin';
      src: url('Benzin-Semibold.woff2') format('woff2'),
           url('../fonts/Benzin-Semibold.woff2') format('woff2'),
           url('../../Benzin-Semibold.woff2') format('woff2'),
           url('/Benzin-Semibold.woff2') format('woff2'),
           url('Benzin-Medium.woff2') format('woff2'),
           url('benzin-bold.otf') format('opentype'),
           url('https://fonts.cdnfonts.com/s/72887/Benzin-Bold.woff') format('woff');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    /* 1.1. ЛОКАЛЬНЫЙ ШРИФТ SUNLESS DAY ДЛЯ ПИСЬМА ОСНОВАТЕЛЕЙ */
    @font-face {
      font-family: 'SunlessDay';
      src: url('sunless-day.otf') format('opentype'),
           url('../../sunless-day.otf') format('opentype'),
           url('/sunless-day.otf') format('opentype');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    /* 2. ЛОКАЛЬНЫЙ И CDN ШРИФТ INTER (ДЛЯ ВСЕГО ОСТАЛЬНОГО ТЕКСТА) */
    @font-face {
      font-family: 'Inter';
      src: url('Inter/Inter-Regular.otf') format('opentype'),
           url('../../Inter/Inter-Regular.otf') format('opentype'),
           url('/Inter/Inter-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Inter';
      src: url('Inter/Inter-Bold.otf') format('opentype'),
           url('../../Inter/Inter-Bold.otf') format('opentype'),
           url('/Inter/Inter-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    :root {
      /* NATURAL LUXURY / COLLECTION NO. 1: THE HIGH ALTITUDE */
      --color-glacial-air: #C9DFEB;
      --color-frosted-peak: #F2F3F5;
      --color-shadow-rock: #4A5568;
      --color-aura-blue: #6A9BC2;
      --color-celestial-sky: #A4CDEB;
      --color-pine-needle: #2F4F3F;
      --color-altai-dawn: #C2A77E;
      --color-earthen-stone: #7D7063;

      --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
      --font-heading: 'Benzin', 'Inter', sans-serif;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    *, *::before, *::after {
      box-sizing: border-box;
      font-family: var(--font-sans);
    }

    html {
      overflow-x: clip !important;
      max-width: 100vw !important;
      width: 100% !important;
    }

    body {
      background-color: var(--color-frosted-peak, #F2F3F5);
      color: var(--color-shadow-rock, #4A5568);
      font-family: var(--font-sans);
      overflow-x: clip !important;
      max-width: 100vw !important;
      width: 100% !important;
      position: relative;
      margin: 0;
      padding: 0;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-color: #F2F3F5;
      background-image: 
        radial-gradient(at 10% 12%, rgba(201, 223, 235, 0.45) 0px, transparent 55%),
        radial-gradient(at 90% 22%, rgba(164, 205, 235, 0.40) 0px, transparent 50%),
        radial-gradient(at 15% 60%, rgba(201, 223, 235, 0.30) 0px, transparent 55%),
        radial-gradient(at 85% 78%, rgba(194, 167, 126, 0.16) 0px, transparent 50%),
        radial-gradient(at 50% 95%, rgba(106, 155, 194, 0.20) 0px, transparent 55%),
        linear-gradient(180deg, #F8FAFC 0%, #F2F3F5 25%, #EDF3F8 60%, #F2F3F5 100%);
      will-change: transform;
      transform: translateZ(0);
    }

    /* ВЕСЬ САЙТ, ВСЕ КАРТОЧКИ, ТЕКСТ, КНОПКИ, МЕТРИКИ, H3-H6: СТРОГО INTER */
    body, p, span, div, a, button, input, select, textarea, label, li, td, th,
    h3, h4, h5, h6,
    .btn-optic,
    .font-code, .font-mono, .font-sans, .font-inter,
    .manifesto-glass-card, .manifesto-glass-card *,
    .bento-glass-sapphire, .bento-glass-sapphire *,
    .bento-glass-emerald, .bento-glass-emerald *,
    .bento-glass-azure, .bento-glass-azure *,
    .bento-glass-crystal, .bento-glass-crystal *,
    .liquid-crystal-panel, .liquid-crystal-panel *,
    .persona-selector-card, .persona-selector-card *,
    .resume-watermark-paper, .resume-watermark-paper * {
      font-family: var(--font-sans);
    }

    /* ЯВНОЕ ПРИНУДИТЕЛЬНОЕ ПРИМЕНЕНИЕ INTER (НЕ ЗАТРАГИВАЕТ ЗАГОЛОВКИ H1, H2 И BENZIN) */
    .font-inter,
    .font-sans {
      font-family: var(--font-sans);
    }
    .font-inter *:not(h1):not(h2):not(.font-benzin):not(.font-benzin-heading):not(.manifesto-ruble-title),
    .font-sans *:not(h1):not(h2):not(.font-benzin):not(.font-benzin-heading):not(.manifesto-ruble-title) {
      font-family: var(--font-sans);
    }

    /* ШРИФТЫ И СТИЛИ ДЛЯ БУМАЖНОГО ПИСЬМА ОСНОВАТЕЛЕЙ */
    .font-serif-letter,
    .font-serif-letter * {
      font-family: 'Lora', 'PT Serif', Georgia, 'Times New Roman', serif !important;
    }
    .font-signature,
    .font-signature * {
      font-family: 'Caveat', 'Marck Script', cursive, sans-serif !important;
    }

    #founders-letter .letter-sheet {
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      background: #FFFFFF;
      border-radius: 20px;
      padding: 56px;
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 2px 8px -2px rgba(15, 23, 42, 0.03);
    }
    @media (max-width: 640px) {
      #founders-letter .letter-sheet {
        padding: 24px;
        border-radius: 16px;
      }
    }

    /* ШРИФТ BENZIN - СТРОГО И ТОЛЬКО ДЛЯ ГЛАВНЫХ СЕКЦИОННЫХ ЗАГОЛОВКОВ (H1, H2) С ЗАЩИТОЙ ОТ ОБРЕЗАНИЯ */
    h1, h2,
    h1 *, h2 *,
    .font-benzin,
    .font-benzin *,
    .font-benzin-heading,
    .font-benzin-heading *,
    .manifesto-ruble-title {
      font-family: 'Benzin', var(--font-heading) !important;
      letter-spacing: -0.02em;
      overflow: visible !important;
    }
    h1, h2, .font-benzin {
      line-height: 1.06 !important;
    }
    h1 > span, h2 > span, .font-benzin > span {
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      overflow: visible !important;
    }

    /* ФОНОВЫЙ ХОЛСТ С ГЕНЕРАТИВНОЙ СЕТКОЙ И ЖИВЫМИ НЕОНОВЫМИ ЛИНИЯМИ */
    .viewport-canvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .grid-mesh {
      position: absolute;
      inset: 0;
      background-image: 
        radial-gradient(circle at center, rgba(14, 165, 233, 0.15) 1.2px, transparent 1.2px),
        linear-gradient(to right, rgba(14, 165, 233, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.045) 1px, transparent 1px);
      background-size: 36px 36px, 108px 108px, 108px 108px;
      mask-image: radial-gradient(ellipse at 50% 50%, black 50%, transparent 95%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 50%, transparent 95%);
    }

    /* АТМОСФЕРНЫЕ ЖИВЫЕ АВРОРЫ */
    .aurora-portal {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      will-change: transform, opacity;
    }
    .aurora-1 {
      top: -6vh;
      left: 8vw;
      width: 680px;
      height: 680px;
      background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(2, 132, 199, 0.08) 45%, transparent 75%);
      animation: auroraFloat1 22s ease-in-out infinite alternate;
    }
    .aurora-2 {
      top: 32vh;
      right: 4vw;
      width: 780px;
      height: 780px;
      background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, rgba(56, 189, 248, 0.07) 50%, transparent 75%);
      animation: auroraFloat2 26s ease-in-out infinite alternate;
    }
    .aurora-3 {
      bottom: 4vh;
      left: 12vw;
      width: 720px;
      height: 720px;
      background: radial-gradient(circle, rgba(2, 132, 199, 0.16) 0%, rgba(56, 189, 248, 0.06) 45%, transparent 75%);
      animation: auroraFloat3 24s ease-in-out infinite alternate;
    }
    .aurora-4 {
      top: 68vh;
      right: 22vw;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(125, 211, 252, 0.16) 0%, rgba(2, 132, 199, 0.06) 50%, transparent 75%);
      animation: auroraFloat1 28s ease-in-out infinite alternate;
    }

    @keyframes auroraFloat1 {
      0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
      50% { transform: translate3d(40px, -30px, 0) scale(1.08); opacity: 0.95; }
      100% { transform: translate3d(-30px, 35px, 0) scale(0.94); opacity: 0.65; }
    }
    @keyframes auroraFloat2 {
      0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.65; }
      50% { transform: translate3d(-50px, 40px, 0) scale(1.12); opacity: 0.9; }
      100% { transform: translate3d(35px, -25px, 0) scale(0.92); opacity: 0.6; }
    }
    @keyframes auroraFloat3 {
      0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
      50% { transform: translate3d(35px, -45px, 0) scale(1.1); opacity: 0.95; }
      100% { transform: translate3d(-40px, 20px, 0) scale(0.95); opacity: 0.65; }
    }

    /* КИБЕРНЕТИЧЕСКИЙ ФОН: УЗОРЫ МИКРОСХЕМ И БИОНИЧЕСКИХ НЕОНОВЫХ ДОРОЖЕК (КАК НА КОСТЮМЕ АНДРОИДА) */
    .cyber-suit-pattern {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-image: 
        url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 v60 l30 30 h50 l20 -20 v-70 M160 0 v40 l-25 25 h-30 M240 70 h-40 l-25 25 v65 l35 35 h30 M0 140 h50 l35 35 v65 M120 160 l20 20 h40 l20 20 v40 M0 200 h25 l20 20 v20 M190 20 h30 l20 20' fill='none' stroke='%230284c7' stroke-opacity='0.09' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='90' r='2.5' fill='%2338bdf8' fill-opacity='0.3'/%3E%3Ccircle cx='100' cy='90' r='2' fill='%230284c7' fill-opacity='0.25'/%3E%3Ccircle cx='175' cy='95' r='2.5' fill='%2338bdf8' fill-opacity='0.3'/%3E%3Ccircle cx='85' cy='175' r='2.5' fill='%2338bdf8' fill-opacity='0.3'/%3E%3Ccircle cx='180' cy='180' r='2' fill='%230284c7' fill-opacity='0.25'/%3E%3Ccircle cx='45' cy='220' r='2' fill='%2338bdf8' fill-opacity='0.3'/%3E%3C/svg%3E");
      background-repeat: repeat;
      mask-image: radial-gradient(ellipse at 50% 50%, black 65%, transparent 98%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 65%, transparent 98%);
      pointer-events: none;
    }

    .cyber-circuit-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
    }

    /* Фоновые полупрозрачные дорожки микросхем */
    .cyber-base-track {
      stroke: rgba(14, 165, 233, 0.13);
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Двойные параллельные шины данных */
    .cyber-bus-track {
      stroke: rgba(56, 189, 248, 0.18);
      stroke-width: 1.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Живые бегущие световые неоновые импульсы по узорам */
    .cyber-pulse-fast {
      stroke: url(#cyberPulseNeonGrad);
      stroke-width: 2.4;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 120 1200;
      animation: cyberPulseGlide 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)) drop-shadow(0 0 16px rgba(14, 165, 233, 0.5));
    }
    .cyber-pulse-mid {
      stroke: url(#cyberPulseNeonGrad);
      stroke-width: 2.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 100 1400;
      animation: cyberPulseGlideReverse 13s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 2.5s;
      filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)) drop-shadow(0 0 16px rgba(14, 165, 233, 0.5));
    }
    .cyber-pulse-slow {
      stroke: url(#cyberPulseNeonGrad);
      stroke-width: 2.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 140 1600;
      animation: cyberPulseGlide 16s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 5s;
      filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)) drop-shadow(0 0 16px rgba(14, 165, 233, 0.5));
    }

    @keyframes cyberPulseGlide {
      0% { stroke-dashoffset: 1400; opacity: 0; }
      5% { opacity: 1; }
      90% { opacity: 1; }
      100% { stroke-dashoffset: -1400; opacity: 0; }
    }
    @keyframes cyberPulseGlideReverse {
      0% { stroke-dashoffset: -1400; opacity: 0; }
      5% { opacity: 1; }
      90% { opacity: 1; }
      100% { stroke-dashoffset: 1400; opacity: 0; }
    }

    /* Светящиеся контактные узлы-ноды микросхем */
    .cyber-node-dot {
      fill: #38bdf8;
      filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
      animation: cyberNodeBreathe 3.5s ease-in-out infinite alternate;
    }
    .cyber-node-ring {
      stroke: rgba(56, 189, 248, 0.5);
      stroke-width: 1.2;
      fill: none;
      transform-origin: center;
      animation: cyberRingPulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }

    @keyframes cyberNodeBreathe {
      0% { transform: scale(0.85); opacity: 0.55; }
      100% { transform: scale(1.2); opacity: 1; }
    }
    @keyframes cyberRingPulse {
      0% { transform: scale(0.6); opacity: 0.8; }
      80%, 100% { transform: scale(2.2); opacity: 0; }
    }

    /* ТОПОГРАФИЧЕСКИЕ ИЗОЛИНИИ ВЫСОТ АЛТАЙСКИХ ГОР (NATURAL LUXURY / GLACIAL AIR) */
    .topographic-contour-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
    }
    .topo-contour-line {
      stroke: var(--color-glacial-air, #C9DFEB);
      stroke-width: 1.25;
      fill: none;
      opacity: 0.55;
    }
    .topo-contour-accent {
      stroke: var(--color-celestial-sky, #A4CDEB);
      stroke-width: 1.6;
      fill: none;
      opacity: 0.75;
    }
    .topo-contour-pulse {
      stroke: url(#glacialFlowGrad);
      stroke-width: 2.2;
      fill: none;
      stroke-dasharray: 240 1600;
      animation: topoFlow 14s linear infinite;
    }
    @keyframes topoFlow {
      0% { stroke-dashoffset: 1840; }
      100% { stroke-dashoffset: 0; }
    }
    .topo-altitude-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      fill: var(--color-aura-blue, #6A9BC2);
      opacity: 0.7;
    }

    /* ОЖИВАЮЩИЕ УВЕДОМЛЕНИЯ «ДО → ПОСЛЕ» */
    .cta-push-card {
      transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease-out;
    }
    .cta-push-card.is-solved {
      border-color: #2F4F3F !important; /* Pine Needle */
      box-shadow: 0 8px 24px -4px rgba(47, 79, 63, 0.16), 0 2px 6px -1px rgba(47, 79, 63, 0.08) !important;
    }
    .notif-tag-solved {
      background-color: rgba(47, 79, 63, 0.12);
      color: #2F4F3F;
      font-weight: 700;
      border-radius: 9999px;
      padding: 2px 8px;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .notif-typing-chip {
      font-size: 12px;
      color: #6A9BC2;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .notif-typing-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #6A9BC2;
      animation: notifDotPulse 1.2s infinite ease-in-out;
    }
    .notif-typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .notif-typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes notifDotPulse {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40% { transform: scale(1.15); opacity: 1; }
    }

    /* ПАСХАЛКА «БРАТ» */
    .brother-easter-egg-btn {
      position: relative;
      cursor: pointer;
      user-select: none;
      transition: transform 0.2s ease;
    }
    .brother-easter-egg-btn:hover {
      transform: scale(1.05);
    }
    .brother-speech-bubble {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: #0f172a;
      color: #ffffff;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      z-index: 60;
    }
    .brother-speech-bubble::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: #0f172a transparent transparent transparent;
    }
    .brother-easter-egg-btn:hover .brother-speech-bubble,
    .brother-easter-egg-btn.active .brother-speech-bubble,
    .brother-speech-bubble.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    /* ФИНАЛЬНЫЙ CTA НА РАССВЕТНОМ ФОНЕ (ALTAI DAWN & GLACIAL AIR) */
    .cta-sunrise-section {
      position: relative;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(201, 223, 235, 0.35) 0%, rgba(242, 243, 245, 0.8) 35%, rgba(194, 167, 126, 0.25) 100%);
      border: 1px solid rgba(194, 167, 126, 0.35);
      box-shadow: 0 20px 60px -15px rgba(194, 167, 126, 0.2), 0 4px 16px rgba(15, 23, 42, 0.04);
      overflow: hidden;
    }
    .cta-sunrise-glow {
      position: absolute;
      top: -30%;
      right: -10%;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(194, 167, 126, 0.35) 0%, rgba(201, 223, 235, 0.2) 50%, transparent 70%);
      filter: blur(50px);
      pointer-events: none;
    }

    /* МЕЖСЕКЦИОННЫЕ АКЦЕНТНЫЕ НЕОНОВЫЕ ЛУЧИ */
    .section-neon-divider {
      position: relative;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.18) 20%, rgba(14, 165, 233, 0.28) 50%, rgba(56, 189, 248, 0.18) 80%, transparent);
      overflow: hidden;
      margin: 1.15rem 0;
      pointer-events: none;
    }
    @media (min-width: 1024px) {
      .section-neon-divider {
        margin: 1.75rem 0;
      }
    }
    .section-neon-divider .section-neon-beam {
      position: absolute;
      top: 0;
      height: 100%;
      width: 200px;
      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.35), #38bdf8, #ffffff, #38bdf8, transparent);
      box-shadow: 0 0 12px #38bdf8, 0 0 24px rgba(14, 165, 233, 0.65);
      animation: sectionNeonGlide var(--divider-duration, 8s) ease-in-out infinite;
      animation-delay: var(--divider-delay, 0s);
    }
    @keyframes sectionNeonGlide {
      0% { left: -220px; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }

    /* СТИЛИ КНОПОК МЕССЕНДЖЕРОВ (ЧИСТЫЙ СТИЛЬ БЕЗ ПОДЛОЖЕК) */
    .branch-btn {
      position: relative;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      opacity: 0.75;
    }
    .branch-btn:hover {
      opacity: 1;
      transform: translateX(4px);
    }
    .branch-btn.active {
      opacity: 1;
      transform: translateX(6px);
    }

    /* АБСОЛЮТНО ЧИСТОЕ СТЕКЛО БЕЗ ВНУТРЕННИХ ГРАДИЕНТОВ И ГРЯЗИ */
    .liquid-crystal-panel,
    .liquid-optic-panel {
      background: #ffffff;
      backdrop-filter: blur(40px) saturate(220%);
      -webkit-backdrop-filter: blur(40px) saturate(220%);
      border: 1.5px solid rgba(255, 255, 255, 0.95);
      border-radius: 36px;
      box-shadow: 0 25px 60px -15px rgba(2, 60, 105, 0.1);
      position: relative;
      overflow: hidden;
      transition: all 0.4s var(--ease-fluid);
    }
    .liquid-crystal-panel:hover,
    .liquid-optic-panel:hover {
      transform: translateY(-4px);
      border-color: #38bdf8;
      box-shadow: 0 35px 90px -10px rgba(2, 132, 199, 0.22), 0 0 30px rgba(56, 189, 248, 0.3);
    }

    /* ЧИСТЫЕ КАРТОЧКИ С ПРЕМИАЛЬНЫМ СВЕЧЕНИЕМ И ГРАДИЕНТАМИ */
    .neon-contour-card,
    .neon-trace-card {
      position: relative;
      background: #ffffff;
      border-radius: 36px;
      border: 1.5px solid #e2e8f0;
      box-shadow: 0 20px 50px -15px rgba(2, 60, 105, 0.08);
      overflow: hidden;
      transition: all 0.35s var(--ease-fluid);
    }
    .neon-contour-card:hover,
    .neon-trace-card:hover {
      transform: translateY(-4px);
      border-color: #38bdf8;
      box-shadow: 0 30px 70px -10px rgba(2, 132, 199, 0.2), 0 0 25px rgba(56, 189, 248, 0.25);
    }

    /* СТИЛИ КАРТОЧЕК В БЛОКЕ +30% К ВЫРУЧКЕ (ЧИСТАЯ АЛТАЙСКАЯ ПАЛИТРА) */
    @keyframes manifestoIridescentGlow {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    /* АНИМАЦИЯ ОБВОДКИ ПО КОНТУРУ (BORDER BEAM) ДЛЯ ПОДЛОЖЕК МАНИФЕСТА */
    @keyframes borderBeamRotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .manifesto-glass-card,
    .manifesto-glass-card-emerald,
    .manifesto-glass-card-amber {
      position: relative;
      background: #ffffff;
      border-radius: 32px;
      overflow: hidden;
      z-index: 1;
      isolation: isolate;
      box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.7);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .manifesto-glass-card > *,
    .manifesto-glass-card-emerald > *,
    .manifesto-glass-card-amber > * {
      position: relative;
      z-index: 2;
    }

    /* Вращающийся неоновый световой луч по контуру (Animated Contour Border Beam) */
    .manifesto-glass-card::before,
    .manifesto-glass-card-emerald::before,
    .manifesto-glass-card-amber::before {
      content: '';
      position: absolute;
      top: -100%;
      left: -100%;
      width: 300%;
      height: 300%;
      background: conic-gradient(
        from 0deg,
        rgba(226, 232, 240, 0.6) 0deg,
        rgba(226, 232, 240, 0.6) 220deg,
        rgba(56, 189, 248, 0.15) 250deg,
        rgba(14, 165, 233, 0.7) 290deg,
        #38bdf8 335deg,
        rgba(226, 232, 240, 0.6) 360deg
      );
      animation: borderBeamRotate 6s linear infinite;
      z-index: -2;
    }

    .manifesto-glass-card-emerald::before {
      animation-duration: 6.5s;
      animation-delay: -2.2s;
      background: conic-gradient(
        from 0deg,
        rgba(226, 232, 240, 0.6) 0deg,
        rgba(226, 232, 240, 0.6) 220deg,
        rgba(52, 211, 153, 0.15) 250deg,
        rgba(16, 185, 129, 0.7) 290deg,
        #34d399 335deg,
        rgba(226, 232, 240, 0.6) 360deg
      );
    }

    .manifesto-glass-card-amber::before {
      animation-duration: 7s;
      animation-delay: -4.4s;
      background: conic-gradient(
        from 0deg,
        rgba(226, 232, 240, 0.6) 0deg,
        rgba(226, 232, 240, 0.6) 220deg,
        rgba(56, 189, 248, 0.15) 250deg,
        rgba(99, 102, 241, 0.7) 290deg,
        #818cf8 335deg,
        rgba(226, 232, 240, 0.6) 360deg
      );
    }

    /* Белая внутренняя подложка с отступом 2px для видимости контурной обводки */
    .manifesto-glass-card::after,
    .manifesto-glass-card-emerald::after,
    .manifesto-glass-card-amber::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: #ffffff;
      border-radius: 30px;
      z-index: -1;
      transition: background-color 0.3s ease;
    }

    .manifesto-glass-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.15), 0 0 24px 0 rgba(56, 189, 248, 0.25) !important;
    }

    .manifesto-glass-card-emerald:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.15), 0 0 24px 0 rgba(52, 211, 153, 0.25) !important;
    }

    .manifesto-glass-card-amber:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.15), 0 0 24px 0 rgba(129, 140, 248, 0.25) !important;
    }

    /* БЛАГОРОДНЫЙ ПЕРЕЛИВАЮЩИЙСЯ ГРАДИЕНТ ПО ВЫДЕЛЕННОМУ ТЕКСТУ */
    @keyframes textGradientShimmer {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    .manifesto-stat-gradient {
      display: inline-block;
      background: linear-gradient(130deg, #0284c7 0%, #06b6d4 30%, #3b82f6 60%, #0284c7 100%);
      background-size: 240% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textGradientShimmer 4s ease-in-out infinite;
    }

    .manifesto-highlight-phrase {
      display: inline;
      font-weight: 800;
      background: linear-gradient(110deg, #0284c7 0%, #0ea5e9 30%, #2563eb 65%, #0284c7 100%);
      background-size: 220% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textGradientShimmer 4s ease-in-out infinite;
    }

    .manifesto-card-title-gradient {
      display: inline-block;
      background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* АНИМАЦИЯ ЗАЧЕРКИВАНИЯ БОЛИ МЕНЕДЖЕРОВ КРАСНОЙ ЛИНИЕЙ */
    .crm-pain-strikethrough {
      position: relative;
      display: inline-block;
      color: #0f172a;
    }
    .crm-pain-strikethrough::after {
      content: '';
      position: absolute;
      left: -4px;
      right: -4px;
      top: 50%;
      height: 3px;
      background: linear-gradient(90deg, #ef4444, #dc2626);
      border-radius: 9999px;
      transform-origin: left center;
      transform: translateY(-50%) scaleX(0);
      animation: strikeThroughAnim 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
      pointer-events: none;
    }
    @keyframes strikeThroughAnim {
      0%, 15% {
        transform: translateY(-50%) scaleX(0);
        opacity: 0;
      }
      38%, 85% {
        transform: translateY(-50%) scaleX(1);
        opacity: 1;
      }
      94%, 100% {
        transform: translateY(-50%) scaleX(1);
        opacity: 0;
      }
    }

    /* ГРАДИЕНТ ПО ТЕКСТУ В БЛОКЕ CRM */
    .crm-headline-gradient {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #059669 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline;
    }

    /* ФИРМЕННАЯ БУМАГА С ВОДЯНЫМ ЗНАКОМ «РЕЗЮМЕ» */
    .resume-watermark-paper {
      background-color: #ffffff;
      background-image: 
        radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.03) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg width='180' height='90' viewBox='0 0 180 90' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-family='Arial, sans-serif' font-size='11' font-weight='900' fill='rgba(15,23,42,0.045)' letter-spacing='4' text-anchor='middle' transform='rotate(-22 90 45)'%3EРЕЗЮМЕ%3C/text%3E%3C/svg%3E");
      background-repeat: repeat;
    }

    /* ПАНЕЛЬ ВЫБОРА АВАТАРОВ С ВЫДЕЛЕННЫМ ЛЬДИСТО-САПФИРОВЫМ ФОНОМ */
    .persona-selector-card {
      background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
      border: 2px solid #bae6fd;
      border-radius: 32px;
      box-shadow: 0 20px 50px -15px rgba(2, 132, 199, 0.16), 0 0 30px rgba(56, 189, 248, 0.1);
      position: relative;
      overflow: hidden;
      transition: all 0.4s var(--ease-fluid);
    }
    .persona-selector-card:hover,
    .persona-selector-card.is-scroll-active {
      border-color: #38bdf8 !important;
      box-shadow: 0 30px 70px -10px rgba(2, 132, 199, 0.22), 0 0 35px rgba(56, 189, 248, 0.2) !important;
    }

    /* ДЕЛОВЫЕ ТЕКСТУРЫ ДЛЯ БЕНТО-КАРТОЧЕК В ЧИСТОЙ АЛТАЙСКОЙ ПАЛИТРЕ */
    .bento-glass-sapphire {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, #E8F0F5 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(176, 200, 217, 0.9);
      border-radius: 36px;
      box-shadow: 0 12px 32px -12px rgba(31, 140, 181, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.95);
      position: relative;
      overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease;
    }
    .bento-glass-sapphire:hover,
    .bento-glass-sapphire.is-scroll-active {
      transform: translateY(-4px);
      border-color: #1F8CB5 !important;
      box-shadow: 0 20px 45px -12px rgba(31, 140, 181, 0.18), 0 0 20px rgba(89, 195, 227, 0.16), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
    }

    .bento-glass-emerald {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, #E8F0F5 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(212, 226, 236, 0.9);
      border-radius: 36px;
      box-shadow: 0 12px 32px -12px rgba(31, 140, 181, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.95);
      position: relative;
      overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease;
    }
    .bento-glass-emerald:hover,
    .bento-glass-emerald.is-scroll-active {
      transform: translateY(-4px);
      border-color: #59C3E3 !important;
      box-shadow: 0 20px 45px -12px rgba(89, 195, 227, 0.2), 0 0 20px rgba(89, 195, 227, 0.16), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
    }

    .bento-glass-azure {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, #F0F6FA 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(176, 200, 217, 0.9);
      border-radius: 36px;
      box-shadow: 0 12px 32px -12px rgba(96, 143, 179, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.95);
      position: relative;
      overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease;
    }
    .bento-glass-azure:hover,
    .bento-glass-azure.is-scroll-active {
      transform: translateY(-4px);
      border-color: #608FB3 !important;
      box-shadow: 0 20px 45px -12px rgba(96, 143, 179, 0.18), 0 0 20px rgba(120, 164, 201, 0.16), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
    }

    .bento-glass-crystal {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, #E8F0F5 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(212, 226, 236, 0.9);
      border-radius: 36px;
      box-shadow: 0 12px 32px -12px rgba(120, 164, 201, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.95);
      position: relative;
      overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease;
    }
    .bento-glass-crystal:hover,
    .bento-glass-crystal.is-scroll-active {
      transform: translateY(-4px);
      border-color: #78A4C9 !important;
      box-shadow: 0 20px 45px -12px rgba(120, 164, 201, 0.2), 0 0 20px rgba(120, 164, 201, 0.16), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
    }

    /* ПОДСВЕТКА КЛЮЧЕВЫХ ФРАЗ С ПЛАВНОЙ ИГРОЙ ЦВЕТА ПРИ НАВЕДЕНИИ */
    .bento-highlight-phrase {
      display: inline;
      color: #0284c7;
      font-weight: 800;
      background: linear-gradient(110deg, #0284c7 0%, #0369a1 20%, #0ea5e9 45%, #059669 70%, #0284c7 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: #0284c7;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      text-shadow: none !important;
      filter: none !important;
      transition: all 0.35s ease;
      cursor: pointer;
    }
    .bento-glass-sapphire .bento-highlight-phrase,
    .bento-glass-emerald .bento-highlight-phrase,
    .bento-glass-azure .bento-highlight-phrase,
    .bento-glass-crystal .bento-highlight-phrase {
      color: #0284c7;
      -webkit-text-fill-color: #0284c7;
      text-shadow: none !important;
      filter: none !important;
    }
    .bento-glass-sapphire:hover .bento-highlight-phrase,
    .bento-glass-sapphire.is-scroll-active .bento-highlight-phrase,
    .bento-glass-emerald:hover .bento-highlight-phrase,
    .bento-glass-emerald.is-scroll-active .bento-highlight-phrase,
    .bento-glass-azure:hover .bento-highlight-phrase,
    .bento-glass-azure.is-scroll-active .bento-highlight-phrase,
    .bento-glass-crystal:hover .bento-highlight-phrase,
    .bento-glass-crystal.is-scroll-active .bento-highlight-phrase,
    .bento-highlight-phrase:hover {
      -webkit-text-fill-color: transparent !important;
      animation: phraseColorPlay 3s ease-in-out infinite;
    }

    @keyframes phraseColorPlay {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    /* ГРАДИЕНТНЫЙ ПЕРЕЛИВ ЗАГОЛОВКОВ ПРИ СКРОЛЛЕ / НАВЕДЕНИИ ШАРИКОМ */
    .bento-card-title {
      color: #082f49;
      background: linear-gradient(115deg, #0284c7 0%, #0369a1 25%, #0ea5e9 50%, #059669 75%, #0284c7 100%);
      background-size: 250% 100%;
      background-position: 0% 50%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: #082f49;
      transition: -webkit-text-fill-color 0.4s ease, color 0.4s ease, transform 0.3s ease;
      cursor: default;
    }

    @keyframes bentoTitleFlow {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    .bento-glass-sapphire:hover .bento-card-title,
    .bento-glass-sapphire.is-scroll-active .bento-card-title,
    .bento-glass-crystal:hover .bento-card-title,
    .bento-glass-crystal.is-scroll-active .bento-card-title,
    .bento-glass-emerald:hover .bento-card-title,
    .bento-glass-emerald.is-scroll-active .bento-card-title,
    .bento-card-title:hover {
      -webkit-text-fill-color: transparent !important;
      animation: bentoTitleFlow 2.8s ease-in-out infinite;
    }

    /* АНИМАЦИЯ КАТЯЩЕГОСЯ И ПАДАЮЩЕГО ШАРА В «В ЧЕМ СИЛА?» */
    .bento-kinetic-orb {
      position: absolute;
      width: 28px;
      height: 28px;
      pointer-events: none;
      z-index: 40;
      top: 0;
      left: 0;
      transform: translate3d(-100px, -100px, 0);
      transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease;
      will-change: transform, opacity;
    }
    .bento-orb-core {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 32%, #ffffff 0%, #59C3E3 35%, #1F8CB5 75%, #133859 100%);
      box-shadow: 0 0 16px rgba(89, 195, 227, 0.6), 0 0 28px rgba(31, 140, 181, 0.35), 0 4px 10px rgba(19, 56, 89, 0.25);
      border: 2px solid rgba(255, 255, 255, 0.95);
      animation: orbSpinRoll 1.4s linear infinite;
      transition: background 0.5s ease, box-shadow 0.5s ease;
    }
    .bento-orb-pulse {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1.5px solid rgba(89, 195, 227, 0.55);
      animation: orbPulseRing 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
      transition: border-color 0.5s ease;
    }

    /* ЦВЕТОВЫЕ ТЕМЫ ШАРИКА В РАМКАХ АЛТАЙСКОЙ ПАЛИТРЫ */
    .bento-kinetic-orb.theme-sapphire .bento-orb-core {
      background: radial-gradient(circle at 32% 32%, #ffffff 0%, #59C3E3 35%, #1F8CB5 75%, #133859 100%);
      box-shadow: 0 0 16px rgba(89, 195, 227, 0.6), 0 0 28px rgba(31, 140, 181, 0.35), 0 4px 10px rgba(19, 56, 89, 0.25);
    }
    .bento-kinetic-orb.theme-sapphire .bento-orb-pulse {
      border-color: rgba(89, 195, 227, 0.6);
    }

    .bento-kinetic-orb.theme-emerald .bento-orb-core,
    .bento-kinetic-orb.theme-azure .bento-orb-core {
      background: radial-gradient(circle at 32% 32%, #ffffff 0%, #78A4C9 35%, #1F8CB5 75%, #133859 100%);
      box-shadow: 0 0 16px rgba(120, 164, 201, 0.6), 0 0 28px rgba(31, 140, 181, 0.35), 0 4px 10px rgba(19, 56, 89, 0.25);
    }
    .bento-kinetic-orb.theme-emerald .bento-orb-pulse,
    .bento-kinetic-orb.theme-azure .bento-orb-pulse {
      border-color: rgba(120, 164, 201, 0.6);
    }

    .bento-kinetic-orb.theme-amber .bento-orb-core,
    .bento-kinetic-orb.theme-moraine .bento-orb-core {
      background: radial-gradient(circle at 32% 32%, #ffffff 0%, #B0C8D9 35%, #608FB3 75%, #3B5166 100%);
      box-shadow: 0 0 16px rgba(96, 143, 179, 0.6), 0 0 28px rgba(59, 81, 102, 0.35), 0 4px 10px rgba(41, 63, 87, 0.25);
    }
    .bento-kinetic-orb.theme-amber .bento-orb-pulse,
    .bento-kinetic-orb.theme-moraine .bento-orb-pulse {
      border-color: rgba(96, 143, 179, 0.6);
    }

    .bento-kinetic-orb.theme-crystal .bento-orb-core {
      background: radial-gradient(circle at 32% 32%, #ffffff 0%, #59C3E3 35%, #78A4C9 75%, #133859 100%);
      box-shadow: 0 0 16px rgba(89, 195, 227, 0.6), 0 0 28px rgba(120, 164, 201, 0.35), 0 4px 10px rgba(19, 56, 89, 0.25);
    }
    .bento-kinetic-orb.theme-crystal .bento-orb-pulse {
      border-color: rgba(89, 195, 227, 0.6);
    }

    @keyframes orbSpinRoll {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes orbPulseRing {
      0% { transform: scale(0.7); opacity: 0.9; }
      70%, 100% { transform: scale(1.8); opacity: 0; }
    }

    @keyframes powerArrowPulseShoot {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 5px rgba(2, 132, 199, 0.3);
      }
      40% {
        transform: scale(1.15) translate(2px, 4px);
        box-shadow: 0 0 20px rgba(2, 132, 199, 0.6);
      }
      100% {
        transform: scale(1) translate(0, 0);
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
      }
    }

    .persona-btn {
      cursor: pointer;
      user-select: none;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .persona-btn:hover {
      transform: translateY(-2px);
    }
    .persona-btn.active {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      transform: translateY(-2px);
    }

    /* АНИМАЦИЯ АВАТАРОВ БЕЗ НАВЕДЕНИЯ: ПЛАВНОЕ ПООЧЕРЕДНОЕ УВЕЛИЧЕНИЕ */
    @keyframes personaAvatarWave {
      0%, 100% {
        transform: scale(1);
      }
      18% {
        transform: scale(1.15);
      }
      36% {
        transform: scale(1);
      }
    }

    #personaAvatarsGrid .persona-btn:nth-child(1):not(.active) .persona-avatar-frame {
      animation: personaAvatarWave 4s ease-in-out infinite 0s;
    }
    #personaAvatarsGrid .persona-btn:nth-child(2):not(.active) .persona-avatar-frame {
      animation: personaAvatarWave 4s ease-in-out infinite 0.8s;
    }
    #personaAvatarsGrid .persona-btn:nth-child(3):not(.active) .persona-avatar-frame {
      animation: personaAvatarWave 4s ease-in-out infinite 1.6s;
    }
    #personaAvatarsGrid .persona-btn:nth-child(4):not(.active) .persona-avatar-frame {
      animation: personaAvatarWave 4s ease-in-out infinite 2.4s;
    }
    #personaAvatarsGrid .persona-btn:nth-child(5):not(.active) .persona-avatar-frame {
      animation: personaAvatarWave 4s ease-in-out infinite 3.2s;
    }

    #personaAvatarsGrid .persona-btn.active .persona-avatar-frame {
      transform: scale(1.15) !important;
      animation: none !important;
    }

    /* ЭФФЕКТ ПЕЧАТАЮЩЕЙСЯ СТРОКИ */
    .text-typing-effect::after {
      content: '|';
      animation: blinkCursor 0.8s infinite;
      color: #0284c7;
      margin-left: 2px;
      font-weight: 700;
    }
    @keyframes blinkCursor {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* ВОЛНООБРАЗНЫЙ ПОРТАЛ ВИДЕО С ПОДСВЕТКОЙ И РАЗМЫТИЕМ ГРАНИЦ */
    @keyframes organicWaveMorph {
      0%, 100% {
        border-radius: 65px 105px 60px 95px / 95px 60px 105px 65px;
      }
      33% {
        border-radius: 95px 60px 105px 65px / 65px 100px 60px 95px;
      }
      66% {
        border-radius: 70px 100px 65px 105px / 105px 65px 95px 60px;
      }
    }

    #heroBgVideo {
      object-fit: cover !important;
      transform: scale(1.05) translateZ(0) !important;
      -webkit-transform: scale(1.05) translateZ(0) !important;
      transform-origin: center center !important;
      top: -6px !important;
      height: calc(100% + 12px) !important;
    }

    @media (max-width: 639px) {
      #heroBgVideo {
        display: none !important;
      }
    }

    .hero-video-portal {
      position: relative;
      width: 100%;
      border-radius: 65px 105px 60px 95px / 95px 60px 105px 65px;
      animation: organicWaveMorph 14s ease-in-out infinite alternate;
      overflow: hidden;
      border: 2.5px solid rgba(255, 255, 255, 0.95);
      background: #ffffff;
      box-shadow: 
        0 25px 70px -15px rgba(2, 60, 105, 0.18),
        0 0 50px rgba(56, 189, 248, 0.38),
        0 0 90px rgba(14, 165, 233, 0.2),
        inset 0 0 35px rgba(255, 255, 255, 0.85);
      transition: all 0.5s var(--ease-fluid);
    }
    .hero-video-portal:hover {
      border-color: rgba(56, 189, 248, 0.8);
      box-shadow: 
        0 30px 85px -10px rgba(2, 132, 199, 0.25),
        0 0 65px rgba(56, 189, 248, 0.5),
        0 0 110px rgba(14, 165, 233, 0.28);
    }

    /* ДВУХЭТАПНЫЙ ПЕРЕХОД: СИНЯЯ СТРЕЛКА -> ПЛАШКА -> ЗЕЛЕНАЯ СТРЕЛКА С РУБЛЕМ */
    .blue-path-track {
      position: relative;
      width: 2px;
      height: 75px;
      margin: 0 auto;
      background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, 0.4) 30%, #0284c7 100%);
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
    }
    @media (min-width: 640px) {
      .blue-path-track {
        height: 105px;
      }
    }
    .blue-path-arrow {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      animation: blueArrowTravel 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      z-index: 10;
      pointer-events: none;
    }
    @keyframes blueArrowTravel {
      0% {
        top: -5px;
        opacity: 0;
        transform: translateX(-50%) scale(0.85);
      }
      20% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        top: calc(100% - 14px);
        opacity: 0;
        transform: translateX(-50%) scale(1.15);
      }
    }

    /* ВИТИЕВАТЫЕ ТРОПЫ-ПЕРЕХОДЫ МЕЖДУ БЛОКАМИ */
    .curved-path-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      z-index: 20;
      overflow: visible;
      user-select: none;
    }
    .curved-path-link {
      position: relative;
      display: inline-block;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
      cursor: pointer;
      text-decoration: none;
      filter: drop-shadow(0 4px 16px rgba(2, 132, 199, 0.18));
    }
    .curved-path-link:hover {
      transform: translateY(3px) scale(1.06);
      filter: drop-shadow(0 8px 24px rgba(2, 132, 199, 0.38));
    }
    .curved-path-svg {
      width: 170px;
      height: 60px;
      overflow: visible;
    }
    @media (min-width: 640px) {
      .curved-path-svg {
        width: 210px;
        height: 72px;
      }
    }
    @keyframes curvedPathFlowPulse {
      0% {
        stroke-dashoffset: 260;
        opacity: 0.15;
      }
      35%, 65% {
        opacity: 1;
      }
      100% {
        stroke-dashoffset: 0;
        opacity: 0.15;
      }
    }
    .curved-path-flow {
      stroke-dasharray: 65 195;
      animation: curvedPathFlowPulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    
    
    /* Плавный световой импульс по линиям перетекания (без шариков и разноцветия) */
    @keyframes smoothFlowBeam {
      0% {
        stroke-dashoffset: 400;
        opacity: 0.15;
      }
      35%, 65% {
        opacity: 0.95;
      }
      100% {
        stroke-dashoffset: 0;
        opacity: 0.15;
      }
    }
    .flow-stream-beam,
    .flow-stream-beam-emerald {
      fill: none !important;
      stroke-dasharray: 90 310;
      animation: smoothFlowBeam 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .curved-path-flow-redgreen {
      stroke-dasharray: 65 195;
      animation: curvedPathFlowPulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    .curved-path-flow-emerald {
      stroke-dasharray: 65 195;
      animation: curvedPathFlowPulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .green-path-track {
      position: relative;
      width: 2px;
      height: 95px;
      margin: 0 auto;
      background: linear-gradient(to bottom, #047857 0%, rgba(4, 120, 87, 0.6) 75%, transparent 100%);
      box-shadow: 0 0 10px rgba(4, 120, 87, 0.5);
      overflow: visible;
    }
    .green-path-arrow {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      animation: blueArrowTravel 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      z-index: 10;
      pointer-events: none;
    }
    .green-ruble-arrow {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      animation: greenRubleTravel 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      z-index: 20;
      pointer-events: none;
    }
    @keyframes greenRubleTravel {
      0% {
        top: -5px;
        opacity: 0;
        transform: translateX(-50%) scale(0.85);
      }
      20% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        top: 80px;
        opacity: 0;
        transform: translateX(-50%) scale(1.2);
      }
    }

    /* ДЕЛИКАТНЫЕ РАССЫПАЮЩИЕСЯ РУБЛИ: ЛЕГКИЕ ИЗУМРУДНЫЕ СИМВОЛЫ БЕЗ КРУГЛЫХ ПОДЛОЖЕК */
    .ruble-scatter-field {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 860px;
      max-width: 98vw;
      height: 440px;
      pointer-events: none;
      z-index: 25;
      overflow: visible;
    }
    .scatter-coin {
      position: absolute;
      top: 25px;
      left: 50%;
      margin-left: -12px;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      color: #059669;
      font-family: 'Benzin', sans-serif;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 2px 8px rgba(5, 150, 105, 0.45));
      opacity: 0;
      user-select: none;
      animation: coinGracefulFall 4.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    }
    @keyframes coinGracefulFall {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.4) rotate(0deg);
      }
      18% {
        opacity: 0.9;
        transform: translate3d(calc(var(--cx) * 0.35), calc(var(--cy) * 0.18), 0) scale(1.05) rotate(calc(var(--cr) * 0.3));
      }
      48% {
        opacity: 0.95;
        /* Мягкое изящное покачивание в воздухе */
        transform: translate3d(calc(var(--cx) * 0.72 + var(--sway, 12px)), calc(var(--cy) * 0.52), 0) scale(1) rotate(calc(var(--cr) * 0.65));
      }
      74% {
        opacity: 0.85;
        /* Момент касания букв +30% К ВЫРУЧКЕ */
        transform: translate3d(var(--cx), var(--cy), 0) scale(0.95) rotate(var(--cr));
      }
      88% {
        opacity: 0.4;
        transform: translate3d(calc(var(--cx) * 1.03), calc(var(--cy) + 20px), 0) scale(0.8) rotate(calc(var(--cr) * 1.15));
      }
      100% {
        opacity: 0;
        transform: translate3d(calc(var(--cx) * 1.06), calc(var(--cy) + 40px), 0) scale(0.35) rotate(calc(var(--cr) * 1.3));
      }
    }
    .scatter-sparkle {
      position: absolute;
      top: 25px;
      left: 50%;
      font-size: 14px;
      color: #047857;
      filter: drop-shadow(0 0 6px rgba(4, 120, 87, 0.85));
      pointer-events: none;
      opacity: 0;
      animation: sparkleScatter 4.8s ease-out infinite;
    }
    @keyframes sparkleScatter {
      0%, 35% { opacity: 0; transform: translate(0, 0) scale(0.2); }
      55% { opacity: 0.85; transform: translate(var(--sx), var(--sy)) scale(1.3); }
      85% { opacity: 0.5; transform: translate(calc(var(--sx) * 1.08), calc(var(--sy) + 20px)) scale(0.8); }
      100% { opacity: 0; transform: translate(calc(var(--sx) * 1.15), calc(var(--sy) + 40px)) scale(0.3); }
    }

    /* БЛАГОРОДНАЯ СМЕНА ЦВЕТА ЗАГОЛОВКА: СВЕРХУ ВНИЗ ПРИ КАСАНИИ РУБЛЕЙ И ПЛАВНЫЙ ВОЗВРАТ В СИНИЙ */
    .manifesto-ruble-title {
      background: linear-gradient(180deg, #075985 0%, #0284c7 35%, #047857 52%, #065f46 72%, #064e3b 100%);
      background-size: 100% 400%;
      background-position: 0% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: rubleTouchColor 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      filter: none !important;
    }
    @keyframes rubleTouchColor {
      0%, 48% {
        /* До касания монет: стабильный глубокий сапфировый синий */
        background-position: 0% 0%;
      }
      62%, 78% {
        /* Момент касания и присутствия монет: нежный изумрудно-малахитовый градиент, спустившийся сверху вниз */
        background-position: 0% 100%;
      }
      94%, 100% {
        /* Когда рубли рассеялись: плавный возврат обратно в благородный сапфировый синий */
        background-position: 0% 0%;
      }
    }

    @keyframes bounceX {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(5px); }
    }
    .animate-bounce-x {
      animation: bounceX 1.2s infinite ease-in-out;
    }
    #unitEconTableScroll {
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }

    /* КОНСТРУКТОР ТАРИФА (СВЕТЛЫЙ ДИЗАЙН) */
    #constructor {
      --cfg-bg: #FFFFFF;
      --cfg-panel: #FFFFFF;
      --cfg-panel-2: #F8FAFC;
      --cfg-line: #E2E8F0;
      --cfg-text: #0F172A;
      --cfg-muted: #64748B;
      --cfg-accent: #0284c7;
      --cfg-accent-2: #10b981;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
        #constructor .cfg-wrap {
      max-width: 1100px;
      margin: 0 auto;
    }
    #constructor .cfg-grid {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      gap: 28px;
      align-items: start;
    }
    #constructor .cfg-cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }
    @media (max-width: 991px) {
      #constructor .cfg-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      #constructor .cfg-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
    @media (max-width: 640px) {
      #constructor .cfg-card {
        padding: 18px 16px;
      }
    }

    #constructor .cfg-card {
      position: relative;
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;
      z-index: 1;
      isolation: isolate;
      box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.7);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      padding: 20px 22px;
    }
    #constructor .cfg-card > * {
      position: relative;
      z-index: 2;
    }
    #constructor .cfg-card::before {
      content: '';
      position: absolute;
      top: -100%;
      left: -100%;
      width: 300%;
      height: 300%;
      background: conic-gradient(
        from 0deg,
        rgba(226, 232, 240, 0.6) 0deg,
        rgba(226, 232, 240, 0.6) 220deg,
        rgba(56, 189, 248, 0.15) 250deg,
        rgba(14, 165, 233, 0.7) 290deg,
        #38bdf8 335deg,
        rgba(226, 232, 240, 0.6) 360deg
      );
      animation: borderBeamRotate 6s linear infinite;
      z-index: -2;
    }
    #constructor .cfg-card-crms::before {
      animation-duration: 6.5s;
      animation-delay: -2.2s;
      background: conic-gradient(
        from 0deg,
        rgba(226, 232, 240, 0.6) 0deg,
        rgba(226, 232, 240, 0.6) 220deg,
        rgba(52, 211, 153, 0.15) 250deg,
        rgba(16, 185, 129, 0.7) 290deg,
        #34d399 335deg,
        rgba(226, 232, 240, 0.6) 360deg
      );
    }
    #constructor .cfg-card::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: #ffffff;
      border-radius: 22px;
      z-index: -1;
      transition: background-color 0.3s ease;
    }
    #constructor .cfg-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px -8px rgba(2, 132, 199, 0.12), 0 0 20px 0 rgba(56, 189, 248, 0.2) !important;
    }
    #constructor .cfg-card-crms:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px -8px rgba(16, 185, 129, 0.12), 0 0 20px 0 rgba(52, 211, 153, 0.2) !important;
    }
    #constructor .cfg-card h3 {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: #0f172a;
      margin-bottom: 8px;
    }

    #constructor .cfg-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #F1F5F9;
      gap: 12px;
    }
    #constructor .cfg-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    #constructor .cfg-row-label {
      font-size: 13.5px;
      font-weight: 600;
      color: #0F172A;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    #constructor .cfg-row-sub {
      font-size: 11px;
      color: #64748B;
      margin-top: 1px;
      line-height: 1.35;
    }
    #constructor .cfg-channel-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    #constructor .cfg-card-crms .cfg-channel-icon {
      background: #ecfdf5;
      border-color: #a7f3d0;
    }
    #constructor .cfg-row-right {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    #constructor .cfg-badge-free {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      color: #065f46;
      background: #ecfdf5;
      padding: 2.5px 8px;
      border-radius: 6px;
      border: 1px solid #a7f3d0;
      white-space: nowrap;
    }
    @media (max-width: 480px) {
      #constructor .cfg-badge-free {
        display: none;
      }
    }

    #constructor .cfg-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }
    #constructor .cfg-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    #constructor .cfg-track {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #CBD5E1;
      transition: .2s ease;
      border-radius: 999px;
    }
    #constructor .cfg-track:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .2s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    #constructor input:checked + .cfg-track {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
      box-shadow: 0 0 10px rgba(2, 132, 199, 0.35) !important;
    }
    #constructor .cfg-card-channels input:checked + .cfg-track {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
      box-shadow: 0 0 10px rgba(2, 132, 199, 0.35) !important;
    }
    #constructor .cfg-card-crms input:checked + .cfg-track {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
    }
    #constructor .cfg-switch input:focus-visible + .cfg-track {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }
    #constructor input:checked + .cfg-track:before {
      transform: translateX(20px);
      background: #fff;
    }

    /* ПОЛОСА КАРТОЧЕК ТАРИФОВ (3D ОБЪЕМНЫЕ ПЛАШКИ + АНИМИРОВАННЫЙ БИЗНЕС-ТАРИФ) */
    #constructor .cfg-tariffs-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      width: 100%;
      padding-top: 18px;
      padding-bottom: 8px;
      align-items: stretch;
      position: relative;
    }

    @media (max-width: 767px) {
      #constructor .cfg-tariffs-strip {
        display: flex;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 18px;
        padding-bottom: 12px;
        padding-left: 16px;
        padding-right: 28px;
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
      }
      #constructor .cfg-tariffs-strip::-webkit-scrollbar {
        display: none;
      }
    }

    /* Мобильный индикатор свайпа и пагинации (все 4 тарифа) */
    .cfg-mobile-pagination {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      margin-bottom: 16px;
    }
    .cfg-mobile-swipe-text {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      padding: 5px 14px;
      border-radius: 999px;
      border: 1px solid #bae6fd;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
      letter-spacing: 0.01em;
    }
    .cfg-mobile-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .cfg-mobile-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #cbd5e1;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cfg-mobile-dot.active {
      width: 26px;
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.45);
    }

    /* Базовая объемная карточка тарифа - свежий зеленый фон Алтая */
    #constructor .cfg-tariff-card {
      position: relative;
      border-radius: 20px;
      padding: 18px 20px;
      cursor: pointer;
      user-select: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background 0.25s ease;
      box-sizing: border-box;
      background: linear-gradient(160deg, #F0FDF4 0%, #ECFDF5 100%);
      border: 1.5px solid rgba(16, 185, 129, 0.25);
      box-shadow: 
        0 4px 14px rgba(16, 185, 129, 0.06), 
        0 1px 3px rgba(15, 23, 42, 0.03), 
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      min-height: 220px;
      z-index: 1;
      font-family: 'Inter', sans-serif !important;
    }

    @media (max-width: 767px) {
      #constructor .cfg-tariff-card {
        flex: 0 0 78%;
        max-width: 290px;
        min-width: 250px;
        scroll-snap-align: center;
        padding: 16px 18px;
        min-height: 210px;
      }
    }

    /* Наведение на карточки тарифов */
    #constructor .cfg-tariff-card:hover:not(.active) {
      transform: translateY(-4px);
      background: linear-gradient(160deg, #ECFDF5 0%, #E6FBF0 100%);
      border-color: rgba(16, 185, 129, 0.45);
      box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.15);
    }

    /* Активная карточка тарифа с изумрудной подсветкой */
    #constructor .cfg-tariff-card.active {
      transform: translateY(-4px);
      background: linear-gradient(160deg, #ECFDF5 0%, #D1FAE5 100%) !important;
      border: 2px solid #10b981 !important;
      box-shadow: 0 12px 26px -4px rgba(16, 185, 129, 0.28), 0 0 0 1px #10b981, inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
      z-index: 3;
    }

    #constructor .cfg-tariff-card.active .cfg-tariff-check {
      display: flex;
      background: #059669;
      color: #ffffff;
    }

    /* Бейдж «ВЫБИРАЮТ ЧАЩЕ» */
    #constructor .cfg-tariff-badge {
      position: absolute;
      top: -11px;
      left: 14px;
      background: #0f172a;
      color: #FFFFFF;
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
      white-space: nowrap;
      pointer-events: none;
      z-index: 10;
    }

    /* Типографика и элементы карточек тарифов */
    #constructor .cfg-tariff-card .cfg-tariff-name {
      color: #0f172a;
      font-weight: 800;
      font-size: 16px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      font-family: 'Inter', sans-serif;
    }
    #constructor .cfg-tariff-card .cfg-tariff-limit {
      color: #475569;
      font-weight: 600;
      font-size: 12px;
      margin-top: 3px;
      line-height: 1.25;
      font-family: 'Inter', sans-serif;
    }
    #constructor .cfg-tariff-card .cfg-tariff-price {
      color: #059669; /* Зеленый изумруд для всех тарифов */
      font-weight: 900;
      margin-top: 8px;
      font-size: 20px;
      font-family: 'Inter', sans-serif;
      display: flex;
      align-items: baseline;
      gap: 2px;
      line-height: 1;
    }
    #constructor .cfg-tariff-card .cfg-tariff-from {
      font-size: 13px;
      font-weight: 700;
      margin-right: 1px;
      color: #059669;
    }
    #constructor .cfg-tariff-card .cfg-tariff-val {
      font-variant-numeric: tabular-nums;
      color: #059669;
    }
    #constructor .cfg-tariff-card .cfg-tariff-period {
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      margin-left: 2px;
    }
    #constructor .cfg-tariff-card .cfg-vol-seg {
      background: #e2e8f0;
    }
    #constructor .cfg-tariff-card .cfg-vol-seg.active {
      background: #059669 !important;
      box-shadow: none !important;
    }
    #constructor .cfg-tariff-card .cfg-tariff-check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #ffffff;
      background: #059669;
      box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4);
    }

    /* Шкала объёма */
    #constructor .cfg-tariff-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      width: 100%;
      margin-bottom: 8px;
    }
    #constructor .cfg-vol-scale {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3.5px;
      height: 5px;
      flex-grow: 1;
      max-width: calc(100% - 24px);
    }
    #constructor .cfg-vol-seg {
      height: 5px;
      border-radius: 999px;
      display: block;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* ПОЛЗУНОК ДИАЛОГОВ */
    #constructor .cfg-range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: #E2E8F0;
      outline: none;
      transition: background 0.15s ease;
      cursor: pointer;
    }
    #constructor .cfg-range-slider:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 3px;
    }
    #constructor .cfg-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45);
      border: 2.5px solid #ffffff;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    #constructor .cfg-range-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.6);
    }
    #constructor .cfg-range-slider::-webkit-slider-thumb:active {
      transform: scale(1.05);
    }
    #constructor .cfg-range-slider::-moz-range-thumb {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45);
      border: 2.5px solid #ffffff;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    #constructor .cfg-range-slider::-moz-range-thumb:hover {
      transform: scale(1.15);
    }

    /* ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА ОПЛАТЫ (ФИКС / ПО ФАКТУ) */
    #constructor .cfg-mode-toggle-wrap {
      width: 100%;
      margin-bottom: 2px;
    }
    #constructor .cfg-mode-toggle {
      display: flex;
      width: 100%;
      padding: 4px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      gap: 4px;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    #constructor .cfg-mode-btn {
      flex: 1;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      color: #64748b;
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
      line-height: 1.25;
    }
    @media (max-width: 480px) {
      #constructor .cfg-mode-btn {
        padding: 8px 6px;
        font-size: 12px;
      }
    }
    #constructor .cfg-mode-btn:hover:not(.active) {
      color: #0f172a;
      background: rgba(255, 255, 255, 0.6);
    }
    #constructor .cfg-mode-btn:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 1px;
    }
    #constructor .cfg-mode-btn.active {
      background: #ffffff;
      color: #0369a1;
      border-color: rgba(2, 132, 199, 0.25);
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    #constructor .cfg-mode-subtitle {
      font-size: 11.5px;
      color: #64748b;
      margin-top: 8px;
      line-height: 1.4;
      padding-left: 2px;
      padding-right: 2px;
    }

    /* ПОДСКАЗКА СРАВНЕНИЯ ТАРИФОВ (ДЛЯ РЕЖИМА ПО ФАКТУ) */
    #constructor #cfgComparisonNotice.notice-fixed-cheaper {
      background: rgba(2, 132, 199, 0.12);
      border-color: rgba(56, 189, 248, 0.35);
      color: #e0f2fe;
    }
    #constructor #cfgComparisonNotice.notice-payg-cheaper {
      background: rgba(16, 185, 129, 0.12);
      border-color: rgba(52, 211, 153, 0.35);
      color: #d1fae5;
    }
    #constructor #cfgComparisonNotice .cfg-switch-mode-link {
      color: #38bdf8;
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      margin-left: 6px;
      font-size: inherit;
      display: inline-flex;
      align-items: center;
      transition: color 0.15s ease;
    }
    #constructor #cfgComparisonNotice .cfg-switch-mode-link:hover {
      color: #ffffff;
    }

    /* ПЕРЕКЛЮЧАТЕЛЬ ПЕРИОДА (ПОМЕСЯЧНО / ГОД ВПЕРЕД) */
    #constructor .cfg-billing-toggle {
      display: flex;
      padding: 4px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(56, 189, 248, 0.2);
      border-radius: 14px;
      margin-bottom: 14px;
      gap: 4px;
    }
    #constructor .cfg-billing-btn {
      flex: 1;
      padding: 7px 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      color: #94A3B8;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    #constructor .cfg-billing-btn:hover {
      color: #ffffff;
    }
    #constructor .cfg-billing-btn:focus-visible {
      outline: 2px solid #38bdf8;
      outline-offset: 1px;
    }
    #constructor .cfg-billing-btn.active {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      color: #ffffff;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
    }

    #constructor .tabular-nums {
      font-variant-numeric: tabular-nums;
    }

    @media (prefers-reduced-motion: reduce) {
      #constructor *,
      #constructor *::before,
      #constructor *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* АНИМИРОВАННЫЙ ЭЛЕГАНТНЫЙ ПЛАВАЮЩИЙ ГРАДИЕНТ И ПОДСВЕТКА ДЛЯ ПЛАШКИ «НЕ НАШЛИ СВОЙ ВАРИАНТ?» */
    @keyframes calmFloatingGradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes floatingAura {
      0% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.75;
      }
      50% {
        transform: translate(-3%, 4%) scale(1.08);
        opacity: 0.95;
      }
      100% {
        transform: translate(3%, -3%) scale(0.96);
        opacity: 0.75;
      }
    }

    @keyframes subtleSheenGlide {
      0% {
        transform: translateX(-150%) rotate(20deg);
        opacity: 0;
      }
      20% {
        opacity: 0.35;
      }
      50% {
        opacity: 0.55;
      }
      80% {
        opacity: 0.35;
      }
      100% {
        transform: translateX(300%) rotate(20deg);
        opacity: 0;
      }
    }

    @keyframes neonBorderFlow {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes cfgSummaryGlare {
      0% {
        transform: rotate(30deg) translateY(-140%);
      }
      40%, 100% {
        transform: rotate(30deg) translateY(140%);
      }
    }

    /* ПЛАШКА «НЕ НАШЛИ СВОЙ ВАРИАНТ?» */
    #constructor .cfg-card-custom {
      grid-column: 1 / -1;
      position: relative;
      margin-top: 36px !important;
      border-radius: 24px;
      padding: 24px 28px;
      overflow: hidden;
      isolation: isolate;
      z-index: 1;
      background: linear-gradient(
        135deg,
        #f0f7ff 0%,
        #e0f2fe 22%,
        #eff6ff 42%,
        #e8f4fd 60%,
        #f5f3ff 78%,
        #e0f2fe 90%,
        #f0f7ff 100%
      ) !important;
      background-size: 260% 260% !important;
      animation: calmFloatingGradient 14s ease-in-out infinite !important;
      border: 1.5px solid rgba(125, 211, 252, 0.55) !important;
      box-shadow: 
        0 14px 38px -6px rgba(14, 165, 233, 0.18),
        0 4px 16px -2px rgba(56, 189, 248, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 0 24px rgba(186, 230, 253, 0.3) !important;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
    }

    /* Мягкая внутренняя плавающая световая аура */
    #constructor .cfg-card-custom::before {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      inset: -40% !important;
      background: radial-gradient(circle at 25% 30%, rgba(56, 189, 248, 0.32), transparent 42%),
                  radial-gradient(circle at 75% 70%, rgba(99, 102, 241, 0.2), transparent 48%),
                  radial-gradient(circle at 50% 90%, rgba(14, 165, 233, 0.25), transparent 45%) !important;
      filter: blur(28px) !important;
      animation: floatingAura 12s ease-in-out infinite !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }

    /* Элегантный деликатный блик света */
    #constructor .cfg-card-custom::after {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      top: -60% !important;
      left: -60% !important;
      width: 220% !important;
      height: 220% !important;
      background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.25) 46%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.25) 54%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%
      ) !important;
      animation: subtleSheenGlide 9s ease-in-out infinite !important;
      pointer-events: none !important;
      z-index: 1 !important;
    }

    #constructor .cfg-card-custom:hover {
      transform: translateY(-2px);
      border-color: rgba(56, 189, 248, 0.8) !important;
      box-shadow: 
        0 20px 48px -6px rgba(14, 165, 233, 0.28),
        0 8px 24px -2px rgba(56, 189, 248, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 1),
        inset 0 0 28px rgba(186, 230, 253, 0.45) !important;
    }

    #constructor .cfg-card-custom-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    @media (max-width: 640px) {
      #constructor .cfg-card-custom-inner {
        flex-direction: column;
        align-items: stretch;
      }
    }

    /* СТИЛИ КОМПАКТНОЙ КАРТОЧКИ «ВАШ РАСЧЕТ» */
    #constructor .cfg-summary-outer {
      position: -webkit-sticky !important;
      position: sticky !important;
      top: 96px !important;
      z-index: 30;
      align-self: start;
      padding: 2.5px;
      border-radius: 24px;
      background: linear-gradient(135deg, #0284c7, #38bdf8, #0369a1, #38bdf8, #0284c7);
      background-size: 300% 300%;
      animation: neonBorderFlow 4s ease infinite;
      box-shadow: 0 20px 45px -10px rgba(2, 132, 199, 0.3), 0 0 25px rgba(56, 189, 248, 0.15);
      will-change: transform;
    }
    #constructor .cfg-summary {
      position: relative;
      background: linear-gradient(165deg, #0b1928 0%, #0f2438 50%, #071320 100%);
      border: 1px solid rgba(56, 189, 248, 0.25);
      border-radius: 21.5px;
      padding: 20px 18px;
      height: fit-content;
      overflow: hidden;
      color: #F8FAFC;
    }
    #constructor .cfg-summary::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(60deg, transparent 40%, rgba(56, 189, 248, 0.12) 50%, transparent 60%);
      transform: rotate(30deg) translateY(-140%);
      animation: cfgSummaryGlare 5s ease-in-out infinite;
      pointer-events-none;
    }
    #constructor .cfg-summary-title {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #FFFFFF;
      margin: 0;
      font-weight: 900;
    }
    #constructor .cfg-year-total-box {
      background: linear-gradient(135deg, rgba(2, 132, 199, 0.2) 0%, rgba(16, 185, 129, 0.12) 100%);
      border: 1px solid rgba(56, 189, 248, 0.3);
      border-radius: 12px;
      padding: 9px 11px;
    }
    #constructor .cfg-year-total-val {
      font-weight: 800;
      color: #38BDF8;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #constructor .cfg-year-total-compare {
      color: #94A3B8;
      margin-top: 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #constructor .cfg-cta {
      display: block;
      width: 100%;
      text-align: center;
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      color: #fff;
      border: none;
      border-radius: 13px;
      padding: 12px;
      font-size: 13.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      text-decoration: none;
      transition: all .25s ease;
      box-shadow: 0 8px 22px rgba(2, 132, 199, 0.35);
    }
    #constructor .cfg-cta:hover {
      background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
      box-shadow: 0 12px 28px rgba(2, 132, 199, 0.5);
      transform: translateY(-2px);
    }
    #constructor .cfg-note {
      color: #94A3B8;
      line-height: 1.4;
      text-align: center;
    }

    #constructor .cfg-price-flash {
      animation: priceFlash 0.5s ease-out;
    }
    @keyframes priceFlash {
      0% { transform: scale(1.06); color: #38BDF8; text-shadow: 0 0 10px rgba(56, 189, 248, 0.8); }
      100% { transform: scale(1); }
    }

#scrollProblemTitle,
    #scrollProblemTitle .scroll-gradient-line {
      display: inline-block;
      width: 100%;
      color: #B4232F !important;
      -webkit-text-fill-color: #B4232F !important;
      background: none !important;
      text-shadow: none !important;
      filter: drop-shadow(0 2px 10px rgba(180, 35, 47, 0.15)) !important;
    }

    /* СКРОЛЛ-ГРАДИЕНТ ДЛЯ ЦИФР В КАРТОЧКАХ УТЕЧЕК (-40%, -80%, -20%) СЛЕВА НАПРАВО */
    .leak-metric-gradient-rose {
      display: inline-block;
      background-image: linear-gradient(
        90deg,
        #e11d48 0%,
        #f43f5e var(--leak-p, 0%),
        #0f172a calc(var(--leak-p, 0%) + 0.1%),
        #0f172a 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      overflow: visible !important;
      filter: none !important;
      will-change: background-image;
    }

    .leak-metric-gradient-amber {
      display: inline-block;
      background-image: linear-gradient(
        90deg,
        #ea580c 0%,
        #f97316 var(--leak-p, 0%),
        #0f172a calc(var(--leak-p, 0%) + 0.1%),
        #0f172a 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      overflow: visible !important;
      filter: none !important;
      will-change: background-image;
    }

    /* ЭКСКЛЮЗИВНАЯ КНОПКА С ФАСКОЙ (CYBER-LUXURY CHAMFERED BUTTON) */
    .btn-optic {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 36px;
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 35%, #075985 70%, #02244a 100%);
      color: #ffffff;
      font-family: var(--font-sans);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.8125rem;
      line-height: 1;
      clip-path: polygon(
        14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px),
        calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px
      );
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.45);
      filter: drop-shadow(0 10px 24px rgba(2, 132, 199, 0.35)) drop-shadow(0 2px 4px rgba(2, 36, 74, 0.25));
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, filter 0.3s ease;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn-optic::before {
      content: '';
      position: absolute;
      top: -60%;
      left: -120%;
      width: 55%;
      height: 220%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
      transform: rotate(25deg);
      pointer-events: none;
      transition: left 0.75s ease-in-out;
    }
    .btn-optic:hover {
      transform: translateY(-2px) scale(1.02);
      background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 40%, #0369a1 75%, #075985 100%);
      filter: drop-shadow(0 14px 32px rgba(2, 132, 199, 0.55)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.45));
    }
    .btn-optic:hover::before {
      left: 150%;
    }
    .btn-optic:active {
      transform: translateY(0px) scale(0.99);
    }

    /* МЕДЛЕННЫЙ БЛИК НА КНОПКЕ */
    .btn-slow-shimmer {
      position: relative;
      overflow: hidden !important;
    }
    .btn-slow-shimmer::after {
      content: '';
      position: absolute;
      top: -60%;
      left: -130%;
      width: 50%;
      height: 220%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
      transform: rotate(25deg);
      pointer-events: none;
      animation: slowShimmerSweep 4.5s ease-in-out infinite;
      z-index: 2;
    }
    @keyframes slowShimmerSweep {
      0%, 25% {
        left: -130%;
      }
      65%, 100% {
        left: 160%;
      }
    }

    /* ЭКСКЛЮЗИВНАЯ СВЕТЛАЯ КНОПКА С ФАСКОЙ (CYBER-LUXURY WHITE/LIGHT BUTTON) */
    .btn-optic-light {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 36px;
      background: #ffffff;
      color: #0f172a;
      font-family: var(--font-sans);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.8125rem;
      line-height: 1;
      clip-path: polygon(
        14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px),
        calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px
      );
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(0, 0, 0, 0.08);
      filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, filter 0.3s ease, color 0.3s ease;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn-optic-light::before {
      content: '';
      position: absolute;
      top: -60%;
      left: -120%;
      width: 55%;
      height: 220%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
      transform: rotate(25deg);
      pointer-events: none;
      transition: left 0.75s ease-in-out;
    }
    .btn-optic-light:hover {
      transform: translateY(-2px) scale(1.02);
      background: #f8fafc;
      color: #0284c7;
      filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.8));
    }
    .btn-optic-light:hover::before {
      left: 150%;
    }
    .btn-optic-light:active {
      transform: translateY(0px) scale(0.99);
    }

    /* ОПТИЧЕСКАЯ КНОПКА С ОБВОДКОЙ (OUTLINE OPTIC BUTTON С ИДЕНТИЧНОЙ ГЕОМЕТРИЕЙ) */
    .btn-optic-outline {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 36px;
      background: rgba(15, 23, 42, 0.7);
      color: #ffffff;
      font-family: var(--font-sans);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.8125rem;
      line-height: 1;
      clip-path: polygon(
        14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px),
        calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px
      );
      box-shadow: inset 0 0 0 1.5px rgba(56, 189, 248, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.2);
      filter: drop-shadow(0 10px 24px rgba(2, 132, 199, 0.2)) drop-shadow(0 2px 4px rgba(2, 36, 74, 0.25));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, filter 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn-optic-outline::before {
      content: '';
      position: absolute;
      top: -60%;
      left: -120%;
      width: 55%;
      height: 220%;
      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
      transform: rotate(25deg);
      pointer-events: none;
      transition: left 0.75s ease-in-out;
    }
    .btn-optic-outline:hover {
      transform: translateY(-2px) scale(1.02);
      background: rgba(14, 165, 233, 0.25);
      color: #38bdf8;
      box-shadow: inset 0 0 0 1.5px #38bdf8, inset 0 1px 2px rgba(255, 255, 255, 0.4);
      filter: drop-shadow(0 14px 32px rgba(2, 132, 199, 0.45)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.35));
    }
    .btn-optic-outline:hover::before {
      left: 150%;
    }
    .btn-optic-outline:active {
      transform: translateY(0px) scale(0.99);
    }

    .btn-optic .btn-optic-arrow,
    .btn-optic .optic-arrow,
    .btn-optic .optic-ruble {
      color: #38bdf8;
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: 1.2em;
      display: inline-flex;
      align-items: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, text-shadow 0.3s ease;
      animation: opticArrowFloat 2s ease-in-out infinite;
    }
    .btn-optic:hover .btn-optic-arrow,
    .btn-optic:hover .optic-arrow {
      color: #a5f3fc;
      transform: translateX(6px) scale(1.18);
      text-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
      animation: none;
    }
    .btn-optic:hover .optic-ruble {
      color: #a5f3fc;
      transform: scale(1.22);
      text-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
      animation: none;
    }
    @keyframes opticArrowFloat {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(4px);
      }
    }

    /* АНИМИРОВАННОЕ РУКОПОЖАТИЕ */
    .btn-optic-handshake {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35em;
      line-height: 1;
      transform-origin: 75% 75%;
      animation: handshakeAnim 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      transition: transform 0.3s ease, filter 0.3s ease;
      filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
    }
    .btn-optic:hover .btn-optic-handshake {
      animation: handshakeHover 0.75s ease-in-out infinite;
      filter: drop-shadow(0 0 14px rgba(103, 232, 249, 0.95)) brightness(1.15);
    }
    @keyframes handshakeAnim {
      0%, 100% {
        transform: rotate(0deg) translateY(0) scale(1);
      }
      15% {
        transform: rotate(-14deg) translateY(-2px) scale(1.08);
      }
      30% {
        transform: rotate(12deg) translateY(2px) scale(1.08);
      }
      45% {
        transform: rotate(-10deg) translateY(-1px) scale(1.05);
      }
      60% {
        transform: rotate(8deg) translateY(1px) scale(1.03);
      }
      75% {
        transform: rotate(-4deg) translateY(0) scale(1);
      }
      85% {
        transform: rotate(0deg) translateY(0) scale(1);
      }
    }
    @keyframes handshakeHover {
      0%, 100% {
        transform: rotate(0deg) translateY(0) scale(1.2);
      }
      25% {
        transform: rotate(-18deg) translateY(-3px) scale(1.25);
      }
      50% {
        transform: rotate(16deg) translateY(2px) scale(1.25);
      }
      75% {
        transform: rotate(-12deg) translateY(-2px) scale(1.22);
      }
    }

    /* СМАРТФОН С ДИАЛОГАМИ (ПРЯМОЙ И СТАТИЧНЫЙ) */
    .phone-perspective-stage {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
    }
    .phone-perspective-stage::before {
      content: '';
      position: absolute;
      width: 100%;
      max-width: 580px;
      height: 94%;
      top: 3%;
      left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.3) 0%, rgba(14, 165, 233, 0.12) 45%, transparent 72%);
      filter: blur(48px);
      z-index: 0;
      pointer-events: none;
    }

    /* Пульсирующая анимация фото Веры (живое свечение и мягкий импульс) */
    @keyframes veraPhotoPulseAura {
      0% {
        transform: scale(1);
        box-shadow: 
          0 0 0 0 rgba(56, 189, 248, 0.55),
          0 0 0 0 rgba(14, 165, 233, 0.35),
          0 20px 40px -10px rgba(15, 23, 42, 0.2);
      }
      40% {
        transform: scale(1.025);
        box-shadow: 
          0 0 0 10px rgba(56, 189, 248, 0.25),
          0 0 0 20px rgba(14, 165, 233, 0.08),
          0 25px 50px -10px rgba(14, 165, 233, 0.35);
      }
      70% {
        transform: scale(1.01);
        box-shadow: 
          0 0 0 16px rgba(56, 189, 248, 0.1),
          0 0 0 28px rgba(14, 165, 233, 0),
          0 22px 45px -10px rgba(14, 165, 233, 0.22);
      }
      100% {
        transform: scale(1);
        box-shadow: 
          0 0 0 0 rgba(56, 189, 248, 0),
          0 0 0 0 rgba(14, 165, 233, 0),
          0 20px 40px -10px rgba(15, 23, 42, 0.2);
      }
    }
    .vera-avatar-pulse {
      animation: veraPhotoPulseAura 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      transition: transform 0.3s ease;
    }
    .vera-avatar-pulse:hover {
      transform: scale(1.04);
    }

    .phone-titanium-shell {
      width: 100%;
      max-width: 440px;
      height: 620px;
      border-radius: 48px;
      background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
      padding: 10px;
      border: 3px solid #e2e8f0;
      box-shadow: 
        0 30px 70px -15px rgba(15, 23, 42, 0.2),
        0 15px 40px -10px rgba(56, 189, 248, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
      position: relative;
      z-index: 1;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (max-width: 640px) {
      .phone-titanium-shell {
        max-width: 100%;
        height: 540px;
        border-radius: 38px;
        padding: 8px;
      }
      #liveChatInput, #talloraChatInput {
        font-size: 16px !important;
      }
    }
    .phone-screen-display {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 44px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      border: 1px solid rgba(203, 213, 225, 0.7);
    }
    .phone-island-notch {
      width: 76px;
      height: 22px;
      background: #000000;
      border-radius: 9999px;
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    }
    .chat-bg-wa {
      background-color: #efeae2;
      background-image: radial-gradient(#d1c7b7 0.8px, transparent 0.8px);
      background-size: 16px 16px;
    }
    .chat-bg-tg {
      background: linear-gradient(180deg, #d2f1df 0%, #cae4fa 45%, #ebd5f8 100%);
    }
    .chat-bg-ig {
      background-color: #ffffff;
    }
    .chat-bg-avito {
      background-color: #ffffff;
    }

    /* МЯГКАЯ ПУЛЬСАЦИЯ ПОЛЯ ВВОДА ДЛЯ ПРИГЛАШЕНИЯ К НАБОРУ */
    @keyframes liveChatInputGlow {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
        border-color: rgba(203, 213, 225, 0.85);
      }
      50% {
        box-shadow: 0 0 16px 2px rgba(14, 165, 233, 0.35);
        border-color: rgba(56, 189, 248, 0.95);
      }
    }
    .live-chat-input-glow {
      animation: liveChatInputGlow 2.8s ease-in-out infinite;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .live-chat-input-glow:focus-within {
      animation: none !important;
      border-color: #0284c7 !important;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
    }

    /* ЭКВАЛАЙЗЕР ЖИВОГО ГОЛОСА */
    .voice-wave-bar {
      width: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
      animation: waveMotion 1.2s infinite ease-in-out alternate;
    }
    @keyframes waveMotion {
      0% { height: 6px; }
      100% { height: 26px; }
    }

    /* ЛАЗЕРНЫЙ ТРЕК РЕАНИМАЦИИ БАЗЫ */
    .reanimate-track {
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.2) 0%, rgba(56, 189, 248, 0.6) 50%, rgba(16, 185, 129, 0.8) 100%);
      height: 2px;
      position: relative;
      overflow: hidden;
    }
    .reanimate-packet {
      position: absolute;
      top: -3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 10px #10b981;
      animation: flowPacket 2s infinite ease-in-out;
    }
    @keyframes flowPacket {
      0% { left: 0%; opacity: 0.3; }
      50% { opacity: 1; transform: scale(1.3); }
      100% { left: 95%; opacity: 0.3; }
    }

    /* ВЫДЕЛЕННЫЙ АНИМИРОВАННЫЙ БЕЙДЖ РЕЗУЛЬТАТА В КЕЙСАХ (+10.4M ₽ И +6.8M ₽) */
    @keyframes caseBadgePulse {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 3px 12px rgba(16, 185, 129, 0.2), 0 0 0 0 rgba(52, 211, 153, 0.45);
        border-color: #34d399;
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 6px 22px rgba(16, 185, 129, 0.35), 0 0 0 6px rgba(52, 211, 153, 0.15);
        border-color: #10b981;
      }
    }

    @keyframes caseBadgeShine {
      0%, 25% {
        transform: translateX(-150%) skewX(-25deg);
      }
      55%, 100% {
        transform: translateX(250%) skewX(-25deg);
      }
    }

    .case-metric-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px;
      border-radius: 9999px;
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 55%, #a7f3d0 100%);
      color: #064e3b;
      border: 1.5px solid #34d399;
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 13px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      animation: caseBadgePulse 2.8s ease-in-out infinite;
      box-shadow: 0 3px 12px rgba(16, 185, 129, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    @media (min-width: 640px) {
      .case-metric-badge {
        font-size: 15px;
        padding: 8px 18px;
        gap: 9px;
      }
    }

    .case-metric-badge:hover {
      transform: scale(1.07) !important;
      box-shadow: 0 8px 26px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .case-metric-badge::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
      animation: caseBadgeShine 3.6s ease-in-out infinite;
      pointer-events: none;
    }

    /* ПОДСВЕЧЕННЫЙ СВЕТЯЩИЙСЯ БЛОК ДЛЯ СЕКЦИИ CRM */
    .crm-highlight-card {
      position: relative;
      display: inline-block;
      border-radius: 1.25rem;
      padding: 1.5px;
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.5) 0%, rgba(16, 185, 129, 0.45) 50%, rgba(2, 132, 199, 0.5) 100%);
      box-shadow: 0 8px 30px -6px rgba(2, 132, 199, 0.18), 0 0 25px rgba(56, 189, 248, 0.12);
      transition: all 0.3s ease;
    }
    .crm-highlight-card:hover {
      box-shadow: 0 12px 35px -5px rgba(2, 132, 199, 0.26), 0 0 30px rgba(52, 211, 153, 0.22);
      transform: translateY(-1px);
    }
    .crm-highlight-inner {
      background: rgba(255, 255, 255, 0.93);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: calc(1.25rem - 1.5px);
      padding: 14px 24px;
      border: 1px solid rgba(255, 255, 255, 0.9);
    }

    /* ПОДСВЕТКА И НЕОНОВЫЙ ОРЕОЛ ДЛЯ КАРТОЧКИ AMO CRM */
    .crm-card-glow {
      position: relative;
      border-radius: 1.75rem;
      padding: 2px;
      background: linear-gradient(135deg, #38bdf8 0%, #34d399 48%, #0284c7 100%);
      box-shadow: 0 0 35px rgba(2, 132, 199, 0.28), 0 12px 40px rgba(16, 185, 129, 0.22);
      transition: all 0.3s ease;
    }
    .crm-card-glow:hover {
      box-shadow: 0 0 45px rgba(2, 132, 199, 0.38), 0 18px 50px rgba(16, 185, 129, 0.3);
      transform: translateY(-2px);
    }
    .crm-card-glow-inner {
      background: radial-gradient(circle at 20% 0%, #172c3a 0%, #0c1822 100%);
      border-radius: calc(1.75rem - 2px);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    }

    /* НЕОНОВАЯ БЕГУЩАЯ СТРОКА И РАМКА ДЛЯ ЭТАПА ОПЛАТЫ */
    .neon-running-card {
      position: relative;
      border-radius: 1.25rem;
      padding: 2.5px;
      overflow: hidden;
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.4), 0 4px 15px rgba(5, 150, 105, 0.2);
    }
    .neon-running-card::before {
      content: '';
      position: absolute;
      inset: -100%;
      background: conic-gradient(from 0deg, transparent 0%, transparent 60%, #38bdf8 75%, #34d399 85%, #10b981 95%, #059669 100%);
      animation: neonCardLaser 3s linear infinite;
    }
    @keyframes neonCardLaser {
      100% { transform: rotate(360deg); }
    }
    .neon-running-card-inner {
      position: relative;
      background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #ecfdf5 100%);
      border-radius: 1.1rem;
      padding: 0.85rem 1rem;
      z-index: 1;
    }
    @keyframes neonMarquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .neon-marquee-track {
      display: inline-flex;
      animation: neonMarquee 14s linear infinite;
    }

    /* ГАЛОЧКА ОПЛАТЫ */
    @keyframes checkGlowPop {
      0% { transform: scale(1); box-shadow: 0 0 5px rgba(16, 185, 129, 0.4); }
      50% { transform: scale(1.18); box-shadow: 0 0 25px rgba(16, 185, 129, 0.9), 0 0 45px rgba(52, 211, 153, 0.7); }
      100% { transform: scale(1); box-shadow: 0 0 5px rgba(16, 185, 129, 0.4); }
    }
    /* АНИМАЦИЯ АВТОМАТИЧЕСКОГО ДВИЖЕНИЯ СДЕЛКИ ПО ЭТАПАМ */
    .stage-flow-beam {
      width: 35%;
      height: 100%;
      background: linear-gradient(90deg, transparent, #0284c7 40%, #10b981 80%, transparent);
      animation: stageBeamMove 3.6s infinite ease-in-out;
    }
    @keyframes stageBeamMove {
      0% { transform: translateX(-100%); opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translateX(350%); opacity: 0; }
    }

    .stage-step-1 { animation: stagePulse1 3.6s infinite ease-in-out; }
    .stage-step-2 { animation: stagePulse2 3.6s infinite ease-in-out; }
    .stage-step-3 { animation: stagePulse3 3.6s infinite ease-in-out; }

    @keyframes stagePulse1 {
      0%, 25% { transform: translateY(-2px); }
      35%, 100% { transform: translateY(0); }
    }
    @keyframes stagePulse2 {
      0%, 25% { transform: translateY(0); }
      35%, 60% { transform: translateY(-2px); }
      70%, 100% { transform: translateY(0); }
    }
    @keyframes stagePulse3 {
      0%, 60% { transform: translateY(0); }
      70%, 95% { transform: translateY(-2px); }
      100% { transform: translateY(0); }
    }


    .profit-curve-stroke {
      stroke-width: 2px !important;
      transition: d 0.25s var(--ease-fluid);
    }
    .ruble-crystal-badge {
      position: absolute;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #10b981;
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.7), 0 4px 12px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 30;
      pointer-events: none;
      font-weight: 900;
      font-size: 16px;
      color: #065f46;
      transition: top 0.25s ease;
    }

    /* ПОДЛОЖКА АЛТАЙСКИХ ГОР ДЛЯ КАЛЬКУЛЯТОРА */
    .altai-mountains-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* ИНТЕРАКТИВНОЕ ПОЛЕ ПРОРАСТАЮЩИХ РУБЛЕЙ */
    #altaiRubleField {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      overflow: visible;
    }
    .altai-ruble-token {
      position: absolute;
      user-select: none;
      pointer-events: none;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 1;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      font-weight: 800;
      letter-spacing: normal;
      line-height: 1;
      text-align: center;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      transform: translateY(16px) scale(0.3);
      transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      will-change: transform, opacity;
    }
    /* 1. Изумрудный акцентный символ */
    .altai-ruble-token.style-badge,
    .altai-ruble-token.style-primary {
      color: #10b981 !important;
      filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.5));
    }
    /* 2. Насыщенный глубокий изумрудный символ ₽ */
    .altai-ruble-token.style-raw,
    .altai-ruble-token.style-emerald {
      color: #059669 !important;
      filter: drop-shadow(0 0 6px rgba(5, 150, 105, 0.45));
    }
    /* 3. Светящийся мятный символ ₽ */
    .altai-ruble-token.style-white,
    .altai-ruble-token.style-mint {
      color: #34d399 !important;
      filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.55));
    }
    /* 4. Мягкий полупрозрачный изумрудный символ ₽ */
    .altai-ruble-token.style-outline,
    .altai-ruble-token.style-subtle {
      color: rgba(16, 185, 129, 0.6) !important;
      filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.3));
    }
    /* Анимация плавного парения */
    .altai-ruble-token.active-token {
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
      animation: rubleFloatA 3.6s ease-in-out infinite alternate !important;
    }
    .altai-ruble-token.active-token.alt-float {
      animation: rubleFloatB 4.2s ease-in-out infinite alternate !important;
    }
    /* Эффект мерцающего блика на некоторых монетах */
    .altai-ruble-token.has-glint {
      position: absolute;
    }
    .altai-ruble-token.active-token.has-glint {
      animation: rubleFloatA 3.6s ease-in-out infinite alternate, rubleGlintPulse 2.8s ease-in-out infinite alternate !important;
    }
    .altai-ruble-token.active-token.alt-float.has-glint {
      animation: rubleFloatB 4.2s ease-in-out infinite alternate, rubleGlintPulse 3.4s ease-in-out infinite alternate !important;
    }
    @keyframes rubleGlintPulse {
      0%, 100% {
        filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.4));
        opacity: 0.85;
      }
      50% {
        filter: drop-shadow(0 0 14px rgba(52, 211, 153, 1)) drop-shadow(0 0 4px #ffffff);
        opacity: 1;
      }
    }
    @keyframes rubleFloatA {
      0% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-7px) rotate(4deg); }
      100% { transform: translateY(0) rotate(0deg); }
    }
    @keyframes rubleFloatB {
      0% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-9px) rotate(-5deg); }
      100% { transform: translateY(0) rotate(0deg); }
    }

    /* СТИЛЬНЫЕ СЛАЙДЕРЫ КАЛЬКУЛЯТОРА */
    .calc-range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 9999px;
      background: #e2e8f0;
      outline: none;
      transition: background 0.2s ease;
      cursor: pointer;
    }
    .calc-range-slider:hover {
      background: #cbd5e1;
    }
    .calc-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      border: 2.5px solid #ffffff;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.45);
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .calc-range-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 0 14px rgba(2, 132, 199, 0.65);
    }
    .calc-range-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      border: 2.5px solid #ffffff;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.45);
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .calc-range-slider::-moz-range-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 0 14px rgba(2, 132, 199, 0.65);
    }

    /* ФИРМЕННЫЙ КОРПУС И КНОПКИ КАЛЬКУЛЯТОРА */
    .calc-main-shell {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1.5px solid rgba(56, 189, 248, 0.35);
      box-shadow: 0 24px 60px -10px rgba(2, 132, 199, 0.15), 
                  0 0 35px rgba(56, 189, 248, 0.12),
                  inset 0 1px 2px rgba(255, 255, 255, 1);
    }
    .calc-step-btn {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      color: #0284c7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
      transition: all 0.15s ease;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
    }
    .calc-step-btn:hover {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      transform: scale(1.05);
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
    }
    .calc-step-btn:active {
      transform: scale(0.92);
    }

    /* ДИНАМИЧЕСКАЯ ПОДСВЕТКА ЧИСЕЛ ПРИ ДВИЖЕНИИ ПОЛЗУНКОВ */
    .calc-input-box {
      background: rgba(248, 250, 252, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(226, 232, 240, 0.95);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .calc-input-box:hover {
      border-color: rgba(56, 189, 248, 0.6);
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.06);
    }
    .calc-input-box.is-active {
      border-color: #38bdf8 !important;
      background: #f0f9ff !important;
      box-shadow: 0 0 20px rgba(56, 189, 248, 0.22), 0 4px 12px rgba(2, 132, 199, 0.08) !important;
    }
    .calc-value-badge {
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .calc-value-badge.is-updating {
      border-color: #38bdf8 !important;
      background: #e0f2fe !important;
      box-shadow: 0 0 14px rgba(56, 189, 248, 0.45) !important;
      transform: scale(1.06);
    }
    .calc-value-badge.is-updating span {
      color: #0284c7 !important;
    }
    .calc-scenario-btn {
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }
    .calc-scenario-btn.active {
      background: #ffffff !important;
      color: #0369a1 !important;
      border-color: #38bdf8 !important;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.18) !important;
    }
    .calc-result-glow {
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .calc-result-glow.is-updating {
      transform: scale(1.03);
      filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.75)) !important;
    }

    /* ИНТЕРАКТИВНАЯ АНИМИРОВАННАЯ КАРУСЕЛЬ КЕЙСОВ */
    .case-tab-btn {
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .case-tab-btn:hover {
      transform: translateY(-1px);
    }
    .case-dot-btn {
      height: 7px;
      border-radius: 9999px;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }
    .cases-arrow-btn {
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      user-select: none;
    }
    .cases-arrow-btn:hover {
      transform: translateY(-50%) scale(1.08);
      background-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
    }
    .cases-arrow-btn:active {
      transform: translateY(-50%) scale(0.92);
    }

    /* Мобильная адаптация калькулятора: скрываем горы, расширяем полёт рублей выше заголовка */
    @media (max-width: 767px) {
      .altai-mountains-svg,
      #altaiRubleAura {
        display: none !important;
      }
      #altaiRubleField {
        top: -120px !important;
        height: calc(100% + 140px) !important;
        overflow: visible !important;
      }
    }

    /* Летящие интерактивные искры и монеты при движении ползунка */
    .coin-particle-burst {
      position: absolute;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      color: #10b981;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      font-weight: 800;
      letter-spacing: normal;
      filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.75));
      pointer-events: none;
      user-select: none;
      z-index: 40;
      animation: coinFlyBurst 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    }
    @keyframes coinFlyBurst {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0.5) rotate(0deg);
      }
      50% {
        opacity: 1;
        transform: translate3d(var(--tx), var(--ty), 0) scale(1.25) rotate(calc(var(--tr) * 0.5));
      }
      85% {
        opacity: 0.9;
        transform: translate3d(calc(var(--tx) * 1.15), calc(var(--ty) + 12px), 0) scale(1) rotate(var(--tr));
      }
      100% {
        opacity: 0;
        transform: translate3d(calc(var(--tx) * 1.25), calc(var(--ty) + 26px), 0) scale(0.6) rotate(calc(var(--tr) * 1.2));
      }
    }
    @keyframes coinFlyBurst {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0.4) rotate(0deg);
      }
      40% {
        opacity: 1;
        transform: translate3d(var(--tx), var(--ty), 0) scale(1.2) rotate(calc(var(--tr) * 0.5));
      }
      80% {
        opacity: 0.9;
        transform: translate3d(calc(var(--tx) * 1.15), calc(var(--ty) + 10px), 0) scale(1) rotate(var(--tr));
      }
      100% {
        opacity: 0;
        transform: translate3d(calc(var(--tx) * 1.25), calc(var(--ty) + 24px), 0) scale(0.5) rotate(calc(var(--tr) * 1.3));
      }
    }

    /* Мобильная адаптация */
    @media (max-width: 768px) {
      .altai-ruble-token {
        font-size: 14px !important;
      }
    }

    /* АНИМАЦИИ ДЛЯ СЕКЦИИ ЗАЯВКИ: ПОДАРОК И ГАЛОЧКИ */
    @keyframes giftParty {
      0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1.08);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 1px 4px rgba(15, 23, 42, 0.15));
      }
      12% {
        transform: translateY(-4px) rotate(-10deg) scale(1.22);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.85));
      }
      24% {
        transform: translateY(-2px) rotate(10deg) scale(1.25);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.9));
      }
      36% {
        transform: translateY(-3px) rotate(-6deg) scale(1.18);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
      }
      48% {
        transform: translateY(-1px) rotate(4deg) scale(1.12);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
      }
      60% {
        transform: translateY(0) rotate(0deg) scale(1.08);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 1px 4px rgba(15, 23, 42, 0.15));
      }
    }
    .anim-gift-wobble {
      display: inline-block;
      animation: giftParty 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
      transform-origin: bottom center;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .anim-gift-wobble:hover {
      transform: scale(1.4) rotate(8deg);
    }
    @keyframes giftSparkle {
      0%, 100% { opacity: 0.2; transform: scale(0.6); }
      50% { opacity: 1; transform: scale(1.3); }
    }
    .anim-gift-sparkle {
      animation: giftSparkle 1.8s ease-in-out infinite;
      pointer-events: none;
    }

    /* БЕГУЩАЯ НЕОНОВАЯ СТРОКА ПО КОНТУРУ ПЛАВАЮЩЕЙ КНОПКИ (В ЦВЕТЕ ЛОГОТИПА) */
    @keyframes neonStrokeRun {
      0% {
        stroke-dashoffset: 0;
        filter: drop-shadow(0 0 5px #38bdf8) drop-shadow(0 0 10px #0284c7);
      }
      50% {
        filter: drop-shadow(0 0 8px #67e8f9) drop-shadow(0 0 16px #0284c7);
      }
      100% {
        stroke-dashoffset: -164;
        filter: drop-shadow(0 0 5px #38bdf8) drop-shadow(0 0 10px #0284c7);
      }
    }
    .neon-running-stroke {
      stroke-dasharray: 48 116;
      animation: neonStrokeRun 2.2s linear infinite;
    }
    .floating-neon-btn:hover .neon-running-stroke {
      animation-duration: 1.1s;
      filter: drop-shadow(0 0 10px #67e8f9) drop-shadow(0 0 22px #0284c7);
    }

    /* ЯРКИЙ БЕГУЩИЙ НЕОНОВЫЙ ЛУЧ ПО КОНТУРУ КАРТОЧКИ HERO */
    @keyframes heroCardNeonRun {
      0% {
        stroke-dashoffset: 0;
        filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #38bdf8) drop-shadow(0 0 14px #00e5ff) drop-shadow(0 0 24px rgba(14, 165, 233, 0.8));
      }
      50% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #00e5ff) drop-shadow(0 0 18px #38bdf8) drop-shadow(0 0 30px rgba(56, 189, 248, 0.95));
      }
      100% {
        stroke-dashoffset: -100;
        filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #38bdf8) drop-shadow(0 0 14px #00e5ff) drop-shadow(0 0 24px rgba(14, 165, 233, 0.8));
      }
    }
    .hero-card-neon-stroke {
      stroke-dasharray: 26 74;
      animation: heroCardNeonRun 4s linear infinite;
    }

    /* АККУРАТНЫЙ ОТСТУП МЕЖДУ БУКВАМИ В ГЛАВНОМ ЗАГОЛОВКЕ ПЕРВОГО БЛОКА */
    .hero-main-title,
    .hero-main-title *,
    .hero-main-title span {
      letter-spacing: 0.035em !important;
    }

    /* АНИМИРОВАННЫЙ ГРАДИЕНТ С БЛИКОМ ВНУТРИ БУКВ (БЕЗ ВНЕШНЕЙ ПОДСВЕТКИ) */
    @keyframes heroTextFlareShimmer {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }
    .anim-hero-text-grad {
      display: inline-block;
      background: linear-gradient(
        110deg,
        #0284c7 0%,
        #38bdf8 15%,
        #22d3ee 28%,
        #ffffff 45%,
        #ffffff 52%,
        #a5f3fc 58%,
        #2dd4bf 70%,
        #38bdf8 85%,
        #0284c7 100%
      ) !important;
      background-size: 250% 100% !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
      color: transparent !important;
      animation: heroTextFlareShimmer 4s ease-in-out infinite !important;
      filter: none !important;
      text-shadow: none !important;
      will-change: background-position;
    }

    /* ==========================================================================
       ФИНАЛЬНЫЙ БЛОК: СОВРЕМЕННАЯ СБОРКА (#cta-final)
       ========================================================================== */
    /* =========================================================
       10. ФИНАЛЬНЫЙ CTA БЛОК (#cta-final)
       ========================================================= */
    #cta-final {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      position: relative;
    }

    .cta-final-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 36px;
    }

    @media (max-width: 1023px) {
      .cta-final-grid {
        gap: 0;
      }
      .cta-col-left,
      .cta-col-right {
        display: contents;
      }
      .cta-title-block { order: 1; margin-top: 0; margin-bottom: 14px; }
      .cta-pretitle-block { order: 2; margin-top: 4px; margin-bottom: 20px; }
      .cta-notifications-stage { order: 3; margin-bottom: 28px !important; }
      .cta-subtitle-block { order: 4; margin-top: 24px; margin-bottom: 14px; }
      .cta-mob-arrow { order: 5; display: flex; }
      .cta-actions-block { order: 6; margin-top: 32px; }
    }

    @media (min-width: 1024px) {
      .cta-final-grid {
        display: grid;
        grid-template-columns: 580px calc(100% - 580px - 64px);
        column-gap: 64px;
        align-items: center;
        text-align: left;
      }
      .cta-col-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        width: 100%;
        max-width: 580px;
      }
      .cta-col-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        width: 100%;
      }
      .cta-mob-arrow {
        display: none !important;
      }
      .cta-title-block { order: 1; margin-top: 0; }
      .cta-subtitle-block { order: 2; margin-top: 24px; }
      .cta-actions-block { order: 3; margin-top: 40px; }
    }

    /* Радиальное голубое свечение за левой колонкой */
    .cta-cards-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 520px;
      height: 480px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(2, 132, 199, 0.12) 45%, rgba(2, 132, 199, 0) 75%);
      filter: blur(60px);
      pointer-events: none;
      z-index: 0;
    }

    /* Претайтл «Знакомо?» */
    .cta-pretitle-block {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      z-index: 1;
    }
    .cta-pretitle-line {
      display: inline-block;
      width: 24px;
      height: 2px;
      background: #0284C7;
      border-radius: 9999px;
      flex-shrink: 0;
    }
    .cta-pretitle-text {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #0284C7;
      line-height: 1;
    }

    /* Сетка уведомлений: две колонки на десктопе, одна на мобильных */
    .cta-notifications-stage {
      position: relative;
      width: 100%;
      z-index: 1;
    }

    @media (max-width: 1023px) {
      .cta-notifications-stage {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 360px;
        margin: 0 auto 28px auto;
      }
      .cta-notif-col-left,
      .cta-notif-col-right {
        display: contents;
      }
      .cta-push-wrapper {
        order: var(--notif-order-mob, 1);
        width: 100%;
        max-width: 360px;
      }
      .cta-push-wrapper .cta-push-card {
        transform: rotate(var(--notif-rot-mob, 0deg));
      }
    }

    @media (min-width: 1024px) {
      .cta-notifications-stage {
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
        max-width: 580px;
      }
      .cta-notif-col-left {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 280px;
        max-width: 280px;
        flex-shrink: 0;
      }
      .cta-notif-col-right {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 280px;
        max-width: 280px;
        flex-shrink: 0;
        margin-top: 56px;
      }
      .cta-push-wrapper {
        width: 100%;
      }
      .cta-push-wrapper .cta-push-card {
        transform: rotate(var(--notif-rot-desk, 0deg));
      }
    }

    /* Обёртка карточки (парение translateY ±5px и reveal) */
    .cta-push-wrapper {
      will-change: transform, opacity;
      transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease-out;
    }

    /* Начальное состояние для анимации появления (JS-ready) — эффект падающих уведомлений */
    .cta-cards-js-ready .cta-push-wrapper {
      opacity: 0;
      transform: translateY(-42px) scale(0.9);
      pointer-events: none;
      transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease-out;
    }

    /* Класс проявления обёртки — мягко и упруго приземляется */
    .cta-cards-js-ready .cta-push-wrapper.card-revealed {
      opacity: 1;
      transform: translateY(0px) scale(1);
      pointer-events: auto;
    }

    /* Класс плавного растворения перед следующим кругом цикла */
    .cta-cards-js-ready .cta-push-wrapper.card-fading-out {
      opacity: 0;
      transform: translateY(-16px) scale(0.94);
      pointer-events: none;
      transition: transform 0.55s ease-in, opacity 0.5s ease-in !important;
    }

    /* Парение обёрток (ТОЛЬКО translateY ±5px) */
    .cta-push-wrapper.card-floating.cta-push-wrap-1 { animation: ctaFloatWrap1 5.5s ease-in-out infinite; }
    .cta-push-wrapper.card-floating.cta-push-wrap-2 { animation: ctaFloatWrap2 6.2s ease-in-out infinite 0.7s; }
    .cta-push-wrapper.card-floating.cta-push-wrap-3 { animation: ctaFloatWrap3 6.8s ease-in-out infinite 1.4s; }
    .cta-push-wrapper.card-floating.cta-push-wrap-4 { animation: ctaFloatWrap4 5.2s ease-in-out infinite 0.4s; }
    .cta-push-wrapper.card-floating.cta-push-wrap-5 { animation: ctaFloatWrap5 6.5s ease-in-out infinite 1.1s; }
    .cta-push-wrapper.card-floating.cta-push-wrap-6 { animation: ctaFloatWrap2 5.8s ease-in-out infinite 0.9s; }

    @keyframes ctaFloatWrap1 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
    }
    @keyframes ctaFloatWrap2 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(5px); }
    }
    @keyframes ctaFloatWrap3 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
    }
    @keyframes ctaFloatWrap4 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(5px); }
    }
    @keyframes ctaFloatWrap5 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
    }

    /* Карточки в стиле push-уведомлений iOS 17/18 */
    .cta-push-card {
      font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
      width: 100%;
      height: auto;
      border-radius: 22px;
      padding: 12px 14px;
      background: rgba(250, 250, 252, 0.72);
      backdrop-filter: blur(30px) saturate(180%);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      border: 0.5px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      display: flex;
      gap: 12px;
      align-items: center;
      text-align: left;
      user-select: none;
      position: relative;
      will-change: transform;
      transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Вздрагивание карточки (scale 1 -> 1.02 -> 1 за 0.3 с) */
    .cta-push-card.card-nudge {
      animation: ctaCardNudge 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @keyframes ctaCardNudge {
      0%, 100% { transform: rotate(var(--curr-rot, 0deg)) scale(1); }
      50% { transform: rotate(var(--curr-rot, 0deg)) scale(1.02); }
    }

    /* Заголовок правой колонки */
    .cta-final-title {
      font-size: clamp(28px, 2.6vw, 44px);
      line-height: 1.05;
    }
    .cta-title-line-dark {
      display: block;
      color: #075985;
      background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.08));
    }
    .cta-title-line-gradient {
      display: block;
      padding-right: 0.1em;
    }
    .cta-gradient-shimmer {
      display: inline-block;
      background: linear-gradient(
        110deg,
        #0284c7 0%,
        #0ea5e9 20%,
        #38bdf8 35%,
        #ffffff 48%,
        #ffffff 52%,
        #38bdf8 65%,
        #0ea5e9 80%,
        #0284c7 100%
      );
      background-size: 260% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 8px 24px rgba(14, 165, 233, 0.22));
      will-change: background-position;
      animation: ctaHeadlineGleam 6s ease-in-out infinite;
    }
    @keyframes ctaHeadlineGleam {
      0%, 75% {
        background-position: 0% 50%;
      }
      100% {
        background-position: 100% 50%;
      }
    }

    /* Отключение анимаций при prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      .cta-push-wrapper,
      .cta-push-card,
      .cta-gradient-shimmer {
        animation: none !important;
        transition: none !important;
      }
      .cta-push-wrapper {
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* БЕГУЩИЙ НЕОНОВЫЙ ЛУЧ-РАЗДЕЛИТЕЛЬ В ПЛАШКЕ ХИРО */
    @keyframes heroCardDividerBeam {
      0% {
        transform: translateX(-120%);
      }
      100% {
        transform: translateX(360%);
      }
    }
    .hero-card-divider-beam {
      position: absolute;
      top: 0;
      left: 0;
      width: 45%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), #ffffff, rgba(34, 211, 238, 0.8), transparent);
      animation: heroCardDividerBeam 3.5s ease-in-out infinite;
      filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9));
    }

    /* АНИМИРОВАННЫЙ ГРАДИЕНТ НА ПОДЛОЖКУ CTA БАННЕРА */
    @keyframes ctaBgShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .anim-cta-bg {
      background: linear-gradient(-45deg, #020b18, #032b52, #0284c7, #064e3b, #032b52, #020b18) !important;
      background-size: 300% 300% !important;
      animation: ctaBgShift 12s ease infinite !important;
    }

    /* ОДНОЦВЕТНАЯ СМЕНА ЦВЕТА ПРИ КАСАНИИ ЗНАЧКА РУБЛЯ (БЕЗ СВЕЧЕНИЯ: ИЗ ЧЕРНОГО В ЗЕЛЕНЫЙ) */
    @keyframes rubleTouchColorShift {
      0%, 65% {
        color: #0f172a;
        transform: scale(1);
      }
      72% {
        color: #059669;
        transform: scale(1.035);
      }
      85% {
        color: #10b981;
        transform: scale(1.02);
      }
      96%, 100% {
        color: #0f172a;
        transform: scale(1);
      }
    }
    .savings-touch-text {
      display: inline-block;
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      color: #0f172a;
      animation: rubleTouchColorShift 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* АКЦЕНТНЫЙ ВЫДЕЛЕННЫЙ ЦВЕТОМ ТЕКСТ ДЛЯ HERO (БЕЗ ОБРЕЗАНИЯ ГЛИФОВ) */
    .hero-highlight-title {
      display: inline-block;
      font-family: 'Benzin', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      line-height: 1.15;
      padding: 0.04em 0.08em;
      overflow: visible;
      background: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #0369a1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(2, 132, 199, 0.45));
    }

    .anim-cyber-circuits {
      animation: cyberCircuitPulse 4s ease-in-out infinite;
    }

    @keyframes cyberCircuitPulse {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }

    /* АКЦЕНТНЫЙ ЧИСТЫЙ ГРАДИЕНТ БУКВ AI (БЕЗ РАЗМЫТОГО СВЕЧЕНИЯ) */
    .neon-text-ai {
      background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 45%, #06b6d4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      filter: none !important;
    }

    /* АНИМАЦИЯ 10-СЕКУНДНОГО ТАЙМЕРА АВТОПЕРЕКЛЮЧЕНИЯ КЕЙСОВ */
    @keyframes caseTimerFill {
      0% { width: 0%; }
      100% { width: 100%; }
    }
    .case-tab-btn.active .case-timer-line {
      width: 0%;
      animation: caseTimerFill 10s linear infinite;
    }
    .case-tab-btn:not(.active) .case-timer-line {
      width: 0% !important;
      animation: none !important;
    }

    /* ПЛАВНАЯ АНИМАЦИЯ ПЕРЕКЛЮЧЕНИЯ КАРТОЧКИ КЕЙСА */
    #caseStudyCard {
      transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    }

    /* НЕПРЕРЫВНАЯ СВЕТЯЩАЯСЯ НЕОНОВАЯ ЛИНИЯ ПО КОНТУРУ КАРТОЧКИ С ЭФФЕКТОМ УВЕЛИЧЕНИЯ */
    .enterprise-neon-wrapper {
      position: relative;
      border-radius: 28px;
      padding: 2.5px;
      background: rgba(30, 41, 59, 0.6);
      overflow: hidden;
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1), 0 0 25px rgba(56, 189, 248, 0.15);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
    }
    .enterprise-neon-wrapper:hover,
    .enterprise-neon-wrapper.is-scroll-active {
      transform: translateY(-6px) scale(1.02);
      padding: 4px;
      box-shadow: 0 25px 60px -10px rgba(2, 132, 199, 0.35), 0 0 45px rgba(56, 189, 248, 0.45);
    }
    .enterprise-neon-wrapper::before {
      content: '';
      position: absolute;
      top: -150%;
      left: -150%;
      width: 400%;
      height: 400%;
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 200deg,
        rgba(56, 189, 248, 0.3) 240deg,
        rgba(56, 189, 248, 0.85) 280deg,
        rgba(103, 232, 249, 1) 330deg,
        rgba(255, 255, 255, 1) 355deg,
        rgba(56, 189, 248, 0.95) 360deg
      );
      animation: enterpriseNeonSpin 3.8s linear infinite;
      pointer-events: none;
      transition: filter 0.3s ease;
    }
    .enterprise-neon-wrapper:hover::before,
    .enterprise-neon-wrapper.is-scroll-active::before {
      filter: brightness(1.25) drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
    }
    
    .pricing-dark-card {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pricing-dark-card.is-scroll-active > div,
    .pricing-dark-card:hover > div {
      border-color: rgba(56, 189, 248, 0.7);
      box-shadow: 0 20px 50px rgba(2, 132, 199, 0.3), 0 0 35px rgba(56, 189, 248, 0.25);
      transform: translateY(-4px);
    }
    
    #cases [onclick^="openCaseModal"].is-scroll-active {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 0 20px rgba(2, 132, 199, 0.15);
      border-color: rgba(56, 189, 248, 0.6);
    }
    @keyframes enterpriseNeonSpin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* ПУЛЬСИРУЮЩАЯ ВЫТЯНУТАЯ СТРЕЛКА ОТ КАРТОЧКИ К КНОПКЕ */
    @keyframes arrowNeonPulse {
      0%, 100% {
        transform: translateY(0);
        opacity: 0.75;
        filter: drop-shadow(0 0 4px #38bdf8);
      }
      50% {
        transform: translateY(6px);
        opacity: 1;
        filter: drop-shadow(0 0 12px #67e8f9) drop-shadow(0 0 24px #0284c7);
      }
    }
    .anim-neon-arrow {
      animation: arrowNeonPulse 1.8s ease-in-out infinite;
    }

    /* ЗАГОРАЮЩАЯСЯ НЕОНОВАЯ КНОПКА */
    @keyframes buttonNeonGlow {
      0%, 100% {
        box-shadow: 0 0 16px rgba(2, 132, 199, 0.4), 0 0 32px rgba(56, 189, 248, 0.25);
        border-color: rgba(56, 189, 248, 0.6);
      }
      50% {
        box-shadow: 0 0 28px rgba(56, 189, 248, 0.9), 0 0 60px rgba(2, 132, 199, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.35);
        border-color: rgba(103, 232, 249, 1);
      }
    }
    .btn-neon-ignite {
      animation: buttonNeonGlow 2.2s ease-in-out infinite;
    }

    @keyframes checkmarkPop {
      0%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2); }
      50% { transform: scale(1.18); box-shadow: 0 0 12px rgba(16, 185, 129, 0.6); }
    }
    .anim-check-pop {
      animation: checkmarkPop 3s ease-in-out infinite;
    }

    /* ИНДИВИДУАЛЬНЫЕ МЕДЛЕННЫЕ БЛИКИ ДЛЯ КАЖДОЙ КАРТОЧКИ КЕЙСОВ */
    .case-card-glare {
      position: absolute;
      pointer-events: none;
      z-index: 15;
      mix-blend-mode: overlay;
    }
    
    /* Блик 1: Мягкий диагональный луч сверху слева направо (8.2s) */
    @keyframes caseGlareAnim1 {
      0%, 15% {
        transform: translate(-140%, -100%) rotate(25deg);
        opacity: 0;
      }
      32% {
        opacity: 0.95;
      }
      52%, 100% {
        transform: translate(220%, 150%) rotate(25deg);
        opacity: 0;
      }
    }
    .case-card-glare-1 {
      top: -50%;
      left: -20%;
      width: 60%;
      height: 200%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), rgba(56, 189, 248, 0.45), rgba(255, 255, 255, 0.85), transparent);
      filter: blur(4px);
      animation: caseGlareAnim1 8.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 0s;
    }

    /* Блик 2: Рассеянный световой ореол снизу вверх под другим углом (9.4s) */
    @keyframes caseGlareAnim2 {
      0%, 20% {
        transform: translate(-100%, 150%) rotate(-35deg);
        opacity: 0;
      }
      40% {
        opacity: 0.9;
      }
      62%, 100% {
        transform: translate(200%, -120%) rotate(-35deg);
        opacity: 0;
      }
    }
    .case-card-glare-2 {
      top: -30%;
      left: -30%;
      width: 70%;
      height: 200%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), rgba(168, 85, 247, 0.4), rgba(255, 255, 255, 0.8), transparent);
      filter: blur(5px);
      animation: caseGlareAnim2 9.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 2.3s;
    }

    /* Блик 3: Горизонтально-диагональный скользящий блик по нижней части (8.8s) */
    @keyframes caseGlareAnim3 {
      0%, 18% {
        transform: translate(-150%, 0%) rotate(15deg);
        opacity: 0;
      }
      38% {
        opacity: 0.95;
      }
      60%, 100% {
        transform: translate(250%, 0%) rotate(15deg);
        opacity: 0;
      }
    }
    .case-card-glare-3 {
      top: -20%;
      left: -20%;
      width: 55%;
      height: 180%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), rgba(14, 165, 233, 0.45), rgba(255, 255, 255, 0.9), transparent);
      filter: blur(4px);
      animation: caseGlareAnim3 8.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 4.6s;
    }

    /* Блик 4: Тонкий световой срез под крутым углом сверху вниз (9.8s) */
    @keyframes caseGlareAnim4 {
      0%, 16% {
        transform: translate(160%, -140%) rotate(-55deg);
        opacity: 0;
      }
      36% {
        opacity: 0.85;
      }
      56%, 100% {
        transform: translate(-140%, 180%) rotate(-55deg);
        opacity: 0;
      }
    }
    .case-card-glare-4 {
      top: -50%;
      right: -20%;
      width: 55%;
      height: 220%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), rgba(59, 130, 246, 0.45), rgba(255, 255, 255, 0.85), transparent);
      filter: blur(3px);
      animation: caseGlareAnim4 9.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 6.8s;
    }

    /* АНИМАЦИЯ ГОЛОСОВОГО СООБЩЕНИЯ В WHATSAPP */
    @keyframes voiceBarDance {
      0%, 100% { height: 4px; transform: scaleY(0.4); opacity: 0.5; }
      50% { height: 18px; transform: scaleY(1.2); opacity: 1; }
    }
    .voice-bar-anim {
      display: inline-block;
      width: 3px;
      margin: 0 1.5px;
      border-radius: 9999px;
      background: #059669;
      transition: all 0.2s ease;
    }
    .voice-playing .voice-bar-anim {
      animation: voiceBarDance 0.8s ease-in-out infinite alternate;
    }
    .voice-playing .voice-bar-anim:nth-child(2) { animation-delay: 0.15s; }
    .voice-playing .voice-bar-anim:nth-child(3) { animation-delay: 0.3s; }
    .voice-playing .voice-bar-anim:nth-child(4) { animation-delay: 0.1s; }
    .voice-playing .voice-bar-anim:nth-child(5) { animation-delay: 0.45s; }
    .voice-playing .voice-bar-anim:nth-child(6) { animation-delay: 0.25s; }
    .voice-playing .voice-bar-anim:nth-child(7) { animation-delay: 0.35s; }
    .voice-playing .voice-bar-anim:nth-child(8) { animation-delay: 0.05s; }
    .voice-playing .voice-bar-anim:nth-child(9) { animation-delay: 0.5s; }
    .voice-playing .voice-bar-anim:nth-child(10) { animation-delay: 0.2s; }
    .voice-playing .voice-bar-anim:nth-child(11) { animation-delay: 0.4s; }
    .voice-playing .voice-bar-anim:nth-child(12) { animation-delay: 0.15s; }
    .voice-playing .voice-bar-anim:nth-child(13) { animation-delay: 0.3s; }
    .voice-playing .voice-bar-anim:nth-child(14) { animation-delay: 0.45s; }
    .voice-playing .voice-bar-anim:nth-child(15) { animation-delay: 0.2s; }

    /* БАРАБАННАЯ ДРОБЬ (ДЕЛИКАТНЫЙ ВЕКТОР) */
    .drumstick-left {
      transform-origin: 8px 6px;
      animation: drumHitLeft 0.14s infinite alternate ease-in-out;
    }
    .drumstick-right {
      transform-origin: 40px 6px;
      animation: drumHitRight 0.14s infinite alternate ease-in-out;
      animation-delay: 0.07s;
    }
    @keyframes drumHitLeft {
      0% { transform: rotate(-12deg); }
      100% { transform: rotate(7deg); }
    }
    @keyframes drumHitRight {
      0% { transform: rotate(12deg); }
      100% { transform: rotate(-7deg); }
    }
    .drum-head-pulse {
      transform-origin: 24px 22px;
      animation: drumHeadVibrate 0.07s infinite alternate ease-in-out;
    }
    @keyframes drumHeadVibrate {
      0% { transform: scale(1); }
      100% { transform: scale(0.99, 1.01); }
    }
    .drum-sound-wave {
      transform-origin: 24px 22px;
      animation: drumRipplePing 0.65s infinite ease-out;
    }
    @keyframes drumRipplePing {
      0% { transform: scale(0.9); opacity: 0.55; }
      100% { transform: scale(1.35); opacity: 0; }
    }
    @keyframes heroGlowPulse {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.65;
      }
      50% {
        transform: translate3d(30px, -20px, 0) scale(1.15);
        opacity: 0.9;
      }
    }
    @keyframes heroGlowAltPulse {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.5;
      }
      50% {
        transform: translate3d(-25px, 20px, 0) scale(1.18);
        opacity: 0.8;
      }
    }
    @keyframes jellyfishOrbitOne {
      0%, 100% {
        border-radius: 52% 48% 60% 40% / 46% 54% 46% 54%;
        transform: translate3d(-10px, -8px, 0) scale(1) rotate(0deg);
      }
      25% {
        border-radius: 42% 58% 48% 52% / 56% 44% 56% 44%;
        transform: translate3d(18px, -12px, 0) scale(1.05) rotate(2.5deg);
      }
      50% {
        border-radius: 60% 40% 52% 48% / 40% 60% 42% 58%;
        transform: translate3d(12px, 14px, 0) scale(0.97) rotate(-2deg);
      }
      75% {
        border-radius: 46% 54% 58% 42% / 52% 48% 48% 52%;
        transform: translate3d(-16px, 10px, 0) scale(1.03) rotate(1.8deg);
      }
    }
    @keyframes jellyfishOrbitTwo {
      0%, 100% {
        border-radius: 46% 54% 42% 58% / 54% 46% 58% 42%;
        transform: translate3d(12px, 10px, 0) scale(0.96) rotate(0deg);
      }
      33% {
        border-radius: 58% 42% 55% 45% / 45% 55% 40% 60%;
        transform: translate3d(-16px, -12px, 0) scale(1.04) rotate(-2.5deg);
      }
      66% {
        border-radius: 40% 60% 48% 52% / 55% 45% 50% 50%;
        transform: translate3d(14px, -10px, 0) scale(1.01) rotate(2deg);
      }
    }
    @keyframes jellyfishWave {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.98);
      }
      50% {
        transform: translate3d(-12px, -8px, 0) scale(1.04);
      }
    }
    @keyframes jellyfishPulseLight {
      0%, 100% { opacity: 0.88; }
      50% { opacity: 0.65; }
    }
    @keyframes heroShadowFloatWide {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.72;
      }
      33% {
        transform: translate3d(24px, -12px, 0) scale(1.05);
        opacity: 0.82;
      }
      66% {
        transform: translate3d(-18px, 14px, 0) scale(0.97);
        opacity: 0.65;
      }
    }
    @keyframes heroShadowFloatDeep {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1.02);
        opacity: 0.68;
      }
      50% {
        transform: translate3d(-20px, -10px, 0) scale(1.06);
        opacity: 0.78;
      }
    }
    @keyframes heroShadowFloat {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.7;
      }
      50% {
        transform: translate3d(-15px, -10px, 0) scale(1.04);
        opacity: 0.8;
      }
    }
    .anim-hero-shadow-float-wide {
      animation: heroShadowFloatWide 11s ease-in-out infinite;
      will-change: transform, opacity;
    }
    .anim-hero-shadow-float-deep {
      animation: heroShadowFloatDeep 13s ease-in-out infinite;
      will-change: transform, opacity;
    }
    .anim-jellyfish-body {
      animation: jellyfishOrbitOne 10s ease-in-out infinite, jellyfishPulseLight 7s ease-in-out infinite;
      will-change: transform, border-radius, opacity;
    }
    .anim-jellyfish-core {
      animation: jellyfishOrbitTwo 12s ease-in-out infinite, jellyfishPulseLight 8.5s ease-in-out infinite;
      will-change: transform, border-radius, opacity;
    }
    .anim-jellyfish-wave {
      animation: jellyfishWave 9s ease-in-out infinite alternate;
      will-change: transform, opacity;
    }
    .anim-hero-glow {
      animation: heroGlowPulse 9s ease-in-out infinite;
      will-change: transform, opacity;
    }
    .anim-hero-glow-alt {
      animation: heroGlowAltPulse 12s ease-in-out infinite;
      will-change: transform, opacity;
    }
    .anim-hero-shadow {
      animation: heroShadowFloat 10s ease-in-out infinite;
      will-change: transform, opacity;
    }
    /* АВТОМАТИЧЕСКАЯ АКТИВАЦИЯ КАРТОЧЕК ПОТЕРЬ ПРИ СКРОЛЛЕ (БЕЛЫЕ ПОДЛОЖКИ, НЕЙТРАЛЬНЫЕ РАМКИ) */
    .leak-card {
      background: #ffffff !important;
      background-color: #ffffff !important;
      border-color: rgba(226, 232, 240, 0.9) !important;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.28s ease;
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
    }
    .leak-card .leak-label {
      transition: color 0.28s ease;
    }
    .leak-card.leak-card-active.leak-card-rose {
      border-color: rgba(203, 213, 225, 0.95) !important;
      box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06) !important;
      transform: translateY(-2px);
    }
    .leak-card.leak-card-active.leak-card-rose .leak-label {
      color: #be123c !important;
    }

    .leak-card.leak-card-active.leak-card-amber {
      border-color: rgba(203, 213, 225, 0.95) !important;
      box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06) !important;
      transform: translateY(-2px);
    }
    .leak-card.leak-card-active.leak-card-amber .leak-label {
      color: #c2410c !important;
    }
    .crm-integration-logo {
      filter: grayscale(100%) opacity(0.65);
      transition: filter 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
    }
    .crm-integration-pill:hover .crm-integration-logo {
      filter: grayscale(0%) opacity(1);
      transform: scale(1.04);
    }
    /* НЕОНОВЫЙ ЗНАЧОК РУБЛЯ С БЕГУЩЕЙ ПОДСВЕТКОЙ ПО ПЕРИМЕТРУ */
    @keyframes rubleBeamSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .ruble-neon-pill {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1.5px;
      border-radius: 9999px;
      overflow: hidden;
      text-decoration: none;
      box-shadow: 0 2px 10px -1px rgba(14, 165, 233, 0.28);
    }
    .ruble-neon-pill .ruble-beam-spin {
      background: conic-gradient(from 0deg, transparent 0%, transparent 55%, #38bdf8 72%, #0284c7 88%, #ffffff 98%, transparent 100%);
      animation: rubleBeamSpin 2.4s linear infinite;
    }
    .ruble-neon-pill:hover .ruble-beam-spin {
      animation-duration: 1.4s;
    }

    /* АНИМИРОВАННАЯ НЕОНОВАЯ КОНТУРНАЯ КНОПКА (БЕЗ РАЗМЫТИЯ И СВЕЧЕНИЯ) */
    .btn-neon-contour {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #0284c7;
      background: #ffffff;
      border: 1.5px solid transparent;
      border-radius: 9999px;
      text-decoration: none;
      box-shadow: none;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
      z-index: 1;
    }
    .btn-neon-contour::before {
      content: '';
      position: absolute;
      inset: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(from 0deg, #0284c7 0%, #38bdf8 25%, #818cf8 50%, #38bdf8 75%, #0284c7 100%);
      animation: neonBorderSpin 3.5s linear infinite;
      z-index: -2;
    }
    .btn-neon-contour::after {
      content: '';
      position: absolute;
      inset: 1.5px;
      border-radius: 9999px;
      background: #ffffff;
      z-index: -1;
      transition: background 0.25s ease;
    }
    .btn-neon-contour:hover::after {
      background: #f0f9ff;
    }
    .btn-neon-contour:hover {
      color: #0369a1;
      box-shadow: none;
      transform: translateY(-1px) scale(1.03);
    }
    .btn-neon-contour:active {
      transform: scale(0.98);
    }
    @keyframes neonBorderSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* МОБИЛЬНОЕ МЕНЮ: БЕГАЮЩАЯ НЕОНОВАЯ ЛИНИЯ ПО КОНТУРУ И ВНУТРЕННИЙ НЕОН */
    .mobile-menu-neon-card {
      position: relative;
      border-radius: 1.25rem;
      padding: 1.5px;
      background: transparent;
      overflow: hidden;
      box-shadow: 0 18px 45px -10px rgba(2, 132, 199, 0.25);
    }
    .mobile-menu-neon-card::before {
      content: '';
      position: absolute;
      inset: -60%;
      width: 220%;
      height: 220%;
      background: conic-gradient(from 0deg, #0284c7 0%, #38bdf8 25%, #818cf8 45%, transparent 65%, #0284c7 90%, #38bdf8 100%);
      animation: neonBorderSpin 3.5s linear infinite;
      z-index: 0;
    }
    .mobile-menu-neon-inner {
      position: relative;
      z-index: 1;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: calc(1.25rem - 1.5px);
    }
    @keyframes menuDividerScan {
      0% { transform: translateX(-100%); }
      50% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }

    /* УДАЛЕНИЕ БРАУЗЕРНЫХ СТРЕЛОЧЕК У ЧИСЛОВЫХ ИНПУТОВ */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
    }
    /* ==========================================================================
       WIDE FLOWING SECTION CONNECTORS (Логика вытекает и перетекает)
       Плавные диагональные переходы между блоками по референсу (без шариков и разноцветия)
       ========================================================================== */
    .flowing-connector-container {
      position: relative;
      width: 100%;
      display: block;
      z-index: 20;
      overflow: visible;
      user-select: none;
    }
    .flowing-connector-link {
      position: relative;
      display: block;
      width: 100%;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
      cursor: pointer;
      text-decoration: none;
    }
    .flowing-connector-link:hover {
      transform: translateY(2px);
      filter: drop-shadow(0 4px 18px rgba(2, 132, 199, 0.28));
    }
    @keyframes flowingConnectorSweep {
      0% {
        stroke-dashoffset: 820;
        opacity: 0.12;
      }
      30%, 70% {
        opacity: 0.95;
      }
      100% {
        stroke-dashoffset: -80;
        opacity: 0.12;
      }
    }
    .flowing-connector-beam {
      stroke-dasharray: 120 720;
      animation: flowingConnectorSweep 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    .flowing-connector-beam-emerald {
      stroke-dasharray: 120 720;
      animation: flowingConnectorSweep 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* ==========================================================================
       REFINED SLENDER FLOWING CONNECTORS (Изящные тонкие стрелки по референсу)
       Тонкие грациозные дуги (1.3px - 1.6px), пунктир, деликатный шеврон
       ========================================================================== */
    .flowing-connector-container {
      position: relative;
      width: 100%;
      display: block;
      z-index: 20;
      overflow: visible;
      user-select: none;
      padding-top: 1.75rem;
      padding-bottom: 1.75rem;
    }
    @media (max-width: 640px) {
      .flowing-connector-container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }
      .flowing-connector-container svg {
        min-height: 85px;
        transform: scaleY(1.15);
        transform-origin: center;
      }
    }
    @media (min-width: 641px) {
      .flowing-connector-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      .flowing-connector-container svg {
        min-height: 85px;
      }
    }
    .flowing-connector-link {
      position: relative;
      display: block;
      width: 100%;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
      cursor: pointer;
      text-decoration: none;
    }
    .flowing-connector-link:hover {
      transform: translateY(2px);
      filter: drop-shadow(0 2px 12px rgba(2, 132, 199, 0.25));
    }
    @keyframes delicateConnectorBeam {
      0% {
        stroke-dashoffset: 750;
        opacity: 0.1;
      }
      35%, 65% {
        opacity: 0.85;
      }
      100% {
        stroke-dashoffset: -50;
        opacity: 0.1;
      }
    }
    .delicate-connector-beam {
      stroke-dasharray: 80 650;
      animation: delicateConnectorBeam 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    .delicate-connector-beam-emerald {
      stroke-dasharray: 80 650;
      animation: delicateConnectorBeam 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* ==========================================================================
       TRIAL 7-DAY TEST-DRIVE BLOCK (ПОПРОБОВАТЬ 7 ДНЕЙ)
       Лаконичная карточка с деликатным живым бликом (specular sheen)
       ========================================================================== */
    .trial-card {
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .trial-card:hover {
      border-color: rgba(56, 189, 248, 0.95);
      box-shadow: 0 24px 70px rgba(2, 132, 199, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    }
    /* ДЕЛИКАТНОЕ АККУРАТНОЕ БОЖЕСТВЕННОЕ СВЕЧЕНИЕ ПО ВСЕМУ БЛОКУ ТЕСТ 7 ДНЕЙ */
    .trial-divine-aura {
      position: absolute;
      top: -15%;
      left: -10%;
      width: 550px;
      max-width: 90vw;
      height: 380px;
      background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(186, 230, 253, 0.11) 40%,
        rgba(56, 189, 248, 0.04) 65%,
        transparent 80%
      );
      filter: blur(55px);
      pointer-events: none;
      animation: divineAuraDrift 22s ease-in-out infinite alternate;
      z-index: 1;
    }

    .trial-divine-aura-2 {
      position: absolute;
      bottom: -20%;
      right: -10%;
      width: 480px;
      max-width: 85vw;
      height: 340px;
      background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(125, 211, 252, 0.08) 45%,
        transparent 75%
      );
      filter: blur(50px);
      pointer-events: none;
      animation: divineAuraDrift2 26s ease-in-out infinite alternate;
      z-index: 1;
    }

    @keyframes divineAuraDrift {
      0% {
        transform: translate(0, 0) scale(0.95);
        opacity: 0.45;
      }
      33% {
        transform: translate(45vw, 15%) scale(1.08);
        opacity: 0.6;
      }
      66% {
        transform: translate(20vw, 35%) scale(0.98);
        opacity: 0.5;
      }
      100% {
        transform: translate(65vw, -10%) scale(1.1);
        opacity: 0.55;
      }
    }

    @keyframes divineAuraDrift2 {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
      }
      35% {
        transform: translate(-40vw, -20%) scale(1.06);
        opacity: 0.55;
      }
      70% {
        transform: translate(-18vw, -30%) scale(0.96);
        opacity: 0.45;
      }
      100% {
        transform: translate(-55vw, -5%) scale(1.05);
        opacity: 0.5;
      }
    }

    .divine-title-wrap {
      position: relative;
      display: inline-block;
      z-index: 10;
    }

    /* МЯГКИЙ АККУРАТНЫЙ ОРЕОЛ — СТРОГО ПО КОНТУРУ ЗАГОЛОВКА */
    .divine-halo {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 106%;
      height: 95%;
      transform: translate(-50%, -50%);
      background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(186, 230, 253, 0.14) 45%,
        transparent 75%
      );
      filter: blur(14px);
      pointer-events: none;
      animation: divineHaloFloat 5s ease-in-out infinite alternate;
      z-index: 0;
    }

    @keyframes divineHaloFloat {
      0% {
        transform: translate(-50%, -50%) scale(0.97);
        opacity: 0.5;
      }
      100% {
        transform: translate(-50%, -50%) scale(1.03);
        opacity: 0.8;
      }
    }

    /* ДЕЛИКАТНЫЙ СКОЛЬЗЯЩИЙ ПЕРЕЛИВ ПО БУКВАМ */
    .divine-beam {
      position: absolute;
      top: 5%;
      left: -15%;
      width: 80px;
      height: 90%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
      );
      filter: blur(10px);
      pointer-events: none;
      animation: divineBeamWander 7s ease-in-out infinite alternate;
      z-index: 1;
    }

    @keyframes divineBeamWander {
      0% {
        transform: translateX(0);
        opacity: 0.15;
      }
      50% {
        transform: translateX(160px);
        opacity: 0.55;
      }
      100% {
        transform: translateX(300px);
        opacity: 0.2;
      }
    }

    /* ГРАДИЕНТ ДЛЯ ТЕСТ-ДРАЙВ ВЕРЫ (EMERALD -> SKY -> INDIGO ПО ПРИМЕРУ 3 БЛОКА) */
    .divine-title-text {
      position: relative;
      z-index: 2;
      display: inline-block;
      background: linear-gradient(90deg, #6ee7b7 0%, #bae6fd 50%, #c7d2fe 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
      color: transparent !important;
      animation: none !important;
      filter: drop-shadow(0 2px 14px rgba(15, 23, 42, 0.6));
      letter-spacing: -0.01em;
    }

    /* Совместимость со старым классом */
    .trial-card-glare {
      display: none;
    }
    .trial-input {
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .trial-input:focus {
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
    }

    /* МЕДЛЕННЫЙ АККУРАТНЫЙ БЛИК НА ФИНАЛЬНОЙ КНОПКЕ "НАЧАТЬ" */
    .btn-earn-shine {
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .earn-slow-glare {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.15) 65%,
        transparent 80%
      );
      transform: translateX(-150%) skewX(-20deg);
      animation: earnSlowGlow 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes earnSlowGlow {
      0% {
        transform: translateX(-150%) skewX(-20deg);
      }
      30% {
        transform: translateX(150%) skewX(-20deg);
      }
      100% {
        transform: translateX(150%) skewX(-20deg);
      }
    }


    /* МИНИМАЛИСТИЧНЫЙ МЕДЛЕННЫЙ БЛИК ДЛЯ ПОДЛОЖКИ ОСНОВАТЕЛЕЙ */
    .card-manifest-shine {
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .card-manifest-glare {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      pointer-events: none;
      z-index: 10;
      background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.05) 42%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.05) 58%,
        transparent 65%
      );
      transform: translateX(-150%) skewX(-25deg);
      animation: manifestSlowGlow 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes manifestSlowGlow {
      0% {
        transform: translateX(-150%) skewX(-25deg);
      }
      25% {
        transform: translateX(150%) skewX(-25deg);
      }
      100% {
        transform: translateX(150%) skewX(-25deg);
      }
    }

    @keyframes bounceHorizontal {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(6px);
      }
    }
    .animate-bounce-horizontal {
      animation: bounceHorizontal 1.2s infinite ease-in-out;
    }