:root{
  --page-bg:#f2f2f0;
  --page-ink:#1a1c1b;
  --page-muted:#5d635f;
  --page-border:#d8dad6;
  --page-surface:#ffffff;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --ui:'Manrope','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--page-ink);
  font-family:var(--ui);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 26px;}

.topbar{
  padding:26px 0;
  border-bottom:1px solid var(--page-border);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{font-family:var(--mono); font-size:14px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;}
.backlink{font-size:14px; color:var(--page-muted); text-decoration:none;}
.backlink:hover{color:var(--page-ink);}

.intro{padding:56px 0 40px; max-width:62ch;}
.intro h1{
  font-size:clamp(28px,4vw,42px);
  line-height:1.1;
  margin:10px 0 0;
  letter-spacing:-0.02em;
  font-weight:800;
  text-wrap:balance;
}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--page-muted);}
.intro p{margin-top:16px; color:var(--page-muted); font-size:16.5px;}

.style-block{padding-bottom:56px;}
.style-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 0 14px;
  border-top:1px solid var(--page-border);
}
.style-name{font-size:19px; font-weight:700;}
.style-for{font-size:14px; color:var(--page-muted);}
.style-no{font-family:var(--mono); font-size:12px; color:var(--page-muted); letter-spacing:.1em;}

/* preview shell */
.preview{
  border:1px solid var(--page-border);
  border-radius:6px;
  overflow:hidden;
}
.pv{padding:44px 40px 40px;}
.pv-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:26px; margin-bottom:30px;
  flex-wrap:wrap;
}
.pv-links{display:flex; gap:20px; font-size:13px;}
.pv h2{margin:0; text-wrap:balance;}
.pv .sub{margin-top:14px; max-width:44ch; font-size:15px;}
.pv .btn{
  display:inline-block; margin-top:24px;
  padding:12px 22px; font-size:14px; font-weight:600; text-decoration:none;
}
.pv-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:38px;
}
.pv-card{padding:20px;}
.pv-card h3{margin:0 0 7px; font-size:15px;}
.pv-card p{margin:0; font-size:13px;}

/* ---------- STIJL 1: helder & zakelijk ---------- */
.s1{background:#fbfbfc; color:#151d2b; font-family:'Manrope',sans-serif;}
.s1 .pv-nav{border-bottom:1px solid #e3e7ee;}
.s1 .logo{font-weight:800; font-size:16px; letter-spacing:-.01em;}
.s1 .pv-links span{color:#5c6a7d;}
.s1 h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.025em; line-height:1.12;}
.s1 .sub{color:#5c6a7d;}
.s1 .btn{background:#1b3a6b; color:#fff; border-radius:5px;}
.s1 .pv-card{background:#fff; border:1px solid #e3e7ee; border-radius:6px;}
.s1 .pv-card h3{color:#151d2b; font-weight:700;}
.s1 .pv-card p{color:#5c6a7d;}

/* ---------- STIJL 2: warm & ambachtelijk ---------- */
.s2{background:#f4f0e6; color:#2c2a1e; font-family:'Manrope',sans-serif;}
.s2 .pv-nav{border-bottom:1px solid #ddd6c2;}
.s2 .logo{font-family:'Fraunces',serif; font-weight:700; font-size:19px;}
.s2 .pv-links span{color:#6b6553;}
.s2 h2{font-family:'Fraunces',serif; font-size:clamp(28px,3.6vw,40px); font-weight:700; line-height:1.08;}
.s2 .sub{color:#6b6553;}
.s2 .btn{background:#5a6b34; color:#f7f4ea; border-radius:2px; letter-spacing:.02em;}
.s2 .pv-card{background:#fbf8f0; border:1px solid #ddd6c2;}
.s2 .pv-card h3{font-family:'Fraunces',serif; font-weight:700;}
.s2 .pv-card p{color:#6b6553;}

/* ---------- STIJL 3: donker & krachtig ---------- */
.s3{background:#101215; color:#f0f2f4; font-family:'Archivo',sans-serif;}
.s3 .pv-nav{border-bottom:1px solid #262b31;}
.s3 .logo{font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:16px;}
.s3 .pv-links span{color:#98a1aa;}
.s3 h2{font-size:clamp(30px,4.4vw,50px); font-weight:900; text-transform:uppercase; line-height:.98; letter-spacing:-.01em;}
.s3 h2 em{color:#f0532d; font-style:normal;}
.s3 .sub{color:#98a1aa;}
.s3 .btn{background:#f0532d; color:#120c09; border-radius:0; text-transform:uppercase; letter-spacing:.06em; font-weight:800;}
.s3 .pv-card{background:#181c21; border:1px solid #262b31;}
.s3 .pv-card h3{text-transform:uppercase; font-weight:800; font-size:13.5px; letter-spacing:.04em;}
.s3 .pv-card p{color:#98a1aa;}

/* ---------- STIJL 4: licht & elegant ---------- */
.s4{background:#f7f4f2; color:#33302e; font-family:'Jost',sans-serif;}
.s4 .pv{padding:52px 44px 46px;}
.s4 .pv-nav{border-bottom:1px solid #e5dedb;}
.s4 .logo{font-family:'Cormorant Garamond',serif; font-size:22px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;}
.s4 .pv-links{font-weight:300; letter-spacing:.06em; text-transform:uppercase; font-size:11.5px;}
.s4 .pv-links span{color:#7b736e;}
.s4 h2{font-family:'Cormorant Garamond',serif; font-size:clamp(30px,4.2vw,46px); font-weight:400; line-height:1.14; letter-spacing:.01em;}
.s4 .sub{color:#7b736e; font-weight:300;}
.s4 .btn{background:transparent; color:#33302e; border:1px solid #33302e; border-radius:0; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; font-weight:400; padding:14px 26px;}
.s4 .pv-card{background:#fdfbfa; border:1px solid #e5dedb;}
.s4 .pv-card h3{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:17px;}
.s4 .pv-card p{color:#7b736e; font-weight:300;}

.closing{
  border-top:1px solid var(--page-border);
  padding:44px 0 60px;
  max-width:62ch;
}
.closing h2{font-size:22px; margin:0 0 12px; font-weight:700;}
.closing p{color:var(--page-muted); font-size:15.5px;}
.closing p + p{margin-top:12px;}
.closing a{color:inherit;}

@media (max-width:720px){
  .pv{padding:30px 22px 28px;}
  .s4 .pv{padding:32px 24px 30px;}
  .pv-row{grid-template-columns:1fr;}
  .pv-links{display:none;}
}