:root{
  --navy:#061426;--navy2:#0b2340;--blue:#2c6fff;--blue2:#5aa5ff;--cyan:#64ded6;
  --ink:#102038;--muted:#66758a;--paper:#fff;--soft:#f4f7fb;--soft2:#eef4fb;
  --line:#dfe7f1;--green:#159a68;--amber:#f2a93b;--danger:#d64a58;
  --shadow:0 24px 70px rgba(6,20,38,.12);--shadow2:0 12px 34px rgba(6,20,38,.08);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 36px));margin:auto}.section{padding:88px 0}.section-tight{padding:58px 0}.soft{background:var(--soft)}.dark{background:linear-gradient(145deg,#061426,#0b2340);color:#fff}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:var(--blue);margin:0 0 12px}.dark .eyebrow{color:#7db8ff}.title{font-size:clamp(38px,5vw,58px);line-height:1.04;letter-spacing:-.04em;margin:0 0 18px;font-weight:950}.subtitle{font-size:19px;color:var(--muted);max-width:760px;margin:0}.dark .subtitle{color:rgba(255,255,255,.72)}.lead{font-size:21px;color:var(--muted)}.small{font-size:13px;color:var(--muted)}
.topbar{background:#04101e;color:rgba(255,255,255,.68);font-size:12px}.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 20px;padding:8px 0}.topbar b{color:#fff}.topbar a{display:inline-flex;align-items:center;gap:6px}.topbar a:hover{color:#fff}.topbar .ico{color:#71e4bd}.topbar-contact{display:flex;flex-wrap:wrap;gap:4px 20px}.topbar-contact a:first-child{color:#fff;font-weight:800}.site-header{background:radial-gradient(circle at 82% 20%,rgba(44,111,255,.28),transparent 28%),radial-gradient(circle at 66% 70%,rgba(100,222,214,.12),transparent 30%),linear-gradient(145deg,#061426,#0b2340 66%,#07192e);color:#fff;overflow:hidden;position:relative}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative;z-index:5}.brand{font-weight:950;font-size:24px;letter-spacing:-.04em;white-space:nowrap}.brand span{color:#5aa5ff}.navlinks{display:flex;align-items:center;gap:23px;font-size:14px;font-weight:760;color:rgba(255,255,255,.82)}.navlinks a:hover{color:#fff}.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.nav-phone{display:inline-flex;align-items:center;gap:7px;color:#fff;white-space:nowrap}.nav-phone .ico{color:#71e4bd}.nav-cta{padding:11px 15px;border-radius:11px;background:#fff;color:var(--navy);font-weight:900}.menu-btn{display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:8px 11px;font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:14px 20px;font-weight:900;transition:.18s;border:0;cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn-primary{color:#fff;background:linear-gradient(135deg,#367dff,#1d5ef2);box-shadow:0 12px 28px rgba(44,111,255,.28)}.btn-light{background:#fff;color:var(--navy)}.btn-outline{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.04)}.btn-outline-dark{border:1px solid var(--line);background:#fff;color:var(--ink)}
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;padding:72px 0 96px;position:relative;z-index:2}.hero h1{font-size:clamp(50px,6.4vw,78px);line-height:.96;letter-spacing:-.055em;margin:0 0 25px}.hero h1 em{font-style:normal;color:#63a9ff}.hero p{font-size:21px;color:rgba(255,255,255,.78);max-width:690px;margin:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 22px}.hero-call{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:#fff}.hero-call-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#22c55e;font-size:20px;box-shadow:0 0 0 6px rgba(34,197,94,.18)}.hero-call small{display:block;font-size:13px;line-height:1.2;color:rgba(255,255,255,.65)}.hero-call b{font-size:19px;line-height:1.3}.hero-call:hover b{text-decoration:underline;text-underline-offset:3px}.trustline{display:flex;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.75);font-size:13px}.trustline span:before{content:"✓";color:#71e4bd;font-weight:900;margin-right:7px}.hero-card{background:#fff;color:var(--ink);padding:17px;border-radius:27px;box-shadow:0 30px 76px rgba(0,0,0,.3)}.hero-card .image{height:315px;border-radius:20px;overflow:hidden;background:#dce6f2;position:relative}.hero-card .image img{width:100%;height:100%;object-fit:cover}.hero-card .caption{padding:16px 5px 4px}.hero-card .caption strong{font-size:18px}.hero-card .caption p{font-size:13px;color:var(--muted);margin:3px 0 0}.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.metric{background:#f5f8fc;border:1px solid #e9eef5;border-radius:12px;padding:11px;text-align:center}.metric b{display:block;font-size:14px}.metric span{font-size:11px;color:var(--muted)}
.proofbar{margin-top:-36px;position:relative;z-index:10}.proofgrid{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:20px;padding:22px;display:grid;grid-template-columns:repeat(4,1fr)}.proof{padding:7px 20px;border-right:1px solid #edf1f6}.proof:last-child{border-right:0}.proof strong{display:block;font-size:16px;margin-bottom:3px}.proof span{font-size:13px;color:var(--muted)}.proof-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#edf4ff;color:var(--blue);font-size:19px;margin-bottom:10px}a.proof:hover strong{color:var(--blue)}.proof u{text-underline-offset:2px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 8px 24px rgba(6,20,38,.035)}.card h3,.card h4{margin:0 0 8px}.card p{color:var(--muted);margin:0}.card .icon{width:49px;height:49px;border-radius:14px;background:#edf4ff;display:grid;place-items:center;font-size:23px;margin-bottom:15px}.card:hover{border-color:#bcd0f3;box-shadow:var(--shadow2)}
.problem{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}.pain-list{display:grid;gap:13px}.pain{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.pain .icon{width:42px;height:42px;display:grid;place-items:center;background:#eef4ff;border-radius:12px;flex:0 0 auto}.pain h3{margin:0 0 3px;font-size:18px}.pain p{margin:0;color:var(--muted);font-size:14px}
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:34px}.flow-step{padding:18px 12px;background:#fff;border:1px solid var(--line);border-radius:16px;text-align:center;position:relative}.flow-step:not(:last-child):after{content:"→";position:absolute;right:-15px;top:42%;font-weight:900;color:#8ea5c0}.flow-step b{display:block;margin:7px 0 2px}.flow-step span{font-size:12px;color:var(--muted)}
.service-card{min-height:245px;display:flex;flex-direction:column}.service-card .result{margin-top:auto;padding-top:14px;border-top:1px solid #edf1f6;font-size:13px}.service-card .result b{color:var(--green)}.link{color:#235fc7;font-weight:850;font-size:14px;margin-top:12px;display:inline-block}
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.visual-panel{background:linear-gradient(145deg,#07172b,#11375f);color:#fff;border-radius:26px;padding:30px;box-shadow:var(--shadow)}.visual-panel h3{font-size:30px;margin:0 0 10px}.visual-panel p{color:rgba(255,255,255,.72)}.automation-flow{display:grid;gap:10px;margin-top:20px}.automation-row{display:flex;align-items:center;gap:12px;padding:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:13px}.automation-row b{font-size:14px}.automation-row span{font-size:12px;color:rgba(255,255,255,.65);margin-left:auto}.bullet-checks{display:grid;gap:12px;margin-top:22px}.bullet-check{display:flex;gap:10px;align-items:flex-start}.bullet-check i{font-style:normal;color:var(--green);font-weight:900}
.sector{padding:20px;border-radius:17px;background:#fff;border:1px solid var(--line)}.sector b{display:block;font-size:17px}.sector span{font-size:13px;color:var(--muted)}
.case-card{display:flex;flex-direction:column;min-height:360px}.case-label{display:inline-flex;align-self:flex-start;background:#edf4ff;color:#245ec3;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;margin-bottom:14px}.case-card h3{font-size:23px}.case-meta{display:grid;gap:9px;margin-top:17px}.case-meta div{font-size:13px;color:var(--muted)}.case-meta b{color:var(--ink)}.case-note{margin-top:auto;border-top:1px solid var(--line);padding-top:13px;font-size:12px;color:#7a8798}.case-note strong{color:var(--amber)}
.integrations{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.integration{padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;font-weight:850;font-size:13px}.dark .integration{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.trust-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:stretch}.trust-photo{height:auto;min-height:455px;border-radius:25px;overflow:hidden;box-shadow:var(--shadow);background:#dce6f2}.trust-photo img{width:100%;height:100%;object-fit:cover}.trust-points{display:grid;gap:12px;margin-top:24px}.trust-point{padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:15px}.trust-point b{display:block}.trust-point span{font-size:13px;color:var(--muted)}
/* Real client work, under "Waarom TimeBoosters": names only, no logos (permission needed). */
.clients{margin-top:40px;padding:28px 30px;border-radius:20px;background:var(--soft);border:1px solid var(--line)}
.clients h3{margin:0 0 10px;font-size:25px;line-height:1.25;letter-spacing:-.01em}
.clients>p{margin:0;color:var(--muted);max-width:780px}
.client-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.client{padding:18px 20px;border-radius:15px;background:#fff;border:1px solid var(--line)}
/* Real client work. Each client gave permission for its logo; they keep their own colours on a
   white card. Three equal cards: same structure, and the result line pinned to the bottom so it
   sits on one line across all three. Carrefour is the accented one. */
.clients-intro{margin:0;color:var(--muted);max-width:780px}
.case-stat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px;padding:18px 22px;border-radius:16px;background:var(--navy);color:#fff}
.case-stat b{font-size:34px;line-height:1;letter-spacing:-.02em;color:#7db8ff}
.case-stat span{font-size:14px;color:rgba(255,255,255,.82);max-width:640px}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;align-items:stretch}
.case-real{display:flex;flex-direction:column;padding:24px 26px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.case-highlight{border-color:#b6d0f6;box-shadow:0 20px 44px rgba(11,35,64,.14)}
.case-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:86px}
.case-logo{height:54px;width:auto}
.case-tag{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.case-real h3{margin:14px 0 10px;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.case-real p{margin:0;color:var(--muted);font-size:15px}
.case-goal{margin-top:auto!important;padding-top:14px;border-top:1px solid var(--line);color:var(--ink)!important}
.case-goal b{color:var(--ink)}
.client span{font-size:13px;color:var(--muted)}
.process{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:32px}.process-card{padding:19px 16px;border:1px solid var(--line);border-radius:17px;background:#fff}.process-card .num{font-size:11px;font-weight:950;color:var(--blue);margin-bottom:10px}.process-card h3{font-size:17px;margin:0 0 6px}.process-card p{font-size:13px;color:var(--muted);margin:0}
.compare{overflow:auto}.compare table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.compare th,.compare td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.compare th{background:#f5f8fc}.compare tr:last-child td{border-bottom:0}.yes{color:var(--green);font-weight:900}.no{color:#8a96a7}
.faq{display:grid;gap:10px;margin-top:30px}.faq details{border:1px solid var(--line);background:#fff;border-radius:15px;padding:0 18px}.faq summary{font-weight:850;cursor:pointer;padding:17px 0}.faq details p{color:var(--muted);margin:0 0 17px}.faq summary::marker{color:var(--blue)}
.cta{background:radial-gradient(circle at 80% 20%,rgba(75,144,255,.26),transparent 30%),linear-gradient(135deg,#0a203b,#061426);color:#fff;border-radius:28px;padding:44px;display:flex;justify-content:space-between;gap:30px;align-items:center;box-shadow:var(--shadow)}.cta h2{font-size:clamp(32px,4vw,46px);line-height:1.05;margin:0 0 10px}.cta p{color:rgba(255,255,255,.72);max-width:680px;margin:0}.cta-actions{display:flex;flex-direction:column;gap:10px;min-width:250px}.cta-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:14px;font-weight:800}.cta-contact a{display:inline-flex;align-items:center;gap:6px}.cta-contact a:hover{text-decoration:underline;text-underline-offset:3px}.cta-contact .ico{color:#71e4bd}.cta small{text-align:center;color:rgba(255,255,255,.58)}
.page-hero{padding:66px 0 78px}.page-hero .wrap{max-width:900px}.page-hero h1{font-size:clamp(48px,6vw,74px);line-height:.98;letter-spacing:-.05em;margin:0 0 20px}.page-hero p{font-size:20px;color:rgba(255,255,255,.74);max-width:760px}.breadcrumbs{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:20px}.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.pill{font-size:12px;font-weight:850;padding:8px 11px;border-radius:999px;background:#edf4ff;color:#275fbf}.dark .pill,.site-header .pill{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.1)}
.content h2{font-size:34px;line-height:1.12;margin:42px 0 12px}.content h3{font-size:23px;margin:28px 0 9px}.content p,.content li{color:var(--muted)}.content ul{padding-left:20px}.notice{border-left:4px solid var(--blue);padding:17px 19px;background:#eef5ff;border-radius:0 13px 13px 0;color:#37506e}.notice strong{color:var(--ink)}
footer{background:#04101e;color:#fff;padding:50px 0 20px}.footergrid{display:grid;grid-template-columns:1.4fr .9fr .9fr 1fr;gap:32px}.footergrid p,.footergrid li{color:rgba(255,255,255,.64);font-size:13px}.footergrid ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}.footergrid a:hover{color:#fff}.footbottom{border-top:1px solid rgba(255,255,255,.08);margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.48);font-size:12px}.legal-links{display:flex;gap:14px}
.callbar{display:none}
/* Scroll-animaties. site.js zet .show en een transition-delay per kaart in een raster; de
   beweging loopt zacht uit in plaats van lineair, zodat het binnenschuiven stopt in plaats van
   afgekapt wordt. Onderaan dit bestand staat het blok dat alles uitzet bij "verminder beweging". */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.68,.26,1)}.reveal.show{opacity:1;transform:none}
@media(max-width:1180px){.nav-phone{font-size:0;gap:0}.nav-phone .ico{font-size:18px}}
@media(max-width:1050px){.trust-photo{min-height:0;aspect-ratio:4/3}.hero,.problem,.feature-split,.trust-layout{grid-template-columns:1fr}.proofgrid{grid-template-columns:repeat(2,1fr)}.proof:nth-child(2){border-right:0}.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:repeat(3,1fr)}.flow-step:nth-child(3):after{display:none}.process{grid-template-columns:repeat(3,1fr)}.footergrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topbar-trust{display:none!important}.topbar-contact{gap:2px 14px}.nav-phone{font-size:14px;gap:7px}.nav-phone .ico{font-size:1em}.callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:890;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(4,16,30,.96);box-shadow:0 -8px 24px rgba(0,0,0,.18)}.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;font-weight:900;font-size:15px}.callbar .ico{font-size:18px}.callbar-call{background:#22c55e;color:#fff}.callbar-lead{background:#fff;color:var(--navy)}body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}.nav{height:72px}.menu-btn{display:block}.navlinks{display:none;position:absolute;left:0;right:0;top:72px;background:#07182d;padding:18px;border-radius:0 0 16px 16px;flex-direction:column;align-items:flex-start}.navlinks.open{display:flex}.hero{padding:48px 0 78px}.hero h1{font-size:50px}.hero-card .image{height:240px}.proofgrid,.grid2,.grid3,.grid4,.flow,.process,.footergrid,.case-grid{grid-template-columns:1fr}.clients{padding:22px 20px}.clients h3{font-size:22px}.case-real{padding:20px}.case-brand{min-height:0}.case-stat{padding:16px 18px}.case-stat b{font-size:30px}.proof{border-right:0;border-bottom:1px solid #edf1f6}.proof:last-child{border-bottom:0}.flow-step:after{display:none!important}.section{padding:68px 0}.cta{padding:30px;display:block}.cta-actions{margin-top:22px;min-width:0}.trust-photo{aspect-ratio:4/5}.hero-metrics{grid-template-columns:1fr}.footbottom{display:block}.legal-links{margin-top:8px}}
/* Key phrases in running text: darker and heavier on light backgrounds, white on dark ones. */
strong.kw{font-weight:800;color:var(--ink);display:inline}
.site-header strong.kw,.dark strong.kw,.cta strong.kw,.visual-panel strong.kw,.case-stat strong.kw,.calc-section strong.kw,footer strong.kw{color:#fff}
/* The owner's slogan (2026-09-19): under the hero intro on the homepage and under the logo in every footer. */
.slogan{margin:22px 0 0;padding:4px 0 4px 16px;border-left:3px solid #63a9ff;font-size:18px;font-style:italic;line-height:1.45;color:#fff;max-width:640px}
.footer-slogan{margin:10px 0 0!important;font-style:italic;color:rgba(255,255,255,.82)!important;font-size:14px!important}
@media(max-width:760px){.slogan{font-size:16px}}
/* Calculators in the header (owner, 2026-09-19): "Home" made room, the logo links home. The nav
   fits on one line from 1050 px with these gaps; below 1050 px it wrapped before as well. */
.navlinks{gap:18px}
.nav-calc{color:#5ce0cb!important;font-weight:850}
.nav-calc:hover{color:#8ff0e0!important}
@media(max-width:1240px){.navlinks{gap:13px;font-size:13.5px}}
/* "Gratis voor jou": value for an address. Cards open the lead dialog (lead-form.js): a free check
   with its own title and button (data-lead-title/-text/-button) or a guide (data-lead-guide). */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:10px}
.offer-card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.offer-card-strong{border-color:#8fe3d6;box-shadow:0 18px 40px rgba(11,143,123,.12)}
.offer-tag{align-self:flex-start;padding:5px 10px;border-radius:999px;background:#e6fbf7;color:#0b8f7b;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.offer-card h3{margin:4px 0 0;font-size:20px;line-height:1.25}
.offer-card p{margin:0 0 6px;color:var(--muted);font-size:15px}
.offer-card .btn{margin-top:auto;align-self:flex-start}
.guide h2{margin-top:34px}
.guide-quote{margin:0 0 16px;padding:16px 18px;border-left:4px solid #18e0c0;background:#f1fcf9;border-radius:0 12px 12px 0;font-style:italic;color:var(--ink)}
.guide-list li{margin-bottom:10px}
@media print{.topbar,.site-header nav,.callbar,.tb-ai-fabs,footer,.cta,.guide-print{display:none!important}}
/* Trust figures (owner, 2026-09-19; README-CONTENT.md): a band under the hero of every page. */
.stats-band{padding:34px 0;background:linear-gradient(135deg,#061426,#0b2340)}
.proofbar+.stats-band{margin-top:40px}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats li{padding:18px 18px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-align:center}
.stats b{display:block;font-variant-numeric:tabular-nums;font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:950;background:linear-gradient(135deg,#5ce0cb,#63a9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.78);line-height:1.35}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:10px}.stats li{padding:14px 10px}.stats span{font-size:12.5px}}
/* Navigation with two dropdowns (owner, 2026-09-19: fewer items, the rest one click deeper). The
   header no longer clips its content, so an open menu can reach past a short hero. */
.site-header{overflow:visible}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.nav-drop-btn:hover{color:#fff}
.nav-chev{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.nav-drop.open .nav-chev{transform:rotate(180deg)}
.nav-drop-menu{display:none;position:absolute;top:100%;left:-18px;z-index:60;padding-top:10px}
.nav-drop.open .nav-drop-menu{display:block}
.nav-drop-panel{display:grid;gap:2px;min-width:290px;padding:10px;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(4,16,30,.28)}
.nav-drop-panel a{display:grid;gap:1px;padding:10px 12px;border-radius:12px;color:var(--ink)}
.nav-drop-panel a:hover,.nav-drop-panel a:focus-visible{background:var(--soft);color:var(--ink)}
.nav-drop-panel b{font-size:14.5px;font-weight:850}
.nav-drop-panel span{font-size:12.5px;font-weight:600;color:var(--muted)}
.nav-drop-panel .nav-drop-all{margin-top:4px;padding-top:12px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;color:#0b8f7b;font-weight:850;font-size:14px}
@media(hover:hover) and (min-width:761px){.nav-drop:hover .nav-drop-menu{display:block}.nav-drop:hover .nav-chev{transform:rotate(180deg)}}
@media(max-width:800px){
  .nav-drop{width:100%}
  .nav-drop-btn{width:100%;justify-content:space-between;padding:4px 0}
  .nav-drop-menu{position:static;padding-top:6px}
  .nav-drop-panel{min-width:0;padding:4px 0 4px 12px;border-radius:0;background:transparent;box-shadow:none;border-left:2px solid rgba(255,255,255,.12)}
  .nav-drop-panel a{padding:8px 10px;color:#fff}
  .nav-drop-panel a:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-drop-panel span{color:rgba(255,255,255,.6)}
  .nav-drop-panel .nav-drop-all{border-top-color:rgba(255,255,255,.12);color:#5ce0cb}
  .navlinks{z-index:60;max-height:calc(100dvh - 72px);overflow-y:auto}
}
/* 801-900 px: a compacter nav keeps one line. 761-800 px (a tablet held upright): the phone menu. */
@media(max-width:900px){.navlinks{gap:10px;font-size:13px}.nav-cta{padding:9px 11px}.brand{font-size:21px}.nav{gap:16px}}
@media(min-width:761px) and (max-width:800px){
  .menu-btn{display:block}
  .navlinks{display:none;position:absolute;left:0;right:0;top:82px;background:#07182d;padding:18px;border-radius:0 0 16px 16px;flex-direction:column;align-items:flex-start;gap:18px;font-size:14px}
  .navlinks.open{display:flex}
  .nav-phone{font-size:14px;gap:7px}.nav-phone .ico{font-size:1em}
}
/* An open phone menu is not covered by the chat buttons. */
html:has(.navlinks.open) .tb-ai-fabs{display:none!important}
/* Homepage hero: the key figures where people land (owner, 2026-09-19). In the photo card on
   desktop; under the intro on phones and tablets, where the card drops below the text. */
.hero-card strong.kw{color:var(--ink);font-size:inherit}
.hero-proof .metric b{font-size:22px;line-height:1.1;font-weight:950;letter-spacing:-.02em;background:linear-gradient(135deg,#0b8f7b,#2c6fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-proof .metric span{display:block;margin-top:3px;line-height:1.3}
.hero-stats{display:flex;gap:12px;margin:24px 0 0;max-width:560px}
.hero-stats div{flex:1;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.hero-stats b{display:block;font-size:clamp(28px,3vw,36px);line-height:1.05;font-weight:950;letter-spacing:-.02em;background:linear-gradient(135deg,#5ce0cb,#63a9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{display:block;margin-top:4px;font-size:14px;line-height:1.3;color:rgba(255,255,255,.8)}
.hero-stats{display:flex}
@media(max-width:760px){.hero-stats span{font-size:13px}}
.hero .slogan{margin-top:20px}
/* The 30% bar under "Wat we al bouwden": the text centred beside the figure, full width. */
.case-stat{align-items:center;flex-wrap:nowrap}
.case-stat span{max-width:none;font-size:15px;line-height:1.45}
.case-stat span strong{color:#fff}
@media(max-width:560px){.case-stat{flex-direction:column;align-items:flex-start;gap:6px}}
/* The nav button is the phone number now; the separate phone link is gone. */
.nav-cta{white-space:nowrap}

/* Blokken die site.js opzoekt (kaarten, sectiekoppen, de cta). Een animatie, geen ruststand: er is
   niets onzichtbaar zolang de klasse er niet op staat. */
.op{animation:op-komen .62s cubic-bezier(.22,.68,.26,1) both}
@keyframes op-komen{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* De cijferbalk: site.js zet .aan zodra ze in beeld komt, en de kaarten komen een voor een op.
   Geen opacity in de ruststand, dus zonder JS is er niets te zien van deze regels. */
.stats.aan li{animation:kaart-op .55s cubic-bezier(.22,.68,.26,1) both}
.stats.aan li:nth-child(2){animation-delay:.09s}
.stats.aan li:nth-child(3){animation-delay:.18s}
.stats.aan li:nth-child(4){animation-delay:.27s}
@keyframes kaart-op{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* Wie in zijn systeem heeft staan dat beweging beperkt moet blijven, krijgt deze pagina's stil:
   alles staat er meteen. site.js slaat dan ook de teller en de vertragingen over. Alleen de
   animaties van dit bestand gaan uit - de pulserende microfoon en de typende puntjes in de AI-demo
   zijn geen versiering maar het enige teken dat de AI luistert of antwoordt, en blijven dus staan. */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.show{opacity:1;transform:none;transition:none}
  .stats.aan li,.op{animation:none}
}

/* Waar de tweede foto stond, staat een uitnodiging voor de AI-demo: geen foto's van het team meer
   op de site (eigenaar, 2026-10-21). Het paneel vult de kolom naast de vertrouwenspunten. */
.trust-panel{display:flex;flex-direction:column;justify-content:center}.trust-panel .eyebrow{color:#7db8ff}.trust-panel-cta{align-self:flex-start;margin-top:22px}