/* ExamForge MBA roadmap refresh — Vengeance UI-inspired interactions,
   implemented in the existing Thymeleaf + vanilla CSS stack. */
.mba-roadmap {
  --rf-ink: #18223b;
  --rf-muted: #59647a;
  --rf-purple: #6554e8;
  --rf-orange: #ff765d;
  --rf-teal: #21a99a;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(76px, 9vw, 132px) 0;
  color: var(--rf-ink);
  background:
    radial-gradient(ellipse at 8% 8%, rgba(255,118,93,.14), transparent 30%),
    radial-gradient(ellipse at 92% 80%, rgba(101,84,232,.13), transparent 34%),
    #f8f7ff !important;
}
.mba-roadmap::before, .mba-roadmap::after {
  content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
}
.mba-roadmap::before { width:420px;height:420px;right:-190px;top:-210px;border:1px solid rgba(101,84,232,.2);box-shadow:0 0 0 35px rgba(101,84,232,.035),0 0 0 75px rgba(101,84,232,.025); }
.mba-roadmap::after { width:300px;height:300px;left:-190px;bottom:-160px;background:rgba(255,118,93,.08);filter:blur(2px); }
.roadmap-wrap { width:min(1200px, 90%); margin:0 auto; display:grid; grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr); gap:clamp(38px,6vw,88px); align-items:start; position:relative; }
.roadmap-intro { position:sticky; top:96px; padding:10px 0 20px; }
.roadmap-intro .eyebrow { display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border-radius:999px;background:#eae7ff;color:#5141cf;font-size:11px;font-weight:900;letter-spacing:.12em; }
.roadmap-intro .dot { width:8px;height:8px;border-radius:50%;background:#ff765d;box-shadow:0 0 0 5px rgba(255,118,93,.15); }
.roadmap-intro h2 { max-width:540px;font:800 clamp(42px,5vw,66px)/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-.055em;margin:25px 0 20px;color:#18223b; }
.roadmap-intro h2 em { font-style:normal;color:#6554e8;position:relative;white-space:nowrap; }
.roadmap-intro h2 em::after { content:"";position:absolute;left:0;right:0;bottom:-5px;height:7px;background:#ffb49f;border-radius:10px;z-index:-1;transform:rotate(-1.5deg); }
.roadmap-intro>p { max-width:470px;font-size:16px;line-height:1.85;color:var(--rf-muted); }
.roadmap-cta { display:inline-flex;align-items:center;gap:22px;margin-top:25px;padding:16px 21px;background:#6554e8;color:#fff!important;text-decoration:none;border-radius:12px;font-weight:850;box-shadow:0 5px 0 #4436b7,0 12px 25px rgba(70,55,180,.18);transition:transform .22s,box-shadow .22s,background .22s; }
.roadmap-cta:hover { transform:translateY(-4px);background:#5141d1;box-shadow:0 8px 0 #4436b7,0 18px 30px rgba(70,55,180,.2); }
.roadmap-outcome { margin-top:42px;padding:20px 0 0;border-top:1px solid #dedaf2;display:grid;gap:9px; }
.roadmap-outcome strong { font-size:13px;color:#18223b; }
.roadmap-outcome span { max-width:430px;font-size:13px;line-height:1.75;color:#59647a; }
.roadmap-track { position:relative;padding:0 0 0 54px; }
.roadmap-track::before { content:"";position:absolute;left:19px;top:28px;bottom:42px;width:3px;border-radius:4px;background:linear-gradient(#6554e8 0%,#ff765d 45%,#21a99a 100%); }
.roadmap-step { position:relative;margin:0 0 22px;opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1); }
.js-motion .roadmap-step { opacity:0;transform:translateY(25px); }
.js-motion .roadmap-step.in-view { opacity:1;transform:none; }
.step-marker { position:absolute;left:-54px;top:25px;width:42px;height:42px;border-radius:13px;background:#6554e8;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;box-shadow:0 0 0 7px #f8f7ff,0 8px 20px rgba(48,40,120,.18);z-index:2;transition:transform .25s; }
.roadmap-step:hover .step-marker { transform:rotate(-8deg) scale(1.08); }
.step-content { position:relative;overflow:hidden;background:#fff;border:1px solid #e6e3f4;border-radius:20px;padding:27px 29px;box-shadow:0 8px 24px rgba(36,35,73,.055);transition:transform .25s,box-shadow .25s,border-color .25s; }
.step-content::after { content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:#6554e8;transform:scaleY(0);transform-origin:top;transition:transform .3s; }
.roadmap-step:hover .step-content { transform:translateX(5px);box-shadow:0 18px 38px rgba(36,35,73,.11);border-color:#d4cff9; }
.roadmap-step:hover .step-content::after { transform:scaleY(1); }
.step-meta { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px; }
.step-meta>span { font-size:10px;letter-spacing:.13em;font-weight:950;color:#6554e8; }
.step-meta small { font-size:11px;color:#667087;background:#f1f0f8;padding:7px 10px;border-radius:999px;white-space:nowrap; }
.step-content h3 { font:800 23px/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:#18223b;margin:0 0 10px; }
.step-content p { font-size:14px;line-height:1.75;color:#59647a;margin:0 0 15px; }
.step-content ul { padding-left:19px;margin:0;color:#3e4960;font-size:13px;line-height:1.95; }
.step-content li::marker { color:#6554e8; }
.step-course .step-marker { background:#ff765d; }
.step-course .step-content { border:2px solid #ffb09e;background:linear-gradient(130deg,#fff 0%,#fff7f4 100%); }
.step-course .step-content::after { background:#ff765d; }
.step-course .course-label { color:#dc5b43; }
.step-course .step-meta small { background:#ffebe5;color:#b94e3a; }
.step-link { display:inline-flex;gap:10px;margin-top:17px;color:#d95840!important;font-size:13px;font-weight:900;text-decoration:none; }
.step-link:hover { text-decoration:underline;text-underline-offset:4px; }
.step-project .step-marker { background:#21a99a; }
.step-experience .step-marker { background:#8a70dc; }
.step-ready .step-marker { background:#18223b; }
.role-tags { display:flex;flex-wrap:wrap;gap:8px; }
.role-tags span { background:#efedff;color:#5141c5;border:1px solid #e0dcff;border-radius:9px;padding:9px 11px;font-size:11px;font-weight:800; }
@media(max-width:850px) {
 .roadmap-wrap { grid-template-columns:1fr;gap:35px; }
 .roadmap-intro { position:relative;top:auto; }
 .roadmap-outcome { margin-top:28px; }
}
@media(max-width:560px) {
 .mba-roadmap { padding:65px 0; }
 .roadmap-wrap { width:min(100% - 34px,600px); }
 .roadmap-track { padding-left:39px; }
 .roadmap-track::before { left:14px; }
 .step-marker { left:-39px;width:31px;height:31px;border-radius:10px;top:22px; }
 .step-content { padding:21px 18px; }
 .step-content h3 { font-size:20px; }
 .step-meta { align-items:flex-start;flex-direction:column;gap:8px; }
 .roadmap-intro h2 { font-size:42px; }
}
@media(prefers-reduced-motion:reduce) {
 .roadmap-step,.step-content,.step-marker,.roadmap-cta { transition:none!important; }
 .js-motion .roadmap-step { opacity:1;transform:none; }
}