/* Section 10: Solutions row.
   База = фрейм 1600 (122:389168); переопределения — из фреймов 1200/1024/768/430/375/320.
   Все числа сняты из Figma, свои значения не добавлялись. */

.sol {
  position: relative;
  overflow: hidden;
  background: transparent;   /* фон общий, своей подложки нет */
  font-family: "Inter", sans-serif;
  padding-bottom: 72px;

  /* --- 1600 --- */
  --sol-head-h: 280px;        /* верх карточек = 280 в макете */
  --sol-head-pad: 398px;
  --sol-h2-pad: 40px;
  --sol-sub-pad: 31px;

  --sol-card-w: 408px;
  --sol-card-h: 312px;
  --sol-card-r: 24px;
  --sol-card-pad: 20px;
  --sol-text-w: 359px;
  --sol-text-gap: 16px;
  --sol-title-size: 24px;
  --sol-title-lh: 28px;
  --sol-title-ls: -0.24px;
  --sol-desc-size: 16px;
  --sol-desc-lh: 24px;
  --sol-desc-ls: 0px;
  --sol-desc-lh-active: 24px;
  --sol-desc-color: #cac1cf;

  --sol-chip-font: 12px;
  --sol-chip-lh: 14px;
  --sol-chip-px: 12px;
  --sol-chip-py: 8px;
  --sol-chip-bw: 1px;
  --sol-chips-x: 20px;
  --sol-chips-y: 20px;

  --sol-actions-inset: 20px;
  --sol-btn-h: 42px;
  --sol-btn-gap: 4px;
  --sol-btn-font: 16px;
  --sol-btn-lh: 20px;
  --sol-btn-px: 40px;
  --sol-btn-r: 14px;

  --sol-gap-x: 24px;          /* между карточками */
  --sol-gap-y: 40px;          /* между рядами */
  --sol-row1-ml: 0px;         /* отступы рядов от левого края трека */
  --sol-row2-ml: 234px;
  /* стартовая прокрутка: композиция из макета относительно центра вьюпорта */
  --sol-init-scroll: calc(1166px - 50vw);

  --sol-blur: 20.75px;
  --sol-blur-soft: 2.95px;

  --sol-glow-h: 2249.4px;     /* полный бокс SVG (эллипс 668x1046 + вынос блюра 601.7) */
  --sol-glow-x: 13px;         /* смещение центра свечения от центра секции */
}

/* --- фон-свечение --- */
.sol-glow {
  position: absolute;
  top: -501.7px;              /* 100px (top эллипса) - 601.7px (вынос блюра) */
  left: calc(50% + var(--sol-glow-x));
  transform: translateX(-50%);
  width: 1871.4px;
  height: var(--sol-glow-h);
  pointer-events: none;
  z-index: 0;
}
.sol-glow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- заголовок --- */
.sol-header {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-height: var(--sol-head-h);
  height: auto;
  padding: 72px 24px 64px;  /* боковые поля страницы; зазор сабтекст→карточки 64 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.sol-title {
  margin: 0;
  box-sizing: border-box;
  max-width: 1020px;      /* строки соразмерны, без километровой первой */
  margin: 0 auto;
  padding: 0;
  text-wrap: balance;
  font-weight: 600;
  font-size: 40px;               /* правка Alexa: под общую типографику секций */
  line-height: 44px;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  text-align: center;
  color: #eaeaea;
}
.sol-sub {
  margin: 0;
  box-sizing: border-box;
  max-width: 860px;   /* две строки как в фигме, без вдовы */
  margin: 0 auto;
  padding: 0;
  text-wrap: balance;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #eaeaea;
}

/* --- лента карточек --- */
.sol-scroller {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sol-scroller::-webkit-scrollbar { display: none; }

.sol-track {
  display: flex;
  flex-direction: column;
  gap: var(--sol-gap-y);
  width: max-content;
}
.sol-row {
  display: flex;
  gap: var(--sol-gap-x);
}
.sol-row--1 { margin-left: var(--sol-row1-ml); }
.sol-row--2 { margin-left: var(--sol-row2-ml); }

/* --- карточка --- */
.sol-card {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 var(--sol-card-w);
  width: var(--sol-card-w);
  height: var(--sol-card-h);
  border-radius: var(--sol-card-r);
  overflow: hidden;
  background: rgba(171, 171, 171, 0.32);
  -webkit-backdrop-filter: blur(var(--sol-blur));
  backdrop-filter: blur(var(--sol-blur));
}
.sol-card--soft {
  -webkit-backdrop-filter: blur(var(--sol-blur-soft));
  backdrop-filter: blur(var(--sol-blur-soft));
}
.sol-card--active {
  background: #eaeaea;
  -webkit-backdrop-filter: blur(var(--sol-blur));
  backdrop-filter: blur(var(--sol-blur));
}

.sol-card-text {
  position: absolute;
  left: var(--sol-card-pad);
  top: var(--sol-card-pad);
  width: var(--sol-text-w);
  display: flex;
  flex-direction: column;
  gap: var(--sol-text-gap);
}
.sol-card-title {
  margin: 0;
  font-weight: 400;
  font-size: var(--sol-title-size);
  line-height: var(--sol-title-lh);
  letter-spacing: var(--sol-title-ls);
  text-transform: uppercase;
  white-space: nowrap;
  color: #eaeaea;
}
.sol-card-desc {
  margin: 0;
  font-weight: 400;
  font-size: var(--sol-desc-size);
  line-height: var(--sol-desc-lh);
  letter-spacing: var(--sol-desc-ls);
  color: var(--sol-desc-color);
}
.sol-card--active .sol-card-title { color: #171719; }
.sol-card--active .sol-card-desc {
  color: #171719;
  line-height: var(--sol-desc-lh-active);
  letter-spacing: 0;
  width: 321px;               /* 1600: текст активной карточки уже колонки */
}

/* --- чипсы --- */
.sol-chips {
  position: absolute;
  left: var(--sol-chips-x);
  bottom: var(--sol-chips-y);
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sol-chips li {
  box-sizing: border-box;
  border: var(--sol-chip-bw) solid #eaeaea;
  border-radius: 23px;
  padding: var(--sol-chip-py) var(--sol-chip-px);
  font-weight: 400;
  font-size: var(--sol-chip-font);
  line-height: var(--sol-chip-lh);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #eaeaea;
}
.sol-chips--m { display: none; }   /* мобильный набор чипсов включается на <=430 */

/* --- кнопки активной карточки --- */
.sol-actions {
  position: absolute;
  left: var(--sol-actions-inset);
  right: var(--sol-actions-inset);
  bottom: var(--sol-actions-inset);
  display: flex;
  gap: var(--sol-btn-gap);
}
.sol-btn {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 1px;
  height: var(--sol-btn-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sol-btn-px);
  border-radius: var(--sol-btn-r);
  font-weight: 600;
  font-size: var(--sol-btn-font);
  line-height: var(--sol-btn-lh);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.sol-btn--light { background: #f7f7f7; color: #2c2c2c; }
.sol-btn--dark  { background: #171719; color: #eaeaea; }

/* пробник: JS читает стартовую прокрутку из ширины (отрицательное схлопывается в 0) */
.sol-probe {
  position: absolute;
  visibility: hidden;
  height: 0;
  width: var(--sol-init-scroll);
}

/* ============ 1200 ============ */
@media (max-width: 1200px) {
  .sol {
    --sol-head-h: 304px;
    --sol-head-pad: 271px;
    --sol-h2-pad: 0px;
    --sol-init-scroll: calc(1134px - 50vw);
    --sol-glow-h: 2149.4px;   /* эллипс 668x946 */
  }
}

/* ============ 1024 ============ */
@media (max-width: 1024px) {
  .sol {
    --sol-head-h: 304px;
    --sol-head-pad: 165px;

    --sol-card-w: 400px;
    --sol-card-h: 248px;
    --sol-title-size: 20px;
    --sol-title-lh: 24px;
    --sol-title-ls: -0.2px;
    --sol-desc-size: 13px;
    --sol-desc-lh: 20px;
    --sol-desc-lh-active: 20px;
    --sol-desc-color: #eaeaea;

    --sol-actions-inset: 12px;

    --sol-gap-x: 16px;
    --sol-gap-y: 20px;
    --sol-row1-ml: 0px;
    --sol-row2-ml: 150px;
    --sol-init-scroll: calc(803px - 50vw);

    --sol-blur-soft: 20.75px; /* на планшете у всех карточек один блюр */
    --sol-glow-h: 2024.4px;   /* эллипс 668x821 */
  }
  .sol-card--active .sol-card-desc { width: 328px; }
}

/* ============ 768 ============ */
@media (max-width: 1023px) {
  .sol {
    --sol-head-h: 296px;
    --sol-head-pad: 56px;
    --sol-init-scroll: calc(790px - 50vw);
    --sol-glow-h: 1951.4px;   /* эллипс 668x748 */
  }
}

/* ============ 430 ============ */
@media (max-width: 719px) {
  .sol {
    --sol-head-h: 415px;
    --sol-head-pad: 18px;
    --sol-sub-pad: 0px;

    --sol-card-w: 316px;
    --sol-card-h: 404px;
    --sol-card-pad: 16px;
    --sol-text-w: 280px;
    --sol-title-size: 24px;
    --sol-title-lh: 28px;
    --sol-title-ls: -0.24px;
    --sol-desc-size: 16px;
    --sol-desc-lh: 20px;
    --sol-desc-ls: -0.16px;
    --sol-desc-lh-active: 24px;
    --sol-desc-color: #cac1cf;

    --sol-chips-x: 12px;
    --sol-chips-y: 12px;

    --sol-actions-inset: 8px;
    --sol-btn-h: 56px;

    --sol-gap-x: 12px;
    --sol-gap-y: 30px;
    --sol-row1-ml: 215px;
    --sol-row2-ml: 0px;
    /* в DOM перед светлой карточкой 3 тёмных (в макете 2) —
       прокрутка сдвинута на карточку, видимая композиция совпадает с макетом */
    --sol-init-scroll: calc(1358px - 50vw);

    --sol-blur: 2.95px;
    --sol-blur-soft: 2.95px;

    --sol-glow-h: 2375.4px;   /* эллипс 668x1172 */
    --sol-glow-x: 14px;
  }
  .sol-card-title { white-space: normal; }
  .sol-card--active .sol-card-desc { width: auto; }
  .sol-chips--d { display: none; }
  .sol-chips--m { display: flex; }
  .sol-actions { flex-direction: column; }
  /* в колонке главная ось — вертикаль: высоту кнопки держит flex-basis */
  .sol-btn { flex: 0 0 var(--sol-btn-h); height: auto; }
}

/* ============ 375 ============ */
@media (max-width: 375px) {
  .sol {
    --sol-head-h: 471px;
    --sol-head-pad: 27px;
    --sol-init-scroll: calc(1358px - 50vw);
    --sol-glow-h: 2249.4px;   /* эллипс 668x1046, как на 1600 */
    --sol-glow-x: 13.5px;
  }
}

/* ============ 320 (макет 320, порог — до следующего типового 360) ============ */
@media (max-width: 359px) {
  .sol {
    --sol-head-h: 472px;
    --sol-head-pad: 26px;

    --sol-card-w: 244px;
    --sol-card-h: 316px;
    --sol-card-r: 18.788px;
    --sol-card-pad: 12px;
    --sol-text-w: 220px;
    --sol-text-gap: 12px;
    --sol-title-size: 18px;
    --sol-title-lh: 22px;
    --sol-title-ls: -0.18px;
    --sol-desc-size: 12px;
    --sol-desc-lh: 18px;
    --sol-desc-ls: -0.12px;
    --sol-desc-lh-active: 18px;

    --sol-chip-font: 9.39px;
    --sol-chip-lh: 10.959px;
    --sol-chip-px: 9.394px;
    --sol-chip-py: 6.263px;
    --sol-chip-bw: 0.783px;
    --sol-chips-x: 8px;
    --sol-chips-y: 8.95px;

    --sol-actions-inset: 6px;
    --sol-btn-gap: 3.131px;
    --sol-btn-font: 12.53px;
    --sol-btn-lh: 15.656px;
    --sol-btn-px: 25.05px;

    --sol-gap-x: 9.394px;
    --sol-gap-y: 20px;
    --sol-row1-ml: 168.305px;
    --sol-row2-ml: 0px;
    --sol-init-scroll: calc(1050.98px - 50vw);

    --sol-blur: 2.309px;
    --sol-blur-soft: 2.309px;

    --sol-glow-h: 2249.4px;
    --sol-glow-x: 13px;
  }
  /* 320: у активной карточки заголовок 20px (в макете крупнее тёмных) */
  .sol-card--active .sol-card-title {
    font-size: 20px;
    letter-spacing: -0.2px;
  }
  /* 320: колонка кнопок фиксированной высоты 88, кнопки делят её поровну */
  .sol-actions { height: 88px; }
  .sol-btn { flex: 1 1 0; height: auto; }
}

/* --- Наведение на карточку: она светлеет, чипсы уступают место кнопкам --- */
.sol-card {
  transition: background-color .26s ease, backdrop-filter .26s ease;
}
.sol-card-title,
.sol-card-desc { transition: color .26s ease; }

.sol-chips {
  transition: opacity .18s ease, transform .26s ease;
}
.sol-actions {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .26s cubic-bezier(.22,.61,.36,1), visibility .22s;
}

.sol-card:hover {
  background: #eaeaea;
}
.sol-card:hover .sol-card-title,
.sol-card:hover .sol-card-desc { color: #171719; }
.sol-card:hover .sol-card-desc { /* только цвет: раскладка текста не меняется */ }
.sol-card:hover .sol-chips {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.sol-card:hover .sol-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sol-card, .sol-chips, .sol-actions, .sol-card-title, .sol-card-desc { transition: none; }
}