/* ═══════════════════════════════════════════════════════════════
   ЛЕНДИНГ: Маткапитал на образование
   Подключается только при выборе шаблона "Статья: Маткапитал на образование"
   ═══════════════════════════════════════════════════════════════ */

/* ── Сброс отступов для лендинга ───────────────────────────────── */
.lp-hero,
.lp-section,
.lp-cta-banner,
.lp-sources {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
.lp-hero {
  position: relative;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0F2A1A 100%);
  padding: 80px 0 0;
  overflow: hidden;
}
.lp-hero__bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: .18;
}
.lp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.85) 0%, rgba(15,23,42,.96) 100%);
}
.lp-hero__container {
  position: relative;
  z-index: 1;
}
.lp-hero__inner {
  max-width: 720px;
  padding-bottom: 56px;
}
.lp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(16, 185, 129, .15);
  border: 1px solid rgba(16, 185, 129, .35);
  color: #34D399;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 22px;
}
.lp-hero__title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: #F1F5F9;
  line-height: 1.18;
  margin: 0 0 20px;
  letter-spacing: -.02em;
}
.lp-hero__lead {
  font-size: 17px;
  color: rgba(241, 245, 249, .72);
  line-height: 1.7;
  margin: 0 0 36px;
  max-width: 600px;
}
.lp-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* Metrics strip */
.lp-hero__metrics-wrap {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .04);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 24px 0;
}
.lp-hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.lp-metric {
  padding: 16px 24px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.lp-metric:last-child { border-right: none; }
.lp-metric__val {
  font-family: 'Manrope', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -.03em;
}
.lp-metric__val--green  { color: #34D399; }
.lp-metric__val--red    { color: #F87171; }
.lp-metric__val--blue   { color: #93C5FD; }
.lp-metric__val--amber  { color: #FCD34D; }
.lp-metric__lbl {
  font-size: 12px;
  color: rgba(241, 245, 249, .65);
  line-height: 1.45;
  margin-bottom: 3px;
}
.lp-metric__src {
  font-size: 10px;
  color: rgba(241, 245, 249, .35);
  font-style: italic;
}

@media (max-width: 768px) {
  .lp-hero { padding-top: 56px; }
  .lp-hero__metrics { grid-template-columns: repeat(2, 1fr); }
  .lp-metric { border-bottom: 1px solid rgba(255,255,255,.08); }
  .lp-metric:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
  .lp-metric:nth-child(even) { border-right: none; }
  .lp-metric:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
  .lp-metric__val { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════════
   КНОПКИ
   ════════════════════════════════════════════════════════════════ */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, opacity .15s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1;
}
.lp-btn:hover { transform: translateY(-1px); opacity: .9; }
.lp-btn--primary {
  background: #2563EB;
  color: #fff;
  box-shadow: 0 4px 18px rgba(37, 99, 235, .38);
}
.lp-btn--ghost {
  background: rgba(255,255,255,.08);
  color: rgba(241,245,249,.85);
  border: 1px solid rgba(255,255,255,.18);
}
.lp-btn--white {
  background: #fff;
  color: #1D4ED8;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.lp-btn--lg {
  font-size: 16px;
  padding: 16px 32px;
  border-radius: 12px;
}

/* ════════════════════════════════════════════════════════════════
   ОБЩИЕ БЛОКИ СЕКЦИЙ
   ════════════════════════════════════════════════════════════════ */
.lp-section {
  padding: 80px 0;
}
@media (max-width: 768px) { .lp-section { padding: 56px 0; } }

/* Номер секции */
.lp-num {
  font-family: 'Manrope', sans-serif;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: rgba(37, 99, 235, .06);
  letter-spacing: -.04em;
  margin-bottom: -28px;
  display: block;
  user-select: none;
}
.lp-num--light  { color: rgba(255,255,255,.06); }
.lp-num--red    { color: rgba(239, 68, 68, .08); }
.lp-num--purple { color: rgba(139, 92, 246, .08); }
.lp-num--green  { color: rgba(16, 185, 129, .08); }

/* Заголовок секции */
.lp-section__h {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  margin: 0 0 20px;
  letter-spacing: -.02em;
}
.lp-section__h--light { color: #F1F5F9; }

/* Текст секции */
.lp-section__body {
  font-size: 16px;
  line-height: 1.8;
  color: #334155;
}
.lp-section__body--light { color: rgba(241,245,249,.75); }
.lp-section__body--center { max-width: 660px; margin-left: auto; margin-right: auto; }
.lp-section__body p    { margin-bottom: 14px; }
.lp-section__body ul,
.lp-section__body ol   { padding-left: 22px; margin-bottom: 14px; text-align: left; }
.lp-section__body li   { margin-bottom: 7px; }
.lp-section__body strong { color: #0F172A; font-weight: 700; }
.lp-section__body p:last-child { margin-bottom: 0; }
.lp-section__body--light strong { color: #fff; }

/* Центрированный заголовок блока */
.lp-section__header-centered {
  max-width: 800px;
  margin: 0 auto 48px;
}

/* ════════════════════════════════════════════════════════════════
   SPLIT — двухколонный макет
   ════════════════════════════════════════════════════════════════ */
.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.lp-split--rev { direction: rtl; }
.lp-split--rev > * { direction: ltr; }
.lp-split--wide-text { grid-template-columns: 55% 1fr; }

@media (max-width: 900px) {
  .lp-split,
  .lp-split--wide-text { grid-template-columns: 1fr; gap: 36px; }
  .lp-split--rev { direction: ltr; }
}

/* ════════════════════════════════════════════════════════════════
   INTRO
   ════════════════════════════════════════════════════════════════ */
.lp-section--intro {
  padding: 56px 0 40px;
  background: #fff;
}
.lp-intro-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.8;
  color: #1E293B;
}
.lp-intro-body p { margin-bottom: 16px; }
.lp-intro-body p:last-child { margin-bottom: 0; }
.lp-intro-body strong { color: #0F172A; font-weight: 700; }
.lp-intro-body ul,
.lp-intro-body ol { text-align: left; padding-left: 22px; margin-bottom: 14px; }
.lp-intro-body li { margin-bottom: 7px; }

/* ════════════════════════════════════════════════════════════════
   SECTION 1: НАУКА (белый фон, зелёный акцент)
   ════════════════════════════════════════════════════════════════ */
.lp-section--science {
  background: #F8FAFC;
  border-top: 4px solid #10B981;
}

/* ════════════════════════════════════════════════════════════════
   SECTION 2: ЖИЛЬЁ (тёплый жёлтый фон)
   ════════════════════════════════════════════════════════════════ */
.lp-section--housing {
  background: linear-gradient(135deg, #FFFBEB, #FFF7ED);
  border-top: 4px solid #F59E0B;
}

/* ════════════════════════════════════════════════════════════════
   SECTION 3: СТАТИСТИКА (тёмный фон)
   ════════════════════════════════════════════════════════════════ */
.lp-section--stats {
  background: #0F172A;
  border-top: 4px solid #2563EB;
}
.lp-section--stats .art-chart {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
.lp-section--stats .art-chart__title { color: #F1F5F9; }
.lp-section--stats .art-chart__source { color: rgba(241,245,249,.45); }
.lp-section--stats .art-chart__legend-item { color: rgba(241,245,249,.7); }

.lp-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.lp-win-badge {
  margin-bottom: 12px;
  font-size: 13px;
}
@media (max-width: 900px) {
  .lp-charts-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   SECTION 4: ЮРИДИЧЕСКИЕ РИСКИ (розовый фон + карточки)
   ════════════════════════════════════════════════════════════════ */
.lp-section--legal {
  background: #FFF5F5;
  border-top: 4px solid #EF4444;
}
.lp-legal-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-legal-card {
  background: #fff;
  border: 1.5px solid #FED7D7;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: box-shadow .18s;
}
.lp-legal-card:hover { box-shadow: 0 4px 16px rgba(239,68,68,.1); }
.lp-legal-card__ico {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}
.lp-legal-card__title {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #991B1B;
  margin-bottom: 3px;
}
.lp-legal-card__body {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.5;
}
/* Последняя карточка — положительная (зелёная) */
.lp-legal-card--vs {
  border-color: #A7F3D0;
  background: #F0FDF4;
}
.lp-legal-card--vs .lp-legal-card__title { color: #065F46; }

/* ════════════════════════════════════════════════════════════════
   SECTION 5: ОНЛАЙН-ШКОЛЫ (фиолетовый фон, карточки)
   ════════════════════════════════════════════════════════════════ */
.lp-section--schools {
  background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
  border-top: 4px solid #8B5CF6;
}
.lp-school-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.lp-school-card {
  background: #fff;
  border: 1.5px solid #DDD6FE;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.lp-school-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(139,92,246,.15);
}
.lp-school-card__ico {
  width: 56px;
  height: 56px;
  background: rgba(139,92,246,.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #7C3AED;
}
.lp-school-card__title {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1E1B4B;
  margin-bottom: 8px;
}
.lp-school-card__body {
  font-size: 13.5px;
  color: #4C1D95;
  line-height: 1.55;
  opacity: .8;
}
.lp-schools-logos {
  margin-top: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-schools-logos__label {
  font-size: 12px;
  color: #6D28D9;
  font-weight: 600;
  opacity: .7;
}
.lp-schools-logos__name {
  font-size: 14px;
  font-weight: 700;
  color: #4C1D95;
  background: rgba(139,92,246,.1);
  padding: 4px 14px;
  border-radius: 100px;
}
.lp-schools-logos__sep {
  color: rgba(109,40,217,.4);
  font-size: 16px;
}

@media (max-width: 768px) {
  .lp-school-cards { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   SECTION 6: ИТОГ (белый, цитатный стиль)
   ════════════════════════════════════════════════════════════════ */
.lp-section--conclusion {
  background: #fff;
  border-top: 4px solid #10B981;
}
.lp-conclusion {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}
.lp-conclusion__deco {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 180px;
  line-height: 1;
  color: rgba(16,185,129,.07);
  user-select: none;
  pointer-events: none;
}
.lp-conclusion__h {
  font-size: clamp(24px, 3vw, 36px);
  color: #0F172A;
}
.lp-conclusion__body {
  font-size: 17px;
  color: #334155;
  margin-bottom: 36px;
  text-align: left;
}
.lp-section--conclusion .lp-num {
  font-size: 80px;
  margin-bottom: -20px;
}

/* ════════════════════════════════════════════════════════════════
   CTA BANNER
   ════════════════════════════════════════════════════════════════ */
.lp-cta-banner {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 40%, #1E40AF 100%);
  position: relative;
  overflow: hidden;
  padding: 72px 0;
}
.lp-cta-banner__pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16,185,129,.12) 0%, transparent 40%);
}
.lp-cta-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}
.lp-cta-banner__title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -.02em;
}
.lp-cta-banner__desc {
  font-size: 16px;
  color: rgba(255,255,255,.78);
  margin: 0 0 24px;
  line-height: 1.65;
  max-width: 520px;
}
.lp-cta-banner__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.lp-cta-banner__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}
.lp-cta-banner__list li svg { color: #34D399; flex-shrink: 0; }

.lp-cta-banner__card {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  min-width: 240px;
}
.lp-cta-banner__card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.lp-cta-banner__card-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.lp-cta-banner__card-commission {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-bottom: 22px;
}
.lp-cta-banner__card-commission strong { color: #34D399; }
.lp-cta-banner__legal {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

@media (max-width: 900px) {
  .lp-cta-banner__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .lp-cta-banner__card { min-width: auto; }
}

/* ════════════════════════════════════════════════════════════════
   SOURCES
   ════════════════════════════════════════════════════════════════ */
.lp-sources {
  background: #F1F5F9;
  padding: 20px 0;
}
.lp-sources .container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11.5px;
  color: #94A3B8;
  line-height: 1.6;
}
.lp-sources svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #CBD5E1;
}

/* ════════════════════════════════════════════════════════════════
   CHART WRAPPER (переиспользуется из лендинга)
   ════════════════════════════════════════════════════════════════ */
.art-chart {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 26px 20px;
  margin: 28px 0 32px;
}
.art-chart__title {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
}
.art-chart__source {
  font-size: 11px;
  color: #94A3B8;
  margin-bottom: 12px;
}
.art-chart__legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.art-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}
.art-chart__legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.art-chart__win-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  color: #059669;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════════════
   MORTGAGE INFOGRAPHIC
   ════════════════════════════════════════════════════════════════ */
.art-mortgage {
  background: linear-gradient(135deg, #FFF7ED, #FFFBEB);
  border: 1.5px solid #FDE68A;
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 16px;
}
.art-mortgage__title {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.art-mortgage__row { margin-bottom: 8px; }
.art-mortgage__row-lbl {
  font-size: 12px;
  color: #64748B;
  font-weight: 600;
  margin-bottom: 5px;
}
.art-mortgage__track {
  background: rgba(0,0,0,.06);
  border-radius: 8px;
  height: 50px;
  overflow: hidden;
}
.art-mortgage__fill {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.art-mortgage__fill--loan {
  background: linear-gradient(90deg, #BFDBFE, #93C5FD);
  width: 22%;
  min-width: 90px;
}
.art-mortgage__fill--total {
  background: linear-gradient(90deg, #FCA5A5, #F87171 60%, #EF4444);
  width: 100%;
}
.art-mortgage__amount {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
}
.art-mortgage__fill--total .art-mortgage__amount { color: #7F1D1D; }
.art-mortgage__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #94A3B8;
  font-size: 12px;
  font-style: italic;
}
.art-mortgage__divider::before,
.art-mortgage__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.1);
}
.art-mortgage__note {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(239,68,68,.08);
  border-left: 3px solid #EF4444;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #DC2626;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   PREMIUM BLOCK
   ════════════════════════════════════════════════════════════════ */
.art-premium {
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.art-premium__ico { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.art-premium__title {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1E3A8A;
  margin-bottom: 3px;
}
.art-premium__body {
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}
.art-premium__body strong { color: #1E3A8A; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .lp-num           { font-size: 64px; margin-bottom: -16px; }
  .lp-section       { padding: 44px 0; }
  .lp-btn--lg       { font-size: 14px; padding: 14px 24px; }
  .art-chart        { padding: 16px 14px; }
  .art-mortgage     { padding: 16px 14px; }
  .lp-cta-banner    { padding: 48px 0; }
}