/* Analyst World — Roadmaps. Light = red/white (Data Warriors look),
   Dark = black + red. Premium, soothing, seek-safe animations. */
:root{
  --red:#f01920; --red-ink:#c8141a; --red-soft:#fff2f2; --red-line:#ffd4d6; --red-glow:rgba(240,25,32,.14);
  --bg:#ffffff; --bg2:#faf8f7; --bg3:#f3f1ef;
  --ink:#121214; --ink-2:#33333a; --muted:#6b6b72; --muted-2:#9a9aa2;
  --line:#ececec; --line-2:#f3f3f3; --card:#ffffff;
  --display:'Manrope',system-ui,sans-serif; --font:'DM Sans',system-ui,sans-serif; --serif:'Playfair Display',Georgia,serif;
  --radius:18px; --radius-sm:12px; --shadow:0 14px 40px rgba(17,17,20,.07); --shadow-lift:0 22px 60px rgba(240,25,32,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="dark"]{
  --red:#f6323a; --red-ink:#ff6b70; --red-soft:#1e1416; --red-line:#49232a; --red-glow:rgba(246,50,58,.22);
  --bg:#0a0b0e; --bg2:#101217; --bg3:#171a20;
  --ink:#f2f2f5; --ink-2:#c9c9d2; --muted:#9a9aa6; --muted-2:#6f6f7a;
  --line:#23262e; --line-2:#1a1d24; --card:#14161c;
  --shadow:0 18px 44px rgba(0,0,0,.4); --shadow-lift:0 24px 64px rgba(246,50,58,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em}

/* ---------- nav ---------- */
.rm-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,40px);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.rm-logo{font-family:var(--display);font-weight:800;font-size:20px;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
.rm-logo span{color:var(--red)}
.rm-nav-right{display:flex;align-items:center;gap:18px}
.rm-nav-link{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.rm-nav-link:hover{color:var(--ink)}
.rm-theme{appearance:none;border:1px solid var(--line);background:var(--card);width:36px;height:36px;border-radius:50%;font-size:15px;cursor:pointer;line-height:1;transition:border-color .15s,transform .15s}
.rm-theme:hover{border-color:var(--red);transform:translateY(-1px)}

/* ---------- hero ---------- */
.rm-hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,88px) clamp(16px,4vw,40px) clamp(40px,6vw,64px)}
.rm-hero-in{max-width:960px;margin:0 auto;position:relative;z-index:1;text-align:center}
.rm-hero-glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:760px;height:520px;background:radial-gradient(ellipse at center,var(--red-glow),transparent 68%);pointer-events:none;z-index:0}
.rm-eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--red);margin-bottom:18px}
.rm-h1{font-size:clamp(34px,6vw,62px);line-height:1.04;font-weight:800;margin:0 0 20px}
.rm-h1 span{color:var(--red)}
.rm-lead{font-size:clamp(15px,1.8vw,18px);color:var(--ink-2);max-width:680px;margin:0 auto 26px;line-height:1.6}
.rm-lead b{color:var(--ink)}
.rm-roles-wrap{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto 28px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.rm-roles-lbl{flex:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.rm-roles{display:flex;align-items:center;gap:14px;white-space:nowrap;animation:rmMarquee 26s linear infinite}
.rm-roles span{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.rm-roles i{color:var(--red);font-style:normal}
@keyframes rmMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rm-hero-cta{display:inline-block;font-weight:700;font-size:14.5px;color:var(--red);text-decoration:none;border:1px solid var(--red-line);background:var(--red-soft);padding:11px 20px;border-radius:999px;transition:transform .15s,box-shadow .15s}
.rm-hero-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--red-glow)}

/* ---------- main / pick ---------- */
.rm-main{max-width:1060px;margin:0 auto;padding:8px clamp(16px,4vw,40px) 80px}
.rm-pick-h{text-align:center;margin:24px 0 28px}
.rm-pick-h h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;margin:0 0 8px}
.rm-pick-h p{color:var(--muted);font-size:15px;max-width:560px;margin:0 auto}

/* ---------- skill grid ---------- */
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rm-card{appearance:none;text-align:left;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;position:relative;overflow:hidden}
.rm-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--red),#ff6b70);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.rm-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--red-line)}
.rm-card:hover::before{transform:scaleX(1)}
.rm-card-top{display:flex;align-items:center;justify-content:space-between}
.rm-ic{flex:none;width:46px;height:46px;border-radius:13px;background:var(--red-soft);border:1px solid var(--red-line);display:grid;place-items:center;color:var(--red)}
.rm-svg{width:26px;height:26px;display:block}
.rm-card-soon .rm-ic{background:var(--bg3);border-color:var(--line);color:var(--muted-2)}
.rm-reco{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-bottom-left-radius:12px}
.rm-card.rec{border-color:var(--red-line)}
.rm-card.rec::before{transform:scaleX(1)}
.rm-card-arrow{color:var(--muted-2);font-size:20px;transition:transform .2s,color .2s}
.rm-card:hover .rm-card-arrow{color:var(--red);transform:translateX(4px)}
.rm-card h3{font-size:19px;font-weight:800;margin:4px 0 0}
.rm-card-tag{color:var(--muted);font-size:13.5px;line-height:1.45;margin:0;flex:1}
.rm-card-meta{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted-2);font-weight:600;margin-top:4px}
.rm-card-soon{cursor:default;opacity:.85;background:var(--bg2);border-style:dashed}
.rm-card-soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.rm-card-soon:hover::before{transform:scaleX(0)}
.rm-card-ring{position:relative;width:48px;height:48px;display:grid;place-items:center}
.rm-ring{width:48px;height:48px;transform:rotate(-90deg)}
.rm-ring .rt{fill:none;stroke:var(--line);stroke-width:4}
.rm-ring .rf{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.rm-ring-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:11px;color:var(--red)}
.rm-trust{text-align:center;color:var(--muted);font-size:13px;margin-top:26px}
.rm-trust b{color:var(--ink-2)}

/* ---------- skill view: hero ---------- */
.rm-back{appearance:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 15px;font:600 13.5px var(--font);color:var(--ink-2);cursor:pointer;margin-bottom:18px;transition:border-color .15s,transform .15s}
.rm-back:hover{border-color:var(--red);color:var(--red);transform:translateX(-2px)}
.rm-sk-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px clamp(20px,3vw,32px);box-shadow:var(--shadow);position:relative;overflow:hidden}
.rm-sk-hero::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--red),#ff6b70)}
.rm-sk-hero-l{display:flex;gap:18px;align-items:flex-start;flex:1;min-width:0}
.rm-sk-ic{flex:none;width:58px;height:58px;border-radius:16px;background:var(--red-soft);border:1px solid var(--red-line);display:grid;place-items:center;color:var(--red)}
.rm-sk-ic .rm-svg{width:32px;height:32px}
.rm-sk-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--red)}
.rm-sk-hero h1{font-size:clamp(26px,4vw,38px);font-weight:800;margin:6px 0 8px}
.rm-sk-hero h1 span{color:var(--red)}
.rm-sk-hero p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0 0 14px;max-width:620px}
.rm-sk-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;font-weight:600;color:var(--muted)}
.rm-sk-hero-r{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.rm-sk-ringwrap{position:relative;width:96px;height:96px;display:grid;place-items:center}
.rm-sk-ringwrap .rm-ring{width:96px;height:96px}
.rm-sk-ringwrap .rm-ring .rt,.rm-sk-ringwrap .rm-ring .rf{stroke-width:5}
.rm-sk-ringwrap .rm-ring-num{font-size:22px}
.rm-sk-ringlbl{font-size:12px;color:var(--muted);font-weight:600}
.rm-sk-outcome{margin:14px 0 24px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13.5px;color:var(--ink-2)}
.rm-sk-outcome b{color:var(--ink)}

/* ---------- tracks / sections / topics (nested accordions) ---------- */
.rm-tracks{display:grid;gap:14px}
.rm-track{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.rm-track.open{border-color:var(--red-line);box-shadow:var(--shadow)}
.rm-track-head{width:100%;appearance:none;border:0;background:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px clamp(16px,2.4vw,24px);text-align:left}
.rm-track-n{flex:none;width:34px;height:34px;border-radius:10px;background:var(--red);color:#fff;font-family:var(--display);font-weight:800;font-size:15px;display:grid;place-items:center;box-shadow:0 8px 18px var(--red-glow)}
.rm-track-ttl{flex:1;min-width:0}
.rm-track-ttl b{display:block;font-family:var(--display);font-size:17px;font-weight:800;color:var(--ink)}
.rm-track-ttl em{font-style:normal;font-size:13px;color:var(--muted);display:block;margin-top:2px}
.rm-track-prog{flex:none;width:72px;height:6px;border-radius:99px;background:var(--bg3);overflow:hidden}
.rm-track-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff6b70);border-radius:99px;transition:width .5s var(--ease)}
.rm-caret{flex:none;color:var(--muted-2);font-size:13px;transition:transform .3s var(--ease)}
.rm-caret.big{font-size:16px}
.rm-track.open>.rm-track-head .rm-caret,.rm-sec.open>.rm-sec-head .rm-caret{transform:rotate(180deg);color:var(--red)}
.rm-track-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s var(--ease)}
.rm-track.open>.rm-track-body{grid-template-rows:1fr}
.rm-track-in{overflow:hidden;padding:0 clamp(16px,2.4vw,24px)}
.rm-track.open>.rm-track-body>.rm-track-in{padding-bottom:16px}

.rm-sec{border-top:1px solid var(--line-2)}
.rm-sec-head{width:100%;appearance:none;border:0;background:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 4px;text-align:left}
.rm-sec-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--red-line);transition:background .2s}
.rm-sec.open .rm-sec-dot{background:var(--red)}
.rm-sec-name{flex:1;font-weight:700;font-size:14.5px;color:var(--ink)}
.rm-sec-count{font-size:12px;font-weight:700;color:var(--muted-2);background:var(--bg3);border-radius:999px;padding:2px 9px}
.rm-sec-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.rm-sec.open>.rm-sec-body{grid-template-rows:1fr}
.rm-sec-in{overflow:hidden}
.rm-sec.open>.rm-sec-body>.rm-sec-in{padding-bottom:10px}

.rm-topic{display:flex;gap:11px;align-items:flex-start;padding:7px 4px 7px 8px;border-radius:10px;transition:background .15s}
.rm-topic:hover{background:var(--bg2)}
.rm-check{flex:none;margin-top:1px;appearance:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,background .15s}
.rm-tick{font-size:12px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s}
.rm-check:hover{border-color:var(--red)}
.rm-topic.done .rm-check{background:var(--red);border-color:var(--red)}
.rm-topic.done .rm-tick{opacity:1;transform:scale(1)}
.rm-topic-body{flex:1;min-width:0}
.rm-topic-head{width:100%;appearance:none;border:0;background:none;cursor:default;display:flex;align-items:center;gap:8px;padding:2px 0;text-align:left}
.rm-topic.has-sub .rm-topic-head{cursor:pointer}
.rm-topic-t{font-size:14px;color:var(--ink-2);line-height:1.4}
.rm-topic.done .rm-topic-t{color:var(--muted-2);text-decoration:line-through;text-decoration-color:var(--red-line)}
.rm-sub-caret{font-size:11px;color:var(--muted-2);transition:transform .25s var(--ease)}
.rm-topic.sub-open .rm-sub-caret{transform:rotate(180deg);color:var(--red)}
.rm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease)}
.rm-topic.sub-open .rm-sub{grid-template-rows:1fr}
.rm-sub-in{overflow:hidden}
.rm-sub-in ul{margin:4px 0 6px;padding-left:16px;list-style:none}
.rm-sub-in li{font-size:13px;color:var(--muted);line-height:1.6;position:relative;padding-left:14px}
.rm-sub-in li::before{content:'–';position:absolute;left:0;color:var(--red)}

/* ---------- download bar ---------- */
.rm-dlbar{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:linear-gradient(135deg,var(--card),var(--red-soft));border:1px solid var(--red-line);border-radius:var(--radius);padding:20px clamp(18px,3vw,28px);box-shadow:var(--shadow)}
.rm-dl-txt b{display:block;font-family:var(--display);font-size:17px;font-weight:800;margin-bottom:3px}
.rm-dl-txt span{font-size:13.5px;color:var(--muted)}
.rm-dl-actions{display:flex;gap:10px;flex-wrap:wrap}
.rm-btn{appearance:none;cursor:pointer;font:700 14px var(--font);border-radius:11px;padding:11px 18px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.rm-bic{width:16px;height:16px;flex:none}
.rm-btn.ghost:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.rm-btn.li .rm-bic.li{color:#0a66c2}
.rm-btn.li:hover{border-color:#0a66c2;color:#0a66c2;transform:translateY(-2px)}
.rm-btn.primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 10px 24px var(--red-glow)}
.rm-btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px var(--red-glow)}

/* role personalisation bar */
.rm-rolebar{max-width:860px;margin:0 auto 22px;text-align:center}
.rm-role-lead{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.rm-role-lead b{color:var(--ink)}
.rm-role-clear{appearance:none;border:0;background:none;color:var(--red);font:700 13px var(--font);cursor:pointer;margin-left:4px}
.rm-role-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rm-role-chip{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px;padding:7px 14px;font:600 13px var(--font);transition:border-color .15s,color .15s,background .15s,transform .15s}
.rm-role-chip:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.rm-role-chip.on{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 8px 18px var(--red-glow)}

/* ---------- footer ---------- */
.rm-footer{border-top:1px solid var(--line);padding:40px clamp(16px,4vw,40px);text-align:center;background:var(--bg2)}
.rm-footer .rm-logo{font-size:22px}
.rm-footer p{color:var(--muted);font-size:13.5px;max-width:520px;margin:12px auto 14px;line-height:1.55}
.rm-foot-links{display:flex;gap:18px;justify-content:center;font-size:13.5px;font-weight:600}
.rm-foot-links a{color:var(--red-ink);text-decoration:none}
.rm-foot-links a:hover{text-decoration:underline}

/* ---------- toast ---------- */
.rm-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;padding:12px 20px;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;max-width:90vw;text-align:center}
.rm-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:900px){ .rm-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .rm-grid{grid-template-columns:1fr}
  .rm-sk-hero{flex-direction:column;align-items:flex-start}
  .rm-sk-hero-r{flex-direction:row;align-self:stretch;justify-content:space-between;align-items:center;width:100%;border-top:1px solid var(--line);padding-top:14px}
  .rm-track-prog{display:none}
  .rm-dlbar{flex-direction:column;align-items:stretch}
  .rm-dl-actions .rm-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .rm-roles{animation:none}
  *{transition:none!important}
  .rm-track-body,.rm-sec-body,.rm-sub{transition:none}
}