:root{
  --bg-deep:#0a0f24;--bg-elevated:#111a36;--bg-elevated-2:#1a2342;
  --accent:#4f7df5;--accent-2:#22d3a7;--accent-glow:rgba(79,125,245,0.35);
  --text-primary:#e8ecf4;--text-secondary:#8a93ad;--text-dim:#5b6480;
  --border:rgba(140,160,220,0.10);--border-strong:rgba(140,160,220,0.18);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --shadow-lg:0 24px 60px rgba(0,0,0,0.5);
  --shadow-glow:0 0 0 1px rgba(79,125,245,0.35),0 8px 28px rgba(79,125,245,0.25);
  --warn:#f5b04f;--danger:#f55a7d;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased}

.routing-expectations{padding:80px 24px;position:relative}
.routing-container{max-width:1180px;margin:0 auto}

.routing-header{text-align:center;margin-bottom:48px}
.header-line{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.step-num{color:var(--accent)}
.step-rule{width:50px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.routing-header h2{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.routing-header p{color:var(--text-secondary);max-width:580px;margin:0 auto;font-size:15px}

/* PIPELINE */
.pipeline{
  display:flex;align-items:center;justify-content:space-between;
  max-width:920px;margin:0 auto 56px;padding:18px 24px;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.pipe-node{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 18px;border-radius:var(--radius-md);
  background:var(--bg-elevated-2);
  border:1px solid var(--border);
  cursor:pointer;transition:all .25s;
  min-width:96px;
}
.pipe-node:hover{border-color:var(--accent)}
.pipe-node.active{
  background:linear-gradient(180deg,rgba(79,125,245,.15),var(--bg-elevated-2));
  border-color:var(--accent);
  box-shadow:var(--shadow-glow);
}
.pn-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.1em}
.pn-label{font-size:13px;font-weight:600}

.pipe-link{flex:1;height:2px;background:var(--border);position:relative;margin:0 8px;border-radius:2px;overflow:hidden}
.pl-flow{
  position:absolute;left:-30%;top:0;bottom:0;width:30%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:flow 2.4s linear infinite;
}
@keyframes flow{to{left:130%}}

/* STEPS */
.route-grid{display:flex;flex-direction:column;gap:22px}

.route-step{
  display:grid;grid-template-columns:130px 1fr;gap:24px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:all .3s;
  position:relative;overflow:hidden;
}
.route-step::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  opacity:0;transition:opacity .3s;
}
.route-step:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.route-step:hover::before,.route-step.in-view::before{opacity:1}

.step-aside{display:flex;flex-direction:column;align-items:flex-start;gap:8px;position:relative}
.step-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.step-big{
  font-size:56px;font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;
}
.step-rail{flex:1;width:2px;background:linear-gradient(180deg,var(--accent),transparent);border-radius:2px;min-height:30px}

.step-content{min-width:0}
.step-title{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:22px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em;
}
.step-desc{color:var(--text-secondary);font-size:14px;line-height:1.6;margin-bottom:18px}

.future-badge{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(245,176,79,.12);color:var(--warn);
  padding:3px 8px;border-radius:4px;border:1px solid rgba(245,176,79,.3);
}

/* STEP 1 signals */
.signal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.signal{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 14px;
  background:var(--bg-elevated-2);
  border:1px solid var(--border);border-radius:var(--radius-md);
}
.sig-key{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.sig-val{font-size:13px;color:var(--text-primary);font-weight:500}

/* STEP 2 routing table */
.route-table{display:flex;flex-direction:column;gap:8px}
.rt-row{
  display:grid;grid-template-columns:120px 24px 1fr 60px;gap:12px;align-items:center;
  padding:10px 14px;
  background:var(--bg-elevated-2);
  border:1px solid var(--border);border-radius:var(--radius-md);
  transition:all .2s;
}
.rt-row:hover{border-color:var(--accent);background:rgba(79,125,245,.05);transform:translateX(4px)}
.rt-pill{font-size:12px;font-weight:600;padding:4px 10px;background:rgba(79,125,245,.12);color:var(--accent);border-radius:999px;text-align:center}
.rt-arrow{color:var(--text-dim);font-family:'JetBrains Mono',monospace;text-align:center}
.rt-target{font-size:14px;color:var(--text-primary)}
.rt-prio{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;padding:3px 6px;border-radius:4px;text-align:center}
.prio-high{background:rgba(245,90,125,.15);color:var(--danger)}
.prio-medium{background:rgba(245,176,79,.12);color:var(--warn)}
.prio-low{background:rgba(34,211,167,.12);color:var(--accent-2)}
.prio-manual{background:rgba(140,160,220,.12);color:var(--text-secondary)}

/* STEP 3 SLA grid */
.sla-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sla-card{
  padding:16px;background:var(--bg-elevated-2);
  border:1px solid var(--border);border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;
}
.sla-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.sla-high::before{background:var(--danger)}
.sla-medium::before{background:var(--warn)}
.sla-low::before{background:var(--accent-2)}
.sla-manual::before{background:var(--text-secondary)}

.sla-head{display:flex;justify-content:space-between;align-items:center}
.sla-cat{font-size:14px;font-weight:600}
.sla-prio{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}

.sla-bar{height:6px;background:rgba(140,160,220,.1);border-radius:999px;overflow:hidden}
.sla-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:999px;
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
}
.in-view .sla-fill{width:var(--w)}
.sla-high .sla-fill{background:linear-gradient(90deg,var(--danger),#ff8aa3)}
.sla-medium .sla-fill{background:linear-gradient(90deg,var(--warn),#ffd089)}
.sla-low .sla-fill{background:linear-gradient(90deg,var(--accent-2),#66e6c6)}
.sla-manual .sla-fill{background:linear-gradient(90deg,var(--text-secondary),#b6c0db)}

.sla-meta{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim)}
.sla-eta{color:var(--text-secondary)}

/* STEP 4 tracking mock */
.track-mock{
  background:var(--bg-elevated-2);
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:18px;
}
.tm-header{display:flex;justify-content:space-between;margin-bottom:18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);letter-spacing:.1em}
.tm-id{color:var(--accent)}
.tm-timeline{display:flex;justify-content:space-between;align-items:center;position:relative;gap:8px}
.tm-timeline::before{
  content:'';position:absolute;left:8%;right:8%;top:6px;height:2px;background:var(--border);z-index:0;
}
.tm-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1;font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
.tm-dot{width:14px;height:14px;border-radius:50%;background:var(--bg-deep);border:2px solid var(--border);transition:all .3s}
.tm-step.done .tm-dot{background:var(--accent-2);border-color:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
.tm-step.done{color:var(--accent-2)}
.tm-step.active .tm-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulseDot 1.4s infinite}
.tm-step.active{color:var(--accent)}
@keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

.routing-foot{
  margin-top:36px;text-align:center;
  display:flex;justify-content:center;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);
}
.dot-sep{opacity:.5}

@media (max-width:780px){
  .pipeline{flex-wrap:wrap;gap:10px;justify-content:center}
  .pipe-link{display:none}
  .route-step{grid-template-columns:1fr;padding:20px}
  .signal-row{grid-template-columns:1fr}
  .sla-grid{grid-template-columns:1fr}
  .rt-row{grid-template-columns:100px 16px 1fr 50px;font-size:13px}
  .step-big{font-size:40px}
}