/* =========================================================
   Zachte Huid - CLEAN BEAUTY / FIJNE TITELS
   Vervang enkel: assets/css/style.css
   Correctie: titels veel kleiner, eleganter en minder vet.
   ========================================================= */

:root{
  --bg:#fbfffd;
  --bg-soft:#f3faf7;
  --surface:#ffffff;
  --surface-soft:#f7fbf8;
  --text:#31423d;
  --muted:#6f7f79;
  --heading:#20332d;
  --primary:#7bc8b4;
  --primary-dark:#3f9881;
  --primary-soft:#eaf7f3;
  --accent:#f4c8ba;
  --accent-soft:#fff5f1;
  --sand:#f5efe7;
  --border:#e3eee9;
  --whatsapp:#25d366;
  --whatsapp-dark:#128c4a;
  --shadow:0 18px 45px rgba(46,76,65,.09);
  --shadow-soft:0 8px 24px rgba(46,76,65,.06);
  --radius:22px;
  --radius-lg:34px;
  --container:1160px;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.72;
  background:
    radial-gradient(circle at 8% 0%, rgba(123,200,180,.18), transparent 26rem),
    radial-gradient(circle at 94% 8%, rgba(244,200,186,.20), transparent 24rem),
    linear-gradient(180deg,#ffffff 0%,var(--bg) 45%,#ffffff 100%);
  font-size:16px;
  font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem;color:var(--muted);font-weight:400}
h1,h2,h3{
  margin:0 0 .85rem;
  color:var(--heading);
  line-height:1.22;
  letter-spacing:-.012em;
  font-weight:430;
}
h1{
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  font-weight:430;
  letter-spacing:-.018em;
  max-width:820px;
}
h2{
  font-size:clamp(1.35rem,2.25vw,1.95rem);
  font-weight:420;
  letter-spacing:-.01em;
}
h3{
  font-size:clamp(1rem,1.35vw,1.12rem);
  font-weight:460;
  letter-spacing:0;
}
.container{width:min(var(--container),calc(100% - 2rem));margin-inline:auto}

/* Top bar */
.topbar{
  background:#f3faf7;
  color:#58716a;
  border-bottom:1px solid var(--border);
  font-size:.92rem;
}
.topbar .container{
  min-height:42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.topbar a{color:var(--primary-dark);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Header */
.navbar{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(227,238,233,.9);
  backdrop-filter:blur(18px);
}
.nav-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}
.brand{display:flex;flex-direction:column;gap:.08rem}
.brand strong{
  font-size:1.18rem;
  line-height:1;
  font-weight:450;
  letter-spacing:-.04em;
  color:var(--heading);
}
.brand span{font-size:.82rem;color:var(--primary-dark);font-weight:430;letter-spacing:.01em}
.mobile-toggle{display:none}
.nav-links{display:flex;align-items:center;gap:.12rem;flex-wrap:wrap;justify-content:flex-end}
.nav-links a:not(.btn){
  padding:.62rem .72rem;
  border-radius:999px;
  color:#526862;
  font-weight:430;
  font-size:.94rem;
}
.nav-links a:not(.btn):hover{background:var(--primary-soft);color:var(--primary-dark)}

/* Buttons */
.btn,
button,
input[type='submit']{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.78rem 1.18rem;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--heading);
  color:#fff!important;
  font-weight:500;
  font-size:.95rem;
  box-shadow:0 10px 24px rgba(32,51,45,.12);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover,button:hover,input[type='submit']:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(32,51,45,.16)}
.btn.outline,.btn.light{
  background:#fff;
  color:var(--heading)!important;
  border-color:var(--border);
  box-shadow:var(--shadow-soft);
}
.whatsapp-btn,
a[href*='wa.me']{
  background:var(--whatsapp)!important;
  color:#fff!important;
  border-color:rgba(18,140,74,.08)!important;
  box-shadow:0 12px 28px rgba(37,211,102,.22)!important;
}
a[href*='wa.me']:hover{background:var(--whatsapp-dark)!important}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(3.7rem,6vw,6.2rem) 0 clamp(3.8rem,6vw,6rem);
}
.hero:before{
  content:'';
  position:absolute;
  right:-13rem;
  top:8%;
  width:42rem;
  height:42rem;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(123,200,180,.25),rgba(244,200,186,.20));
  filter:blur(18px);
  z-index:-1;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(320px,.86fr);
  gap:clamp(2rem,5vw,4.8rem);
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-bottom:1.05rem;
  padding:.42rem .78rem;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  border:1px solid rgba(123,200,180,.22);
  font-weight:500;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.lead,.hero p{
  max-width:690px;
  color:#61746e;
  font-size:clamp(.98rem,1.15vw,1.06rem);
  line-height:1.76;
}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.75rem}
.quick-contact{
  margin-top:1.35rem;
  display:inline-flex;
  flex-direction:column;
  gap:.12rem;
  padding:.95rem 1.05rem;
  border-radius:18px;
  background:rgba(255,255,255,.80);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
.quick-contact strong{color:var(--heading);font-weight:500}
.quick-contact span{color:var(--muted);font-size:.94rem}
.hero-card{
  position:relative;
  padding:.55rem;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.hero-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:calc(var(--radius-lg) - .55rem);
}
.floating{
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:1.2rem;
  padding:.85rem 1rem;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  color:var(--heading);
  font-weight:450;
  text-align:center;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft);
}

/* Sections */
section{padding:clamp(3.5rem,6.2vw,6rem) 0}
section:first-child{padding-top:0}
.section-title{max-width:840px;margin-bottom:1.85rem}
.section-title p{font-size:1rem}
.card{
  background:rgba(255,255,255,.90);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.intro-card{
  display:grid;
  grid-template-columns:1.24fr .76fr;
  gap:2rem;
  align-items:center;
  padding:clamp(1.45rem,4vw,2.8rem);
  background:linear-gradient(135deg,#ffffff,var(--surface-soft));
}

/* Benefits */
.benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.benefit{
  min-height:118px;
  padding:1.2rem;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  color:#425952;
  font-weight:500;
}
.benefit:before{
  content:'✓';
  display:grid;
  place-items:center;
  width:31px;height:31px;
  margin-bottom:.75rem;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-weight:500;
}

/* Treatments / steps / locations */
.treatments,.steps,.locations{display:grid;gap:1rem}
.treatments{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps,.locations{grid-template-columns:repeat(2,minmax(0,1fr))}
.treatment,.step,.location-card{padding:1.45rem;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.treatment:hover,.step:hover,.location-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfe4dc}
.treatment h3,.step h3,.location-card h3{color:var(--heading)}
.meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.pill{
  display:inline-flex;
  align-items:center;
  padding:.4rem .7rem;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:.88rem;
  font-weight:450;
}
.pill:nth-child(2){background:var(--accent-soft);color:#aa6c5f}

/* Split / geo */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
  align-items:stretch;
}
.split>.card,.geo{padding:clamp(1.45rem,4vw,2.45rem)}
.geo{
  border-radius:var(--radius);
  background:linear-gradient(135deg,#eef8f4,#fff7f3);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
.geo h2{color:var(--heading)}
.geo p{color:var(--muted)}
.geo .eyebrow{background:#fff;color:var(--primary-dark);border-color:var(--border)}
.list{padding:0;margin:0;list-style:none;display:grid;gap:.7rem}
.list li{
  padding:.82rem .95rem;
  border-radius:15px;
  background:var(--surface-soft);
  color:#465b55;
  font-weight:430;
}
.list li:before{content:'•';color:var(--primary-dark);font-weight:500;margin-right:.42rem}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.8rem;
}
.gallery img{
  width:100%;
  aspect-ratio:1/1.12;
  object-fit:cover;
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  border:4px solid #fff;
}
.gallery img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
details{
  border-radius:18px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
summary{
  list-style:none;
  cursor:pointer;
  padding:1.05rem 1.15rem;
  color:var(--heading);
  font-weight:450;
}
summary::-webkit-details-marker{display:none}
details p{padding:0 1.15rem 1.15rem}
details[open]{background:linear-gradient(135deg,#fff,var(--surface-soft))}

/* CTA */
.cta:not(.btn){
  text-align:center;
  padding:clamp(2rem,5vw,3.1rem);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#ecf8f4,#fff5f1);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
.cta:not(.btn) h2{color:var(--heading)}
.cta:not(.btn) p{color:var(--muted);max-width:720px;margin-inline:auto;margin-bottom:1.35rem}
.cta:not(.btn) .btn{background:var(--heading)!important;color:#fff!important;box-shadow:0 12px 28px rgba(32,51,45,.14)!important}

/* Footer */
.footer{
  padding:3.4rem 0 2rem;
  background:#20332d;
  color:rgba(255,255,255,.76);
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.footer h2,.footer h3{color:#fff}.footer p{color:rgba(255,255,255,.76)}.footer a{color:#fff;font-weight:450}.admin-link{opacity:.6}

/* Floating WhatsApp */
.floating-whatsapp{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:90;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:53px;
  padding:.95rem 1.15rem;
  border-radius:999px;
  background:var(--whatsapp);
  color:#fff!important;
  font-weight:500;
  box-shadow:0 16px 40px rgba(37,211,102,.34);
}
.floating-whatsapp:before{content:'💬';margin-right:.42rem}

/* Forms/admin */
input,textarea,select{
  width:100%;min-height:48px;padding:.84rem 1rem;border:1px solid var(--border);border-radius:15px;background:#fff;color:var(--text);font:inherit;outline:none
}
textarea{min-height:130px;resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(123,200,180,.16)}label{display:block;margin-bottom:.38rem;color:var(--heading);font-weight:450}

@media(max-width:980px){
  .hero-grid,.intro-card,.split,.footer-grid{grid-template-columns:1fr}
  .treatments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:15.5px}
  .container{width:min(100% - 1.1rem,var(--container))}
  .topbar .container{flex-direction:column;align-items:flex-start;justify-content:center;padding:.65rem 0;gap:.12rem}
  .nav-inner{min-height:auto;padding:.9rem 0;align-items:flex-start;flex-direction:column}
  .mobile-toggle{display:inline-flex;width:auto;min-height:40px;padding:.55rem .85rem;font-size:.88rem;box-shadow:none;background:#fff;color:var(--heading)!important;border-color:var(--border)}
  .nav-links{width:100%;display:none;grid-template-columns:1fr;gap:.42rem}.nav-links.open{display:grid}
  .nav-links a:not(.btn),.nav-links .btn{width:100%;justify-content:center;text-align:center}
  h1{font-size:clamp(1.65rem,7vw,2.2rem);line-height:1.24}
  h2{font-size:clamp(1.25rem,5.6vw,1.65rem);line-height:1.28}
  h3{font-size:1rem}
  .hero{padding-top:3.2rem}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%}
  .quick-contact{width:100%}
  .treatments,.steps,.locations,.benefits{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:.65rem}.gallery img:first-child{grid-column:span 2}
  .floating-whatsapp{left:.75rem;right:.75rem;bottom:.75rem;width:auto}.footer{padding-bottom:5.5rem}
}
@media(max-width:430px){.gallery{grid-template-columns:1fr}.gallery img:first-child{grid-column:span 1}.card,.treatment,.step,.location-card,details{border-radius:18px}}


/* Extra correctie voor zachte, kleine titels */
.hero h1,
main h1,
section h1{
  font-size:clamp(1.75rem,3.4vw,2.75rem) !important;
  font-weight:430 !important;
  line-height:1.22 !important;
  letter-spacing:-.018em !important;
}
section h2,
.section-title h2,
.cta h2,
.geo h2,
.footer h2{
  font-size:clamp(1.35rem,2.25vw,1.95rem) !important;
  font-weight:420 !important;
  line-height:1.28 !important;
  letter-spacing:-.01em !important;
}
.card h3,
.treatment h3,
.step h3,
.location-card h3,
.footer h3,
summary{
  font-size:1rem !important;
  font-weight:460 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
}
@media(max-width:760px){
  .hero h1,main h1,section h1{font-size:clamp(1.58rem,7vw,2.05rem) !important;}
  section h2,.section-title h2,.cta h2,.geo h2,.footer h2{font-size:clamp(1.22rem,5.2vw,1.55rem) !important;}
}