/* DIENSTEN */

.aanbod{
  padding: 2rem 0 3rem;
}

/* wrapper */
.aanbox-flex{
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/* grid met 3 kaarten */
.diensten-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* kaart = link */
.flex-item{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .45rem;

  min-height: 180px;
  padding: 1.1rem 1.2rem;

  border-radius: 18px;
  border: 1px solid var(--border);

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.05)
  );

  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);

  text-decoration: none;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}

.flex-item:hover{
  transform: translateY(-6px);
  border-color: rgba(184,139,74,.45);
  box-shadow: 0 22px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(184,139,74,.12);
}

.flex-item:focus-visible{
  outline: none;
  box-shadow: var(--focus), var(--shadow-soft);
  border-color: rgba(184,139,74,.55);
}

/* titel en tekst */
.flex-item h3{
  margin: 0;
  color: var(--gold);
  font-weight: 900;
  letter-spacing: .01em;
  font-size: 1.15rem;
}

.flex-item p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .95rem;
}

/* subtiele gouden top-line */
.flex-item::before{
  content:"";
  position:absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .6;
}

/* responsive */
@media (max-width: 900px){
  .diensten-grid{ grid-template-columns: 1fr; }
}