/* =========================
   HW ROADMAP HERO
========================= */

.hw-roadmap-hero{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  padding:16px 14px 14px;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 40%, #eff6ff 100%);
}

.hw-roadmap-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(650px 220px at 18% 20%, rgba(59,130,246,.18), transparent 65%),
    radial-gradient(650px 240px at 85% 70%, rgba(34,197,94,.16), transparent 60%);
  pointer-events:none;
}

/* HEADER */

.hw-roadmap-hero__head{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}

.hw-roadmap-hero__title{
  font-weight:800;
  font-size:1.05rem;
}

.hw-roadmap-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hw-roadmap-hero__pill{
  padding:6px 10px;
  border-radius:999px;
  background:#ffffffcc;
  border:1px solid rgba(15,23,42,.08);
  font-size:.8rem;
}

.hw-roadmap-hero__note{
  padding:10px 12px;
  border-radius:14px;
  background: rgba(59,130,246,.1);
  border:1px solid rgba(59,130,246,.25);
  font-size:.85rem;
}

/* RAIL */

.hw-roadmap-hero__railWrap{
  background:#ffffffaa;
  border-radius:18px;
  padding:12px 10px;
}

.hw-roadmap-hero__rail{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:6px;
  scroll-snap-type:x mandatory;

  /* 🔥 hide scrollbar (ALL browsers) */
  -ms-overflow-style: none;  /* IE / Edge */
  scrollbar-width: none;     /* Firefox */
}

.hw-roadmap-hero__rail::-webkit-scrollbar{
  display:none;              /* Chrome / Safari */
}

/* TRACK */

.hw-roadmap-hero__track{
  position:absolute;
  left:26px;
  right:26px;
  top:50%;
  height:6px;
  background:#cbd5e1;
  border-radius:999px;
}

/* NODE */

.hw-roadmap-hero__node{
  min-width:210px;
  display:flex;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
}

/* BADGE */

.hw-roadmap-hero__badge{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.1);
}

/* TEXT */

.hw-roadmap-hero__label{
  font-weight:800;
  font-size:.95rem;
}

.hw-roadmap-hero__sub{
  font-size:.8rem;
  color:#64748b;
}

/* STATES */

.hw-roadmap-hero__node.is-locked{
  opacity:.5;
}

.hw-roadmap-hero__node.is-done{
  border-color:#22c55e;
  background:#f0fdf4;
}

.hw-roadmap-hero__node.is-active{
  border-color:#3b82f6;
  background:#eff6ff;
  transform:translateY(-2px);
}

/* HINT */

.hw-roadmap-hero__hint{
  margin-top:10px;
  text-align:center;
  font-size:.8rem;
  color:#64748b;
}

/* HIDE ALL STATE ICONS BY DEFAULT */
.hw-roadmap-hero__lock,
.hw-roadmap-hero__check,
.hw-roadmap-hero__pin,
.hw-roadmap-hero__dot {
  display: none;
}

/* LOCKED → SHOW LOCK */
.hw-roadmap-hero__node.is-locked .hw-roadmap-hero__lock {
  display: block;
}

/* DONE → SHOW CHECK */
.hw-roadmap-hero__node.is-done .hw-roadmap-hero__check {
  display: block;
}

/* ACTIVE → SHOW PIN */
.hw-roadmap-hero__node.is-active .hw-roadmap-hero__pin {
  display: block;
}

/* UPCOMING → SHOW DOT */
.hw-roadmap-hero__node.is-upcoming .hw-roadmap-hero__dot {
  display: block;
}

.hw-roadmap-hero__rail {
  cursor: grab;
}

.hw-roadmap-hero__rail.is-dragging {
  cursor: grabbing;
}