/* v5 - solid buttons, GD captcha image */
:root {
  --brand: #8454AF;
  --brand-2: #97C972;
  --green: #97C972;
  --purple: #8454AF;
  --text: #111;
  --muted: #666;
  --card: #fff;
  --border: #e6e8ef;
}

* { box-sizing: border-box; }
html, body {
  margin:0; padding:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  scroll-behavior:smooth;
    background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.05) 0,
      rgba(0,0,0,0.025) 1px,
      transparent 1px,
      transparent 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.025) 0,
      rgba(0,0,0,0.025) 1px,
      transparent 1px,
      transparent 24px
    );
  background-color: #fff;
}

.clr1 {
	color: var(--green)
}
.clr2 {
	color: var(--purple)
}
.container { width:min(1100px,92%); margin:0 auto; }

.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; gap:12px; align-items:center; }
.brand img { height:40px; width:auto; display:block; }
.brand-name { font-weight:700; letter-spacing:.2px; }

.button {
  border: none;
  background: var(--green);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .06s ease;
}
.button:hover { background: var(--purple); }
.button:active { transform: translateY(1px); }

.hero { padding: 56px 0 24px 168px; text-align:left; }
.hero .logo { height:96px; width:auto; }
.hero h1 { margin:18px 0 8px; font-size: clamp(28px, 4vw, 38px); }
.hero p { margin:0; color:var(--muted); }

.grid { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; margin:28px 0 60px; }
@media (max-width: 860px) { .grid { grid-template-columns:1fr; } 
.hero { padding: 56px 0 24px 16px; text-align:left; }
}

.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:0 10px 24px rgba(0,0,0,.06); }

.section-title { margin:0 0 8px; font-size:18px; letter-spacing:.2px; }
.kvk { color:var(--muted); margin-bottom:2px; }

.divider { height:2px; background: linear-gradient(90deg, transparent, var(--brand) 30%, var(--brand-2) 70%, transparent); border-radius:2px; margin:18px 0 10px; }

.form label { display:block; font-weight:600; margin:12px 0 6px; }
.form input, .form textarea {
  width:100%; padding:12px;
  border:1px solid var(--border); border-radius:10px; font-size:15px; background:#fff; outline:none;
}
.form input:focus, .form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,0,0,.04); }

.form button { margin-top:12px; width:100%; padding:12px 16px; border-radius:12px; background: var(--green); color:#fff; border:none; font-weight:700; cursor:pointer; }
.form button:hover { background: var(--purple); }
.form small.note { color:var(--muted); display:block; margin-top:8px; }

.captcha-row { display:flex; align-items:center; gap:12px; margin-top:8px; }
.captcha-row img { display:block; height:40px; border-radius:8px; border:1px solid var(--border); background:#fff; padding:4px; }

.alert { padding:12px 14px; border-radius:10px; margin:10px 0 0; font-weight:600; }
.alert.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

footer { text-align:center; padding: 180px 0 40px; }


.spinner {
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Center de kaartenblok + responsief stapelen --- */
.container.grid {
  /* override bredere container-standaard */
  width: min(960px, 92%);
  margin: 48px auto;           /* mooi gecentreerd op de pagina */
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 16px;
  justify-content: center;      /* center het hele grid als blok */
  align-items: start;
}

.container.grid .card {
  height: 100%;
}

/* Mobiel: onder elkaar */
@media (max-width: 860px) {
  .container.grid {
    width: min(680px, 92%);
    grid-template-columns: 1fr;
    margin: 32px auto;
  }
}