/* Gainvest Roadmap — scoped to .gv-rm-page / .gv-rm */
body.gv-rm-page {
  background: #f7fbff;
}

.gv-rm {
  --rm-navy: #0f4c75;
  --rm-blue: #008fe8;
  --rm-green: #10b981;
  --rm-red: #ec0044;
  --rm-text: #102a43;
  --rm-muted: #6b7c8f;
  --rm-bg: #f7fbff;
  overflow-x: hidden;
}

.gv-rm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.gv-rm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.gv-rm-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #dbeafe;
}

.gv-rm-kicker--light {
  background: rgba(0, 143, 232, 0.1);
  border-color: rgba(0, 143, 232, 0.18);
  color: var(--rm-blue);
}

.gv-rm-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(700px 280px at 10% -10%, rgba(0, 143, 232, 0.28), transparent 55%),
    linear-gradient(135deg, #0f4c75 0%, #0b3a5c 48%, #102a43 100%);
}

.gv-rm-hero__glow {
  position: absolute;
  inset: auto -20% -40% 40%;
  height: 420px;
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.22), transparent 70%);
  pointer-events: none;
}

.gv-rm-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 32px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px);
}

.gv-rm-hero__title {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.gv-rm-hero__highlight {
  margin: 12px 0 0;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800;
  color: #7dd3fc;
}

.gv-rm-hero__lead {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(226, 238, 247, 0.9);
}

.gv-rm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.gv-rm-hero__visual {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.gv-rm-hero__visual img,
.gv-rm-card__art,
.gv-rm-trader__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(8, 28, 44, 0.28);
}

.gv-rm-float {
  position: absolute;
  font-size: 22px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
  animation: gvRmFloat 4.8s ease-in-out infinite;
}

.gv-rm-float--1 { top: 8%; left: 4%; }
.gv-rm-float--2 { top: 18%; right: 6%; animation-delay: 0.6s; }
.gv-rm-float--3 { bottom: 22%; left: 6%; animation-delay: 1.1s; }
.gv-rm-float--4 { bottom: 10%; right: 10%; animation-delay: 1.7s; }
.gv-rm-float--5 { top: 48%; right: 4%; animation-delay: 0.3s; }

@keyframes gvRmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.gv-rm-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1120px;
  margin: -28px auto 0;
  padding: 0 clamp(16px, 4vw, 32px) 8px;
  position: relative;
  z-index: 2;
}

.gv-rm-pillar {
  padding: 18px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(159, 194, 212, 0.5);
  box-shadow: 0 12px 28px rgba(15, 76, 117, 0.08);
}

.gv-rm-pillar__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(0, 143, 232, 0.1);
  color: var(--rm-blue);
}

.gv-rm-pillar h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--rm-navy);
}

.gv-rm-pillar p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rm-muted);
}

.gv-rm-section-hd {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}

.gv-rm-section-hd h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--rm-navy);
}

.gv-rm-section-hd p {
  margin: 8px 0 0;
  color: var(--rm-muted);
}

.gv-rm-timeline {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px clamp(16px, 4vw, 32px) 24px;
}

.gv-rm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.gv-rm-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #008fe8, #0f4c75 55%, #94a3b8);
}

.gv-rm-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 28px;
  align-items: start;
}

.gv-rm-item:nth-child(odd) .gv-rm-card { grid-column: 1; }
.gv-rm-item:nth-child(even) .gv-rm-card { grid-column: 2; }
.gv-rm-item:nth-child(odd) { padding-right: 0; }

.gv-rm-item__node {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border-radius: 50%;
  color: #fff;
  background: var(--rm-navy);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(0, 143, 232, 0.16);
}

.gv-rm-item--dev .gv-rm-item__node {
  background: var(--rm-blue);
  animation: gvRmPulse 2.4s ease-out infinite;
}

.gv-rm-item--live .gv-rm-item__node { background: var(--rm-green); }
.gv-rm-item--beta .gv-rm-item__node { background: #7c3aed; }
.gv-rm-item--upcoming .gv-rm-item__node { background: var(--rm-blue); }
.gv-rm-item--planned .gv-rm-item__node { background: #64748b; }
.gv-rm-item--vision .gv-rm-item__node { background: linear-gradient(135deg, #0f4c75, #7c3aed); }

@keyframes gvRmPulse {
  0% { box-shadow: 0 0 0 6px rgba(0, 143, 232, 0.16); }
  70% { box-shadow: 0 0 0 14px rgba(0, 143, 232, 0); }
  100% { box-shadow: 0 0 0 6px rgba(0, 143, 232, 0.16); }
}

.gv-rm-card {
  padding: 18px 18px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(159, 194, 212, 0.55);
  box-shadow: 0 10px 28px rgba(15, 76, 117, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gv-rm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 76, 117, 0.12);
}

.gv-rm-item--featured .gv-rm-card {
  padding: 22px;
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.12);
}

.gv-rm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.gv-rm-date {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #eff6ff;
  color: var(--rm-navy);
}

.gv-rm-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gv-rm-status--live { background: #d1fae5; color: #047857; }
.gv-rm-status--dev { background: #dbeafe; color: #1d4ed8; }
.gv-rm-status--beta { background: #ede9fe; color: #6d28d9; }
.gv-rm-status--upcoming { background: #e0f2fe; color: #0369a1; }
.gv-rm-status--planned { background: #e2e8f0; color: #334155; }
.gv-rm-status--vision { background: #0f4c75; color: #fff; }

.gv-rm-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: #7c3aed;
  color: #fff;
}

.gv-rm-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--rm-navy);
  line-height: 1.25;
}

.gv-rm-card > p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--rm-muted);
}

.gv-rm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.gv-rm-chips li {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
}

.gv-rm-card__art,
.gv-rm-ph--card {
  margin-top: 12px;
}

.gv-rm-ph {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 160px;
  border-radius: 16px;
  background:
    radial-gradient(280px 120px at 20% 20%, rgba(0, 143, 232, 0.16), transparent 60%),
    linear-gradient(165deg, #0f4c75, #164f70);
  color: #fff;
}

.gv-rm-ph .gv-mi { font-size: 36px; }
.gv-rm-ph--hero { min-height: 280px; }
.gv-rm-ph--dark { min-height: 240px; }

.gv-rm-trader {
  margin-top: 12px;
  color: #fff;
  background:
    radial-gradient(600px 240px at 90% 10%, rgba(0, 143, 232, 0.22), transparent 55%),
    linear-gradient(160deg, #0b314a, #0f4c75 55%, #102a43);
}

.gv-rm-trader__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 28px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 32px);
}

.gv-rm-trader h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
}

.gv-rm-trader__lead {
  margin: 0 0 18px;
  max-width: 52ch;
  color: rgba(226, 238, 247, 0.88);
  line-height: 1.65;
}

.gv-rm-trader__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.gv-rm-trader__grid article {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gv-rm-trader__grid .gv-mi {
  color: #7dd3fc;
  font-size: 22px;
}

.gv-rm-trader__grid h3 {
  margin: 6px 0 4px;
  font-size: 14px;
  font-weight: 800;
}

.gv-rm-trader__grid p {
  margin: 0;
  font-size: 12px;
  color: rgba(226, 238, 247, 0.75);
  line-height: 1.45;
}

.gv-rm-journey {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px clamp(16px, 4vw, 32px);
}

.gv-rm-phases {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

.gv-rm-phases::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 28px;
  height: 3px;
  background: linear-gradient(90deg, #008fe8, #10b981, #7c3aed);
}

.gv-rm-phases li {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 8px;
}

.gv-rm-phases em {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 50%;
  font-style: normal;
  font-weight: 800;
  background: #0f4c75;
  color: #fff;
}

.gv-rm-phases strong {
  display: block;
  font-size: 18px;
  color: var(--rm-navy);
}

.gv-rm-phases span {
  color: var(--rm-muted);
  font-weight: 700;
}

.gv-rm-cta {
  padding: 0 clamp(16px, 4vw, 32px) 48px;
}

.gv-rm-cta__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #0f4c75, #008fe8);
  box-shadow: 0 16px 40px rgba(0, 143, 232, 0.22);
}

.gv-rm-cta h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
}

.gv-rm-cta p {
  margin: 12px auto 20px;
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
}

.gv-rm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gv-rm-cta small {
  display: block;
  margin-top: 14px;
  opacity: 0.8;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 1100px) {
  .gv-rm-pillars {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .gv-rm-hero__inner,
  .gv-rm-trader__inner {
    grid-template-columns: 1fr;
  }

  .gv-rm-pillars {
    margin-top: 16px;
  }

  .gv-rm-list::before {
    left: 21px;
    margin-left: 0;
  }

  .gv-rm-item {
    display: block;
    padding-left: 56px;
    margin-bottom: 18px;
  }

  .gv-rm-item:nth-child(odd) .gv-rm-card,
  .gv-rm-item:nth-child(even) .gv-rm-card {
    grid-column: auto;
  }

  .gv-rm-item__node {
    left: 21px;
    margin-left: -21px;
  }

  .gv-rm-phases {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .gv-rm-phases::before {
    display: none;
  }

  .gv-rm-hero__actions .gv-btn,
  .gv-rm-cta__actions .gv-btn,
  .gv-rm-trader .gv-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .gv-rm-float { display: none; }
  .gv-rm-card h3 { font-size: 17px; }
  .gv-rm-pillars,
  .gv-rm-trader__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gv-rm-reveal,
  .gv-rm-float,
  .gv-rm-item--dev .gv-rm-item__node,
  .gv-rm-card {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}