/* ============================================================
   Блок «Механизм инвестирования» — перенос 1:1 из process1.
   Отличие по просьбе: фон секции НЕ серый (var(--paper)), а
   прозрачный — за ним видно анимированное световое поле.
   Значения — как в оригинале (сняты с живой страницы process1):
     секция .tight padding 56px; сетка 3 колонки, gap 22px
     карточка белая, рамка #dfe3ec, radius 18, номер 30/800 #000f9f
     плашка «Контроль» белая, левая синяя линия 3px #000f9f
   Изолировано под .rk-mech.
   ============================================================ */
.rk-mech, .rk-mech * { box-sizing: border-box; }
.rk-mech {
  position: relative;
  /* full-bleed: контент по ширине как hero/ПИФ (1208), фон прозрачный */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 50px 0;
  background: transparent;
}
.rk-mech .mech-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }

.rk-mech .mech-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 32px;
}
.rk-mech .mech-head-l { max-width: 620px; }
.rk-mech .mech-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #000b73;
  display: inline-flex; align-items: center; gap: 11px;
}
.rk-mech .mech-eyebrow::before { content: ""; width: 30px; height: 1.5px; background: #000f9f; display: inline-block; }
.rk-mech .mech-h {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em;
  color: #14161d; margin: 10px 0 0;
}
.rk-mech .mech-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; color: #14161d;
  background: transparent; border: 1px solid #dfe3ec; border-radius: 999px;
  padding: 13px 24px; cursor: pointer; text-decoration: none; line-height: 1;
  transition: border-color .2s, color .2s;
}
.rk-mech .mech-btn:hover { border-color: #000f9f; color: #000f9f; }
.rk-mech .mech-btn svg { width: 16px; height: 16px; flex: none; }

.rk-mech .mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rk-mech .mech-card {
  background: #fff; border: 1px solid #dfe3ec; border-radius: 18px;
  padding: 26px 26px 28px; box-shadow: 0 1px 3px rgba(20, 22, 29, .05);
}
.rk-mech .mech-card .mn {
  font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 800;
  line-height: 1; letter-spacing: -.03em; color: #000f9f; margin-bottom: 20px;
}
.rk-mech .mech-card h4 { font-family: 'Montserrat', sans-serif; margin: 0; font-size: 18px; font-weight: 700; color: #14161d; }
.rk-mech .mech-card p { font-family: 'Montserrat', sans-serif; margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #474b58; }

.rk-mech .mech-control {
  display: flex; align-items: flex-start; gap: 16px; margin-top: 22px;
  background: #fff; border: 1px solid #dfe3ec; border-left: 3px solid #000f9f;
  border-radius: 12px; padding: 24px 28px;
}
.rk-mech .mech-control > svg { width: 24px; height: 24px; color: #000f9f; flex: none; }
.rk-mech .mech-control b { font-family: 'Montserrat', sans-serif; display: block; font-size: 16px; font-weight: 700; color: #14161d; margin-bottom: 4px; }
.rk-mech .mech-control p { font-family: 'Montserrat', sans-serif; margin: 0; font-size: 13.5px; line-height: 1.55; color: #474b58; }

@media (max-width: 900px) { .rk-mech .mech-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .rk-mech { padding: 40px 0; } }

/* ============================================================
   Плашка «Портфель» («Не знаете, с чего начать?») — 1:1 из site2,
   фон прозрачный (световое поле), кнопка ведёт на /portfolio.
   ============================================================ */
.rk-promo, .rk-promo * { box-sizing: border-box; }
.rk-promo {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 50px 0; background: transparent;
}
.rk-promo .promo-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
.rk-promo .promo-plate {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: #fff; border: 1px solid #dfe3ec; border-left: 4px solid #000f9f;
  border-radius: 12px; padding: 30px 34px;
}
.rk-promo .promo-text { flex: 1; min-width: 260px; }
.rk-promo .promo-text h3 { font-family: 'Montserrat', sans-serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: #14161d; margin: 0 0 8px; letter-spacing: -.01em; }
.rk-promo .promo-text p { font-family: 'Montserrat', sans-serif; margin: 0; font-size: 15px; line-height: 1.55; color: #474b58; }
.rk-promo .promo-btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600;
  padding: 16px 30px; border-radius: 999px; background: #000f9f; color: #fff;
  text-decoration: none; transition: background .2s, transform .2s;
}
.rk-promo .promo-btn:hover { background: #000b73; transform: translateY(-1px); }
.rk-promo .promo-btn svg { width: 16px; height: 16px; flex: none; }

/* Узкие экраны: плашка CTA не должна вылезать за вьюпорт — кнопка на всю
   ширину по центру, у текста снимаем min-width (иначе распирает плашку). */
@media (max-width: 560px) {
  .rk-promo .promo-plate { padding: 24px; }
  .rk-promo .promo-text { min-width: 0; }
  .rk-promo .promo-btn { width: 100%; justify-content: center; }
}