/* Alleen van toepassing binnen de Blog Automatisering-pagina. */
/* ---------- Tokens ---------- */
.blog-automatisering-page{
    --paper:#f4efe6;
    --white:#fdfcf8;
    --ink:#17130e;
    --ink-soft:rgba(23,19,14,.72);
    --ink-faint:rgba(23,19,14,.45);
    --red:#e83828;
    --red-deep:#c82415;
    --yellow:#ffe500;
    --line:rgba(23,19,14,.16);
    --line-light:rgba(253,252,248,.22);
    --font-display:"Archivo",sans-serif;
    --font-body:"Inter",sans-serif;
    --ease-out:cubic-bezier(.22,.9,.3,1);
  }
.blog-automatisering-page,.blog-automatisering-page *{margin:0;padding:0;box-sizing:border-box}
.blog-automatisering-page{scroll-behavior:smooth}
.blog-automatisering-page{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--ink);
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
.blog-automatisering-page ::selection{background:var(--yellow);color:var(--ink)}
.blog-automatisering-page a{color:inherit}
.blog-automatisering-page :focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.blog-automatisering-page img{max-width:100%}
/* ---------- Header ---------- */
.blog-automatisering-page .site-header{
    position:fixed;inset:0 0 auto 0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px clamp(20px,4vw,56px);
    transition:padding .25s var(--ease-out),background-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
  }
.blog-automatisering-page .site-header.scrolled{
    padding:12px clamp(20px,4vw,56px);
    background:rgba(244,239,230,.88);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--line);
  }
.blog-automatisering-page .brand{
    font-family:var(--font-display);font-weight:900;font-size:19px;
    letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
    display:flex;align-items:center;gap:10px;
  }
.blog-automatisering-page .brand .dot{width:12px;height:12px;background:var(--red);border-radius:50%;flex:none}
.blog-automatisering-page .main-nav{display:flex;gap:clamp(14px,2.5vw,32px);align-items:center}
.blog-automatisering-page .main-nav a{
    text-decoration:none;font-size:14px;font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;color:var(--ink-soft);
    transition:color .2s var(--ease-out);
  }
.blog-automatisering-page .main-nav a:hover{color:var(--red)}
.blog-automatisering-page .main-nav a.cta-mini{
    background:var(--ink);color:var(--white);padding:10px 20px;border-radius:999px;
    transition:background-color .2s var(--ease-out),transform .2s var(--ease-out);
  }
.blog-automatisering-page .main-nav a.cta-mini:hover{background:var(--red);color:var(--white);transform:translateY(-2px)}
@media (max-width:760px){.blog-automatisering-page .main-nav a.nav-link{display:none}}
/* ---------- Shared ---------- */
.blog-automatisering-page .section{padding:clamp(72px,10vw,140px) clamp(20px,5vw,72px)}
.blog-automatisering-page .wrap{max-width:1200px;margin:0 auto}
.blog-automatisering-page .kicker{
    display:inline-flex;align-items:center;gap:10px;
    font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:28px;
  }
.blog-automatisering-page .kicker::before{content:"";width:34px;height:2px;background:var(--red)}
.blog-automatisering-page .display{
    font-family:var(--font-display);font-weight:900;text-transform:uppercase;
    line-height:.94;letter-spacing:-.015em;
  }
.blog-automatisering-page .btn{
    display:inline-flex;align-items:center;gap:12px;
    font-family:var(--font-display);font-weight:800;text-transform:uppercase;
    font-size:15px;letter-spacing:.06em;text-decoration:none;cursor:pointer;
    padding:18px 34px;border-radius:999px;border:0;
    transition:transform .2s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s var(--ease-out);
  }
.blog-automatisering-page .btn svg{transition:transform .2s var(--ease-out)}
.blog-automatisering-page .btn:hover svg{transform:translateX(5px)}
.blog-automatisering-page .btn-primary{background:var(--red);color:#fff}
.blog-automatisering-page .btn-primary:hover{background:var(--red-deep);transform:translateY(-3px);box-shadow:0 12px 28px rgba(232,56,40,.35)}
.blog-automatisering-page .btn-dark{background:var(--ink);color:var(--white)}
.blog-automatisering-page .btn-dark:hover{background:#000;transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.blog-automatisering-page .btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.blog-automatisering-page .btn-outline:hover{background:var(--ink);color:var(--white);transform:translateY(-3px)}
.blog-automatisering-page .btn-outline.on-dark{color:var(--white);box-shadow:inset 0 0 0 2px rgba(253,252,248,.7)}
.blog-automatisering-page .btn-outline.on-dark:hover{background:var(--white);color:var(--ink)}
/* Reveal on scroll */
.blog-automatisering-page .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.blog-automatisering-page .reveal.in{opacity:1;transform:none}
/* ---------- Hero ---------- */
.blog-automatisering-page .hero{
    min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
    padding:140px clamp(20px,5vw,72px) 0;position:relative;overflow:hidden;
  }
.blog-automatisering-page .hero-grid{
    max-width:1280px;margin:0 auto;width:100%;
    display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:end;
  }
.blog-automatisering-page .hero h1{font-size:clamp(3rem,9.2vw,8.6rem)}
.blog-automatisering-page .hero h1 .line{display:block;overflow:hidden}
.blog-automatisering-page .hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease-out) forwards}
.blog-automatisering-page .hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.blog-automatisering-page .hero h1 .line:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{to{transform:translateY(0)}}
.blog-automatisering-page .hero .mark{color:var(--red)}
.blog-automatisering-page .hero-side{padding-bottom:12px}
.blog-automatisering-page .hero-side p{color:var(--ink-soft);font-size:clamp(16px,1.4vw,19px);max-width:42ch;margin-bottom:30px}
.blog-automatisering-page .hero-side p strong{color:var(--ink)}
.blog-automatisering-page .hero-actions{display:flex;flex-wrap:wrap;gap:16px}
.blog-automatisering-page .hero-tag{
    margin-top:40px;display:flex;gap:26px;flex-wrap:wrap;
    font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  }
.blog-automatisering-page .hero-tag span{display:flex;align-items:center;gap:8px}
.blog-automatisering-page .hero-tag .dot{width:8px;height:8px;background:var(--red);border-radius:50%;flex:none}
.blog-automatisering-page .hero-watermark{
    position:absolute;right:0;bottom:-4%;z-index:-1;
    font-family:var(--font-display);font-weight:900;text-transform:uppercase;
    font-size:clamp(7rem,22vw,20rem);line-height:1;color:transparent;
    -webkit-text-stroke:1px rgba(23,19,14,.12);letter-spacing:-.02em;user-select:none;
  }
@media (max-width:900px){.blog-automatisering-page .hero-grid{grid-template-columns:1fr;gap:28px}
.blog-automatisering-page .hero-side{padding-bottom:0}}
/* ---------- Marquee ---------- */
.blog-automatisering-page .marquee-band{overflow:hidden;padding:56px 0 0}
.blog-automatisering-page .marquee{
    background:var(--red);color:var(--white);overflow:hidden;
    padding:18px 0;transform:rotate(-1.2deg);
  }
.blog-automatisering-page .marquee-track{display:flex;width:max-content;animation:scroll-x 26s linear infinite}
.blog-automatisering-page .marquee-track span{
    font-family:var(--font-display);font-weight:800;text-transform:uppercase;
    font-size:clamp(18px,2.4vw,28px);letter-spacing:.04em;white-space:nowrap;
    display:flex;align-items:center;
  }
.blog-automatisering-page .marquee-track span::after{content:"";width:10px;height:10px;background:var(--yellow);border-radius:50%;margin:0 28px;flex:none}
@keyframes scroll-x{to{transform:translateX(-50%)}}
/* ---------- Waarom ---------- */
.blog-automatisering-page .why{background:var(--white)}
.blog-automatisering-page .why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.blog-automatisering-page .why h2{font-size:clamp(2.2rem,5vw,4.4rem);margin-bottom:26px}
.blog-automatisering-page .why h2 em{font-style:normal;color:var(--red)}
.blog-automatisering-page .why-lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:52ch}
.blog-automatisering-page .why-lead strong{color:var(--ink)}
.blog-automatisering-page .why-list{list-style:none;border-top:1px solid var(--line)}
.blog-automatisering-page .why-list li{
    display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:baseline;
    padding:26px 0;border-bottom:1px solid var(--line);
    transition:padding-left .25s var(--ease-out);
  }
.blog-automatisering-page .why-list li:hover{padding-left:10px}
.blog-automatisering-page .why-list .num{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--red)}
.blog-automatisering-page .why-list h3{font-family:var(--font-display);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.blog-automatisering-page .why-list p{color:var(--ink-soft);font-size:15.5px;max-width:48ch}
@media (max-width:900px){.blog-automatisering-page .why-grid{grid-template-columns:1fr}}
/* ---------- Aanbod ---------- */
.blog-automatisering-page .offer{border-top:1px solid var(--line)}
.blog-automatisering-page .offer-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.blog-automatisering-page .offer-head h2{font-size:clamp(2.2rem,5vw,4.4rem);max-width:14ch}
.blog-automatisering-page .offer-head p{color:var(--ink-soft);max-width:44ch}
.blog-automatisering-page .offer-rows{border-top:1px solid var(--line)}
.blog-automatisering-page .offer-row{
    display:grid;grid-template-columns:110px 1fr 1.4fr;gap:clamp(20px,3vw,48px);
    padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline;
  }
.blog-automatisering-page .offer-row .num{
    font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,3.4vw,3rem);
    color:transparent;-webkit-text-stroke:1.5px var(--red);letter-spacing:-.02em;
  }
.blog-automatisering-page .offer-row h3{font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2vw,24px);text-transform:uppercase}
.blog-automatisering-page .offer-row p{color:var(--ink-soft);font-size:15.5px;max-width:52ch}
.blog-automatisering-page .offer-row:hover .num{color:var(--red);transition:color .25s var(--ease-out)}
@media (max-width:760px){.blog-automatisering-page .offer-row{grid-template-columns:1fr;gap:10px}
.blog-automatisering-page .offer-row .num{font-size:1.8rem}}
/* ---------- Werkwijze (dark) ---------- */
.blog-automatisering-page .how{background:var(--ink);color:var(--white)}
.blog-automatisering-page .how .kicker{color:rgba(253,252,248,.6)}
.blog-automatisering-page .how h2{font-size:clamp(2.2rem,5vw,4.4rem);margin-bottom:64px;max-width:18ch}
.blog-automatisering-page .how h2 em{font-style:normal;color:var(--yellow)}
.blog-automatisering-page .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px)}
.blog-automatisering-page .step{border-top:2px solid var(--line-light);padding-top:22px;position:relative}
.blog-automatisering-page .step::before{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--red);transition:width .5s var(--ease-out)}
.blog-automatisering-page .step:hover::before{width:100%}
.blog-automatisering-page .step .num{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--yellow);display:block;margin-bottom:44px}
.blog-automatisering-page .step h3{font-family:var(--font-display);font-weight:800;font-size:18px;text-transform:uppercase;margin-bottom:10px;letter-spacing:.02em}
.blog-automatisering-page .step p{color:rgba(253,252,248,.66);font-size:14.5px;line-height:1.6}
.blog-automatisering-page .step .price-note{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
@media (max-width:900px){.blog-automatisering-page .steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.blog-automatisering-page .steps{grid-template-columns:1fr}
.blog-automatisering-page .step .num{margin-bottom:20px}}
/* ---------- Prijzen (red) ---------- */
.blog-automatisering-page .pricing{background:var(--red);color:#fff}
.blog-automatisering-page .pricing .kicker{color:rgba(255,255,255,.75)}
.blog-automatisering-page .pricing .kicker::before{background:var(--yellow)}
.blog-automatisering-page .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.blog-automatisering-page .pricing h2{font-size:clamp(2.4rem,5.4vw,4.8rem);margin-bottom:24px}
.blog-automatisering-page .pricing h2 em{font-style:normal;color:var(--yellow)}
.blog-automatisering-page .pricing-copy p{color:rgba(255,255,255,.85);max-width:46ch;margin-bottom:18px}
.blog-automatisering-page .pricing-copy .small{font-size:14px;color:rgba(255,255,255,.65)}
.blog-automatisering-page .price-panel{
    background:var(--ink);color:var(--white);padding:clamp(32px,4vw,52px);
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
  }
.blog-automatisering-page .price-panel:hover{transform:translateY(-8px);box-shadow:0 44px 96px rgba(0,0,0,.45)}
.blog-automatisering-page .price-badge{
    display:inline-block;background:var(--yellow);color:var(--ink);
    font-family:var(--font-display);font-weight:800;font-size:12.5px;
    letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;margin-bottom:26px;
  }
.blog-automatisering-page .price-amount{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.blog-automatisering-page .price-amount .big{font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,7vw,6.2rem);line-height:1;letter-spacing:-.03em}
.blog-automatisering-page .price-amount .per{font-size:19px;font-weight:600;color:rgba(253,252,248,.7)}
.blog-automatisering-page .price-setup{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    margin-top:22px;padding-top:22px;border-top:1px dashed rgba(253,252,248,.3);
    font-size:16px;
  }
.blog-automatisering-page .price-setup strong{font-family:var(--font-display);font-weight:800;font-size:22px;white-space:nowrap}
.blog-automatisering-page .price-total{
    margin-top:22px;padding:16px 20px;background:rgba(255,229,0,.1);
    border-left:3px solid var(--yellow);font-size:15px;color:rgba(253,252,248,.9);
  }
.blog-automatisering-page .price-total strong{color:var(--yellow)}
.blog-automatisering-page .price-panel ul{list-style:none;margin:26px 0 30px;display:grid;gap:10px}
.blog-automatisering-page .price-panel li{display:flex;gap:12px;align-items:baseline;font-size:15px;color:rgba(253,252,248,.85)}
.blog-automatisering-page .price-panel li::before{content:"";width:16px;height:2px;background:var(--red);flex:none;transform:translateY(-4px)}
.blog-automatisering-page .price-panel .btn{width:100%;justify-content:center;background:var(--yellow);color:var(--ink)}
.blog-automatisering-page .price-panel .btn:hover{background:#fff;transform:translateY(-3px)}
@media (max-width:900px){.blog-automatisering-page .pricing-grid{grid-template-columns:1fr}}
/* ---------- FAQ ---------- */
.blog-automatisering-page .faq{background:var(--white)}
.blog-automatisering-page .faq h2{font-size:clamp(2.2rem,5vw,4.4rem);margin-bottom:52px}
.blog-automatisering-page .faq-list{border-top:1px solid var(--line);max-width:860px}
.blog-automatisering-page .faq-list details{border-bottom:1px solid var(--line)}
.blog-automatisering-page .faq-list summary{
    list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
    padding:26px 0;font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.8vw,21px);
    text-transform:uppercase;letter-spacing:.01em;transition:color .2s var(--ease-out);
  }
.blog-automatisering-page .faq-list summary::-webkit-details-marker{display:none}
.blog-automatisering-page .faq-list summary:hover{color:var(--red)}
.blog-automatisering-page .faq-list summary .icon{
    flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);
    display:grid;place-items:center;position:relative;
    transition:transform .25s var(--ease-out),background-color .25s var(--ease-out),border-color .25s var(--ease-out);
  }
.blog-automatisering-page .faq-list summary .icon::before, .blog-automatisering-page .faq-list summary .icon::after{
    content:"";position:absolute;background:currentColor;transition:transform .25s var(--ease-out);
  }
.blog-automatisering-page .faq-list summary .icon::before{width:12px;height:2px}
.blog-automatisering-page .faq-list summary .icon::after{width:2px;height:12px}
.blog-automatisering-page .faq-list details[open] summary .icon{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
.blog-automatisering-page .faq-list details[open] summary{color:var(--red)}
.blog-automatisering-page .faq-list .answer{padding:0 0 28px;color:var(--ink-soft);max-width:60ch;font-size:15.5px}
/* ---------- Contact ---------- */
.blog-automatisering-page .contact{background:var(--paper);text-align:center}
.blog-automatisering-page .contact h2{font-size:clamp(2.6rem,7vw,6.4rem);margin-bottom:28px}
.blog-automatisering-page .contact h2 em{font-style:normal;color:var(--red)}
.blog-automatisering-page .contact p{color:var(--ink-soft);max-width:52ch;margin:0 auto 40px;font-size:clamp(16px,1.5vw,19px)}
.blog-automatisering-page .contact .hero-actions{justify-content:center}
/* ---------- Footer ---------- */
.blog-automatisering-page footer{background:var(--ink);color:rgba(253,252,248,.7);padding:56px clamp(20px,5vw,72px) 40px}
.blog-automatisering-page .footer-grid{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:center}
.blog-automatisering-page .footer-brand{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:var(--white);font-size:19px;display:flex;align-items:center;gap:10px}
.blog-automatisering-page .footer-brand .dot{width:12px;height:12px;background:var(--red);border-radius:50%}
.blog-automatisering-page .footer-links{display:flex;gap:24px;flex-wrap:wrap}
.blog-automatisering-page .footer-links a{color:rgba(253,252,248,.7);text-decoration:none;font-size:14px;transition:color .2s var(--ease-out)}
.blog-automatisering-page .footer-links a:hover{color:var(--yellow)}
.blog-automatisering-page .footer-tag{max-width:1200px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(253,252,248,.15);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.blog-automatisering-page,.blog-automatisering-page *, .blog-automatisering-page *::before, .blog-automatisering-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.blog-automatisering-page .hero h1 .line>span{transform:none;animation:none}
.blog-automatisering-page .reveal{opacity:1;transform:none}}