@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: optional;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-bottom-\[100px\]{bottom:-100px}.-bottom-\[200px\]{bottom:-200px}.-bottom-\[80px\]{bottom:-80px}.-left-\[100px\]{left:-100px}.-left-\[150px\]{left:-150px}.-left-\[200px\]{left:-200px}.-left-\[80px\]{left:-80px}.-right-2{right:-.5rem}.-right-\[100px\]{right:-100px}.-right-\[120px\]{right:-120px}.-right-\[150px\]{right:-150px}.-right-\[80px\]{right:-80px}.-top-2{top:-.5rem}.-top-3{top:-.75rem}.-top-4{top:-1rem}.-top-\[100px\]{top:-100px}.-top-\[120px\]{top:-120px}.-top-\[150px\]{top:-150px}.-top-\[200px\]{top:-200px}.bottom-0{bottom:0}.bottom-1\/4{bottom:25%}.bottom-10{bottom:2.5rem}.bottom-6{bottom:1.5rem}.bottom-\[-50px\]{bottom:-50px}.bottom-\[-8rem\]{bottom:-8rem}.bottom-\[10\%\]{bottom:10%}.bottom-\[15\%\]{bottom:15%}.bottom-\[20\%\]{bottom:20%}.bottom-\[25\%\]{bottom:25%}.bottom-\[30\%\]{bottom:30%}.bottom-\[35\%\]{bottom:35%}.bottom-\[5\%\]{bottom:5%}.left-0{left:0}.left-1\/2{left:50%}.left-1\/3{left:33.333333%}.left-10{left:2.5rem}.left-3{left:.75rem}.left-6{left:1.5rem}.left-\[-10\%\]{left:-10%}.left-\[-100px\]{left:-100px}.left-\[-150px\]{left:-150px}.left-\[-5rem\]{left:-5rem}.left-\[10\%\]{left:10%}.left-\[20\%\]{left:20%}.left-\[40\%\]{left:40%}.left-\[5\%\]{left:5%}.left-\[50\%\]{left:50%}.left-\[60\%\]{left:60%}.left-\[8\%\]{left:8%}.right-0{right:0}.right-10{right:2.5rem}.right-3{right:.75rem}.right-6{right:1.5rem}.right-\[-100px\]{right:-100px}.right-\[-150px\]{right:-150px}.right-\[-8\%\]{right:-8%}.right-\[-8rem\]{right:-8rem}.right-\[10\%\]{right:10%}.right-\[15\%\]{right:15%}.right-\[20\%\]{right:20%}.right-\[30\%\]{right:30%}.right-\[40\%\]{right:40%}.right-\[5\%\]{right:5%}.right-\[8\%\]{right:8%}.top-0{top:0}.top-1\/2{top:50%}.top-1\/3{top:33.333333%}.top-10{top:2.5rem}.top-3{top:.75rem}.top-4{top:1rem}.top-6{top:1.5rem}.top-\[-100px\]{top:-100px}.top-\[-5\%\]{top:-5%}.top-\[-5rem\]{top:-5rem}.top-\[10\%\]{top:10%}.top-\[15\%\]{top:15%}.top-\[20\%\]{top:20%}.top-\[25\%\]{top:25%}.top-\[30\%\]{top:30%}.top-\[40\%\]{top:40%}.top-\[5\%\]{top:5%}.top-\[50\%\]{top:50%}.top-\[60\%\]{top:60%}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.z-\[10001\]{z-index:10001}.z-\[10002\]{z-index:10002}.z-\[9999\]{z-index:9999}.m-0{margin:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-4{margin-right:1rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.h-0{height:0}.h-0\.5{height:.125rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-\[200px\]{height:200px}.h-\[250px\]{height:250px}.h-\[280px\]{height:280px}.h-\[300px\]{height:300px}.h-\[350px\]{height:350px}.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}.h-\[600px\]{height:600px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-\[40vh\]{max-height:40vh}.max-h-\[85vh\]{max-height:85vh}.max-h-\[90vh\]{max-height:90vh}.min-h-\[70vh\]{min-height:70vh}.min-h-screen{min-height:100vh}.w-0{width:0}.w-1\.5{width:.375rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-\[200px\]{width:200px}.w-\[250px\]{width:250px}.w-\[280px\]{width:280px}.w-\[300px\]{width:300px}.w-\[350px\]{width:350px}.w-\[400px\]{width:400px}.w-\[500px\]{width:500px}.w-\[600px\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-rows-\[1fr_auto\]{grid-template-rows:1fr auto}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-3{row-gap:.75rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[1\.15rem\]{border-radius:1.15rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-black\/10{border-color:rgba(0,0,0,.1)}.border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-50{--tw-border-opacity:1;border-color:rgb(249 250 251/var(--tw-border-opacity,1))}.border-gray-700\/50{border-color:rgba(55,65,81,.5)}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.border-weppas-blue{--tw-border-opacity:1;border-color:rgb(41 98 255/var(--tw-border-opacity,1))}.border-weppas-blue\/10{border-color:rgba(41,98,255,.1)}.border-weppas-blue\/30{border-color:rgba(41,98,255,.3)}.border-weppas-blue\/40{border-color:rgba(41,98,255,.4)}.border-weppas-green\/20{border-color:rgba(125,194,66,.2)}.border-weppas-green\/40{border-color:rgba(125,194,66,.4)}.border-weppas-orange\/30{border-color:rgba(245,132,31,.3)}.border-weppas-purple\/30{border-color:rgba(123,31,162,.3)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.bg-\[\#25D366\]{--tw-bg-opacity:1;background-color:rgb(37 211 102/var(--tw-bg-opacity,1))}.bg-\[\#ff5941\]{--tw-bg-opacity:1;background-color:rgb(255 89 65/var(--tw-bg-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-amber-500\/15{background-color:rgba(245,158,11,.15)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-black\/80{background-color:rgba(0,0,0,.8)}.bg-blue-50\/50{background-color:rgba(239,246,255,.5)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-gray-800\/40{background-color:rgba(31,41,55,.4)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-gray-900\/80{background-color:rgba(17,24,39,.8)}.bg-pink-500\/10{background-color:rgba(236,72,153,.1)}.bg-pink-500\/15{background-color:rgba(236,72,153,.15)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/20{background-color:rgba(239,68,68,.2)}.bg-weppas-blue{--tw-bg-opacity:1;background-color:rgb(41 98 255/var(--tw-bg-opacity,1))}.bg-weppas-blue\/10{background-color:rgba(41,98,255,.1)}.bg-weppas-blue\/15{background-color:rgba(41,98,255,.15)}.bg-weppas-blue\/20{background-color:rgba(41,98,255,.2)}.bg-weppas-blue\/5{background-color:rgba(41,98,255,.05)}.bg-weppas-blue\/\[0\.02\]{background-color:rgba(41,98,255,.02)}.bg-weppas-cyan{--tw-bg-opacity:1;background-color:rgb(0 188 212/var(--tw-bg-opacity,1))}.bg-weppas-cyan\/10{background-color:rgba(0,188,212,.1)}.bg-weppas-cyan\/15{background-color:rgba(0,188,212,.15)}.bg-weppas-green{--tw-bg-opacity:1;background-color:rgb(125 194 66/var(--tw-bg-opacity,1))}.bg-weppas-green\/10{background-color:rgba(125,194,66,.1)}.bg-weppas-green\/15{background-color:rgba(125,194,66,.15)}.bg-weppas-green\/20{background-color:rgba(125,194,66,.2)}.bg-weppas-green\/5{background-color:rgba(125,194,66,.05)}.bg-weppas-green\/\[0\.03\]{background-color:rgba(125,194,66,.03)}.bg-weppas-orange{--tw-bg-opacity:1;background-color:rgb(245 132 31/var(--tw-bg-opacity,1))}.bg-weppas-orange\/10{background-color:rgba(245,132,31,.1)}.bg-weppas-orange\/15{background-color:rgba(245,132,31,.15)}.bg-weppas-purple{--tw-bg-opacity:1;background-color:rgb(123 31 162/var(--tw-bg-opacity,1))}.bg-weppas-purple\/10{background-color:rgba(123,31,162,.1)}.bg-weppas-purple\/20{background-color:rgba(123,31,162,.2)}.bg-weppas-purple\/60{background-color:rgba(123,31,162,.6)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/0{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black\/10{--tw-gradient-from:rgba(0,0,0,.1) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-50{--tw-gradient-from:#f9fafb var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,250,251,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-900{--tw-gradient-from:#111827 var(--tw-gradient-from-position);--tw-gradient-to:rgba(17,24,39,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neutral-900{--tw-gradient-from:#171717 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,9%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-900{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgba(15,23,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-blue{--tw-gradient-from:#2962ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(41,98,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-blue\/20{--tw-gradient-from:rgba(41,98,255,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(41,98,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-blue\/5{--tw-gradient-from:rgba(41,98,255,.05) var(--tw-gradient-from-position);--tw-gradient-to:rgba(41,98,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-cyan{--tw-gradient-from:#00bcd4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,188,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-green{--tw-gradient-from:#7dc242 var(--tw-gradient-from-position);--tw-gradient-to:rgba(125,194,66,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-green\/10{--tw-gradient-from:rgba(125,194,66,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(125,194,66,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-orange{--tw-gradient-from:#f5841f var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,132,31,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-orange\/10{--tw-gradient-from:rgba(245,132,31,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,132,31,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-purple{--tw-gradient-from:#7b1fa2 var(--tw-gradient-from-position);--tw-gradient-to:rgba(123,31,162,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-weppas-purple\/30{--tw-gradient-from:rgba(123,31,162,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(123,31,162,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-gray-50{--tw-gradient-to:rgba(249,250,251,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f9fafb var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-gray-900{--tw-gradient-to:rgba(17,24,39,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#111827 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-slate-800{--tw-gradient-to:rgba(30,41,59,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1e293b var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-weppas-purple{--tw-gradient-to:rgba(123,31,162,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#7b1fa2 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-weppas-purple\/10{--tw-gradient-to:rgba(123,31,162,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(123,31,162,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-amber-400{--tw-gradient-to:#fbbf24 var(--tw-gradient-to-position)}.to-amber-50{--tw-gradient-to:#fffbeb var(--tw-gradient-to-position)}.to-black\/0{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-blue-50\/30{--tw-gradient-to:rgba(239,246,255,.3) var(--tw-gradient-to-position)}.to-emerald-400{--tw-gradient-to:#34d399 var(--tw-gradient-to-position)}.to-emerald-50{--tw-gradient-to:#ecfdf5 var(--tw-gradient-to-position)}.to-gray-800{--tw-gradient-to:#1f2937 var(--tw-gradient-to-position)}.to-gray-900{--tw-gradient-to:#111827 var(--tw-gradient-to-position)}.to-neutral-700\/80{--tw-gradient-to:rgba(64,64,64,.8) var(--tw-gradient-to-position)}.to-red-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}.to-slate-900{--tw-gradient-to:#0f172a var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-weppas-blue{--tw-gradient-to:#2962ff var(--tw-gradient-to-position)}.to-weppas-cyan{--tw-gradient-to:#00bcd4 var(--tw-gradient-to-position)}.to-weppas-green{--tw-gradient-to:#7dc242 var(--tw-gradient-to-position)}.to-weppas-orange{--tw-gradient-to:#f5841f var(--tw-gradient-to-position)}.to-weppas-purple{--tw-gradient-to:#7b1fa2 var(--tw-gradient-to-position)}.to-weppas-purple\/20{--tw-gradient-to:rgba(123,31,162,.2) var(--tw-gradient-to-position)}.to-weppas-purple\/40{--tw-gradient-to:rgba(123,31,162,.4) var(--tw-gradient-to-position)}.to-weppas-purple\/5{--tw-gradient-to:rgba(123,31,162,.05) var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.to-white\/10{--tw-gradient-to:hsla(0,0%,100%,.1) var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-right{background-position:100%}.bg-no-repeat{background-repeat:no-repeat}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-top{-o-object-position:top;object-position:top}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-px{padding:1px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0\.5{padding-bottom:.125rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-0{padding-left:0}.pl-12{padding-left:3rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pr-10{padding-right:2.5rem}.pr-4{padding-right:1rem}.pr-5{padding-right:1.25rem}.pt-0\.5{padding-top:.125rem}.pt-1\.5{padding-top:.375rem}.pt-14{padding-top:3.5rem}.pt-32{padding-top:8rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:Inter,system-ui,-apple-system,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[10rem\]{font-size:10rem}.text-\[11px\]{font-size:11px}.text-\[160px\]{font-size:160px}.text-\[200px\]{font-size:200px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-\[0\.95\]{line-height:.95}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-pink-300{--tw-text-opacity:1;color:rgb(249 168 212/var(--tw-text-opacity,1))}.text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-400\/60{color:hsla(0,91%,71%,.6)}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-weppas-blue{--tw-text-opacity:1;color:rgb(41 98 255/var(--tw-text-opacity,1))}.text-weppas-cyan{--tw-text-opacity:1;color:rgb(0 188 212/var(--tw-text-opacity,1))}.text-weppas-green{--tw-text-opacity:1;color:rgb(125 194 66/var(--tw-text-opacity,1))}.text-weppas-orange{--tw-text-opacity:1;color:rgb(245 132 31/var(--tw-text-opacity,1))}.text-weppas-purple{--tw-text-opacity:1;color:rgb(123 31 162/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/5{color:hsla(0,0%,100%,.05)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/80{color:hsla(0,0%,100%,.8)}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.decoration-weppas-blue\/30{text-decoration-color:rgba(41,98,255,.3)}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-100{opacity:1}.opacity-15{opacity:.15}.opacity-20{opacity:.2}.opacity-25{opacity:.25}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-90{opacity:.9}.opacity-\[0\.025\]{opacity:.025}.opacity-\[0\.03\]{opacity:.03}.opacity-\[0\.04\]{opacity:.04}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-\[0_1rem_2rem_-1rem_black\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_1rem_2rem_-1rem_black\]{--tw-shadow:0 1rem 2rem -1rem #000;--tw-shadow-colored:0 1rem 2rem -1rem var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-black\/30{--tw-shadow-color:rgba(0,0,0,.3);--tw-shadow:var(--tw-shadow-colored)}.shadow-green-500\/30{--tw-shadow-color:rgba(34,197,94,.3);--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-900\/20{--tw-shadow-color:rgba(15,23,42,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-weppas-orange\/25{--tw-shadow-color:rgba(245,132,31,.25);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow-lg{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-\[5px\]{--tw-backdrop-blur:blur(5px)}.backdrop-blur-\[5px\],.backdrop-blur-lg{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.last\:mr-0:last-child{margin-right:0}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem}.hover\:-translate-y-2:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:gap-3:hover{gap:.75rem}.hover\:gap-4:hover{gap:1rem}.hover\:border-gray-900:hover{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity,1))}.hover\:border-weppas-blue:hover{--tw-border-opacity:1;border-color:rgb(41 98 255/var(--tw-border-opacity,1))}.hover\:border-weppas-blue\/30:hover{border-color:rgba(41,98,255,.3)}.hover\:border-weppas-blue\/40:hover{border-color:rgba(41,98,255,.4)}.hover\:border-weppas-cyan\/40:hover{border-color:rgba(0,188,212,.4)}.hover\:border-weppas-green\/40:hover{border-color:rgba(125,194,66,.4)}.hover\:border-weppas-orange\/40:hover{border-color:rgba(245,132,31,.4)}.hover\:border-weppas-orange\/50:hover{border-color:rgba(245,132,31,.5)}.hover\:border-weppas-purple\/40:hover{border-color:rgba(123,31,162,.4)}.hover\:border-weppas-purple\/60:hover{border-color:rgba(123,31,162,.6)}.hover\:border-white\/40:hover{border-color:hsla(0,0%,100%,.4)}.hover\:bg-\[\#1ebe5a\]:hover{--tw-bg-opacity:1;background-color:rgb(30 190 90/var(--tw-bg-opacity,1))}.hover\:bg-amber-500:hover{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-orange-600:hover{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.hover\:bg-weppas-blue\/20:hover{background-color:rgba(41,98,255,.2)}.hover\:bg-weppas-blue\/5:hover{background-color:rgba(41,98,255,.05)}.hover\:bg-white\/100:hover{background-color:#fff}.hover\:text-\[\#25D366\]:hover{--tw-text-opacity:1;color:rgb(37 211 102/var(--tw-text-opacity,1))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.hover\:text-weppas-blue:hover{--tw-text-opacity:1;color:rgb(41 98 255/var(--tw-text-opacity,1))}.hover\:text-weppas-purple:hover{--tw-text-opacity:1;color:rgb(123 31 162/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-blue-800\/50:hover{text-decoration-color:rgba(30,64,175,.5)}.hover\:decoration-weppas-purple\/50:hover{text-decoration-color:rgba(123,31,162,.5)}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.hover\:shadow-2xl:hover,.hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-md:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.hover\:shadow-gray-200\/50:hover{--tw-shadow-color:rgba(229,231,235,.5);--tw-shadow:var(--tw-shadow-colored)}.hover\:shadow-weppas-blue\/20:hover{--tw-shadow-color:rgba(41,98,255,.2);--tw-shadow:var(--tw-shadow-colored)}.hover\:shadow-weppas-blue\/25:hover{--tw-shadow-color:rgba(41,98,255,.25);--tw-shadow:var(--tw-shadow-colored)}.hover\:shadow-weppas-orange\/30:hover{--tw-shadow-color:rgba(245,132,31,.3);--tw-shadow:var(--tw-shadow-colored)}.hover\:shadow-white\/20:hover{--tw-shadow-color:hsla(0,0%,100%,.2);--tw-shadow:var(--tw-shadow-colored)}.focus\:border-weppas-blue:focus{--tw-border-opacity:1;border-color:rgb(41 98 255/var(--tw-border-opacity,1))}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-weppas-blue\/10:focus{--tw-ring-color:rgba(41,98,255,.1)}.focus\:ring-weppas-blue\/20:focus{--tw-ring-color:rgba(41,98,255,.2)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:-translate-y-0\.5{--tw-translate-y:-0.125rem}.group:hover .group-hover\:-translate-y-0\.5,.group:hover .group-hover\:translate-x-0\.5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem}.group:hover .group-hover\:translate-x-1,.group:hover .group-hover\:translate-x-1\.5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-1\.5{--tw-translate-x:0.375rem}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.group:hover .group-hover\:scale-105,.group:hover .group-hover\:scale-110{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.group:hover .group-hover\:gap-2{gap:.5rem}.group:hover .group-hover\:border-weppas-blue\/30{border-color:rgba(41,98,255,.3)}.group:hover .group-hover\:bg-weppas-blue\/10{background-color:rgba(41,98,255,.1)}.group:hover .group-hover\:bg-weppas-blue\/5{background-color:rgba(41,98,255,.05)}.group:hover .group-hover\:bg-weppas-green\/10{background-color:rgba(125,194,66,.1)}.group:hover .group-hover\:bg-weppas-orange\/10{background-color:rgba(245,132,31,.1)}.group:hover .group-hover\:bg-weppas-purple\/10{background-color:rgba(123,31,162,.1)}.group:hover .group-hover\:from-black\/20{--tw-gradient-from:rgba(0,0,0,.2) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.group:hover .group-hover\:text-weppas-blue{--tw-text-opacity:1;color:rgb(41 98 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-weppas-green{--tw-text-opacity:1;color:rgb(125 194 66/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-weppas-orange{--tw-text-opacity:1;color:rgb(245 132 31/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-weppas-purple{--tw-text-opacity:1;color:rgb(123 31 162/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-white\/90{color:hsla(0,0%,100%,.9)}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:p-20{padding:5rem}.sm\:px-2{padding-left:.5rem;padding-right:.5rem}.sm\:py-1{padding-top:.25rem}.sm\:pb-1,.sm\:py-1{padding-bottom:.25rem}.sm\:pt-1{padding-top:.25rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-7xl{font-size:4.5rem;line-height:1}.sm\:text-\[12rem\]{font-size:12rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-\[500px\]{width:500px}.md\:w-\[600px\]{width:600px}.md\:w-\[700px\]{width:700px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:p-10{padding:2.5rem}.md\:p-14{padding:3.5rem}.md\:p-24{padding:6rem}.md\:p-7{padding:1.75rem}.md\:p-8{padding:2rem}.md\:px-3{padding-left:.75rem;padding-right:.75rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-2{padding-top:.5rem;padding-bottom:.5rem}.md\:py-40{padding-top:10rem;padding-bottom:10rem}.md\:pb-1{padding-bottom:.25rem}.md\:pl-\[52px\]{padding-left:52px}.md\:pt-2{padding-top:.5rem}.md\:pt-8{padding-top:2rem}.md\:text-right{text-align:right}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-8xl{font-size:6rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}}@media (prefers-color-scheme:dark){.dark\:border-white\/10{border-color:hsla(0,0%,100%,.1)}.dark\:bg-black\/95{background-color:rgba(0,0,0,.95)}.dark\:bg-neutral-950{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.dark\:from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-white\/10{--tw-gradient-from:hsla(0,0%,100%,.1) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:to-black\/10{--tw-gradient-to:rgba(0,0,0,.1) var(--tw-gradient-to-position)}.dark\:to-white\/80{--tw-gradient-to:hsla(0,0%,100%,.8) var(--tw-gradient-to-position)}.dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:hover\:bg-black\/100:hover{background-color:#000}.dark\:hover\:shadow-neutral-800\/50:hover{--tw-shadow-color:rgba(38,38,38,.5);--tw-shadow:var(--tw-shadow-colored)}}
/* ===== Coffee Eight Jitter ===== */
@keyframes coffee-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
    30% { transform: translate(1px, -0.5px) rotate(0.6deg); }
    45% { transform: translate(-0.5px, -0.5px) rotate(-0.3deg); }
    60% { transform: translate(0.5px, 1px) rotate(0.5deg); }
    75% { transform: translate(-1px, 0px) rotate(-0.6deg); }
    90% { transform: translate(0.5px, -0.5px) rotate(0.3deg); }
}

.coffee-eight {
    display: inline-block;
    animation: coffee-shake 0.6s ease-in-out infinite;
}

/* ===== Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

::selection {
    background-color: rgba(41, 98, 255, 0.15);
    color: #2962FF;
}

/* ===== Gradient Text ===== */
.text-gradient {
    background: linear-gradient(135deg, #F5841F, #7DC242, #00BCD4, #2962FF, #7B1FA2);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 12s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ===== Navbar Styles ===== */
#navbar {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.04);
}

.nav-logo-text {
    color: #111827;
}

/* ===== Hero stoom-overlay (CSS-only, boven mok-positie) ===== */
.hero-steam-container {
    overflow: hidden;
}

.hero-steam {
    position: absolute;
    /* Foto is gespiegeld — mok-opening zit rond 32% van rechts, 50% van onder */
    right: 32%;
    bottom: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 240, 0.95) 0%, rgba(255, 250, 240, 0.55) 40%, rgba(255, 250, 240, 0) 75%);
    filter: blur(20px);
    opacity: 0;
    transform-origin: center;
    pointer-events: none;
}

.hero-steam-1 { animation: steam-rise 6s ease-in-out infinite; animation-delay: 0s; }
.hero-steam-2 { animation: steam-rise 7s ease-in-out infinite; animation-delay: 1.2s; right: 33%; }
.hero-steam-3 { animation: steam-rise 8s ease-in-out infinite; animation-delay: 2.4s; right: 31%; }
.hero-steam-4 { animation: steam-rise 6.5s ease-in-out infinite; animation-delay: 3.6s; right: 32.5%; }

@keyframes steam-rise {
    0% {
        transform: translate(0, 0) scale(0.6);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translate(12px, -160px) scale(1.8);
        opacity: 0.8;
    }
    85% {
        opacity: 0.4;
    }
    100% {
        transform: translate(-6px, -300px) scale(2.6);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    /* Op mobile staat de mok iets anders door object-cover crop, plus we willen minder cpu */
    .hero-steam { right: 28%; bottom: 45%; }
    .hero-steam-3, .hero-steam-4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-steam { display: none; }
}

/* ===== Hero background W logos ===== */
.hero-w {
    will-change: transform;
    mix-blend-mode: multiply;
}

/* Layer 1: Large, slow breathe — zooms in close then back out */
@keyframes w-drift-1 {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    20%  { transform: translate(20px, -15px) rotate(1.5deg) scale(1.15); }
    40%  { transform: translate(-10px, 10px) rotate(-0.5deg) scale(0.95); }
    60%  { transform: translate(15px, 5px) rotate(1deg) scale(1.25); }
    80%  { transform: translate(-20px, -10px) rotate(-1.5deg) scale(0.9); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
.hero-w-1 { animation: w-drift-1 45s ease-in-out infinite; }

/* Layer 2: Offset right, comes very close then retreats */
@keyframes w-drift-2 {
    0%   { transform: translate(40px, 20px) rotate(2deg) scale(0.9); }
    25%  { transform: translate(-20px, -30px) rotate(-1deg) scale(1.35); }
    50%  { transform: translate(30px, 15px) rotate(1.5deg) scale(0.85); }
    75%  { transform: translate(-15px, 25px) rotate(-2deg) scale(1.2); }
    100% { transform: translate(40px, 20px) rotate(2deg) scale(0.9); }
}
.hero-w-2 { animation: w-drift-2 35s ease-in-out infinite; }

/* Layer 3: Offset left, dramatic zoom in/out */
@keyframes w-drift-3 {
    0%   { transform: translate(-30px, -10px) rotate(-1deg) scale(1.1); }
    30%  { transform: translate(25px, 20px) rotate(2deg) scale(0.7); }
    60%  { transform: translate(-10px, -25px) rotate(-1.5deg) scale(1.4); }
    100% { transform: translate(-30px, -10px) rotate(-1deg) scale(1.1); }
}
.hero-w-3 { animation: w-drift-3 30s ease-in-out infinite; }

/* Layer 4: Very large background, gentle zoom pulse */
@keyframes w-drift-4 {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%  { transform: translate(10px, -8px) rotate(0.5deg) scale(1.1); }
    66%  { transform: translate(-8px, 6px) rotate(-0.5deg) scale(0.92); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
.hero-w-4 { animation: w-drift-4 55s ease-in-out infinite; }

/* Layer 5: Small, fast, erratic — flies close and away */
@keyframes w-drift-5 {
    0%   { transform: translate(50px, 30px) rotate(3deg) scale(0.8); }
    20%  { transform: translate(-40px, -20px) rotate(-2deg) scale(1.5); }
    40%  { transform: translate(20px, 40px) rotate(1deg) scale(0.6); }
    60%  { transform: translate(-30px, 10px) rotate(-3deg) scale(1.6); }
    80%  { transform: translate(35px, -35px) rotate(2deg) scale(0.75); }
    100% { transform: translate(50px, 30px) rotate(3deg) scale(0.8); }
}
.hero-w-5 { animation: w-drift-5 25s ease-in-out infinite; }

/* Make white logo background transparent */
img[alt="Weppas"] {
    mix-blend-mode: multiply;
}

/* On dark backgrounds, use different blend mode */
.bg-gray-900 img[alt="Weppas"],
footer img[alt="Weppas"] {
    mix-blend-mode: screen;
    filter: brightness(1.1);
}

.nav-link {
    position: relative;
    color: #374151;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #2962FF, #7B1FA2);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ===== Mobile Menu ===== */
#mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}

#menu-toggle.active .menu-bar:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

#menu-toggle.active .menu-bar:nth-child(2) {
    opacity: 0;
}

#menu-toggle.active .menu-bar:nth-child(3) {
    width: 24px;
    transform: rotate(-45deg) translate(4px, -4px);
}

.mobile-nav-link {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

#mobile-menu.active .mobile-nav-link {
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu.active .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu.active .mobile-nav-link:nth-child(2) { transition-delay: 0.15s; }
#mobile-menu.active .mobile-nav-link:nth-child(3) { transition-delay: 0.2s; }
#mobile-menu.active .mobile-nav-link:nth-child(4) { transition-delay: 0.25s; }

/* ===== Reveal Animations =====
   Progressive enhancement: alleen verbergen wanneer JS aanwezig is (.js class
   gezet via inline script in <head>). Zonder JS blijft content zichtbaar. */
.js .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ===== Float Animations ===== */
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes float-reverse {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(-25px, 25px) scale(1.08) rotate(5deg); }
    66% { transform: translate(15px, -15px) scale(0.92) rotate(-3deg); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes orbit {
    0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

@keyframes morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%; }
    75% { border-radius: 60% 30% 50% 40% / 70% 40% 60% 30%; }
}

.animate-float {
    animation: float 20s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 20s ease-in-out infinite;
    animation-delay: -10s;
}

.animate-float-reverse {
    animation: float-reverse 25s ease-in-out infinite;
}

.animate-morph {
    animation: morph 15s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

.animate-orbit {
    animation: orbit 30s linear infinite;
}

/* ===== Color Blobs (static — never animate with filter:blur) ===== */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.blob-orange { background: rgba(245, 132, 31, 0.15); }
.blob-green { background: rgba(125, 194, 66, 0.12); }
.blob-cyan { background: rgba(0, 188, 212, 0.12); }
.blob-blue { background: rgba(41, 98, 255, 0.1); }
.blob-purple { background: rgba(123, 31, 162, 0.12); }
.blob-pink { background: rgba(236, 72, 153, 0.1); }

/* ===== Gradient line accents ===== */
.gradient-line {
    height: 3px;
    background: linear-gradient(90deg, #F5841F, #7DC242, #00BCD4, #2962FF, #7B1FA2);
    background-size: 200% 100%;
    animation: gradient-shift 4s ease infinite;
}

.gradient-line-vertical {
    width: 3px;
    background: linear-gradient(180deg, #F5841F, #7DC242, #00BCD4, #2962FF, #7B1FA2);
    background-size: 100% 200%;
    animation: gradient-shift 4s ease infinite;
}

/* ===== Noise texture overlay (lightweight base64 PNG, no SVG filter) ===== */
.noise-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMFCA0RFRkMN4ZOAAAAgUlEQVQ4y9WSMQ6AMAxDXcQBkLgAEhdg4v6XoiRNh6pMbHir/GT5ywCAMbYe95hzLpvNJ0ly5nCb7VEdo0HVRHTWOJZHmeP7mE4e2KFeqm0KizV6M+a1KS/vRX1UqK3L+zyP7RLGE0XBhLA+EGcMILj8oAjPtBcBxgCV918AL/bF9yjJBkNAAAAAElFTkSuQmCC");
    background-repeat: repeat;
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 1;
}

@keyframes bounce-slow {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}

/* ===== Service Cards ===== */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, transparent);
    transition: background 0.5s ease;
}

/* Hover-gradient gekoppeld aan data-dienst attribuut (niet aan DOM-positie),
   zodat reorder van de cards niet stilletjes de kleuren verkeerd zet. */
.service-card[data-dienst="websites"]:hover::before {
    background: linear-gradient(90deg, #F5841F, #7DC242);
}

.service-card[data-dienst="applicaties"]:hover::before {
    background: linear-gradient(90deg, #00BCD4, #2962FF);
}

.service-card[data-dienst="configurators"]:hover::before {
    background: linear-gradient(90deg, #2962FF, #7B1FA2);
}

.service-card[data-dienst="huisstijl"]:hover::before {
    background: linear-gradient(90deg, #F5841F, #7B1FA2);
}

/* ===== Form Focus Glow ===== */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.08);
}

/* ===== Contact Form Success State ===== */
.form-success {
    animation: success-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes success-pop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== Cursor Glow (desktop only) ===== */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(41, 98, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2962FF, #7B1FA2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1a4fd4, #5c1580);
}

/* ===== Marquee ===== */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.marquee-track {
    animation: marquee 30s linear infinite;
}

.marquee-track-reverse {
    animation: marquee-reverse 35s linear infinite;
}

.marquee-content {
    display: inline-block;
    background: linear-gradient(90deg, #F5841F, #7DC242, #00BCD4, #2962FF, #7B1FA2, #F5841F, #7DC242, #00BCD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    opacity: 0.55;
}

/* Animation-delay utility classes (vervangen inline styles in HTML).
   Worden door de prefers-reduced-motion-blok genegeerd via animation: none. */
/* Utility-classes voor animation-delay (vervangen inline styles door CSS). */
.blob-delay-1   { animation-delay: -1s; }
.blob-delay-2   { animation-delay: -2s; }
.blob-delay-3   { animation-delay: -3s; }
.blob-delay-4   { animation-delay: -4s; }
.blob-delay-5   { animation-delay: -5s; }
.blob-delay-6   { animation-delay: -6s; }
.blob-delay-7   { animation-delay: -7s; }
.blob-delay-8   { animation-delay: -8s; }
.blob-delay-9   { animation-delay: -9s; }
.blob-delay-10  { animation-delay: -10s; }
.blob-delay-11  { animation-delay: -11s; }
.blob-delay-12  { animation-delay: -12s; }
.glow-delay-0-5 { animation-delay: -0.5s; }
.glow-delay-1   { animation-delay: -1s; }
.glow-delay-1-5 { animation-delay: -1.5s; }
.glow-delay-2   { animation-delay: -2s; }
.glow-delay-2-5 { animation-delay: -2.5s; }
.glow-delay-3   { animation-delay: -3s; }
.glow-delay-3-5 { animation-delay: -3.5s; }
.glow-delay-4   { animation-delay: -4s; }
.glow-delay-5   { animation-delay: -5s; }

/* Reverse-marquee opacity (was inline style). */
.marquee-track-reverse .marquee-content {
    opacity: 0.6;
}

/* Portfolio-card thumbnail: vaste hoogte via data-attribuut (was 7× inline
   style="height: 14rem;"). Attribuut-selector houdt de class-list schoon
   en is uitbreidbaar als andere maten ooit nodig zijn. */
[data-thumb="14rem"] {
    height: 14rem;
}

/* Visually hidden — voor honeypot, robuust onafhankelijk van parent-positioning. */
.visually-hidden-offscreen {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Quote-break sectie: vaste minimum-hoogte zodat de blobs ruimte krijgen.
   Geen achtergrond-video meer; pure gradient + blobs. */
.quote-break {
    min-height: 480px;
}

/* ===== FAQ ===== */
.faq-item {
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #2962FF;
}

.faq-item.open .faq-icon {
    transform: rotate(180deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}

.faq-content.hidden {
    display: block !important;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-item.open .faq-content {
    /* Ruim genoeg voor het langste antwoord; JS overrulet dit naar exact
       scrollHeight via inline-style voor strakke animatie. */
    max-height: 1500px;
    padding-bottom: 2.5rem;
}

/* ===== Hero video + overlay (CSS-only, geen inline styles op de elementen) ===== */
#hero-video {
    opacity: 0.55;
    transform: scaleX(-1);
}

.hero-overlay {
    background: radial-gradient(
        ellipse 70% 95% at 20% 50%,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.65) 35%,
        rgba(255, 255, 255, 0.25) 65%,
        rgba(255, 255, 255, 0) 88%
    );
}

/* De gradient-text (Jij groeit.) gebruikt -webkit-background-clip: text,
   wat een normale text-shadow uitvegen tegen de gradient-fill. We laten
   text-shadow daar weg en lossen leesbaarheid op via de overlay alleen.
   Voor de zwarte H1-delen en lead is een hele subtiele wit-shadow ok. */
#home h1,
#home .hero-lead {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

#home h1 .text-gradient {
    text-shadow: none;
}

.hero-paths-layer2 {
    transform: scaleX(-1);
}

/* ===== CTA-knoppen — keyboard focus ===== */
.hero-cta:focus-visible {
    outline: 3px solid #2962FF;
    outline-offset: 4px;
    border-radius: 9999px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .cursor-glow {
        display: none;
    }
}

/* ===== Floating Paths (background-paths component style) ===== */
.hero-path {
    stroke-linecap: round;
    animation: path-glow var(--d, 25s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: opacity;
}

/* Only animate opacity — stroke-dashoffset triggers expensive repaints */
@keyframes path-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* ===== W Data Lines Background ===== */
.w-data-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.w-data-lines svg {
    width: 100%;
    height: 100%;
}

.w-data-path {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 8 24;
    animation: data-flow var(--flow-d, 6s) linear infinite;
    animation-delay: var(--flow-delay, 0s);
}

.w-data-path-solid {
    fill: none;
    stroke-linecap: round;
    opacity: 0.04;
}

@keyframes data-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -64; }
}

/* Reverse flow for some paths */
.w-data-path-reverse {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 6 20;
    animation: data-flow-reverse var(--flow-d, 8s) linear infinite;
    animation-delay: var(--flow-delay, 0s);
}

@keyframes data-flow-reverse {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 52; }
}

/* Pulse dots along the W — fill komt uit fill="#..." attribuut op de circle.
   transform-box: fill-box laat scale() draaien rond het centrum van de cirkel,
   ipv het SVG-canvas-origin (anders zouden de dots wegvliegen bij scale). */
.w-data-dot {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: data-dot-pulse var(--dot-d, 3s) ease-in-out infinite;
    animation-delay: var(--dot-delay, 0s);
}

@keyframes data-dot-pulse {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.6; transform: scale(2); }
}

/* ===== Tap-targets minimaal 44x44 (WCAG 2.5.5) ===== */
#menu-toggle {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 768px) {
    /* Footer-links op mobile groter aanraakgebied */
    footer a:not(.flex):not(.inline-flex) {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: inline-block;
    }
}

/* ===== Skip-to-content link (WCAG 2.4.1) ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #2962FF;
    color: white;
    padding: 0.75rem 1.5rem;
    z-index: 99999;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
}
.skip-link:focus {
    left: 0;
}

/* ===== Focus-visible voor toegankelijkheid ===== */
.service-card:focus-visible,
.module-card:focus-visible,
.portfolio-card:focus-visible {
    outline: 3px solid #2962FF;
    outline-offset: 4px;
    border-radius: 1rem;
}

/* ===== Color-contrast fix (WCAG AA 4.5:1) =====
   Cyan #00BCD4 en green #7DC242 op wit zakken naar ~2.3:1 / 2.6:1.
   Default darkere variant; op donkere parents revert naar origineel. */
.text-weppas-cyan {
    color: #00838F;
}
.text-weppas-green {
    color: #5C9A2C;
}

/* Donkere secties: lichtere variant terug voor zichtbaarheid */
[class*="bg-gray-9"] .text-weppas-cyan,
[class*="bg-slate-9"] .text-weppas-cyan,
[class*="bg-slate-8"] .text-weppas-cyan,
[class*="from-gray-9"] .text-weppas-cyan,
[class*="from-slate-9"] .text-weppas-cyan,
.bg-gray-800 .text-weppas-cyan,
.bg-gray-900 .text-weppas-cyan {
    color: #00BCD4;
}
[class*="bg-gray-9"] .text-weppas-green,
[class*="bg-slate-9"] .text-weppas-green,
[class*="bg-slate-8"] .text-weppas-green,
[class*="from-gray-9"] .text-weppas-green,
[class*="from-slate-9"] .text-weppas-green,
.bg-gray-800 .text-weppas-green,
.bg-gray-900 .text-weppas-green {
    color: #7DC242;
}

/* ===== Mobile: replace heavy effects with lightweight alternatives ===== */
@media (max-width: 768px) {
    /* Remove ALL blur-based elements — blur() is the #1 cause of mobile flicker */
    .blob {
        display: none !important;
    }

    /* Remove all SVG path animations — stroke-dashoffset repaints are expensive */
    .hero-path {
        display: none !important;
    }

    /* Remove mirrored SVG layer */
    .hero-paths-layer2 {
        display: none !important;
    }

    /* Remove small orb animations */
    .animate-pulse-glow {
        display: none !important;
    }

    /* Replace blobs+paths with a single lightweight CSS gradient background */
    #home {
        background:
            radial-gradient(ellipse 60% 50% at 15% 20%, rgba(245, 132, 31, 0.08) 0%, transparent 70%),
            radial-gradient(ellipse 50% 60% at 85% 75%, rgba(123, 31, 162, 0.07) 0%, transparent 70%),
            radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0, 188, 212, 0.05) 0%, transparent 70%),
            white;
    }

    /* Hero W logos: HIDE completely on mobile — mix-blend-mode + large PNGs cause flicker */
    .hero-w {
        display: none !important;
    }

    /* Stop gradient text animation (background-position is not GPU-composited) */
    .text-gradient {
        animation: none !important;
        background-position: 0% 50%;
    }

    /* Remove noise overlay (SVG filter is heavy on mobile) */
    .noise-overlay::after {
        display: none;
    }

    /* W data lines: simplify for mobile — reduce paths, keep static outline */
    .w-data-path,
    .w-data-path-reverse {
        animation: none !important;
        stroke-dasharray: none;
        opacity: 0.06;
    }

    .w-data-dot {
        display: none;
    }
}

/* ===== Respect reduced motion preference ===== */
@media (prefers-reduced-motion: reduce) {
    .hero-path,
    .blob,
    .animate-float,
    .animate-float-delayed,
    .animate-float-reverse,
    .animate-morph,
    .animate-pulse-glow,
    .animate-orbit,
    .animate-bounce-slow,
    .hero-w,
    .text-gradient,
    .coffee-eight,
    .w-data-path,
    .w-data-path-reverse,
    .w-data-dot,
    .marquee-track,
    .marquee-track-reverse {
        animation: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal-delay-1,
    .reveal-delay-2,
    .reveal-delay-3 {
        transition-delay: 0s;
    }
}

/* ===== Page load animation ===== */
@media (min-width: 769px) {
    body {
        opacity: 0;
        animation: page-load 0.6s ease forwards;
        animation-delay: 0.1s;
    }
}

/* Mobile: skip body fade to prevent white flash / flicker */
@media (max-width: 768px) {
    body {
        opacity: 1;
    }

    /* Use a simpler reveal: hero content only, no full-body opacity toggle */
    .reveal {
        transition-duration: 0.5s;
        transform: translateY(20px);
    }
}

@keyframes page-load {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* ====================================================
   MODULE-BUILDER — interactieve voor + achterkant demo
   ==================================================== */

.mb-builder { color: #0A0E1A; }

.mb-stage-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #4B5563;
    text-transform: uppercase;
}
.mb-label-sub {
    text-transform: none;
    color: #9CA3AF;
    margin-left: 8px;
    font-weight: 400;
    letter-spacing: 0.04em;
    font-size: 10.5px;
}

.mb-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    position: relative;
}

.mb-handle {
    position: absolute;
    left: 50%;
    top: 90px;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E5E7EB;
    box-shadow: 0 8px 24px -8px rgba(10,14,26,.18);
    display: grid;
    place-items: center;
    color: #2962FF;
    z-index: 5;
    pointer-events: none;
}
.mb-handle svg { width: 20px; height: 20px; }

.mb-mock {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 30px 80px -30px rgba(10,14,26,.22), 0 8px 24px -12px rgba(10,14,26,.10);
    overflow: hidden;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
    will-change: transform;
}
.mb-website   { transform: rotateX(2deg) rotateY(2deg);  transform-origin: right center; }
.mb-dashboard { transform: rotateX(2deg) rotateY(-2deg); transform-origin: left center;  }
.mb-website:hover   { transform: rotateX(1deg) rotateY(3deg); }
.mb-dashboard:hover { transform: rotateX(1deg) rotateY(-3deg); }

.mb-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    border-bottom: 1px solid #F0EDE6;
    background: #FBFBF8;
}
.mb-dot { width: 10px; height: 10px; border-radius: 50%; background: #E0E0E0; flex-shrink: 0; }
.mb-dot-r { background: #FF8E7F; }
.mb-dot-y { background: #FFD27A; }
.mb-dot-g { background: #9DD6A2; }
.mb-url {
    margin-left: 8px;
    flex: 1;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #6B7280;
}
.mb-mock-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 640px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(10,14,26,.18) transparent;
}
.mb-mock-body::-webkit-scrollbar { width: 5px; }
.mb-mock-body::-webkit-scrollbar-track { background: transparent; }
.mb-mock-body::-webkit-scrollbar-thumb { background: rgba(10,14,26,.18); border-radius: 4px; }
.mb-mock-body::-webkit-scrollbar-thumb:hover { background: rgba(10,14,26,.32); }

/* Subtle fade-out hint at the bottom of each mock when content overflows */
.mb-mock { position: relative; }
.mb-mock::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.95));
    pointer-events: none;
    z-index: 2;
}

/* ===== Mini website mock ===== */
.mb-site-body { background: #fff; }

.mb-mini-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid #F0EDE6;
}
.mb-mini-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #0A0E1A; }
.mb-mini-logo-mark {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: #2962FF; color: #fff;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
}
.mb-mini-links {
    display: flex; gap: 13px;
    font-size: 9.5px; color: #6B7280;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600;
}
.mb-mini-cta {
    padding: 6px 12px;
    background: #0A0E1A; color: #fff;
    border-radius: 100px;
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
}

.mb-mini-hero {
    height: 170px;
    margin: 14px 18px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background: #2D1810;
    color: #fff;
}
.mb-mini-hero-bg {
    position: absolute; inset: 0;
    background-image: url('../assets/mb/hero.jpg');
    background-size: cover;
    background-position: center;
}
.mb-mini-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.85) 100%);
}
.mb-mini-hero-content { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; }
.mb-mini-eyebrow {
    font-size: 9px; letter-spacing: 0.14em;
    color: #FFD27A; text-transform: uppercase;
    margin-bottom: 6px; display: inline-block;
}
.mb-mini-eyebrow::before {
    content: ''; display: inline-block;
    width: 5px; height: 5px; border-radius: 50%;
    background: #9DD6A2; margin-right: 5px; vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(157,214,162,.25);
}
.mb-mini-hero h4 {
    font-family: 'Inter', sans-serif;
    font-size: 22px; font-weight: 800;
    line-height: 1.05; margin: 0 0 4px;
    letter-spacing: -0.02em;
    color: #fff;
}
.mb-mini-hero h4 em { font-style: italic; color: #FFD27A; font-weight: 800; }
.mb-mini-hero p { font-size: 10.5px; line-height: 1.4; color: rgba(255,255,255,.85); margin: 0; }
.mb-mini-hero-cta {
    position: absolute; right: 14px; top: 14px;
    background: #fff; color: #0A0E1A;
    padding: 6px 11px; border-radius: 100px;
    font-size: 9.5px; font-weight: 700;
    z-index: 3; letter-spacing: 0.04em;
}

.mb-mini-section {
    padding: 12px 18px;
    border-top: 1px solid #F0EDE6;
}
.mb-mini-section-h {
    font-weight: 700; font-size: 12.5px; color: #0A0E1A;
    letter-spacing: -0.01em; margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.mb-mini-link {
    font-size: 9px; color: #2962FF; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.mb-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mb-photo {
    aspect-ratio: 1;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.mb-photo span {
    position: absolute; left: 5px; bottom: 5px;
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 7.5px; font-weight: 700;
    padding: 2px 6px; border-radius: 100px;
    letter-spacing: 0.06em;
}
.mb-photo { background-size: cover; background-position: center; }
.mb-ph-1 { background-image: url('../assets/mb/bob.jpg'); }
.mb-ph-2 { background-image: url('../assets/mb/balayage.jpg'); }
.mb-ph-3 { background-image: url('../assets/mb/curls.jpg'); }
.mb-ph-4 { background-image: url('../assets/mb/pixie.jpg'); }

.mb-mini-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mb-product {
    background: #FAFAF7; border: 1px solid #F0EDE6;
    border-radius: 7px; padding: 7px;
}
.mb-product-img {
    aspect-ratio: 1;
    border-radius: 5px;
    margin-bottom: 5px;
}
.mb-product-img { background-size: cover; background-position: center; }
.mb-pr-1 { background-image: url('../assets/mb/prod-shampoo.jpg'); }
.mb-pr-2 { background-image: url('../assets/mb/prod-olaplex.jpg'); }
.mb-pr-3 { background-image: url('../assets/mb/prod-fohn.jpg'); }
.mb-product-info {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    font-size: 9px;
}
.mb-product-info span { color: #4B5563; flex: 1; line-height: 1.2; }
.mb-product-info b { color: #0A0E1A; font-weight: 700; flex-shrink: 0; }

.mb-review { padding: 4px 0; }
.mb-stars { color: #F2B73A; font-size: 12px; letter-spacing: 1px; margin-bottom: 4px; }
.mb-review-text { font-style: italic; font-size: 11.5px; color: #0A0E1A; line-height: 1.45; margin-bottom: 5px; }
.mb-review-by { font-size: 9px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.06em; }

.mb-mini-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mb-blog-card { font-size: 10px; color: #0A0E1A; font-weight: 600; line-height: 1.25; }
.mb-blog-img {
    aspect-ratio: 16/10;
    border-radius: 5px;
    margin-bottom: 4px;
}
.mb-blog-img { background-size: cover; background-position: center; }
.mb-bl-1 { background-image: url('../assets/mb/blog-trends.jpg'); }
.mb-bl-2 { background-image: url('../assets/mb/blog-kleur.jpg'); }
.mb-bl-3 { background-image: url('../assets/mb/blog-krullen.jpg'); }

.mb-mini-trust {
    display: flex; justify-content: space-around;
    padding: 6px 0; gap: 12px;
}
.mb-trust-stat { text-align: center; flex: 1; }
.mb-trust-stat b { display: block; font-size: 18px; font-weight: 800; color: #0A0E1A; line-height: 1; letter-spacing: -0.02em; }
.mb-trust-stat span { font-size: 9px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; display: block; }

/* ===== Dashboard mock ===== */
.mb-dashboard { background: #fff; }
.mb-dash-body {
    display: grid;
    grid-template-columns: 140px 1fr;
    padding: 0;
    min-height: 540px;
    align-items: stretch;
}
.mb-dash-side {
    background: #FBFBF8;
    border-right: 1px solid #F0EDE6;
    padding: 14px 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.mb-dash-brand {
    display: flex; align-items: center; gap: 7px;
    padding: 0 4px 12px; margin-bottom: 6px;
    border-bottom: 1px solid #F0EDE6;
    font-weight: 700; font-size: 12px; color: #0A0E1A;
}
.mb-dash-brand-mark {
    width: 20px; height: 20px;
    border-radius: 5px;
    background: #0A0E1A; color: #fff;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mb-dash-side-item {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    color: #4A5568;
    transition: background .2s, color .2s;
    cursor: pointer;
    user-select: none;
}
.mb-dash-side-item:hover {
    background: rgba(41,98,255,.08);
    color: #2962FF;
}
.mb-dash-side-active,
.mb-dash-side-active:hover {
    background: #2962FF; color: #fff; font-weight: 600;
}
.mb-dash-side-bottom {
    margin-top: auto;
    color: #9CA3AF;
    font-size: 11px;
}

.mb-dash-main { padding: 16px 18px; position: relative; flex: 1; overflow: hidden; }
.mb-dash-h {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 14px;
}
.mb-dash-title { font-size: 17px; font-weight: 800; color: #0A0E1A; letter-spacing: -0.02em; }
.mb-dash-sub { font-size: 10px; color: #6B7280; margin-top: 2px; }
.mb-dash-pill {
    background: #EEF2FF; color: #2962FF;
    padding: 4px 10px; border-radius: 100px;
    font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 5px;
}
.mb-dash-pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #16A34A;
    box-shadow: 0 0 0 3px rgba(22,163,74,.2);
    animation: mbPulse 2s ease-in-out infinite;
}
@keyframes mbPulse { 50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } }

.mb-dash-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 12px;
}
.mb-stat {
    background: #FAFAF7; border: 1px solid #F0EDE6;
    border-radius: 8px; padding: 10px 12px;
}
.mb-stat-l { font-size: 8.5px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 4px; }
.mb-stat-v { font-size: 22px; font-weight: 800; color: #0A0E1A; line-height: 1; letter-spacing: -0.02em; }
.mb-stat-d { font-size: 9.5px; color: #16A34A; margin-top: 4px; font-weight: 600; }
.mb-stat-warn { color: #B45309; }

.mb-dash-list {
    background: #fff; border: 1px solid #F0EDE6;
    border-radius: 8px; padding: 10px 12px;
    margin-bottom: 8px;
}
.mb-dash-list-h {
    display: flex; align-items: baseline;
    gap: 8px; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 700; color: #0A0E1A;
}
.mb-dash-list-sub {
    font-size: 9.5px; color: #6B7280; font-weight: 400;
}
.mb-dash-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    border-top: 1px solid #F0EDE6;
    font-size: 11px;
}
.mb-dash-row:first-of-type { border-top: 0; }
.mb-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #2962FF, #7C3AED);
    color: #fff; font-size: 9px; font-weight: 700;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
}
.mb-av-2 { background: linear-gradient(135deg, #FF7A59, #FFB347); }
.mb-av-3 { background: linear-gradient(135deg, #16A34A, #84CC16); }
.mb-row-name { flex: 1; color: #0A0E1A; font-weight: 500; }
.mb-row-meta { color: #6B7280; font-size: 10.5px; }
.mb-row-amount { color: #0A0E1A; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; }
.mb-row-tag {
    padding: 2px 7px; border-radius: 100px;
    font-size: 8.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: #F3F4F6; color: #6B7280;
}
.mb-tag-vip   { background: #FEF3C7; color: #B45309; }
.mb-tag-trouw { background: #DCFCE7; color: #15803D; }
.mb-tag-warn  { background: #FEE2E2; color: #B91C1C; }
.mb-tag-paid  { background: #DBEAFE; color: #1E40AF; }
.mb-time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px; color: #6B7280;
    min-width: 36px; flex-shrink: 0;
}
.mb-stars-mini { color: #F2B73A; font-size: 10px; letter-spacing: 0.5px; min-width: 56px; }

.mb-dash-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9CA3AF; font-size: 12px;
    border: 2px dashed #E5E7EB;
    border-radius: 10px;
}

.mb-toast-feed {
    position: absolute;
    right: 18px; bottom: 18px;
    z-index: 4;
    pointer-events: none;
}
.mb-toast {
    background: #fff;
    border: 1px solid #F0EDE6;
    border-radius: 10px;
    padding: 8px 14px 8px 10px;
    box-shadow: 0 14px 36px -10px rgba(10,14,26,.22);
    display: inline-flex; align-items: center; gap: 10px;
    z-index: 4;
}
.mb-toast-item {
    position: absolute;
    right: 0; bottom: 0;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1);
    white-space: nowrap;
}
.mb-toast-item.mb-toast-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.mb-toast-ic {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: #D4FF4F; color: #0A0E1A;
    display: grid; place-items: center;
    font-weight: 800; font-size: 13px;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}
.mb-ti-cal  { background: #DBEAFE; color: #1E40AF; }
.mb-ti-pay  { background: #DCFCE7; color: #15803D; }
.mb-ti-cart { background: #FEF3C7; color: #B45309; }
.mb-ti-user { background: linear-gradient(135deg, #2962FF, #7C3AED); color: #fff; }
.mb-ti-star { background: #FEF3C7; color: #F2B73A; }
.mb-ti-soc  { background: linear-gradient(135deg, #F58529, #DD2A7B 50%, #8134AF 100%); color: #fff; }
.mb-ti-seo  { background: #fff; border: 1px solid #E5E7EB; color: #4285F4; font-size: 14px; }
.mb-ti-blog { background: #EEF2FF; color: #2962FF; }
.mb-toast-t { font-size: 11px; font-weight: 700; color: #0A0E1A; line-height: 1.2; }
.mb-toast-s { font-size: 9.5px; color: #6B7280; margin-top: 2px; }
@keyframes mbToastIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Conditional visibility based on data-active =====
   Alle 9 modules in één geconsolideerd blok. De fadeIn-animatie zit in
   de active-state selector zodat hij elke keer opnieuw vuurt wanneer een
   module wordt aangezet (CSS animations herstarten alleen bij class- of
   selector-change, niet bij display-toggle). */
.mb-only-mod-boekingen,
.mb-only-mod-klanten,
.mb-only-mod-facturatie,
.mb-only-mod-webshop,
.mb-only-mod-blog,
.mb-only-mod-reviews,
.mb-only-mod-social,
.mb-only-mod-seo,
.mb-only-mod-betalingen { display: none; }

.mb-builder[data-active~="boekingen"]   .mb-only-mod-boekingen,
.mb-builder[data-active~="klanten"]     .mb-only-mod-klanten,
.mb-builder[data-active~="facturatie"]  .mb-only-mod-facturatie,
.mb-builder[data-active~="webshop"]     .mb-only-mod-webshop,
.mb-builder[data-active~="blog"]        .mb-only-mod-blog,
.mb-builder[data-active~="reviews"]     .mb-only-mod-reviews,
.mb-builder[data-active~="social"]      .mb-only-mod-social,
.mb-builder[data-active~="seo"]         .mb-only-mod-seo,
.mb-builder[data-active~="betalingen"]  .mb-only-mod-betalingen {
    display: revert;
    animation: mbFadeIn .35s cubic-bezier(.2,.7,.3,1);
}

/* Make inline-conditional bits behave correctly */
.mb-builder[data-active~="blog"] .mb-mini-links span.mb-only-mod-blog { display: inline; }
.mb-builder[data-active~="webshop"] .mb-mini-links span.mb-only-mod-webshop { display: inline; }

@keyframes mbFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Compacte social-icon variant voor in substats (vervangt inline styles) */
.mb-soc-ic-sm {
    display: inline-grid;
    width: 14px;
    height: 14px;
    font-size: 7px;
    vertical-align: middle;
}

/* ===== Toggle pills ===== */
.mb-toggles {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
    margin-top: 26px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 6px 30px -14px rgba(10,14,26,.12);
}
.mb-toggles-l {
    font-weight: 700; font-size: 13px;
    color: #0A0E1A; margin-right: 6px;
    letter-spacing: -0.01em;
}
.mb-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px;
    border-radius: 100px;
    background: #F3F4F6; color: #4B5563;
    border: 1px solid transparent;
    font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    font-family: 'Inter', sans-serif;
}
.mb-toggle:hover { background: #E5E7EB; color: #0A0E1A; }
.mb-toggle:focus-visible { outline: 2px solid #2962FF; outline-offset: 2px; }
.mb-toggle-check {
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1.5px solid #D1D5DB;
    background: #fff;
    flex-shrink: 0;
    display: grid; place-items: center;
    transition: background .2s, border-color .2s;
}
.mb-toggle.active {
    background: #EEF2FF;
    color: #2962FF;
    border-color: rgba(41,98,255,.25);
    font-weight: 600;
}
.mb-toggle.active .mb-toggle-check {
    background: #2962FF;
    border-color: #2962FF;
}
.mb-toggle.active .mb-toggle-check::after {
    content: "";
    width: 7px; height: 4px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translate(0px, -1px);
    display: block;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .mb-stage { grid-template-columns: 1fr; gap: 18px; }
    .mb-stage-labels { grid-template-columns: 1fr; gap: 4px; }
    .mb-stage-labels span:nth-child(2) { margin-top: 8px; }
    .mb-handle { display: none; }
    .mb-website, .mb-dashboard { transform: none; }
    .mb-dash-stats { grid-template-columns: repeat(2, 1fr); }
    .mb-toggles { padding: 14px 16px; }
    .mb-toggles-l { width: 100%; margin-bottom: 4px; }
    .mb-mock-body, .mb-dash-body { min-height: 460px; max-height: none; }
}

/* ===== Sidebar-driven panel states ===== */
.mb-detail-only { display: none !important; }
.mb-builder[data-panel="overzicht"] .mb-detail-only { display: none !important; }

/* Detail-view: hide stats grid, show only the active list, reveal detail-only rows */
.mb-builder:not([data-panel="overzicht"]) .mb-dash-stats { display: none !important; }
.mb-builder:not([data-panel="overzicht"]) .mb-dash-list  { display: none !important; }
.mb-builder:not([data-panel="overzicht"]) .mb-detail-only { display: flex !important; }

.mb-builder[data-panel="agenda"]      .mb-dash-list.mb-only-mod-boekingen   { display: block !important; }
.mb-builder[data-panel="klanten"]     .mb-dash-list.mb-only-mod-klanten     { display: block !important; }
.mb-builder[data-panel="facturatie"]  .mb-dash-list.mb-only-mod-facturatie  { display: block !important; }
.mb-builder[data-panel="webshop"]     .mb-dash-list.mb-only-mod-webshop     { display: block !important; }
.mb-builder[data-panel="blog"]        .mb-dash-list.mb-only-mod-blog        { display: block !important; }
.mb-builder[data-panel="reviews"]     .mb-dash-list.mb-only-mod-reviews     { display: block !important; }
.mb-builder[data-panel="social"]      .mb-dash-list.mb-only-mod-social      { display: block !important; }
.mb-builder[data-panel="seo"]         .mb-dash-list.mb-only-mod-seo         { display: block !important; }
.mb-builder[data-panel="betalingen"]  .mb-dash-list.mb-only-mod-betalingen  { display: block !important; }

/* Hide toast in detail-view */
.mb-builder:not([data-panel="overzicht"]) .mb-toast { display: none !important; }

/* Update breadcrumb-title and sub on detail-view via data-panel value */
.mb-builder[data-panel="agenda"]      .mb-dash-title::after { content: " › Agenda"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="klanten"]     .mb-dash-title::after { content: " › Klanten"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="facturatie"]  .mb-dash-title::after { content: " › Facturatie"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="webshop"]     .mb-dash-title::after { content: " › Webshop"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="blog"]        .mb-dash-title::after { content: " › Blog"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="reviews"]     .mb-dash-title::after { content: " › Reviews"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="social"]      .mb-dash-title::after { content: " › Social media"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="seo"]         .mb-dash-title::after { content: " › SEO"; color: #6B7280; font-weight: 500; }
.mb-builder[data-panel="betalingen"]  .mb-dash-title::after { content: " › Betalingen"; color: #6B7280; font-weight: 500; }

/* Hide empty-state in any detail-view (only relevant in overzicht when no modules at all are active) */
.mb-builder:not([data-panel="overzicht"]) .mb-dash-empty { display: none !important; }

/* ===== Social media (Instagram-grid in website) ===== */
.mb-ig-1 { background-image: url("../assets/mb/balayage.jpg"); background-size: cover; background-position: center; }
.mb-ig-2 { background-image: url("../assets/mb/curls.jpg"); background-size: cover; background-position: center; }
.mb-ig-3 { background-image: url("../assets/mb/pixie.jpg"); background-size: cover; background-position: center; }
.mb-ig-4 { background-image: url("../assets/mb/bob.jpg"); background-size: cover; background-position: center; }
.mb-ig-1 span, .mb-ig-4 span {
    background: rgba(0,0,0,.78);
}

/* Social platform pictograms in dashboard */
.mb-soc-ic {
    width: 22px; height: 22px;
    border-radius: 6px;
    display: grid; place-items: center;
    color: #fff; font-size: 9px; font-weight: 700;
    flex-shrink: 0;
    font-family: "Inter", sans-serif;
    letter-spacing: -0.02em;
}
.mb-soc-ig { background: linear-gradient(135deg, #F58529, #DD2A7B 50%, #8134AF 100%); }
.mb-soc-fb { background: #1877F2; }
.mb-soc-tt { background: #0A0E1A; }
.mb-soc-tt::before { content: ""; }

/* ===== SEO ===== */
.mb-seo-trust {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(66,133,244,.08), rgba(52,168,83,.06));
    border: 1px solid rgba(66,133,244,.2);
    border-radius: 8px;
}
.mb-seo-trust-ic {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E5E7EB;
    display: grid; place-items: center;
    font-family: "Inter", sans-serif;
    font-size: 16px; font-weight: 700;
    color: #4285F4;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px rgba(10,14,26,.1);
}
.mb-seo-trust-text { font-size: 11.5px; color: #0A0E1A; line-height: 1.35; }
.mb-seo-trust-text b { font-weight: 700; color: #0A0E1A; }
.mb-seo-trust-text span { display: block; font-size: 9.5px; color: #6B7280; margin-top: 2px; }

.mb-seo-pos {
    display: inline-grid; place-items: center;
    width: 30px; height: 22px;
    border-radius: 5px;
    background: #DCFCE7; color: #15803D;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px; font-weight: 700;
    flex-shrink: 0;
}
.mb-seo-pos.mb-seo-warn { background: #FEF3C7; color: #B45309; }

/* ===== Mijn-account card (toont bij Klantbeheer) ===== */
.mb-account-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(41,98,255,.06), rgba(124,58,237,.04));
    border: 1px solid rgba(41,98,255,.2);
    border-radius: 8px;
}
.mb-account-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2962FF, #7C3AED);
    color: #fff;
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-family: "Inter", sans-serif;
}
.mb-account-text { flex: 1; line-height: 1.3; min-width: 0; }
.mb-account-text b { display: block; font-size: 11.5px; color: #0A0E1A; font-weight: 700; }
.mb-account-text span { font-size: 9.5px; color: #6B7280; }
.mb-account-cta {
    font-family: "Inter", sans-serif;
    font-size: 9.5px; font-weight: 700;
    color: #2962FF;
    text-transform: uppercase; letter-spacing: 0.06em;
    flex-shrink: 0;
}

/* ===== Booking-widget op website (Boekingen aan) ===== */
.mb-booking {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #FAFAF7;
}
.mb-booking-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mb-booking-l {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    min-width: 64px;
    flex-shrink: 0;
}
.mb-booking-chips {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 5px;
}

.mb-svc-chip,
.mb-day-chip {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 9px;
    border-radius: 7px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #4B5563;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}
.mb-svc-chip b {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 700;
    color: #0A0E1A;
}
.mb-svc-chip:hover,
.mb-day-chip:hover {
    border-color: #2962FF;
    color: #2962FF;
}
.mb-svc-active,
.mb-day-active {
    background: #0A0E1A;
    color: #fff;
    border-color: #0A0E1A;
}
.mb-svc-active b { color: #FFD27A; }

.mb-day-chip {
    flex-direction: column;
    gap: 1px;
    padding: 5px 8px;
    min-width: 44px;
    text-align: center;
}
.mb-day-chip small {
    font-size: 8.5px;
    font-weight: 500;
    color: inherit;
    opacity: 0.7;
}

.mb-booking-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    flex: 1;
}
.mb-slot {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 7px 4px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #2D5BFF;
    cursor: pointer;
    transition: all .15s;
}
.mb-slot:hover:not([disabled]):not(.mb-slot-active) {
    background: #EEF2FF;
    border-color: #2962FF;
}
.mb-slot-active {
    background: #2962FF;
    border-color: #2962FF;
    color: #fff;
}
.mb-slot-busy {
    background: #F3F4F6;
    color: #BFC2CC;
    text-decoration: line-through;
    cursor: not-allowed;
    border-color: transparent;
}

.mb-booking-cta {
    background: #0A0E1A;
    color: #fff;
    padding: 9px 14px;
    border-radius: 8px;
    border: none;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background .2s;
}
.mb-booking-cta:hover {
    background: #2962FF;
}

/* ===== Betalingen module ===== */
/* betalingen visibility + animation: zie geconsolideerd blok bij regel 472 */

.mb-cta-sub {
    font-weight: 500;
    opacity: 0.85;
    font-size: 10px;
    margin-left: 4px;
}

.mb-payment-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #FAFAF7;
    border: 1px solid #F0EDE6;
    border-radius: 8px;
    margin-bottom: 6px;
}
.mb-payment-l {
    font-size: 9.5px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 4px;
}
.mb-pay-meth {
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 5px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #0A0E1A;
    letter-spacing: -0.01em;
    line-height: 1;
}
.mb-pay-ideal { background: #CC0066; color: #fff; border-color: #CC0066; }
.mb-pay-mc    { background: linear-gradient(90deg, #EB001B 0%, #EB001B 50%, #F79E1B 50%, #F79E1B 100%); color: #fff; border-color: transparent; }
.mb-pay-vs    { background: #1A1F71; color: #fff; border-color: #1A1F71; font-style: italic; }
.mb-pay-ap    { background: #0A0E1A; color: #fff; border-color: #0A0E1A; font-size: 10px; }
.mb-pay-bc    { background: #005498; color: #fff; border-color: #005498; }

.mb-payment-trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    color: #6B7280;
    line-height: 1.4;
    margin-top: 6px;
}
.mb-pay-tick {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #15803D;
    display: grid; place-items: center;
    font-size: 9px; font-weight: 800;
    flex-shrink: 0;
}

/* Payment-method icons in dashboard list */
.mb-pay-ic {
    width: 26px; height: 22px;
    border-radius: 4px;
    display: grid; place-items: center;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.mb-pay-ic-ideal { background: #CC0066; }
.mb-pay-ic-cc    { background: linear-gradient(135deg, #EB001B, #F79E1B); }
.mb-pay-ic-bc    { background: #005498; }
.mb-pay-ic-ap    { background: #0A0E1A; }

/* ===== Detail-view extras (filters, sub-stats, charts, rating distribution) ===== */
.mb-detail-extra { display: none; margin-bottom: 12px; }
.mb-builder[data-panel="agenda"]      .mb-detail-extra[data-panel="agenda"]      { display: block; }
.mb-builder[data-panel="klanten"]     .mb-detail-extra[data-panel="klanten"]     { display: block; }
.mb-builder[data-panel="facturatie"]  .mb-detail-extra[data-panel="facturatie"]  { display: block; }
.mb-builder[data-panel="webshop"]     .mb-detail-extra[data-panel="webshop"]     { display: block; }
.mb-builder[data-panel="blog"]        .mb-detail-extra[data-panel="blog"]        { display: block; }
.mb-builder[data-panel="reviews"]     .mb-detail-extra[data-panel="reviews"]     { display: block; }
.mb-builder[data-panel="social"]      .mb-detail-extra[data-panel="social"]      { display: block; }
.mb-builder[data-panel="seo"]         .mb-detail-extra[data-panel="seo"]         { display: block; }
.mb-builder[data-panel="betalingen"]  .mb-detail-extra[data-panel="betalingen"]  { display: block; }

/* Filter row (pills) */
.mb-filter-row {
    display: flex; flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
    align-items: center;
}
.mb-filter {
    font-family: "Inter", sans-serif;
    font-size: 10.5px; font-weight: 600;
    padding: 5px 10px;
    border-radius: 100px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #4B5563;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.2;
}
.mb-filter:hover { background: #F3F4F6; color: #0A0E1A; }
.mb-filter-active {
    background: #2962FF;
    color: #fff;
    border-color: #2962FF;
}
.mb-filter-add {
    margin-left: auto;
    background: #DCFCE7;
    color: #15803D;
    border-color: rgba(22,163,74,.25);
    font-weight: 700;
}
.mb-filter-add:hover { background: #BBF7D0; color: #14532D; }

/* Search mock */
.mb-search-mock {
    display: flex; align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FAFAF7;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 10px;
}
.mb-search-ic { font-size: 12px; }
.mb-search-pl { font-size: 11.5px; color: #9CA3AF; flex: 1; }

/* Sub-stats */
.mb-substats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 10px;
}
.mb-substat {
    background: #fff;
    border: 1px solid #F0EDE6;
    border-radius: 8px;
    padding: 9px 11px;
    display: flex; flex-direction: column; gap: 2px;
}
.mb-substat span {
    font-size: 9px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.mb-substat b {
    font-size: 18px;
    font-weight: 800;
    color: #0A0E1A;
    letter-spacing: -0.02em;
    line-height: 1;
}
.mb-substat i {
    font-size: 9px;
    font-style: normal;
    color: #16A34A;
    font-weight: 600;
}
.mb-substat-warn b { color: #B45309; }
.mb-substat-warn i { color: #B45309; }

/* Bar-chart card */
.mb-chart-card {
    background: #fff;
    border: 1px solid #F0EDE6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.mb-chart-h {
    font-size: 11.5px;
    font-weight: 700;
    color: #0A0E1A;
    margin-bottom: 8px;
    display: flex; gap: 6px; align-items: baseline;
}
.mb-chart-h span {
    font-size: 9.5px;
    font-weight: 400;
    color: #6B7280;
}
.mb-bar-chart {
    width: 100%;
    height: 80px;
    overflow: visible;
}
.mb-bar-chart text {
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 600;
    fill: #6B7280;
}

/* Rating distribution */
.mb-rating-dist {
    display: flex; flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid #F0EDE6;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.mb-rd {
    display: flex; align-items: center;
    gap: 8px;
    font-size: 10px;
}
.mb-rd > span {
    color: #4B5563;
    font-weight: 600;
    min-width: 20px;
    font-family: "Inter", sans-serif;
}
.mb-rd-bar {
    flex: 1;
    height: 8px;
    background: #F3F4F6;
    border-radius: 100px;
    overflow: hidden;
}
.mb-rd-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #F2B73A, #F59E0B);
    border-radius: 100px;
}
.mb-rd > b {
    font-size: 10px;
    color: #0A0E1A;
    font-weight: 700;
    min-width: 22px;
    text-align: right;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Floating CTA — staat boven WhatsApp bubble (z-index 9999) */
.floating-cta {
    position: fixed;
    bottom: 88px;
    right: 24px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 100px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
.floating-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    background: #1f2937;
    color: #fff;
    text-decoration: none;
}
body:not(.scrolled) .floating-cta {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
body.scrolled .floating-cta {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 768px) {
    .floating-cta {
        bottom: 80px;
        right: 16px;
        padding: 10px 16px;
        font-size: 13px;
    }
}