:root{
  --gold:#f5d263;
  --gold-2:#d4af37;
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,215,0,.22);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0a0a0a;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#fff}

/* === Hero met jouw PNG-achtergrond === */
.contact-hero{
  min-height:90svh;
  display:grid;
  place-items:center;
  padding: clamp(1px, 4vw, 40px);
  background: url('contact-bg-desktop.png') center right / cover no-repeat #0a0a0a;
}

/* === Glassy kaart === */
.contact-card{
  width: min(1400px, 100%);
  backdrop-filter: blur(12px);
  background: rgba(10,10,10,.45);
  border: 1px solid var(--stroke);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 32px);
}

/* Titel */
.contact-card h1{
  margin: 0 0 1.5rem;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing:.02em;
  color: var(--gold);
  text-align: center;
}

/* Grid voor form-velden (2 kolommen desktop) */
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.form-grid .span-2{ grid-column: 1 / -1; }

/* Velden */
.field{
  display:flex; flex-direction:column;
  gap:6px;
  padding: 0 25px;   /* 20px ruimte links en rechts binnen elk field */
}
.field label{
  font-weight:600;
  color:var(--gold);
  font-size:0.9rem;
  margin-left: 4px;
}
.field input,
.field textarea{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px 16px;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: all .25s ease;
}
.field input::placeholder,
.field textarea::placeholder{
  color:#aaa;
  font-style: italic;
}
.field input:focus,
.field textarea:focus{
  border-color: rgba(245,210,99,.6);
  box-shadow: 0 0 10px rgba(245,210,99,.25);
}
.field textarea{ resize: vertical; min-height: 120px; }

/* CTA-knop */
.button{
  grid-column: 1 / -1;
  justify-self: center;
  padding: 14px 24px;
  min-width: 240px;
  border:0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  color:#16130a;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow: 0 8px 24px rgba(245,210,99,.35);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  margin: 15px;
  margin-bottom: 25px;
}
.button:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.button:active{ transform: translateY(0); filter: brightness(.95); }

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