/*
 * instrumenty.css — хаб инструментов (/instrumenty/). Scoped: .dsinst-*
 * Канон Data Seller: токены var(--ds-*), Manrope заголовки, зелёный акцент
 * (var(--ds-purple) = бренд-грин). Адаптив: 980 / 700 / 440.
 */

.dsinst-page { font-family: var(--ds-font); color: var(--ds-text); background: var(--ds-bg); }
.dsinst-wrap { max-width: var(--ds-content); margin: 0 auto; padding: 0 var(--ds-gutter); }

/* ── Секции ── */
.dsinst-section { padding: var(--ds-space-14) 0; }
.dsinst-section + .dsinst-section { padding-top: 0; }
.dsinst-section--soft { background: var(--ds-bg-soft); padding: var(--ds-space-14) 0; margin: var(--ds-space-4) 0; }
.dsinst-section--soft + .dsinst-section { padding-top: var(--ds-space-14); }

.dsinst-h2 {
  font-family: var(--ds-font-display);
  font-size: var(--fs-h2); font-weight: 700;
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  color: var(--ds-navy); margin: 0 0 var(--ds-space-3);
}
.dsinst-h2--flush { margin: 0; }
.dsinst-sub { font-size: var(--fs-body); color: var(--ds-muted); margin: 0 0 var(--ds-space-8); max-width: 720px; line-height: 1.6; }

/* ── HERO ── */
.dsinst-hero { padding: var(--ds-space-12) 0 var(--ds-space-10); }
.dsinst-hero__title {
  font-family: var(--ds-font-display);
  font-size: var(--fs-h1); font-weight: 800;
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  color: var(--ds-navy); margin: 0 0 var(--ds-space-4); text-wrap: balance;
}
.dsinst-hero__lead { font-size: 18px; color: var(--ds-muted); margin: 0 0 var(--ds-space-6); max-width: 680px; line-height: 1.6; }
.dsinst-hero__cta { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.dsinst-hero__note { font-size: var(--fs-caption); color: var(--ds-muted); margin: 0; }

/* ── Сетки ── */
.dsinst-grid { display: grid; gap: var(--ds-space-5); }
.dsinst-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dsinst-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Карточка ── */
.dsinst-card {
  display: flex; flex-direction: column; gap: var(--ds-space-2);
  padding: var(--ds-space-6);
  background: var(--ds-bg);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
}
.dsinst-card__icon { width: 48px; height: 48px; margin-bottom: var(--ds-space-2); }
.dsinst-card__icon img { width: 48px; height: 48px; object-fit: contain; display: block; }
.dsinst-card__title { font-size: var(--fs-h4); font-weight: 700; color: var(--ds-navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsinst-card__desc { font-size: var(--fs-small); color: var(--ds-muted); line-height: 1.55; flex: 1; }
.dsinst-card__action { margin-top: var(--ds-space-2); font-size: var(--fs-small); font-weight: 600; color: var(--ds-purple); }
.dsinst-card__action--btn { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--ds-font); text-align: left; }
.dsinst-card__tag { margin-top: var(--ds-space-2); font-size: var(--fs-caption); font-weight: 600; color: var(--ds-ink); }

/* кликабельная карточка-ссылка (калькуляторы) */
a.dsinst-card--link { text-decoration: none; transition: transform var(--ds-dur-lift) var(--ds-ease-out), box-shadow var(--ds-dur-lift) var(--ds-ease-out), border-color var(--ds-dur-lift) var(--ds-ease-out); }
a.dsinst-card--link:hover { transform: translateY(var(--ds-lift-y)); box-shadow: var(--ds-shadow-card); border-color: var(--ds-purple); }
a.dsinst-card--link:hover .dsinst-card__action { color: var(--ds-purple-hover); }

.dsinst-card--soon { background: var(--ds-bg-soft); }
.dsinst-card--soon .dsinst-card__action--btn:hover { color: var(--ds-purple-hover); }
.dsinst-badge-soon {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ds-act-ink); background: var(--ds-act);
  padding: 2px 7px; border-radius: var(--ds-radius-badge); white-space: nowrap;
}

/* ── AI-Анализ SKU (платный блок) ── */
.dsinst-sku {
  display: grid; grid-template-columns: 1fr 300px; gap: var(--ds-space-8);
  align-items: start;
  padding: var(--ds-space-8);
  background: var(--ds-bg);
  border: 1.5px solid var(--ds-purple);
  border-radius: var(--ds-radius-zone);
  box-shadow: var(--ds-shadow-card);
}
.dsinst-sku__icon { display: inline-block; width: 52px; height: 52px; margin-bottom: var(--ds-space-3); }
.dsinst-sku__icon img { width: 52px; height: 52px; object-fit: contain; display: block; }
.dsinst-sku__head { display: flex; align-items: baseline; gap: var(--ds-space-3); flex-wrap: wrap; margin-bottom: var(--ds-space-3); }
.dsinst-sku__price { font-family: var(--ds-font-num); font-size: var(--fs-h3); font-weight: 700; color: var(--ds-purple); }
.dsinst-sku__once { font-size: var(--fs-small); color: var(--ds-muted); }
.dsinst-sku__lead { font-size: var(--fs-body); color: var(--ds-text); line-height: 1.6; margin: 0 0 var(--ds-space-4); max-width: 620px; }
.dsinst-sku__list { list-style: none; margin: 0 0 var(--ds-space-4); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dsinst-sku__list li { position: relative; padding-left: 26px; font-size: var(--fs-small); color: var(--ds-text); line-height: 1.5; }
.dsinst-sku__list li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ds-gain-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5' fill='none' stroke='%230B7A45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.dsinst-sku__excl { font-size: var(--fs-caption); color: var(--ds-muted); line-height: 1.55; margin: 0 0 var(--ds-space-3); }
.dsinst-sku__honest { font-size: var(--fs-caption); color: var(--ds-ink); line-height: 1.55; margin: 0; padding: 10px 14px; background: var(--ds-bg-soft); border-radius: var(--ds-radius-sm); }

.dsinst-sku__aside {
  background: var(--ds-bg-soft); border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md); padding: var(--ds-space-6);
  position: sticky; top: 88px;
}
.dsinst-sku__aside-price { font-family: var(--ds-font-num); font-size: var(--fs-h2); font-weight: 800; color: var(--ds-navy); margin: 0 0 var(--ds-space-4); line-height: 1; }
.dsinst-sku__aside-price span { display: block; font-family: var(--ds-font); font-size: var(--fs-caption); font-weight: 500; color: var(--ds-muted); margin-top: 4px; }
.dsinst-sku__btn { width: 100%; justify-content: center; }
.dsinst-sku__credit { font-size: var(--fs-caption); color: var(--ds-ink); line-height: 1.5; margin: var(--ds-space-4) 0 0; }
.dsinst-sku__sub-note { font-size: var(--fs-caption); color: var(--ds-muted); line-height: 1.5; margin: var(--ds-space-2) 0 0; }

/* ── Нижний CTA (зелёная панель) ── */
.dsinst-final {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--ds-space-8);
  align-items: center;
  border-radius: var(--ds-radius-zone);
  padding: var(--ds-space-10);
  color: #fff;
  /* Канон зелёной панели (как .ds-ctaband__inner) — единое оформление CTA */
  background:
    radial-gradient(circle at 96% 80%, rgba(30, 222, 123, .22), transparent 30%),
    linear-gradient(135deg, #0D7A47 0%, #0A5E38 100%); /* AA: убран светлый стоп #13A35B под текстом */
  box-shadow: 0 20px 42px rgba(10, 94, 56, .28);
}
/* Точечная текстура по диагональным углам (канон) */
.dsinst-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.30) 1.4px, transparent 1.5px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(420px 230px at 100% 0%, #000, transparent 72%), radial-gradient(420px 230px at 0% 100%, #000, transparent 72%);
  mask-image: radial-gradient(420px 230px at 100% 0%, #000, transparent 72%), radial-gradient(420px 230px at 0% 100%, #000, transparent 72%);
}
.dsinst-final > * { position: relative; z-index: 1; }
.dsinst-final__title { font-family: var(--ds-font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-h2); color: #fff; margin: 0 0 var(--ds-space-3); }
.dsinst-final__text { font-size: var(--fs-body); color: #fff; line-height: 1.6; margin: 0 0 var(--ds-space-5); max-width: 480px; }
.dsinst-final__btn { background: #fff; color: var(--ds-navy); }
.dsinst-final__btn:hover { transform: translateY(var(--ds-lift-y)); box-shadow: 0 8px 24px rgba(16,25,54,.22); }
.dsinst-final__aside { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dsinst-final__aside li { position: relative; padding-left: 26px; font-size: var(--fs-small); color: #fff; line-height: 1.45; }
.dsinst-final__aside li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* ── AI-блок: метки списков / ссылка примера ── */
/* Два списка рядом (desktop): «Что входит» | «После подключения кабинета» */
.dsinst-sku__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-6); align-items: start; margin-bottom: var(--ds-space-4); }
.dsinst-sku__col + .dsinst-sku__col { border-left: 1px solid var(--ds-line); padding-left: var(--ds-space-6); }
.dsinst-sku__list-label { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-muted); margin: 0 0 var(--ds-space-3); }
.dsinst-sku__col .dsinst-sku__list { margin-bottom: 0; }
/* нейтральный (сине-серый) маркер второго списка — не минус и не «нет» */
.dsinst-sku__list--req li::before {
  background: var(--ds-mark-neutral); background-image: none;
  width: 7px; height: 7px; left: 5px; top: 8px; border-radius: 50%;
}
.dsinst-sku__example-link { display: block; width: 100%; margin-top: 10px; padding: 4px 0; background: none; border: none; cursor: pointer; font-family: var(--ds-font); font-size: var(--fs-small); font-weight: 600; color: var(--ds-purple); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.dsinst-sku__example-link:hover { color: var(--ds-purple-hover); }

/* ── Модал «пример анализа» ── */
.dsex { background: var(--ds-bg-soft); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); padding: var(--ds-space-5); margin-bottom: var(--ds-space-5); }
.dsex__h { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-navy); margin: var(--ds-space-4) 0 8px; }
.dsex__h:first-child { margin-top: 0; }
.dsex__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dsex__list li { font-size: var(--fs-small); color: var(--ds-text); line-height: 1.5; padding-left: 16px; position: relative; }
.dsex__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ds-purple); }
.dsex__list b { color: var(--ds-navy); }
.dsex__sections { font-size: var(--fs-small); color: var(--ds-muted); line-height: 1.6; margin: 0; }
.dsex__note { font-size: var(--fs-caption); color: var(--ds-muted); margin: var(--ds-space-4) 0 0; font-style: italic; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  a.dsinst-card--link, .dsinst-final__btn { transition: none; }
  a.dsinst-card--link:hover, .dsinst-final__btn:hover { transform: none; }
}

/* ── АДАПТИВ 980 ── */
@media (max-width: 980px) {
  .dsinst-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dsinst-sku { grid-template-columns: 1fr; }
  .dsinst-sku__aside { position: static; }
  .dsinst-sku__cols { grid-template-columns: 1fr; gap: 0; }
  .dsinst-sku__col + .dsinst-sku__col { border-left: none; padding-left: 0; border-top: 1px solid var(--ds-line); margin-top: var(--ds-space-4); padding-top: var(--ds-space-4); }
  .dsinst-final { grid-template-columns: 1fr; gap: var(--ds-space-6); }
}

/* ── АДАПТИВ 700 ── */
@media (max-width: 700px) {
  .dsinst-grid--3 { grid-template-columns: 1fr; }
  .dsinst-hero__title { font-size: clamp(30px, 7vw, 42px); }
}

/* ── АДАПТИВ 440 ── */
@media (max-width: 440px) {
  .dsinst-grid--4 { grid-template-columns: 1fr; }
}