/* Тёмная панель. Используется секцией «создай сценарий» на главной и финальным
   CTA: одинаковая заливка, текстура, голубые свечения и пунктирные линии. */

.dark-panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--bg-inverse);
  color: var(--neutral-white);
}

.dark-panel__texture {
  position: absolute;
  top: 64.36%;
  inset-inline-start: 55.07%;
  width: 92.67%;
  height: 58.98%;
  background-image: var(--decor-image, url("../../img/home/panel-texture.webp"));
  background-size: cover;
  pointer-events: none;
}

/* Свечение: круг из макета с гауссовым размытием 110. */
.dark-panel__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: var(--radius-full);
  background: rgba(160, 195, 222, 0.47);
  filter: blur(110px);
  pointer-events: none;
}

.dark-panel__glow--top {
  top: -232px;
  inset-inline-start: -256px;
}

.dark-panel__glow--bottom {
  top: 685px;
  inset-inline-start: 819px;
}

/* Пунктирные линии. Файл нарисован без сохранения пропорций, поэтому
   растягивается за размером слоя. На десктопе слой повторяет пропорции
   рисунка, и растяжения не видно. До десктопа панель вдвое уже: слой с
   десктопными размерами сплющивал пунктир в вертикальные прямоугольники.
   Поэтому там слой лежит по низу панели во всю ширину, а его высота
   считается из пропорций самого файла - рисунок виден целиком и не тянется. */
.dark-panel__lines {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  aspect-ratio: 1267.05 / 648.273;
  background-image: var(--decor-image, url("../../img/algorithm-lines.svg"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.dark-panel__inner {
  position: relative;
}

@media (min-width: 768px) {
  .dark-panel { padding: var(--space-16) var(--space-10); }
}

@media (min-width: 1024px) {
  .dark-panel { padding: var(--space-24) var(--space-16); }

  /* Десктопная посадка слоя из макета. */
  .dark-panel__lines {
    top: 180px;
    inset-inline-end: var(--space-8);
    bottom: auto;
    inset-inline-start: var(--space-8);
    height: 642px;
    aspect-ratio: auto;
  }
}