/* Общие стили семейства роадмапов.
   Копия инлайн-стилей /roadmap/ (там они остаются как есть) + блок «Другие роадмапы».
   Подключают /roadmap/middle/, /roadmap/data-analyst/, /roadmap/business-analyst/. */
:root {
  --bg:       #0d0f14;
  --bg2:      #13161e;
  --bg3:      #1a1e28;
  --surface:  #1f2433;
  --border:   #2a2f3e;
  --border2:  #353b50;
  --text:     #e8ecf4;
  --muted:    #7b829a;
  --dim:      #4a5166;

  --blue:     #4f8ef7;
  --blue-dim: #1e3a6e;
  --green:    #3ecf8e;
  --green-dim:#0e3d26;
  --amber:    #f5a623;
  --amber-dim:#3d2800;
  --red:      #f06060;
  --red-dim:  #3d1414;
  --purple:   #a78bfa;
  --purple-dim:#2d1f5e;
  --teal:     #2dd4bf;
  --teal-dim: #0e3330;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
}

/* ─── NAV ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,15,20,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--blue);
  white-space: nowrap;
  margin-right: 32px;
  padding: 16px 0;
  letter-spacing: 0.05em;
}
.nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  padding: 16px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-link:hover { color: var(--text); border-bottom-color: var(--blue); }

/* ─── HERO ─── */
.hero {
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 80px 40px 60px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg) 0%, #0d1526 100%);
}
.hero::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,142,247,0.12) 0%, transparent 65%);
  top: -200px; right: -100px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62,207,142,0.07) 0%, transparent 65%);
  bottom: -150px; left: -50px;
  pointer-events: none;
}
.hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; width: 100%; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  margin-bottom: 28px;
}
.hero h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}
.hero h1 span { color: var(--blue); }
.hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: 40px;
}
.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-stat {}
.hero-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.hero-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── ROADMAP OVERVIEW ─── */
.roadmap-bar {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 40px;
  overflow-x: auto;
}
.roadmap-track {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 700px;
  max-width: 900px;
  margin: 0 auto;
}
.roadmap-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.roadmap-node::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--border2);
  z-index: 0;
}
.roadmap-node:last-child::after { display: none; }
.roadmap-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.roadmap-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ─── CONTENT ─── */
.content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

/* ─── SECTION HEADER ─── */
.section-intro {
  padding: 64px 0 8px;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.section-tag::before {
  content: '';
  width: 20px; height: 1px;
  background: currentColor;
}
h2.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-desc {
  font-size: 16px;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* ─── TOPIC CARD ─── */
.topic-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.topic-card:hover { border-color: var(--border2); }

.topic-header {
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  cursor: pointer;
  user-select: none;
}
.topic-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.topic-header-text { flex: 1; }
.topic-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 4px;
}
.topic-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 6px;
  line-height: 1.2;
}
.topic-subtitle {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.topic-badges {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border: 1px solid;
}
.badge-blue   { color: var(--blue);   border-color: var(--blue-dim);   background: rgba(79,142,247,0.08); }
.badge-green  { color: var(--green);  border-color: var(--green-dim);  background: rgba(62,207,142,0.08); }
.badge-amber  { color: var(--amber);  border-color: var(--amber-dim);  background: rgba(245,166,35,0.08); }
.badge-red    { color: var(--red);    border-color: var(--red-dim);    background: rgba(240,96,96,0.08); }
.badge-purple { color: var(--purple); border-color: var(--purple-dim); background: rgba(167,139,250,0.08); }
.badge-teal   { color: var(--teal);   border-color: var(--teal-dim);   background: rgba(45,212,191,0.08); }

.topic-expand {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.2s, color 0.2s;
  margin-top: 4px;
}

.topic-body {
  padding: 0 28px 28px 72px;
}

/* ─── INSIDE TOPIC ─── */
h3.sub-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
h3.sub-title::before {
  content: '';
  width: 3px; height: 16px;
  background: var(--blue);
  flex-shrink: 0;
}

p.body-text {
  font-size: 15px;
  color: #c0c8dc;
  line-height: 1.75;
  margin-bottom: 14px;
}

/* ─── SUBTOPICS LIST ─── */
.subtopics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}
.subtopic-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 14px;
  color: #a0aacc;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.subtopic-item::before {
  content: '→';
  color: var(--blue);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.subtopic-item strong { color: var(--text); font-weight: 500; }

/* ─── ATTENTION BOX ─── */
.attention {
  border-left: 3px solid var(--amber);
  background: var(--amber-dim);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14px;
  color: #e0c070;
  line-height: 1.65;
}
.attention-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
}

/* ─── INTERVIEW QUESTIONS ─── */
.interview-block {
  background: var(--bg3);
  border: 1px solid var(--border);
  margin: 20px 0 0;
}
.interview-header {
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.interview-icon { font-size: 16px; }
.interview-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
}
.interview-list {
  list-style: none;
  padding: 0;
}
.interview-q {
  padding: 11px 18px;
  font-size: 14px;
  color: #c0c8dc;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.55;
}
.interview-q:last-child { border-bottom: none; }
.interview-q::before {
  content: 'Q';
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--purple);
  background: var(--purple-dim);
  padding: 2px 6px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── CODE ─── */
.code {
  background: #0a0c12;
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin: 14px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #a0b0d0;
  white-space: pre;
  overflow-x: auto;
}
.code .cm  { color: #4a6040; }
.code .kw  { color: #c792ea; }
.code .str { color: #80c070; }
.code .num { color: #f78c6c; }
.code .fn  { color: #82aaff; }

/* ─── FORMULA ─── */
.formula {
  background: #0d1020;
  border-left: 3px solid var(--teal);
  padding: 14px 18px;
  margin: 14px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--teal);
  line-height: 1.8;
  white-space: pre;
}
.formula-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  white-space: normal;
}

/* ─── RESOURCES ─── */
.resources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.resource-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.resource-link:hover { border-color: var(--blue); color: #93c5fd; }
.resource-link::before { content: '↗'; font-size: 10px; }

/* ─── PRIORITY INDICATOR ─── */
.priority-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 28px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}
.priority-dots { display: flex; gap: 4px; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); }
.priority-dot.on-1 { background: var(--red); }
.priority-dot.on-2 { background: var(--amber); }
.priority-dot.on-3 { background: var(--green); }

/* ─── MATERIALS / RESOURCES (links to articles, tools, trainers) ─── */
.materials {
  margin: 22px 0 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  background: var(--bg3);
}
.materials-header {
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.materials-icon { font-size: 15px; }
.materials-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal);
}
.materials-list { display: flex; flex-direction: column; }

/* Блоки-переходы в воронку: диагностика и консультация.
   Раньше страница была тупиком — 302 входа, дальше уходило 11%. */
.rm-cta {
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border2);
  border-left: 3px solid var(--green);
  padding: 24px 26px; margin: 36px 0;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.rm-cta-body { flex: 1 1 320px; min-width: 0; }
.rm-cta-h {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 19px;
  color: var(--text); margin: 0 0 7px; line-height: 1.3;
}
.rm-cta-p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.rm-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.rm-cta-btn {
  display: inline-block; text-decoration: none; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  padding: 12px 20px; border: 1px solid var(--green);
  color: var(--green); background: var(--green-dim);
  transition: background .12s, color .12s;
}
.rm-cta-btn:hover { background: var(--green); color: var(--bg); }
.rm-cta-btn.secondary { border-color: var(--border2); color: var(--muted); background: transparent; }
.rm-cta-btn.secondary:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 640px) { .rm-cta { padding: 20px; } .rm-cta-actions { width: 100%; } }
a.mat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; text-decoration: none;
  border-bottom: 1px solid var(--border);
  color: #c0c8dc; font-size: 14px; line-height: 1.4;
  transition: background .12s, color .12s;
}
a.mat-item:last-child { border-bottom: none; }
a.mat-item:hover { background: var(--surface); color: var(--text); }
.mat-tag {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 0; border-radius: 3px; border: 1px solid var(--border2);
  color: var(--muted); width: 92px; text-align: center;
}
.mat-tag.t-article { color: var(--blue);   border-color: var(--blue-dim); }
.mat-tag.t-guide   { color: var(--teal);   border-color: var(--teal-dim); }
.mat-tag.t-card    { color: var(--amber);  border-color: var(--amber-dim); }
.mat-tag.t-tool    { color: var(--green);  border-color: var(--green-dim); }
.mat-tag.t-quiz    { color: var(--purple); border-color: var(--purple-dim); }
.mat-tag.t-trainer { color: var(--red);    border-color: var(--red-dim); }
.mat-label { flex: 1; }
.mat-arrow { color: var(--dim); flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
a.mat-item:hover .mat-arrow { color: var(--teal); }
@media (max-width: 600px) {
  .mat-tag { width: 76px; font-size: 8px; }
  a.mat-item { gap: 9px; padding: 10px 14px; font-size: 13px; }
}

/* ─── TIMELINE ─── */
.timeline {
  display: flex;
  gap: 16px;
  margin: 40px 0;
  flex-wrap: wrap;
}
.timeline-phase {
  flex: 1;
  min-width: 180px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 20px;
  position: relative;
}
.timeline-phase::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.phase-1::before { background: var(--green); }
.phase-2::before { background: var(--blue); }
.phase-3::before { background: var(--amber); }
.phase-4::before { background: var(--purple); }
.timeline-num {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--border2);
  margin-bottom: 8px;
}
.timeline-period {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.timeline-items {
  list-style: none;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.timeline-items li::before { content: '· '; color: var(--dim); }

/* ─── FINAL ─── */
.final {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 40px;
  margin-top: 40px;
}
.final h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 26px;
  margin-bottom: 16px;
}
.final p { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }

/* ─── DIVIDER ─── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0 0;
}

@media (max-width: 640px) {
  .hero { padding: 48px 24px 40px; }
  .content { padding: 0 24px 60px; }
  .subtopics { grid-template-columns: 1fr; }
  .topic-body { padding: 0 20px 24px 20px; }
  .roadmap-bar { padding: 24px; }
  h2.section-title { font-size: 24px; }
}
.faq-item{background:var(--bg2);border:1px solid var(--border);padding:18px 22px;margin-bottom:10px}
.faq-q{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--text);margin-bottom:9px;display:flex;gap:10px;align-items:flex-start}
.faq-q::before{content:'Q';font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--amber);background:var(--amber-dim);padding:2px 7px;flex-shrink:0;margin-top:2px}
.faq-a{font-size:14px;color:#c0c8dc;line-height:1.75}
.faq-a a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-dim)}
.faq-a a:hover{border-bottom-color:var(--amber)}

/* ── Другие роадмапы ── */
.rm-family{margin:48px 0 8px}
.rm-family-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.rm-family-card{display:block;padding:18px 18px 16px;background:var(--bg2);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.rm-family-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.rm-family-card .rf-tag{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--gold);letter-spacing:.06em;-webkit-font-smoothing:none}
.rm-family-card .rf-title{font-size:14px;font-weight:600;margin:10px 0 6px;line-height:1.45}
.rm-family-card .rf-desc{font-size:12px;color:var(--muted);line-height:1.6}
.rm-family-card.current{opacity:.55;pointer-events:none}
/* Самопроверка и таблица сравнения */
.rm-check{list-style:none;padding:0;margin:14px 0}
.rm-check li{padding:10px 14px 10px 40px;position:relative;border-bottom:1px dashed var(--border);font-size:14px;line-height:1.65}
.rm-check li::before{content:"□";position:absolute;left:14px;color:var(--gold)}
.rm-compare{width:100%;border-collapse:collapse;font-size:13.5px;margin:16px 0;background:var(--bg2)}
.rm-compare th,.rm-compare td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.6}
.rm-compare th{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--gold);letter-spacing:.05em;-webkit-font-smoothing:none;background:var(--bg3)}
.rm-compare td:first-child{color:var(--muted);white-space:nowrap}
.rm-table-wrap{overflow-x:auto}
.rm-note{border-left:3px solid var(--gold-d);background:var(--bg2);padding:14px 18px;font-size:14px;line-height:1.7;color:var(--muted);margin:18px 0}
.rm-compare.even td{width:50%}
.rm-compare.even td:first-child{white-space:normal;color:var(--text)}
.rm-prose{margin:8px 0 12px}
.rm-note a,.body-text a,.section-desc a,.rm-check a,.rm-compare a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-d)}
.rm-note a:hover,.body-text a:hover,.section-desc a:hover,.rm-check a:hover,.rm-compare a:hover{border-bottom-color:var(--gold)}