/* Scope op .contact-page om conflicten te vermijden */
.contact-page .contact-wrap{
  width: min(720px, 92%);
  margin-inline: auto;
}



.contact-page .contact-form{
  display: grid;
  gap: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px;
}

.contact-page .row{ display:grid; gap:12px; }
.contact-page .row-2{ grid-template-columns: 1fr 1fr; }
@media (max-width:720px){ .contact-page .row-2{ grid-template-columns: 1fr; } }

.contact-page .field{ display:grid; gap:6px; }
.contact-page label{ font-size:.95rem; color:var(--muted); }

.contact-page input,
.contact-page textarea{
  background:#0f1218;
  border:1px solid rgba(255,255,255,.14);
  color:var(--fg);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.contact-page input:focus,
.contact-page textarea:focus{
  border-color:rgba(158,240,255,.45);
  box-shadow:0 0 0 3px rgba(158,240,255,.12);
}

/* Honeypot verbergen */
.contact-page .hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.contact-page .button{
  width: fit-content;
  background: linear-gradient(135deg, rgba(158,240,255,.25), rgba(255,209,102,.20));
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  transition: background .2s, transform .15s, box-shadow .2s;
}

.contact-page .button:hover{
  background: linear-gradient(135deg, rgba(158,240,255,.45), rgba(255,209,102,.35));
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(158,240,255,.25);
}

.contact-page .form-note{ margin:2px 0 0; font-size:.9rem; }