/* ========================================
   LANDINGPAGE.CSS — SEO Landingpages (Cohere.nl)
   Shared styling voor alle 26 SEO landingpages.
   Gebruikt samen met /css/style.css.
   Versie 2: na pilot review patch V2.2.
   ======================================== */

/* ========= HERO (Blok 1 — geen H-tags, alleen visuele labels)
   Hoogte volgt /ervaringen/ en /faq/ (style.css default min-height:55vh). ========= */
.hero-lp { position:relative; min-height:55vh; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; background:var(--black); }
.hero-lp .hero-bg { position:absolute; inset:0; }
.hero-lp .hero-bg img { width:100%; height:100%; object-fit:cover; object-position:var(--hero-focal-point, center 35%); opacity:0; animation:heroFade 1.4s ease forwards 0.2s; }
.hero-lp .hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,8,0.85) 0%, rgba(10,10,8,0.35) 40%, rgba(10,10,8,0.1) 65%, rgba(10,10,8,0.25) 100%); z-index:1; }
.hero-lp .hero-content { position:relative; z-index:2; text-align:center; padding:0 2rem 4.5rem; opacity:0; animation:slideUp 0.8s ease forwards 0.4s; }
.hero-lp .hero-label { font-weight:600; font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:1rem; }
.hero-lp .hero-title-xl { font-weight:700; font-size:clamp(2.4rem,4.5vw,3.6rem); line-height:1.1; color:#fff; letter-spacing:-0.03em; margin-bottom:0.75rem; }
.hero-lp .hero-sub { font-weight:300; font-size:1.1rem; color:rgba(255,255,255,0.65); max-width:500px; margin:0 auto; line-height:1.75; }

@media (max-width:520px) {
  .hero-lp { align-items:flex-start; }
  .hero-lp .hero-content { padding:7rem 2rem 2rem; }
  .hero-lp .hero-bg img { object-position:center 70%; }
  .hero-lp .hero-title-xl { font-size:2.2rem; }
}

/* ========= BLOK 2 HERKENNING (gecentreerd, lucht tussen paragrafen) ========= */
.herkenning { background:var(--white); }
.herkenning-centered { max-width:720px; margin:0 auto; text-align:center; }
.herkenning-centered h1 { font-weight:600; font-size:clamp(2rem,3.4vw,2.7rem); line-height:1.2; margin-bottom:1rem; letter-spacing:-0.02em; }
.herkenning-centered h1 em { font-style:normal; color:var(--accent); }
.herkenning-centered h2 { font-weight:500; font-size:1.05rem; letter-spacing:0.02em; color:var(--gray); margin-bottom:1.5rem; }
.herkenning-centered .accent-line { width:40px; height:2px; background:var(--accent); margin:0 auto 2.5rem; }
.herkenning-prose { text-align:center; }
.herkenning-prose p { font-size:1.05rem; color:var(--gray-dark); line-height:1.85; margin-bottom:1.5rem; }
.herkenning-prose p:last-child { margin-bottom:0; }
.herkenning-cta-box { text-align:center; margin-top:2.75rem; padding-top:2.5rem; border-top:1px solid var(--sand); }

/* Mijn verhaal tekstlink (nu in Blok 7) */
.tekstlink-mijn-verhaal { display:inline-block; font-size:0.92rem; font-weight:500; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); letter-spacing:0.01em; transition:opacity 0.3s; margin-top:1.75rem; }
.tekstlink-mijn-verhaal:hover { opacity:0.7; }

/* ========= BLOK 3 PROBLEEM ========= */
.probleem { background:var(--sand-light); }
.probleem-header { text-align:center; margin-bottom:3.5rem; }
.probleem-header h2 { font-weight:600; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.22; letter-spacing:-0.02em; margin-bottom:0.75rem; }
.probleem-header h2 em { font-style:normal; color:var(--accent); }
.probleem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.probleem-card { background:var(--white); padding:2.25rem 2rem; transition:transform 0.4s,box-shadow 0.4s; }
.probleem-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(10,10,8,0.06); }
.probleem-card h3 { font-weight:600; font-size:1.1rem; color:var(--black); margin-bottom:0.9rem; letter-spacing:-0.01em; line-height:1.35; }
.probleem-card p { font-size:0.98rem; color:var(--gray-dark); line-height:1.8; }

@media (max-width:860px) {
  .probleem-grid { grid-template-columns:1fr; }
}

/* ========= BLOK 4 OPLOSSING ========= */
.oplossing { background:var(--white); }
.oplossing-header { margin-bottom:3.5rem; text-align:center; }
.oplossing-header h2 { font-weight:600; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.22; letter-spacing:-0.02em; margin-bottom:1.25rem; }
.oplossing-header h2 em { font-style:normal; color:var(--accent); }
.oplossing-intro { font-size:1.05rem; color:var(--gray-dark); line-height:1.8; max-width:740px; margin:0 auto; }
.oplossing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.oplossing-card { background:var(--cream); padding:2.25rem 2rem; transition:transform 0.4s,box-shadow 0.4s; }
.oplossing-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(10,10,8,0.06); }
.oplossing-card h3 { font-weight:600; font-size:1.1rem; margin-bottom:0.75rem; letter-spacing:-0.01em; }
.oplossing-card p { font-size:0.98rem; color:var(--gray-dark); line-height:1.8; }
.oplossing-link { text-align:center; margin-top:2.5rem; }
.oplossing-link a { color:var(--accent); font-weight:500; text-decoration:none; border-bottom:1px solid var(--accent); transition:opacity 0.3s; font-size:1rem; }
.oplossing-link a:hover { opacity:0.7; }

@media (max-width:860px) {
  .oplossing-grid { grid-template-columns:1fr; }
}

/* ========= BLOK 5 RESULTATEN ========= */
.resultaten-lp { background:var(--moss); position:relative; overflow:hidden; }
.resultaten-lp::after { content:''; position:absolute; bottom:-20%; left:-10%; width:40vw; height:40vw; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.03) 0%,transparent 70%); pointer-events:none; }
.resultaten-lp-header { margin-bottom:3.5rem; position:relative; z-index:1; text-align:center; }
.resultaten-lp-header .label { color:var(--accent); }
.resultaten-lp-header h2 { font-weight:600; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.22; color:#fff; letter-spacing:-0.02em; }
.resultaten-lp-intro { color:rgba(255,255,255,0.78); max-width:680px; margin:1.25rem auto 0; line-height:1.75; }
.resultaten-lp-list { display:grid; grid-template-columns:repeat(2,1fr); gap:0; position:relative; z-index:1; }
.resultaten-lp-item { padding:2rem 2.25rem; border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.12); transition:background 0.4s; }
.resultaten-lp-item:nth-child(odd) { border-left:none; }
.resultaten-lp-item:nth-child(1), .resultaten-lp-item:nth-child(2) { border-top:none; }
.resultaten-lp-item:hover { background:rgba(255,255,255,0.04); }
.resultaten-lp-title { font-weight:600; font-size:1.02rem; color:rgba(255,255,255,0.95); margin-bottom:0.5rem; line-height:1.4; }
.resultaten-lp-text { font-size:0.96rem; color:rgba(255,255,255,0.65); line-height:1.7; }

@media (max-width:860px) {
  .resultaten-lp-list { grid-template-columns:1fr; }
  .resultaten-lp-item { border-left:none !important; }
  .resultaten-lp-item:nth-child(2) { border-top:1px solid rgba(255,255,255,0.12); }
}

/* ========= BLOK 6 VERDIEPING (wit, V2.3) ========= */
.verdieping { background:var(--white); }
.verdieping-inner { max-width:820px; margin:0 auto; }
.verdieping-inner .label { text-align:center; display:block; }
.verdieping h2 { font-weight:600; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.22; letter-spacing:-0.02em; margin-bottom:2rem; text-align:center; }
.verdieping h2 em { font-style:normal; color:var(--accent); }
.verdieping-prose p { font-size:1.05rem; color:var(--gray-dark); line-height:1.85; margin-bottom:1.4rem; }
.verdieping-prose p:last-child { margin-bottom:0; }
.verdieping-prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; transition:color 0.2s; }
.verdieping-prose a:hover { color:var(--accent-hover); }

/* ========= BLOK 7 OVER (sand-light/accent, V2.3) ========= */
.over-lp { background:var(--sand-light); }
.over-lp-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:center; }
.over-lp-img { position:relative; }
.over-lp-img img { width:100%; height:auto; display:block; object-fit:cover; object-position:var(--portret-focal-point, center 25%); aspect-ratio:2/3; }
.over-lp-text h2 { font-weight:600; font-size:clamp(1.7rem,2.6vw,2.1rem); line-height:1.22; margin-bottom:1.5rem; letter-spacing:-0.02em; }
.over-lp-text h2 em { font-style:normal; color:var(--accent); }
.over-lp-text p { font-size:1rem; color:var(--gray-dark); line-height:1.85; margin-bottom:1rem; }
.over-lp-verwacht-title { font-weight:600; font-size:1.05rem; margin-top:1.75rem; margin-bottom:1rem; letter-spacing:-0.01em; color:var(--black); }
.over-lp-list { list-style:none; padding:0; margin-bottom:1rem; }
.over-lp-list li { margin-bottom:0.55rem; padding-left:1rem; position:relative; font-size:0.98rem; color:var(--gray-dark); line-height:1.7; }
.over-lp-list li::before { content:'·'; position:absolute; left:0; font-weight:700; color:var(--accent); }

@media (max-width:860px) {
  .over-lp-grid { grid-template-columns:1fr; gap:2.5rem; }
  .over-lp-img { order:-1; max-width:340px; margin:0 auto; }
}

/* ========= BLOK 8 AANBOD (homepage-component overgenomen) ========= */
.aanbod-lp { background:var(--white); }
.aanbod-lp .container { max-width:1100px; }
.aanbod-lp-header { text-align:center; margin-bottom:3.5rem; max-width:780px; margin-left:auto; margin-right:auto; }
.aanbod-lp-header h2 { font-weight:600; font-size:clamp(2rem,3.2vw,2.6rem); line-height:1.2; margin-bottom:0.75rem; letter-spacing:-0.02em; }
.aanbod-lp-header p { font-size:1.02rem; color:var(--gray-dark); line-height:1.8; }
.aanbod-lp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:stretch; }
.aanbod-lp-card { background:var(--cream); padding:2.25rem 1.75rem 1.75rem; display:flex; flex-direction:column; position:relative; transition:transform 0.4s,box-shadow 0.4s; border:1px solid transparent; }
.aanbod-lp-card:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(10,10,8,0.07); }
.aanbod-lp-card.featured { background:var(--moss); border:none; }
.aanbod-lp-card.featured .card-name { color:#fff; }
.aanbod-lp-card.featured .card-sub { color:rgba(255,255,255,0.6); }
.aanbod-lp-card.featured .card-desc { color:rgba(255,255,255,0.72); }
.aanbod-lp-card.featured .detail-label { color:rgba(255,255,255,0.5); }
.aanbod-lp-card.featured .detail-value { color:rgba(255,255,255,0.85); }
.aanbod-lp-card.featured .card-details { border-color:rgba(255,255,255,0.12); }
.aanbod-lp-card.featured .card-pricing { border-color:rgba(255,255,255,0.12); }
.aanbod-lp-card.featured .price-label { color:rgba(255,255,255,0.5); }
.aanbod-lp-card.featured .price-amount { color:#fff; }
.aanbod-lp-card.featured .price-secondary { color:rgba(255,255,255,0.6); }
.aanbod-lp-card .card-badge { position:absolute; top:0; right:0; background:var(--accent); color:#fff; font-size:0.68rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:0.4rem 0.9rem; }
.aanbod-lp-card .card-name { font-weight:700; font-size:1.3rem; color:var(--black); margin-bottom:0.2rem; letter-spacing:-0.02em; }
.aanbod-lp-card .card-sub { font-size:0.8rem; color:var(--accent); margin-bottom:1.25rem; font-weight:500; }
.aanbod-lp-card .card-desc { font-size:0.92rem; color:var(--gray-dark); line-height:1.7; margin-bottom:1.25rem; flex-grow:1; }
.aanbod-lp-card .card-details { border-top:1px solid var(--sand); padding-top:1rem; margin-bottom:1rem; }
.aanbod-lp-card .card-detail { display:flex; justify-content:space-between; align-items:baseline; padding:0.25rem 0; font-size:0.85rem; }
.aanbod-lp-card .detail-label { color:var(--gray); font-weight:400; }
.aanbod-lp-card .detail-value { color:var(--black); font-weight:500; text-align:right; }
.aanbod-lp-card .card-pricing { border-top:1px solid var(--sand); padding-top:1rem; margin-top:auto; }
.aanbod-lp-card .price-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.15rem; }
.aanbod-lp-card .price-label { font-size:0.8rem; color:var(--gray); }
.aanbod-lp-card .price-amount { font-weight:700; font-size:1.4rem; color:var(--black); letter-spacing:-0.02em; }
.aanbod-lp-card .price-secondary { font-weight:400; font-size:1rem; color:var(--gray); }
.aanbod-lp-card .price-note { font-size:0.78rem; color:var(--accent); font-style:italic; margin-top:0.4rem; }
.aanbod-lp-card .price-note a { color:var(--accent); }
.aanbod-lp-author { text-align:center; margin-top:2.5rem; font-size:0.92rem; color:var(--gray); }

.vervolg-lp { background:var(--sand-light); }
.vervolg-lp-box { display:flex; align-items:center; justify-content:space-between; gap:3rem; padding:3rem 3.5rem; background:var(--white); flex-wrap:wrap; }
.vervolg-lp-text h3 { font-weight:600; font-size:1.3rem; margin-bottom:0.6rem; letter-spacing:-0.01em; }
.vervolg-lp-text p { font-size:0.98rem; color:var(--gray-dark); line-height:1.75; max-width:480px; }
.vervolg-lp-pricing { text-align:right; }
.vervolg-lp-pricing .price-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.15rem; }
.vervolg-lp-pricing .price-label { font-size:0.8rem; color:var(--gray); }
.vervolg-lp-pricing .price-amount { font-weight:700; font-size:1.6rem; color:var(--black); letter-spacing:-0.02em; }
.vervolg-lp-pricing .price-secondary { font-weight:400; font-size:1rem; color:var(--gray); }
.vervolg-lp-note { max-width:1100px; margin:1.75rem auto 0; font-size:0.82rem; color:var(--gray); line-height:1.7; text-align:center; }

@media (max-width:860px) {
  .aanbod-lp-grid { grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; }
  .vervolg-lp-box { flex-direction:column; text-align:center; padding:2.5rem 2rem; }
  .vervolg-lp-pricing { text-align:center; }
}

/* ========= BLOK 9 CTA label override (tagline op moss bg = cream/light) ========= */
.cta-final .label { color:var(--accent); opacity:0.9; display:block; margin-bottom:1rem; }

/* ========= BLOK 10 FAQ ACCORDION ========= */
.faq-lp { background:var(--white); }
.faq-lp .container { max-width:860px; }
.faq-lp-header { text-align:center; margin-bottom:2.5rem; }
.faq-lp-header h2 { font-weight:600; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.22; letter-spacing:-0.02em; }
.faq-lp-header h2 em { font-style:normal; color:var(--accent); }

.faq-lp-item { border-bottom:1px solid var(--sand-light); }
.faq-lp-question { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem 0; cursor:pointer; width:100%; background:none; border:none; font-family:'Manrope',sans-serif; font-size:1.02rem; font-weight:500; color:var(--black); text-align:left; line-height:1.5; transition:color 0.3s; }
.faq-lp-question:hover { color:var(--accent); }
.faq-lp-icon { flex-shrink:0; width:20px; height:20px; position:relative; transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.faq-lp-icon::before, .faq-lp-icon::after { content:''; position:absolute; background:var(--gray-light); transition:all 0.35s cubic-bezier(0.4,0,0.2,1); }
.faq-lp-icon::before { width:14px; height:1.5px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-lp-icon::after { width:1.5px; height:14px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-lp-item.open .faq-lp-icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-lp-item.open .faq-lp-question { color:var(--accent); }

.faq-lp-answer { max-height:0; overflow:hidden; transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1), padding 0.35s; }
.faq-lp-answer-inner { padding:0 0 1.5rem; font-size:0.98rem; color:var(--gray-dark); line-height:1.85; max-width:720px; }
.faq-lp-answer-inner a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; transition:color 0.3s; }
.faq-lp-answer-inner a:hover { color:var(--accent-hover); }

/* ========= BREADCRUMBS zichtbaar ========= */
.breadcrumbs-lp { padding:1rem 4rem 0; background:var(--white); }
.breadcrumbs-lp ol { list-style:none; display:flex; align-items:center; gap:0.4rem; max-width:1100px; margin:0 auto; font-family:'Manrope',sans-serif; font-size:0.72rem; font-weight:400; color:var(--gray-light); }
.breadcrumbs-lp a { color:var(--gray-light); text-decoration:none; transition:color 0.2s; }
.breadcrumbs-lp a:hover { color:var(--accent); }
.breadcrumbs-lp .sep { color:var(--gray-light); font-size:0.6rem; }
.breadcrumbs-lp .current { color:var(--gray); }
.breadcrumbs-lp + section { padding-top:3.25rem; }

@media (max-width:860px) {
  .breadcrumbs-lp { padding:1rem 1.5rem 0; }
}

/* ===== VERWANTE PAGINA'S COMPONENT (onder Blok 10 FAQ) ===== */
.verwant-lp { background:var(--cream); padding:3rem 2rem; }
.verwant-lp > div { max-width:900px; margin:0 auto; text-align:center; }
.verwant-lp h2 { font-size:0.78rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin:0 0 1.5rem; }
.verwant-lp ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.75rem; }
.verwant-lp li { margin:0; }
.verwant-lp a { color:var(--gray-dark); text-decoration:none; font-size:0.95rem; border-bottom:1px solid transparent; padding-bottom:2px; transition:color 0.2s, border-color 0.2s; }
.verwant-lp a:hover { color:var(--accent); border-bottom-color:var(--accent); }
@media (max-width:860px) { .verwant-lp ul { gap:0.5rem 1.25rem; } }