/* GemFin — Certificates page add-ons (keeps layout from your sample) */

/* Cards (reuse your variables + subtle hover lift) */
.gf-card {
  border-radius: 1.25rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gf-card:hover { transform: translateY(-2px); }

/* Section title weight */
.section-title { font-weight: 800; letter-spacing: .2px; }

/* Progress Ladder — pure HTML/CSS (matches your original layout) */
.ladder{
  position:relative;
  background:linear-gradient(135deg, rgba(56,207,255,.08), rgba(255,211,110,.06));
  border:1px solid var(--gf-edge);
  border-radius:20px;
  padding:2rem;
  overflow:hidden;
}
.ladder .subtitle{color:var(--gf-sub); margin-bottom:.75rem;}
.steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:1.25rem;
  position:relative;
}
.steps::before{
  content:"";
  position:absolute;
  top:42px; left:8%;
  right:8%;
  height:4px;
  background:linear-gradient(90deg, var(--gf-accent), var(--gf-gold));
  opacity:.35;
  border-radius:999px;
}
.step{ text-align:center; position:relative; z-index:1; }
.node{
  width:84px; height:84px; margin:0 auto .6rem;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(56,207,255,.22), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,211,110,.18), transparent 50%),
    #121a24;
  border:2px solid var(--gf-edge);
  display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.node::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:50%;
  padding:2px;
  background:linear-gradient(135deg, var(--gf-accent), var(--gf-gold));
  -webkit-mask:
    radial-gradient(farthest-side, #0000 68%, #000 70%) content-box,
    radial-gradient(farthest-side, #000 68%, #0000 70%);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.65;
  transition:opacity .25s ease;
}
.step:hover .node{ transform:translateY(-3px); border-color:transparent; box-shadow:0 12px 26px rgba(0,0,0,.55); }
.step:hover .node::after{ opacity:1; }

.label{ font-weight:700; line-height:1.2; }
.mini{ font-size:.82rem; color:var(--gf-sub); }
.anchor{ display:inline-block; margin-top:.5rem; font-size:.88rem; }
.anchor.link-gf{ text-decoration:none; }
.anchor.link-gf:hover{ text-decoration:underline; }

/* Mobile: vertical ladder */
@media (max-width: 768px){
  .steps{ grid-template-columns:1fr; }
  .steps::before{
    top:4%; bottom:4%;
    left:42px; right:auto; width:4px; height:auto;
    background:linear-gradient(180deg, var(--gf-accent), var(--gf-gold));
  }
  .step{ display:grid; grid-template-columns:84px 1fr; gap:1rem; text-align:left; align-items:center; }
  .node{ margin:0; }
}

/* Buttons: use your .btn-gf-accent (lighter hover already defined in your CSS) */
/* Utility tweaks */
.doc-title{ color: var(--gf-text); }
.lead{ color: var(--gf-sub); }

/* Optional: spotlight/ladder border harmony */
.ladder{ border-color: var(--gf-edge); }