/* ============================================================================
   lp.css  -  ResalePartners Google Ads / SEA-landingspagina's
   Zelfstandige, snelle (Core Web Vitals) landing-stijl in de huisstijl.
   Gebruikt door: /facturatiesoftware/ /facturatie-automatiseren/ /klantenportaal/
   Merk-tokens en conventies volgen BRANDBOOK.md.
   ========================================================================== */

/* ---- Fonts (self-hosted, font-display: swap) ---- */
@font-face{font-family:'Open Sans';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/self/opensans-400-latin.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/self/opensans-500-latin.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/self/opensans-700-latin.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/self/poppins-600-latin.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/self/poppins-700-latin.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/self/poppins-800-latin.woff2) format('woff2');}

/* ---- Tokens ---- */
:root{
  --purple:#5b38a6; --purple-2:#937ebf; --green:#a4cb65; --green-d:#8fb951;
  --ink:#24383f; --ink-2:#5a6a70; --teal:#24383f; --line:#e6e3f0;
  --bg:#ffffff; --bg-soft:#f5f4fb; --bg-grey:#f1f1f1;
  --radius:12px; --shadow:0 10px 30px rgba(36,56,63,.08); --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.lp{margin:0;font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif;color:#24383f;
  background:var(--bg);font-weight:400;line-height:29px;font-size:16px;-webkit-font-smoothing:antialiased;}
body.lp img{max-width:100%;}
body.lp .lp-content-img{height:auto;display:block;}
.lp h1,.lp h2,.lp h3,.lp h4{font-family:'Poppins',Helvetica,Arial,Lucida,sans-serif;font-style:normal;
  color:#24383f;line-height:37px;margin:0 0 .5em;font-weight:800;}
.lp a{color:var(--purple);}
.lp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.lp-eyebrow{font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--purple);margin:0 0 12px;}

/* ---- Buttons (CTA = gelijk aan de default Divi-sitekop: Poppins 800/20px, chevron op hover) ---- */
.lp-btn{display:inline-block;font-family:'Poppins',Helvetica,Arial,Lucida,sans-serif;font-weight:800;
  font-size:20px;line-height:1;text-decoration:none;border-radius:10px;padding:16px 24px;border:0;
  cursor:pointer;position:relative;text-align:center;transition:padding .3s ease,background-color .3s ease;}
.lp-btn-p{background:var(--green);color:#24383f!important;padding-right:24px;}
.lp-btn-s{background:#fff;color:#24383f!important;border:1px solid #d7dce0;}
.lp-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);}
.lp-btn .arw{display:none;}
/* Divi-stijl chevron: verborgen in rust, schuift in bij hover */
.lp-btn-p::after{content:"5";font-family:ETmodules;font-weight:400;font-size:20px;position:absolute;
  right:20px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .3s ease,right .3s ease;}
.lp-btn-p:hover{padding-left:20px;padding-right:44px;}
.lp-btn-p:hover::after{opacity:1;}

/* ============================ HEADER ============================ */
.lp-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);}
.lp-header .lp-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px;}
.lp-logo img{height:38px;width:auto;}
.lp-nav{display:flex;align-items:center;gap:26px;}
.lp-nav a.lp-navlink{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:var(--ink);
  text-decoration:none;}
.lp-nav a.lp-navlink:hover{color:var(--purple);}
.lp-lang{display:inline-flex;align-items:center;gap:7px;}
.lp-lang a{opacity:.5;line-height:0;display:inline-flex;border-bottom:2px solid transparent;padding:2px 1px 1px;}
.lp-lang a.on{opacity:1;border-bottom-color:var(--purple);}
.lp-header .lp-btn{padding:11px 22px;font-size:15px;}
@media(max-width:900px){
  .lp-nav .lp-navlink,.lp-lang{display:none;}
}

/* ============================ HERO ============================ */
.lp-hero{position:relative;color:#fff;overflow:hidden;background:var(--teal);}
.lp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(36,56,63,.92) 0%,rgba(36,56,63,.82) 42%,rgba(91,56,166,.55) 100%);}
.lp-hero .lp-wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:64px;}
.lp-hero h1{color:#fff;font-size:clamp(30px,4.4vw,46px);line-height:1.08;font-weight:800;max-width:16em;
  text-shadow:0 2px 18px rgba(0,0,0,.35);}
.lp-hero .lp-eyebrow{color:#cbe39a;}
.lp-hero .sub{font-size:16px;line-height:29px;max-width:34em;margin:0 0 28px;color:#eef1f0;
  text-shadow:0 1px 10px rgba(0,0,0,.3);}
.lp-hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.lp-hero-cta .scroll-link{color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
  text-decoration:none;border-bottom:2px solid rgba(255,255,255,.4);padding-bottom:2px;}

/* ---- Trust-strip ---- */
.lp-trust{background:var(--purple);color:#fff;}
.lp-trust .lp-wrap{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:flex-start;align-items:center;
  padding:14px 24px;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;}
.lp-trust span{display:inline-flex;align-items:center;gap:9px;}
.lp-trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}

/* ============================ SECTIONS ============================ */
.lp-sec{padding:64px 0;}
.lp-sec.soft{background:var(--bg-soft);}
.lp-sec.grey{background:var(--bg-grey);}
.lp-sec h2{font-size:34px;line-height:37px;max-width:20em;}
.lp-sec .lead{font-size:16px;line-height:29px;max-width:44em;color:#24383f;}
.lp-sec p{max-width:44em;}
/* smalle blokken houden dezelfde gecentreerde kolom (zelfde linkerlijn als brede secties);
   alleen de leesbreedte van de inhoud wordt beperkt, links uitgelijnd */
.lp-narrow>*{max-width:820px;margin-left:0;margin-right:0;}

/* intro block */
.lp-intro{font-size:16px;line-height:29px;}
.lp-intro p{max-width:46em;}

/* feature grid */
.lp-features{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px;}
.lp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow);}
.lp-sec.soft .lp-card,.lp-sec.grey .lp-card{background:#fff;}
.lp-card h3{font-size:22px;line-height:26px;color:#24383f;margin-bottom:8px;}
.lp-card p{font-size:16px;line-height:29px;color:#24383f;margin:0;}
@media(max-width:760px){.lp-features{grid-template-columns:1fr;}}

/* benefit / bullet list */
.lp-benefits{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;}
.lp-benefits li{position:relative;padding-left:32px;font-size:16px;line-height:29px;}
.lp-benefits li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat;}
@media(max-width:680px){.lp-benefits{grid-template-columns:1fr;}}

/* numbered steps */
.lp-steps{list-style:none;counter-reset:s;padding:0;margin:28px 0 0;display:grid;gap:14px;}
.lp-steps li{counter-increment:s;position:relative;padding:16px 20px 16px 64px;background:#fff;
  border:1px solid var(--line);border-radius:10px;font-size:16px;}
.lp-steps li::before{content:counter(s);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;font-family:'Poppins',sans-serif;
  font-weight:700;display:flex;align-items:center;justify-content:center;}

/* comparison table */
.lp-compare{width:100%;border-collapse:collapse;margin-top:30px;background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);font-size:16px;}
.lp-compare th,.lp-compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);}
.lp-compare thead th{background:var(--teal);color:#fff;font-family:'Poppins',sans-serif;font-size:15px;}
.lp-compare thead th:last-child{background:var(--purple);}
.lp-compare tbody td:first-child{font-weight:600;}
.lp-compare td.no{color:#b23;text-align:left;}
.lp-compare td.yes{color:var(--green-d);font-weight:700;text-align:left;}
.lp-compare td.mid{color:var(--ink-2);text-align:left;}
.lp-compare-wrap{overflow-x:auto;}

/* two-column media row */
.lp-split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;}
.lp-split.rev{grid-template-columns:.9fr 1.1fr;}
@media(max-width:820px){.lp-split,.lp-split.rev{grid-template-columns:1fr;gap:28px;}}

/* CTA band */
.lp-ctaband{background:var(--purple);color:#fff;}
.lp-ctaband h2{color:#fff;}
.lp-ctaband p{color:#e9e2f6;margin:0 0 26px;max-width:36em;}

/* meta note */
.lp-note{font-size:14px;color:var(--ink-2);margin-top:24px;}

/* ============================ FAQ ============================ */
.lp-faq{max-width:820px;margin:28px 0 0;}
.lp-faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden;}
.lp-faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:17px;color:var(--ink);position:relative;}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:24px;color:var(--purple);font-weight:400;}
.lp-faq details[open] summary::after{content:"\2013";}
.lp-faq .a{padding:0 22px 20px;color:#24383f;font-size:16px;line-height:29px;}

/* ============================ ROI CALCULATOR ============================ */
.lp-calc{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:30px;margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:34px;}
.lp-calc h3{font-size:22px;margin:0 0 4px;}
.lp-calc .fields{display:grid;gap:18px;}
.lp-calc label{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;margin-bottom:6px;}
.lp-calc input[type=number]{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;
  font-size:17px;font-family:'Open Sans',sans-serif;color:var(--ink);}
.lp-calc input[type=range]{width:100%;accent-color:var(--purple);}
.lp-calc .rangeval{font-family:'Poppins',sans-serif;font-weight:700;color:var(--purple);}
.lp-calc .out{background:linear-gradient(135deg,var(--purple),#43277f);color:#fff;border-radius:12px;
  padding:26px;display:flex;flex-direction:column;justify-content:center;}
.lp-calc .out .big{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(22px,3vw,30px);line-height:1.2;}
.lp-calc .out .big b{color:var(--green);}
.lp-calc .out .yr{font-size:16px;color:#e6ddf7;margin-top:8px;}
.lp-calc .out .lp-btn{margin-top:20px;justify-content:center;}
.lp-calc .disc{font-size:12.5px;color:var(--ink-2);margin-top:14px;}
.lp-calc .out .disc{color:#d9cff2;}
@media(max-width:820px){.lp-calc{grid-template-columns:1fr;padding:22px;}}

/* ============================ PRODUCT TOUR ============================ */
.lp-tour{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;margin-top:34px;}
.lp-tour-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:14px;background:var(--bg-soft);border-bottom:1px solid var(--line);}
.lp-tour-tab{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;padding:9px 15px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.15s;}
.lp-tour-tab[aria-selected=true]{background:var(--purple);color:#fff;border-color:var(--purple);}
.lp-tour-body{padding:28px;min-height:340px;}
.lp-tour-panel{display:none;}
.lp-tour-panel.on{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.lp-tour-panel h3{font-size:22px;line-height:26px;color:#24383f;}
.lp-tour-panel p{color:#24383f;}
/* gestileerde mock-UI (placeholder tot echte demo-tenant) */
.lp-mock{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:16px;min-height:250px;
  box-shadow:inset 0 1px 0 #fff;}
.lp-mock .bar{height:10px;border-radius:5px;background:#d9d4ea;margin:9px 0;}
.lp-mock .bar.p{background:var(--purple);opacity:.5;}
.lp-mock .bar.g{background:var(--green);}
.lp-mock .row{display:flex;gap:10px;align-items:center;margin:12px 0;}
.lp-mock .chip{font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:5px 9px;color:var(--ink-2);}
.lp-tour-foot{padding:0 28px 26px;}
@media(max-width:760px){.lp-tour-panel.on{grid-template-columns:1fr;}.lp-tour-body{min-height:0;}}

/* ============================ STICKY MOBILE CTA ============================ */
.lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;border-top:1px solid var(--line);
  padding:10px 16px;display:none;box-shadow:0 -6px 24px rgba(36,56,63,.12);}
.lp-sticky .lp-btn{width:100%;justify-content:center;padding:14px;}
@media(max-width:900px){.lp-sticky{display:block;}body.lp{padding-bottom:76px;}}

/* ============================ FOOTER ============================ */
.lp-footer{background:var(--teal);color:#cfd8dc;font-size:14px;}
.lp-footer .lp-wrap{padding:40px 24px;display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;}
.lp-footer .brand{font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:#fff;margin-bottom:8px;}
.lp-footer a{color:#a4cb65;text-decoration:none;}
.lp-footer .cols{display:flex;flex-wrap:wrap;gap:40px;}
.lp-footer .col a{display:block;color:#cfd8dc;margin:5px 0;}
.lp-footer .col a:hover{color:#fff;}
.lp-footer .col h4{font-family:'Poppins',sans-serif;font-size:13px;line-height:1.3;letter-spacing:.5px;text-transform:uppercase;
  color:#8ea0a7;margin:0 0 8px;font-weight:600;}
.lp-footer .iso{font-size:12.5px;color:#8ea0a7;}
.lp-footerbar{background:#1b2b31;color:#8ea0a7;font-size:12.5px;text-align:center;padding:12px;}

/* small helpers */
.lp-center{text-align:left;}
.mt0{margin-top:0;} .mb0{margin-bottom:0;}
.lp-sec .lp-wrap>h2:first-child,.lp-sec .lp-wrap>.lp-eyebrow:first-child{margin-top:0;}