/* ===== LUNA&MAX – stijl. Pas kleuren en lettertypes hier aan. ===== */
:root{
  --pink:#F5A0C4; --pink-light:#FCE3EE; --pink-mid:#F8BED6; --pink-line:#E583AE;
  --magenta:#B91663; --wine:#7A0E40; --plum:#4A1131; --white:#fff;
  --head:'Rubik',sans-serif; --body:'DM Sans',system-ui,sans-serif;
  --maxw:1200px; --radius:22px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--pink);color:var(--plum);font-family:var(--body)}
a{color:var(--wine)} a:hover{color:var(--plum)}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto}
h1,h2,h3{font-family:var(--head);margin:0}
h1{font-weight:900;font-size:clamp(40px,5.2vw,68px);line-height:1.04;letter-spacing:-1px}
h2{font-weight:800;font-size:clamp(30px,3.8vw,46px);line-height:1.1}
h3{font-weight:700}
p{margin:0}
.eyebrow{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:2.4px;text-transform:uppercase;color:var(--wine)}
.on-dark .eyebrow{color:var(--pink)} .on-dark h2,.on-dark h3{color:#fff}
.lead{font-size:21px;line-height:1.5}
.sec{padding:72px 24px} .stack{display:flex;flex-direction:column;gap:16px}
.center{align-items:center;text-align:center}
.dark{background:var(--plum);color:var(--pink-light)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--pink-light);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:10px}
.card p{font-size:17px;line-height:1.55}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* knoppen */
.btn{font-family:var(--head);font-weight:700;font-size:18px;border-radius:999px;padding:16px 30px;min-height:52px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:0;cursor:pointer}
.btn-primary,.btn-primary:hover{background:var(--magenta);color:#fff}
.btn-light,.btn-light:hover{background:var(--pink-light);color:var(--plum)}
.btn-dark,.btn-dark:hover{background:var(--plum);color:#fff}
.btn-pink,.btn-pink:hover{background:var(--pink);color:var(--plum)}
.btn-white,.btn-white:hover{background:#fff;color:var(--plum)}
.pill{font-weight:700;font-size:15px;background:var(--pink-light);padding:9px 16px;border-radius:999px}
/* header / footer */
header{padding:18px 24px;border-bottom:1px solid var(--pink-line)}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
header img{width:190px;height:auto;display:block}
nav.main{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-family:var(--head);font-weight:500;font-size:16px}
nav.main a{color:var(--plum);text-decoration:none;padding:10px 0}
nav.main a[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:6px}
nav.main a.cta{font-weight:700;color:#fff;background:var(--magenta);padding:12px 22px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
nav.main a.cta[aria-current]{background:var(--plum)}
footer{background:var(--plum);color:var(--pink-light);padding:40px 24px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
footer a{color:var(--pink-light)} footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer strong{font-family:var(--head);color:#fff}
/* home */
.range-box{background:var(--pink-light);border-radius:28px;padding:clamp(16px,3vw,36px)}
.range-box img{display:block;width:100%;height:auto}
.tile{text-decoration:none;color:var(--plum)}
.tile h3{font-weight:800;font-size:28px}
.tile .more{font-family:var(--head);font-weight:700;font-size:16px;color:var(--wine);margin-top:auto}
.contact-box{background:var(--pink-light);border-radius:28px;padding:clamp(24px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.avatar{flex:none;width:72px;height:72px;border-radius:50%;background:var(--magenta);color:#fff;font-family:var(--head);font-weight:800;font-size:24px;display:inline-flex;align-items:center;justify-content:center}
/* retailers */
.split{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.split>.text{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:26px}
.split>.pic{flex:1 1 380px;min-width:0;display:flex;justify-content:center}
.pic .frame{width:100%;max-width:460px;background:var(--pink-light);border-radius:28px;padding:20px}
.stats{margin:-56px auto 0;background:#fff;border-radius:24px;padding:32px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));box-shadow:0 12px 40px rgba(74,17,49,.10)}
.stats b{display:block;font-family:var(--head);font-weight:900;font-size:48px;color:var(--magenta)}
.stats span{font-size:16px;line-height:1.4}
.label{font-family:var(--head);font-weight:800;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;color:var(--wine)}
.card h3{font-size:24px;line-height:1.2}
.cmp{background:#fff;border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:18px}
.cmp.dark{background:var(--plum)} .cmp h3{font-weight:800;font-size:26px}
.cmp ul{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:12px;font-size:18px;line-height:1.5}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.steps li{border:1px solid rgba(245,160,196,.4);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:12px}
.steps b{font-family:var(--head);font-weight:900;font-size:40px;color:var(--pink)}
.steps h3{font-size:23px} .steps p{font-size:17px;line-height:1.55}
.pack{background:var(--pink-light);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px}
.pack img{width:100%;height:200px;object-fit:contain}
.pack h3{font-weight:800;font-size:24px} .pack p{font-size:17px;line-height:1.55}
.trust{border-top:4px solid var(--magenta);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.trust h3{font-size:21px} .trust p{font-size:17px;line-height:1.55}
.cta-box{background:var(--magenta);border-radius:32px;padding:clamp(28px,5vw,64px);display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;color:#fff}
.cta-box .text{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px}
.cta-box h2{font-weight:900;font-size:clamp(34px,4.5vw,52px);line-height:1.05}
.cta-box .avatar{width:60px;height:60px;background:#fff;color:var(--magenta);font-size:20px}
form.req{flex:1 1 360px;min-width:0;background:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px;color:var(--plum)}
form.req label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px;flex:1 1 140px}
form.req input,form.req select{font:inherit;font-weight:400;font-size:17px;padding:12px 14px;border:1.5px solid #D9A3BC;border-radius:12px;min-height:48px;background:#fff;width:100%}
/* products */
.seg{padding:32px 24px 24px}
.seg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;border-bottom:2px solid var(--pink-line);padding-bottom:12px;margin-bottom:20px}
.seg-head h2{font-size:30px} .seg-head span{font-size:17px}
.pgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prod{background:var(--pink-light);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.prod .img{background:var(--pink-mid);padding:16px;height:210px;display:flex;align-items:center;justify-content:center}
.prod img{width:100%;height:100%;object-fit:contain}
.prod .info{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.prod h3{font-size:20px} .prod .w{font-size:16px;font-weight:700;color:var(--wine)} .prod .meta{font-size:15px;line-height:1.5}
.banner{background:var(--plum);color:var(--pink-light);border-radius:28px;padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.banner h2{font-size:clamp(26px,3vw,36px);color:#fff}

/* kenmerk-iconen onder de range-afbeelding (home) */
.icons{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,3vw,32px);margin-top:24px}
.icons img{width:clamp(55px,8vw,80px);height:auto;display:block}
/* grafiek "Share growth" in de hero van retailers.html */
.share-fig{margin:0}
.share-fig figcaption{margin-top:14px;text-align:center;font-size:15px;line-height:1.4;color:#6B4A5C}

/* vertrouwen + certificeringen (retailers.html) */
.trust-grid{display:grid;gap:24px;grid-template-columns:1fr}
.trust.cert{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;column-gap:40px;row-gap:8px;align-items:start;grid-template-rows:auto 1fr}
.trust.cert .certs{grid-column:2;grid-row:1/span 2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,180px);gap:12px}
.certs li{background:#FFECF3;border-radius:12px;overflow:hidden;line-height:0}
.certs img{width:100%;height:auto;display:block}
@media (max-width:900px){
  .trust.cert{grid-template-columns:1fr}
  .trust.cert .certs{grid-column:1;grid-row:auto;margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(140px,180px))}
}

/* link in het contactblok op de magenta achtergrond (retailers) */
.cta-box .text a{color:#fff}
/* formulier: losse velden niet uitrekken (alleen de labels naast elkaar in een rij mogen groeien) */
form.req>label{flex:none}
form.req .row{align-items:flex-end}

/* foto van de oprichter in de contactblokken */
.avatar-photo{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
.cta-box .avatar-photo{width:60px;height:60px;border:2px solid #fff}

/* ===== Verbeteringen (v2) ===== */
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.dark :focus-visible,.cta-box :focus-visible{outline-color:#fff}
.btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(74,17,49,.18)}
.btn-primary:hover{background:#A3115A}
.tile{transition:transform .15s ease,box-shadow .15s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(74,17,49,.14)}
/* header: logo + CTA op één regel, links eronder op mobiel */
header .wrap{flex-wrap:nowrap}
header .nav-links{display:flex;gap:8px 28px;align-items:center}
@media (max-width:760px){
  header{padding:14px 20px}
  header .wrap{flex-wrap:wrap;gap:10px 12px}
  header img{width:140px}
  nav.main{display:contents}
  nav.main a.cta{order:2;padding:10px 18px;font-size:15px;min-height:42px}
  header .nav-links{order:3;width:100%;justify-content:space-between;gap:8px;font-size:15px}
  nav.main .nav-links a{padding:8px 0}
  .sec{padding:56px 20px}
}
/* USP-strip onder hero */
.usp{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
/* productkaarten: grotere packshots, handelsdata als tabel */
.prod{transition:transform .15s ease,box-shadow .15s ease}
.prod:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(74,17,49,.12)}
.prod .img{overflow:hidden;padding:0}
.prod img{transform:scale(1.35) translateX(4%)}
.prod dl{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14.5px;line-height:1.45}
.prod dt{color:var(--wine);font-weight:700}
.prod dd{margin:0;font-variant-numeric:tabular-nums}
.seg-head .count{margin-left:auto;font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--wine)}
.pack img{transform:scale(1.5)}
.pack img.wide{transform:scale(1.3)}
.pack .imgwrap{overflow:hidden;border-radius:16px}
/* vertrouwen: drie kaarten naast elkaar + certificaten volle breedte */
.trust-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.trust.cert{grid-column:1/-1}
.trust .note{font-size:14px;color:#6B4A5C}
/* formulier */
form.req .hint{font-size:14px;line-height:1.45;color:#6B4A5C}
form.req .hint a{color:var(--wine)}
form.req h3{font-size:22px}
form.req input::placeholder{color:#A27A8E}
form.req input:focus,form.req select:focus{border-color:var(--magenta);outline:2px solid var(--pink-mid);outline-offset:0}
.contact-meta a{font-weight:700}
@media (max-width:560px){
  .pgrid{grid-template-columns:1fr 1fr;gap:12px}
  .prod .img{height:150px}.prod .info{padding:12px 12px 16px}.prod h3{font-size:16px}
  .prod dl{font-size:12.5px;gap:2px 8px}
  .seg{padding:28px 16px 16px}
  .stats b{font-size:40px} .contact-box .row{flex-wrap:wrap!important} }

/* ===== PREMIUM-VARIANT: rustiger typografie =====
   Koppen in Newsreader (klassieke serif, normaal gewicht), interface in DM Sans medium.
   Minder vet, minder hoofdletters, meer ademruimte. */
:root{--head:'Newsreader',Georgia,'Times New Roman',serif;--ui:'DM Sans',system-ui,sans-serif}
body{font-size:17px;line-height:1.65;font-weight:400}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:-.01em;color:var(--plum)}
.on-dark h2,.on-dark h3,.cta-box h2,.banner h2{color:#fff}
h1{font-size:clamp(40px,4.8vw,68px);line-height:1.06;letter-spacing:-.015em}
#p-index section.sec h1{font-size:clamp(42px,5.6vw,76px)}
h2{font-size:clamp(30px,3.3vw,44px);line-height:1.12}
h3{font-weight:500;font-size:22px;line-height:1.25}
.lead{font-size:19px;line-height:1.6;font-weight:300}
p{line-height:1.65}
/* eyebrows: kleiner, lichter, rustiger spatiëring */
.eyebrow,.label,.seg-head .count{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.18em}
/* knoppen en navigatie in sans, medium i.p.v. bold */
.btn{font-family:var(--ui);font-weight:500;font-size:16px;letter-spacing:.01em;padding:14px 28px;min-height:50px}
nav.main{font-family:var(--ui);font-weight:400;font-size:15px}
nav.main a[aria-current]{font-weight:600}
nav.main a.cta{font-weight:500}
.pill{font-family:var(--ui);font-weight:500}
.tile h3{font-weight:500;font-size:26px}
.tile .more{font-family:var(--ui);font-weight:600;font-size:15px}
.card p,.steps p,.pack p,.trust p{font-size:16px;line-height:1.65}
.card h3{font-size:22px}
.cmp h3{font-weight:500;font-size:26px}
.cmp ul{font-size:17px}
/* cijfers en stappen: serif, licht */
.stats b{font-family:var(--head);font-weight:400;font-size:52px;letter-spacing:-.02em;line-height:1.1}
.stats span{font-size:15px}
.steps b{font-family:var(--head);font-weight:300;font-size:44px}
.steps h3{font-size:22px}
.pack h3{font-weight:500;font-size:22px}
.trust h3{font-size:20px}
.cta-box h2{font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.1}
form.req h3{font-size:22px}
form.req label{font-weight:600;font-size:14px}
.seg-head h2{font-size:30px}
.prod h3{font-family:var(--head);font-weight:500;font-size:19px}
.prod .w{font-weight:600;font-size:15px}
.prod dt{font-weight:600}
.banner h2{font-size:clamp(26px,3vw,36px)}
footer strong,.contact-box strong,.cta-box strong{font-family:var(--head)!important;font-weight:500}
.share-fig figcaption{font-size:14px}
h1{max-width:22ch}h2{max-width:28ch}h1,h2{text-wrap:balance}
.center h1,.center h2{margin-inline:auto}
#p-index .dark h2{max-width:none}
/* iets meer ademruimte */
.sec{padding:88px 24px}
@media (max-width:760px){.sec{padding:64px 20px}}
@media (max-width:560px){.stats b{font-size:42px}.prod h3{font-size:16px}}

/* ===== Juridische pagina's (imprint, privacy) ===== */
.legal{padding:64px 24px 96px}
.legal .wrap{max-width:760px}
.legal h1{margin:10px 0 28px}
.legal h2{font-size:24px;line-height:1.25;margin:40px 0 12px}
.legal p,.legal li{font-size:17px;line-height:1.7}
.legal p+p,.legal ul+p,.legal p+ul{margin-top:12px}
.legal h2{max-width:none}
.legal .intro{font-size:19px}
.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.legal .facts{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:10px 24px;margin:0;font-size:17px;line-height:1.5;background:var(--pink-light);border-radius:20px;padding:24px 28px}
.legal .facts dt{font-weight:700;color:var(--wine)}
.legal .facts dd{margin:0}
.legal .small{font-size:15px;margin-top:40px;color:#6B4A5C}
@media (max-width:560px){.legal .facts{grid-template-columns:1fr;gap:2px}.legal .facts dd{margin-bottom:10px}}
/* nog in te vullen gegevens: geel gemarkeerd, zodat ze niet over het hoofd worden gezien */
mark.ph{background:#FFE36E;color:#4A1131;padding:1px 4px;border-radius:4px}

/* ===== Knoppen in de logokleur (#E3467C) ===== */
:root{--logo:#E3467C;--logo-dark:#C9336A}
.btn-primary,.btn-primary:hover,
nav.main a.cta,nav.main a.cta[aria-current],
.btn-pink,.btn-pink:hover,
form.req .btn-dark,form.req .btn-dark:hover{background:var(--logo);color:#fff}
.btn-primary:hover,nav.main a.cta:hover,.btn-pink:hover,form.req .btn-dark:hover{background:var(--logo-dark);color:#fff}
.btn-primary,nav.main a.cta,.btn-pink,form.req .btn-dark{font-weight:600}