/* ============================================================================
   Sema PTA landing — 08 — Открытый роадмап (stages)
   ----------------------------------------------------------------------------
   To edit this section, open css/roadmap.css. All rules are grouped here.
   ============================================================================ */

/* ============ Roadmap ============ */

.roadmap-scroll {
    position: relative;
    overflow-x: auto;
    padding: 20px 0 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--sema-700) transparent;
  }

.roadmap-scroll::-webkit-scrollbar { height: 8px; }

.roadmap-scroll::-webkit-scrollbar-thumb { background: var(--sema-700); border-radius: 4px; }

.roadmap-track {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(280px, 1fr));
    gap: 24px;
    min-width: 1120px;
    /* left/right padding so first/last card don't get clipped by scroll edges */
    padding: 0 12px;
  }

.roadmap-line {
    position: absolute; top: 40px; left: 12px; right: 12px; height: 2px;
    background: linear-gradient(90deg, var(--sema-500) 0%, var(--sema-500) 50%, var(--border) 50%, var(--border) 100%);
    z-index: 0;
  }

.stage {
    position: relative; padding-top: 72px; padding-left: 4px;
    z-index: 1;
  }

.stage-dot {
    position: absolute; top: 32px; left: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--sema-500);
  }

.stage.done .stage-dot { background: var(--sema-500); box-shadow: 0 0 20px var(--sema-500); }

.stage.now  .stage-dot { background: var(--sema-500); animation: pulse 1.8s infinite; }

.stage.next .stage-dot, .stage.later .stage-dot { border-color: var(--text-mute); }

.stage-tag {
    display: inline-block; padding: 4px 10px; border-radius: 6px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    margin-bottom: 12px;
  }

.stage.done .stage-tag { color: var(--sema-500); background: rgba(255,138,76,0.1); border: 1px solid var(--border-strong); }

.stage.now  .stage-tag { color: #0E0B08; background: var(--sema-500); }

.stage.next .stage-tag { color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }

.stage.later .stage-tag { color: var(--text-mute); background: transparent; border: 1px solid var(--border); }

.stage h4 { font-size: 22px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }

.stage .stage-period { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-bottom: 20px; }

.stage ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.stage li { font-size: 14px; color: var(--text-dim); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }

.stage li::before {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--sema-500); margin-top: 8px; flex-shrink: 0;
  }

.stage.later li::before { background: var(--text-mute); }