/* ============================================================
   WOONGILDE — KeJe Horren plugin
   Outfit (koppen) + DM Sans (body)
   --warm #C8A96E · --dark #1A1A18 · --off-white #F9F6F0
   ============================================================ */

.wg-keje *{margin:0;padding:0;box-sizing:border-box}
.wg-keje{
  --warm:#C8A96E;
  --warm-dark:#B08E4F;
  --dark:#1A1A18;
  --off-white:#F9F6F0;
  --grey:#6b6b66;
  --line:#e7e1d6;
  font-family:'DM Sans',sans-serif;
  color:var(--dark);
  line-height:1.65;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.wg-keje img{max-width:100%;display:block}
.wg-keje h1,.wg-keje h2,.wg-keje h3,.wg-keje h4{font-family:'Outfit',sans-serif;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.wg-keje .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wg-keje em{font-style:normal;color:var(--warm-dark)}
.wg-keje a{color:inherit}
.wg-keje .pt0{padding-top:0}
.wg-keje .btns.center{justify-content:center}

/* ---------- HERO ---------- */
.wg-keje .hero{
  display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch;
  background:var(--off-white);min-height:560px;
}
.wg-keje .hero-txt{padding:76px 60px 76px 28px;max-width:648px;margin-left:auto;align-self:center}
.wg-keje .hero-txt .eyebrow{
  display:inline-block;font-family:'Outfit',sans-serif;font-weight:600;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warm-dark);margin-bottom:22px;
}
.wg-keje .hero-txt h1{font-size:3.35rem;font-weight:800;margin-bottom:22px}
.wg-keje .hero-txt p{font-size:1.14rem;color:var(--grey);margin-bottom:34px}
.wg-keje .hero-img{position:relative;overflow:hidden;background:#ded6c8 center/cover no-repeat}
.wg-keje .hero-badge{
  position:absolute;left:32px;bottom:32px;background:#fff;
  border-radius:16px;padding:16px 22px;display:flex;align-items:center;gap:14px;
  box-shadow:0 18px 40px rgba(26,26,24,.18);
}
.wg-keje .hero-badge .score{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.7rem;color:var(--dark)}
.wg-keje .hero-badge small{display:block;color:var(--grey);font-size:.8rem;line-height:1.3}
.wg-keje .hero-badge .stars{color:var(--warm);font-size:.9rem;letter-spacing:2px}

/* ---------- BUTTONS ---------- */
.wg-keje .btns{display:flex;gap:14px;flex-wrap:wrap}
.wg-keje .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem;
  padding:15px 30px;border-radius:50px;text-decoration:none;
  transition:.25s;cursor:pointer;border:2px solid transparent;
}
.wg-keje .btn-primary{background:var(--dark);color:#fff}
.wg-keje .btn-primary:hover{background:var(--warm);color:var(--dark)}
.wg-keje .btn-ghost{background:transparent;color:var(--dark);border-color:var(--dark)}
.wg-keje .btn-ghost:hover{background:var(--dark);color:#fff}

/* ---------- USP BAR ---------- */
.wg-keje .usps{background:var(--dark);color:#fff}
.wg-keje .usps .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:26px;padding-bottom:26px}
.wg-keje .usp{display:flex;align-items:center;gap:12px;font-size:.96rem}
.wg-keje .usp .tick{color:var(--warm);font-size:1.25rem;line-height:1}
.wg-keje .usp span b{font-weight:600;font-family:'Outfit',sans-serif}

/* ---------- SECTIONS ---------- */
.wg-keje section{padding:84px 0}
.wg-keje .kicker{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--warm-dark);
  margin-bottom:14px;display:block;
}
.wg-keje .sec-head{max-width:760px;margin-bottom:52px}
.wg-keje .sec-head.center{margin:0 auto 52px;text-align:center}
.wg-keje .sec-head h2{font-size:2.5rem;margin-bottom:16px}
.wg-keje .sec-head p{font-size:1.1rem;color:var(--grey)}

/* ---------- INTRO SPLIT ---------- */
.wg-keje .intro{background:var(--off-white)}
.wg-keje .intro .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.wg-keje .intro h2{font-size:2.4rem;margin-bottom:20px}
.wg-keje .intro p{color:var(--grey);margin-bottom:16px;font-size:1.06rem}
.wg-keje .intro .partner{
  margin-top:26px;display:inline-flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 20px;
}
.wg-keje .intro .partner img{width:52px;height:52px;object-fit:contain}
.wg-keje .intro .partner b{font-family:'Outfit',sans-serif;display:block}
.wg-keje .intro .partner small{color:var(--grey)}
.wg-keje .intro-img img{border-radius:18px;width:100%;height:100%;object-fit:cover;box-shadow:0 24px 50px rgba(26,26,24,.14)}

/* ---------- CATEGORY CARDS ---------- */
.wg-keje .cats{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.wg-keje .cat{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;
  transition:.28s;display:flex;flex-direction:column;
}
.wg-keje .cat:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(26,26,24,.13)}
.wg-keje .cat-img{aspect-ratio:16/10;background:#ece6da center/cover no-repeat}
.wg-keje .cat-body{padding:30px 32px 34px}
.wg-keje .cat-body h3{font-size:1.55rem;margin-bottom:10px}
.wg-keje .cat-body p{color:var(--grey);margin-bottom:18px}
.wg-keje .cat-body ul{list-style:none;margin-bottom:6px}
.wg-keje .cat-body li{padding:7px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:.97rem}
.wg-keje .cat-body li::before{content:"—";color:var(--warm);font-weight:700}

/* ---------- PRODUCT GRID ---------- */
.wg-keje .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.wg-keje .prod{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-align:center;transition:.25s;
}
.wg-keje .prod:hover{border-color:var(--warm);box-shadow:0 16px 34px rgba(26,26,24,.10)}
.wg-keje .prod .p-img{aspect-ratio:1/1;background:var(--off-white) center/cover no-repeat}
.wg-keje .prod h4{font-size:1.02rem;padding:16px 14px 6px;font-weight:600}
.wg-keje .prod span{display:block;color:var(--grey);font-size:.84rem;padding:0 14px 18px}

/* ---------- WHY / STEPS ---------- */
.wg-keje .why{background:var(--off-white)}
.wg-keje .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.wg-keje .step{background:#fff;border-radius:18px;padding:34px 28px;border:1px solid var(--line)}
.wg-keje .step .num{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;color:#fff;
  background:var(--warm);width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.wg-keje .step h4{font-size:1.18rem;margin-bottom:10px}
.wg-keje .step p{color:var(--grey);font-size:.98rem}

/* ---------- CTA ---------- */
.wg-keje .cta{background:var(--dark);color:#fff;text-align:center}
.wg-keje .cta h2{font-size:2.6rem;margin-bottom:16px}
.wg-keje .cta h2 em{color:var(--warm)}
.wg-keje .cta p{color:#c9c4ba;font-size:1.12rem;max-width:600px;margin:0 auto 34px}
.wg-keje .cta .btn-primary{background:var(--warm);color:var(--dark)}
.wg-keje .cta .btn-primary:hover{background:#fff}
.wg-keje .cta .btn-ghost{border-color:#fff;color:#fff}
.wg-keje .cta .btn-ghost:hover{background:#fff;color:var(--dark)}
.wg-keje .cta .contact-line{margin-top:26px;color:#9d988e;font-size:.95rem}
.wg-keje .cta .contact-line a{color:var(--warm);text-decoration:none;font-weight:600}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .wg-keje .hero{grid-template-columns:1fr}
  .wg-keje .hero-txt{padding:56px 24px;margin:0;max-width:none}
  .wg-keje .hero-txt h1{font-size:2.5rem}
  .wg-keje .hero-img{min-height:340px}
  .wg-keje .usps .wrap{grid-template-columns:1fr 1fr;gap:16px}
  .wg-keje .intro .wrap{grid-template-columns:1fr;gap:36px}
  .wg-keje .intro-img{order:-1}
  .wg-keje .cats{grid-template-columns:1fr}
  .wg-keje .prods{grid-template-columns:1fr 1fr}
  .wg-keje .steps{grid-template-columns:1fr 1fr}
  .wg-keje .sec-head h2,.wg-keje .intro h2{font-size:2rem}
  .wg-keje .cta h2{font-size:2rem}
  .wg-keje section{padding:60px 0}
}
@media(max-width:520px){
  .wg-keje .prods{grid-template-columns:1fr 1fr}
  .wg-keje .steps{grid-template-columns:1fr}
}

/* ---------- TL;DR / KERNFEITEN (GEO) ---------- */
.wg-keje .tldr{padding-top:64px;padding-bottom:0}
.wg-keje .tldr-box{
  background:var(--off-white);border:1px solid var(--line);
  border-left:5px solid var(--warm);border-radius:16px;
  padding:40px 44px;max-width:1000px;margin:0 auto;
}
.wg-keje .tldr-box h2{font-size:1.6rem;margin-bottom:14px}
.wg-keje .tldr-box .lead{font-size:1.08rem;color:var(--grey);margin-bottom:22px}
.wg-keje .tldr-box .lead strong{color:var(--dark)}
.wg-keje .facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 34px}
.wg-keje .facts li{position:relative;padding-left:22px;font-size:.99rem;color:var(--grey)}
.wg-keje .facts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--warm-dark);font-weight:700}
.wg-keje .facts li strong{color:var(--dark);font-family:'Outfit',sans-serif;font-weight:600}

/* ---------- FAQ ---------- */
.wg-keje .faq-list{max-width:860px;margin:0 auto}
.wg-keje .faq-item{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  margin-bottom:14px;overflow:hidden;transition:.2s;
}
.wg-keje .faq-item[open]{border-color:var(--warm);box-shadow:0 12px 30px rgba(26,26,24,.08)}
.wg-keje .faq-item summary{
  cursor:pointer;list-style:none;padding:22px 56px 22px 26px;position:relative;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:1.12rem;color:var(--dark);
}
.wg-keje .faq-item summary::-webkit-details-marker{display:none}
.wg-keje .faq-item summary::after{
  content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;font-weight:400;color:var(--warm-dark);transition:.25s;line-height:1;
}
.wg-keje .faq-item[open] summary::after{content:"–"}
.wg-keje .faq-item summary:hover{color:var(--warm-dark)}
.wg-keje .faq-a{padding:0 26px 24px}
.wg-keje .faq-a p{color:var(--grey);font-size:1.02rem;margin:0}

@media(max-width:900px){
  .wg-keje .tldr-box{padding:30px 26px}
  .wg-keje .facts{grid-template-columns:1fr;gap:10px}
  .wg-keje .faq-item summary{font-size:1.02rem;padding:18px 50px 18px 20px}
  .wg-keje .faq-a{padding:0 20px 20px}
}