:root {
  --accent: #1da1f2;
  --muted: #555;
  --bg: #f8f8f8;
  --radius: 16px;
  --maxw: 1200px;
  font-family: "Inter", system-ui, sans-serif;
  --shadow-soft: 0 6px 24px rgba(0,0,0,0.1);
  --shadow-deep: 0 12px 40px rgba(0,0,0,0.15);
  --border-color: #e0e0e0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: #222; line-height: 1.6; font-size: 16px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { background:#fff; border-bottom:2px solid var(--border-color); position:sticky; top:0; z-index:10; box-shadow:var(--shadow-soft); }
.header-inner { display:flex; justify-content:space-between; align-items:center; padding:24px 0; }
.brand h1 { font-size:26px; color:var(--accent); margin:0; letter-spacing:1px; text-shadow:1px 1px 2px rgba(0,0,0,0.1); }
.main-nav { display:flex; align-items:center; }
.main-nav a { margin-left:24px; color:var(--muted); text-decoration:none; transition:all .3s; font-weight:500; position:relative; }
.main-nav a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--accent); transition:width .3s; }
.main-nav a:hover { color:var(--accent); transform:translateY(-2px); }
.main-nav a:hover::after { width:100%; }
.btn-outline { border:2px solid var(--border-color); padding:8px 14px; border-radius:10px; transition:all .3s; background:#fff; }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-soft); }

/* Hamburger */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:0; z-index:11; }
.hamburger span { display:block; width:28px; height:4px; background:var(--muted); margin:6px 0; transition:all .3s; border-radius:2px; }

/* Hero */
.hero { padding:100px 0; background:linear-gradient(to bottom,#fff,#f0f0f0); box-shadow:inset 0 -10px 20px rgba(0,0,0,.05); }
.hero-grid { display:grid; grid-template-columns:1fr 450px; gap:48px; align-items:center; }
.hero h1 { font-size:44px; margin:14px 0; letter-spacing:-1px; text-shadow:2px 2px 4px rgba(0,0,0,.1); }
.lead { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:1.5px; border-bottom:1px solid var(--accent); display:inline-block; padding-bottom:4px; }
.sub { color:var(--muted); max-width:60ch; font-size:18px; }
.hero-image { width:100%; height:360px; overflow:hidden; border-radius:20px; box-shadow:var(--shadow-deep); border:1px solid var(--border-color); }
.hero-image-img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hero-image:hover .hero-image-img { transform:scale(1.05); }

/* Buttons */
.btn { display:inline-block; border:none; border-radius:10px; padding:16px 24px; cursor:pointer; font-weight:600; text-decoration:none; transition:all .3s; box-shadow:var(--shadow-soft); position:relative; overflow:hidden; }
.btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,.2); transition:left .3s; }
.btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-deep); }
.btn:hover::before { left:0; }
.btn-primary { background:linear-gradient(to right,var(--accent),#0d8bdc); color:#fff; }
.btn-secondary { background:#fff; border:2px solid var(--border-color); color:var(--accent); }
.btn-secondary:hover { border-color:var(--accent); background:rgba(29,161,242,.05); }

/* Sections */
.section { padding:100px 0; border-top:1px solid var(--border-color); }
.section h2 { font-size:34px; margin-bottom:14px; letter-spacing:-1px; position:relative; text-shadow:1px 1px 2px rgba(0,0,0,.05); }
.section h2::after { content:''; display:block; width:80px; height:4px; background:linear-gradient(to right,var(--accent),transparent); margin:12px 0; }
.section-intro { color:var(--muted); margin-bottom:28px; font-style:italic; border-left:4px solid var(--accent); padding-left:12px; }

/* Over ons */
.about-grid { display:grid; grid-template-columns:450px 1fr; gap:48px; align-items:center; margin-top:32px; }
.about-image { width:100%; height:360px; overflow:hidden; border-radius:20px; box-shadow:var(--shadow-deep); border:1px solid var(--border-color); }
.about-image-img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.about-image:hover .about-image-img { transform:scale(1.05); }
.about-text p { font-size:17px; line-height:1.7; }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; margin-top:28px; }
.card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:all .3s; border:1px solid var(--border-color); }
.card:hover { transform:translateY(-8px); box-shadow:var(--shadow-deep); }
.service-image { width:100%; height:220px; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0; transition:transform .3s; }
.card:hover .service-image { transform:scale(1.03); }
.card h3 { margin:18px 24px 10px; color:var(--accent); font-size:22px; }
.card p { margin:0 24px 24px; color:var(--muted); }

/* Reviews */
.review-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; margin-top:28px; }
.review { background:#fff; padding:28px; border-radius:var(--radius); font-style:italic; box-shadow:var(--shadow-soft); border-left:6px solid var(--accent); transition:all .3s; border:1px solid var(--border-color); position:relative; }
.review::before { content:'“'; font-size:60px; color:var(--accent); position:absolute; top:-10px; left:10px; opacity:.2; }
.review::after { content:'”'; font-size:60px; color:var(--accent); position:absolute; bottom:-30px; right:10px; opacity:.2; }
.review:hover { transform:translateY(-6px); box-shadow:var(--shadow-deep); }
.stars { color:#ffd700; font-size:20px; margin-bottom:10px; }
.review p { margin-bottom:14px; }
.review cite { display:block; margin-top:14px; font-weight:600; color:var(--accent); }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 500px; gap:48px; }
.contact-info p { margin-bottom:20px; }
.info-list { list-style:none; padding:0; }
.info-list li { margin-bottom:10px; font-size:16px; }
.contact-form { background:#fff; padding:28px; border-radius:var(--radius); box-shadow:var(--shadow-deep); border:1px solid var(--border-color); }
.form-row { margin-bottom:18px; }
label { display:block; font-weight:600; margin-bottom:10px; color:var(--muted); }
input, textarea, select { width:100%; border:1px solid var(--border-color); border-radius:8px; padding:14px; font-size:16px; transition:all .3s; box-shadow:inset 0 2px 4px rgba(0,0,0,.05); background:#fafafa; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(29,161,242,.15); background:#fff; }
textarea { resize:vertical; }
.form-actions { display:flex; align-items:center; gap:14px; }
.form-msg { font-size:14px; color:var(--muted); }

/* Footer */
.site-footer { background:linear-gradient(to top,#fff,#f8f8f8); border-top:1px solid var(--border-color); padding:28px 0; font-size:14px; box-shadow:var(--shadow-soft) inset; }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-inner a { color:var(--accent); text-decoration:none; transition:all .3s; position:relative; }
.footer-inner a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--accent); transition:width .3s; }
.footer-inner a:hover::after { width:100%; }

/* Responsive */
@media(max-width:900px){
  .hero-grid, .contact-grid, .about-grid { grid-template-columns:1fr; }
  .about-image { order:-1; height:300px; }
}
@media(max-width:768px){
  .container { padding:0 16px; }
  .header-inner { padding:16px 0; }
  .brand h1 { font-size:20px; margin-left:8px; }
  .hamburger { display:block; margin-right:8px; }
  .main-nav { display:none; flex-direction:column; position:absolute; top:100%; left:0; width:100%; background:#fff; box-shadow:var(--shadow-soft); padding:20px 0; z-index:10; }
  .main-nav.active { display:flex; }
  .main-nav a { margin:10px 0; margin-left:0; text-align:center; display:block; }
  .btn-outline { margin:10px auto; display:block; width:fit-content; }
}
@media(max-width:500px){
  .brand h1 { font-size:18px; margin-left:4px; }
}

/* Hamburger animatie */
.hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg) translate(7px,-6px); }

/* Bedankt-pagina */
.thankyou-page {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 40px 0;
}
.thankyou-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.thankyou-content h1 {
  font-size: 36px;
  margin-bottom: 16px;
  color: var(--accent);
}
.thankyou-content p {
  font-size: 18px;
  margin-bottom: 24px;
  color: var(--muted);
}

/* reCAPTCHA v3 badge verbergen (toegestaan) */
.grecaptcha-badge { visibility: hidden; }