/* Barefoot Coaching – consistente stijl */
:root{
  --bg:#f6f0e8;
  --ink:#222;
  --muted:#4a4a4a;
  --accent:#1f8f86;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.container{max-width:1100px;margin:0 auto;padding: clamp(16px, 2vw, 28px);}
.nowrap{white-space:nowrap}

/* Header */
.site-header{
  position:sticky;top:0;background:rgba(246,240,232,.9);backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid #e8e0d7; z-index:10;
}
.header-inner{display:flex;align-items:center;gap:24px;justify-content:space-between}
.brand img{height:96px;width:auto;display:block}
.nav a{margin-left:18px;text-decoration:none;color:var(--ink);font-weight:600}
.nav a:hover{color:var(--accent)}
.nav a.linkedin{border:1px solid rgba(0,0,0,.12); padding:6px 10px; border-radius:999px}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero .lead{font-size:1.2rem}
.hero-media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover}

/* Sections */
h1,h2,h3{line-height:1.2;margin:0 0 10px}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:clamp(18px,2.2vw,24px)}
p{margin:0 0 14px}

.grid-two{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
.card{
  background:white;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  border:1px solid #eee;
}
.checklist{list-style:none;padding:0;margin:8px 0 0}
.checklist li{padding-left:30px;position:relative;margin:8px 0}
.checklist li::before{
  content:'✔';position:absolute;left:0;top:0;color:var(--accent);font-weight:700
}

/* CTA */
.cta{margin:16px 0 0; display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block;background:var(--accent);color:white;text-decoration:none;
  padding:12px 18px;border-radius:999px;font-weight:700;box-shadow:var(--shadow)
}
.btn:hover{filter:brightness(1.05)}
.btn.btn-outline{background:transparent;color:var(--accent);border:2px solid var(--accent)}

/* Contact */
.contact p{margin-bottom:8px}
.contact a{color:var(--accent)}

/* Footer */
.site-footer{border-top:1px solid #e8e0d7;margin-top:24px}
.footer-inner{display:flex;justify-content:center}
.site-footer p{font-size:1rem; line-height:1.4; text-align:center}

/* Responsive */
@media (max-width: 860px){
  .hero, .grid-two{grid-template-columns:1fr}
  .nav{display:none}
}