/* Декоративные линии «как на графиках» */
:root,
[data-theme="light"] {
  --chart-line-1: rgba(79, 70, 229, 0.72);
  --chart-line-2: rgba(22, 163, 74, 0.62);
  --chart-line-3: rgba(2, 132, 199, 0.55);
  --chart-grid: rgba(79, 70, 229, 0.22);
  --chart-fill-1: rgba(79, 70, 229, 0.18);
  --chart-fill-2: rgba(34, 197, 94, 0.14);
  --chart-glow-1: rgba(99, 102, 241, 0.55);
  --chart-glow-2: rgba(34, 197, 94, 0.45);
}

[data-theme="dark"] {
  --chart-line-1: rgba(165, 180, 252, 0.85);
  --chart-line-2: rgba(74, 222, 128, 0.75);
  --chart-line-3: rgba(56, 189, 248, 0.68);
  --chart-grid: rgba(129, 140, 248, 0.28);
  --chart-fill-1: rgba(99, 102, 241, 0.28);
  --chart-fill-2: rgba(34, 197, 94, 0.2);
  --chart-glow-1: rgba(129, 140, 248, 0.65);
  --chart-glow-2: rgba(74, 222, 128, 0.5);
}

.section--with-charts {
  position: relative;
  overflow: hidden;
}

.section--with-charts > .container,
.section--with-charts > .container--narrow {
  position: relative;
  z-index: 1;
}

.chart-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.chart-bg__svg {
  position: absolute;
  width: 145%;
  height: 108%;
  left: -22%;
  top: -4%;
  will-change: transform;
}

.chart-bg__grid {
  stroke: var(--chart-grid);
  stroke-width: 1.25;
  stroke-dasharray: 5 8;
  vector-effect: non-scaling-stroke;
}

.chart-bg__area {
  vector-effect: non-scaling-stroke;
}

.chart-bg__area--1 {
  fill: var(--chart-fill-1);
}

.chart-bg__area--2 {
  fill: var(--chart-fill-2);
}

.chart-bg__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-bg__line--1 {
  stroke: var(--chart-line-1);
  stroke-width: 3.25;
  stroke-dasharray: 1800;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 8px var(--chart-glow-1));
}

.chart-bg__line--2 {
  stroke: var(--chart-line-2);
  stroke-width: 2.75;
  stroke-dasharray: 1600;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px var(--chart-glow-2));
}

.chart-bg__line--3 {
  stroke: var(--chart-line-3);
  stroke-width: 2.25;
  stroke-dasharray: 1400;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.45));
}

@media (prefers-reduced-motion: no-preference) {
  .chart-bg__line--1 {
    animation: chart-draw 7s ease-in-out infinite alternate, chart-float 5s ease-in-out infinite;
  }

  .chart-bg__line--2 {
    animation: chart-draw 9s ease-in-out 0.8s infinite alternate-reverse, chart-float 6s ease-in-out 0.4s infinite;
  }

  .chart-bg__line--3 {
    animation: chart-draw 6s ease-in-out 1.6s infinite alternate, chart-float 7s ease-in-out 0.9s infinite reverse;
  }

  .chart-bg__svg {
    animation: chart-pan 16s ease-in-out infinite alternate;
  }

  .chart-bg__grid {
    animation: chart-grid-pulse 5s ease-in-out infinite;
  }

  .chart-bg__area--1 {
    animation: chart-area-breathe 8s ease-in-out infinite;
  }

  .chart-bg__area--2 {
    animation: chart-area-breathe 10s ease-in-out 1.5s infinite reverse;
  }

  .chart-bg__dot {
    animation: chart-pulse 2.5s ease-in-out infinite;
  }

  .chart-bg__dot--2 {
    animation-delay: 0.8s;
  }

  .chart-bg__dot--3 {
    animation-delay: 1.6s;
  }
}

.chart-bg__dot {
  fill: var(--chart-line-1);
  filter: drop-shadow(0 0 10px var(--chart-glow-1));
}

.chart-bg__dot--2 {
  fill: var(--chart-line-2);
  filter: drop-shadow(0 0 8px var(--chart-glow-2));
}

.chart-bg__dot--3 {
  fill: var(--chart-line-3);
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.55));
}

/* CTA: яркие линии поверх градиента */
.cta-band.section--with-charts .chart-bg__svg {
  opacity: 0.95;
  height: 125%;
  top: -12%;
}

.cta-band.section--with-charts .chart-bg__line--1 {
  stroke: rgba(255, 255, 255, 0.82);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55));
}

.cta-band.section--with-charts .chart-bg__line--2 {
  stroke: rgba(255, 255, 255, 0.65);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.cta-band.section--with-charts .chart-bg__line--3 {
  stroke: rgba(255, 255, 255, 0.5);
}

.cta-band.section--with-charts .chart-bg__grid {
  stroke: rgba(255, 255, 255, 0.28);
}

.cta-band.section--with-charts .chart-bg__area--1 {
  fill: rgba(255, 255, 255, 0.14);
}

.cta-band.section--with-charts .chart-bg__area--2 {
  fill: rgba(255, 255, 255, 0.09);
}

.cta-band.section--with-charts .chart-bg__dot {
  fill: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.75));
}

@keyframes chart-draw {
  0% {
    stroke-dashoffset: 1800;
    opacity: 0.55;
  }
  40% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
}

@keyframes chart-pan {
  0% {
    transform: translateX(0) translateY(0) scale(1);
  }
  100% {
    transform: translateX(-10%) translateY(3%) scale(1.02);
  }
}

@keyframes chart-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes chart-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.65);
  }
}

@keyframes chart-grid-pulse {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

@keyframes chart-area-breathe {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .chart-bg__svg {
    width: 185%;
    left: -42%;
  }

  .chart-bg__line--1 {
    stroke-width: 2.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-bg__svg,
  .chart-bg__line,
  .chart-bg__dot,
  .chart-bg__grid,
  .chart-bg__area {
    animation: none !important;
  }

  .chart-bg__line {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
}