/* ==========================================
   ZEKEROPWEG CTA SYSTEEM 1.0
   Enige waarheid voor knoppen
========================================== */

:root{
  --zop-navy: #0b1220;
  --zop-gold: #d7b56d;
  --zop-white: #ffffff;
}

/* ───────────────────────────────
   BASIS
─────────────────────────────── */

.btn-primary,
.btn-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:58px;
  padding:14px 26px;
  border-radius:999px;

  font-size:.88rem;
  letter-spacing:.10em;
  text-align:center;

  transition:all .22s ease;
}

/* ───────────────────────────────
   1. ACTIE = NAVY
─────────────────────────────── */

.btn-primary{
  background:linear-gradient(180deg,#0f172a,#050912);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.btn-primary:hover{
  background:linear-gradient(180deg,#13203a,#050812);
  box-shadow:0 24px 60px rgba(0,0,0,.38);
}

/* ───────────────────────────────
   2. INFO = WIT + MAT GOUD
─────────────────────────────── */

.btn-info{
  background:#ffffff;
  color:var(--zop-navy);

  border:1.5px solid rgba(215,181,109,.55);

  box-shadow:
    0 12px 34px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.btn-info:hover{
  background:#fcfaf6;
  border-color:rgba(215,181,109,.95);

  box-shadow:
    0 18px 44px rgba(0,0,0,.12);
}

/* ───────────────────────────────
   KAART CONTEXT
─────────────────────────────── */

.service-card .btn-info,
.service-card .btn-primary{
  margin-top:22px;
}

/* ───────────────────────────────
   MOBILE
─────────────────────────────── */

@media(max-width:900px){

  .btn-primary,
  .btn-info{
    width:100%;
  }

}