/* Слайдер способов открывания — 545:11665: фон #f7f7f7, карточки 426×570, промежуток 25 */
.oslider {
  background: var(--paper);
  padding-block: 100px;
  padding-inline: var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.oslider__head { display: flex; flex-direction: column; gap: 20px; padding-inline-end: var(--gutter); }
.oslider__title {
  font-size: clamp(26px, 2.7083vw, 52px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--ink);
}
.oslider__sub {
  /* в макете 806px и ровно две строки; в браузере глифы шире — даём 840px,
     чтобы сохранить две строки, иначе весь ряд карточек уезжает на 29px */
  width: min(840px, 100%);
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

/* прокрутка вбок средствами браузера: работает с клавиатуры и без скриптов */
.oslider__track {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.oslider__track::-webkit-scrollbar { display: none; }
.oslider__track::after { content: ""; flex: 0 0 var(--gutter); }

.ocard {
  flex: 0 0 426px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
}
/* Схемы анимированные: SVG со своей анимацией внутри, без скриптов.
   Панель тёмная — так схема читается, а золото на ней работает как акцент. */
.ocard__diagram { height: 309px; background: var(--ink-deep); }
.ocard__diagram img { width: 100%; height: 100%; object-fit: cover; }

.ocard__body { display: flex; flex-direction: column; gap: 20px; padding: 20px; flex: 1 1 auto; }
.ocard__name {
  /* в макете у первой карточки текстовый узел 275px, у остальных 386px */
  width: min(386px, 100%);
  font-size: clamp(20px, 1.3542vw, 26px);
  font-weight: 900;
  line-height: var(--lh-h3);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--paper);
}
.ocard__name--narrow { width: min(275px, 100%); }
.ocard__text {
  width: min(345px, 100%);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: 1px;
  color: var(--paper);
  /* тень из макета убрана: на тёмной карточке она читалась как грязный дубль строки */
}
.ocard__btn {
  /* auto вместо 30px из макета: заголовки карточек разной длины, и на
     фиксированном отступе кнопки в ряду стоят на разной высоте */
  margin-top: auto;
  padding-top: 10px;     /* минимальный зазор от текста, если карточка низкая */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--r-xl);
  background: var(--gold-grad);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: 1px;
  color: var(--ink);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ocard__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(184, 138, 52, 0.35); }
.ocard__btn img { flex: 0 0 20px; width: 20px; }

/* полосы прокрутки 545:12096 */
.oslider__bars { display: flex; gap: 10px; }
.oslider__bars span { width: 40px; height: 5px; border-radius: var(--r-pill); background: #a4a9a5; }
.oslider__bars span:first-child { background: var(--gold); }

@media (max-width: 599px) {
  .oslider { padding-block: 56px; gap: 32px; }
  .ocard { flex-basis: min(300px, 82vw); }
  .ocard__diagram { height: 220px; }
}