/* =============================================================================
 * Vitalum Masternode Steps — exact port of masternodes.html's #how-it-works.
 * All rules scoped under .vms-scope so nothing leaks in or out.
 * Sources: inline <style> in masternodes.html (lines 41, 116-165) + bootstrap
 * grid subset (row-cols-2 / row-cols-md-5 / .col) + section-head classes.
 * ============================================================================= */

/* -------- Reset -------- */
.vms-scope,
.vms-scope *,
.vms-scope *::before,
.vms-scope *::after { box-sizing: border-box; }

.vms-scope {
  --vms-bg:      #0f0f0f;
  --vms-primary: #1ebf95;
  --vms-heading: #ffffff;
  --vms-desc:    #c8ddd9;

  display: block;
  width: 100%;
  color: var(--vms-desc);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.vms-scope p, .vms-scope h2, .vms-scope h5, .vms-scope h6 { margin: 0; }

/* -------- Section wrap -------- */
.vms-scope.vms-section-wrap {
  background: var(--vms-bg);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
@media (max-width: 991px) { .vms-scope.vms-section-wrap { padding: 60px 0; } }

/* -------- Container -------- */
.vms-scope .container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}
@media (max-width: 1199px) { .vms-scope .container { max-width: 960px; } }
@media (max-width: 991px)  { .vms-scope .container { max-width: 720px; } }
@media (max-width: 767px)  { .vms-scope .container { max-width: 540px; } }
@media (max-width: 575px)  { .vms-scope .container { max-width: 100%; } }

/* -------- Bootstrap grid — .row, .row-cols-2, .row-cols-md-5, .col -------- */
.vms-scope .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.vms-scope .row.justify-content-center { justify-content: center; }

.vms-scope .row > .col {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 auto;
}
/* row-cols-2 → each .col is 50% */
.vms-scope .row-cols-2 > .col { width: 50%; }
/* row-cols-md-5 → 20% at ≥768px (overrides row-cols-2) */
@media (min-width: 768px) {
  .vms-scope .row-cols-md-5 > .col { width: 20%; }
}

.vms-scope .gutter-vr-30px { margin-top: -15px; margin-bottom: -15px; }
.vms-scope .gutter-vr-30px > .col { padding-top: 15px; padding-bottom: 15px; }

/* -------- Utilities -------- */
.vms-scope .text-center  { text-align: center; }
.vms-scope .text-light   { color: #ffffff !important; }
.vms-scope .mt-5         { margin-top: 3rem !important; }
.vms-scope .pt-3         { padding-top: 1rem !important; }

/* -------- Section head -------- */
.vms-scope .section-head { position: relative; padding-bottom: 40px; text-align: center; }
.vms-scope .section-head .title { font-weight: 500; }
.vms-scope .section-head .title:not(:last-child) { margin-bottom: .75rem; }
.vms-scope .section-head .title-xs:not(:last-child) { margin-bottom: .5rem; }
.vms-scope .wide-md { max-width: 945px; margin-left: auto; margin-right: auto; }

.vms-scope .section-head h2.title {
  font-size: 1.75rem;
  color: var(--vms-heading);
  margin: 0;
  line-height: 1.3;
}
@media (min-width: 576px) { .vms-scope .section-head h2.title { font-size: 2.25rem; } }

.vms-scope .title-xs {
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  display: inline-block;
  color: var(--vms-primary);
  margin: 0;
}
.vms-scope .title-xs.title-s1 {
  position: relative;
  padding-left: 75px;
  font-weight: 600;
}
.vms-scope .title-s1:before {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  width: 60px;
  content: '';
  transform: translate(0, -50%);
  background: var(--vms-primary);
}
.vms-scope .tc-primary { color: var(--vms-primary) !important; }

/* -------- Step items (masternodes.html :117-120) -------- */
.vms-scope .mn-step-item { text-align: center; padding: 0 .75rem; }
.vms-scope .mn-step-item img {
  height: 68px;
  width: auto;
  margin: 0 auto 1.25rem;
  display: block;
}
.vms-scope.vms-tint .mn-step-item img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(56%) saturate(450%) hue-rotate(118deg) brightness(95%) contrast(90%);
}
.vms-scope .mn-step-item p {
  color: var(--vms-desc);
  font-size: .93rem;
  max-width: 180px;
  margin: 0 auto;
  line-height: 1.5;
}

/* -------- Step number (masternodes.html :150-154) -------- */
.vms-scope .mn-step-num {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--vms-primary);
  opacity: .7;
  margin-bottom: .6rem;
  text-transform: uppercase;
}

/* -------- Remember callout (masternodes.html :157-165) -------- */
.vms-scope .mn-remember-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(30, 191, 149, .06);
  border: 1px solid rgba(30, 191, 149, .2);
  border-left: 3px solid var(--vms-primary);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}
.vms-scope .mn-remember-card img {
  flex-shrink: 0;
  height: 20px;
  width: auto;
  margin-top: 3px;
  opacity: .85;
}
.vms-scope.vms-tint .mn-remember-card img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(56%) saturate(450%) hue-rotate(118deg) brightness(95%) contrast(90%);
}
.vms-scope .mn-remember-card p {
  margin: 0;
  font-style: italic;
  font-size: .94rem;
  color: #b8d4cf;
  line-height: 1.7;
}