.neuro-roadmap{
  --bg-1:#010b14;
  --bg-2:#021a2b;
  --text:#eaf7ff;
  --muted:rgba(226,240,255,.72);
  --card-bg:rgba(3,20,48,.88);
  --card-border:rgba(35,213,255,.82);
  --radius:36px;
  --line-left:40px;
  --line-width:300px;

  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,84,132,.22) 0%, rgba(0,39,72,.14) 28%, rgba(0,15,28,0) 58%),
    linear-gradient(90deg, #000a12 0%, #001426 50%, #000a12 100%);
  padding:14px;
  box-sizing:border-box;
}

.neuro-roadmap__inner{
  position:relative;
  border-radius:calc(var(--radius) - 10px);
  overflow:hidden;
  min-height:275px;
  background:
    radial-gradient(circle at center, rgba(0,114,173,.16) 0%, rgba(0,54,90,.12) 22%, rgba(0,16,31,0) 58%),
    linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
}

.neuro-roadmap__inner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.28) 100%);
  z-index:3;
}

.neuro-roadmap__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(35,213,255,.85);
  background:rgba(1,15,30,.82);
  color:#49dcff;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow:0 0 12px rgba(0,162,255,.18);
  cursor:pointer;
}

.neuro-roadmap__arrow--left{left:12px}
.neuro-roadmap__arrow--right{right:12px}
.neuro-roadmap__arrow svg{width:14px;height:14px}

.neuro-roadmap__scroller{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  z-index:2;
}
.neuro-roadmap__scroller::-webkit-scrollbar{display:none}

.neuro-roadmap__track{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:36px;
  padding:60px 40px 70px;
  min-width:max-content;
}

.neuro-roadmap__track::before{
  content:"";
  position:absolute;
  left:var(--line-left);
  width:var(--line-width);
  top:150px;
  height:2px;
  background:linear-gradient(90deg, rgba(35,213,255,.42) 0%, rgba(35,213,255,.26) 100%);
  box-shadow:0 0 14px rgba(0,173,255,.12);
}

.neuro-card{
  position:relative;
  z-index:2;
  width:162px;
  min-width:162px;
  height:174px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 0 18px rgba(0,132,220,.08);
  padding:18px 16px 14px;
  box-sizing:border-box;
  text-align:center;
}

.neuro-card__icon{
  width:50px;
  height:50px;
  margin:0 auto 12px;
  border:1px solid rgba(35,213,255,.8);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#29d9ff;
  box-shadow:inset 0 0 14px rgba(20,163,255,.08);
  padding:8px;
  box-sizing:border-box;
}

.neuro-card__icon svg,
.neuro-card__icon img{width:100%;height:100%;object-fit:contain;display:block}

.neuro-card__year{font-size:17px;line-height:1;font-weight:700;color:#33d8ff;margin-bottom:10px}
.neuro-card__title{font-size:16px;line-height:1.2;font-weight:700;color:var(--text);margin-bottom:8px}
.neuro-card__desc{font-size:12px;line-height:1.25;color:var(--muted)}

.neuro-card__dot{
  position:absolute;
  left:50%;
  bottom:-27px;
  transform:translateX(-50%);
  width:11px;
  height:11px;
  border-radius:50%;
  background:#17d7ff;
  box-shadow:0 0 10px rgba(23,215,255,.28);
}

.neuro-roadmap__progress{
  display:none;
  position:relative;
  z-index:4;
  width:160px;
  height:4px;
  margin:0 auto 18px;
  border-radius:999px;
  background:rgba(35,213,255,.14);
  overflow:hidden;
}

.neuro-roadmap__progress-bar{
  width:32px;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(35,213,255,.85) 0%, rgba(35,213,255,.55) 100%);
  box-shadow:0 0 12px rgba(35,213,255,.22);
  transform:translateX(0);
  transition:transform .2s ease;
}

@media (min-width:1025px){
  .neuro-roadmap__scroller{overflow:visible}
  .neuro-roadmap__track{min-width:0;justify-content:center;gap:38px;padding:60px 32px 70px}
  .neuro-roadmap__track::before{top:150px}
}

@media (max-width:1024px){
  .neuro-roadmap{padding:10px;border-radius:30px}
  .neuro-roadmap__inner{min-height:320px;border-radius:28px}
  .neuro-roadmap__arrow{display:flex}
  .neuro-roadmap__scroller{padding-left:32px;padding-right:32px}
  .neuro-roadmap__track{gap:38px;padding:60px 34px 68px 42px}
  .neuro-roadmap__track::before{top:150px}
  .neuro-card{width:164px;min-width:164px}
  .neuro-roadmap__progress{display:block}
}

@media (max-width:767px){
  .neuro-roadmap{padding:8px;border-radius:28px}
  .neuro-roadmap__inner{min-height:272px;border-radius:26px}
  .neuro-roadmap__arrow{width:22px;height:22px}
  .neuro-roadmap__arrow--left{left:10px}
  .neuro-roadmap__arrow--right{right:10px}
  .neuro-roadmap__scroller{padding-left:28px;padding-right:28px}
  .neuro-roadmap__track{gap:34px;padding:42px 28px 58px 36px}
  .neuro-roadmap__track::before{top:120px}
  .neuro-card{width:138px;min-width:138px;height:150px;padding:16px 12px 12px;border-radius:13px}
  .neuro-card__icon{width:42px;height:42px;margin-bottom:10px}
  .neuro-card__year{font-size:14px;margin-bottom:8px}
  .neuro-card__title{font-size:14px;margin-bottom:7px}
  .neuro-card__desc{font-size:11px}
  .neuro-card__dot{width:10px;height:10px;bottom:-22px}
  .neuro-roadmap__progress{width:120px;margin-bottom:14px}
  .neuro-roadmap__progress-bar{width:28px}
}