/*
Theme Name: Welday
Theme URI: https://welday.nl
Author: Welday
Description: Custom WordPress theme - Full-stack Marketing Bureau
Version: 1.0.0
Text Domain: welday
*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#FAF9F7;--bg2:#F2F0ED;--bg3:#ECEAE6;--white:#FFF;--surface:#FFF;--dark:#1A1A1A;--dark2:#2D2D2D;--text:#1A1A1A;--text2:#6B6B6B;--text3:#999;--border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.12);--accent:#FF6B35;--accent2:#E85D2C;--accent-soft:rgba(255,107,53,.08);--accent-soft2:rgba(255,107,53,.15);--green:#10B981;--green-soft:rgba(16,185,129,.08);--blue:#3B82F6;--blue-soft:rgba(59,130,246,.08);--purple:#8B5CF6;--purple-soft:rgba(139,92,246,.08);--teal:#0EA5E9;--teal-soft:rgba(14,165,233,.08);--coral:#E24B4A;--coral-soft:rgba(226,75,74,.08);--r:16px;--r2:24px;--r3:32px;--shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);--shadow:0 4px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);--shadow-lg:0 12px 40px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);--shadow-xl:0 24px 60px rgba(0,0,0,.1),0 8px 20px rgba(0,0,0,.05)}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}::selection{background:var(--accent);color:#fff}.container{max-width:1200px;margin:0 auto;padding:0 32px}
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:12px 32px}.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:0 8px 0 24px;height:70px;box-shadow:var(--shadow)}.site-logo{display:flex;align-items:center;gap:6px;font-weight:800;font-size:18px;letter-spacing:-.5px;flex-shrink:0}.site-logo svg{flex-shrink:0}
.nav-menu{display:flex;align-items:center;gap:0;height:100%;list-style:none;margin:0;padding:0}.nav-menu>li{position:relative;height:100%;display:flex;align-items:center}.nav-menu>li>a{font-size:13px;font-weight:600;color:var(--text2);padding:0 14px;height:100%;display:flex;align-items:center;gap:4px;transition:color .15s}.nav-menu>li>a:hover{color:var(--text)}.nav-menu>li.menu-item-accent>a{color:var(--accent);font-weight:700}
.nav-menu>li>.sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;transition-delay:.12s;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:20px 16px 16px;min-width:260px;list-style:none;box-shadow:var(--shadow-xl);z-index:200}.nav-menu>li:hover>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.sub-menu li a{display:block;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:500;color:var(--text2);transition:background .15s}.sub-menu li a:hover{background:var(--bg2);color:var(--text)}
.nav-cta{background:var(--accent);color:#fff!important;padding:10px 22px;border-radius:100px;font-weight:700;font-size:13px;transition:transform .15s,box-shadow .15s;flex-shrink:0;margin:8px 0;display:inline-block}.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,107,53,.25)}
.mobile-toggle{display:none;background:none;border:none;color:var(--dark);cursor:pointer;padding:8px}
@media(max-width:768px){
  .site-nav{padding:8px 16px}
  .nav-inner{padding:0 6px 0 16px}
  .nav-menu{display:none}
  .mobile-toggle{display:block}
  .nav-cta{display:none}
  .theme-toggle{display:none}
}
/* ── Mobile menu overlay ── */
.mobile-menu{position:fixed;inset:0;z-index:9999;pointer-events:none;visibility:hidden}
.mobile-menu.is-open{pointer-events:auto;visibility:visible}
.mm-inner{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--white);transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.mobile-menu.is-open .mm-inner{transform:translateX(0)}
.mm-header{flex-shrink:0;padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mm-close{background:none;border:none;color:var(--dark);cursor:pointer;padding:6px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.mm-close:hover{background:var(--bg2)}
.mm-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mm-footer{flex-shrink:0;padding:16px 20px;border-top:1px solid var(--border);background:var(--bg2)}
/* accordion */
.mm-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;background:none;border:none;border-bottom:1px solid var(--border);font-size:16px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;text-align:left}
.mm-chevron{transition:transform .3s cubic-bezier(.16,1,.3,1);color:var(--text3);flex-shrink:0}
.mm-group.open>.mm-group-toggle .mm-chevron{transform:rotate(180deg)}
.mm-group-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
.mm-group.open>.mm-group-content{max-height:3000px}
/* sub-accordions */
.mm-category{border-bottom:1px solid var(--border)}
.mm-category:last-of-type{border-bottom:none}
.mm-cat-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:14px 20px 14px 28px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left}
.mm-cat-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;flex:1}
.mm-cat-count{font-size:11px;color:var(--text3);background:var(--bg);padding:2px 8px;border-radius:100px;font-weight:600}
.mm-cat-chevron{width:16px;height:16px;color:var(--text3);transition:transform .3s;flex-shrink:0}
.mm-category.open>.mm-cat-toggle .mm-cat-chevron{transform:rotate(180deg)}
.mm-cat-links{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1);background:var(--bg)}
.mm-category.open>.mm-cat-links{max-height:600px}
.mm-cat-links a{display:block;padding:12px 20px 12px 40px;font-size:14px;font-weight:500;color:var(--text2);border-top:1px solid var(--border)}
.mm-cat-links a:first-child{border-top:none}
.mm-cat-links a:active{background:var(--accent-soft);color:var(--accent)}
.mm-view-all{display:block;padding:14px 20px;text-align:center;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft)}
.mm-item{display:block;padding:16px 20px;font-size:16px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border)}
.mm-item:active{background:var(--bg2)}
.mm-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:var(--accent);color:#fff;text-decoration:none;border-radius:100px;font-size:14px;font-weight:700;margin-bottom:12px}
.mm-contact{display:flex;justify-content:center;gap:16px}
.mm-contact a{font-size:12px;color:var(--text3)}
.mm-theme-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.mm-theme-label{font-size:12px;color:var(--text3);font-weight:600}
.mm-theme-toggle{margin:0}
.mobile-sticky-cta{display:none}
@media(max-width:768px){.mobile-sticky-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:90;padding:12px 16px 20px;background:linear-gradient(to top,var(--bg) 70%,transparent);pointer-events:none}.mobile-sticky-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:100px;padding:15px 24px;font-size:15px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;pointer-events:auto;box-shadow:0 6px 24px rgba(255,107,53,.4);transition:transform .15s,box-shadow .15s}.mobile-sticky-btn:active{transform:scale(.97);box-shadow:0 3px 12px rgba(255,107,53,.3)}}
[data-theme="dark"] .mm-inner{background:var(--bg)}
[data-theme="dark"] .mm-header,[data-theme="dark"] .mm-footer{border-color:var(--border)}
[data-theme="dark"] .mm-group-toggle,[data-theme="dark"] .mm-item{border-color:var(--border)}
[data-theme="dark"] .mm-cat-links{background:var(--bg2)}
[data-theme="dark"] .mm-cat-links a{border-color:var(--border)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-d1{transition-delay:.06s}.reveal-d2{transition-delay:.12s}.reveal-d3{transition-delay:.18s}.reveal-d4{transition-delay:.24s}
.btn-primary{background:var(--accent);color:#fff;padding:14px 32px;border-radius:100px;font-weight:700;font-size:14px;transition:transform .15s,box-shadow .15s;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,107,53,.3);color:#fff}.btn-secondary{background:var(--white);color:var(--text);padding:14px 32px;border-radius:100px;font-weight:600;font-size:14px;border:1px solid var(--border2);transition:box-shadow .2s;display:inline-flex;align-items:center;gap:8px}.btn-secondary:hover{box-shadow:var(--shadow)}
.section{padding:100px 0}.section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:12px}.section-title{font-size:clamp(30px,3.5vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.15;color:var(--dark)}.section-title .muted{color:var(--text2)}.section-sub{margin-top:12px;color:var(--text2);font-size:15px;max-width:480px;line-height:1.7}.section-header{text-align:center;max-width:640px;margin:0 auto 56px}.section-header .section-sub{margin-inline:auto}
.hero{padding:160px 0 80px;text-align:center;position:relative}.hero::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:1000px;height:800px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,107,53,.06) 0%,transparent 70%);pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--accent-soft2);padding:6px 18px 6px 8px;border-radius:100px;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:28px}.hero-badge .dot{width:22px;height:22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}.hero h1{font-size:clamp(40px,5.5vw,72px);font-weight:800;line-height:1.08;letter-spacing:-2.5px;max-width:780px;margin:0 auto;color:var(--dark)}.hero h1 .gradient{background:linear-gradient(135deg,var(--accent),#FF8F6B);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero p{margin-top:20px;font-size:17px;color:var(--text2);max-width:520px;margin-inline:auto;line-height:1.75}.hero-buttons{display:flex;gap:12px;justify-content:center;margin-top:32px}
.hero-visual{margin-top:64px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow-xl);overflow:hidden;max-width:900px;margin-left:auto;margin-right:auto}.hv-top{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--bg)}.hv-dots{display:flex;gap:6px}.hv-dots span{width:10px;height:10px;border-radius:50%;background:var(--bg3)}.hv-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--text2)}.hv-rows{padding:16px 20px;display:flex;flex-direction:column;gap:8px}.hv-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--white);transition:box-shadow .2s}.hv-row:hover{box-shadow:var(--shadow)}.hv-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}.hv-info{flex:1;min-width:0}.hv-company{font-size:13px;font-weight:600}.hv-page{font-size:11px;color:var(--text3);margin-top:1px}.hv-score{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700}.hv-hot{background:var(--green-soft);color:var(--green)}.hv-warm{background:var(--blue-soft);color:var(--blue)}.hv-cold{background:var(--bg2);color:var(--text3)}.hv-badge-new{background:var(--accent);color:#fff;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;flex-shrink:0}
.logos-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:56px 0}.logos-label{text-align:center;font-size:12px;color:var(--text3);font-weight:500;margin-bottom:28px}.logos-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;opacity:.35}.logos-row span{font-weight:700;font-size:16px;color:var(--dark)}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}.ps-card{border-radius:var(--r2);padding:40px 36px;border:1px solid var(--border);background:var(--white)}.ps-card.problem{border-left:4px solid #EF4444}.ps-card.solution{border-left:4px solid var(--green)}.ps-tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;margin-bottom:16px}.ps-card h3{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:14px;line-height:1.3}.ps-card li{padding:7px 0;font-size:13px;color:var(--text2);display:flex;align-items:flex-start;gap:10px;line-height:1.5;list-style:none}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}.service-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:36px 28px;transition:box-shadow .3s,transform .3s;display:block}.service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.service-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px}.service-card h3{font-size:17px;font-weight:800;margin-bottom:8px;letter-spacing:-.3px}.service-card p{font-size:13px;color:var(--text2);line-height:1.65}.service-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}.service-tags span{padding:4px 10px;border-radius:100px;font-size:10px;font-weight:600;background:var(--bg2);color:var(--text2)}
.pulse-section{background:var(--dark);color:#fff;border-radius:var(--r3);margin:0 32px;padding:80px 48px;position:relative;overflow:hidden}.pulse-section::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.12),transparent 70%);pointer-events:none}.pulse-inner{max-width:1100px;margin:0 auto}.pulse-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,107,53,.15);border:1px solid rgba(255,107,53,.25);padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;color:var(--accent);margin-bottom:20px}.pulse-title{font-size:clamp(28px,3vw,36px);font-weight:800;color:var(--accent);letter-spacing:-1px}.pulse-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px}.pulse-feat{padding:20px 24px;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);margin-bottom:12px;transition:background .2s}.pulse-feat:hover{background:rgba(255,255,255,.08)}.pulse-feat h4{font-size:15px;font-weight:700;margin-bottom:6px}.pulse-feat p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6}.pulse-visual{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r2);padding:40px;text-align:center}.pulse-big{font-size:clamp(56px,8vw,80px);font-weight:800;color:var(--accent);letter-spacing:-3px;line-height:1}.pulse-big-label{font-size:14px;color:rgba(255,255,255,.5);margin-top:8px}.pulse-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:32px;background:rgba(255,255,255,.06);border-radius:var(--r);overflow:hidden}.pulse-stat{background:rgba(255,255,255,.03);padding:20px 12px}.pulse-stat .num{font-size:24px;font-weight:800}.pulse-stat .label{font-size:10px;color:rgba(255,255,255,.4);margin-top:4px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.proof-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px 28px;transition:box-shadow .3s;display:flex;flex-direction:column}.proof-card:hover{box-shadow:var(--shadow)}.proof-stars{color:var(--accent);font-size:14px;letter-spacing:2px;margin-bottom:12px}.proof-quote{font-size:14px;line-height:1.7;color:var(--text2);font-style:italic;flex:1}.proof-author{display:flex;align-items:center;gap:12px;margin-top:20px}.proof-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.proof-name{font-size:13px;font-weight:700}.proof-role{font-size:11px;color:var(--text3)}.proof-result{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;align-items:baseline;gap:8px}.proof-result .num{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-1px}.proof-result .label{font-size:12px;color:var(--text2)}
.cta-section{padding:120px 0;text-align:center;position:relative}.cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.05),transparent 70%);pointer-events:none}.cta-section h2{font-size:clamp(34px,4.5vw,56px);font-weight:800;letter-spacing:-2px;color:var(--dark)}.cta-section h2 .gradient{background:linear-gradient(135deg,var(--accent),#FF8F6B);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.cta-section p{margin-top:14px;color:var(--text2);font-size:16px;max-width:440px;margin-inline:auto;line-height:1.7}
.page-hero{padding:140px 0 60px;text-align:center;position:relative}.page-hero::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:600px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,107,53,.05) 0%,transparent 70%);pointer-events:none}.page-hero h1{font-size:clamp(34px,4.5vw,56px);font-weight:800;letter-spacing:-2px;line-height:1.1;color:var(--dark);max-width:700px;margin:0 auto}.page-hero p{margin-top:16px;font-size:16px;color:var(--text2);max-width:520px;margin-inline:auto;line-height:1.7}
.service-detail{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:48px 40px;margin-bottom:20px;scroll-margin-top:100px;transition:box-shadow .3s}.service-detail:hover{box-shadow:var(--shadow)}.service-detail h2{font-size:22px;font-weight:800;letter-spacing:-.5px}.desc{font-size:15px;color:var(--text2);line-height:1.7;margin-bottom:28px;max-width:680px}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}.feature-item{padding:20px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border)}.feature-item h4{font-size:14px;font-weight:700;margin-bottom:6px}.feature-item p{font-size:12px;color:var(--text2);line-height:1.6}
.group-divider{padding:48px 0 24px;display:flex;align-items:center;gap:16px}.group-divider h3{font-size:20px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}.group-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.case-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:20px;transition:box-shadow .3s}.case-card:hover{box-shadow:var(--shadow-lg)}.case-inner{display:grid;grid-template-columns:1fr 1fr}.case-content{padding:48px 40px;display:flex;flex-direction:column;justify-content:center}.case-tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;margin-bottom:16px;width:fit-content}.case-card h3{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:12px;line-height:1.2}.case-results{display:flex;gap:32px;margin-top:24px}.case-result .num{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-1px}.case-result .label{font-size:11px;color:var(--text2);margin-top:2px}.case-visual{background:var(--bg2);display:flex;align-items:center;justify-content:center;padding:48px;min-height:320px}.case-quote{background:var(--bg);border-radius:var(--r);padding:28px;max-width:320px}.case-quote p{font-size:13px;font-style:italic;color:var(--text2);line-height:1.7;margin-bottom:16px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.contact-form{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:40px}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r);font-family:inherit;font-size:14px;background:var(--bg);color:var(--text);outline:none;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}.form-group textarea{min-height:120px;resize:vertical}.form-submit{width:100%;background:var(--accent);color:#fff;padding:14px;border-radius:100px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:transform .15s}.form-submit:hover{transform:translateY(-2px)}.info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:28px;margin-bottom:16px}.info-card h3{font-size:16px;font-weight:800;margin-bottom:6px}.info-card a{color:var(--accent);font-weight:600}.expect-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0}.expect-num{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.about-visual{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:40px;text-align:center}.about-visual .big{font-size:56px;font-weight:800;color:var(--accent);letter-spacing:-2px}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.value-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:36px 28px;transition:box-shadow .3s}.value-card:hover{box-shadow:var(--shadow-lg)}.value-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}.value-card h3{font-size:17px;font-weight:800;margin-bottom:8px}.value-card p{font-size:13px;color:var(--text2);line-height:1.65}.tech-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}.tech-stack span{padding:8px 18px;border-radius:100px;font-size:13px;font-weight:600;background:var(--white);border:1px solid var(--border);color:var(--text2)}
.site-footer{border-top:1px solid var(--border);margin-top:80px}.footer-main{max-width:1200px;margin:0 auto;padding:64px 32px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px}.footer-brand p{margin-top:16px;font-size:14px;color:var(--text2);line-height:1.7;max-width:320px}.footer-brand .footer-contact{margin-top:24px;display:flex;flex-direction:column;gap:8px}.footer-brand .footer-contact a{font-size:14px;color:var(--text2);transition:color .15s}.footer-brand .footer-contact a:hover{color:var(--accent)}.footer-social{display:flex;gap:10px;margin-top:20px}.footer-social a{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--border);color:var(--text2);transition:background .2s,color .2s,transform .15s;flex-shrink:0}.footer-social a:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}.footer-col h4{font-size:14px;font-weight:700;margin-bottom:16px;color:var(--dark)}.footer-col ul{list-style:none;padding:0;margin:0}.footer-col li{margin-bottom:10px}.footer-col a{font-size:13px;color:var(--text2);transition:color .15s}.footer-col a:hover{color:var(--accent)}.footer-bottom{border-top:1px solid rgba(0,0,0,.06);max-width:1200px;margin:0 auto;padding:20px 32px;display:flex;justify-content:space-between;align-items:center}.footer-bottom-left{display:flex;flex-direction:column;gap:2px}.footer-bottom p{font-size:11px;color:var(--text3)}.footer-kvk{font-size:11px;color:var(--text3);opacity:.6}.footer-bottom-links{display:flex;gap:24px}.footer-bottom-links a{font-size:11px;color:var(--text3);transition:color .15s}.footer-bottom-links a:hover{color:var(--text2)}
@media(max-width:1024px){.services-grid,.proof-grid,.values-grid{grid-template-columns:repeat(2,1fr)}.pulse-grid,.footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.container{padding:0 20px}.section{padding:80px 0}.services-grid,.proof-grid,.values-grid,.ps-grid,.features-grid,.contact-grid{grid-template-columns:1fr}.case-inner{grid-template-columns:1fr}.case-visual{min-height:auto;padding:32px}.hero-buttons{flex-direction:column;align-items:center}.pulse-section{margin:20px 16px;padding:60px 24px}.about-grid{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr;gap:32px}.footer-bottom{flex-direction:column;gap:8px;text-align:center}.service-detail{padding:32px 24px}.pulse-grid{grid-template-columns:1fr}}

/* ===== PREMIUM ENHANCEMENTS ===== */

/* Custom scrollbar */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:100px}::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* Custom cursor */
.cursor{position:fixed;width:7px;height:7px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s cubic-bezier(.16,1,.3,1),height .2s cubic-bezier(.16,1,.3,1),opacity .3s;mix-blend-mode:multiply}
.cursor-ring{position:fixed;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,107,53,.35);pointer-events:none;z-index:9998;transform:translate(-50%,-50%)}
.cursor.hovering{width:14px;height:14px}
.cursor-ring.hovering{width:50px;height:50px;border-color:rgba(255,107,53,.2)}
@media(max-width:768px){.cursor,.cursor-ring{display:none}}

/* Glassmorphism nav */
.nav-inner{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(255,255,255,.82)!important;transition:box-shadow .3s}
.site-nav.scrolled .nav-inner{box-shadow:0 8px 32px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)}

/* Hero mesh gradient */
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 15% 70%,rgba(255,107,53,.05),transparent 60%),radial-gradient(ellipse 50% 60% at 85% 20%,rgba(139,92,246,.04),transparent 60%),radial-gradient(ellipse 60% 40% at 50% 90%,rgba(59,130,246,.03),transparent 60%);pointer-events:none;z-index:0}
.hero>*{position:relative;z-index:1}

/* Animated gradient text */
@keyframes gradient-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero h1 .gradient{background:linear-gradient(135deg,#FF6B35 0%,#FF8F6B 30%,#E85D2C 60%,#FF6B35 100%);background-size:250% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-flow 4s ease infinite}

/* Hero staggered entrance */
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-badge{animation:fade-up .7s cubic-bezier(.16,1,.3,1) .05s both}
.hero h1{animation:fade-up .9s cubic-bezier(.16,1,.3,1) .15s both}
.hero>p{animation:fade-up .9s cubic-bezier(.16,1,.3,1) .28s both}
.hero-buttons{animation:fade-up .9s cubic-bezier(.16,1,.3,1) .38s both}
.hero-visual{animation:fade-up .9s cubic-bezier(.16,1,.3,1) .52s both}

/* Hero badge pulse */
@keyframes badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.35)}70%{box-shadow:0 0 0 7px rgba(255,107,53,0)}}
.hero-badge .dot{animation:badge-pulse 2.2s cubic-bezier(.455,.03,.515,.955) infinite}

/* Floating dashboard */
@keyframes gentle-float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-9px)}}
.hero-visual{animation:fade-up .9s cubic-bezier(.16,1,.3,1) .52s both,gentle-float 6s 1.5s ease-in-out infinite}

/* Animated dashboard rows */
@keyframes row-slide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
.hv-row{opacity:0;animation:row-slide .55s cubic-bezier(.16,1,.3,1) both}
.hv-row:nth-child(1){animation-delay:.75s}
.hv-row:nth-child(2){animation-delay:.92s}
.hv-row:nth-child(3){animation-delay:1.09s}
.hv-row:nth-child(4){animation-delay:1.26s}

/* Scroll indicator */
@keyframes scroll-bounce{0%,100%{transform:translateX(-50%) translateY(0);opacity:.5}50%{transform:translateX(-50%) translateY(6px);opacity:.9}}
.scroll-indicator{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;font-weight:700;color:var(--text3);letter-spacing:2.5px;text-transform:uppercase;animation:scroll-bounce 2.4s ease-in-out infinite;z-index:1;cursor:default}

/* Shimmer CTA button */
@keyframes shimmer-move{0%{background-position:200% center}100%{background-position:-200% center}}
.btn-primary{background:linear-gradient(110deg,var(--accent) 0%,#FF8F6B 40%,var(--accent2) 55%,var(--accent) 100%);background-size:200% auto;animation:shimmer-move 4s linear infinite}
.btn-primary:hover{animation-play-state:paused;transform:translateY(-2px)}

/* Logo marquee */
.logos-marquee{overflow:hidden;-webkit-mask:linear-gradient(to right,transparent,black 12%,black 88%,transparent);mask:linear-gradient(to right,transparent,black 12%,black 88%,transparent)}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.logos-track{display:flex;align-items:center;width:max-content;animation:marquee-scroll 22s linear infinite;gap:0}
.logos-track:hover{animation-play-state:paused}
.logos-track .logo-item{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13px;color:var(--dark);opacity:.4;white-space:nowrap;padding:0 32px;transition:opacity .3s;letter-spacing:-.1px}
.logos-track .logo-item:hover{opacity:.8}
.logos-track .logo-item img{display:block;width:22px;height:22px;flex-shrink:0;object-fit:contain}
.logos-track .logo-name{font-weight:700}

/* Stats ticker */
.stats-bar{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--white)}
.stats-bar-item{flex:1;padding:24px 20px;text-align:center;border-right:1px solid var(--border);position:relative;overflow:hidden;transition:background .25s}
.stats-bar-item:last-child{border-right:none}
.stats-bar-item:hover{background:var(--bg)}
.stats-bar-item::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:40px;height:2px;background:var(--accent);border-radius:2px 2px 0 0;transition:transform .3s}
.stats-bar-item:hover::before{transform:translateX(-50%) scaleX(1)}
.stats-num{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-1.5px;color:var(--dark);line-height:1;display:block}
.stats-num .accent-col{color:var(--accent)}
.stats-lbl{font-size:12px;color:var(--text2);margin-top:5px;font-weight:500}
@media(max-width:768px){.stats-bar{flex-wrap:wrap}.stats-bar-item{flex:1 1 50%;border-bottom:1px solid var(--border)}.stats-bar-item:nth-child(even){border-right:none}.stats-bar-item:nth-last-child(-n+2){border-bottom:none}}

/* Card spotlight hover */
.service-card,.proof-card{position:relative;overflow:hidden}
.service-card::before,.proof-card::before{content:'';position:absolute;inset:0;opacity:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,107,53,.05),transparent 40%);transition:opacity .4s;pointer-events:none;z-index:0;border-radius:inherit}
.service-card:hover::before,.proof-card:hover::before{opacity:1}
.service-card>*,.proof-card>*{position:relative;z-index:1}

/* Service card gradient border on hover */
.service-card{transition:transform .3s,box-shadow .3s,border-color .3s}
.service-card:hover{border-color:rgba(255,107,53,.18);box-shadow:0 16px 48px rgba(0,0,0,.07),0 4px 12px rgba(255,107,53,.06)}

/* Proof card result counter pop */
.proof-result .num{display:inline-block;transition:transform .3s,color .3s}
.proof-card:hover .proof-result .num{transform:scale(1.06);color:var(--accent2)}

/* PS cards improved */
.ps-card{transition:box-shadow .3s,transform .3s}
.ps-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* Pulse section glow */
.pulse-section{box-shadow:0 40px 100px rgba(0,0,0,.18),0 -1px 0 rgba(255,255,255,.04)}

/* Pulse big number glow */
.pulse-big{text-shadow:0 0 60px rgba(255,107,53,.25)}

/* CTA section bg gradient */
.cta-section::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 100%,rgba(255,107,53,.04),transparent 70%);pointer-events:none;z-index:0}
.cta-section>*{position:relative;z-index:1}

/* Service icon enhanced */
.service-icon{transition:transform .3s,box-shadow .3s}
.service-card:hover .service-icon{transform:scale(1.1) rotate(-4deg);box-shadow:0 6px 20px rgba(0,0,0,.08)}

/* Nav CTA button shimmer */
.nav-cta{background:linear-gradient(110deg,var(--accent) 0%,#FF8A5B 50%,var(--accent) 100%);background-size:200% auto;transition:background-position .4s,transform .2s,box-shadow .2s}
.nav-cta:hover{background-position:-100% center;transform:translateY(-1px)!important;box-shadow:0 6px 20px rgba(255,107,53,.3)!important}

/* Proof stars glow */
.proof-stars{filter:drop-shadow(0 1px 3px rgba(255,107,53,.3))}

/* Section label dot before */
.section-label::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle;opacity:.7}

/* Footer brand subtle gradient */
.site-footer{background:linear-gradient(to bottom,var(--bg),var(--white))}

/* Smooth focus rings */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Service card flex layout for arrow */
.service-card{display:flex;flex-direction:column}
.service-card:hover .card-arrow{opacity:1!important;transform:translateX(0)!important}

/* Logos section label spacing */
.logos-section .logos-label{margin-bottom:20px;padding-top:0}

/* ── MEGA MENU ─────────────────────────────────────────────── */
.menu-item-has-children .sub-menu{display:none}
.mega-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s .15s,visibility .18s .15s;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:40px 32px 20px;min-width:640px;box-shadow:var(--shadow-xl);z-index:200}
.menu-item-has-children:hover .mega-menu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .15s 0s,visibility .15s 0s}
.mega-menu-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.mega-col-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.mega-col ul{list-style:none;padding:0;margin:0}
.mega-col li{margin-bottom:2px}
.mega-col a{display:block;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text2);transition:background .12s,color .12s}
.mega-col a:hover{background:var(--bg2);color:var(--text)}
.mega-footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.mega-footer-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent);transition:gap .2s}
.mega-footer-link:hover{gap:10px}
.nav-chevron{transition:transform .2s;vertical-align:middle}
.menu-item-has-children:hover .nav-chevron{transform:rotate(180deg)}
@media(max-width:768px){.mega-menu{position:static;transform:none!important;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border:none;padding:8px 0;min-width:auto;background:transparent;border-radius:0}.mega-menu-inner{grid-template-columns:1fr;gap:12px}.mega-footer{display:none}}

/* ── DIENSTEN NAV STRIP ────────────────────────────────────── */
.diensten-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--border);position:sticky;top:76px;z-index:50;background:var(--bg);padding-top:16px}
.dn-tag{padding:7px 18px;border-radius:100px;font-size:12px;font-weight:700;color:var(--text2);background:var(--bg2);border:1px solid var(--border);transition:background .15s,color .15s,border-color .15s;text-decoration:none;white-space:nowrap}
.dn-tag:hover,.dn-tag.active{background:var(--dn-color,var(--accent));color:#fff;border-color:transparent}

/* Footer grid — 3 content cols */
.site-footer .footer-main{grid-template-columns:2fr 1.5fr 1fr}
@media(max-width:1024px){.site-footer .footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.diensten-nav{gap:6px;top:68px}.dn-tag{font-size:11px;padding:6px 14px}.site-footer .footer-main{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════
   DIENST PAGINA STYLES
═══════════════════════════════════════════════ */

/* Breadcrumb */
.svc-breadcrumb{display:flex;align-items:center;gap:8px;padding:20px 0 0;font-size:13px;color:var(--text2)}
.svc-breadcrumb a{color:var(--text2);transition:color .15s}.svc-breadcrumb a:hover{color:var(--accent)}
.svc-bc-sep{color:var(--text3);font-size:11px}
.svc-breadcrumb span:last-child{color:var(--text);font-weight:600}

/* Hero */
.svc-hero{padding:48px 0 80px;position:relative;overflow:hidden}
.svc-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(255,107,53,.04),transparent 60%),radial-gradient(ellipse 40% 60% at 10% 30%,rgba(139,92,246,.03),transparent 60%);pointer-events:none}
.svc-hero-inner{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center;position:relative;z-index:1}
.svc-hero-badge{display:inline-flex;align-items:center;padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:16px}
.svc-h1{font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-2px;line-height:1.1;color:var(--dark);margin-bottom:20px}
.svc-hero-intro{font-size:16px;color:var(--text2);line-height:1.75;max-width:540px;margin-bottom:28px}
.svc-hero-stat{display:flex;align-items:baseline;gap:12px;margin-bottom:32px;padding:20px 24px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);width:fit-content;box-shadow:var(--shadow)}
.svc-stat-num{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-1.5px;color:var(--accent)}
.svc-stat-label{font-size:13px;color:var(--text2);max-width:200px;line-height:1.4}
.svc-hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Hero visual side */
.svc-hero-visual{display:flex;flex-direction:column;gap:20px}
.svc-icon-large{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:var(--shadow)}
.svc-hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.svc-tag{padding:6px 14px;background:var(--white);border:1px solid var(--border);border-radius:100px;font-size:12px;font-weight:600;color:var(--text2);transition:border-color .2s,color .2s}
.svc-tag:hover{border-color:var(--accent);color:var(--accent)}
.svc-trust-row{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--bg2);border-radius:var(--r2);border:1px solid var(--border)}
.svc-trust-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text2)}
.svc-trust-icon{color:var(--green);font-weight:800;font-size:14px}

/* Section wrapper */
.svc-section{padding:80px 0}

/* Process steps */
.svc-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;position:relative}
.svc-process-step{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px 28px;position:relative;transition:box-shadow .3s,transform .3s}
.svc-process-step:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.svc-step-num{font-size:32px;font-weight:800;letter-spacing:-1px;line-height:1;margin-bottom:16px;opacity:.9}
.svc-step-title{font-size:16px;font-weight:800;margin-bottom:8px;color:var(--dark)}
.svc-step-desc{font-size:13px;color:var(--text2);line-height:1.65}
.svc-step-connector{position:absolute;top:50%;right:-13px;width:24px;height:2px;background:var(--border);z-index:1}

/* Features grid */
.svc-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.svc-feature-card{display:flex;align-items:flex-start;gap:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:28px;transition:box-shadow .3s}
.svc-feature-card:hover{box-shadow:var(--shadow)}
.svc-feature-check{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.svc-feature-title{font-size:15px;font-weight:800;margin-bottom:6px;color:var(--dark)}
.svc-feature-desc{font-size:13px;color:var(--text2);line-height:1.6}

/* Benefits */
.svc-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.svc-benefit-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:36px 28px;transition:box-shadow .3s,transform .3s}
.svc-benefit-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.svc-benefit-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.svc-benefit-title{font-size:17px;font-weight:800;margin-bottom:8px;color:var(--dark)}
.svc-benefit-desc{font-size:13px;color:var(--text2);line-height:1.65}

/* Social proof bar */
.svc-proof-bar{background:var(--dark);padding:60px 0}
.svc-proof-inner{max-width:720px;margin:0 auto;text-align:center}
.svc-proof-stars{font-size:20px;color:var(--accent);letter-spacing:3px;margin-bottom:16px;filter:drop-shadow(0 2px 6px rgba(255,107,53,.4))}
.svc-proof-text{font-size:18px;line-height:1.7;color:rgba(255,255,255,.85);font-style:italic;margin-bottom:24px}
.svc-proof-author{display:flex;align-items:center;gap:12px;justify-content:center}
.svc-proof-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.svc-proof-name{font-size:14px;font-weight:700;color:#fff;text-align:left}
.svc-proof-role{font-size:12px;color:rgba(255,255,255,.45);text-align:left}

/* FAQ */
.svc-faq-layout{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start}
.svc-faq-list{display:flex;flex-direction:column;gap:0}
.svc-faq-item{border-bottom:1px solid var(--border)}
.svc-faq-item:first-child{border-top:1px solid var(--border)}
.svc-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:15px;font-weight:700;color:var(--dark);transition:color .2s}
.svc-faq-q:hover{color:var(--accent)}
.svc-faq-icon{font-size:20px;font-weight:400;color:var(--text3);transition:transform .3s,color .2s;flex-shrink:0}
.svc-faq-item.open .svc-faq-icon{transform:rotate(45deg);color:var(--accent)}
.svc-faq-item.open .svc-faq-q{color:var(--accent)}
.svc-faq-a{padding:0 0 20px}
.svc-faq-a p{font-size:14px;color:var(--text2);line-height:1.75}

/* Related services */
.svc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.svc-related-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px 28px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .3s,transform .3s,border-color .3s}
.svc-related-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:rgba(255,107,53,.15)}
.svc-related-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:4px}
.svc-related-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.svc-related-title{font-size:16px;font-weight:800;color:var(--dark);letter-spacing:-.3px}
.svc-related-desc{font-size:13px;color:var(--text2);line-height:1.55;flex:1}
.svc-related-arrow{color:var(--accent);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;width:fit-content;margin-top:4px}
.svc-related-card:hover .svc-related-arrow{opacity:1;transform:translateX(0)}

/* Responsive dienst */
@media(max-width:1024px){
  .svc-hero-inner{grid-template-columns:1fr;gap:40px}
  .svc-hero-visual{order:-1;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;align-items:flex-start}
  .svc-icon-large{width:60px;height:60px;font-size:28px}
  .svc-process-grid{grid-template-columns:repeat(2,1fr)}
  .svc-step-connector{display:none}
  .svc-faq-layout{grid-template-columns:1fr;gap:40px}
  .svc-related-grid{grid-template-columns:repeat(2,1fr)}
  .svc-benefits-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .svc-hero{padding:24px 0 60px}
  .svc-h1{letter-spacing:-1.5px}
  .svc-process-grid,.svc-features-grid,.svc-benefits-grid,.svc-related-grid{grid-template-columns:1fr}
  .svc-hero-stat{width:100%;box-sizing:border-box}
  .svc-trust-row{display:none}
}

@media(max-width:768px){.hero::after{display:none}.scroll-indicator{display:none}.stats-bar-item{padding:18px 12px}}

/* ── Dienst Hero Split Layout ──────────────────────────── */
.dienst-hero-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0 72px}
.dienst-hero-split:not(.dienst-hero-split--has-image){grid-template-columns:1fr;max-width:720px}
.dienst-hero-content h1{font-size:clamp(32px,4vw,52px);font-weight:900;letter-spacing:-2px;line-height:1.08;margin:12px 0 0}
.dienst-hero-image{position:relative}
.dienst-hero-image-inner{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.06)}
.dienst-hero-image-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--hero-color,var(--accent)),transparent 60%);opacity:.12;z-index:1;pointer-events:none}
.dienst-hero-image-inner img{width:100%;height:340px;object-fit:cover;object-position:center;display:block;transition:transform .6s ease}
.dienst-hero-image:hover .dienst-hero-image-inner img{transform:scale(1.03)}
@media(max-width:1024px){
  .dienst-hero-split{grid-template-columns:1fr;gap:40px;padding:40px 0 56px}
  .dienst-hero-image-inner img{height:260px}
}
@media(max-width:768px){
  .dienst-hero-split{padding:32px 0 48px}
  .dienst-hero-image{display:none}
}

/* ═══════════════════════════════════════════════════════════
   CASES ARCHIVE  (archive-case.php)
═══════════════════════════════════════════════════════════ */

/* Hero */
.cases-hero{padding:80px 0 56px;border-bottom:1px solid var(--border)}
.cases-hero-inner{max-width:640px}
.cases-hero-title{font-size:clamp(36px,5vw,60px);font-weight:900;letter-spacing:-2.5px;line-height:1.05;margin:12px 0 16px}
.cases-hero-sub{font-size:17px;color:var(--text2);line-height:1.65}
/* Featured case */
.cases-featured-section{padding:48px 0 0}
.cases-featured-card{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r3);border:1px solid var(--border);overflow:hidden;background:var(--white);box-shadow:var(--shadow-lg);transition:box-shadow .3s;text-decoration:none;color:inherit}
.cases-featured-card:hover{box-shadow:var(--shadow-xl)}
.cases-fc-visual{background:var(--bg2);border-right:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}
.cases-fc-browser-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}
.cases-fc-visual img{width:100%;height:100%;object-fit:cover;object-position:top;max-height:380px}
.cases-fc-body{padding:48px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.cases-fc-tag{font-size:12px;font-weight:700;color:var(--fc-color,var(--accent));background:var(--fc-soft,var(--accent-soft));display:inline-block;padding:4px 12px;border-radius:100px;width:fit-content}
.cases-fc-title{font-size:clamp(22px,2.5vw,30px);font-weight:800;letter-spacing:-1px;line-height:1.15}
.cases-fc-tagline{font-size:15px;color:var(--text2);line-height:1.6}
.cases-fc-results{display:flex;gap:24px;flex-wrap:wrap}
.cases-fc-result{display:flex;flex-direction:column;gap:2px}
.cases-fc-num{font-size:22px;font-weight:800;letter-spacing:-.5px}
.cases-fc-label{font-size:11px;color:var(--text3);font-weight:500}
.cases-fc-cta{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;margin-top:4px}
/* Section headers in grid */
.cases-section-header{grid-column:1/-1;padding:56px 0 24px;border-top:1px solid var(--border);margin-top:16px}
.cases-section-header:first-child{border-top:none;margin-top:0;padding-top:0}
.cases-section-title{font-size:clamp(22px,2.5vw,28px);font-weight:800;letter-spacing:-1px;margin-bottom:6px}
.cases-section-sub{font-size:14px;color:var(--text2)}
@media(max-width:768px){
  .cases-featured-card{grid-template-columns:1fr}
  .cases-fc-visual{border-right:none;border-bottom:1px solid var(--border)}
  .cases-fc-visual img{max-height:220px}
  .cases-fc-body{padding:28px 24px}
}

/* Proof strip */
.cases-proof-strip{display:flex;align-items:center;gap:0;margin-top:48px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.cases-proof-item{flex:1;display:flex;flex-direction:column;gap:4px;padding:24px 28px}
.cases-proof-num{font-size:32px;font-weight:900;letter-spacing:-1.5px;color:var(--dark)}
.cases-proof-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3)}
.cases-proof-sep{width:1px;height:56px;background:var(--border);flex-shrink:0}

/* Grid */
.cases-grid-section{padding:72px 0 80px}
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:24px}

/* Card */
.case-card-new{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;display:grid;grid-template-columns:1fr 220px;transition:box-shadow .3s,transform .3s}
.case-card-new:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.case-card-featured{grid-column:1/-1;grid-template-columns:1fr 360px}
.case-card-bar{height:4px;grid-column:1/-1}
.case-card-body{padding:32px 32px 28px;display:flex;flex-direction:column;gap:0}

.case-card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.case-card-sector{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:100px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.case-card-year{font-size:12px;font-weight:600;color:var(--text3)}

.case-card-client{font-size:26px;font-weight:900;letter-spacing:-.8px;color:var(--dark);margin:0 0 8px;line-height:1.15}
.case-card-client a{color:inherit;text-decoration:none}
.case-card-tagline{font-size:13px;color:var(--text2);line-height:1.6;margin:0 0 20px}

.case-card-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.case-card-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;font-size:11px;font-weight:600;color:var(--dark)}
.case-card-chip-more{background:transparent;color:var(--text3)}

.case-card-stats{display:flex;gap:24px;margin-bottom:28px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.case-card-stat{display:flex;flex-direction:column;gap:3px}
.case-card-stat-num{font-size:22px;font-weight:900;letter-spacing:-.8px;line-height:1}
.case-card-stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}

.case-card-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;text-decoration:none;margin-top:auto;padding-top:4px;transition:gap .2s}
.case-card-cta:hover{gap:10px}

/* Thumbnail */
.case-card-thumb{position:relative;overflow:hidden;background:var(--bg2)}
.case-card-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.case-card-new:hover .case-card-thumb img{transform:scale(1.04)}
.case-card-thumb-overlay{position:absolute;inset:0;opacity:.12}

/* Responsive archive */
@media(max-width:1024px){
  .cases-grid{grid-template-columns:1fr}
  .case-card-new,.case-card-featured{grid-template-columns:1fr}
  .case-card-thumb{height:200px}
}
@media(max-width:768px){
  .cases-hero{padding:60px 0 40px}
  .cases-proof-strip{flex-wrap:wrap}
  .cases-proof-sep{display:none}
  .cases-proof-item{flex:0 0 50%;border-bottom:1px solid var(--border)}
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY PAGES  (single-case.php)
═══════════════════════════════════════════════════════════ */

/* ── Case Hero ─────────────────────────────────────────── */
.case-hero{position:relative;padding:80px 0 0;overflow:hidden;min-height:520px}
.case-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--case-color,#346B00) 0%,color-mix(in srgb,var(--case-color,#346B00) 60%,#000) 100%);opacity:.07;pointer-events:none}
.case-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 60% 0%,var(--case-color,#346B00),transparent 70%);opacity:.06;pointer-events:none}
.case-hero-inner{display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:start;padding-bottom:0}

.case-hero-meta{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.case-sector-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:100px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.case-year-tag{font-size:12px;font-weight:600;color:var(--text3);background:var(--bg2);border:1px solid var(--border);border-radius:100px;padding:4px 12px}

.case-hero-client{font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-2.5px;color:var(--dark);line-height:1.05;margin:0 0 16px}
.case-hero-tagline{font-size:18px;color:var(--text2);line-height:1.6;margin:0 0 28px}

.case-services-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.case-service-chip{display:inline-flex;align-items:center;height:30px;padding:0 14px;background:var(--white);border:1px solid var(--border);border-radius:100px;font-size:12px;font-weight:600;color:var(--dark)}

.case-hero-stats{display:flex;flex-wrap:wrap;gap:32px;padding:32px 0 0;border-top:1px solid var(--border)}
.case-hero-stat{display:flex;flex-direction:column;gap:4px}
.case-hero-stat-num{font-size:36px;font-weight:900;letter-spacing:-1.5px;line-height:1}
.case-hero-stat-label{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}

/* ── Browser Mockup ──────────────────────────────────────── */
.case-mockup{align-self:end;transform:translateY(20px)}
.case-mockup-browser{background:#fff;border-radius:16px 16px 0 0;box-shadow:0 32px 80px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.07);overflow:hidden}
.case-mockup-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f0f0f0;border-bottom:1px solid rgba(0,0,0,.08)}
.case-mockup-dots{display:flex;gap:6px}
.case-mockup-dots span{width:11px;height:11px;border-radius:50%;display:block}
.case-mockup-url{flex:1;background:#fff;border-radius:5px;padding:4px 10px;font-size:11px;color:var(--text3);font-family:monospace;border:1px solid rgba(0,0,0,.1)}
.case-mockup-img{width:100%;display:block;max-height:320px;object-fit:cover;object-position:top}

/* ── Case Sections ──────────────────────────────────────── */
.case-section{padding:80px 0}

.case-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.case-split-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.case-split-title{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--dark);margin:0 0 16px;line-height:1.3}
.case-split-text{font-size:15px;color:var(--text2);line-height:1.75}

/* ── Deliverables ───────────────────────────────────────── */
.case-deliverables-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.case-deliverable{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px 24px;transition:box-shadow .3s,transform .3s}
.case-deliverable:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.case-deliverable-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.case-deliverable-title{font-size:15px;font-weight:800;color:var(--dark);margin:0 0 8px;letter-spacing:-.3px}
.case-deliverable-desc{font-size:13px;color:var(--text2);line-height:1.6}

/* ── Results Bar ────────────────────────────────────────── */
.case-results-section{padding:72px 0;color:#fff}
.case-results-inner{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center}
.case-results-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;opacity:.7;writing-mode:vertical-rl;transform:rotate(180deg)}
.case-results-grid{display:flex;gap:48px;align-items:center;flex-wrap:wrap}
.case-result-block{display:flex;flex-direction:column;gap:4px}
.case-result-num{font-size:48px;font-weight:900;letter-spacing:-2px;line-height:1}
.case-result-label{font-size:12px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.5px}
.case-results-sub{font-size:14px;opacity:.75;line-height:1.65;max-width:280px;text-align:right}

/* ── Quote Block ────────────────────────────────────────── */
.case-quote-block{background:var(--bg2);border-radius:var(--r2);padding:56px 64px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.case-quote-mark{font-size:80px;line-height:.8;font-family:Georgia,serif;opacity:.25;margin-top:4px;grid-column:1;grid-row:1}
.case-quote-text{font-size:20px;font-style:italic;color:var(--dark);line-height:1.65;font-weight:500;margin:0;grid-column:2;grid-row:1}
.case-quote-author{grid-column:2;grid-row:2;display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.case-quote-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.case-quote-name{font-size:14px;font-weight:700;color:var(--dark)}
.case-quote-role{font-size:12px;color:var(--text3)}

/* ── Tech Stack ─────────────────────────────────────────── */
.case-tech-inner{max-width:700px}
.case-tech-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.case-tech-tag{display:inline-flex;align-items:center;height:36px;padding:0 16px;background:var(--white);border:1.5px solid var(--border);border-radius:100px;font-size:13px;font-weight:700;color:var(--dark);transition:border-color .2s,box-shadow .2s}
.case-tech-tag:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ── Next Case ──────────────────────────────────────────── */
.case-next-block{display:flex;align-items:center;justify-content:space-between;padding:40px 48px;background:var(--dark);border-radius:var(--r2);color:#fff}
.case-next-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;opacity:.5}
.case-next-cta{display:flex;align-items:center;gap:20px}
.case-next-cta span{font-size:22px;font-weight:800;letter-spacing:-.5px}
.case-next-link{width:52px;height:52px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .25s,box-shadow .25s}
.case-next-link:hover{transform:scale(1.1);box-shadow:0 8px 24px rgba(255,107,53,.4)}

/* ── Responsive Case ────────────────────────────────────── */
@media(max-width:1100px){
  .case-hero-inner{grid-template-columns:1fr;gap:40px}
  .case-mockup{transform:none;margin-top:40px}
  .case-deliverables-grid{grid-template-columns:repeat(2,1fr)}
  .case-results-inner{grid-template-columns:1fr;gap:32px}
  .case-results-label{writing-mode:horizontal-tb;transform:none}
  .case-results-sub{text-align:left;max-width:100%}
}
@media(max-width:768px){
  .case-hero{padding:60px 0 0}
  .case-hero-client{letter-spacing:-1.5px}
  .case-split-grid{grid-template-columns:1fr;gap:40px}
  .case-deliverables-grid{grid-template-columns:1fr}
  .case-quote-block{padding:36px 28px;grid-template-columns:1fr;gap:16px}
  .case-quote-mark{font-size:56px;grid-row:auto}
  .case-quote-text{grid-column:1;grid-row:auto}
  .case-quote-author{grid-column:1;grid-row:auto}
  .case-results-grid{gap:24px}
  .case-next-block{flex-direction:column;gap:20px;text-align:center;padding:32px 24px}
}

/* ═══════════════════════════════════════════════════════════
   DIENST PAGES — USE CASES & TEMPLATE PARTS
═══════════════════════════════════════════════════════════ */
.use-cases-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.use-case-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:36px 32px;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.use-case-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.use-case-tag{display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:100px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px;width:fit-content}
.use-case-card h3{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--dark);margin:0 0 16px}
.use-case-challenge,.use-case-solution{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:10px}
.use-case-challenge strong,.use-case-solution strong{color:var(--dark);font-weight:700}
.use-case-result{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:20px;border-top:1px solid var(--border)}
.use-case-result .result-num{font-size:34px;font-weight:900;color:var(--accent);letter-spacing:-1.5px;line-height:1}
.use-case-result .result-label{font-size:13px;color:var(--text2);line-height:1.4}
.use-case-quote{font-size:13px;font-style:italic;color:var(--text3);margin-top:16px;padding-left:14px;border-left:3px solid var(--accent);line-height:1.65}
.dienst-problem{background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.12);border-radius:var(--r2);padding:40px;max-width:100%;margin:0}
.dienst-problem .ps-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:100px;font-size:11px;font-weight:700;margin-bottom:20px;background:rgba(239,68,68,.08);color:#EF4444}
.dienst-problem h3{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--dark);margin:0 0 20px}
.dienst-problem ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.dienst-problem li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text2);line-height:1.6}
.dienst-problem li .x{color:#EF4444;font-weight:700;flex-shrink:0;margin-top:1px}
.dienst-waarom{background:var(--bg2);border-radius:var(--r2);padding:64px;margin:0}
@media(max-width:768px){
  .use-cases-grid{grid-template-columns:1fr}
  .dienst-waarom{padding:36px 24px}
}
/* Dienst features 3-col override */
.dienst-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.dienst-feature-item{padding:28px 24px;border-radius:var(--r2);background:var(--white);border:1px solid var(--border);transition:box-shadow .3s,transform .3s}
.dienst-feature-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.dienst-feature-item .feat-icon{font-size:26px;margin-bottom:12px}
.dienst-feature-item h4{font-size:15px;font-weight:800;color:var(--dark);margin:0 0 8px;letter-spacing:-.3px}
.dienst-feature-item p{font-size:13px;color:var(--text2);line-height:1.65}
@media(max-width:900px){.dienst-features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dienst-features-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — hp-* classes
═══════════════════════════════════════════════════════════ */

/* ── Hero (editorial full-dark) ─────────────────────────── */
.hp-hero{background:#111111;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}

.hp-hero .container{flex:1;display:flex;flex-direction:column}
.hp-hero-inner{flex:1;display:flex;flex-direction:column;padding:120px 0 56px}
.hp-hero-main{flex:1;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;padding-top:40px}
.hp-hero-left{display:flex;flex-direction:column;gap:32px}
.hp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:6px 14px;border-radius:100px;margin-bottom:36px;letter-spacing:1px;text-transform:uppercase;width:fit-content}
.hp-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:badge-pulse 2s infinite}
.hp-h1{font-size:clamp(42px,5.5vw,80px);font-weight:900;letter-spacing:-3px;line-height:1.0;margin:0;color:#fff}
.hp-h1-line{display:block;overflow:hidden}
.hp-h1-inner{display:block;animation:hp-slide-up .8s cubic-bezier(.16,1,.3,1) both}
.hp-h1-line:nth-child(2) .hp-h1-inner{animation-delay:.1s}
.hp-h1-line--day .hp-h1-inner{animation-delay:.2s}
.hp-h1-line--day em{font-style:italic;color:var(--accent)}
.hp-h1-accent{color:var(--accent)}
.hp-gradient{background:linear-gradient(135deg,#FF6B35,#FF8F6B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hp-hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:auto;padding-top:56px}
.hp-hero-visual{position:relative;width:100%;aspect-ratio:1}
.hp-hero-visual .hero-nodes{width:100%;height:100%}
.hp-hero-visual .hero-nodes svg{width:100%;height:100%}
.hp-sub{font-size:17px;color:rgba(255,255,255,.5);line-height:1.8;max-width:440px;margin:0 0 32px}
.hp-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hp-btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;font-weight:600;font-size:14px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15);transition:background .2s,color .2s,border-color .2s}
.hp-btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.25)}
.hp-trust{font-size:12px;color:rgba(255,255,255,.28);display:flex;align-items:center;gap:6px}
.hp-trust-dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0}
.hp-hero-strip{background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
.hp-hero-strip-inner{max-width:1200px;margin:0 auto;padding:16px 32px;display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.hp-hero-strip-inner span{font-size:12px;font-weight:600;color:rgba(255,255,255,.3);letter-spacing:.4px}
.hp-strip-sep{width:1px;height:14px;background:rgba(255,255,255,.12);flex-shrink:0}
.hp-strip-day{color:var(--accent)!important;font-style:italic}
@keyframes hp-slide-up{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ── Pulse Mock ─────────────────────────────────────────── */
.hp-pulse-mock{background:#fff;border-radius:20px;border:1px solid var(--border);box-shadow:0 32px 80px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04);overflow:hidden}
.hp-mock-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f7f7f5;border-bottom:1px solid var(--border)}
.hp-mock-dots{display:flex;gap:5px}
.hp-mock-dots span{width:10px;height:10px;border-radius:50%;display:block}
.hp-mock-title{flex:1;font-size:11px;font-weight:600;color:var(--text3)}
.hp-mock-live{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--green)}
.hp-mock-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:badge-pulse 2s infinite;display:inline-block}
.hp-mock-rows{padding:8px 0}
.hp-mock-row{display:flex;align-items:center;gap:12px;padding:10px 16px;transition:background .2s}
.hp-mock-row:hover{background:var(--bg2)}
.hp-mock-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.hp-mock-info{flex:1;min-width:0}
.hp-mock-company{font-size:13px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-mock-page{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-mock-score{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.hp-score-hot{background:var(--green-soft);color:var(--green)}
.hp-score-warm{background:var(--blue-soft);color:var(--blue)}
.hp-score-cold{background:var(--bg2);color:var(--text3)}
.hp-mock-new{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;background:var(--accent);color:#fff;padding:2px 7px;border-radius:100px}
.hp-mock-row{animation:hp-row-in .5s ease both}
.hp-mock-row.hp-row-1{animation-delay:.4s}
.hp-mock-row.hp-row-2{animation-delay:.6s}
.hp-mock-row.hp-row-3{animation-delay:.8s}
.hp-mock-row.hp-row-4{animation-delay:1s}
@keyframes hp-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hp-mock-footer{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:0;padding:12px 16px;border-top:1px solid var(--border);background:#fafaf8}
.hp-mock-footer-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.hp-mock-footer-num{font-size:18px;font-weight:900;color:var(--accent);letter-spacing:-1px}
.hp-mock-footer-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.hp-mock-footer-divider{width:1px;height:28px;background:var(--border)}

/* ── Logos ──────────────────────────────────────────────── */
.hp-logos{padding:32px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
.hp-logos-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);text-align:center;margin-bottom:16px}
.hp-logos-marquee{overflow:hidden;-webkit-mask:linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}
.hp-logos-track{display:flex;align-items:center;width:max-content;animation:marquee-scroll 24s linear infinite;gap:0}
.hp-logos-track:hover{animation-play-state:paused}
.hp-logo-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:0 32px;opacity:.35;transition:opacity .2s}
.hp-logo-item:hover{opacity:.7}
.hp-logo-item img{width:22px;height:22px;object-fit:contain;flex-shrink:0;filter:grayscale(1)}
.hp-logo-name{font-size:13px;font-weight:700;color:var(--dark);letter-spacing:-.2px}

/* ── Waarom Welday — editorial manifesto ────────────────── */
.hp-why{background:#0D0D0D;padding:100px 0 0;position:relative;overflow:hidden}
.hp-why-top{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;padding-bottom:72px;border-bottom:1px solid rgba(255,255,255,.07)}
.hp-why-header{flex:0 0 auto;max-width:520px}
.hp-why-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:rgba(255,255,255,.3);margin-bottom:20px}
.hp-why-lead{font-size:clamp(48px,7vw,100px);font-weight:900;letter-spacing:-4px;line-height:.97;color:#fff;margin:0}
.hp-why-lead em{font-style:italic;color:var(--accent)}

/* Chaos → order diagram */
.hp-chaos-vis{flex:0 0 420px;position:relative;margin-left:-60px}
.hp-chaos-svg{width:100%;height:auto;display:block}
.hp-chaos-badge{position:absolute;top:0;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:100px}
.hp-chaos-badge--l{left:0;color:rgba(239,68,68,.7);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2)}
.hp-chaos-badge--r{right:0;color:rgba(16,185,129,.7);background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2)}
/* Node drift animations */
@keyframes hpcs-drift-1{0%,100%{transform:translate(0,0)}40%{transform:translate(4px,-6px)}70%{transform:translate(-5px,3px)}}
@keyframes hpcs-drift-2{0%,100%{transform:translate(0,0)}33%{transform:translate(-6px,4px)}66%{transform:translate(3px,-5px)}}
@keyframes hpcs-drift-3{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,5px)}}
@keyframes hpcs-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.6}}
@keyframes hpcs-star{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes hpcs-arrow{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hpcs-c1{animation:hpcs-drift-1 6s ease-in-out infinite}
.hpcs-c2{animation:hpcs-drift-2 8s ease-in-out infinite}
.hpcs-c3{animation:hpcs-drift-3 7s ease-in-out infinite}
.hpcs-o{animation:hpcs-pulse 3s ease-in-out infinite}
.hpcs-o:nth-child(2){animation-delay:.4s}
.hpcs-o:nth-child(3){animation-delay:.8s}
.hpcs-o:nth-child(4){animation-delay:1.2s}
.hpcs-o-star{animation:hpcs-star 2.5s ease-in-out infinite}
.hpcs-arrow{animation:hpcs-arrow 2s ease-in-out infinite;transform-origin:212px 130px}

/* Items with icon column */
.hp-why-items{margin:0}
.hp-why-item{display:grid;grid-template-columns:80px 52px 1fr;gap:32px;padding:52px 0;border-bottom:1px solid rgba(255,255,255,.06);align-items:center;transition:border-color .3s}
.hp-why-item:hover{border-bottom-color:rgba(255,255,255,.15)}
.hp-why-num{font-size:11px;font-weight:700;color:rgba(255,255,255,.16);letter-spacing:2px;align-self:start;padding-top:4px;font-variant-numeric:tabular-nums}
.hp-why-icon{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.5);transition:background .3s,border-color .3s,color .3s}
.hp-why-item:hover .hp-why-icon{background:rgba(255,107,53,.08);border-color:rgba(255,107,53,.2);color:#FF6B35}
.hp-why-icon svg{width:26px;height:26px}
.hp-why-problem{font-size:13px;color:rgba(255,255,255,.25);line-height:1.6;margin:0 0 10px;font-style:italic}
.hp-why-answer{font-size:clamp(26px,3.5vw,50px);font-weight:900;color:#fff;letter-spacing:-2px;line-height:1.05;margin:0}
.hp-why-answer em{font-style:italic;color:var(--accent)}
.hp-why-footer{display:flex;align-items:center;gap:56px;padding:72px 0 100px;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.hp-why-footer-label{font-size:13px;color:rgba(255,255,255,.28);font-weight:600;letter-spacing:.5px;flex-shrink:0}
.hp-why-footer-pay{font-size:clamp(36px,5vw,68px);font-weight:900;letter-spacing:-3px;color:#fff;line-height:1;flex:1;min-width:240px}
.hp-why-footer-pay em{font-style:italic;color:var(--accent)}
@media(max-width:1024px){
  .hp-why-top{flex-direction:column;align-items:flex-start}
  .hp-chaos-vis{flex:none;width:100%;max-width:420px}
}
@media(max-width:768px){
  .hp-why-item{grid-template-columns:40px 44px 1fr;gap:16px;padding:36px 0}
  .hp-why-icon{width:44px;height:44px;border-radius:11px}
  .hp-why-icon svg{width:22px;height:22px}
  .hp-why-footer{flex-direction:column;align-items:flex-start;gap:24px;padding-bottom:80px}
  .hp-why-footer-pay{flex:none}
  .hp-why-lead{letter-spacing:-2.5px}
}

/* ── Services grid ──────────────────────────────────────── */
.hp-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.hp-service-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px 28px;text-decoration:none;display:flex;flex-direction:column;gap:0;transition:box-shadow .3s,transform .3s,border-color .3s;position:relative;overflow:hidden}
.hp-service-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,107,53,.06),transparent 60%);opacity:0;transition:opacity .3s}
.hp-service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:rgba(255,107,53,.15)}
.hp-service-card:hover::before{opacity:1}
.hp-service-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.hp-service-card h3{font-size:17px;font-weight:800;color:var(--dark);letter-spacing:-.3px;margin:0 0 8px}
.hp-service-card p{font-size:13px;color:var(--text2);line-height:1.6;margin:0 0 auto;flex:1}
.hp-service-arrow{color:var(--accent);font-size:12px;font-weight:700;margin-top:16px;display:flex;align-items:center;gap:4px;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.hp-service-card:hover .hp-service-arrow{opacity:1;transform:translateX(0)}
.hp-services-more{text-align:center;margin-top:32px}
.hp-services-more a{font-size:14px;font-weight:700;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.hp-services-more a:hover{gap:10px}

/* ── Pulse section ──────────────────────────────────────── */
.hp-pulse{background:var(--dark);border-radius:var(--r3);margin:0 0 80px;overflow:hidden}
.hp-pulse-inner{padding:80px}
.hp-pulse-header{max-width:680px;margin-bottom:56px}
.hp-pulse-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--accent);background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.2);padding:5px 14px;border-radius:100px;margin-bottom:20px}
.hp-pulse-name{font-size:48px;font-weight:900;color:var(--accent);letter-spacing:-2px;line-height:1;margin-bottom:16px}
.hp-pulse-title{font-size:clamp(26px,3vw,40px);font-weight:800;color:#fff;letter-spacing:-1.5px;margin:0;line-height:1.15}
.hp-pulse-muted{color:rgba(255,255,255,.35)}
.hp-pulse-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.hp-pulse-features{display:flex;flex-direction:column;gap:0}
.hp-pulse-feat{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.hp-pulse-feat:first-child{border-top:1px solid rgba(255,255,255,.07)}
.hp-pulse-feat h4{font-size:15px;font-weight:700;color:#fff;margin:0 0 6px}
.hp-pulse-feat p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;margin:0}
.hp-pulse-visual{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px;text-align:center}
.hp-pulse-big{font-size:80px;font-weight:900;color:var(--accent);letter-spacing:-4px;line-height:1;margin-bottom:8px}
.hp-pulse-big-label{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:28px}
.hp-pulse-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.07);padding-top:24px}
.hp-pulse-stat-num{font-size:26px;font-weight:900;color:#fff;letter-spacing:-1px}
.hp-pulse-stat-label{font-size:11px;color:rgba(255,255,255,.4);margin-top:4px}
.hp-pulse-cta{margin-top:48px;text-align:center}

/* ── Proof / Testimonials ───────────────────────────────── */
.hp-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.hp-proof-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.hp-proof-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.hp-stars{color:var(--accent);font-size:14px;letter-spacing:1px;margin-bottom:16px}
.hp-proof-quote{font-size:14px;font-style:italic;color:var(--text2);line-height:1.7;margin:0 0 20px;flex:1}
.hp-proof-author{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.hp-proof-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.hp-proof-name{font-size:13px;font-weight:700;color:var(--dark)}
.hp-proof-role{font-size:11px;color:var(--text3)}
.hp-proof-result{display:flex;align-items:baseline;gap:8px}
.hp-proof-stat{font-size:32px;font-weight:900;color:var(--accent);letter-spacing:-1.5px;line-height:1}
.hp-proof-stat-label{font-size:13px;color:var(--text2);line-height:1.4}

/* ── Responsive Homepage ────────────────────────────────── */
@media(max-width:1024px){
  .hp-hero-inner{padding:120px 0 48px}
  .hp-hero-main{grid-template-columns:1fr;gap:48px}
  .hp-hero-bottom{grid-template-columns:1fr;gap:48px}
  .hp-h1{font-size:clamp(56px,9vw,100px);letter-spacing:-3px}
  .hp-hero-visual{aspect-ratio:auto;min-height:340px}
  .hp-services-grid{grid-template-columns:repeat(2,1fr)}
  .hp-pulse-grid{grid-template-columns:1fr}
  .hp-pulse-inner{padding:48px 40px}
  .hp-proof-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hp-hero-inner{padding:96px 0 40px}
  .hp-h1{font-size:clamp(44px,12vw,64px);letter-spacing:-2.5px}
  .hp-hero-main{gap:32px;padding-top:24px}
  .hp-hero-bottom{padding-top:40px;gap:40px}
  .hp-hero-visual{min-height:280px}
  .hp-ctas{flex-direction:column}
  .hp-ctas .btn-primary,.hp-btn-ghost{width:100%;text-align:center;justify-content:center}
  .hp-services-grid{grid-template-columns:1fr}
  .hp-pulse-inner{padding:36px 24px}
  .hp-pulse-name{font-size:36px}
  .hp-pulse-stats{grid-template-columns:repeat(3,1fr)}
  .hp-proof-grid{grid-template-columns:1fr}
  .hp-mock-dash-header{display:none}
  .hp-stats-inner{grid-template-columns:repeat(2,1fr)}
  .hp-cases-grid{grid-template-columns:1fr}
  .hp-pulse-cta{flex-direction:column;align-items:flex-start;gap:12px}
  .hp-hero-strip-inner{gap:12px 16px}
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — NIEUWE ELEMENTEN (stats strip, sparkline, cases)
═══════════════════════════════════════════════════════════ */

/* ── Hero visual float ──────────────────────────────────── */
@keyframes hp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hp-hero-visual{animation:hp-float 7s 1.5s ease-in-out infinite}
@media(max-width:1024px){.hp-hero-visual{animation:none}}

/* ── Hero micro social proof ────────────────────────────── */
.hp-hero-clients{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:13px;color:var(--text2)}
.hp-hero-avatars{display:flex;flex-shrink:0}
.hp-hero-avatars span{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;border:2px solid var(--white);margin-left:-7px;flex-shrink:0}
.hp-hero-avatars span:first-child{margin-left:0}
.hp-hero-clients strong{color:var(--dark);font-weight:700}

/* ── Dashboard URL bar + sub-header ────────────────────── */
.hp-mock-url{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:3px 10px;font-size:10px;color:var(--text3);text-align:center;font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.hp-mock-dash-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.hp-mock-dash-title{font-size:12px;font-weight:700;color:var(--dark)}
.hp-mock-dash-meta{font-size:10px;color:var(--text3)}

/* ── Sparkline chart ────────────────────────────────────── */
.hp-mock-chart{padding:10px 16px 4px;border-top:1px solid var(--border)}
.hp-mock-chart-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.hp-mock-sparkline{width:100%;height:48px;display:block;overflow:visible}

/* ── Stats strip ────────────────────────────────────────── */
.hp-stats-strip{background:var(--white);border-bottom:1px solid var(--border)}
.hp-stats-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.hp-stat-item{padding:28px 20px;text-align:center;border-right:1px solid var(--border);position:relative;overflow:hidden;transition:background .25s}
.hp-stat-item:last-child{border-right:none}
.hp-stat-item:hover{background:var(--bg)}
.hp-stat-item::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:32px;height:2px;background:var(--accent);border-radius:2px;transition:transform .35s}
.hp-stat-item:hover::after{transform:translateX(-50%) scaleX(1)}
.hp-stat-num{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-1.5px;color:var(--dark);display:flex;align-items:baseline;justify-content:center;gap:2px;line-height:1}
.hp-stat-accent{color:var(--accent)}
.hp-stat-label{font-size:12px;color:var(--text3);margin-top:6px;display:block;font-weight:500}
@media(max-width:1024px){
  .hp-stats-inner{grid-template-columns:repeat(2,1fr)}
  .hp-stat-item:nth-child(2){border-right:none}
  .hp-stat-item:nth-child(3){border-top:1px solid var(--border)}
  .hp-stat-item:nth-child(4){border-top:1px solid var(--border);border-right:none}
}

/* ── Cases teaser ───────────────────────────────────────── */
.hp-cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.hp-case-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:36px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:box-shadow .3s,transform .3s,border-color .3s;text-decoration:none;color:inherit}
.hp-case-card::before{content:'';position:absolute;top:-70px;right:-70px;width:180px;height:180px;border-radius:50%;background:var(--case-soft,var(--accent-soft));opacity:.55;transition:transform .4s;pointer-events:none}
.hp-case-card::after{content:'';position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,107,53,.04),transparent 40%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:0;border-radius:inherit}
.hp-case-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:rgba(255,107,53,.14)}
.hp-case-card:hover::before{transform:scale(1.35)}
.hp-case-card:hover::after{opacity:1}
.hp-case-card>*{position:relative;z-index:1}
.hp-case-tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;margin-bottom:14px;width:fit-content}
.hp-case-client{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;color:var(--dark)}
.hp-case-tagline{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.55}
.hp-case-results{display:flex;gap:28px;margin-bottom:20px}
.hp-case-result-num{font-size:26px;font-weight:900;letter-spacing:-1px;line-height:1}
.hp-case-result-label{font-size:11px;color:var(--text2);margin-top:2px}
.hp-case-quote{font-size:13px;font-style:italic;color:var(--text2);line-height:1.7;margin-bottom:6px;border-left:3px solid var(--case-color,var(--accent));padding-left:14px}
.hp-case-author{font-size:11px;color:var(--text3);margin-bottom:20px}
.hp-case-link{color:var(--accent);font-size:13px;font-weight:700;display:flex;align-items:center;gap:4px;transition:gap .2s;margin-top:auto}
.hp-case-card:hover .hp-case-link{gap:8px}

/* ── Case browser mockup ────────────────────────────────── */
.hp-case-browser{margin:-36px -36px 20px -36px;border-bottom:1px solid var(--border);border-radius:var(--r2) var(--r2) 0 0;overflow:hidden;flex-shrink:0}
.hp-case-browser-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg2);border-bottom:1px solid var(--border)}
.hp-case-browser-dots{display:flex;gap:5px;flex-shrink:0}
.hp-case-browser-dots span{width:9px;height:9px;border-radius:50%;display:block}
.hp-case-browser-url{flex:1;background:var(--white);border:1px solid var(--border);border-radius:5px;padding:3px 10px;font-size:10px;color:var(--text3);text-align:center;font-family:ui-monospace,monospace;max-width:200px;margin:0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-case-browser-screen{height:220px;overflow:hidden;position:relative;background:var(--bg)}
.hp-case-browser-screen img{width:100%;display:block;object-fit:cover;object-position:top center;transition:transform 6s cubic-bezier(.25,.46,.45,.94)}
.hp-case-card:hover .hp-case-browser-screen img{transform:translateY(calc(-100% + 220px))}
.hp-case-browser-footer{padding:6px 14px;text-align:center;border-top:1px solid var(--border)}

@media(max-width:1024px){.hp-cases-grid{grid-template-columns:1fr}}
@media(max-width:768px){
  .hp-case-browser{margin:-36px -36px 16px -36px}
  .hp-case-browser-screen{height:180px}
  .hp-case-card:hover .hp-case-browser-screen img{transform:translateY(calc(-100% + 180px))}
}

/* ── Pulse section improvements ─────────────────────────── */
.hp-pulse-big-wrap{display:flex;align-items:flex-start;gap:10px;justify-content:center;width:100%;margin-bottom:6px}
.hp-pulse-live-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--green);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.2);padding:4px 10px;border-radius:100px;margin-top:12px;flex-shrink:0}
.hp-pulse-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hp-pulse-demo-link{color:rgba(255,255,255,.45);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.hp-pulse-demo-link:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════
   CASES ARCHIVE  (csa-*)
═══════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────── */
.csa-hero{position:relative;padding:120px 0 0;overflow:hidden}
.csa-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,107,53,.07),transparent 70%);pointer-events:none}
.csa-hero-inner{text-align:center;padding-bottom:80px}
.csa-hero-title{font-size:clamp(36px,6vw,72px);font-weight:900;letter-spacing:-2.5px;line-height:1.05;margin:16px 0 20px;color:var(--dark)}
.csa-hero-muted{color:var(--text2);display:block;font-weight:700}
.csa-hero-sub{font-size:18px;color:var(--text2);margin:0}

/* ── Stats bar ─────────────────────────────────────────── */
.csa-stats-bar{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:0;box-shadow:var(--shadow-lg);position:relative;z-index:2;margin-top:0}
.csa-stats-item{padding:28px 20px;text-align:center;border-right:1px solid var(--border)}
.csa-stats-item:last-child{border-right:none}
.csa-stats-num{display:block;font-size:clamp(24px,3.5vw,36px);font-weight:900;letter-spacing:-1.5px;color:var(--dark);line-height:1}
.csa-stats-label{display:block;font-size:12px;color:var(--text3);margin-top:6px;font-weight:500}
.csa-stats-sep{display:none}/* kept for backwards compat — no longer used in markup */

/* ── Grid section ──────────────────────────────────────── */
.csa-grid-section{padding:80px 0 100px;background:var(--bg)}
.csa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:0}
.csa-mixed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.csa-mixed-grid .csa-card{height:100%}
.csa-mixed-grid .csa-card--design{height:100%}
.csa-mixed-grid .hidden{display:none}
@media(max-width:1024px){.csa-mixed-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.csa-mixed-grid{grid-template-columns:1fr}}

/* ── Card ──────────────────────────────────────────────── */
.csa-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .35s,transform .35s,border-color .35s;position:relative}
.csa-card::after{content:'';position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(var(--csa-rgb,255,107,53),.05),transparent 40%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:0;border-radius:inherit}
.csa-card:hover{box-shadow:0 20px 60px rgba(0,0,0,.1);transform:translateY(-5px);border-color:rgba(var(--csa-rgb,255,107,53),.2)}
.csa-card:hover::after{opacity:1}
.csa-card>*{position:relative;z-index:1}

.csa-card--featured{border-color:var(--csa-color,var(--accent));box-shadow:0 0 0 1px var(--csa-color,var(--accent)),0 8px 32px rgba(0,0,0,.08)}
.csa-card--featured:hover{box-shadow:0 0 0 1px var(--csa-color,var(--accent)),0 24px 64px rgba(0,0,0,.12)}

/* ── Browser chrome ────────────────────────────────────── */
.csa-browser{border-bottom:1px solid var(--border);flex-shrink:0;background:var(--white)}
.csa-browser-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border)}
.csa-browser-dots{display:flex;gap:5px;flex-shrink:0}
.csa-browser-dots span{width:10px;height:10px;border-radius:50%;display:block}
.csa-browser-url{flex:1;background:var(--white);border:1px solid var(--border);border-radius:5px;padding:4px 12px;font-size:11px;color:var(--text3);font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;max-width:240px;margin:0 auto}
.csa-browser-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--green,#10b981);flex-shrink:0}

/* ── Screen ────────────────────────────────────────────── */
.csa-screen{height:280px;overflow:hidden;position:relative;background:var(--bg2)}
.csa-screen img{width:100%;display:block;object-fit:cover;object-position:top center;transition:transform 7s cubic-bezier(.25,.46,.45,.94)}
.csa-card:hover .csa-screen img{transform:translateY(calc(-100% + 280px))}
.csa-screen-placeholder{width:100%;height:100%}

/* ── Sector bar ────────────────────────────────────────── */
.csa-sector-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--border);font-size:12px}
.csa-featured-badge{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--csa-color,var(--accent));margin-right:auto}
.csa-sector-label{font-weight:700;font-size:11px;margin-left:auto}
.csa-year{color:var(--text3);font-size:11px;flex-shrink:0}

/* Live dot pulse */
.csa-live-dot{width:7px;height:7px;background:currentColor;border-radius:50%;display:inline-block;animation:csa-pulse 1.8s ease-in-out infinite}
@keyframes csa-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}

/* ── Card body ─────────────────────────────────────────── */
.csa-body{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1}
.csa-client{font-size:22px;font-weight:900;letter-spacing:-.6px;color:var(--dark);margin:0 0 6px}
.csa-tagline{font-size:14px;color:var(--text2);margin:0 0 20px;line-height:1.55}

/* ── Results strip ─────────────────────────────────────── */
.csa-results{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:18px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg)}
.csa-result{padding:12px 10px;text-align:center;background:var(--white)}
.csa-result+.csa-result{border-left:1px solid var(--border)}
.csa-result-num{display:block;font-size:20px;font-weight:900;letter-spacing:-1px;line-height:1}
.csa-result-label{display:block;font-size:10px;color:var(--text3);margin-top:3px;font-weight:500;line-height:1.3}

/* ── Service chips ─────────────────────────────────────── */
.csa-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.csa-chip{display:inline-block;padding:4px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;font-size:11px;color:var(--text2);font-weight:500}
.csa-chip-more{background:var(--bg);color:var(--text3)}

/* ── CTA row ───────────────────────────────────────────── */
.csa-cta{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-top:auto;transition:gap .2s}
.csa-card:hover .csa-cta{gap:10px}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:1100px){
  /* 4 → 2 column wrap: items 1+2 on row 1, 3+4 on row 2 */
  .csa-stats-bar{grid-template-columns:1fr 1fr}
  .csa-stats-item{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .csa-stats-item:nth-child(2),.csa-stats-item:last-child{border-right:none}
  .csa-stats-item:nth-child(3),.csa-stats-item:last-child{border-bottom:none}
}
@media(max-width:900px){
  .csa-grid{grid-template-columns:1fr}
  .csa-screen{height:240px}
  .csa-card:hover .csa-screen img{transform:translateY(calc(-100% + 240px))}
}
@media(max-width:640px){
  .csa-hero{padding:80px 0 0}
  .csa-hero-inner{padding-bottom:60px}
  .csa-stats-bar{grid-template-columns:1fr 1fr}
  .csa-body{padding:20px}
  .csa-results{grid-template-columns:repeat(3,1fr)}
  .csa-screen{height:200px}
  .csa-card:hover .csa-screen img{transform:translateY(calc(-100% + 200px))}
}

/* ═══════════════════════════════════════════════════════════
   TOOL LOGO GRID  (tl-*)   used in dienst-tools-logos.php
═══════════════════════════════════════════════════════════ */
.tl-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.tl-item{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:100px;background:var(--white);border:1px solid var(--border);transition:box-shadow .2s,border-color .2s;cursor:default}
.tl-item:hover{box-shadow:var(--shadow);border-color:var(--border2)}
.tl-item img{flex-shrink:0;border-radius:5px}
.tl-name{font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap}

/* ═══════════════════════════════════════════════════════════
   CASES ARCHIVE FILTER  (caf-*)
═══════════════════════════════════════════════════════════ */
.caf-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:40px}
.caf-btn{padding:9px 20px;border-radius:100px;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--white);color:var(--text2);cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.caf-btn:hover{border-color:var(--border2);box-shadow:var(--shadow-sm)}
.caf-btn.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.caf-btn .caf-count{font-size:11px;opacity:.55;margin-left:2px}
.caf-sep{display:block;width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
.csa-card.hidden,.pf-card.hidden{display:none}

@media(max-width:640px){
  .caf-filter{gap:6px}
  .caf-btn{padding:7px 14px;font-size:12px}
}

/* ═══════════════════════════════════════════════════════════
   VISUAL MOCK COMPONENTS  (browser-mock, phone-mock, etc.)
═══════════════════════════════════════════════════════════ */
/* BROWSER MOCK */
.browser-mock{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow-lg)}
.bm-chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg)}
.bm-dots{display:flex;gap:5px}
.bm-dots span{width:10px;height:10px;border-radius:50%}
.bm-url{flex:1;text-align:center;font-size:11px;font-weight:500;color:var(--text3)}
.bm-body{overflow:hidden;position:relative}
/* PHONE MOCK */
.phone-mock{width:220px;background:var(--white);border:2.5px solid var(--dark);border-radius:32px;overflow:hidden;box-shadow:var(--shadow-xl);flex-shrink:0}
.pm-notch{width:90px;height:20px;background:var(--dark);border-radius:0 0 14px 14px;margin:0 auto}
.pm-screen{overflow:hidden}
/* VISUAL CONTAINERS */
.dienst-visual-wrap{max-width:900px;margin:0 auto}
.visual-split{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:flex-end}
.visual-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* DASHBOARD MOCK */
.dash-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border)}
.dash-topbar h4{font-size:12px;font-weight:700}
.dash-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 16px}
.dash-kpi{background:var(--bg);border-radius:var(--r);padding:12px;text-align:center}
.dash-kpi .num{font-size:20px;font-weight:800;letter-spacing:-1px}
.dash-kpi .label{font-size:9px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.dash-table{width:100%;border-collapse:collapse;font-size:11px}
.dash-table th{padding:7px 16px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg)}
.dash-table td{padding:8px 16px;border-bottom:1px solid var(--border);color:var(--text2)}
.dash-table td:first-child{font-weight:600;color:var(--dark)}
.status-dot{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600}
.status-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
/* CHAT MOCK */
.chat-wrap{display:flex;flex-direction:column;gap:8px;padding:16px;min-height:280px;background:var(--bg);overflow:hidden}
.chat-msg{max-width:75%;padding:10px 13px;border-radius:16px;font-size:11.5px;line-height:1.55}
.chat-msg.bot{background:var(--white);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--border);animation:slideInLeft .4s ease both}
.chat-msg.user{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;animation:slideInRight .4s ease both}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.chat-typing{display:flex;gap:4px;padding:10px 14px;align-self:flex-start;animation:slideInLeft .4s ease both}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:typingDot 1.4s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* SERP MOCK */
.serp-mock{padding:16px;background:var(--white)}
.serp-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.serp-input{flex:1;padding:7px 14px;border:1px solid var(--border2);border-radius:20px;font-size:11px;color:var(--text);background:var(--white)}
.serp-result{margin-bottom:14px}
.serp-url{font-size:10px;color:var(--text3);margin-bottom:2px}
.serp-title{font-size:14px;color:#1a0dab;font-weight:400;margin:2px 0;line-height:1.3}
.serp-desc{font-size:11px;color:#4d5156;line-height:1.5}
.serp-stars{color:#f4a400;font-size:10px}
.serp-result.highlight{background:rgba(255,107,53,.04);border-left:3px solid var(--accent);padding:10px 12px;border-radius:0 8px 8px 0;margin-left:-3px}
/* EMAIL MOCK */
.email-mock{background:var(--white)}
.email-header-bar{padding:9px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text2);background:var(--bg);display:flex;align-items:center;gap:8px}
.email-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:11px;transition:background .15s}
.email-row.unread{font-weight:600;background:rgba(59,130,246,.03)}
.email-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;color:#fff}
.email-subject{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-time{font-size:10px;color:var(--text3);flex-shrink:0}
.email-badge{padding:2px 7px;border-radius:100px;font-size:9px;font-weight:700;flex-shrink:0;white-space:nowrap}
/* WORKFLOW FLOW */
.flow-canvas{padding:20px;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:0}
.flow-row{display:flex;align-items:center;gap:8px;justify-content:center}
.flow-node{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm)}
.flow-node.purple{background:var(--purple-soft);color:var(--purple);border:1px solid rgba(139,92,246,.2)}
.flow-node.blue{background:var(--blue-soft);color:var(--blue);border:1px solid rgba(59,130,246,.2)}
.flow-node.green{background:var(--green-soft);color:var(--green);border:1px solid rgba(16,185,129,.2)}
.flow-node.orange{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(255,107,53,.2)}
.flow-node.teal{background:var(--teal-soft);color:var(--teal);border:1px solid rgba(14,165,233,.2)}
.flow-node.white{background:var(--white);color:var(--dark);border:1px solid var(--border)}
.flow-arrow-v{width:2px;height:14px;background:var(--border2);margin:2px auto}
.flow-arrow-h{width:16px;height:2px;background:var(--border2);flex-shrink:0}
.flow-split{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.flow-branch{display:flex;flex-direction:column;align-items:center}
/* FUNNEL */
.funnel-wrap{padding:24px;background:var(--white);display:flex;flex-direction:column;gap:4px;align-items:center}
.funnel-step{display:flex;align-items:center;gap:12px;width:100%;justify-content:center}
.funnel-bar{height:40px;border-radius:6px;display:flex;align-items:center;padding-left:14px;font-size:11px;font-weight:700;color:#fff;transition:width .3s}
.funnel-meta{min-width:120px;font-size:10px;color:var(--text3)}
.funnel-meta strong{display:block;font-size:12px;font-weight:700;color:var(--dark)}
.funnel-pct{font-size:10px;color:var(--accent);font-weight:700;min-width:36px;text-align:right}
/* GOOGLE ADS MOCK */
.gads-wrap{background:var(--white);overflow:hidden}
.gads-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 14px}
.gads-tab{padding:9px 12px;font-size:11px;font-weight:600;color:var(--text3);border-bottom:2px solid transparent;white-space:nowrap}
.gads-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.gads-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}
.gads-kpi{padding:10px 14px;border-right:1px solid var(--border)}
.gads-kpi:last-child{border-right:none}
.gads-kpi .k-l{font-size:9px;color:var(--text3);margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px}
.gads-kpi .k-v{font-size:16px;font-weight:800;letter-spacing:-.5px}
.gads-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:0;border-bottom:1px solid var(--border);padding:7px 14px;font-size:11px;align-items:center}
.gads-row.head{background:var(--bg);font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.gads-cpa.good{color:var(--green);font-weight:700}
.gads-cpa.bad{color:#EF4444;font-weight:700;text-decoration:line-through}
/* SOCIAL ADS */
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.social-card{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.social-card-head{padding:9px 11px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border)}
.social-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0}
.social-card-name{font-size:10px;font-weight:700;flex:1}
.social-card-sponsored{font-size:9px;color:var(--text3)}
.social-card-img{height:80px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:22px}
.social-card-body{padding:8px 11px}
.social-card-title{font-size:11px;font-weight:700;margin-bottom:3px}
.social-card-desc{font-size:10px;color:var(--text2);line-height:1.4;margin-bottom:7px}
.social-card-cta{display:inline-block;padding:4px 10px;border-radius:5px;font-size:9px;font-weight:700;color:#fff}
.social-card-stats{padding:6px 11px;border-top:1px solid var(--border);display:flex;gap:10px;font-size:9px;color:var(--text3)}
/* CANVAS / DESIGN TOOL MOCK */
.canvas-wrap{display:grid;grid-template-columns:130px 1fr 130px;height:300px;background:var(--bg3);border-radius:0;overflow:hidden}
.canvas-panel{background:var(--white);overflow:hidden}
.canvas-panel-r{border-left:1px solid var(--border)}
.canvas-panel-l{border-right:1px solid var(--border)}
.canvas-ph{padding:8px 10px;border-bottom:1px solid var(--border);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);background:var(--bg)}
.canvas-layer{display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:10px;color:var(--text2)}
.canvas-layer.sel{background:rgba(59,130,246,.07);color:var(--blue);font-weight:600}
.canvas-layer-ic{width:10px;height:10px;border-radius:2px;background:var(--bg3);flex-shrink:0}
.canvas-center{display:flex;align-items:center;justify-content:center;padding:16px;position:relative}
.canvas-frame{background:var(--white);border-radius:6px;border:1.5px solid var(--blue);box-shadow:0 4px 16px rgba(0,0,0,.1);overflow:hidden;width:100%;max-width:200px;position:relative}
.canvas-corner{position:absolute;width:7px;height:7px;background:var(--blue);border-radius:1px}
.canvas-prop{padding:5px 10px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:10px}
.canvas-prop .pk{color:var(--text3)}
.canvas-prop .pv{font-weight:600;color:var(--dark)}
/* PLANNING TOOL MOCK */
.plan-wrap{background:var(--white);overflow:hidden}
.plan-top{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border)}
.plan-nav{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600}
.plan-btn{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:2px 8px;font-size:10px;cursor:default;color:var(--text2)}
.plan-grid{display:grid;grid-template-columns:100px repeat(5,1fr)}
.plan-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 6px;font-size:9px;min-height:32px}
.plan-cell.head{background:var(--bg);font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;font-size:8px}
.plan-name{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--dark);font-size:10px}
.plan-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.plan-block{border-radius:5px;height:22px;display:flex;align-items:center;padding:0 7px;font-size:8.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.plan-alert{background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.18);border-radius:8px;padding:7px 12px;margin:8px 12px;font-size:10px;color:var(--green);display:flex;align-items:center;gap:6px}
/* A/B TEST MOCK */
.ab-wrap{background:var(--white);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ab-card{border:2px solid var(--border);border-radius:12px;padding:14px;position:relative}
.ab-card.win{border-color:var(--green);background:rgba(16,185,129,.02)}
.ab-badge{position:absolute;top:-10px;right:10px;background:var(--green);color:#fff;padding:2px 9px;border-radius:100px;font-size:9px;font-weight:700}
.ab-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);margin-bottom:10px}
.ab-num{font-size:22px;font-weight:800;letter-spacing:-1px;margin-bottom:4px}
.ab-num.good{color:var(--green)}
.ab-num.bad{color:#EF4444}
.ab-conf{text-align:center;padding:12px;background:var(--bg);border-radius:8px;margin-top:14px;font-size:11px;color:var(--text2)}
.ab-conf strong{color:var(--green);font-size:14px;display:block;font-weight:800;letter-spacing:-.5px}
/* GEO / AI MOCK */
.ai-mock{background:var(--white)}
.ai-user{background:var(--bg);padding:10px 14px;font-size:11px;color:var(--text2);border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:flex-start}
.ai-user-icon{width:20px;height:20px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;margin-top:1px}
.ai-body{padding:14px;font-size:11.5px;line-height:1.7}
.ai-body p{margin-bottom:8px}
.ai-body strong{color:var(--dark)}
.ai-cite{display:inline;padding:1px 4px;border-radius:3px;font-size:9px;font-weight:700;background:var(--blue-soft);color:var(--blue);vertical-align:super;line-height:1;margin-left:1px}
.ai-sources{padding:8px 14px;border-top:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}
.ai-src{padding:3px 9px;border-radius:100px;background:var(--bg2);border:1px solid var(--border);font-size:9px;color:var(--text2);font-weight:500}
/* EMAIL FLOW */
.ef-wrap{padding:14px;background:var(--white);display:flex;flex-direction:column;gap:0}
.ef-row{display:flex;align-items:center;gap:6px;padding:4px 0}
.ef-node{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;font-size:10px;font-weight:600;white-space:nowrap}
.ef-conn{width:2px;height:12px;background:var(--border2);margin-left:20px}
.ef-split-row{display:flex;gap:10px;margin-left:20px}
/* LANDING PAGE GRID */
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lp-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.lp-chrome{padding:6px 10px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;gap:4px}
.lp-chrome span{width:6px;height:6px;border-radius:50%;display:inline-block}
.lp-body{padding:12px;background:var(--white)}
.conv-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;margin-top:8px}
.conv-badge.green{background:var(--green-soft);color:var(--green)}

@media(max-width:900px){
  .visual-split{grid-template-columns:1fr}
  .phone-mock{display:none}
  .social-grid{grid-template-columns:1fr 1fr}
  .canvas-wrap{grid-template-columns:1fr;height:auto}
  .canvas-panel-r,.canvas-panel-l:first-child{display:none}
}
@media(max-width:640px){
  .visual-3col{grid-template-columns:1fr}
  .lp-grid{grid-template-columns:1fr}
  .gads-kpis{grid-template-columns:repeat(2,1fr)}
  .ab-wrap{grid-template-columns:1fr}
  .social-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:80px repeat(3,1fr)}
}

/* ═══════════════════════════════════════════════════════════
   DIENSTEN OVERZICHTSPAGINA
═══════════════════════════════════════════════════════════ */
.do-hero{padding:120px 0 60px;text-align:center;position:relative;overflow:hidden}
.do-hero::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:1000px;height:800px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,107,53,.06) 0%,transparent 70%);pointer-events:none}
.do-hero h1{font-size:clamp(36px,5vw,64px);font-weight:800;letter-spacing:-2.5px;line-height:1.07;color:var(--dark);max-width:780px;margin:0 auto 16px}
.do-hero p{font-size:16px;color:var(--text2);max-width:520px;margin:0 auto 32px;line-height:1.7}
.do-hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.do-hero-svg{margin:60px auto 0;max-width:600px;display:block;opacity:.7}
/* Category nav */
.diensten-nav{display:flex;justify-content:center;gap:8px;padding:20px 0 28px;flex-wrap:wrap}
.dn-tag{padding:9px 22px;border-radius:100px;font-size:13px;font-weight:700;border:1.5px solid var(--border);background:var(--white);color:var(--text2);transition:all .2s;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.dn-tag:hover,.dn-tag.active{color:#fff;border-color:transparent}
.dn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Category heading */
.do-cat-head{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.do-cat-head::after{content:'';flex:1;height:1px;background:var(--border)}
.do-cat-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;padding:5px 14px;border-radius:100px;white-space:nowrap}
/* Featured dienst */
.dienst-featured{display:grid;grid-template-columns:1fr 1fr;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:20px;transition:box-shadow .3s,transform .3s}
.dienst-featured:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.df-visual{background:var(--bg);padding:40px;display:flex;align-items:center;justify-content:center;min-height:300px}
.df-content{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--border)}
.df-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;margin-bottom:16px;width:fit-content}
.df-content h3{font-size:26px;font-weight:800;letter-spacing:-.8px;margin-bottom:10px}
.df-content > p{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:18px}
.df-stats{display:flex;gap:20px;flex-wrap:wrap}
.df-stat{display:flex;flex-direction:column}
.df-stat strong{font-size:18px;font-weight:800;letter-spacing:-.5px}
.df-stat span{font-size:11px;color:var(--text3)}
/* Dienst card grid */
.do-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:0}
.dienst-card-v2{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:0;transition:all .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.dienst-card-v2:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--border2)}
.dc-accent{position:absolute;left:0;top:0;bottom:0;width:3px;opacity:0;transition:opacity .3s;border-radius:0}
.dienst-card-v2:hover .dc-accent{opacity:1}
.dc-visual{height:130px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border)}
.dc-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.dienst-card-v2 h3{font-size:16px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
.dienst-card-v2 p{font-size:12.5px;color:var(--text2);line-height:1.6;flex:1;margin-bottom:10px}
.dc-usecase{font-size:10.5px;color:var(--text3);padding-top:8px;border-top:1px solid var(--border)}
.dc-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;margin-top:10px}
/* Bento grid marketing */
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:16px}
.bento-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:24px;transition:all .3s;text-decoration:none;color:inherit;display:flex;flex-direction:column;overflow:hidden}
.bento-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.bento-item.tall{grid-row:span 2}
.bi-visual{border-radius:var(--r);margin-bottom:14px;overflow:hidden;background:var(--bg)}
.bento-item h3{font-size:16px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
.bento-item p{font-size:12.5px;color:var(--text2);line-height:1.6;flex:1}
.bi-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;margin-top:12px}
.bi-stat{display:flex;align-items:baseline;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.bi-stat .n{font-size:20px;font-weight:800;letter-spacing:-.5px}
.bi-stat .l{font-size:10px;color:var(--text3)}
/* AI dark section */
.do-ai-section{background:var(--dark);border-radius:var(--r3);padding:72px 56px;position:relative;overflow:hidden;margin:0}
.do-ai-section::before{content:'';position:absolute;top:-80px;right:-80px;width:450px;height:450px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 70%);pointer-events:none}
.do-ai-section::after{content:'';position:absolute;bottom:-60px;left:-60px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.08),transparent 70%);pointer-events:none}
.do-ai-head{text-align:center;margin-bottom:48px;position:relative;z-index:1}
.do-ai-head .section-label{color:var(--purple)}
.do-ai-head h2{font-size:clamp(28px,3vw,40px);font-weight:800;color:#fff;letter-spacing:-1.5px;margin-top:8px}
.do-ai-head p{color:rgba(255,255,255,.45);font-size:15px;max-width:440px;margin:10px auto 0;line-height:1.7}
.do-ai-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:1}
.do-ai-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r2);padding:28px;transition:background .2s;text-decoration:none;display:flex;flex-direction:column}
.do-ai-card:hover{background:rgba(255,255,255,.09)}
.do-ai-visual{height:180px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);margin-bottom:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.do-ai-card h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.5px}
.do-ai-card > p{font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.65;flex:1;margin-bottom:16px}
.do-ai-stat{display:flex;align-items:baseline;gap:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.do-ai-stat .n{font-size:28px;font-weight:800;color:var(--purple);letter-spacing:-1px}
.do-ai-stat .l{font-size:11px;color:rgba(255,255,255,.35)}
.do-ai-link{font-size:13px;font-weight:700;color:var(--purple);display:inline-flex;align-items:center;gap:4px;margin-top:12px}
/* Data highlight */
.do-data-card{display:grid;grid-template-columns:1fr 1fr;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;transition:box-shadow .3s}
.do-data-card:hover{box-shadow:var(--shadow-lg)}
.dh-content{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.dh-content .section-label{margin-bottom:8px}
.dh-content h2{font-size:26px;font-weight:800;letter-spacing:-.8px;margin-bottom:10px}
.dh-content > p{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:20px}
.dh-stats{display:flex;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.dh-stat strong{font-size:22px;font-weight:800;letter-spacing:-.8px;display:block}
.dh-stat span{font-size:11px;color:var(--text3)}
.dh-visual{background:var(--bg);padding:32px;display:flex;align-items:center;justify-content:center}
/* Questionnaire */
.do-quest{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:48px 40px;margin-top:40px}
.do-quest h2{font-size:26px;font-weight:800;letter-spacing:-.8px;margin-bottom:8px}
.do-quest > p{font-size:15px;color:var(--text2);margin-bottom:28px}
.quest-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quest-opt{padding:14px 20px;border:1.5px solid var(--border);border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-align:left;background:var(--bg);color:var(--text);display:flex;align-items:center;gap:10px;font-family:inherit}
.quest-opt .qo-icon{font-size:18px;flex-shrink:0}
.quest-opt:hover,.quest-opt.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.quest-results{margin-top:28px;padding-top:28px;border-top:1px solid var(--border);display:none}
.quest-results.visible{display:block}
.quest-result-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.quest-result-item{background:var(--bg);border-radius:var(--r);padding:14px 16px;font-size:13px;font-weight:600;transition:background .2s}
.quest-result-item.dim{opacity:.3}
/* Comparison */
.do-comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.comp-col{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:28px 24px;position:relative}
.comp-col.highlight{border:2px solid var(--accent)}
.comp-col-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:3px 14px;border-radius:100px;font-size:10px;font-weight:700;white-space:nowrap}
.comp-col h4{font-size:15px;font-weight:800;text-align:center;margin-bottom:20px}
.comp-row{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2);line-height:1.4}
.comp-row:last-child{border-bottom:none}
.comp-row .ci{flex-shrink:0;font-size:12px}
/* Responsive */
@media(max-width:1024px){
  .bento-grid{grid-template-columns:1fr 1fr}
  .bento-item.tall{grid-row:span 1}
  .do-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .dienst-featured{grid-template-columns:1fr}
  .df-visual{min-height:180px;padding:24px}
  .df-content{border-left:none;border-top:1px solid var(--border)}
  .do-ai-cards{grid-template-columns:1fr}
  .do-data-card{grid-template-columns:1fr}
  .do-ai-section{padding:48px 24px}
  .do-comparison{grid-template-columns:1fr}
  .quest-opts{grid-template-columns:1fr}
  .quest-result-list{grid-template-columns:1fr 1fr}
  .bento-grid{grid-template-columns:1fr}
  .do-grid{grid-template-columns:1fr}
  .do-hero{padding:100px 0 40px}
}
@media(max-width:480px){
  .quest-result-list{grid-template-columns:1fr}
  .df-stats{gap:12px}
  .do-hero-btns{flex-direction:column;align-items:center}
}

/* ── Diensten nav active — background per category ── */
.dn-tag.active{background:var(--dark) !important;color:#fff !important;border-color:var(--dark) !important}
.dn-tag[data-section="development"].active{background:var(--accent) !important;border-color:var(--accent) !important}
.dn-tag[data-section="marketing"].active{background:var(--blue) !important;border-color:var(--blue) !important}
.dn-tag[data-section="ai-automation"].active{background:var(--purple) !important;border-color:var(--purple) !important}
.dn-tag[data-section="data-sales"].active{background:var(--teal) !important;border-color:var(--teal) !important}
.dn-tag[data-section="creative"].active{background:var(--coral) !important;border-color:var(--coral) !important}
.dn-tag[data-section="vergelijken"].active{background:var(--dark) !important;border-color:var(--dark) !important}
/* Questionnaire result items as links */
#quest-result-list{display:flex;flex-wrap:wrap;gap:10px}
a.quest-result-item{text-decoration:none;color:var(--dark);display:flex;align-items:center;gap:7px;flex:1;min-width:160px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:11px 14px;font-size:13px;font-weight:600;transition:all .2s}
a.quest-result-item:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.quest-result-item.dim{opacity:.18 !important;pointer-events:none !important}
/* Data card layout fix */
.do-data-card{text-decoration:none;color:inherit}
.do-data-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);transition:all .3s}

/* ═══════════════════════════════════════════════════════════
   CREATIVE & CONTENT  (dienst-creative-content.php)
═══════════════════════════════════════════════════════════ */
.gradient-coral{background:linear-gradient(135deg,#E24B4A,#FF7B7A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 6 Pijlers */
.cc-pijlers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.cc-pijler-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px 28px;transition:box-shadow .3s,transform .3s}
.cc-pijler-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.cc-pijler-icon{font-size:28px;margin-bottom:14px}
.cc-pijler-card h3{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--dark);margin:0 0 8px}
.cc-pijler-desc{font-size:13px;color:var(--text2);margin:0 0 14px;line-height:1.6}
.cc-pijler-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.cc-pijler-list li{font-size:12px;color:var(--text2);line-height:1.5;padding-left:14px;position:relative}
.cc-pijler-list li::before{content:'→';position:absolute;left:0;color:var(--coral);font-size:10px;font-weight:700;top:2px}

/* Use Cases */
.cc-case{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:40px;margin-top:20px;transition:box-shadow .3s}
.cc-case:hover{box-shadow:var(--shadow-lg)}
.cc-case-header{margin-bottom:24px}
.cc-case-header h2{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--dark);margin:12px 0 0;line-height:1.2}
.cc-case-body{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.cc-case-col{}
.cc-case-block{margin-bottom:20px}
.cc-case-block h4{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin:0 0 8px}
.cc-case-block p{font-size:13px;color:var(--text2);line-height:1.7;margin:0}
.cc-case-bullets{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.cc-case-bullets li{font-size:13px;color:var(--text2);line-height:1.6;padding-left:14px;position:relative}
.cc-case-bullets li::before{content:'•';position:absolute;left:0;color:var(--coral);font-weight:700}
.cc-case-result-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:32px 24px;position:sticky;top:100px}
.cc-case-stat{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.cc-stat-num{font-size:52px;font-weight:900;letter-spacing:-2px;line-height:1;margin-bottom:6px}
.cc-stat-label{font-size:13px;color:var(--text2);line-height:1.4}
.cc-case-quote{font-size:13px;font-style:italic;color:var(--text2);line-height:1.7;margin:0;padding-left:12px;border-left:3px solid var(--border)}

/* Portfolio Highlights */
.cc-portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.cc-portfolio-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:28px 24px;transition:box-shadow .3s,transform .3s}
.cc-portfolio-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.cc-portfolio-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--coral);margin-bottom:10px}
.cc-portfolio-card h4{font-size:15px;font-weight:800;color:var(--dark);margin:0 0 8px;letter-spacing:-.3px}
.cc-portfolio-card p{font-size:12.5px;color:var(--text2);line-height:1.65;margin:0}

/* Related Services */
.cc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cc-related-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:32px 28px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .3s,transform .3s;text-decoration:none;color:inherit}
.cc-related-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.cc-related-card h4{font-size:16px;font-weight:800;color:var(--dark);margin:0;letter-spacing:-.3px}
.cc-related-card p{font-size:13px;color:var(--text2);line-height:1.55;flex:1;margin:0}
.cc-related-link{font-size:13px;font-weight:700;margin-top:auto}

/* Responsive CC */
@media(max-width:1024px){
  .cc-pijlers-grid{grid-template-columns:repeat(2,1fr)}
  .cc-case-body{grid-template-columns:1fr}
  .cc-case-result-card{position:static}
  .cc-portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .cc-related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .cc-pijlers-grid,.cc-portfolio-grid,.cc-related-grid{grid-template-columns:1fr}
  .cc-case{padding:28px 20px}
}

/* ═══════════════════════════════════════════════════════════
   DESIGN CASES
═══════════════════════════════════════════════════════════ */
.case-design-hero{background:var(--dark);padding:120px 0 60px;text-align:center;color:#fff}
.case-design-hero .section-label{color:var(--coral)}
.case-design-hero h1{color:#fff;font-size:clamp(32px,4.5vw,52px);letter-spacing:-2px;margin:12px 0}
.case-design-hero p{color:rgba(255,255,255,.5);font-size:16px;max-width:600px;margin:0 auto}
.case-design-meta{display:flex;gap:32px;justify-content:center;padding:40px 0;border-bottom:1px solid var(--border);margin-bottom:48px;flex-wrap:wrap}
.case-design-meta .cdm-item{text-align:center}
.case-design-meta .cdm-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.case-design-meta .cdm-value{font-size:14px;font-weight:700;margin-top:4px;color:var(--dark)}
.case-gallery{display:grid;gap:16px;margin:48px 0}
.case-gallery.cols-1{grid-template-columns:1fr;max-width:900px;margin-left:auto;margin-right:auto}
.case-gallery.cols-2{grid-template-columns:1fr 1fr}
.case-gallery.cols-3{grid-template-columns:1fr 1fr 1fr}
.case-gallery img{width:100%;height:auto;border-radius:var(--r);display:block}
.case-gallery .gallery-item{overflow:hidden;border-radius:var(--r);background:var(--bg2);transition:transform .3s}
.case-gallery .gallery-item:hover{transform:scale(1.01)}
.case-gallery .gallery-item.dark{background:var(--dark);padding:40px;display:flex;align-items:center;justify-content:center;min-height:200px}
.case-gallery .gallery-item.light{background:var(--white);padding:40px;display:flex;align-items:center;justify-content:center;min-height:200px;border:1px solid var(--border)}
.case-gallery .gallery-item.color{padding:40px;display:flex;align-items:center;justify-content:center;min-height:200px}
.case-gallery .gallery-placeholder{width:100%;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12px;color:rgba(255,255,255,.4);border-radius:var(--r)}
.case-description{max-width:700px;font-size:16px;color:var(--text2);line-height:1.8;margin:40px auto}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:24px 0}
.case-tags span{padding:6px 14px;border-radius:100px;font-size:11px;font-weight:600;background:var(--bg2);color:var(--text2)}
/* Archive: design cards */
.csa-card--design{text-decoration:none;color:inherit;display:block;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);transition:transform .25s,box-shadow .25s;background:var(--white)}
.csa-card--design:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.csa-card--design .csad-visual{min-height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.csa-card--design .csad-badge{position:absolute;top:14px;left:14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:5px 11px;border-radius:100px;background:rgba(0,0,0,.4);color:#fff;backdrop-filter:blur(4px)}
.csa-card--design .csad-body{padding:20px 22px 22px}
.csa-card--design .csad-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.csa-card--design .csad-title{font-size:16px;font-weight:800;color:var(--dark);letter-spacing:-.3px;margin-bottom:6px}
.csa-card--design .csad-client{font-size:13px;color:var(--text2);margin-bottom:8px}
.csa-card--design .csad-desc{font-size:12px;color:var(--text3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csa-card--design .csad-cta{font-size:12px;font-weight:700;margin-top:12px}
.design-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
@media(max-width:1024px){.design-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .design-grid{grid-template-columns:1fr}
  .case-gallery.cols-2,.case-gallery.cols-3{grid-template-columns:1fr}
  .case-design-meta{flex-direction:column;align-items:center;gap:16px}
}
/* ── HERO NODE GRAPH ─────────────────────────────────── */
.hero-nodes{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1;user-select:none}
.hero-nodes svg{width:100%;height:100%;overflow:visible}
.hn-link{stroke-width:1;fill:none;transition:stroke-opacity .3s,stroke-width .3s}
.hn-link.primary{stroke-width:2}
.hn-link.active{stroke-opacity:1!important;stroke-width:2.5}
.hn-node{cursor:pointer}
.hn-node circle{transition:opacity .25s,fill .25s}
.hn-node.center circle{fill:#1A1A1A}
.hn-node.center text{fill:#fff;font-weight:800;font-size:13px;font-family:inherit}
.hn-node.category circle{filter:drop-shadow(0 4px 12px rgba(0,0,0,.12))}
.hn-node.category text{fill:#fff;font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:.5px;font-family:inherit}
.hn-node.service circle:last-child{opacity:.45;transition:opacity .25s}
.hn-node.service:hover circle:last-child,.hn-node.service.active circle:last-child{opacity:1}
.hero-nodes svg a{cursor:pointer;outline:none;text-decoration:none}
.hero-nodes svg a:focus-visible circle:last-child{stroke:var(--accent);stroke-width:2}
.hero-nodes svg text{pointer-events:none;user-select:none}
.hn-label{position:absolute;background:var(--dark);color:var(--bg);padding:5px 11px;border-radius:100px;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-140%) scale(.85);transition:opacity .18s,transform .18s;z-index:10;box-shadow:var(--shadow-lg)}
.hn-label.visible{opacity:1;transform:translate(-50%,-140%) scale(1)}
.hero-nodes-hint{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text3);font-weight:500;white-space:nowrap}
.hnh-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;animation:hintPulse 2s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes nodeIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
[data-theme="dark"] .hn-node.center circle{fill:#E2E8F0}
[data-theme="dark"] .hn-node.center text{fill:#0B0F1A}
[data-theme="dark"] .hn-label{background:#E2E8F0;color:#0B0F1A}
@media(max-width:768px){.hero-nodes{max-width:320px}.hn-node.category text{font-size:7px}.hn-node.center text{font-size:11px}}

/* ── LOGO SLIDER / INFINITE MARQUEE ─────────────────── */
.logo-slider-section{padding:56px 0 44px;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.lss-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text3);margin-bottom:28px}
.lss-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;animation:lssPulse 2s ease-in-out infinite;flex-shrink:0}
@keyframes lssPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
.logo-slider{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);padding:10px 0}
.logo-track{display:flex;width:max-content;animation:logoScroll 60s linear infinite;will-change:transform}
.logo-slider.reverse .logo-track{animation:logoScrollReverse 75s linear infinite}
.logo-slider:hover .logo-track{animation-play-state:paused}
.logo-row{display:flex;align-items:center;flex-shrink:0}
.logo-item{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;font-size:20px;font-weight:700;color:var(--text2);letter-spacing:-.4px;white-space:nowrap;opacity:.5;transition:opacity .3s,color .3s;position:relative}
.logo-item img{width:28px;height:28px;border-radius:6px;object-fit:contain;flex-shrink:0;transition:opacity .3s}
[data-theme="dark"] .logo-item img{filter:brightness(1.3) saturate(.8)}
.logo-item::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--text3);opacity:.3}
.logo-slider:hover .logo-item{opacity:.35}
.logo-item:hover{opacity:1!important;color:var(--text)}
.logo-item.current{color:var(--accent);opacity:.8}
.logo-item.current::before{content:'●';margin-right:10px;font-size:9px;vertical-align:middle;opacity:.7}
.logo-item.current:hover{opacity:1!important}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes logoScrollReverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
[data-theme="dark"] .logo-slider-section{background:transparent;border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .logo-item{color:#94A3B8;opacity:.4}
[data-theme="dark"] .logo-item.current{color:var(--accent);opacity:.75}
@media(max-width:768px){.logo-item{font-size:16px;padding:10px 22px}.logo-track{animation-duration:38s}.logo-slider.reverse .logo-track{animation-duration:52s}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none!important}.logo-slider{mask-image:none;-webkit-mask-image:none}}

/* Credibility strip */
.hp-credibility-wrap{background:var(--white);border-bottom:1px solid var(--border)}
.credibility-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch}
.cs-item{text-align:center;padding:56px 32px;border-right:1px solid var(--border)}
.cs-item:last-child{border-right:none}
.cs-num{font-size:clamp(48px,5.5vw,80px);font-weight:900;letter-spacing:-3px;color:var(--dark);line-height:1;display:block;margin-bottom:10px}
.cs-num.cs-small{font-size:14px;font-weight:700;letter-spacing:0;line-height:1.5;color:var(--text2)}
.cs-label{font-size:13px;color:var(--text3);margin-top:0;font-weight:500}
@media(max-width:768px){.credibility-strip{grid-template-columns:repeat(2,1fr)}.cs-item{padding:40px 24px;border-bottom:1px solid var(--border)}.cs-item:nth-child(2){border-right:none}.cs-item:nth-child(3){border-bottom:none}.cs-item:last-child{border-bottom:none}}

/* About preview → editorial dark */
.hp-about-editorial{background:#111111;padding:120px 0;position:relative;overflow:hidden}
.hp-ae-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;position:relative;z-index:2}
.hp-ae-left .section-label{margin-bottom:20px}
.hp-ae-pull{font-size:clamp(36px,4.5vw,64px);font-weight:900;letter-spacing:-3px;line-height:1.02;color:#fff;margin:0;font-style:normal}
.hp-ae-pull em{font-style:italic;color:var(--accent)}
.hp-ae-body{font-size:15px;color:rgba(255,255,255,.5);line-height:1.85}
.hp-ae-bureaus{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.hp-ae-bureaus span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:8px 18px;font-size:13px;font-weight:600;color:rgba(255,255,255,.5)}
.hp-ae-ghost{font-size:clamp(200px,28vw,380px);font-weight:900;opacity:.025;position:absolute;bottom:-40px;right:-40px;line-height:1;pointer-events:none;user-select:none;color:#fff;letter-spacing:-12px;z-index:1}
@media(max-width:900px){.hp-ae-grid{grid-template-columns:1fr;gap:48px}.hp-about-editorial{padding:80px 0}}

/* ── Homepage final CTA ─────────────────────────────────── */
.hp-cta-final{background:#111111;padding:120px 0;position:relative;overflow:hidden}
.hp-cta-glow{position:absolute;top:50%;left:30%;transform:translate(-50%,-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.07),transparent 60%);pointer-events:none}
.hp-cta-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
.hp-cta-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:rgba(255,255,255,.3);margin-bottom:20px}
.hp-cta-title{font-size:clamp(36px,5vw,68px);font-weight:900;letter-spacing:-3px;line-height:1.02;color:#fff;margin:0 0 24px}
.hp-cta-title em{font-style:italic;color:var(--accent);display:block}
.hp-cta-sub{font-size:16px;color:rgba(255,255,255,.45);line-height:1.8;max-width:460px;margin:0 0 40px}
.hp-cta-actions{display:flex;flex-direction:column;gap:20px}
.hp-cta-btn{font-size:16px;padding:18px 40px;border-radius:100px}
.hp-cta-trust{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hp-cta-trust span{font-size:13px;color:rgba(255,255,255,.32);font-weight:600}
.hp-cta-trust-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-block;flex-shrink:0}
.hp-cta-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--r2);overflow:hidden}
.hp-cta-card-head{display:flex;align-items:center;gap:10px;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.5px;text-transform:uppercase}
.hp-cta-card-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:badge-pulse 2s infinite}
.hp-cta-card-body{padding:32px 24px;display:flex;flex-direction:column;gap:20px}
.hp-cta-step{display:flex;align-items:center;gap:16px;font-size:15px;font-weight:600;color:rgba(255,255,255,.7)}
.hp-cta-step-n{width:32px;height:32px;border-radius:50%;background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.2);color:var(--accent);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.5px}
.hp-cta-card-foot{padding:16px 24px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;color:rgba(255,255,255,.22);text-align:center;font-style:italic}
.hp-cta-ghost{font-size:clamp(160px,24vw,340px);font-weight:900;opacity:.022;position:absolute;bottom:-20px;right:-20px;line-height:1;pointer-events:none;user-select:none;color:#fff;letter-spacing:-8px;z-index:1}
@media(max-width:900px){.hp-cta-inner{grid-template-columns:1fr;gap:56px}}

/* ═══════════════════════════════════════════════════════
   DARK MODE: WELNIGHT
═══════════════════════════════════════════════════════ */
[data-theme="dark"]{--bg:#0B0F1A;--bg2:#111827;--bg3:#1F2937;--white:#111827;--surface:#151B2B;--dark:#E2E8F0;--dark2:#CBD5E1;--text:#E2E8F0;--text2:#94A3B8;--text3:#64748B;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.12);--accent:#818CF8;--accent2:#6366F1;--accent-soft:rgba(129,140,248,.1);--accent-soft2:rgba(129,140,248,.2);--green:#34D399;--green-soft:rgba(52,211,153,.1);--blue:#60A5FA;--blue-soft:rgba(96,165,250,.1);--purple:#A78BFA;--purple-soft:rgba(167,139,250,.1);--teal:#22D3EE;--teal-soft:rgba(34,211,238,.1);--coral:#FB7185;--coral-soft:rgba(251,113,133,.1);--shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow:0 4px 16px rgba(0,0,0,.3);--shadow-lg:0 12px 40px rgba(0,0,0,.4);--shadow-xl:0 24px 60px rgba(0,0,0,.5)}
[data-theme="dark"] .gradient{background:linear-gradient(135deg,#818CF8,#A78BFA);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
[data-theme="dark"] .nav-inner{background:rgba(17,17,17,.92)!important;backdrop-filter:blur(12px);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .nav-menu>li>a{color:#CBD5E1}
[data-theme="dark"] .nav-menu>li>a:hover{color:#F1F5F9}
[data-theme="dark"] .nav-menu>li.menu-item-accent>a{color:var(--accent)}
[data-theme="dark"] .sub-menu li a{color:#CBD5E1}
[data-theme="dark"] .sub-menu li a:hover{color:#F1F5F9}
[data-theme="dark"] .mega-col a{color:#CBD5E1}
[data-theme="dark"] .nav-cta{background:var(--accent)}
[data-theme="dark"] .mega-menu{background:rgba(17,17,17,.95);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .mega-col a:hover{background:rgba(255,255,255,.05)}
[data-theme="dark"] .service-card,[data-theme="dark"] .feature-item,[data-theme="dark"] .use-case-card,[data-theme="dark"] .proof-card,[data-theme="dark"] .value-card,[data-theme="dark"] .info-card,[data-theme="dark"] .csa-card,[data-theme="dark"] .contact-form,[data-theme="dark"] .browser-mock,[data-theme="dark"] .ps-card,[data-theme="dark"] .step{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .service-card:hover,[data-theme="dark"] .proof-card:hover{box-shadow:0 12px 40px rgba(129,140,248,.1)}
[data-theme="dark"] .ps-card.problem{border-left-color:#FB7185}
[data-theme="dark"] .ps-card.solution{border-left-color:#34D399}
[data-theme="dark"] .pulse-section{background:#151B2B;border:1px solid rgba(255,255,255,.06)}
[data-theme="dark"] .do-ai-section{background:#0F0B2A}
[data-theme="dark"] .hp-pulse{background:#151B2B}
[data-theme="dark"] .svc-proof-bar{background:#151B2B}
[data-theme="dark"] .case-next-block{background:#1F2937}
[data-theme="dark"] .case-design-hero{background:#111827}
[data-theme="dark"] .caf-btn.active{background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important}
[data-theme="dark"] .pm-notch{background:#1F2937}
[data-theme="dark"] .site-footer{border-top-color:rgba(255,255,255,.06)}
[data-theme="dark"] .logos-row{opacity:.25}

/* ── Team grid (Over Ons) ── */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.team-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:36px 28px;transition:box-shadow .3s,transform .3s}
.team-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.team-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800}
.team-avatar svg{width:80px;height:80px;display:block;flex-shrink:0}
.team-avatar--plus{background:var(--accent-soft);color:var(--accent)}
.team-name{font-size:18px;font-weight:800;margin-bottom:4px;color:var(--text1)}
.team-role{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);display:block;margin-bottom:12px}
.team-bio{font-size:13px;color:var(--text2);line-height:1.7;margin:0}
.team-card--cta{border-style:dashed;border-color:var(--accent);background:var(--accent-soft)}
.team-card--cta .team-role{color:var(--text2)}
.btn-outline{padding:10px 22px;border-radius:100px;border:2px solid var(--accent);color:var(--accent);font-size:13px;font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.btn-outline:hover{background:var(--accent);color:#fff}
@media(max-width:1024px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}
[data-theme="dark"] .team-card{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .team-card--cta{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.3)}
[data-theme="dark"] .hv-top{background:var(--bg2);border-color:rgba(255,255,255,.04)}
[data-theme="dark"] .hv-row{background:var(--surface);border-color:rgba(255,255,255,.04)}
[data-theme="dark"] .form-group input,[data-theme="dark"] .form-group select,[data-theme="dark"] .form-group textarea{background:var(--bg2);border-color:rgba(255,255,255,.08);color:var(--text)}
[data-theme="dark"] .tech-stack span,[data-theme="dark"] .service-tags span{background:var(--surface);border-color:rgba(255,255,255,.06);color:var(--text2)}
[data-theme="dark"] .dn-tag{background:var(--surface);border-color:rgba(255,255,255,.06);color:var(--text2)}
[data-theme="dark"] .csa-card--design{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] img{opacity:.9}
[data-theme="dark"] .case-mockup-img,[data-theme="dark"] .csa-screen img{opacity:1}
[data-theme="dark"] ::selection{background:var(--accent);color:#fff}

/* Smooth transitie */
body,a,.site-nav,.nav-inner,.service-card,.site-footer,.mega-menu,.csa-card,.csa-card--design,.step,.ps-card,.dn-tag{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease}

/* Stars canvas */
.stars-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.35;transition:opacity .8s}
[data-theme="dark"] .stars-canvas{opacity:1}

/* 3D card tilt */
.tilt-card{transform-style:preserve-3d;transition:transform .08s linear,box-shadow .2s;will-change:transform}
.tilt-card:hover{box-shadow:0 24px 60px rgba(0,0,0,.18)}
.tilt-card .tilt-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.08) 0%,transparent 65%);opacity:0;transition:opacity .15s;z-index:1}
.tilt-card:hover .tilt-shine{opacity:1}

.site-nav{z-index:100}.container,.site-footer,.csa-grid-section{position:relative;z-index:1}

/* Theme toggle */
.theme-toggle{background:none;border:1px solid var(--border);width:60px;height:60px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:border-color .3s,background .3s;flex-shrink:0;margin:0 8px}
.theme-toggle:hover{background:var(--bg2);border-color:var(--border2)}
.toggle-sun,.toggle-moon{position:absolute;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s;display:flex;align-items:center;justify-content:center}
.toggle-moon{transform:translateY(30px);opacity:0}
[data-theme="dark"] .toggle-sun{transform:translateY(-30px);opacity:0}
[data-theme="dark"] .toggle-moon{transform:translateY(0);opacity:1}

/* Logo dag/nacht */
.site-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:17px;color:var(--dark);letter-spacing:-.3px}
.logo-icon-wrap{position:relative;width:60px;height:60px;display:flex;align-items:center}
.logo-icon-day,.logo-icon-night{transition:opacity .4s,transform .4s;display:flex}
.logo-icon-night{position:absolute;left:0;opacity:0;transform:scale(.5) rotate(-90deg)}
[data-theme="dark"] .logo-icon-day{opacity:0;transform:scale(.5) rotate(90deg)}
[data-theme="dark"] .logo-icon-night{opacity:1;transform:scale(1) rotate(0deg)}
.logo-name-wrap{position:relative;height:1.2em;min-width:max-content;overflow:visible}
.logo-day,.logo-night{transition:opacity .35s,transform .35s;display:block;line-height:1.2}
.logo-night{position:absolute;top:0;left:0;opacity:0;transform:translateY(8px);white-space:nowrap;color:var(--accent)}
[data-theme="dark"] .logo-day{opacity:0;transform:translateY(-8px)}
[data-theme="dark"] .logo-night{opacity:1;transform:translateY(0)}

@media print{.stars-canvas{display:none!important}}

/* Design case single page – new classes */
.case-design-hero{background:var(--dark);padding:120px 0 72px;color:#fff}
.case-design-hero-inner{max-width:760px}
.case-design-cat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--case-color,var(--coral));margin-bottom:16px}
.case-design-title{font-size:clamp(36px,5vw,60px);font-weight:900;letter-spacing:-2px;margin:0 0 12px;color:#fff;line-height:1.05}
.case-design-subtitle{font-size:16px;color:rgba(255,255,255,.5);margin:0}
.case-design-meta-bar{border-bottom:1px solid var(--border);padding:28px 0}
.case-design-meta-grid{display:flex;gap:40px;flex-wrap:wrap}
.case-design-meta-item{display:flex;flex-direction:column;gap:4px}
.case-design-meta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3)}
.case-design-meta-value{font-size:14px;font-weight:700;color:var(--dark)}
.case-design-desc-wrap{max-width:720px}
.case-design-desc{font-size:17px;line-height:1.8;color:var(--text2);margin:16px 0 0}
.case-design-gallery-section .section-label{margin-bottom:8px}
.case-design-gallery{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:32px}
.case-design-gallery-main{border-radius:var(--r2);min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.case-design-gallery-side{display:flex;flex-direction:column;gap:16px}
.case-design-gallery-thumb{border-radius:var(--r2);flex:1;min-height:120px}
.case-design-gallery-placeholder{font-size:13px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:2px;text-transform:uppercase}
.case-design-tags{display:flex;gap:8px;flex-wrap:wrap}

/* ── Case work gallery (real images) ── */
.case-work-gallery{display:grid;gap:12px;margin-top:32px}
.case-work-gallery.single{grid-template-columns:1fr}
.case-work-gallery.duo{grid-template-columns:1fr 1fr}
.case-work-gallery.trio{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.case-work-gallery.trio .case-work-item.feature{grid-row:span 2}
.case-work-gallery.grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:260px}
.case-work-gallery.grid .case-work-item.feature{grid-column:span 2;grid-row:span 2}
.case-work-item{overflow:hidden;border-radius:var(--r2);background:var(--bg2);aspect-ratio:4/3;position:relative}
.case-work-gallery.single .case-work-item{aspect-ratio:16/9}
.case-work-gallery.grid .case-work-item{aspect-ratio:auto;height:100%}
.case-work-item a{display:block;width:100%;height:100%;cursor:zoom-in}
.case-work-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.case-work-item:hover img{transform:scale(1.04)}

@media(max-width:768px){
  .case-design-gallery{grid-template-columns:1fr}
  .case-design-gallery-side{flex-direction:row}
  .case-design-gallery-thumb{min-height:80px}
  .case-design-meta-grid{gap:20px}
  .case-work-gallery.duo,.case-work-gallery.trio,.case-work-gallery.grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .case-work-gallery.trio .case-work-item.feature,.case-work-gallery.grid .case-work-item.feature{grid-column:span 1;grid-row:span 1}
  .case-work-item,.case-work-gallery.grid .case-work-item{aspect-ratio:4/3;height:auto}
}
[data-theme="dark"] .case-work-item{background:var(--surface)}

/* ═══════════════════════════════════════════════════════════
   CASES ARCHIVE — REDESIGN  (cases-*)
═══════════════════════════════════════════════════════════ */

/* Hero */
.cases-hero{position:relative;padding:100px 0 0;overflow:hidden}
.cases-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,107,53,.07),transparent 70%);pointer-events:none}
.cases-hero-inner{text-align:center;padding-bottom:56px;position:relative}
.cases-hero-title{font-size:clamp(34px,6vw,68px);font-weight:900;letter-spacing:-2.5px;line-height:1.05;margin:14px 0 18px;color:var(--dark)}
.cases-hero-muted{color:var(--text2);display:block;font-weight:700}
.cases-hero-sub{font-size:18px;color:var(--text2);margin:0}

/* Numbers strip */
.cases-numbers{display:flex;align-items:center;justify-content:center;gap:0;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow-lg);position:relative;z-index:2;flex-wrap:wrap}
.cases-num-item{padding:24px 36px;text-align:center;flex:1;min-width:120px}
.cases-num{display:block;font-size:clamp(26px,3.5vw,38px);font-weight:900;letter-spacing:-1.5px;color:var(--dark);line-height:1}
.cases-num-label{display:block;font-size:12px;color:var(--text3);margin-top:5px;font-weight:500}
.cases-num-sep{width:1px;align-self:stretch;background:var(--border);flex-shrink:0}

/* Section */
.cases-section{padding:80px 0 96px}
.cases-section--alt{background:var(--bg2)}
.cases-section-header{margin-bottom:40px}
.cases-section-title{font-size:clamp(26px,3.5vw,40px);font-weight:900;letter-spacing:-1px;margin:8px 0 10px;color:var(--dark)}
.cases-section-sub{font-size:15px;color:var(--text2);margin:0}

/* Marketing grid (browser cards) */
.cases-grid-marketing{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

/* Portfolio grid */
.cases-grid-portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.cases-grid-portfolio .hidden{display:none}

/* Portfolio card */
.pf-card{text-decoration:none;color:inherit;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);background:var(--white);transition:transform .25s,box-shadow .25s;display:block}
.pf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pf-visual{min-height:200px;position:relative;overflow:hidden;background:var(--bg2)}
.pf-visual img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pf-card:hover .pf-visual img{transform:scale(1.04)}
.pf-tag{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:5px 11px;border-radius:100px;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(4px)}
.pf-body{padding:18px 20px 20px}
.pf-title{font-size:15px;font-weight:800;color:var(--dark);letter-spacing:-.3px;margin-bottom:4px}
.pf-client{font-size:12px;color:var(--text2);margin-bottom:10px}
.pf-cta{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}

/* Portfolio filter */
.pf-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.pf-btn{padding:8px 18px;border-radius:100px;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--white);color:var(--text2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pf-btn:hover{border-color:var(--border2)}
.pf-btn.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.pf-count{display:inline-block;font-size:11px;opacity:.6;margin-left:2px}

@media(max-width:1100px){.cases-numbers{flex-wrap:wrap}.cases-num-sep{display:none}.cases-num-item{min-width:calc(50% - 1px)}}
@media(max-width:1024px){.cases-grid-marketing{grid-template-columns:1fr}.cases-grid-portfolio{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cases-hero{padding:72px 0 0}.cases-grid-portfolio{grid-template-columns:1fr}.cases-num-item{min-width:100%}}

[data-theme="dark"] .cases-numbers{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .pf-card{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .pf-btn{background:var(--surface);border-color:rgba(255,255,255,.08);color:var(--text2)}
[data-theme="dark"] .pf-btn.active{background:var(--text);color:var(--bg)}

/* Accent italic — shared helper */
.cases-accent-italic{font-style:italic;color:var(--accent);font-weight:inherit}

/* Featured section header */
.cases-featured-header{margin-bottom:24px}
.cases-featured-heading{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-1.5px;line-height:1.1;color:var(--dark);margin:8px 0 0}

/* Overview section */
.cases-overview-section{padding:80px 0 96px}
.cases-overview-section .cases-section-header{margin-bottom:40px}
.cases-overview-section .cases-section-title{font-size:clamp(28px,4vw,44px)}

/* Dark portfolio section */
.cases-portfolio-dark{background:var(--dark);border-radius:var(--r3);margin:0 24px 80px;padding:72px 64px;position:relative;overflow:hidden}
.cases-portfolio-dark::before{content:'';position:absolute;top:-120px;right:-120px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.1),transparent 70%);pointer-events:none}
.cases-portfolio-header{margin-bottom:40px;position:relative}
.cases-portfolio-label{color:var(--accent)!important}
.cases-portfolio-label::before{background:var(--accent)!important}
.cases-portfolio-title{font-size:clamp(28px,4vw,52px);font-weight:900;letter-spacing:-2px;line-height:1.05;color:#fff;margin:10px 0 14px}
.cases-accent-italic-dark{font-style:italic;color:var(--accent);font-weight:inherit}
.cases-portfolio-sub{font-size:16px;color:rgba(255,255,255,.55);margin:0;max-width:560px;line-height:1.65}

/* Portfolio dark filter */
.pf-filter--dark{margin-bottom:36px}
.pf-btn--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.pf-btn--dark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:#fff}
.pf-btn--dark.active{background:#fff;color:var(--dark);border-color:#fff}

/* Portfolio bento grid */
.cases-pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cases-pf-grid .hidden{display:none}
.pf-bento-card{text-decoration:none;color:inherit;border-radius:var(--r2);overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:transform .25s,box-shadow .25s,background .2s;display:flex;flex-direction:column}
.pf-bento-card--wide{grid-column:span 2}
.pf-bento-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.4);background:rgba(255,255,255,.08)}
.pf-bento-visual{min-height:200px;position:relative;overflow:hidden;background:rgba(255,255,255,.04);flex:1}
.pf-bento-card--wide .pf-bento-visual{min-height:260px}
.pf-bento-visual img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pf-bento-card:hover .pf-bento-visual img{transform:scale(1.04)}
.pf-bento-tag{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:5px 11px;border-radius:100px;background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(4px)}
.pf-bento-body{padding:18px 20px 20px;flex-shrink:0}
.pf-bento-title{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:4px}
.pf-bento-client{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:10px}
.pf-bento-cta{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}

@media(max-width:1024px){.cases-portfolio-dark{margin:0 16px 60px;padding:48px 40px}.cases-pf-grid{grid-template-columns:repeat(2,1fr)}.pf-bento-card--wide{grid-column:span 2}}
@media(max-width:640px){.cases-portfolio-dark{margin:0 12px 48px;padding:36px 24px;border-radius:var(--r2)}.cases-pf-grid{grid-template-columns:1fr}.pf-bento-card--wide{grid-column:span 1}}

/* ═══════════════════════════════════════════════════════════
   CASES V2 — Creative redesign  (cv2-*)
═══════════════════════════════════════════════════════════ */
.cv2-accent-italic{font-style:italic;color:var(--accent);font-weight:inherit}
/* Hero */
.cv2-hero{position:relative;padding:120px 0 0;overflow:hidden;border-bottom:1px solid var(--border)}
.cv2-hero-noise{position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.cv2-hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:700px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,107,53,.07) 0%,transparent 65%);pointer-events:none}
.cv2-hero-inner{position:relative}
.cv2-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:24px}
.cv2-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.cv2-hero-h1{font-size:clamp(52px,9vw,112px);font-weight:900;letter-spacing:-4px;line-height:.95;color:var(--dark);margin:0 0 40px}
.cv2-hero-line1,.cv2-hero-line2{display:block}
.cv2-hero-accent{font-style:italic;color:var(--accent)}
.cv2-hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;padding-bottom:64px}
.cv2-hero-sub{font-size:17px;color:var(--text2);line-height:1.7;max-width:420px;margin:0}
.cv2-stats-row{display:flex;align-items:flex-start;gap:0}
.cv2-stat{flex:1;padding:0 24px}
.cv2-stat:first-child{padding-left:0}
.cv2-stat-div{width:1px;background:var(--border);align-self:stretch;flex-shrink:0;margin-top:4px}
.cv2-stat-n{display:block;font-size:clamp(28px,3.5vw,42px);font-weight:900;letter-spacing:-2px;line-height:1;color:var(--dark)}
.cv2-stat-l{display:block;font-size:11px;color:var(--text3);font-weight:500;line-height:1.45;margin-top:5px}
.cv2-hero-bg-number{position:absolute;bottom:-60px;right:-20px;font-size:clamp(160px,20vw,280px);font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.05);letter-spacing:-12px;line-height:1;pointer-events:none;user-select:none;z-index:0}
/* Ticker */
.cv2-ticker{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);padding:14px 0}
.cv2-ticker-track{display:flex;white-space:nowrap;animation:cv2-ticker 28s linear infinite}
.cv2-ticker-track:hover{animation-play-state:paused}
.cv2-ticker-item{display:inline-flex;align-items:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);padding:0 4px}
.cv2-ticker-dot{color:var(--accent);margin:0 16px;font-size:8px}
@keyframes cv2-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Featured case */
.cv2-featured{padding:64px 0 80px}
.cv2-featured-label{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.cv2-fl-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.cv2-fl-sep{color:var(--border2);font-size:16px;font-weight:300}
.cv2-fl-text{font-size:13px;font-weight:600;color:var(--text2)}
.cv2-fc-wrap{display:grid;grid-template-columns:3fr 2fr;border-radius:var(--r3);overflow:hidden;background:var(--dark);text-decoration:none;color:inherit;transition:box-shadow .4s;box-shadow:0 24px 80px rgba(0,0,0,.12);position:relative}
.cv2-fc-wrap::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.12),transparent 65%);pointer-events:none}
.cv2-fc-wrap:hover{box-shadow:0 40px 100px rgba(0,0,0,.18)}
.cv2-fc-visual-col{position:relative;overflow:hidden;background:#111;display:flex;align-items:flex-end}
.cv2-fc-browser{margin:32px 32px 0;border-radius:16px 16px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-bottom:none;background:#1e1e1e;width:calc(100% - 64px);position:relative;z-index:1}
.cv2-fc-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#2a2a2a;border-bottom:1px solid rgba(255,255,255,.08)}
.cv2-fc-dots{display:flex;gap:5px}
.cv2-fc-dots span{width:10px;height:10px;border-radius:50%;display:block}
.cv2-fc-dots span:first-child{background:#FF5F57}.cv2-fc-dots span:nth-child(2){background:#FEBC2E}.cv2-fc-dots span:last-child{background:#28C840}
.cv2-fc-url{flex:1;font-size:11px;color:rgba(255,255,255,.3);font-family:ui-monospace,monospace;text-align:center}
.cv2-fc-live{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#28C840}
.cv2-live-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:csa-pulse 1.8s ease-in-out infinite}
.cv2-fc-screen{max-height:380px;overflow:hidden}
.cv2-fc-screen img{width:100%;display:block;object-fit:cover;object-position:top;transition:transform 8s cubic-bezier(.25,.46,.45,.94)}
.cv2-fc-wrap:hover .cv2-fc-screen img{transform:translateY(calc(-100% + 380px))}
.cv2-fc-index-bg{position:absolute;bottom:-20px;left:-10px;font-size:180px;font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);line-height:1;pointer-events:none;z-index:0}
.cv2-fc-content-col{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:20px;position:relative;z-index:1}
.cv2-fc-tag{display:inline-block;padding:5px 14px;border-radius:100px;border:1px solid;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;width:fit-content;background:rgba(255,255,255,.04)}
.cv2-fc-client{font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-1.5px;line-height:1.05;color:#fff;margin:0}
.cv2-fc-tagline{font-size:15px;color:rgba(255,255,255,.55);line-height:1.6;margin:0}
.cv2-fc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);border-radius:var(--r);overflow:hidden}
.cv2-fc-result{padding:16px 12px;background:#1a1a1a;text-align:center}
.cv2-fc-rnum{display:block;font-size:22px;font-weight:900;letter-spacing:-1px;line-height:1}
.cv2-fc-rlabel{display:block;font-size:10px;color:rgba(255,255,255,.4);margin-top:4px;font-weight:500}
.cv2-fc-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:100px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;width:fit-content;margin-top:4px;transition:transform .2s,box-shadow .2s}
.cv2-fc-wrap:hover .cv2-fc-cta{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,.35)}
/* Projects */
.cv2-projects{padding:88px 0 96px;background:var(--bg)}
.cv2-projects-head{margin-bottom:48px;max-width:600px}
.cv2-section-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.cv2-section-kicker::before{content:'';display:inline-block;width:24px;height:1px;background:var(--accent)}
.cv2-section-h2{font-size:clamp(32px,5vw,58px);font-weight:900;letter-spacing:-2.5px;line-height:1;color:var(--dark);margin:0 0 16px}
.cv2-section-sub{font-size:15px;color:var(--text2);line-height:1.65;margin:0}
.cv2-filter-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:40px}
.cv2-filter-btn{padding:8px 18px;border-radius:100px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--white);color:var(--text2);cursor:pointer;transition:all .2s}
.cv2-filter-btn:hover{border-color:var(--accent);color:var(--accent)}
.cv2-filter-btn.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.cv2-fc-cnt{font-size:10px;opacity:.5;margin-left:2px}
/* Editorial grid */
.cv2-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cv2-card{text-decoration:none;color:inherit;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;position:relative}
.cv2-card--wide{grid-column:span 2}
.cv2-card:hover{transform:translateY(-6px);box-shadow:0 24px 64px rgba(0,0,0,.1)}
.cv2-card-accent-line{height:3px;width:100%;flex-shrink:0}
.cv2-card-visual{flex-shrink:0;background:var(--bg2);position:relative}
.cv2-card-chrome{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg2);border-bottom:1px solid var(--border)}
.cv2-card-chrome-dots{display:flex;gap:4px;flex-shrink:0}
.cv2-card-chrome-dots span{width:9px;height:9px;border-radius:50%;display:block}
.cv2-card-chrome-url{flex:1;font-size:10px;color:var(--text3);font-family:ui-monospace,monospace;text-align:center;background:var(--white);border:1px solid var(--border);border-radius:4px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin:0 auto}
.cv2-card-screen{height:240px;overflow:hidden;position:relative}
.cv2-card--wide .cv2-card-screen{height:300px}
.cv2-card-screen img{width:100%;display:block;object-fit:cover;object-position:top;transition:transform 7s cubic-bezier(.25,.46,.45,.94)}
.cv2-card:hover .cv2-card-screen img{transform:translateY(calc(-100% + 240px))}
.cv2-card--wide:hover .cv2-card-screen img{transform:translateY(calc(-100% + 300px))}
.cv2-card-placeholder{width:100%;height:100%;background:var(--bg2)}
.cv2-card-year{position:absolute;top:10px;right:10px;font-size:10px;font-weight:600;color:var(--text3);background:var(--white);border:1px solid var(--border);border-radius:100px;padding:3px 10px}
.cv2-card-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.cv2-card-meta{margin-bottom:8px}
.cv2-card-sector{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.cv2-card-client{font-size:clamp(18px,2vw,22px);font-weight:900;letter-spacing:-.6px;color:var(--dark);margin:0 0 8px;line-height:1.15}
.cv2-card-tagline{font-size:13px;color:var(--text2);line-height:1.55;margin:0 0 auto}
.cv2-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.cv2-card-metric{display:inline-flex;align-items:baseline;gap:6px;padding:6px 14px;border-radius:100px}
.cv2-card-metric-n{font-size:17px;font-weight:900;letter-spacing:-.5px;line-height:1}
.cv2-card-metric-l{font-size:10px;color:var(--text3);font-weight:500}
.cv2-card-arrow{display:flex;align-items:center;flex-shrink:0;transition:transform .2s}
.cv2-card:hover .cv2-card-arrow{transform:translateX(4px)}
.cv2-card::after{content:'';position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,107,53,.06),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.cv2-card:hover::after{opacity:1}
/* Portfolio dark */
.cv2-portfolio{margin:0 20px 80px;background:var(--dark);border-radius:40px;overflow:hidden;position:relative}
.cv2-portfolio::before{content:'';position:absolute;top:-150px;right:-150px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.1),transparent 65%);pointer-events:none}
.cv2-portfolio::after{content:'';position:absolute;bottom:-100px;left:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.05),transparent 65%);pointer-events:none}
.cv2-portfolio-inner{position:relative;z-index:1;padding:80px 0 72px}
.cv2-portfolio-head{margin-bottom:48px}
.cv2-portfolio-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.cv2-pe-num{font-size:13px;font-weight:900;color:var(--accent)}
.cv2-pe-line{flex:0 0 40px;height:1px;background:rgba(255,255,255,.15)}
.cv2-pe-text{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.4)}
.cv2-portfolio-h2{font-size:clamp(32px,5vw,64px);font-weight:900;letter-spacing:-3px;line-height:.95;color:#fff;margin:0 0 20px}
.cv2-portfolio-accent{font-style:italic;color:var(--accent)}
.cv2-portfolio-sub{font-size:15px;color:rgba(255,255,255,.45);line-height:1.65;margin:0}
.cv2-pf-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:40px}
.cv2-pf-btn{padding:7px 16px;border-radius:100px;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.55);cursor:pointer;transition:all .2s}
.cv2-pf-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.cv2-pf-btn.active{background:#fff;color:var(--dark);border-color:#fff}
.cv2-pf-btn span{font-size:10px;opacity:.5;margin-left:2px}
/* Mosaic grid */
.cv2-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:12px}
.cv2-mosaic-card{text-decoration:none;color:inherit;border-radius:20px;overflow:hidden;position:relative;background:#1a1a1a;transition:transform .3s,box-shadow .3s}
.cv2-mosaic-card--wide{grid-column:span 2}
.cv2-mosaic-card--tall{grid-row:span 2}
.cv2-mosaic-card:hover{transform:scale(1.015);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cv2-mosaic-img-wrap{position:absolute;inset:0;overflow:hidden}
.cv2-mosaic-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cv2-mosaic-card:hover .cv2-mosaic-img-wrap img{transform:scale(1.06)}
.cv2-mosaic-placeholder{width:100%;height:100%;background:#333}
.cv2-mosaic-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.05) 100%);transition:opacity .3s}
.cv2-mosaic-card:hover .cv2-mosaic-overlay{opacity:.9}
.cv2-mosaic-cat{position:absolute;top:14px;right:14px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:5px 10px;border-radius:100px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.75);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08)}
.cv2-mosaic-body{position:absolute;bottom:0;left:0;right:0;padding:20px 20px 22px;transform:translateY(4px);transition:transform .3s}
.cv2-mosaic-card:hover .cv2-mosaic-body{transform:translateY(0)}
.cv2-mosaic-title{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px;letter-spacing:-.2px;line-height:1.3}
.cv2-mosaic-client{font-size:11px;color:rgba(255,255,255,.45);margin-bottom:8px}
.cv2-mosaic-cta{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .25s .05s,transform .25s .05s}
.cv2-mosaic-card:hover .cv2-mosaic-cta{opacity:1;transform:translateY(0)}
/* CTA */
.cv2-cta{padding:120px 0}
.cv2-cta-inner{text-align:center;max-width:680px;margin:0 auto}
.cv2-cta-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:8px}
.cv2-cta-kicker::before,.cv2-cta-kicker::after{content:'';display:block;width:32px;height:1px;background:var(--accent);opacity:.4}
.cv2-cta-h2{font-size:clamp(36px,5.5vw,72px);font-weight:900;letter-spacing:-3px;line-height:.95;color:var(--dark);margin:0 0 20px}
.cv2-cta-sub{font-size:16px;color:var(--text2);line-height:1.7;max-width:440px;margin:0 auto 36px}
.cv2-cta-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.cv2-cta-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;font-size:14px;font-weight:600;border:1px solid var(--border2);color:var(--text2);transition:border-color .2s,color .2s}
.cv2-cta-ghost:hover{border-color:var(--accent);color:var(--accent)}
/* Responsive */
@media(max-width:1100px){.cv2-fc-wrap{grid-template-columns:1fr 1fr}.cv2-edit-grid{grid-template-columns:repeat(2,1fr)}.cv2-mosaic{grid-template-columns:repeat(2,1fr)}.cv2-mosaic-card--wide{grid-column:span 2}}
@media(max-width:860px){.cv2-hero-bottom{grid-template-columns:1fr}.cv2-fc-wrap{grid-template-columns:1fr}.cv2-fc-index-bg{display:none}.cv2-fc-content-col{padding:36px 32px}.cv2-portfolio{margin:0 12px 60px;border-radius:28px}.cv2-portfolio-inner{padding:60px 0 48px}}
@media(max-width:640px){.cv2-hero{padding:88px 0 0}.cv2-hero-h1{letter-spacing:-2px}.cv2-hero-bg-number{display:none}.cv2-stats-row{flex-wrap:wrap}.cv2-stat{min-width:calc(50% - 1px);padding:12px 16px;border-bottom:1px solid var(--border)}.cv2-stat-div{display:none}.cv2-edit-grid,.cv2-mosaic{grid-template-columns:1fr}.cv2-card--wide,.cv2-mosaic-card--wide,.cv2-mosaic-card--tall{grid-column:span 1;grid-row:span 1}.cv2-mosaic{grid-auto-rows:220px}.cv2-portfolio{margin:0 8px 40px;border-radius:20px}.cv2-cta{padding:80px 0}}
[data-theme="dark"] .cv2-portfolio{background:#141418}
[data-theme="dark"] .cv2-fc-wrap{background:#141418}
[data-theme="dark"] .cv2-card{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .cv2-card-chrome{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .cv2-card-chrome-url{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}
[data-theme="dark"] .cv2-filter-btn{background:var(--surface);color:var(--text2)}
[data-theme="dark"] .cv2-filter-btn.active{background:var(--text);color:var(--bg);border-color:transparent}
[data-theme="dark"] .cv2-cta-ghost{border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}

/* ═══════════════════════════════════════════════════════════
   DESIGN CASE DETAIL — REDESIGN  (cdh-*)
═══════════════════════════════════════════════════════════ */

/* Full-image hero */
.cdh-hero{position:relative;min-height:480px;display:flex;align-items:flex-end;overflow:hidden;background:var(--cdh-color,#1a1a2e)}
.cdh-hero-img{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat}
.cdh-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%)}
.cdh-hero-solid{position:absolute;inset:0;background:var(--cdh-color,#1a1a2e)}
.cdh-hero-content{position:relative;padding-bottom:52px;padding-top:40px}
.cdh-cat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.65);margin-bottom:12px}
.cdh-title{font-size:clamp(30px,5vw,58px);font-weight:900;letter-spacing:-2px;line-height:1.06;color:#fff;margin:0 0 12px}
.cdh-subtitle{font-size:16px;color:rgba(255,255,255,.7);margin:0}

/* Compact meta bar */
.cdh-meta-bar{background:var(--white);border-bottom:1px solid var(--border)}
.cdh-meta-row{display:flex;flex-wrap:wrap;gap:0}
.cdh-meta-item{padding:16px 28px;border-right:1px solid var(--border);flex:1;min-width:140px}
.cdh-meta-item:last-child{border-right:none}
.cdh-meta-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:4px}
.cdh-meta-value{display:block;font-size:14px;font-weight:600;color:var(--dark)}

/* Masonry gallery */
.case-gallery-masonry{columns:2;column-gap:12px;margin-top:32px}
.case-gallery-masonry.cols-3{columns:3}
.case-gallery-masonry.cols-1{columns:1}
.cgm-item{break-inside:avoid;margin-bottom:12px;border-radius:var(--r2);overflow:hidden;background:var(--bg2)}
.cgm-item a{display:block;cursor:zoom-in}
.cgm-item img{width:100%;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cgm-item:hover img{transform:scale(1.03)}

@media(max-width:768px){.cdh-hero{min-height:340px}.cdh-meta-item{min-width:calc(50% - 1px)}.case-gallery-masonry,.case-gallery-masonry.cols-3{columns:2}}
@media(max-width:480px){.case-gallery-masonry,.case-gallery-masonry.cols-3{columns:1}.cdh-meta-item{min-width:100%;border-right:none;border-bottom:1px solid var(--border)}.cdh-meta-item:last-child{border-bottom:none}}

[data-theme="dark"] .cdh-meta-bar{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .cdh-meta-item{border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .cgm-item{background:var(--surface)}

/* ═══════════════════════════════════════════════════════════
   FIX 1: PREMIUM MOON ICON
═══════════════════════════════════════════════════════════ */
.moon-icon{filter:drop-shadow(0 0 12px rgba(165,180,252,.4))}
.theme-toggle:hover .moon-icon{animation:moonHover .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes moonHover{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-12deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
[data-theme="dark"] .site-logo .moon-icon{animation:moonBreath 4s ease-in-out infinite}
@keyframes moonBreath{0%,100%{filter:drop-shadow(0 0 12px rgba(165,180,252,.4))}50%{filter:drop-shadow(0 0 18px rgba(165,180,252,.65))}}

/* ═══════════════════════════════════════════════════════════
   FIX 2: WELNIGHT LEESBAARHEID (hoog contrast logo tekst)
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .logo-night{
    color:#E8E8E8;
}
[data-theme="dark"] .site-footer .logo-night{
    background:linear-gradient(135deg,#F1F5F9 0%,#CBD5E1 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
[data-theme="dark"] .site-logo:hover .logo-night{filter:drop-shadow(0 0 12px rgba(165,180,252,.4))}

/* ═══════════════════════════════════════════════════════════
   FIX 3: SERVICES BENTO GRID
═══════════════════════════════════════════════════════════ */
.services-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(220px,auto);gap:16px;margin-top:48px}
.bento-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:28px 24px;display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;isolation:isolate}
.bento-card.featured{grid-column:span 2}
.bento-card::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg,transparent 40%,var(--bc-color,var(--accent)) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;z-index:1}
.bento-card:hover::before{opacity:1}
.bento-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.15)}
.bento-card[data-color="accent"]{--bc-color:var(--accent);--bc-soft:var(--accent-soft)}
.bento-card[data-color="blue"]{--bc-color:var(--blue);--bc-soft:var(--blue-soft)}
.bento-card[data-color="coral"]{--bc-color:var(--coral);--bc-soft:var(--coral-soft)}
.bento-card[data-color="purple"]{--bc-color:var(--purple);--bc-soft:var(--purple-soft)}
.bento-card[data-color="teal"]{--bc-color:var(--teal);--bc-soft:var(--teal-soft)}
.bc-bg{position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,var(--bc-soft) 0%,transparent 60%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}
.bento-card:hover .bc-bg{opacity:1}
.bc-icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--bc-soft);color:var(--bc-color);display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;z-index:2;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.bento-card:hover .bc-icon-wrap{transform:scale(1.1) rotate(-6deg)}
.bc-content{position:relative;z-index:2;flex:1}
.bc-category{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--bc-color);margin-bottom:8px;opacity:.8}
.bento-card h3{font-size:18px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;color:var(--text)}
.bento-card.featured h3{font-size:22px}
.bento-card p{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:16px}
.bc-visual{position:relative;z-index:2;margin-top:auto;pointer-events:none}
.bc-browser{background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:12px}
.bc-browser-bar{background:var(--bg3);padding:6px 10px;display:flex;gap:4px;border-bottom:1px solid var(--border)}
.bc-browser-bar span{width:6px;height:6px;border-radius:50%;background:var(--text3);opacity:.4}
.bc-browser-content{padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.bc-line{height:6px;background:var(--bc-soft);border-radius:3px;transition:width .6s}
.bc-cta{height:18px;width:70px;background:var(--bc-color);border-radius:4px;margin-top:4px;opacity:.7}
.bento-card:hover .bc-line:nth-child(1){width:85%!important}
.bento-card:hover .bc-line:nth-child(2){width:55%!important}
.bc-chart{height:50px;color:var(--bc-color)}
.bc-palette{display:flex;gap:6px}
.bc-palette span{flex:1;height:24px;border-radius:6px;transition:transform .3s}
.bento-card:hover .bc-palette span:nth-child(1){transform:translateY(-4px)}
.bento-card:hover .bc-palette span:nth-child(2){transform:translateY(-4px);transition-delay:.05s}
.bento-card:hover .bc-palette span:nth-child(3){transform:translateY(-4px);transition-delay:.1s}
.bento-card:hover .bc-palette span:nth-child(4){transform:translateY(-4px);transition-delay:.15s}
.bc-chat{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.bc-chat-msg{font-size:11px;padding:6px 12px;border-radius:12px;max-width:75%;line-height:1.4}
.bc-chat-msg.bot{background:var(--bg2);color:var(--text2);border-bottom-left-radius:4px;align-self:flex-start}
.bc-chat-msg.user{background:var(--bc-color);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.bc-chat-typing{display:flex;gap:3px;padding:8px 12px;background:var(--bg2);border-radius:12px;border-bottom-left-radius:4px;align-self:flex-start;width:fit-content}
.bc-chat-typing span{width:4px;height:4px;border-radius:50%;background:var(--text3);animation:chatTyping 1.4s ease-in-out infinite}
.bc-chat-typing span:nth-child(2){animation-delay:.15s}
.bc-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chatTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.bc-arrow{position:absolute;top:24px;right:24px;width:32px;height:32px;border-radius:50%;background:var(--bg2);color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all .4s cubic-bezier(.16,1,.3,1);z-index:3;opacity:.6}
.bento-card:hover .bc-arrow{background:var(--bc-color);color:#fff;opacity:1;transform:rotate(45deg)}
[data-theme="dark"] .bento-card{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .bento-card:hover{box-shadow:0 20px 40px -20px rgba(0,0,0,.5),0 0 40px -20px var(--bc-color)}
[data-theme="dark"] .bc-arrow{background:rgba(255,255,255,.05)}
[data-theme="dark"] .bc-browser{background:var(--bg2);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .bc-browser-bar{background:rgba(0,0,0,.2)}
@media(max-width:1024px){.services-bento{grid-template-columns:repeat(2,1fr)}.bento-card.featured{grid-column:span 2}}
@media(max-width:640px){.services-bento{grid-template-columns:1fr}.bento-card.featured{grid-column:span 1}}

/* ══════════════════════════════════════════
   CC3 — Creative & Content page
══════════════════════════════════════════ */

/* ── HERO ── */
.cc3-hero{background:#0C0C14;color:#fff;padding-bottom:0;overflow:hidden}
.cc3-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-top:100px;padding-bottom:64px}
.cc3-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--coral);margin-bottom:20px}
.cc3-hero-h{font-size:clamp(48px,6vw,80px);font-weight:900;line-height:1;letter-spacing:-2px;color:#fff;margin-bottom:24px}
.cc3-hero-coral{color:var(--coral);display:block}
.cc3-hero-sub{font-size:17px;color:rgba(255,255,255,.55);line-height:1.6;max-width:420px;margin-bottom:36px}
.cc3-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.cc3-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:8px;font-size:15px;font-weight:700;text-decoration:none;background:var(--coral);color:#fff;transition:background .2s,transform .2s}
.cc3-btn:hover{background:#c43b3a;transform:translateY(-1px)}
.cc3-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.cc3-btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* Hero side tiles */
.cc3-hero-right{display:flex;flex-direction:column;gap:12px}
.cc3-hs-tile{display:flex;flex-direction:column;gap:4px;padding:20px 24px;border-radius:12px;background:var(--tc,#333);text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.08);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.cc3-hs-tile::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.04);opacity:0;transition:opacity .25s}
.cc3-hs-tile:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.cc3-hs-tile:hover::before{opacity:1}
.cc3-hs-tile--wide{grid-column:1/-1}
.cc3-hs-label{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;opacity:.5;color:#fff}
.cc3-hs-name{font-size:20px;font-weight:800;letter-spacing:-.5px;color:#fff}
.cc3-hs-cred{font-size:12px;opacity:.45;color:#fff}

/* ── TICKER ── */
.cc3-ticker{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);background:#0C0C14;padding:12px 0;margin-top:4px}
.cc3-ticker-track{display:flex;gap:0;white-space:nowrap;animation:cc3tick 28s linear infinite}
.cc3-ticker-track span{display:inline-block;padding:0 24px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.cc3-ticker-track b{display:inline-block;color:var(--coral);font-size:10px;vertical-align:middle;opacity:.7}
@keyframes cc3tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── STATS ── */
.cc3-stats{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cc3-stats-row{display:flex;align-items:stretch;padding:40px 0}
.cc3-stat{flex:1;display:flex;flex-direction:column;gap:6px;padding:0 32px}
.cc3-stat:first-child{padding-left:0}
.cc3-stat-n{font-size:40px;font-weight:900;letter-spacing:-1.5px;line-height:1;color:var(--text)}
.cc3-stat-l{font-size:13px;color:var(--text2);line-height:1.4;max-width:160px}
.cc3-stat-div{width:1px;background:var(--border);align-self:stretch;margin:0 8px}

/* ── DISCIPLINES ── */
.cc3-disc-section{padding:80px 0}
.cc3-sec-head{margin-bottom:52px}
.cc3-disc-row{display:grid;grid-template-columns:64px 1fr 1.2fr;gap:32px 48px;align-items:start;padding:28px 0;border-bottom:1px solid var(--border)}
.cc3-disc-row:first-of-type{border-top:1px solid var(--border)}
.cc3-disc-num{font-size:13px;font-weight:700;letter-spacing:1px;color:var(--coral);padding-top:3px;opacity:.8}
.cc3-disc-title{font-size:18px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;color:var(--text)}
.cc3-disc-desc{font-size:14px;color:var(--text2);line-height:1.6;margin:0}
.cc3-disc-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.cc3-disc-items li{font-size:13px;color:var(--text2);padding-left:16px;position:relative;line-height:1.5}
.cc3-disc-items li::before{content:'→';position:absolute;left:0;color:var(--coral);font-size:11px;top:1px}

/* ── CASES ── */
.cc3-cases-section{padding:80px 0;background:var(--bg2)}
.cc3-case{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:64px 0;border-bottom:1px solid var(--border)}
.cc3-case:last-child{border-bottom:none}
.cc3-case--rev{direction:rtl}
.cc3-case--rev>*{direction:ltr}
.cc3-case-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
.cc3-case-h{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-1px;margin-bottom:8px;color:var(--text)}
.cc3-case-via{font-size:13px;color:var(--text3);margin-bottom:20px}
.cc3-case-desc{font-size:15px;color:var(--text2);line-height:1.7;margin-bottom:24px}
.cc3-case-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cc3-case-chips span{font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;background:var(--bg3,rgba(0,0,0,.05));color:var(--text2);border:1px solid var(--border)}
.cc3-case-kpi{display:flex;align-items:baseline;gap:12px}
.cc3-kpi-n{font-size:52px;font-weight:900;letter-spacing:-2px;line-height:1}
.cc3-kpi-l{font-size:13px;color:var(--text2);line-height:1.5}

/* Posters */
.cc3-case-poster{border-radius:16px;overflow:hidden;padding:48px 40px;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;position:relative;user-select:none}

.cc3-poster--mm{background:#CC0000}
.cc3-poster--mm .cc3-poster-main{font-size:clamp(40px,5vw,72px);font-weight:900;font-style:italic;color:#fff;line-height:.9;letter-spacing:-2px;text-transform:uppercase;margin:12px 0}
.cc3-poster--mm .cc3-poster-sup{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cc3-poster--mm .cc3-poster-sub{font-size:12px;color:rgba(255,255,255,.45);margin-top:16px;letter-spacing:.5px}

.cc3-poster--sb{background:#1C3D2E}
.cc3-poster-main--sb{font-size:clamp(38px,4.5vw,64px);font-weight:900;color:#C8D8BE;line-height:.95;letter-spacing:-1px;text-transform:uppercase;margin:12px 0}
.cc3-poster--sb .cc3-poster-sup{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(200,216,190,.45)}
.cc3-poster--sb .cc3-poster-sub{font-size:12px;color:rgba(200,216,190,.4);margin-top:16px;letter-spacing:.5px}

.cc3-poster--dj{background:#0E0E1A;position:relative;overflow:hidden}
.cc3-poster-main--dj{font-size:clamp(48px,6vw,88px);font-weight:900;color:#fff;line-height:.85;letter-spacing:-3px;text-transform:uppercase;margin:12px 0;position:relative;z-index:2}
.cc3-poster--dj .cc3-poster-sup{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);position:relative;z-index:2}
.cc3-poster--dj .cc3-poster-sub{font-size:12px;color:rgba(255,255,255,.3);margin-top:16px;letter-spacing:.5px;position:relative;z-index:2}
.cc3-poster-dj-code{position:absolute;bottom:-16px;right:-8px;font-size:clamp(80px,12vw,160px);font-weight:900;color:var(--coral);opacity:.25;line-height:1;letter-spacing:-4px;pointer-events:none;z-index:1}

/* ── PORTFOLIO ── */
.cc3-pf-section{padding:80px 0}
.cc3-pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.cc3-pf-card{border-radius:14px;padding:28px;background:var(--surface,var(--bg2));border:1px solid var(--border);border-top:3px solid var(--pc,var(--coral));transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.cc3-pf-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc)}
.cc3-pf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cc3-pf-top{margin-bottom:12px}
.cc3-pf-type{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--pc);opacity:.85}
.cc3-pf-client{font-size:18px;font-weight:800;letter-spacing:-.4px;margin-bottom:10px;color:var(--text)}
.cc3-pf-desc{font-size:13px;color:var(--text2);line-height:1.6;margin:0}

/* ── CLIENTS ── */
.cc3-clients{padding:40px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cc3-clients-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:16px}
.cc3-clients-row{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.cc3-client{font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap;opacity:.7}

/* ── WHY ── */
.cc3-why-section{padding:80px 0}
.cc3-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px}
.cc3-why-card{background:var(--surface,var(--bg2));border:1px solid var(--border);border-radius:14px;padding:32px;transition:box-shadow .25s,transform .25s}
.cc3-why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cc3-why-n{font-size:40px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin-bottom:20px}
.cc3-why-card h3{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:12px;color:var(--text)}
.cc3-why-card p{font-size:14px;color:var(--text2);line-height:1.6;margin:0}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .cc3-hero-grid{grid-template-columns:1fr;gap:48px}
  .cc3-hero-right{flex-direction:row;flex-wrap:wrap}
  .cc3-hs-tile{flex:1;min-width:180px}
  .cc3-case{grid-template-columns:1fr;gap:40px}
  .cc3-case--rev{direction:ltr}
  .cc3-pf-grid{grid-template-columns:repeat(2,1fr)}
  .cc3-why-grid{grid-template-columns:repeat(2,1fr)}
  .cc3-stats-row{flex-wrap:wrap;gap:32px}
  .cc3-stat{flex:0 0 calc(50% - 20px)}
  .cc3-stat-div{display:none}
}
@media(max-width:640px){
  .cc3-hero-h{font-size:40px}
  .cc3-hero-grid{padding-top:80px;padding-bottom:48px}
  .cc3-disc-row{grid-template-columns:40px 1fr;gap:16px}
  .cc3-disc-items{display:none}
  .cc3-case{gap:28px;padding:40px 0}
  .cc3-pf-grid{grid-template-columns:1fr}
  .cc3-why-grid{grid-template-columns:1fr}
  .cc3-poster--mm .cc3-poster-main,.cc3-poster-main--sb,.cc3-poster-main--dj{font-size:36px}
  .cc3-poster-dj-code{font-size:72px}
  .cc3-stats-row{flex-direction:column}
  .cc3-stat{flex:none;padding:0}
  .cc3-case-poster{min-height:260px;padding:32px 28px}
  .cc3-kpi-n{font-size:40px}
}
[data-theme="dark"] .cc3-stats{background:var(--surface)}
[data-theme="dark"] .cc3-cases-section{background:var(--surface)}
[data-theme="dark"] .cc3-pf-card,.cc3-why-card{background:rgba(255,255,255,.03)}
[data-theme="dark"] .cc3-case-chips span{background:rgba(255,255,255,.05)}

/* ===================================================
   GRATIS SCANS SECTIE
=================================================== */
.scans-section{padding:100px 0}
.scan-badge{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);border:1px solid rgba(16,185,129,.2);padding:5px 14px;border-radius:100px;font-size:12px;font-weight:700;color:var(--green);margin-bottom:16px;animation:scanPulse 2.5s ease-in-out infinite}
@keyframes scanPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.25)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}

/* Grid */
.scans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}

/* Card */
.scan-card{--sc-color:var(--accent);--sc-soft:var(--accent-soft);--sc-rgb:255,107,53;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;display:flex;flex-direction:column;position:relative}
.scan-card::after{content:'';position:absolute;inset:0;border-radius:var(--r2);box-shadow:0 0 0 2px var(--sc-color);opacity:0;transition:opacity .3s;pointer-events:none}
.scan-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px -16px rgba(var(--sc-rgb),.22)}
.scan-card:hover::after{opacity:.5}
.scan-card[data-color="accent"]{--sc-color:var(--accent);--sc-soft:var(--accent-soft);--sc-rgb:255,107,53}
.scan-card[data-color="purple"]{--sc-color:var(--purple);--sc-soft:var(--purple-soft);--sc-rgb:139,92,246}
.scan-card[data-color="green"]{--sc-color:var(--green);--sc-soft:var(--green-soft);--sc-rgb:16,185,129}
.scan-card[data-color="blue"]{--sc-color:var(--blue);--sc-soft:var(--blue-soft);--sc-rgb:59,130,246}
.scan-card[data-color="teal"]{--sc-color:var(--teal);--sc-soft:var(--teal-soft);--sc-rgb:14,165,233}
.scan-card[data-color="coral"]{--sc-color:var(--coral);--sc-soft:var(--coral-soft);--sc-rgb:226,75,74}

/* Visual zone — colored header */
.sc-visual-zone{height:160px;background:linear-gradient(135deg,rgba(var(--sc-rgb),.12) 0%,rgba(var(--sc-rgb),.04) 100%);border-bottom:1px solid rgba(var(--sc-rgb),.12);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.sc-visual-zone::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(var(--sc-rgb),.15),transparent 70%)}

/* Body */
.sc-body{padding:24px 24px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.sc-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--sc-color)}
.scan-card h3{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--text);line-height:1.2}
.scan-card p{font-size:13px;color:var(--text2);line-height:1.6;margin-top:2px}
.sc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px}
.sc-cta-link{font-size:13px;font-weight:700;color:var(--sc-color);display:flex;align-items:center;gap:5px;transition:gap .2s}
.scan-card:hover .sc-cta-link{gap:9px}
.sc-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--sc-soft);color:var(--sc-color)}

/* ── Website visual ── */
.scv-browser{background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.08);border-radius:8px;width:160px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.scv-browser-bar{background:rgba(0,0,0,.04);padding:6px 10px;display:flex;gap:4px;border-bottom:1px solid rgba(0,0,0,.06)}
.scv-browser-bar span{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.15)}
.scv-browser-body{padding:12px;display:flex;align-items:center;gap:10px}
.scv-score-ring{position:relative;width:44px;height:44px;flex-shrink:0}
.scv-score-ring svg{width:44px;height:44px}
.scv-ring-fill{stroke:var(--sc-color);stroke-dasharray:0 100;transition:stroke-dasharray 1.2s cubic-bezier(.16,1,.3,1) .3s}
.scan-card.visible .scv-ring-fill,.scan-card:hover .scv-ring-fill{stroke-dasharray:78 100}
.scv-score-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--sc-color)}
.scv-rows{flex:1;display:flex;flex-direction:column;gap:5px}
.scv-row{height:5px;border-radius:3px;background:var(--sc-soft)}

/* ── Automation flow visual ── */
.scv-flow{position:relative;width:180px;height:100px}
.scv-node{position:absolute;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);border:2px solid rgba(var(--sc-rgb),.3);display:flex;align-items:center;justify-content:center;color:var(--sc-color);box-shadow:0 2px 8px rgba(var(--sc-rgb),.2)}
.scv-node-center{width:40px;height:40px;left:70px;top:30px;background:var(--sc-color);color:#fff;border:none;z-index:2}
.scv-node-b1{left:10px;top:12px}
.scv-node-b2{left:10px;top:58px}
.scv-node-b3{left:138px;top:34px}
.scv-line{position:absolute;background:rgba(var(--sc-rgb),.2);height:2px;transform-origin:left center;z-index:1}
.scv-line-1{width:60px;left:26px;top:26px;transform:rotate(-18deg)}
.scv-line-2{width:60px;left:26px;top:72px;transform:rotate(18deg)}
.scv-line-3{width:50px;left:110px;top:50px;transform:rotate(0deg)}
.scv-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sc-color);z-index:3}
.scv-dot-1{animation:flowPath1 2s linear infinite}
.scv-dot-2{animation:flowPath2 2s linear infinite .6s}
.scv-dot-3{animation:flowPath3 2s linear infinite 1.2s}
@keyframes flowPath1{0%{left:26px;top:22px;opacity:0}10%{opacity:1}40%{left:72px;top:44px;opacity:1}50%,100%{left:72px;top:44px;opacity:0}}
@keyframes flowPath2{0%{left:26px;top:68px;opacity:0}10%{opacity:1}40%{left:72px;top:46px;opacity:1}50%,100%{left:72px;top:46px;opacity:0}}
@keyframes flowPath3{0%{left:110px;top:46px;opacity:0}10%{opacity:1}40%{left:150px;top:46px;opacity:1}50%,100%{left:150px;top:46px;opacity:0}}

/* ── SEO bar chart visual ── */
.scv-chart{display:flex;align-items:flex-end;gap:8px;height:110px;padding:12px 16px 0;position:relative;width:100%}
.scv-bar{flex:1;background:rgba(var(--sc-rgb),.15);border-radius:4px 4px 0 0;height:var(--h);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:4px;transition:height 1s cubic-bezier(.16,1,.3,1);position:relative}
.scv-bar span{font-size:8px;font-weight:700;color:rgba(var(--sc-rgb),.7);white-space:nowrap}
.scv-bar-hi{background:var(--sc-color) !important}
.scv-bar-hi span{color:#fff}
.scv-chart-label{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(var(--sc-rgb),.6);white-space:nowrap;font-weight:600}
.scan-card .scv-bar{height:8px}
.scan-card.visible .scv-bar,.scan-card:hover .scv-bar{height:var(--h)}

/* ── AI orbits visual ── */
.scv-ai{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center}
.scv-ai-center{width:44px;height:44px;border-radius:50%;background:var(--sc-color);display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;position:relative;box-shadow:0 0 20px rgba(var(--sc-rgb),.4)}
.scv-orbit{position:absolute;border-radius:50%;border:1px dashed rgba(var(--sc-rgb),.25)}
.scv-orbit-1{width:70px;height:70px;animation:orbitSpin 4s linear infinite}
.scv-orbit-2{width:95px;height:95px;animation:orbitSpin 7s linear infinite reverse}
.scv-orbit-3{width:122px;height:122px;animation:orbitSpin 10s linear infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.scv-orb-dot{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--sc-color)}
.scv-ai-tag{position:absolute;font-size:9px;font-weight:700;color:var(--sc-color);background:rgba(var(--sc-rgb),.1);padding:2px 7px;border-radius:100px;white-space:nowrap}
.scv-ai-tag-1{top:8px;right:0}
.scv-ai-tag-2{bottom:16px;right:4px}
.scv-ai-tag-3{bottom:4px;left:4px}

/* ── Marketing funnel visual ── */
.scv-funnel{display:flex;flex-direction:column;gap:4px;width:200px;padding:8px 16px}
.scv-funnel-step{display:flex;align-items:center;justify-content:space-between;width:var(--w);margin:0 auto;background:rgba(var(--sc-rgb),.12);border-radius:4px;padding:4px 10px;transition:width 1s cubic-bezier(.16,1,.3,1)}
.scv-funnel-step span{font-size:9px;font-weight:600;color:rgba(var(--sc-rgb),.8)}
.scv-funnel-step strong{font-size:10px;font-weight:800;color:var(--sc-color)}
.scv-funnel-bottom{background:var(--sc-color) !important}
.scv-funnel-bottom span,.scv-funnel-bottom strong{color:#fff !important}
.scan-card .scv-funnel-step{width:30%}
.scan-card.visible .scv-funnel-step,.scan-card:hover .scv-funnel-step{width:var(--w)}

/* ── Brand visual ── */
.scv-brand{display:flex;flex-direction:column;gap:12px;width:190px}
.scv-palette{display:flex;gap:6px}
.scv-swatch{flex:1;height:28px;border-radius:6px;transition:transform .3s,box-shadow .3s}
.scan-card:hover .scv-swatch:nth-child(1){transform:translateY(-5px);box-shadow:0 4px 10px rgba(0,0,0,.15);transition-delay:.0s}
.scan-card:hover .scv-swatch:nth-child(2){transform:translateY(-5px);box-shadow:0 4px 10px rgba(0,0,0,.15);transition-delay:.05s}
.scan-card:hover .scv-swatch:nth-child(3){transform:translateY(-5px);box-shadow:0 4px 10px rgba(0,0,0,.15);transition-delay:.1s}
.scan-card:hover .scv-swatch:nth-child(4){transform:translateY(-5px);box-shadow:0 4px 10px rgba(0,0,0,.15);transition-delay:.15s}
.scan-card:hover .scv-swatch:nth-child(5){transform:translateY(-5px);box-shadow:0 4px 10px rgba(0,0,0,.15);transition-delay:.2s}
.scv-bs-row{display:flex;align-items:center;gap:8px}
.scv-bs-row span{font-size:9px;font-weight:600;color:rgba(var(--sc-rgb),.8);width:76px;flex-shrink:0}
.scv-bs-bar{flex:1;height:5px;background:rgba(var(--sc-rgb),.12);border-radius:3px;overflow:hidden}
.scv-bs-fill{height:100%;background:var(--sc-color);border-radius:3px;width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.scan-card.visible .scv-bs-fill,.scan-card:hover .scv-bs-fill{width:var(--p)}
.scan-card:hover .scv-bs-fill:nth-child(1){transition-delay:.0s}

/* Trust strip */
.scans-trust{display:flex;align-items:center;justify-content:center;gap:0;margin-top:48px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:22px 32px;max-width:680px;margin-inline:auto}
.st-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;text-align:center}
.st-num{font-size:24px;font-weight:800;letter-spacing:-1px;color:var(--green)}
.st-label{font-size:11px;color:var(--text3);font-weight:500}
.st-divider{width:1px;height:40px;background:var(--border)}

/* Modal */
.scan-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:20px}
.scan-modal.active{display:flex}
.scan-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.scan-modal-content{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--r3);padding:40px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.15)}
.scan-modal-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:var(--bg2);border:none;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .2s}
.scan-modal-close:hover{background:var(--bg3)}
.scan-modal-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:8px}
.scan-modal-header h3{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.scan-modal-header p{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:24px}
.sf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.sf-field{margin-bottom:14px}
.sf-field label{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:5px}
.sf-field input,.sf-field select,.sf-field textarea{width:100%;padding:11px 14px;border:1px solid var(--border2);border-radius:var(--r);font-family:inherit;font-size:14px;background:var(--bg);color:var(--text);outline:none;transition:border-color .2s}
.sf-field input:focus,.sf-field select:focus,.sf-field textarea:focus{border-color:var(--accent)}
.sf-privacy{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px}
.sf-checkbox{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12px;color:var(--text2);line-height:1.5}
.sf-checkbox input{width:15px;height:15px;flex-shrink:0;margin-top:1px;accent-color:var(--accent)}
.sf-checkbox a{color:var(--accent)}
.sf-submit{width:100%;background:var(--accent);color:#fff;padding:14px;border-radius:100px;font-size:15px;font-weight:700;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.sf-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,.3)}
.sf-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.sf-trust{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.sf-trust span{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:4px}
.scan-success{text-align:center;padding:24px 0}
.ss-icon{width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.scan-success h3{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
.scan-success p{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:24px}

/* Responsive */
@media(max-width:1024px){.scans-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.scans-grid{grid-template-columns:1fr}.scans-trust{flex-direction:column;gap:16px;padding:20px}.st-divider{width:40px;height:1px}.sf-row{grid-template-columns:1fr}.scan-modal-content{padding:28px 20px}}

/* Dark mode */
[data-theme="dark"] .scan-card{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .scan-card:hover{box-shadow:0 20px 48px -16px rgba(var(--sc-rgb),.35)}
[data-theme="dark"] .sc-visual-zone{background:linear-gradient(135deg,rgba(var(--sc-rgb),.15) 0%,rgba(var(--sc-rgb),.05) 100%)}
[data-theme="dark"] .scans-trust{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .scan-modal-content{background:var(--surface);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .sf-field input,[data-theme="dark"] .sf-field select,[data-theme="dark"] .sf-field textarea{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .scv-browser{background:rgba(255,255,255,.08)}
[data-theme="dark"] .scan-modal-close{background:rgba(255,255,255,.07)}

/* ===================================================
   SCAN WIZARD PAGE
=================================================== */
.scan-wizard-page{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}

/* Progress bar */
.wizard-progress{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--white);border-bottom:1px solid var(--border);height:56px}
.wiz-progress-inner{max-width:760px;margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:20px}
.wiz-logo{font-weight:800;font-size:17px;letter-spacing:-.5px;color:var(--text);flex-shrink:0;text-decoration:none}
.wiz-progress-bar{flex:1;height:4px;background:var(--bg3);border-radius:100px;overflow:hidden}
.wiz-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#FF8F6B);border-radius:100px;transition:width .5s cubic-bezier(.16,1,.3,1)}
.wiz-progress-label{font-size:12px;font-weight:700;color:var(--text2);flex-shrink:0;min-width:36px;text-align:right}

/* Wrapper */
.wizard-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 24px 48px;position:relative;overflow:hidden}
#scanWizardForm{width:100%;max-width:680px;position:relative}

/* Steps */
.wizard-step{display:none;opacity:0;transform:translateX(40px);transition:opacity .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.wizard-step.active{display:block;opacity:1;transform:translateX(0)}
.wizard-step.ws-exit-left{opacity:0;transform:translateX(-40px);pointer-events:none}
.wizard-step.ws-exit-right{opacity:0;transform:translateX(40px);pointer-events:none}
.wizard-step.ws-enter-left{transform:translateX(-40px);opacity:0}
.wizard-step.ws-enter-right{transform:translateX(40px);opacity:0}

/* Intro step */
.ws-intro-wrap{max-width:580px;margin:0 auto;text-align:center}
.ws-scan-icon{width:80px;height:80px;border-radius:24px;background:rgba(var(--accent-rgb,255,107,53),.1);color:var(--scan-color,var(--accent));display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.ws-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:12px}
.ws-h1{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--text);margin-bottom:16px}
.ws-intro-text{font-size:16px;color:var(--text2);line-height:1.7;margin-bottom:28px;max-width:480px;margin-inline:auto}
.ws-highlights{list-style:none;padding:0;margin:0 auto 24px;display:flex;flex-direction:column;gap:10px;max-width:420px;text-align:left}
.ws-highlights li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text2);line-height:1.5}
.ws-highlights li svg{color:var(--green);flex-shrink:0;margin-top:1px}
.ws-meta-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:32px}
.ws-duration{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:5px}
.ws-free-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--green-soft);color:var(--green)}

/* Question steps */
.ws-step-header{margin-bottom:32px}
.ws-step-counter{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text3);margin-bottom:10px}
.ws-h2{font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-1px;line-height:1.15;color:var(--text);margin-bottom:8px}
.ws-step-desc{font-size:15px;color:var(--text2);line-height:1.65}
.ws-req{color:var(--accent)}

/* Fields */
.ws-fields{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}
.ws-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ws-field{display:flex;flex-direction:column;gap:6px}
.ws-label{font-size:13px;font-weight:700;color:var(--text)}
.ws-hint{font-size:12px;color:var(--text3);margin-top:-2px}
.ws-field input[type="text"],
.ws-field input[type="email"],
.ws-field input[type="url"],
.ws-field input[type="tel"],
.ws-field input[type="number"],
.ws-field select,
.ws-field textarea{padding:12px 16px;border:1.5px solid var(--border2);border-radius:var(--r);font-family:inherit;font-size:15px;background:var(--white);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.ws-field input:focus,.ws-field select:focus,.ws-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,53,.1)}
.ws-field input.ws-error,.ws-field select.ws-error,.ws-field textarea.ws-error{border-color:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.08)}
.ws-field--options.ws-group-error .ws-options,.ws-field--options.ws-group-error .ws-scale-options{border:1.5px solid #EF4444;border-radius:var(--r);padding:4px}

/* Options (radio / checkbox) */
.ws-options{display:flex;flex-direction:column;gap:8px}
.ws-options--multi .ws-option{}
.ws-option{cursor:pointer}
.ws-option input{position:absolute;opacity:0;pointer-events:none}
.ws-option-box{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1.5px solid var(--border);border-radius:12px;background:var(--white);transition:border-color .15s,background .15s,box-shadow .15s;font-size:14px;color:var(--text2)}
.ws-option:hover .ws-option-box{border-color:var(--accent);background:var(--accent-soft)}
.ws-option.selected .ws-option-box{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.ws-option-check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s;color:transparent}
.ws-option.selected .ws-option-check{background:var(--accent);border-color:var(--accent);color:#fff}

/* Scale */
.ws-scale{display:flex;flex-direction:column;gap:8px}
.ws-scale-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text3)}
.ws-scale-options{display:flex;gap:6px}
.ws-scale-item{cursor:pointer;flex:1}
.ws-scale-item input{position:absolute;opacity:0;pointer-events:none}
.ws-scale-item span{display:flex;align-items:center;justify-content:center;height:44px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-weight:600;color:var(--text2);background:var(--white);transition:all .15s}
.ws-scale-item:hover span{border-color:var(--accent);color:var(--accent)}
.ws-scale-item.selected span{background:var(--accent);border-color:var(--accent);color:#fff}

/* Privacy checkbox */
.ws-checkbox-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:var(--text2);line-height:1.5}
.ws-checkbox-label input{width:16px;height:16px;flex-shrink:0;margin-top:1px;accent-color:var(--accent)}
.ws-checkbox-label a{color:var(--accent)}

/* Navigation */
.ws-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.ws-btn-primary{background:var(--accent);color:#fff;padding:14px 32px;border-radius:100px;font-weight:700;font-size:15px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s;text-decoration:none}
.ws-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,.3);color:#fff}
.ws-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.ws-btn-back{background:none;border:1.5px solid var(--border2);color:var(--text2);padding:12px 24px;border-radius:100px;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s}
.ws-btn-back:hover{border-color:var(--text2);color:var(--text)}

/* Trust row */
.ws-trust-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.ws-trust-row span{font-size:11px;color:var(--text3)}

/* Success step */
.wizard-step--success{text-align:center;padding:20px 0}
.ws-success-icon{width:80px;height:80px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}

/* Responsive */
@media(max-width:640px){
  .wiz-logo{display:none}
  .ws-row{grid-template-columns:1fr}
  .ws-scale-options{gap:4px}
  .ws-scale-item span{height:38px;font-size:13px;border-radius:8px}
  .ws-btn-primary{padding:13px 24px}
}

/* Dark mode */
[data-theme="dark"] .scan-wizard-page{background:var(--bg)}
[data-theme="dark"] .wizard-progress{background:var(--surface);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .ws-field input,[data-theme="dark"] .ws-field select,[data-theme="dark"] .ws-field textarea{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--text)}
[data-theme="dark"] .ws-option-box{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .ws-option:hover .ws-option-box,[data-theme="dark"] .ws-option.selected .ws-option-box{background:rgba(255,107,53,.12)}
[data-theme="dark"] .ws-scale-item span{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}

/* ── COOKIE CONSENT ── */
#wld-cookie{position:fixed;bottom:0;left:0;right:0;z-index:9999;padding:0 16px 16px;transform:translateY(110%);transition:transform .4s cubic-bezier(.16,1,.3,1);pointer-events:none}
#wld-cookie.wld-cookie--visible{transform:translateY(0);pointer-events:auto}
.wld-cookie-inner{max-width:900px;margin:0 auto;background:#1A1A1A;color:#fff;border-radius:16px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 8px 40px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.wld-cookie-text{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.wld-cookie-icon{flex-shrink:0;color:var(--accent);opacity:.9}
.wld-cookie-text p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.5;margin:0}
.wld-cookie-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.wld-cookie-text a:hover{opacity:.8}
.wld-cookie-actions{display:flex;gap:8px;flex-shrink:0}
.wld-cookie-btn{padding:9px 18px;border-radius:100px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:background .2s,opacity .2s;white-space:nowrap;font-family:inherit}
.wld-cookie-btn--ghost{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.wld-cookie-btn--ghost:hover{background:rgba(255,255,255,.14)}
.wld-cookie-btn--accept{background:var(--accent);color:#fff}
.wld-cookie-btn--accept:hover{opacity:.88}
@media(max-width:640px){.wld-cookie-inner{flex-direction:column;align-items:stretch;gap:14px}.wld-cookie-actions{justify-content:stretch}.wld-cookie-btn{flex:1;text-align:center}}

/* ══════════════════════════════════════════════
   OVER ONS PAGE — editorial redesign
   ══════════════════════════════════════════════ */

/* ── Split hero ── */
.oo-hero{display:grid;grid-template-columns:1fr 1fr;min-height:100dvh}
.oo-hero-half{display:flex;flex-direction:column;justify-content:flex-end;padding:100px 80px 80px}
.oo-hero-half--dark{background:#111111}
.oo-hero-half--light{background:var(--bg)}
.oo-ht-dark{font-size:clamp(52px,6.5vw,96px);font-weight:800;color:#fff;letter-spacing:-3px;line-height:1;margin:16px 0 0}
.oo-ht-light{margin:0 0 28px}
.oo-ht-light em{font-style:italic;font-weight:800;font-size:clamp(52px,6.5vw,96px);color:var(--accent);letter-spacing:-3px;line-height:1;display:block}
.oo-hero-sub{font-size:17px;color:var(--text2);line-height:1.75;max-width:380px}
.oo-hero-scroll{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:56px}

/* ── Stats band (dark, full bleed) ── */
.oo-stats-band{background:#111111;border-top:1px solid rgba(255,255,255,.06)}
.oo-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto;padding:0 32px}
.oo-sb-stat{padding:52px 32px;border-right:1px solid rgba(255,255,255,.06);text-align:center}
.oo-sb-stat:last-child{border-right:0}
.oo-sb-num{font-size:clamp(44px,5vw,72px);font-weight:800;color:#fff;display:block;line-height:1;margin-bottom:10px;letter-spacing:-2px}
.oo-sb-label{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* ── Naam cards (full bleed, edge-to-edge) ── */
.oo-name-grid{display:grid;grid-template-columns:1fr 1fr}
.oo-name-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 72px 80px;min-height:580px}
.oo-name-card--dark{background:#1C1C1E}
.oo-name-card--warm{background:var(--bg2)}
.oo-nc-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:24px}
.oo-name-card--warm .oo-nc-label{color:var(--accent)}
.oo-nc-title{font-size:clamp(36px,4vw,58px);font-weight:800;letter-spacing:-1.5px;line-height:1.05;color:#fff;margin-bottom:28px}
.oo-nc-title em{font-style:italic;color:var(--accent);font-weight:800}
.oo-name-card--warm .oo-nc-title{color:var(--text)}
.oo-name-card p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.5);max-width:440px;position:relative;z-index:1}
.oo-name-card--warm p{color:var(--text2)}
.oo-nc-ghost{font-size:clamp(140px,20vw,260px);font-weight:800;opacity:.04;position:absolute;bottom:-32px;right:-8px;line-height:1;pointer-events:none;user-select:none;color:#fff;letter-spacing:-8px}
.oo-name-card--warm .oo-nc-ghost{color:var(--accent);opacity:.06}

/* ── Manifesto ── */
.oo-manifesto{padding:120px 0;border-bottom:1px solid var(--border)}
.oo-mf-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start}
.oo-mf-left{position:sticky;top:120px}
.oo-mf-pull{font-style:italic;font-weight:700;font-size:clamp(22px,2.5vw,32px);color:var(--text);line-height:1.35;margin-top:16px;letter-spacing:-.5px}
.oo-mf-right{display:flex;flex-direction:column;gap:20px}
.oo-mf-lead{font-size:20px;font-weight:500;color:var(--text);line-height:1.65}
.oo-mf-right p{font-size:17px;color:var(--text2);line-height:1.8}

/* ── Bureaus ── */
.oo-bureaus{padding:100px 0}
.oo-bureaus-inner{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.oo-bureaus-left{position:sticky;top:120px}
.oo-bureaus-title{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-1px;line-height:1.1;margin:12px 0 16px}
.oo-bureaus-sub{font-size:16px;color:var(--text2);line-height:1.7}
.oo-bureaus-right{display:flex;flex-direction:column;gap:40px}
.oo-bureau-tags{display:flex;flex-wrap:wrap;gap:10px}
.oo-bureau-tag{padding:10px 20px;border-radius:100px;border:1.5px solid var(--border2);font-size:14px;font-weight:500;color:var(--text2);background:var(--white);transition:border-color .2s,color .2s,background .2s;cursor:default}
.oo-bureau-tag:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.oo-brands-strip{border-top:1px solid var(--border);padding-top:32px}
.oo-brands-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);margin-bottom:20px;display:block}
.oo-brand-list{display:flex;flex-wrap:wrap;gap:12px 28px}
.oo-brand-list span{font-size:15px;color:var(--text3);font-weight:400}

/* ── Disciplines ── */
.oo-disciplines{padding:100px 0;background:var(--bg2)}
.oo-disc-hd{margin-bottom:56px}
.oo-disc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.oo-disc-card{background:var(--white);border-radius:var(--r2);padding:28px 22px 32px;display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--dc,var(--accent));transition:transform .22s,box-shadow .22s}
.oo-disc-card:hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(0,0,0,.1)}
.oo-dc-top{display:flex;justify-content:space-between;align-items:flex-start}
.oo-dc-icon{width:44px;height:44px;border-radius:12px;background:var(--ds,var(--accent-soft));color:var(--dc,var(--accent));display:flex;align-items:center;justify-content:center}
.oo-dc-num{font-size:12px;font-weight:800;color:var(--bg3);letter-spacing:.5px;margin-top:4px}
.oo-dc-title{font-size:17px;font-weight:800;letter-spacing:-.3px;margin:0}
.oo-dc-desc{font-size:13px;color:var(--text2);line-height:1.65;flex:1;margin:0}
.oo-dc-tags{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0;margin:0}
.oo-dc-tags li{font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;background:var(--ds,var(--accent-soft));color:var(--dc,var(--accent))}

/* ── Werkwijze (editorial numbered list) ── */
.oo-werkwijze{padding:100px 0}
.oo-ww-hd{margin-bottom:0}
.oo-ww-title{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-top:12px}
.oo-ww-title em{font-style:italic;font-weight:800;color:var(--accent)}
.oo-ww-list{margin-top:64px}
.oo-ww-item{display:grid;grid-template-columns:96px 1fr auto;gap:40px;align-items:center;padding:40px 0;border-top:1px solid var(--border);cursor:default;transition:border-color .2s}
.oo-ww-item:last-child{border-bottom:1px solid var(--border)}
.oo-ww-item:hover{border-color:var(--accent)}
.oo-ww-num{font-size:72px;font-weight:800;color:var(--bg3);letter-spacing:-4px;line-height:1;transition:color .25s}
.oo-ww-item:hover .oo-ww-num{color:var(--accent)}
.oo-ww-item-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:8px}
.oo-ww-body p{font-size:15px;color:var(--text2);line-height:1.7;max-width:560px}
.oo-ww-arrow{color:var(--border2);flex-shrink:0;transition:color .2s,transform .2s}
.oo-ww-item:hover .oo-ww-arrow{color:var(--accent);transform:translate(4px,-4px)}

/* ── Statement ── */
.oo-statement{background:#111111;padding:128px 0;text-align:center}
.oo-sq{font-style:italic;font-weight:800;font-size:clamp(30px,5vw,68px);color:#fff;line-height:1.2;max-width:900px;margin:0 auto 32px;display:block;letter-spacing:-2px}
.oo-sq-mark{color:var(--accent);font-size:1.1em;line-height:.5;vertical-align:-.15em}
.oo-sq-sub{font-size:17px;color:rgba(255,255,255,.4);line-height:1.75;max-width:520px;margin:0 auto}

/* ── Responsive ── */
@media(max-width:1280px){
  .oo-disc-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .oo-hero{grid-template-columns:1fr}
  .oo-hero-half{padding:80px 48px}
  .oo-hero-half--dark{min-height:55dvh;padding-bottom:56px}
  .oo-hero-scroll{display:none}
  .oo-name-grid{grid-template-columns:1fr}
  .oo-name-card{min-height:400px;padding:60px 48px}
  .oo-mf-grid{grid-template-columns:1fr;gap:48px}
  .oo-mf-left{position:static}
  .oo-bureaus-inner{grid-template-columns:1fr;gap:48px}
  .oo-bureaus-left{position:static}
  .oo-ww-item{grid-template-columns:80px 1fr}
  .oo-ww-arrow{display:none}
}
@media(max-width:768px){
  .oo-hero-half{padding:64px 32px}
  .oo-stats-inner{grid-template-columns:repeat(2,1fr);padding:0 24px}
  .oo-sb-stat{padding:40px 20px}
  .oo-disc-grid{grid-template-columns:repeat(2,1fr)}
  .oo-name-card{min-height:340px;padding:48px 36px}
  .oo-ww-num{font-size:52px;letter-spacing:-2px}
  .oo-ww-item{gap:24px}
}
@media(max-width:480px){
  .oo-hero-half{padding:56px 24px}
  .oo-disc-grid{grid-template-columns:1fr}
  .oo-stats-inner{grid-template-columns:repeat(2,1fr);padding:0 16px}
  .oo-ww-item{grid-template-columns:56px 1fr;gap:16px}
  .oo-ww-num{font-size:40px}
  .oo-statement{padding:88px 0}
}

/* ═══════════════════════════════════════════════════════════
   WELDAY (licht) & WELNIGHT (donker) — sectiethema's
   ──────────────────────────────────────────────────────────
   Welday:  crème achtergronden + circuit/zon-patronen
   Welnight: bestaande donkere achtergronden + 3D animaties
═══════════════════════════════════════════════════════════ */

/* ── Decoratieve elementen: basis ─────────────────────── */
.hp-deco-sun,.hp-deco-circuit,.hp-deco-circuit-dark,.hp-deco-grid{
  position:absolute;pointer-events:none;z-index:0;transition:opacity .5s
}
/* Zon/statische circuit alleen in lichtmodus (niet meer nodig in Welday 3D) */
.hp-deco-sun,.hp-deco-circuit{display:none}

/* ── Welnight: alle homepage-secties transparant → sterren zichtbaar ── */
[data-theme="dark"] .hp-hero,
[data-theme="dark"] .hp-why,
[data-theme="dark"] .hp-about-editorial,
[data-theme="dark"] .hp-cta-final,
[data-theme="dark"] .hp-credibility-wrap,
[data-theme="dark"] .logo-slider-section,
[data-theme="dark"] .hp-cta-glow{background:transparent!important}

/* Circuit-dark: zichtbaar in BEIDE modi */
.hp-deco-circuit-dark{opacity:1}
.hp-deco-grid{opacity:0}
[data-theme="dark"] .hp-deco-grid{opacity:1}

/* Welday: oranje grid + sterkere perspectief via transform */
html:not([data-theme="dark"]) .hp-deco-circuit-dark{
  filter:none;
}
html:not([data-theme="dark"]) .hp-deco-circuit-dark g line{
  stroke:rgba(255,107,53,.1)!important
}
html:not([data-theme="dark"]) .hp-flow-line{
  stroke-opacity:.7!important
}
/* Meer 3D diepte in lichtmodus via perspective transform op grid-lijnen */
html:not([data-theme="dark"]) .hp-deco-circuit-dark{
  transform-origin:bottom center;
  transform:perspective(600px) rotateX(12deg);
}

/* Toggle icon mag niet groter zijn dan de knop */
.toggle-sun img,.toggle-moon img{width:60px;height:60px;object-fit:contain}

/* ── WELDAY: lichtmodus kleurcorrecties ───────────────── */
/* Hero */
html:not([data-theme="dark"]) .hp-hero{background:#FAF9F7}
html:not([data-theme="dark"]) .hp-eyebrow{color:rgba(0,0,0,.5);background:rgba(255,107,53,.06);border-color:rgba(255,107,53,.15)}
html:not([data-theme="dark"]) .hp-h1{color:#1A1A1A}
html:not([data-theme="dark"]) .hp-sub{color:rgba(0,0,0,.5)}
html:not([data-theme="dark"]) .hp-btn-ghost{color:rgba(0,0,0,.45);border-color:rgba(0,0,0,.14)}
html:not([data-theme="dark"]) .hp-btn-ghost:hover{background:rgba(0,0,0,.04);color:rgba(0,0,0,.7)}
html:not([data-theme="dark"]) .hp-trust{color:rgba(0,0,0,.35)}
html:not([data-theme="dark"]) .hp-trust-dot{background:var(--accent)}
html:not([data-theme="dark"]) .hp-hero-strip{background:rgba(0,0,0,.025);border-top-color:rgba(0,0,0,.06)}
html:not([data-theme="dark"]) .hp-hero-strip-inner span{color:rgba(0,0,0,.28)}
html:not([data-theme="dark"]) .hp-strip-sep{background:rgba(0,0,0,.1)}
/* Waarom Welday */
html:not([data-theme="dark"]) .hp-why{background:#F2F0ED}
html:not([data-theme="dark"]) .hp-why-top{border-bottom-color:rgba(0,0,0,.08)}
html:not([data-theme="dark"]) .hp-why-header{border-bottom:none}
html:not([data-theme="dark"]) .hp-chaos-badge--l{color:rgba(220,38,38,.7);background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.18)}
html:not([data-theme="dark"]) .hp-chaos-badge--r{color:rgba(5,150,105,.7);background:rgba(5,150,105,.06);border-color:rgba(5,150,105,.18)}
html:not([data-theme="dark"]) .hp-why-icon{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:rgba(0,0,0,.4)}
html:not([data-theme="dark"]) .hp-why-item:hover .hp-why-icon{background:rgba(255,107,53,.06);border-color:rgba(255,107,53,.18);color:#FF6B35}
html:not([data-theme="dark"]) .hp-why-label{color:rgba(0,0,0,.3)}
html:not([data-theme="dark"]) .hp-why-lead{color:#1A1A1A}
html:not([data-theme="dark"]) .hp-why-item{border-bottom-color:rgba(0,0,0,.07)}
html:not([data-theme="dark"]) .hp-why-item:hover{border-bottom-color:rgba(0,0,0,.18)}
html:not([data-theme="dark"]) .hp-why-num{color:rgba(0,0,0,.12)}
html:not([data-theme="dark"]) .hp-why-problem{color:rgba(0,0,0,.35)}
html:not([data-theme="dark"]) .hp-why-answer{color:#1A1A1A}
html:not([data-theme="dark"]) .hp-why-footer{border-top-color:rgba(0,0,0,.08)}
html:not([data-theme="dark"]) .hp-why-footer-label{color:rgba(0,0,0,.3)}
html:not([data-theme="dark"]) .hp-why-footer-pay{color:#1A1A1A}
/* Over ons editorial */
html:not([data-theme="dark"]) .hp-about-editorial{background:#FAF9F7}
html:not([data-theme="dark"]) .hp-ae-pull{color:#1A1A1A}
html:not([data-theme="dark"]) .hp-ae-body{color:rgba(0,0,0,.5)}
html:not([data-theme="dark"]) .hp-ae-bureaus{border-top-color:rgba(0,0,0,.08)}
html:not([data-theme="dark"]) .hp-ae-bureaus span{color:rgba(0,0,0,.22)}
html:not([data-theme="dark"]) .hp-ae-ghost{color:rgba(255,107,53,.07)}
/* CTA */
html:not([data-theme="dark"]) .hp-cta-final{background:#F2F0ED}
html:not([data-theme="dark"]) .hp-cta-glow{background:radial-gradient(circle,rgba(255,107,53,.14),transparent 60%)}
html:not([data-theme="dark"]) .hp-cta-label{color:rgba(0,0,0,.3)}
html:not([data-theme="dark"]) .hp-cta-title{color:#1A1A1A}
html:not([data-theme="dark"]) .hp-cta-sub{color:rgba(0,0,0,.5)}
html:not([data-theme="dark"]) .hp-cta-trust span{color:rgba(0,0,0,.4)}
html:not([data-theme="dark"]) .hp-cta-trust-dot{background:rgba(0,0,0,.15)}
html:not([data-theme="dark"]) .hp-cta-card{background:rgba(255,255,255,.85);border-color:rgba(255,107,53,.14)}
html:not([data-theme="dark"]) .hp-cta-card-head{color:rgba(0,0,0,.4);border-bottom-color:rgba(0,0,0,.06)}
html:not([data-theme="dark"]) .hp-cta-step{color:#1A1A1A}
html:not([data-theme="dark"]) .hp-cta-step-label{color:#1A1A1A}
html:not([data-theme="dark"]) .hp-cta-step-desc{color:rgba(0,0,0,.5)}
html:not([data-theme="dark"]) .hp-cta-card-foot{color:rgba(0,0,0,.3);border-top-color:rgba(0,0,0,.06)}
html:not([data-theme="dark"]) .hp-cta-ghost{color:rgba(255,107,53,.06)}

/* ── WELNIGHT: dark 3D glow ───────────────────────────── */

/* Circuit stroom-animatie (Welnight) */
@keyframes circuit-flow{
  0%{stroke-dashoffset:700;opacity:0}
  6%{opacity:.9}
  88%{opacity:.9}
  100%{stroke-dashoffset:0;opacity:0}
}
[data-theme="dark"] .hp-flow-line{stroke-dasharray:700;stroke-dashoffset:700;animation:circuit-flow 5.5s ease-in-out infinite}
[data-theme="dark"] .hp-flow-line:nth-child(2){animation-delay:1.4s}
[data-theme="dark"] .hp-flow-line:nth-child(3){animation-delay:2.8s}
[data-theme="dark"] .hp-flow-line:nth-child(4){animation-delay:0.7s}
[data-theme="dark"] .hp-flow-line:nth-child(5){animation-delay:4.2s}

/* ── Node graph in lichtmodus ─────────────────────────── */
html:not([data-theme="dark"]) #heroNodeGraph line,
html:not([data-theme="dark"]) #heroNodeGraph path{stroke:rgba(0,0,0,.08)!important}
html:not([data-theme="dark"]) .hero-nodes-hint{color:rgba(0,0,0,.3);border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.03)}

/* ═══════════════════════════════════════════════════════
   BV-LAYOUT — BijVoorkeur case (Welday design system)
═══════════════════════════════════════════════════════ */
.bv-layout{background:var(--bg);color:var(--dark)}
/* Hero */
.bv-hero{padding:80px 0 48px}
.bv-hero-inner{max-width:800px}
.bv-h1{font-size:clamp(32px,4.5vw,60px);font-weight:800;letter-spacing:-2px;line-height:1.1;margin:0 0 20px;color:var(--dark)}
.bv-sub{font-size:17px;color:var(--text2);line-height:1.75;max-width:640px;margin:0 0 28px}
.bv-hero-chips{display:flex;flex-wrap:wrap;gap:8px}
/* Meta strip */
.bv-meta-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:16px;overflow:hidden;margin:40px 0}
.bv-meta-item{background:var(--white,#fff);padding:24px 20px;text-align:center}
.bv-meta-label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.bv-meta-value{font-size:22px;font-weight:800;letter-spacing:-1px;color:var(--dark)}
/* Sections */
.bv-section{padding:64px 0}
.bv-section-sub{font-size:17px;color:var(--text2);line-height:1.75;max-width:640px;margin:16px auto 0;text-align:center}
/* Before/after slider */
.bv-slider-wrapper{position:relative;max-width:1040px;margin:32px auto 0;border-radius:16px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;user-select:none;cursor:col-resize;box-shadow:var(--shadow-xl,0 24px 60px rgba(0,0,0,.1))}
.bv-slider-wrapper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.bv-slider-after{clip-path:inset(0 0 0 0)}
.bv-slider-before{clip-path:inset(0 50% 0 0)}
.bv-slider-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:10;transform:translateX(-50%);pointer-events:none}
.bv-slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--accent);z-index:11;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.bv-slider-handle svg{width:20px;height:20px}
.bv-slider-tag{position:absolute;top:16px;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;z-index:12;pointer-events:none}
.bv-tag-before{left:16px;background:rgba(26,26,26,.7);color:#fff}
.bv-tag-after{right:16px;background:var(--accent);color:#fff}
/* Timeline */
.bv-timeline{position:relative;padding-left:32px;margin:40px auto 0;max-width:640px}
.bv-timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--border);border-radius:1px}
.bv-tl-item{position:relative;padding-bottom:32px}
.bv-tl-item:last-child{padding-bottom:0}
.bv-tl-dot{position:absolute;left:-32px;top:6px;width:16px;height:16px;border-radius:50%;background:rgba(255,107,53,.1);border:2px solid var(--accent)}
.bv-tl-final .bv-tl-dot{background:rgba(29,158,117,.12);border-color:#1D9E75}
.bv-tl-week{font-size:11px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.bv-tl-final .bv-tl-week{color:#1D9E75}
.bv-tl-title{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--dark)}
.bv-tl-desc{font-size:14px;color:var(--text2);line-height:1.65}
/* Evolution */
.bv-evo-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:center;max-width:960px;margin:32px auto 0}
.bv-evo-card{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.bv-evo-card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.bv-evo-card-label{padding:10px;text-align:center;font-size:12px;font-weight:600;color:var(--text2);background:var(--bg2)}
.bv-evo-arrow{color:var(--accent);font-size:24px;text-align:center;line-height:1}
/* Responsive */
@media(max-width:768px){
  .bv-hero{padding:48px 0 32px}
  .bv-h1{letter-spacing:-1.5px}
  .bv-meta-strip{grid-template-columns:repeat(2,1fr)}
  .bv-slider-wrapper{aspect-ratio:4/3}
  .bv-evo-grid{grid-template-columns:1fr;gap:8px}
  .bv-evo-arrow{transform:rotate(90deg)}
  .bv-section{padding:48px 0}
}
/* Dark mode overrides */
[data-theme="dark"] .bv-meta-item{background:var(--bg2)}
[data-theme="dark"] .bv-evo-card-label{background:var(--bg2)}