/* ════════════════════════════════════════════════════════════════
   dlya-kogo.css — посадка «Кому подходит».
   Опирается на home.css + tarify.css (та же палитра/переменные).
   Уникальное здесь: карточки ролей «боль → что даёт» и мелкие добивки.
   ════════════════════════════════════════════════════════════════ */

/* ──────── ПО РОЛЯМ: карточки боль → что даёт ──────── */
.dk-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dk-role {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, rgba(22,27,39,0.6) 100%);
  border: 1px solid var(--border);
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.dk-role:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-3px); }
.dk-role-tag {
  align-self: flex-start;
  font-family: 'DM Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; color: #a5b4fc;
  padding: 4px 11px; border-radius: 100px;
  background: var(--accent-dim); border: 1px solid rgba(99,102,241,0.30);
  margin-bottom: 14px;
}
.dk-role-name {
  font-size: 18px; font-weight: 600; letter-spacing: -0.3px;
  color: var(--text); margin-bottom: 18px;
}
.dk-role-pain,
.dk-role-gain { display: flex; flex-direction: column; gap: 6px; }
.dk-role-pain { margin-bottom: 16px; }
.dk-role-label {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.dk-role-pain .dk-role-label { color: #ef4444; }
.dk-role-gain .dk-role-label { color: var(--green); }
.dk-role-pain p,
.dk-role-gain p { font-size: 14.5px; line-height: 1.55; color: var(--muted2); }
.dk-role-gain { margin-top: auto; }
.dk-role-gain p a { color: var(--accent); }
.dk-role-gain p a:hover { color: var(--accent-2); }

/* ──────── ПО НИШАМ: подпись под карточками ──────── */
.dk-niche-note {
  margin: 26px auto 0; max-width: 720px; text-align: center;
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.dk-niche-note a { color: var(--accent); }
.dk-niche-note a:hover { color: var(--accent-2); }

/* ──────── CTA: ссылка на демо (как на /kak-rabotaet) ──────── */
.dk-cta-demo { margin: 26px auto 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.dk-cta-demo a { color: var(--accent); }
.dk-cta-demo a:hover { color: var(--accent-2); }

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