/* ==========================================================================
   Блоки, перенесённые с главной страницы: курсы, практика, 3D-обзор, вопросы.
   Переменные главной продублированы в области .mp, чтобы блоки сохранили вид.
   ========================================================================== */
.mp{
  --navy:#000c2d; --navy2:#141f3d; --navy3:#122457; --blue:#366fb7; --blue2:#0473ff;
  --blue-light:#eaf6ff; --border:rgba(255,255,255,.12); --muted:rgba(255,255,255,.75);
  --green:#2ecc71; --bg:var(--navy); --text:#fff;
}
body.light .mp{
  --navy2:#ffffff; --navy3:#f4f7fb; --border:#dde5f0; --muted:#5a6b85; --text:#000c2d; --blue:#2a6bc0;
}
/* вопросы на страницах разделов сделаны кнопками — выравниваем вид */
button.faq-q{width:100%;background:none;border:0;font:inherit;text-align:left;color:inherit;font-weight:700;}
.faq-item.open .faq-a{max-height:1400px;}
.faq-item .faq-a>div{padding-bottom:2px;}

/* Course cards */
.course-card{
  background: var(--navy2); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; margin: 12px 0; transition: border-color 0.2s;
}
.course-card:hover{ border-color: var(--blue); }
.course-card h3{ color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.course-card .course-meta{ font-size: 13px; color: var(--blue); margin-bottom: 8px; }
.course-card .course-result{ font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.course-card .course-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.course-card .course-btn{ background: var(--navy3); color: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.course-card .course-btn:hover{ background: var(--blue); border-color: var(--blue); }
.course-card .course-details{ display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.course-card .course-details.open{ display: block; }
/* Hard mobile guards */
@media (max-width: 1024px){.faq-q{ font-size: 14px !important; padding: 14px 14px !important; }
.faq-a{ font-size: 14px !important; }}
.faq-list{ max-width: 800px; margin: 0 auto; }
.faq-item{ background: var(--navy2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq-q{ padding: 16px 20px; font-weight: 700; font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-q::after{ content: '+'; font-size: 22px; color: var(--blue); transition: transform 0.2s; }
.faq-item.open .faq-q::after{ transform: rotate(45deg); }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 20px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.faq-item.open .faq-a{ max-height: 300px; padding: 0 20px 16px; }
body.light .feature-card, body.light .faq-item, body.light .proof-grid .proof-card, body.light .brand-block{ background: #ffffff; border-color: #dde5f0; }
body.light .feature-card h4, body.light .faq-q{ color: #000c2d; }
body.light .faq-q::after{ color: #2a6bc0; }
body.light .course-card{ background: #ffffff; border-color: #dde5f0; }
body.light .course-card h3{ color: #000c2d; }
body.light .course-card .course-meta{ color: #0d3a7a; }
body.light .course-card .course-result{ color: #2a3b56; }
body.light .course-card .course-details li{ color: #2a3b56; }
body.light .course-btn{ border-color: #2a6bc0; color: #0d3a7a; background: #f0f5fb; }
body.light .faq-a{ color: #2a3b56; }
body.light .faq-a{ color: #5a6b85; }
/* Раздел целиком: свёрнут по умолчанию, раскрывается шапкой-кнопкой */
.ege-fold{ margin: 28px 0 6px; }
.ege-fold-head{
  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
  background: var(--navy2); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 24px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.ege-fold-head:hover{ border-color: var(--blue); box-shadow: 0 4px 18px rgba(54,111,183,.14); }
.ege-fold-head:focus-visible{ outline: 2px solid var(--blue2); outline-offset: 3px; }
.ege-fold-ico{ flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; background: rgba(4,115,255,.12); color: var(--blue2); display: flex; align-items: center; justify-content: center; }
.ege-fold-h{ flex: 1; min-width: 0; }
.ege-fold-head h2{ border: none !important; margin: 0 !important; padding: 0 !important; font-size: 22px; line-height: 1.25; color: var(--blue); }
.ege-fold-sub{ font-size: 14px !important; color: var(--muted) !important; margin: 6px 0 0 !important; line-height: 1.6 !important; }
.ege-fold-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ege-chip{ font-size: 12px; font-weight: 700; color: var(--blue); background: rgba(54,111,183,.14); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.ege-fold-btn{ flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--blue2); color: #fff; border: none; border-radius: 10px; padding: 12px 20px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ege-fold-head:hover .ege-fold-btn{ background: #001b9b; }
.ege-fold-chev{ transition: transform .3s; }
.ege-fold.open .ege-fold-chev{ transform: rotate(180deg); }
/* Свёрнутое состояние: шапка + мини-инфографика = одна карточка */
.ege-fold:not(.open) .ege-fold-head{ border-radius: 16px 16px 0 0; border-bottom-color: transparent; }
.ege-fold-teaser{ background: var(--navy2); border: 1px solid var(--border); border-top: none; border-radius: 0 0 16px 16px; padding: 4px 24px 18px; overflow-x: auto; }
.ege-teaser-svg{ min-width: 700px; }
.ege-fold.open .ege-fold-teaser{ display: none; }
/* На узких экранах мини-инфографику не режем правым краем: сворачиваем карточку до шапки с чипами */
@media (max-width: 760px){.ege-fold-teaser{ display: none; }
.ege-fold:not(.open) .ege-fold-head{ border-radius: 16px; border-bottom-color: var(--border); }
.ege-fold-head{ flex-wrap: wrap; gap: 12px; padding: 18px 16px; align-items: flex-start; }
.ege-fold-ico{ width: 44px; height: 44px; border-radius: 12px; }
.ege-fold-head h2{ font-size: 19px; }
.ege-fold-body{ padding: 16px 14px 20px; }
.ege-fold-btn{ flex-basis: 100%; justify-content: center; }}
/* Раскрытое состояние: шапка как заголовок, содержимое — отдельной панелью */
.ege-fold.open .ege-fold-head{ border-radius: 16px 16px 0 0; }
.ege-fold-body{ background: var(--navy); border: 1px solid var(--border); border-top: none; border-radius: 0 0 16px 16px; padding: 20px 24px 26px; }
.ege-fold-body[hidden]{ display: none !important; }
.ege-fold-body > *:first-child{ margin-top: 0 !important; }
/* Векторные инфографики */
.ege-fig{ margin: 26px 0 10px; }
.ege-fig-cap{ font-size: 16px; font-weight: 700; color: var(--blue); margin: 0 0 12px; }
.ege-fig-wrap{ overflow-x: auto; }
/* На узких экранах схема шире экрана: показываем тонкую полосу прокрутки и подсказку */
@media (max-width: 760px){.ege-fig-wrap{ scrollbar-width: thin; scrollbar-color: rgba(54,111,183,.5) rgba(127,147,175,.18); padding-bottom: 6px; }
.ege-fig-wrap::-webkit-scrollbar{ height: 6px; }
.ege-fig-wrap::-webkit-scrollbar-track{ background: rgba(127,147,175,.18); border-radius: 3px; }
.ege-fig-wrap::-webkit-scrollbar-thumb{ background: rgba(54,111,183,.5); border-radius: 3px; }
.ege-fig::after{ content: "Схему можно прокрутить вбок \2192"; display: block; margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }}
.ege-svg{ width: 100%; height: auto; display: block; }
.ege-svg text{ font-family: 'Manrope', Arial, sans-serif; }
.ege-fig-note{ font-size: 13px !important; color: var(--muted) !important; margin: 8px 0 0 !important; }
/* Палитра фигур: работает и в тёмной, и в светлой теме */
.ege-svg .sg-panel{ fill: var(--navy3); stroke: var(--border); stroke-width: 1.5; }
.ege-svg .sg-panel-acc{ fill: var(--navy3); stroke: var(--blue); stroke-width: 1.5; }
.ege-svg .sg-acc{ fill: var(--blue2); }
.ege-svg .sg-fin{ fill: var(--green); }
.ege-svg .sg-green{ fill: var(--green); }
.ege-svg .sg-ico{ fill: var(--blue2); stroke: none; }
.ege-svg .sg-thw{ fill: #fff; stroke: none; }
.ege-svg .sg-hollow{ fill: none; stroke: var(--blue); stroke-width: 2.5; }
.ege-svg .sg-line{ stroke: var(--border); stroke-width: 2; fill: none; }
.ege-svg .sg-grid{ stroke: var(--border); stroke-width: 1; stroke-dasharray: 5 5; fill: none; opacity: .8; }
.ege-svg .sg-dash{ stroke: var(--blue2); stroke-width: 2.5; fill: none; stroke-dasharray: 8 8; opacity: .7; }
.ege-svg .sg-arr{ stroke: var(--blue); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ege-svg .sg-track{ fill: rgba(127,147,175,.14); stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ege-svg .sg-t1{ fill: var(--text); font-weight: 700; }
.ege-svg .sg-t2{ fill: var(--muted); }
.ege-svg .sg-tb{ fill: var(--blue); font-weight: 700; }
.ege-svg .sg-tbl{ fill: var(--blue-light); font-weight: 700; }
.ege-svg .sg-tw{ fill: #fff; font-weight: 800; }
.ege-svg .sg-tw2{ fill: rgba(255,255,255,.88); }
.ege-svg .sg-star{ fill: var(--blue2); }
body.light .ege-svg .sg-tbl{ fill: #0d3a7a; }
body.light .ege-svg .sg-star{ fill: #2a6bc0; }
body.light .ege-svg .sg-panel{ stroke: #c3d4ea; }
body.light .ege-svg .sg-grid{ stroke: #c3d4ea; }
body.light .ege-svg .sg-line{ stroke: #c3d4ea; }
body.light .ege-svg .sg-arr{ stroke: #2a6bc0; }
body.light .ege-svg .sg-dash{ stroke: #0473ff; }
body.light .ege-svg .sg-hollow{ stroke: #2a6bc0; }
body.light .ege-chip{ background: #eaf1fb; border-color: #c3d4ea; color: #0d3a7a; }
body.light .ege-fold-ico{ background: #eaf1fb; color: #0473ff; }
@media (max-width: 1024px){.ege-fold-head{ flex-wrap: wrap; padding: 16px; gap: 14px; }
.ege-fold-ico{ width: 44px; height: 44px; border-radius: 12px; }
.ege-fold-head h2{ font-size: 19px; }
.ege-fold-sub{ font-size: 13px !important; }
.ege-fold-btn{ width: 100%; justify-content: center; }
.ege-fold-teaser, .ege-fold-body{ padding-left: 14px; padding-right: 14px; }}

/* ---------- блок «Как проходит практика» (flow-шаги) ---------- */
.hero .btn-cta{ background: var(--blue2); color: #fff; border: none; border-radius: 10px; padding: 12px 28px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.2s; text-decoration: none; display: inline-block; }
.hero .btn-cta:hover{ background: #001b9b; }
.hero .btn-cta.secondary{ background: transparent; border: 1px solid rgba(255,255,255,0.3); }
.hero .btn-cta.secondary:hover{ background: rgba(255,255,255,0.1); border-color: #fff; }
/* Brand architecture block */
.brand-block{
  background: var(--navy2); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 24px; margin-bottom: 24px; text-align: center;
}
.brand-block .brand-title{ font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.brand-block .brand-desc{ font-size: 14px; color: var(--muted); line-height: 1.6; }
/* Схема практики (flow steps) */
.flow-step{ display:flex; gap:14px; align-items:flex-start; background:var(--navy2); border:1px solid var(--border); border-radius:12px; padding:16px 20px; cursor:pointer; transition:all 0.2s; }
.flow-step:hover{ border-color: var(--blue); transform: translateX(4px); }
.flow-num{ flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--blue2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.flow-body{ flex:1; }
.flow-title{ font-size:15px; font-weight:700; color:var(--blue); margin-bottom:4px; }
.flow-desc{ font-size:13px; color:var(--muted); line-height:1.5; display:none; }
.flow-step.open .flow-desc{ display:block; }
body.light .flow-step{ background:#ffffff; border-color:#dde5f0; }
@media (max-width: 1024px){.hero .btn-cta{ width: 100%; padding: 14px 16px; font-size: 15px; box-sizing: border-box; }
.proof-grid, .brand-block{ padding: 0 4px; }}
@media (max-width: 480px){.hero .btn-cta{ font-size: 15px; padding: 13px 12px; }}
/* Hard mobile guards */
@media (max-width: 1024px){.hero h1, .hero p, .hero-audience, .hero .btn-cta, .hero div[style*="max-width:220px"] div, .brand-title, .brand-desc, .main-page p{
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
.hero .btn-cta, .hero .cta-row{ max-width: 100% !important; }}
body.light .hero .btn-cta.secondary{ border-color: #b8c6dd; color: #0a3a8c; }
body.light .hero .btn-cta.secondary:hover{ background: rgba(4,115,255,0.08); }
body.light .feature-card, body.light .faq-item, body.light .proof-grid .proof-card, body.light .brand-block{ background: #ffffff; border-color: #dde5f0; }
body.light .brand-title{ color: #000c2d; }
body.light .btn-cta{ background: #0473ff; color: #fff; }
body.light .brand-block .brand-desc{ color: #3d4f6d; }
/* узкие экраны: меню занимает высоту, поэтому первый экран уплотняем */
@media (max-width:400px){.hero .btn-cta{padding:9px 12px;font-size:12px}}
/* ---------- «Как проходит практика»: описания шагов видны сразу ----------
   Исходный дизайн раскрывал описание по клику (.flow-step.open), но на странице
   «Образование» обработчика клика нет — шаги выглядели обрубленными. */
.mp .flow-desc{display:block;}
.mp .flow-step{cursor:default;}
.mp .flow-step:hover{transform:none;border-color:var(--border);}