/* ===== SHARED SECTION STYLING — home-style fade-in blokken =====
   Gedeeld door over, hoe-werkt-het, voor-wie, manifest, contact, blog.
   Match exact home.html stijl zodat scroll-feel consistent is. */

/* Section wrapper — gebruikt op alle content-pagina's */
.section{position:relative;padding:64px 20px;max-width:1100px;margin:0 auto;}
@media(max-width:600px){.section{padding:48px 16px;}}

/* Section head: eyebrow + title + accent bar + optionele sub */
.section-head{margin-bottom:36px;}
.section-eyebrow{font-size:11px;font-weight:700;color:var(--c-primary-pale,#9999e5);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:10px;}
.section-title{font-family:var(--font-serif,'Roboto Slab',Georgia,serif);font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1.15;letter-spacing:-0.02em;color:var(--c-text,#fff);margin-bottom:14px;}
.section-bar{height:2px;width:80px;background:linear-gradient(to right,var(--c-primary,#5b5bd6),var(--c-primary-pale,#9999e5));border-radius:2px;}
.section-sub{font-size:16px;color:rgba(255,255,255,0.62);max-width:640px;line-height:1.65;margin-top:14px;}

/* Prose section — losse paragrafen zonder grid */
.section-prose p{font-size:16px;line-height:1.8;margin-bottom:18px;color:var(--c-text-body,#d8d8e0);}
.section-prose strong{color:var(--c-text,#fff);}

/* Grid layouts */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-stack{display:grid;grid-template-columns:1fr;gap:14px;}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr;gap:12px;}}

/* Card — generic content card, optioneel met .glass voor liquid look */
.card{padding:28px 26px;border-radius:20px;transition:transform .25s,border-color .25s,background .25s;}
.card:hover{transform:translateY(-2px);background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);}
.card h3{font-family:var(--font-serif,'Roboto Slab',Georgia,serif);font-size:18px;font-weight:700;color:var(--c-text,#fff);margin-bottom:8px;letter-spacing:-0.01em;}
.card p{font-size:14.5px;color:rgba(255,255,255,0.6);line-height:1.65;margin:0;}
.card .card-icon{font-size:24px;margin-bottom:12px;display:block;}
.card .card-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:rgba(91,91,214,0.18);color:var(--c-primary-faint,#c1c1ef);font-size:15px;font-weight:800;margin-bottom:18px;font-family:var(--font-serif,'Roboto Slab',Georgia,serif);}

/* Glass utility — backdrop blur + subtle bg. Mobile zonder backdrop-filter
   (GPU duur op viewport-grote elementen op kleine schermen). */
.glass{background:rgba(255,255,255,0.04);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.36),inset 0 1px 0 rgba(255,255,255,0.05);}
@media(max-width:768px){
  .glass{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(20,20,40,0.85) !important;}
}

/* Fade-in animation — gestuurd door site-section.js IntersectionObserver */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.2,0.8,0.2,1);}
.fade-in.show{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .fade-in{opacity:1;transform:none;transition:none;}
}

/* Divider tekst (— Lokaal eerst. Inbound only. Voor altijd gratis. —) */
.divider-line{font-family:var(--font-serif,'Roboto Slab',Georgia,serif);font-weight:700;font-size:18px;color:var(--c-primary-pale,#9999e5);text-align:center;margin:40px 0 20px;}

/* CTA row + buttons (home + subpages) */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:36px;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--c-text,#fff);color:#0a0a18;font-size:15px;font-weight:600;border-radius:9999px;transition:transform .15s,box-shadow .2s;text-decoration:none;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,255,255,0.20);color:#0a0a18;text-decoration:none;}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:rgba(255,255,255,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--c-text,#fff);border:1px solid rgba(255,255,255,0.12);font-size:15px;font-weight:600;border-radius:9999px;transition:transform .15s,background .2s;text-decoration:none;}
.btn-ghost:hover{background:rgba(255,255,255,0.10);color:var(--c-text,#fff);transform:translateY(-1px);text-decoration:none;}