/* Self-hosted Plus Jakarta Sans. No request ever leaves your server. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-500-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-600-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-800-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*,: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.17 | 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:Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,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:400px){.container{max-width:400px}}@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}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.z-30{z-index:30}.z-40{z-index:40}.order-1{order:1}.order-2{order:2}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:2rem}.mb-8,.my-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.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-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.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}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[16\/9\]{aspect-ratio:16/9}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-24{height:6rem}.h-5{height:1.25rem}.h-8{height:2rem}.min-h-\[1\.25rem\]{min-height:1.25rem}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-content{max-width:72ch}.max-w-lg{max-width:32rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.rotate-45{--tw-rotate:45deg;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))}.resize{resize:both}.scroll-mt-20{scroll-margin-top:5rem}.scroll-mt-24{scroll-margin-top:6rem}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.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-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*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-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-slate-800\/70>:not([hidden])~:not([hidden]){border-color:rgba(30,41,59,.7)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.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-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-emerald-500\/60{border-color:rgba(16,185,129,.6)}.border-indigo-500\/30{border-color:rgba(99,102,241,.3)}.border-indigo-500\/40{border-color:rgba(99,102,241,.4)}.border-indigo-500\/60{border-color:rgba(99,102,241,.6)}.border-rose-500{--tw-border-opacity:1;border-color:rgb(244 63 94/var(--tw-border-opacity,1))}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity,1))}.border-slate-800\/60{border-color:rgba(30,41,59,.6)}.bg-amber-500\/15{background-color:rgba(245,158,11,.15)}.bg-black\/25{background-color:rgba(0,0,0,.25)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/15{background-color:rgba(16,185,129,.15)}.bg-indigo-400{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-indigo-500\/5{background-color:rgba(99,102,241,.05)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-slate-800\/80{background-color:rgba(30,41,59,.8)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-slate-900\/40{background-color:rgba(15,23,42,.4)}.bg-slate-900\/60{background-color:rgba(15,23,42,.6)}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.bg-slate-950\/95{background-color:rgba(2,6,23,.95)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.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-3\.5{padding-left:.875rem;padding-right:.875rem}.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-7{padding-left:1.75rem;padding-right:1.75rem}.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-12{padding-top:3rem;padding-bottom:3rem}.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-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}.pb-3{padding-bottom:.75rem}.pr-6{padding-right:1.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,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-\[\.95rem\]{font-size:.95rem}.text-\[1\.0625rem\]{font-size:1.0625rem}.text-\[15px\]{font-size:15px}.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-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-\[1\.02\]{line-height:1.02}.leading-\[1\.1\]{line-height:1.1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-indigo-300{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity,1))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity,1))}.text-rose-400{--tw-text-opacity:1;color:rgb(251 113 133/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.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-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.decoration-indigo-400\/40{text-decoration-color:rgba(129,140,248,.4)}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-slate-600::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(71 85 105/var(--tw-placeholder-opacity,1))}.placeholder-slate-600::placeholder{--tw-placeholder-opacity:1;color:rgb(71 85 105/var(--tw-placeholder-opacity,1))}.outline{outline-style:solid}.ring{--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(3px + 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)}.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{--tw-backdrop-blur:blur(8px);-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-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}.selection\:bg-indigo-500 ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:bg-indigo-500 ::selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:text-white ::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:text-white ::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:bg-indigo-500::-moz-selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:bg-indigo-500::selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:text-white::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.file\:mr-4::file-selector-button{margin-right:1rem}.file\:rounded::file-selector-button{border-radius:.25rem}.file\:border-0::file-selector-button{border-width:0}.file\:bg-indigo-500::file-selector-button{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.file\:bg-slate-800::file-selector-button{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.file\:px-3::file-selector-button{padding-left:.75rem;padding-right:.75rem}.file\:py-1\.5::file-selector-button{padding-top:.375rem;padding-bottom:.375rem}.file\:py-2::file-selector-button{padding-top:.5rem;padding-bottom:.5rem}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-semibold::file-selector-button{font-weight:600}.file\:text-slate-200::file-selector-button{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.file\:text-white::file-selector-button{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:border-slate-500:hover{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.hover\:border-slate-600:hover{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.hover\:bg-emerald-400:hover{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity,1))}.hover\:bg-emerald-500\/10:hover{background-color:rgba(16,185,129,.1)}.hover\:bg-indigo-400:hover{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity,1))}.hover\:bg-indigo-500\/10:hover{background-color:rgba(99,102,241,.1)}.hover\:bg-slate-800:hover{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.hover\:bg-slate-900:hover{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.hover\:text-indigo-300:hover{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:file\:bg-indigo-400::file-selector-button:hover{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity,1))}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:z-50:focus{z-index:50}.focus\:m-3:focus{margin:.75rem}.focus\:rounded-md:focus{border-radius:.375rem}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity,1))}.focus\:bg-indigo-500:focus{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:hover\:bg-transparent:hover:disabled{background-color:transparent}@media (min-width:400px){.xs\:inline{display:inline}}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}.sm\:py-32{padding-top:8rem;padding-bottom:8rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:order-1{order:1}.lg\:order-2{order:2}.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-\[minmax\(0\2c 1fr\)_16rem\]{grid-template-columns:minmax(0,1fr) 16rem}.lg\:gap-16{gap:4rem}.lg\:text-7xl{font-size:4.5rem;line-height:1}}  :focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; border-radius: 4px; }
  /* One orchestrated moment: the hero chart draws itself on load */
  .bar { transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* ---------- Light mode -------------------------------------------------
     The markup stays dark-first; these rules repaint the same utility classes
     when <html> carries .light, so no page markup has to change. */
  html.light { color-scheme: light; }

  html.light .bg-slate-950       { background-color: #ffffff; }
  html.light .bg-slate-950\/85   { background-color: rgba(255,255,255,.85); }
  html.light .bg-slate-900       { background-color: #f1f5f9; }
  html.light .bg-slate-900\/60   { background-color: #f8fafc; }
  html.light .bg-slate-900\/40   { background-color: #f8fafc; }
  html.light .bg-slate-800       { background-color: #e2e8f0; }
  html.light .bg-slate-800\/80   { background-color: #e8edf3; }
  html.light .bg-slate-700       { background-color: #cbd5e1; }
  html.light .bg-slate-600       { background-color: #94a3b8; }
  html.light .bg-indigo-500\/5   { background-color: rgba(79,70,229,.06); }
  html.light .bg-indigo-500\/15  { background-color: rgba(79,70,229,.12); }
  html.light .bg-emerald-500\/15 { background-color: rgba(5,150,105,.12); }
  html.light .bg-amber-500\/15   { background-color: rgba(180,83,9,.12); }

  html.light .text-white         { color: #0f172a; }
  html.light .text-slate-200     { color: #1e293b; }
  html.light .text-slate-300     { color: #334155; }
  html.light .text-slate-400     { color: #475569; }
  html.light .text-slate-500     { color: #64748b; }
  html.light .text-slate-600     { color: #94a3b8; }
  html.light .text-indigo-400,
  html.light .text-indigo-500    { color: #4f46e5; }
  html.light .text-indigo-300    { color: #4338ca; }
  html.light .text-emerald-400   { color: #047857; }
  html.light .text-rose-400      { color: #be123c; }
  html.light .text-amber-400     { color: #b45309; }

  html.light .border-slate-800       { border-color: #e2e8f0; }
  html.light .border-slate-800\/60   { border-color: #eef2f7; }
  html.light .border-slate-800\/80   { border-color: #e6ebf1; }
  html.light .border-slate-800\/70   { border-color: #e6ebf1; }
  html.light .border-slate-700       { border-color: #cbd5e1; }
  html.light .border-slate-600       { border-color: #94a3b8; }
  html.light .border-indigo-500\/30  { border-color: rgba(79,70,229,.35); }
  html.light .divide-slate-800 > * + * { border-color: #e2e8f0; }
  html.light .divide-slate-800\/70 > * + * { border-color: #e6ebf1; }
  html.light .placeholder-slate-600::placeholder { color: #94a3b8; }

  html.light .hover\:bg-slate-900:hover     { background-color: #f1f5f9; }
  html.light .hover\:bg-slate-900\/60:hover { background-color: #f8fafc; }
  html.light .hover\:text-white:hover       { color: #0f172a; }
  html.light .focus\:text-white:focus       { color: #0f172a; }
  html.light .hover\:text-indigo-300:hover  { color: #4338ca; }
  html.light .group:hover .group-hover\:text-indigo-300 { color: #4338ca; }
  html.light .hover\:border-slate-500:hover,
  html.light .hover\:border-slate-600:hover,
  html.light .hover\:border-slate-700:hover { border-color: #94a3b8; }

  /* Buttons keep the brand indigo in both themes */
  html.light .bg-indigo-500 { background-color: #4f46e5; }

  /* Text sitting ON a coloured button stays white in light mode.
     Two classes beat the single .text-white rule above, so these win. */
  html.light .bg-indigo-400.text-white,
  html.light .bg-indigo-500.text-white,
  html.light .bg-indigo-600.text-white,
  html.light .bg-emerald-500.text-white,
  html.light .bg-rose-500.text-white,
  html.light .bg-slate-700.text-white,
  html.light .bg-slate-800.text-white { color: #ffffff; }

  html.light .hover\:bg-indigo-400:hover.text-white,
  html.light .hover\:bg-emerald-400:hover.text-white { color: #ffffff; }

  html.light .file\:text-white::file-selector-button { color: #ffffff; }

  html.light .selection\:text-white::selection { color: #ffffff; }
  html.light .selection\:text-white *::selection { color: #ffffff; }
  html.light .hover\:bg-indigo-400:hover { background-color: #4338ca; }
  html.light .bg-indigo-400 { background-color: #6366f1; }
  html.light .bg-indigo-600 { background-color: #4338ca; }

  /* Tap targets stay comfortable on touch screens */
  @media (hover: none) {
    header nav a, footer a { padding-top: .35rem; padding-bottom: .35rem; }
  }


  /* ---------- Liquid hero background -------------------------------------
     Three blurred colour fields drifting slowly behind the headline.
     Decorative: no content depends on it, and it holds still for anyone
     who has asked for reduced motion. */
  .liquid {
    position: absolute;
    inset: -35% -10% auto -10%;
    height: 150%;
    pointer-events: none;
    filter: blur(70px);
    opacity: .75;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 95%);
  }
  .liquid__blob {
    position: absolute;
    display: block;
    border-radius: 45% 55% 52% 48% / 52% 44% 56% 48%;
    will-change: transform;
  }
  .liquid__blob--a {
    top: 12%; left: 6%; width: 46%; height: 62%;
    background: radial-gradient(closest-side, #4f46e5, transparent 72%);
    animation: liquid-a 26s ease-in-out infinite alternate;
  }
  .liquid__blob--b {
    top: 0; right: 4%; width: 42%; height: 58%;
    background: radial-gradient(closest-side, #2563eb, transparent 72%);
    animation: liquid-b 32s ease-in-out infinite alternate;
  }
  .liquid__blob--c {
    bottom: 6%; left: 34%; width: 38%; height: 52%;
    background: radial-gradient(closest-side, #7c3aed, transparent 74%);
    animation: liquid-c 38s ease-in-out infinite alternate;
  }
  @keyframes liquid-a {
    0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
    100% { transform: translate3d(14%, 8%, 0) scale(1.18) rotate(28deg); }
  }
  @keyframes liquid-b {
    0%   { transform: translate3d(0,0,0) scale(1.06) rotate(0deg); }
    100% { transform: translate3d(-12%, 12%, 0) scale(.92) rotate(-24deg); }
  }
  @keyframes liquid-c {
    0%   { transform: translate3d(0,0,0) scale(.95) rotate(0deg); }
    100% { transform: translate3d(8%, -14%, 0) scale(1.15) rotate(18deg); }
  }
  html.light .liquid { opacity: .32; filter: blur(80px); }

  /* ---------- Service ticker ---------- */
  .ticker { overflow: hidden; }
  .ticker__track { display: flex; width: max-content; animation: ticker 42s linear infinite; }
  @keyframes ticker { to { transform: translateX(-50%); } }
  .ticker:hover .ticker__track { animation-play-state: paused; }


  /* ---------- Homepage services (cards + expanding panel) ---------------- */
  .svc-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 3rem; }
  @media (min-width: 640px)  { .svc-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

  .svc-card {
    position: relative; overflow: hidden; width: 100%;
    display: block; text-align: left; font: inherit; cursor: pointer;
    border: 1px solid #1e293b; border-radius: .85rem;
    background: rgba(15, 23, 42, .55);
    padding: 1.5rem 1.3rem 1.3rem;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .svc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hue); opacity: .9; }
  .svc-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hue) 65%, transparent); }
  .svc-card[aria-expanded="true"] { border-color: var(--hue); background: color-mix(in srgb, var(--hue) 10%, transparent); }
  .svc-row { display: flex; align-items: center; gap: .6rem; color: var(--hue); }
  .svc-ico { width: 1.35rem; height: 1.35rem; }
  .svc-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
  .svc-name { display: block; margin-top: .8rem; color: #f8fafc; font-weight: 700; font-size: .98rem; }
  .svc-one { display: block; margin-top: .4rem; color: #94a3b8; font-size: .84rem; line-height: 1.6; }
  .svc-plus { position: absolute; top: 1.3rem; right: 1rem; width: .95rem; height: .95rem; color: #64748b; transition: transform .2s ease, color .2s ease; }
  .svc-card[aria-expanded="true"] .svc-plus { transform: rotate(45deg); color: var(--hue); }

  .svc-drawer {
    grid-column: 1 / -1; position: relative; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--hue) 55%, transparent);
    border-radius: .9rem; background: color-mix(in srgb, var(--hue) 7%, transparent);
    padding: 1.5rem 1.6rem;
  }
  .svc-ghost { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); width: 20rem; opacity: .16; pointer-events: none; }
  .svc-ghost svg { width: 100%; height: auto; }
  .svc-art .a1 { fill: color-mix(in srgb, var(--hue) 12%, transparent); stroke: color-mix(in srgb, var(--hue) 45%, transparent); stroke-width: 1.5; }
  .svc-art .a2 { fill: color-mix(in srgb, var(--hue) 26%, transparent); }
  .svc-art .a3 { fill: var(--hue); }
  .svc-art .a4 { stroke: var(--hue); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .svc-inner { position: relative; max-width: 42rem; }
  .svc-h { margin: 0; color: #f8fafc; font-size: 1.02rem; font-weight: 700; }
  .svc-lead { margin: .45rem 0 0; color: #94a3b8; font-size: .88rem; line-height: 1.6; max-width: 52ch; }
  .svc-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .95rem 0 0; padding: 0; list-style: none; }
  .svc-chip { font-size: .79rem; padding: .28rem .6rem; border-radius: 99px; color: #f8fafc;
              border: 1px solid color-mix(in srgb, var(--hue) 40%, transparent); }
  .svc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.1rem; }
  .svc-a1 { color: var(--hue); font-size: .82rem; font-weight: 700; text-decoration: none; }
  .svc-a2 { color: #64748b; font-size: .82rem; font-weight: 700; text-decoration: none; }
  .svc-a2:hover { color: #f8fafc; }

  html.light .svc-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .svc-name, html.light .svc-h, html.light .svc-chip { color: #0f172a; }
  html.light .svc-one, html.light .svc-lead { color: #475569; }
  html.light .svc-plus, html.light .svc-a2 { color: #94a3b8; }
  html.light .svc-a2:hover { color: #0f172a; }
  html.light .svc-ghost { opacity: .2; }


  /* ---------- Homepage strategy steps ---------------------------------- */
  .str { margin-top: 2.5rem; }
  .str-tabs { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid #1e293b; padding-bottom: 1rem; }
  .str-tab {
    display: flex; align-items: center; gap: .6rem; cursor: pointer;
    border: 1px solid #1e293b; background: none; border-radius: 99px;
    padding: .55rem 1rem; font: inherit; font-size: .82rem; color: #94a3b8;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
  }
  .str-tab:hover { color: #f8fafc; }
  .str-tab[aria-selected="true"] { background: #6366f1; border-color: #6366f1; color: #fff; }
  .str-tab-n { font-weight: 800; font-size: .75rem; opacity: .85; }

  .str-pane { margin-top: 1.9rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .str-pane { grid-template-columns: .5fr 1.5fr; gap: 3rem; align-items: start; } }
  .str-big { margin: 0; font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -.04em;
             color: color-mix(in srgb, #6366f1 32%, transparent); }
  .str-label { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #818cf8; }
  .str-h { margin: .45rem 0 0; color: #f8fafc; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
  .str-p { margin: .6rem 0 0; color: #94a3b8; font-size: .95rem; line-height: 1.7; max-width: 54ch; }

  .str-prog { display: flex; gap: .3rem; margin-top: 2rem; }
  .str-seg { height: 3px; flex: 1; border-radius: 99px; background: #1e293b; transition: background .2s ease; }
  .str-seg.is-on { background: #6366f1; }

  html.light .str-tabs { border-color: #e2e8f0; }
  html.light .str-tab { border-color: #e2e8f0; color: #475569; }
  html.light .str-tab:hover { color: #0f172a; }
  html.light .str-tab[aria-selected="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  html.light .str-h { color: #0f172a; }
  html.light .str-p { color: #475569; }
  html.light .str-label { color: #4338ca; }
  html.light .str-big { color: color-mix(in srgb, #4f46e5 26%, transparent); }
  html.light .str-seg { background: #e2e8f0; }
  html.light .str-seg.is-on { background: #4f46e5; }


  /* ---------- Strategy steps (cards + panel) ---------------------------- */
  .stp { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
  @media (min-width: 640px) { .stp { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 900px) { .stp { grid-template-columns: repeat(4, 1fr); } }

  .stp-card { --hue: #6366f1; }
  html.light .stp-card, html.light .stp-drawer { --hue: #4f46e5; }
  .stp-card {
    position: relative; width: 100%; text-align: left; font: inherit; cursor: pointer;
    border: 1px solid #1e293b; border-radius: .85rem; background: rgba(15, 23, 42, .55);
    padding: 1.3rem; transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .stp-card:hover { transform: translateY(-2px); border-color: #4f46e5; }
  .stp-card[aria-expanded="true"] {
    border-color: #6366f1;
    background: color-mix(in srgb, #6366f1 16%, transparent);
    box-shadow: 0 0 0 1px #6366f1, 0 14px 32px -20px rgba(99, 102, 241, .85);
    transform: translateY(-2px);
  }
  .stp-n { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
           color: color-mix(in srgb, #6366f1 45%, transparent); }
  .stp-card[aria-expanded="true"] .stp-n { color: #818cf8; }
  .stp-t { display: block; margin-top: .7rem; color: #f8fafc; font-weight: 700; font-size: .95rem; }
  .stp-plus { position: absolute; top: 1.2rem; right: 1rem; width: .9rem; height: .9rem; color: #64748b;
              transition: transform .2s ease, color .2s ease; }
  .stp-card[aria-expanded="true"] .stp-plus { transform: rotate(45deg); color: #818cf8; }

  .stp-drawer {
    grid-column: 1 / -1; position: relative; overflow: hidden;
    border: 1px solid color-mix(in srgb, #6366f1 55%, transparent); border-radius: .9rem;
    background: color-mix(in srgb, #6366f1 7%, transparent); padding: 1.6rem 1.7rem;
    --hue: #6366f1;
  }
  .stp-ghost { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); width: 21rem; opacity: .16; pointer-events: none; }
  .stp-ghost svg { width: 100%; height: auto; }
  .stp-inner { position: relative; max-width: 46rem; }
  .stp-label { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #818cf8; }
  .stp-h { margin: .4rem 0 0; color: #f8fafc; font-size: 1.15rem; font-weight: 700; }
  .stp-p { margin: .6rem 0 0; color: #94a3b8; font-size: .92rem; line-height: 1.7; max-width: 56ch; }


  /* progress bar at the foot of each step box */
  .stp-bar { display: block; margin-top: 1.1rem; height: 3px; border-radius: 99px;
             background: #1e293b; overflow: hidden; }
  .stp-bar > i { display: block; height: 100%; width: 0; border-radius: 99px;
                 background: linear-gradient(90deg, #6366f1, #818cf8);
                 transition: width .45s cubic-bezier(.4, 0, .2, 1); }
  .stp-card[aria-expanded="true"] .stp-bar > i { width: 100%; }
  .stp-card:hover .stp-bar > i { width: 28%; }
  .stp-card[aria-expanded="true"]:hover .stp-bar > i { width: 100%; }
  html.light .stp-bar { background: #e2e8f0; }
  html.light .stp-bar > i { background: linear-gradient(90deg, #4f46e5, #6366f1); }

  html.light .stp-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .stp-t, html.light .stp-h { color: #0f172a; }
  html.light .stp-p { color: #475569; }
  html.light .stp-plus { color: #94a3b8; }
  html.light .stp-label { color: #4338ca; }
  html.light .stp-ghost { opacity: .2; }


  /* ---------- Open card: full width, animation beside the title ---------- */
  .stp .stp-card, .svc-grid .svc-card { order: 10; }
  .stp .stp-drawer, .svc-grid .svc-drawer { order: 1; grid-column: 1 / -1; }
  .stp .stp-card[aria-expanded="true"],
  .svc-grid .svc-card[aria-expanded="true"] { order: 0; grid-column: 1 / -1; }

  /* the four steps close up into one line while one of them is open */
  @media (min-width: 640px) { .stp.is-open { grid-template-columns: repeat(3, 1fr); } }

  .stp-head, .svc-head { display: block; }
  .stp-anim, .svc-anim { display: none; }
  .stp-card[aria-expanded="true"] .stp-anim,
  .svc-card[aria-expanded="true"] .svc-anim { display: block; margin: 1.4rem auto 0; max-width: 18rem; }
  .stp-anim svg, .svc-anim svg { display: block; width: 100%; height: auto; }

  .stp-card[aria-expanded="true"] { min-height: 12rem; }
  .stp-card[aria-expanded="true"] .stp-n { font-size: 2.1rem; }
  .stp-card[aria-expanded="true"] .stp-t { font-size: 1.35rem; letter-spacing: -.01em; }
  .stp-card[aria-expanded="true"] .stp-bar { max-width: 14rem; }
  .svc-card[aria-expanded="true"] .svc-name { font-size: 1.35rem; letter-spacing: -.01em; }

  @media (min-width: 900px) {
    .stp-card[aria-expanded="true"], .svc-card[aria-expanded="true"] {
      display: grid; grid-template-columns: 1fr 1.05fr; gap: 2rem; align-items: center;
    }
    .stp-card[aria-expanded="true"] .stp-head,
    .svc-card[aria-expanded="true"] .svc-head { align-self: center; }
    .stp-card[aria-expanded="true"] .stp-anim,
    .svc-card[aria-expanded="true"] .svc-anim { margin: 0 0 0 auto; max-width: 22rem; }
  }

  /* ---------- The animations, running only while a card is open ---------- */
  .an .tk { stroke-dasharray: 70; stroke-dashoffset: 70; }
  .an .ln { stroke-dasharray: 340; stroke-dashoffset: 340; }
  .an .gb, .an .mid, .an .ring, .an .dot, .an .tile, .an .bar, .an .tw,
  .an .slot, .an .r1, .an .r2, .an .r3, .an .cur, .an .head, .an .bl2 {
    transform-box: fill-box; transform-origin: center;
  }
  .an .gb, .an .tw { transform-origin: left center; }
  .an .bar { transform-origin: bottom center; }
  .an .ring { opacity: 0; }

  /* 01 Analyse: the magnifier passes over the document */
  :is([aria-expanded="true"], .is-in) .an-analyse .mag { animation: anSweep 4s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-analyse .tk { animation: anDraw 4s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-analyse .l1,
  :is([aria-expanded="true"], .is-in) .an-analyse .l2,
  :is([aria-expanded="true"], .is-in) .an-analyse .l3,
  :is([aria-expanded="true"], .is-in) .an-analyse .l4 { animation: anBlink 4s ease-in-out infinite; }
  .an-analyse .l2 { animation-delay: .2s; }
  .an-analyse .l3 { animation-delay: .4s; }
  .an-analyse .l4 { animation-delay: .6s; }
  @keyframes anSweep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-132px); } }
  @keyframes anDraw { 0%, 12% { stroke-dashoffset: 70; } 45%, 100% { stroke-dashoffset: 0; } }
  @keyframes anBlink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

  /* 02 Plan und Budget: approvals tick in, budgets fill */
  :is([aria-expanded="true"], .is-in) .an-plan .t1 { animation: anDraw2 3s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-plan .t2 { animation: anDraw2 3s ease-out .45s infinite; }
  :is([aria-expanded="true"], .is-in) .an-plan .g1 { animation: anGrow 3s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-plan .g2 { animation: anGrow 3s ease-in-out .25s infinite; }
  :is([aria-expanded="true"], .is-in) .an-plan .g3 { animation: anGrow 3s ease-in-out .5s infinite; }
  @keyframes anDraw2 { 0%, 8% { stroke-dashoffset: 70; } 40%, 100% { stroke-dashoffset: 0; } }
  @keyframes anGrow { 0% { transform: scaleX(.22); } 50%, 100% { transform: scaleX(1); } }

  /* 03 Start: one variant is promoted */
  :is([aria-expanded="true"], .is-in) .an-start .mid { animation: anPulse 2.8s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-start .ring { animation: anRing 2.8s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-start .s1 { animation: anFade 2.8s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-start .s2 { animation: anFade 2.8s ease-in-out .3s infinite; }
  @keyframes anPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
  @keyframes anRing { 0% { transform: scale(.85); opacity: .75; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
  @keyframes anFade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

  /* 04 Auswertung: the result line draws itself */
  :is([aria-expanded="true"], .is-in) .an-ausbau .ln { animation: anLine 3.4s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-ausbau .dot { animation: anDot 3.4s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-ausbau .v1 { animation: anRise 3.4s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-ausbau .v2 { animation: anRise 3.4s ease-out .15s infinite; }
  :is([aria-expanded="true"], .is-in) .an-ausbau .v3 { animation: anRise 3.4s ease-out .3s infinite; }
  @keyframes anLine { 0%, 6% { stroke-dashoffset: 340; } 58%, 100% { stroke-dashoffset: 0; } }
  @keyframes anDot { 0%, 52% { opacity: 0; transform: scale(.4); } 68% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes anRise { 0% { opacity: .3; transform: translateY(4px); } 30%, 100% { opacity: 1; transform: translateY(0); } }

  /* Content creation: the copy writes itself, the picture drops in */
  :is([aria-expanded="true"], .is-in) .an-content .w1 { animation: anType 3.6s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-content .w2 { animation: anType 3.6s ease-out .3s infinite; }
  :is([aria-expanded="true"], .is-in) .an-content .w3 { animation: anType 3.6s ease-out .6s infinite; }
  :is([aria-expanded="true"], .is-in) .an-content .w4 { animation: anType 3.6s ease-out .9s infinite; }
  :is([aria-expanded="true"], .is-in) .an-content .ph { animation: anPop 3.6s ease-out 1.1s infinite; }
  :is([aria-expanded="true"], .is-in) .an-content .ph2 { animation: anPop 3.6s ease-out 1.3s infinite; }
  @keyframes anType { 0%, 4% { transform: scaleX(0); } 26%, 100% { transform: scaleX(1); } }
  @keyframes anPop { 0%, 8% { opacity: 0; } 30%, 100% { opacity: 1; } }

  /* Media publishing: a slot moves through the calendar, posts go out */
  :is([aria-expanded="true"], .is-in) .an-media .slot { animation: anSlot 6s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-media .p1 { animation: anSlide 6s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-media .p2 { animation: anSlide 6s ease-out 1.5s infinite; }
  :is([aria-expanded="true"], .is-in) .an-media .p3 { animation: anSlide 6s ease-out 3s infinite; }
  @keyframes anSlot {
    0%, 14% { transform: translate(0, 0); }
    22%, 39% { transform: translate(64px, 0); }
    47%, 64% { transform: translate(32px, 26px); }
    72%, 89% { transform: translate(96px, 52px); }
    100% { transform: translate(0, 0); }
  }
  @keyframes anSlide { 0%, 6% { opacity: 0; transform: translateX(-14px); } 22%, 92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }

  /* Social media: a conversation, then a reaction */
  :is([aria-expanded="true"], .is-in) .an-social .b1 { animation: anBub 4.4s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-social .b2 { animation: anBub 4.4s ease-out .8s infinite; }
  :is([aria-expanded="true"], .is-in) .an-social .hb { animation: anPopIn 4.4s ease-out 1.8s infinite; }
  @keyframes anBub { 0%, 5% { opacity: 0; transform: translateY(10px); } 22%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
  @keyframes anPopIn { 0%, 6% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.2); } 26%, 84% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

  /* Ads: budget columns build up, the trend line follows */
  :is([aria-expanded="true"], .is-in) .an-ads .b1 { animation: anBar 3.6s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-ads .b2 { animation: anBar 3.6s ease-out .12s infinite; }
  :is([aria-expanded="true"], .is-in) .an-ads .b3 { animation: anBar 3.6s ease-out .24s infinite; }
  :is([aria-expanded="true"], .is-in) .an-ads .b4 { animation: anBar 3.6s ease-out .36s infinite; }
  :is([aria-expanded="true"], .is-in) .an-ads .b5 { animation: anBar 3.6s ease-out .48s infinite; }
  :is([aria-expanded="true"], .is-in) .an-ads .ln { animation: anLine 3.6s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-ads .dot { animation: anDot 3.6s ease-out infinite; }
  @keyframes anBar { 0%, 4% { transform: scaleY(.12); } 34%, 100% { transform: scaleY(1); } }

  /* SEO: the third result climbs to the top */
  :is([aria-expanded="true"], .is-in) .an-seo .r1 { animation: anDown 4.2s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-seo .r2 { animation: anDown 4.2s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-seo .r3 { animation: anUp 4.2s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-seo .arw { animation: anArw 4.2s ease-in-out infinite; }
  @keyframes anUp { 0%, 14% { transform: translateY(0); } 52%, 88% { transform: translateY(-64px); } 100% { transform: translateY(0); } }
  @keyframes anDown { 0%, 14% { transform: translateY(0); } 52%, 88% { transform: translateY(32px); } 100% { transform: translateY(0); } }
  @keyframes anArw { 0%, 10% { opacity: 0; } 30%, 86% { opacity: 1; } 100% { opacity: 0; } }

  /* Development: the brackets breathe, the caret blinks */
  :is([aria-expanded="true"], .is-in) .an-dev .br1 { animation: anBr1 3.2s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-dev .br2 { animation: anBr2 3.2s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-dev .sl { animation: anBlink 3.2s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-dev .car { animation: anCaret 1.1s steps(1) infinite; }
  @keyframes anBr1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-9px); } }
  @keyframes anBr2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
  @keyframes anCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

  /* UI/UX: the pointer moves from one screen to the other */
  :is([aria-expanded="true"], .is-in) .an-uiux .cur { animation: anCur 4.6s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-uiux .bl1 { animation: anSel 4.6s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-uiux .bl2 { animation: anSel 4.6s ease-in-out 1.6s infinite; }
  @keyframes anCur {
    0% { transform: translate(64px, 96px); }
    28% { transform: translate(64px, 84px); }
    60%, 72% { transform: translate(214px, 66px); }
    100% { transform: translate(64px, 96px); }
  }
  @keyframes anSel { 0%, 20% { opacity: .55; } 32%, 52% { opacity: 1; } 70%, 100% { opacity: .55; } }

  /* Video: the playhead runs across the cut */
  :is([aria-expanded="true"], .is-in) .an-video .mid { animation: anPulse 3.8s ease-in-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-video .ring { animation: anRing 3.8s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-video .head { animation: anHead 3.8s linear infinite; }
  :is([aria-expanded="true"], .is-in) .an-video .f1 { animation: anFrame 3.8s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-video .f2 { animation: anFrame 3.8s ease-out .68s infinite; }
  :is([aria-expanded="true"], .is-in) .an-video .f3 { animation: anFrame 3.8s ease-out 1.36s infinite; }
  :is([aria-expanded="true"], .is-in) .an-video .f4 { animation: anFrame 3.8s ease-out 2.04s infinite; }
  :is([aria-expanded="true"], .is-in) .an-video .f5 { animation: anFrame 3.8s ease-out 2.72s infinite; }
  @keyframes anHead { 0% { transform: translateX(0); } 100% { transform: translateX(268px); } }
  @keyframes anFrame { 0%, 6% { opacity: .5; } 12% { opacity: 1; } 30%, 100% { opacity: .5; } }


  /* ---------- Article feed: rows with a thumbnail ----------------------- */
  .ar-v3 { border-top: 1px solid #1e293b; }
  .ar-card { border-bottom: 1px solid #1e293b; }
  .ar-link { display: grid; gap: 1.25rem; padding: 1.6rem 0; grid-template-columns: 1fr;
             color: inherit; text-decoration: none; }
  @media (min-width: 700px) { .ar-link { grid-template-columns: 13rem 1fr; align-items: center; } }
  .ar-shot { overflow: hidden; border-radius: .9rem; border: 1px solid #1e293b; background: #0f172a; }
  .ar-shot img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover;
                 transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  .ar-link:hover .ar-shot img { transform: scale(1.04); }
  .ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .72rem; color: #64748b; }
  .ar-tag { border-radius: .3rem; background: rgba(30, 41, 59, .8); padding: .1rem .45rem; color: #94a3b8; }
  .ar-title { margin: .55rem 0 0; color: #f8fafc; font-weight: 700; font-size: 1.25rem; line-height: 1.35; letter-spacing: -.01em; }
  .ar-link:hover .ar-title { color: #a5b4fc; }
  .ar-sum { margin: .5rem 0 0; color: #94a3b8; font-size: .9rem; line-height: 1.7; max-width: 62ch; }

  html.light .ar-v3, html.light .ar-card { border-color: #e2e8f0; }
  html.light .ar-shot { border-color: #e2e8f0; background: #f1f5f9; }
  html.light .ar-title { color: #0f172a; }
  html.light .ar-link:hover .ar-title { color: #4338ca; }
  html.light .ar-sum { color: #475569; }
  html.light .ar-tag { background: #e2e8f0; color: #475569; }


  /* ---------- FAQ -------------------------------------------------------- */
  .fq { margin-top: 2.5rem; border-top: 1px solid #1e293b; }
  .fq-item { border-bottom: 1px solid #1e293b; }
  .fq-h { margin: 0; }
  .fq-btn {
    display: flex; width: 100%; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; padding: 1.4rem 0; background: none; border: 0; cursor: pointer;
    font: inherit; text-align: left; color: inherit;
  }
  .fq-q { color: #f8fafc; font-size: 1.05rem; font-weight: 600; line-height: 1.45;
          transition: color .18s ease; }
  .fq-btn:hover .fq-q { color: #a5b4fc; }
  .fq-ico { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem; color: #64748b;
            transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .2s ease; }
  .fq-btn[aria-expanded="true"] .fq-q { color: #a5b4fc; }
  .fq-btn[aria-expanded="true"] .fq-ico { transform: rotate(135deg); color: #818cf8; }

  /* the panel opens by growing its grid row, so no height is measured in JS */
  .fq-panel { display: grid; grid-template-rows: 0fr; opacity: 0;
              transition: grid-template-rows .36s cubic-bezier(.4, 0, .2, 1), opacity .28s ease; }
  .fq-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
  .fq-inner { overflow: hidden; min-height: 0; }
  .fq-a { margin: 0; padding: 0 2.5rem 1.6rem 0; color: #94a3b8; font-size: .95rem;
          line-height: 1.75; max-width: 70ch;
          transform: translateY(-6px); transition: transform .36s cubic-bezier(.4, 0, .2, 1); }
  .fq-panel.is-open .fq-a { transform: translateY(0); }

  .fq-foot {
    display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: center;
    margin-top: 2.75rem; padding: 2rem 2rem 2.25rem;
    border: 1px solid #6366f1; border-radius: 1rem;
    background: color-mix(in srgb, #6366f1 13%, transparent);
    box-shadow: 0 0 0 1px #6366f1, 0 18px 40px -26px rgba(99, 102, 241, .8);
  }
  @media (min-width: 900px) { .fq-foot { grid-template-columns: 1fr 1.05fr; gap: 3rem; } }
  .fq-foot-h { margin: 0; color: #f8fafc; font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; }
  .fq-foot-p { margin: .6rem 0 0; color: #94a3b8; font-size: .95rem; line-height: 1.7; max-width: 46ch; }
  .fq-cta { display: inline-block; margin-top: 1.4rem; border-radius: .6rem; background: #6366f1;
            color: #fff; padding: .85rem 1.7rem; font-size: .88rem; font-weight: 600;
            text-decoration: none; transition: background .18s ease, transform .18s ease; }
  .fq-cta:hover { background: #818cf8; transform: translateY(-1px); }
  .fq-foot-art { margin: 0 auto; max-width: 17rem; width: 100%; }
  @media (min-width: 900px) { .fq-foot-art { margin: 0 0 0 auto; max-width: 21rem; } }
  .fq-foot-art svg { display: block; width: 100%; height: auto; }

  .fq-foot-art .w1 { animation: anType 5s ease-out infinite; }
  .fq-foot-art .w2 { animation: anType 5s ease-out .18s infinite; }
  .fq-foot-art .w3 { animation: anType 5s ease-out .36s infinite; }
  .fq-foot-art .w4 { animation: anType 5s ease-out .54s infinite; }
  .fq-foot-art .plane { transform-box: fill-box; transform-origin: center;
                        animation: anPlane 5s cubic-bezier(.4, 0, .2, 1) infinite; }
  .fq-foot-art .ring { animation: anRing 5s ease-out 2.1s infinite; }
  @keyframes anPlane {
    0%, 34% { transform: translate(-30px, 26px) scale(.82); opacity: 0; }
    46% { transform: translate(0, 0) scale(1); opacity: 1; }
    72% { transform: translate(14px, -12px) scale(1); opacity: 1; }
    92%, 100% { transform: translate(64px, -54px) scale(.88); opacity: 0; }
  }

  html.light .fq, html.light .fq-item { border-color: #e2e8f0; }
  html.light .fq-q { color: #0f172a; }
  html.light .fq-btn:hover .fq-q, html.light .fq-btn[aria-expanded="true"] .fq-q { color: #4338ca; }
  html.light .fq-btn[aria-expanded="true"] .fq-ico { color: #4f46e5; }
  html.light .fq-a { color: #475569; }

  html.light .fq-foot { border-color: #4f46e5; box-shadow: 0 0 0 1px #4f46e5, 0 18px 40px -28px rgba(79, 70, 229, .55);
                        background: color-mix(in srgb, #4f46e5 9%, transparent); }
  html.light .fq-foot-h { color: #0f172a; }
  html.light .fq-foot-p { color: #475569; }
  html.light .fq-cta { background: #4f46e5; }
  html.light .fq-cta:hover { background: #4338ca; }

  /* ---------- Hero motion ------------------------------------------------ */
  .hero-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
      linear-gradient(to right, rgba(148, 163, 184, .16) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(148, 163, 184, .16) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
    animation: heroGrid 34s linear infinite;
  }
  @keyframes heroGrid { from { background-position: 0 0; } to { background-position: 64px 64px; } }
  html.light .hero-grid { opacity: .7; background-image:
      linear-gradient(to right, rgba(71, 85, 105, .14) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(71, 85, 105, .14) 1px, transparent 1px); }

  .hero-copy > * { animation: heroIn .85s cubic-bezier(.16, .84, .44, 1) both; }
  .hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero-copy > *:nth-child(2) { animation-delay: .16s; }
  .hero-copy > *:nth-child(3) { animation-delay: .3s; }
  .hero-copy > *:nth-child(4) { animation-delay: .44s; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .hero-copy h1 span { animation: heroGlow 6s ease-in-out infinite; }
  @keyframes heroGlow {
    0%, 100% { text-shadow: 0 0 0 rgba(129, 140, 248, 0); }
    50% { text-shadow: 0 0 26px rgba(129, 140, 248, .45); }
  }


  /* ---------- FAQ: illustration beside the answer ------------------------ */
  .fq, .fq-foot { --hue: #6366f1; }
  html.light .fq, html.light .fq-foot { --hue: #4f46e5; }
  .fq-row { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; }
  @media (min-width: 900px) { .fq-row { grid-template-columns: 1fr 13rem; gap: 3rem; } }
  .fq-art { display: none; }
  @media (min-width: 900px) { .fq-art { display: block; padding-bottom: 1.6rem; } }
  .fq-art svg { display: block; width: 100%; height: auto; opacity: .95; }

  .fq-item { opacity: 0; transform: translateY(14px);
             transition: opacity .55s ease, transform .55s cubic-bezier(.16, .84, .44, 1); }
  .fq-item.is-in { opacity: 1; transform: none; }

  .an-price .tk, .an-own .tk { stroke-dasharray: 60; stroke-dashoffset: 60; }
  .an .pl, .an .coin, .an .mslot, .an .shk, .an .one, .an .mo, .an .mi, .an .key, .an .bar1, .an .bar2 {
    transform-box: fill-box; transform-origin: center;
  }
  .an .pl, .an .bar1, .an .bar2 { transform-origin: left center; }

  :is(.fq-panel.is-open, .is-in) .an-price .p1 { animation: anType 3.2s ease-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-price .p2 { animation: anType 3.2s ease-out .2s infinite; }
  :is(.fq-panel.is-open, .is-in) .an-price .p3 { animation: anType 3.2s ease-out .4s infinite; }
  :is(.fq-panel.is-open, .is-in) .an-price .tk { animation: anDraw2 3.2s ease-out .6s infinite; }

  :is(.fq-panel.is-open, .is-in) .an-term .mslot { animation: anMonth 4.4s ease-in-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-term .shk { animation: anShackle 4.4s ease-in-out infinite; }
  @keyframes anMonth {
    0%, 16% { transform: translateX(0); }
    27%, 43% { transform: translateX(36px); }
    54%, 70% { transform: translateX(72px); }
    81%, 100% { transform: translateX(0); }
  }
  @keyframes anShackle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

  :is(.fq-panel.is-open, .is-in) .an-budget .coin { animation: anCoin 3.4s ease-in-out infinite; }
  @keyframes anCoin {
    0%, 8% { transform: translate(-46px, 0); opacity: 0; }
    22% { opacity: 1; }
    62% { transform: translate(52px, -6px); opacity: 1; }
    76%, 100% { transform: translate(52px, -6px); opacity: 0; }
  }

  :is(.fq-panel.is-open, .is-in) .an-own .tk { animation: anDraw2 3.4s ease-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-own .key { animation: anKey 3.4s ease-in-out infinite; }
  @keyframes anKey { 0%, 60% { transform: rotate(0); } 78%, 100% { transform: rotate(-22deg); } }

  :is(.fq-panel.is-open, .is-in) .an-single .o1 { animation: anPick 3.6s ease-in-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-single .o2,
  :is(.fq-panel.is-open, .is-in) .an-single .o3,
  :is(.fq-panel.is-open, .is-in) .an-single .o4 { animation: anDim 3.6s ease-in-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-single .bar1 { animation: anGrow 3.6s ease-in-out .3s infinite; }
  :is(.fq-panel.is-open, .is-in) .an-single .bar2 { animation: anGrow 3.6s ease-in-out .5s infinite; }
  @keyframes anPick { 0%, 14% { opacity: .55; transform: scale(1); } 38%, 100% { opacity: 1; transform: scale(1.08); } }
  @keyframes anDim { 0%, 14% { opacity: .55; } 38%, 100% { opacity: .2; } }

  :is(.fq-panel.is-open, .is-in) .an-reply .mo { animation: anBub 4s ease-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-reply .mi { animation: anBub 4s ease-out .9s infinite; }

  /* ---------- Hero, second pass ------------------------------------------ */
  .hero-spot {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 46% 42% at 50% 36%, rgba(129, 140, 248, .22), transparent 70%);
    animation: heroSpot 9s ease-in-out infinite;
  }
  @keyframes heroSpot { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.09); } }
  html.light .hero-spot { background: radial-gradient(ellipse 46% 42% at 50% 36%, rgba(79, 70, 229, .12), transparent 70%); }

  /* a live dot in front of the eyebrow line */
  .hero-copy > p:first-child { position: relative; }
  .hero-copy > p:first-child::before {
    content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 99px;
    margin-right: .55rem; vertical-align: middle; background: #818cf8;
    box-shadow: 0 0 0 0 rgba(129, 140, 248, .6); animation: heroDot 2.4s ease-out infinite;
  }
  @keyframes heroDot {
    0% { box-shadow: 0 0 0 0 rgba(129, 140, 248, .55); }
    70% { box-shadow: 0 0 0 .7rem rgba(129, 140, 248, 0); }
    100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
  }

  /* the accent words carry a slow colour sweep instead of a flat tint */
  .hero-copy h1 span {
    background-image: linear-gradient(100deg, #818cf8 0%, #c4b5fd 22%, #60a5fa 44%, #818cf8 66%, #a78bfa 88%, #818cf8 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: heroSweep 9s linear infinite, heroGlow 6s ease-in-out infinite;
  }
  @keyframes heroSweep { from { background-position: 0% 50%; } to { background-position: 260% 50%; } }
  html.light .hero-copy h1 span {
    background-image: linear-gradient(100deg, #4f46e5 0%, #7c3aed 25%, #2563eb 50%, #4f46e5 75%, #4338ca 100%);
  }

  /* a sheen crossing the primary button now and then */
  .hero-cta a:last-child { position: relative; overflow: hidden; }
  .hero-cta a:last-child::after {
    content: ""; position: absolute; top: -60%; bottom: -60%; left: -40%; width: 35%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg); animation: heroSheen 5.5s ease-in-out infinite;
  }
  @keyframes heroSheen { 0%, 62% { left: -45%; } 88%, 100% { left: 125%; } }

  /* a quiet hint that there is more below */
  .hero-cue { display: flex; justify-content: center; margin-top: 3.25rem; }
  .hero-cue span {
    display: block; width: 1.4rem; height: 2.3rem; border-radius: 99px;
    border: 1px solid #334155; position: relative;
  }
  .hero-cue span::after {
    content: ""; position: absolute; left: 50%; top: .45rem; width: .26rem; height: .26rem;
    margin-left: -.13rem; border-radius: 99px; background: #818cf8;
    animation: heroCue 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
  }
  @keyframes heroCue {
    0% { transform: translateY(0); opacity: 0; }
    22% { opacity: 1; }
    72% { transform: translateY(.85rem); opacity: 0; }
    100% { transform: translateY(.85rem); opacity: 0; }
  }
  html.light .hero-cue span { border-color: #cbd5e1; }
  .hero-copy > *:nth-child(5) { animation-delay: .58s; }


  /* ---------- Hero fits the screen it is shown on ------------------------ */
  .hero-sec {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 4rem);
    min-height: calc(100svh - 4rem);
  }
  .hero-copy {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(1.5rem, 5vh, 3.5rem);
    padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
  }
  /* type scales with the width and is capped against the height, so a short
     laptop screen gets smaller text rather than a headline that runs off */
  .hero-copy h1 {
    font-size: min(clamp(1.85rem, 5.6vw, 4.2rem), 8vh);
    line-height: 1.05;
    margin-top: clamp(.9rem, 2.2vh, 1.5rem);
  }
  .hero-copy > p:first-of-type { font-size: clamp(.78rem, 1.5vw, .9rem); }
  .hero-copy > [data-hero-lead] {
    font-size: min(clamp(.95rem, 1.45vw, 1.12rem), 2.5vh);
    line-height: 1.6;
    margin-top: clamp(.9rem, 2.6vh, 2rem);
  }
  .hero-cta { margin-top: clamp(1.1rem, 3.4vh, 2.5rem); }
  .hero-cue { margin-top: clamp(1rem, 3.4vh, 2.75rem); }
  .hero-cta a { padding-top: .8rem; padding-bottom: .8rem; }


  /* short screens: drop the hint and tighten the type so nothing is cut off */
  @media (max-height: 700px) and (max-width: 620px) {
    .hero-copy { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    .hero-copy h1 { font-size: min(clamp(1.45rem, 6.6vw, 2rem), 7vh); margin-top: .7rem; }
    .hero-copy > [data-hero-lead] { margin-top: .8rem; font-size: .9rem; line-height: 1.55; }
    .hero-cta { margin-top: 1rem; }
    .hero-cue { display: none; }
  }

  /* landscape phones are too short for the scroll hint */
  @media (max-height: 560px) {
    .hero-cue { display: none; }
    .hero-copy h1 { font-size: min(clamp(1.6rem, 5vw, 3rem), 9.5vh); }
  }


  /* ---------- Newsletter card -------------------------------------------- */
  .nl {
    --hue: #6366f1;
    position: relative; overflow: hidden;
    display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center;
    border: 1px solid #1e293b; border-radius: 1.1rem;
    background: rgba(15, 23, 42, .6);
    padding: 1.6rem 1.5rem 1.75rem;
  }
  .nl::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
                background: linear-gradient(90deg, #6366f1, #4f6df5, #7c5cf6); }
  @media (min-width: 640px) { .nl { padding: 1.9rem 2rem; } }
  @media (min-width: 1024px) { .nl { grid-template-columns: 1.5fr 1fr; gap: 2.5rem; } }

  .nl-h { margin: 0; color: #f8fafc; font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
  .nl-p { margin: .45rem 0 0; color: #94a3b8; font-size: .88rem; line-height: 1.6; max-width: 54ch; }
  .nl-form { margin-top: 1.1rem; }
  .nl-label { display: block; color: #cbd5e1; font-size: .82rem; font-weight: 600; }
  .nl-row { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
  @media (min-width: 520px) { .nl-row { flex-direction: row; } }
  .nl-input {
    width: 100%; border-radius: .6rem; border: 1px solid #334155; background: #020617;
    padding: .7rem .95rem; font-size: 1rem; color: #f8fafc;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  @media (min-width: 640px) { .nl-input { font-size: .9rem; } }
  .nl-input::placeholder { color: #475569; }
  .nl-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
  .nl-btn {
    flex: none; border: 0; cursor: pointer; border-radius: .6rem; background: #6366f1; color: #fff;
    padding: .7rem 1.4rem; font: inherit; font-size: .86rem; font-weight: 600;
    transition: background .18s ease, transform .18s ease;
  }
  .nl-btn:hover { background: #818cf8; transform: translateY(-1px); }
  .nl-note { margin: .55rem 0 0; color: #64748b; font-size: .74rem; line-height: 1.55; }
  .nl-status { margin: .3rem 0 0; min-height: 0; font-size: .82rem; }
  .nl-status:not(:empty) { margin-top: .5rem; min-height: 1.1rem; }
  /* narrow screens: the picture sits behind the text and costs no height.
     From 1024px up there is room beside the form, so it moves into the layout. */
  .nl-art {
    position: absolute; right: -2.5rem; bottom: -2.5rem;
    width: 15rem; opacity: .13; pointer-events: none;
  }
  @media (min-width: 640px) { .nl-art { right: -1.5rem; bottom: -3rem; width: 20rem; opacity: .15; } }
  @media (min-width: 1024px) {
    .nl-art { position: static; transform: none; opacity: 1;
              margin: 0 0 0 auto; width: 100%; max-width: 15rem; }
  }
  .nl-art svg { display: block; width: 100%; height: auto; }

  .an-nl .ltr, .an-nl .badge { transform-box: fill-box; transform-origin: center; }
  .an-nl .l1 { animation: anLetter 5.4s ease-in-out infinite; }
  .an-nl .l2 { animation: anLetter 5.4s ease-in-out 1.1s infinite; }
  .an-nl .l3 { animation: anLetter 5.4s ease-in-out 2.2s infinite; }
  .an-nl .badge { animation: anBadge 5.4s ease-in-out infinite; }
  @keyframes anLetter {
    0%, 4% { transform: translateX(52px); opacity: 0; }
    16% { transform: translateX(0); opacity: 1; }
    40% { transform: translateX(-46px); opacity: .85; }
    54%, 100% { transform: translateX(-92px); opacity: 0; }
  }
  @keyframes anBadge {
    0%, 42% { transform: scale(1); }
    50% { transform: scale(1.18); }
    60%, 100% { transform: scale(1); }
  }

  html.light .nl { border-color: #e2e8f0; background: #f8fafc; }
  @media (max-width: 1023px) { html.light .nl-art { opacity: .2; } }
  html.light .nl { --hue: #4f46e5; }
  html.light .nl-h { color: #0f172a; }
  html.light .nl-p { color: #475569; }
  html.light .nl-label { color: #334155; }
  html.light .nl-input { background: #fff; border-color: #cbd5e1; color: #0f172a; }
  html.light .nl-input::placeholder { color: #94a3b8; }
  html.light .nl-input:focus { border-color: #4f46e5; }
  html.light .nl-btn { background: #4f46e5; }
  html.light .nl-btn:hover { background: #4338ca; }
  html.light .nl-note { color: #64748b; }


  /* ---------- Footer ------------------------------------------------------ */
  .ft { display: grid; gap: 2.25rem; margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid #1e293b; }
  @media (min-width: 900px) { .ft { grid-template-columns: 1fr 2.1fr; gap: 3rem; } }

  .ft-logo { display: inline-flex; align-items: center; gap: .6rem; color: #f8fafc; text-decoration: none; }
  .ft-mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .4rem;
             background: #6366f1; color: #fff; font-size: .82rem; font-weight: 800; }
  .ft-name { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
  .ft-tag { margin: .75rem 0 0; max-width: 24ch; color: #64748b; font-size: .82rem; line-height: 1.6; }

  .ft-social { display: flex; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
  .ft-soc { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .55rem;
            border: 1px solid #1e293b; color: #94a3b8;
            transition: color .18s ease, border-color .18s ease, background .18s ease; }
  .ft-soc svg { width: 1.05rem; height: 1.05rem; }
  .ft-soc:hover { color: #fff; border-color: #6366f1; background: color-mix(in srgb, #6366f1 16%, transparent); }
  /* profiles that do not exist yet: the button stays, the link does not */
  .ft-soc[data-soon] { opacity: .4; pointer-events: none; cursor: default; }

  .ft-cols { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 720px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
  .ft-h { margin: 0; color: #f8fafc; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .ft-list { margin: .85rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
  .ft-link { color: #94a3b8; font-size: .82rem; line-height: 1.5; text-decoration: none; transition: color .16s ease; }
  .ft-link:hover { color: #f8fafc; }

  .ft-base { display: flex; flex-direction: column; gap: .6rem; margin-top: 2.25rem;
             padding-top: 1.5rem; border-top: 1px solid #1e293b; color: #64748b; font-size: .8rem; }
  @media (min-width: 640px) { .ft-base { flex-direction: row; align-items: center; justify-content: space-between; } }
  .ft-base p { margin: 0; }


  /* phones: the same footer, packed tighter */
  @media (max-width: 639px) {
    .ft { margin-top: 2rem; padding-top: 1.75rem; gap: 1.75rem; }
    .ft-cols { gap: 1.4rem 1rem; }
    .ft-list { gap: .38rem; }
    .ft-link { font-size: .8rem; }
    .ft-base { margin-top: 1.75rem; padding-top: 1.25rem; }
  }

  html.light .ft, html.light .ft-base, html.light .ft-soc { border-color: #e2e8f0; }
  html.light .ft-logo, html.light .ft-h { color: #0f172a; }
  html.light .ft-tag, html.light .ft-base { color: #64748b; }
  html.light .ft-link { color: #475569; }
  html.light .ft-link:hover { color: #0f172a; }
  html.light .ft-soc { color: #64748b; }
  html.light .ft-soc:hover { color: #4f46e5; border-color: #4f46e5; }


  /* ---------- Fixes from the accessibility and layout pass ---------------- */

  /* long German compounds broke out of the page on narrow screens */
  h1, h2, h3, h4, p, li, a, dt, dd, td, th, figcaption { overflow-wrap: break-word; }
  h1, h2, h3 { hyphens: auto; }

  /* muted text was under the 4.5:1 contrast minimum on dark backgrounds */
  .text-slate-500 { color: #7c8aa3; }
  html.light .text-slate-500 { color: #64748b; }
  .ft-tag, .ft-base, .nl-note { color: #7c8aa3; }
  html.light .ft-tag, html.light .ft-base, html.light .nl-note { color: #64748b; }
  .ar-meta, .fq-foot-p, .stp-p, .svc-one { color: #94a3b8; }

  /* white on indigo-500 is 4.47:1, just under the minimum for small text */
  .bg-indigo-500 { background-color: #4f46e5; }
  .hover\:bg-indigo-400:hover { background-color: #4338ca; }
  .nl-btn, .fq-cta { background: #4f46e5; }
  .nl-btn:hover, .fq-cta:hover { background: #4338ca; }
  html.light .nl-btn:hover, html.light .fq-cta:hover { background: #3730a3; }

  /* touch targets below the 36px minimum */
  .ft-soc { width: 2.6rem; height: 2.6rem; }
  header nav { gap: 1.45rem; }
  header nav a { padding: .55rem .35rem; }
  .ft-link { display: inline-block; padding: .55rem 0; min-height: 2.4rem; }
  .ft-logo { padding: .2rem 0; }
  .ft-mark { background: #4f46e5; }
  /* the "all articles" link and the terms table of contents were thin to hit */
  [data-edit="index.page.a9"] { display: inline-block; padding: .5rem 0; }
  .toc a, nav[aria-label*="Inhalt"] a, aside a { display: inline-block; padding: .3rem 0; }
  /* the ticker separators are decoration, but keep them visible enough */
  .ticker__set .text-slate-600 { color: #5a6b83; }
  /* slate-600 is 2.8:1 on dark, too faint for real sentences */
  .text-slate-600 { color: #7c8aa3; }
  html.light .text-slate-600 { color: #64748b; }
  .ticker__set .text-slate-600, .svc-plus, .stp-plus { color: #64748b; }
  /* the sticky table of contents on the legal pages */
  .lg\:sticky a.block { padding-top: .45rem; padding-bottom: .45rem; }


  /* ---------- Header ------------------------------------------------------ */
  .site-header {
    position: sticky; top: 0; z-index: 40;
    border-bottom: 1px solid transparent;
    background: transparent;
    transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
  }
  .site-header.is-stuck {
    background: rgba(2, 6, 23, .78);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: rgba(30, 41, 59, .9);
    box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9);
  }
  html.light .site-header.is-stuck {
    background: rgba(255, 255, 255, .82);
    border-bottom-color: #e2e8f0;
    box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .35);
  }
  .hd-bar { height: 4rem; }
  /* jump links must not land underneath the bar */
  [id] { scroll-margin-top: 5.25rem; }

  .hd-nav { gap: .35rem; }
  .hd-link {
    position: relative; border-radius: .5rem; padding: .55rem .7rem;
    font-size: .875rem; font-weight: 500; color: #94a3b8; text-decoration: none;
    transition: color .18s ease, background .18s ease;
  }
  .hd-link:hover { color: #f8fafc; background: rgba(148, 163, 184, .1); }
  /* a quiet underline that grows from the middle */
  .hd-link::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: .3rem; height: 2px;
    border-radius: 99px; background: #818cf8; opacity: 0;
    transition: left .22s cubic-bezier(.4, 0, .2, 1), right .22s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
  }
  .hd-link:hover::after { left: .7rem; right: .7rem; opacity: .55; }
  .hd-link[aria-current="page"] { color: #f8fafc; }
  .hd-link[aria-current="page"]::after { left: .7rem; right: .7rem; opacity: 1; }

  .hd-cta {
    margin-left: .5rem; border-radius: .55rem; padding: .6rem 1.1rem;
    font-size: .875rem; font-weight: 600; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow: 0 8px 20px -12px rgba(99, 102, 241, .9);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .hd-cta:hover { transform: translateY(-1px); filter: brightness(1.08);
                  box-shadow: 0 12px 26px -12px rgba(99, 102, 241, 1); }

  html.light .hd-link { color: #475569; }
  html.light .hd-link:hover { color: #0f172a; background: rgba(71, 85, 105, .08); }
  html.light .hd-link[aria-current="page"] { color: #0f172a; }
  html.light .hd-link::after { background: #4f46e5; }

  .hd-mobile {
    border-top: 1px solid rgba(30, 41, 59, .9);
    background: rgba(2, 6, 23, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  html.light .hd-mobile { background: rgba(255, 255, 255, .97); border-top-color: #e2e8f0; }

  /* the hero runs underneath the transparent bar */
  .hero-sec { margin-top: -4rem; padding-top: 4rem; min-height: 100vh; min-height: 100svh; }


  /* ---------- Blog overview ---------------------------------------------- */
  .bl-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: .5rem; }
  @media (min-width: 640px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .bl-card { margin: 0; }
  .bl-link {
    display: block; height: 100%; overflow: hidden; text-decoration: none; color: inherit;
    border: 1px solid #1e293b; border-radius: 1rem; background: rgba(15, 23, 42, .55);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .bl-link:hover { border-color: #6366f1; transform: translateY(-3px);
                   box-shadow: 0 18px 36px -28px rgba(99, 102, 241, .9); }
  .bl-shot { display: block; overflow: hidden; background: #0f172a; }
  .bl-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
                 transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  .bl-link:hover .bl-shot img { transform: scale(1.04); }
  .bl-text { display: block; padding: 1.25rem 1.3rem 1.5rem; }
  .bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .72rem; color: #7c8aa3; }
  .bl-tag { border-radius: .3rem; background: rgba(30, 41, 59, .8); padding: .1rem .45rem; color: #94a3b8; }
  .bl-title { display: block; margin-top: .6rem; color: #f8fafc; font-size: 1.05rem; font-weight: 700;
              line-height: 1.4; letter-spacing: -.01em; }
  .bl-link:hover .bl-title { color: #a5b4fc; }
  .bl-sum { display: block; margin-top: .5rem; color: #94a3b8; font-size: .88rem; line-height: 1.65; }

  html.light .bl-link { background: #f8fafc; border-color: #e2e8f0; }
  html.light .bl-link:hover { border-color: #4f46e5; }
  html.light .bl-shot { background: #f1f5f9; }
  html.light .bl-title { color: #0f172a; }
  html.light .bl-link:hover .bl-title { color: #4338ca; }
  html.light .bl-sum { color: #475569; }
  html.light .bl-tag { background: #e2e8f0; color: #475569; }


  /* ---------- Showroom cards ---------------------------------------------- */
  .pj-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .pj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pj-card {
    position: relative; overflow: hidden; margin: 0;
    border: 1px solid #1e293b; border-radius: 1rem; background: rgba(15, 23, 42, .55);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .pj-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
                     background: linear-gradient(90deg, #6366f1, #4f6df5, #7c5cf6); }
  .pj-card:hover { border-color: #6366f1; transform: translateY(-3px);
                   box-shadow: 0 20px 40px -30px rgba(99, 102, 241, .9); }
  .pj-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0f172a;
             transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  .pj-card:hover .pj-shot { transform: scale(1.03); }
  .pj-body { padding: 1.5rem 1.5rem 1.75rem; }
  .pj-client { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
               text-transform: uppercase; color: #818cf8; }
  .pj-h { margin: .5rem 0 0; color: #f8fafc; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
  .pj-p { margin: .65rem 0 0; color: #94a3b8; font-size: .9rem; line-height: 1.7; }
  .pj-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
  .pj-tag { border-radius: .35rem; border: 1px solid #1e293b; background: rgba(30, 41, 59, .6);
            padding: .18rem .55rem; font-size: .72rem; color: #cbd5e1; }

  html.light .pj-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .pj-card:hover { border-color: #4f46e5; }
  html.light .pj-h { color: #0f172a; }
  html.light .pj-p { color: #475569; }
  html.light .pj-client { color: #4338ca; }
  html.light .pj-tag { background: #eef2f7; border-color: #e2e8f0; color: #475569; }


  /* three more FAQ pictures, for the questions that only live on that page */
  .an .wire { stroke-dasharray: 44; stroke-dashoffset: 44; }
  .an .plug, .an .pin, .an .tm { transform-box: fill-box; transform-origin: center; }
  :is(.fq-panel.is-open, .is-in) .an-access .wire { animation: anDraw3 3s ease-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-access .plug { animation: anPopIn 3s ease-out .6s infinite; }
  @keyframes anDraw3 { 0%, 8% { stroke-dashoffset: 44; } 40%, 100% { stroke-dashoffset: 0; } }

  :is(.fq-panel.is-open, .is-in) .an-team .t1 { animation: anJoin 3.6s ease-in-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-team .t2 { animation: anLift 3.6s ease-in-out .2s infinite; }
  :is(.fq-panel.is-open, .is-in) .an-team .t3 { animation: anJoin 3.6s ease-in-out .4s infinite; }
  @keyframes anJoin { 0%, 100% { opacity: .5; transform: translateY(4px); } 45% { opacity: 1; transform: translateY(0); } }
  @keyframes anLift { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-4px) scale(1.04); } }

  :is(.fq-panel.is-open, .is-in) .an-globe .p1 { animation: anPopIn 4s ease-out infinite; }
  :is(.fq-panel.is-open, .is-in) .an-globe .p2 { animation: anPopIn 4s ease-out .5s infinite; }
  :is(.fq-panel.is-open, .is-in) .an-globe .p3 { animation: anPopIn 4s ease-out 1s infinite; }


  /* ---------- Showroom samples -------------------------------------------- */
  .sr-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start;
             overflow-anchor: none; }
  @media (min-width: 700px) { .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 700px) { .sr-span2 { grid-column: span 2; } }

  .sr-card {
    position: relative; overflow: hidden; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; width: 100%; padding: 0; font: inherit; color: inherit;
    border: 1px solid #1e293b; border-radius: 1rem; background: rgba(15, 23, 42, .55);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .sr-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
                     background: var(--hue); z-index: 2; }
  .sr-card:hover { border-color: var(--hue); transform: translateY(-3px);
                   box-shadow: 0 20px 40px -30px color-mix(in srgb, var(--hue) 90%, transparent); }
  .sr-card[aria-expanded="true"] {
    grid-column: 1 / -1; border-color: var(--hue); transform: none;
    box-shadow: 0 0 0 1px var(--hue), 0 18px 40px -28px color-mix(in srgb, var(--hue) 85%, transparent);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent;
  }

  /* the crop differs by tile size, so the wall does not read as one product */
  .sr-thumb { display: block; overflow: hidden; background: #0b1220;
              border-bottom: 1px solid #1e293b; aspect-ratio: 4 / 3; }
  .sr-span2 .sr-thumb { aspect-ratio: 16 / 7; }
  .sr-thumb svg { display: block; width: 100%; height: 100%; }
  .sr-card[aria-expanded="true"] .sr-thumb { display: none; }
  .sr-card[aria-expanded="true"] .sr-meta { padding: 1.35rem 1.5rem 1.15rem; }
  .sr-card[aria-expanded="true"] .sr-title { font-size: 1.3rem; }

  .sr-meta { display: block; padding: 1rem 1.15rem 1.2rem; }
  .sr-kicker { display: flex; align-items: center; gap: .45rem; color: var(--hue); }
  .sr-ico { width: .95rem; height: .95rem; flex: none; }
  .sr-svc { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .09em;
            text-transform: uppercase; color: var(--hue); }
  .sr-title { display: block; margin-top: .4rem; color: #f8fafc; font-size: 1rem; font-weight: 700;
              line-height: 1.35; letter-spacing: -.01em; }
  .sr-span2 .sr-title { font-size: 1.15rem; }
  .sr-plus { position: absolute; top: 1rem; right: 1rem; width: .95rem; height: .95rem; color: #94a3b8;
             background: rgba(2, 6, 23, .65); border-radius: 99px; padding: .32rem; box-sizing: content-box;
             transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .2s ease; z-index: 3; }
  .sr-card[aria-expanded="true"] .sr-plus { transform: rotate(45deg); color: var(--hue); }

  .sr-panel[hidden] { display: none; }
  .sr-panel { grid-column: 1 / -1; display: grid; gap: 1.75rem; margin-top: -1.25rem;
              border: 1px solid var(--hue); border-top: 0; border-radius: 0 0 1rem 1rem; padding: 0 1.5rem 1.5rem;
              background: color-mix(in srgb, var(--hue) 8%, transparent);
              box-shadow: 0 18px 44px -32px color-mix(in srgb, var(--hue) 85%, transparent); }
  @media (min-width: 1000px) { .sr-panel { grid-template-columns: 1.55fr 1fr; gap: 2.5rem; padding: 1.75rem; align-items: start; } }
  .sr-full { border: 1px solid #1e293b; border-radius: .8rem; overflow: hidden; background: #0b1220; }
  .sr-full svg { display: block; width: 100%; height: auto; }
  .sr-h { margin: 0; color: #f8fafc; font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; }
  .sr-p { margin: .8rem 0 0; color: #94a3b8; font-size: .92rem; line-height: 1.75; }
  .sr-side .pj-tags { margin-top: 1.25rem; }
  .sr-panel .sr-svc, .sr-panel .sr-h { display: none; }
  .sr-side .pj-tag { border-color: color-mix(in srgb, var(--hue) 40%, transparent); }
  .sr-link { display: inline-block; margin-top: 1.25rem; color: var(--hue); font-size: .85rem;
             font-weight: 700; text-decoration: none; }
  .sr-link:hover { text-decoration: underline; }

  html.light .sr-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .sr-thumb, html.light .sr-full { background: #eef2f7; border-color: #e2e8f0; }
  html.light .sr-panel { border-color: var(--hue); background: color-mix(in srgb, var(--hue) 6%, transparent); }
  html.light .sr-title, html.light .sr-h { color: #0f172a; }
  html.light .sr-p { color: #475569; }
  html.light .sr-plus { background: rgba(255, 255, 255, .75); color: #64748b; }

  /* ---------- the drawings themselves ------------------------------------- */
  .mk { display: block; width: 100%; height: auto; font-family: inherit; }
  .mk-bg { fill: #0b1220; }
  .mk-card { fill: #111c31; }
  .mk-soft { fill: #16233b; }
  .mk-line { fill: #2b3a55; }
  .mk-line-s { fill: #1c2a43; }
  .mk-line-f { fill: #2b3a55; }
  .mk-strong { fill: #64748b; }
  .mk-text { fill: #e2e8f0; }
  .mk-muted { fill: #94a3b8; }
  .mk-accent { fill: #6366f1; }
  .mk-accent-f { fill: #6366f1; }
  .mk-accent-s { fill: rgba(99, 102, 241, .22); }
  .mk-accent-t { fill: #a5b4fc; }
  .mk-link { fill: #93b4ff; }
  .mk-note { fill: rgba(99, 102, 241, .1); stroke: rgba(99, 102, 241, .45); }
  .mk-grid { stroke: #22314c; stroke-width: 1; }
  .mk-plot { stroke: #818cf8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .mk-plot-fill { fill: rgba(129, 140, 248, .13); }
  .mk-ok-s { fill: rgba(52, 211, 153, .14); }
  .mk-ok-l { stroke: #34d399; }
  .mk-ok-t { fill: #34d399; }
  .mk-ring { stroke: #22314c; }
  .mk-ring-ok { stroke: #34d399; }
  .mk-arrow { stroke: #64748b; stroke-width: 1.6; stroke-linecap: round; marker-end: none; }
  .mk-branch path { stroke: #2b3a55; stroke-width: 1.6; fill: none; }
  .mk-dot { fill: #2b3a55; }
  .mk-shadow { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
  .mk-win { stroke: #6366f1; stroke-width: 1.5; }
  .mk-cap { fill: rgba(2, 6, 23, .75); }
  .mk-cap-s { fill: #1c2a43; }
  .mk-clip { fill: #2b3a55; }
  .mk-wave path { stroke: #64748b; stroke-width: 2; stroke-linecap: round; }
  .mk-play { stroke: #6366f1; stroke-width: 2; }
  .mk-tag-a { fill: #6366f1; }
  .mk-tag-b { fill: #38bdf8; }
  .mk-tag-c { fill: #a78bfa; }
  .mk-tag-d { fill: #f59e0b; }

  html.light .mk-bg { fill: #eef2f7; }
  html.light .mk-card { fill: #ffffff; }
  html.light .mk-soft { fill: #f1f5f9; }
  html.light .mk-line { fill: #cbd5e1; }
  html.light .mk-line-s { fill: #e2e8f0; }
  html.light .mk-line-f { fill: #cbd5e1; }
  html.light .mk-strong { fill: #94a3b8; }
  html.light .mk-text { fill: #0f172a; }
  html.light .mk-muted { fill: #64748b; }
  html.light .mk-accent, html.light .mk-accent-f { fill: #4f46e5; }
  html.light .mk-accent-t { fill: #4338ca; }
  html.light .mk-link { fill: #1a47c2; }
  html.light .mk-note { fill: rgba(79, 70, 229, .08); stroke: rgba(79, 70, 229, .35); }
  html.light .mk-grid { stroke: #e2e8f0; }
  html.light .mk-plot { stroke: #4f46e5; }
  html.light .mk-plot-fill { fill: rgba(79, 70, 229, .1); }
  html.light .mk-ok-s { fill: rgba(5, 150, 105, .12); }
  html.light .mk-ok-l, html.light .mk-ring-ok { stroke: #059669; }
  html.light .mk-ok-t { fill: #047857; }
  html.light .mk-ring { stroke: #e2e8f0; }
  html.light .mk-arrow { stroke: #94a3b8; }
  html.light .mk-branch path { stroke: #cbd5e1; }
  html.light .mk-dot { fill: #cbd5e1; }
  html.light .mk-shadow { filter: drop-shadow(0 18px 30px rgba(15, 23, 42, .18)); }
  html.light .mk-win { stroke: #4f46e5; }
  html.light .mk-cap { fill: rgba(15, 23, 42, .8); }
  html.light .mk-cap-s { fill: #e2e8f0; }
  html.light .mk-clip { fill: #cbd5e1; }
  html.light .mk-wave path { stroke: #94a3b8; }
  html.light .mk-play { stroke: #4f46e5; }


  /* KI-Marketing: variants appear, a person approves */
  .an .ai-v, .an .ai-ok { transform-box: fill-box; transform-origin: center; }
  :is([aria-expanded="true"], .is-in) .an-ai .v1 { animation: anBub 4.4s ease-out infinite; }
  :is([aria-expanded="true"], .is-in) .an-ai .v2 { animation: anBub 4.4s ease-out .35s infinite; }
  :is([aria-expanded="true"], .is-in) .an-ai .v3 { animation: anBub 4.4s ease-out .7s infinite; }
  :is([aria-expanded="true"], .is-in) .an-ai .ai-ok { animation: anPopIn 4.4s ease-out 1.6s infinite; }


  /* ---------- Leistungen page --------------------------------------------- */
  .svp-navbar { position: sticky; top: 4rem; z-index: 30;
                background: rgba(2, 6, 23, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  html.light .svp-navbar { background: rgba(255, 255, 255, .85); }
  /* The nine services need more room than one row gives, so the bar wraps as
     soon as there is space for two rows. Below that it scrolls sideways, with
     the right edge faded so it is visible that more services follow. */
  .svp-nav { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
  .svp-nav::-webkit-scrollbar { display: none; }
  @media (max-width: 859px) {
    .svp { scroll-margin-top: 9.5rem; }
    .svp-nav {
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
              mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
      scroll-snap-type: x proximity;
    }
    .svp-jump { scroll-snap-align: start; }
  }
  @media (min-width: 860px) {
    .svp-nav { flex-wrap: wrap; overflow-x: visible; row-gap: .5rem;
               -webkit-mask-image: none; mask-image: none; }
  }
  .svp-jump {
    flex: none; border-radius: 99px; border: 1px solid #1e293b; padding: .45rem .85rem;
    font-size: .78rem; font-weight: 500; color: #94a3b8; text-decoration: none; white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .svp-jump:hover { color: #f8fafc; border-color: #475569; }
  .svp-jump[aria-current] { color: #fff; border-color: #6366f1;
                            background: color-mix(in srgb, #6366f1 18%, transparent); }
  html.light .svp-jump { border-color: #e2e8f0; color: #475569; }
  html.light .svp-jump:hover { color: #0f172a; border-color: #cbd5e1; }
  html.light .svp-jump[aria-current] { color: #312e81; border-color: #4f46e5;
                                       background: color-mix(in srgb, #4f46e5 12%, transparent); }

  .svp { scroll-margin-top: 12.5rem; padding: .75rem 1.25rem;
         opacity: 0; transform: translateY(22px);
         transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .44, 1); }
  .svp.is-in { opacity: 1; transform: none; }
  .svp:first-of-type { padding-top: 2rem; }
  .svp:last-of-type { padding-bottom: 2rem; }

  /* one card per service, the drawing living inside it */
  .svp-inner {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; gap: 1.75rem; align-items: center;
    max-width: 72rem; margin: 0 auto; padding: 1.75rem 1.5rem;
    border: 1px solid #1e293b; border-radius: 1.25rem;
    background: rgba(15, 23, 42, .5);
  }
  .svp-inner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
                       background: var(--hue); z-index: 2; }
  @media (min-width: 640px) { .svp-inner { padding: 2.25rem 2rem; } }
  @media (min-width: 1024px) { .svp-inner { grid-template-columns: 1.05fr .95fr; column-gap: 3rem; padding: 2.5rem; } }

  .svp-main, .svp-side { position: relative; z-index: 1; }

  .svp-kicker { display: flex; align-items: baseline; gap: .7rem; }
  .svp-ico { width: 1.5rem; height: 1.5rem; flex: none; color: var(--hue); }
  .svp-h { margin: 0; color: #f8fafc; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
  @media (min-width: 640px) { .svp-h { font-size: 2rem; } }
  .svp-tag { margin: 1rem 0 0; max-width: 34rem; color: #cbd5e1; font-size: 1.05rem; line-height: 1.6; }
  .svp-p { margin: .9rem 0 0; max-width: 34rem; color: #94a3b8; font-size: .92rem; line-height: 1.8; }
  .svp-cta {
    display: inline-block; margin-top: 1.5rem; border-radius: .6rem; padding: .75rem 1.4rem;
    background: var(--hue); color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--hue) 95%, transparent);
  }
  .svp-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }

  .svp-box { border: 1px solid color-mix(in srgb, var(--hue) 28%, #1e293b); border-radius: .9rem;
             background: color-mix(in srgb, var(--hue) 7%, transparent); padding: 1.35rem; }
  .svp-box-h { margin: 0; color: #f8fafc; font-size: .74rem; font-weight: 700;
               letter-spacing: .08em; text-transform: uppercase; }
  .svp-list { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem;
              color: #94a3b8; font-size: .86rem; line-height: 1.6; }
  .svp-list li { display: flex; gap: .65rem; }
  .svp-dot { margin-top: .5rem; width: .32rem; height: .32rem; flex: none; border-radius: 99px; background: var(--hue); }
  .svp-box-foot { margin-top: 1.25rem; padding-top: 1.1rem;
                  border-top: 1px solid color-mix(in srgb, var(--hue) 22%, #1e293b); display: grid; gap: .9rem; }
  .svp-box-sh { margin: 0; color: #cbd5e1; font-size: .8rem; font-weight: 700; }
  .svp-box-sp { margin: .25rem 0 0; color: #94a3b8; font-size: .82rem; line-height: 1.6; }

  html.light .svp-inner { background: #fbfcfe; border-color: #e2e8f0; }
  html.light .svp-h, html.light .svp-box-h { color: #0f172a; }
  html.light .svp-tag { color: #334155; }
  html.light .svp-p, html.light .svp-list, html.light .svp-box-sp { color: #475569; }
  html.light .svp-box-sh { color: #1e293b; }


  /* ---------- About -------------------------------------------------------- */
  .ab-hero { border-bottom: 1px solid #1e293b; }
  .ab-eyebrow { margin: 0; color: #818cf8; font-size: .74rem; font-weight: 700;
                letter-spacing: .12em; text-transform: uppercase; }
  .ab-h1 { margin: 1.1rem 0 0; max-width: 20ch; color: #f8fafc; font-weight: 800;
           letter-spacing: -.025em; line-height: 1.08;
           font-size: clamp(2rem, 5vw, 3.4rem); }
  .ab-lead { margin: 1.5rem 0 0; max-width: 46ch; color: #94a3b8; font-size: 1.1rem; line-height: 1.7; }

  .ab-sec { opacity: 0; transform: translateY(24px);
            transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .44, 1); }
  .ab-sec.is-in { opacity: 1; transform: none; }
  .ab-inner { display: grid; gap: 2.5rem; align-items: center;
              max-width: 72rem; margin: 0 auto; padding: 3.5rem 1.25rem; }
  @media (min-width: 900px) { .ab-inner { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; padding: 4.5rem 1.25rem; } }
  .ab-inner--wide { grid-template-columns: 1fr !important; gap: 0 !important; align-items: start; }

  .ab-h2 { margin: 0; color: #f8fafc; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
  @media (min-width: 640px) { .ab-h2 { font-size: 2rem; } }
  .ab-p { margin: 1.1rem 0 0; max-width: 56ch; color: #94a3b8; font-size: .97rem; line-height: 1.85; }
  .ab-p--lead { margin-top: 1rem; color: #cbd5e1; font-size: 1.05rem; }

  .ab-story-art { --hue: #6366f1; border: 1px solid color-mix(in srgb, #6366f1 30%, #1e293b);
                  border-radius: 1rem; background: color-mix(in srgb, #6366f1 7%, transparent);
                  padding: 1.25rem; }
  .ab-story-art svg { display: block; width: 100%; height: auto; }

  .ab-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .ab-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ab-card {
    position: relative; overflow: hidden; margin: 0;
    border: 1px solid #1e293b; border-radius: 1rem; background: rgba(15, 23, 42, .55);
    padding: 1.35rem 1.35rem 1.5rem;
    opacity: 0; transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.16, .84, .44, 1),
                border-color .18s ease, box-shadow .18s ease;
  }
  .ab-card.is-in { opacity: 1; transform: none; }
  .ab-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hue); }
  .ab-card:hover { border-color: var(--hue); box-shadow: 0 18px 36px -30px color-mix(in srgb, var(--hue) 90%, transparent); }
  .ab-art { margin: .35rem 0 1rem; }
  .ab-art svg { display: block; width: 100%; max-width: 11rem; height: auto; }
  .ab-card-h { margin: 0; color: #f8fafc; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
  .ab-card-p { margin: .55rem 0 0; color: #94a3b8; font-size: .88rem; line-height: 1.7; }

  .ab-person { display: grid; gap: 2rem; align-items: center; grid-column: 1 / -1; }
  @media (min-width: 900px) { .ab-person { grid-template-columns: .8fr 1.2fr; gap: 3rem; } }
  .ab-photo { overflow: hidden; border-radius: 1.1rem; border: 1px solid #1e293b; background: #0f172a;
              max-width: 20rem; }
  .ab-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

  html.light .ab-hero { border-color: #e2e8f0; }
  html.light .ab-h1, html.light .ab-h2, html.light .ab-card-h { color: #0f172a; }
  html.light .ab-lead, html.light .ab-p, html.light .ab-card-p { color: #475569; }
  html.light .ab-p--lead { color: #334155; }
  html.light .ab-eyebrow { color: #4338ca; }
  html.light .ab-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .ab-photo { background: #f1f5f9; border-color: #e2e8f0; }
  html.light .ab-story-art { border-color: color-mix(in srgb, #4f46e5 26%, #e2e8f0);
                             background: color-mix(in srgb, #4f46e5 6%, transparent); }

  /* the drawings on this page */
  .an .a2-line { stroke: #2b3a55; stroke-width: 3; stroke-linecap: round; }
  .an .a3-line { stroke: #6366f1; stroke-width: 3.5; stroke-linecap: round; }
  .an .a4-dot { fill: #818cf8; }
  html.light .an .a2-line { stroke: #cbd5e1; }
  html.light .an .a3-line { stroke: #4f46e5; }
  html.light .an .a4-dot { fill: #4f46e5; }
  .an-story .reach, .an-story .flat, .an-story .lift { stroke-dasharray: 300; stroke-dashoffset: 300; }
  .an-story .lift { opacity: 0; }
  .is-in .an-story .reach { animation: anLine2 7s ease-out infinite; }
  .is-in .an-story .flat { animation: anLine2 7s ease-out .4s infinite; }
  .is-in .an-story .lift { animation: anLift2 7s ease-out infinite; }
  @keyframes anLine2 { 0%, 4% { stroke-dashoffset: 300; } 34%, 100% { stroke-dashoffset: 0; } }
  @keyframes anLift2 {
    0%, 52% { stroke-dashoffset: 300; opacity: 0; }
    58% { opacity: 1; }
    82%, 100% { stroke-dashoffset: 0; opacity: 1; }
  }

  .an .pb { transform-box: fill-box; transform-origin: bottom center; }
  .an .stamp, .an .key2, .an .bub1, .an .bub2, .an .alert { transform-box: fill-box; transform-origin: center; }
  .is-in .an-pnum .b1 { animation: anBar 3.4s ease-out infinite; }
  .is-in .an-pnum .b2 { animation: anBar 3.4s ease-out .12s infinite; }
  .is-in .an-pnum .b3 { animation: anBar 3.4s ease-out .24s infinite; }
  .is-in .an-pnum .b4 { animation: anBar 3.4s ease-out .36s infinite; }
  .is-in .an-pnum .tk { animation: anDraw2 3.4s ease-out .6s infinite; }
  .is-in .an-pappr .stamp { animation: anStamp 3.2s ease-out infinite; }
  @keyframes anStamp {
    0%, 14% { opacity: 0; transform: scale(1.5) rotate(-12deg); }
    30% { opacity: 1; transform: scale(1) rotate(0deg); }
    88%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  }
  .is-in .an-pown .tk { animation: anDraw2 3.4s ease-out infinite; }
  .is-in .an-pown .key2 { animation: anKey 3.4s ease-in-out infinite; }
  .is-in .an-phon .bub1 { animation: anBub 4.2s ease-out infinite; }
  .is-in .an-phon .bub2 { animation: anBub 4.2s ease-out .9s infinite; }
  .is-in .an-phon .alert { animation: anPopIn 4.2s ease-out .3s infinite; }


  /* About: where the name comes from */
  @media (min-width: 900px) {
    .ab-sec--flip .ab-name-main { order: 2; }
    .ab-sec--flip .ab-name-art  { order: 1; }
  }
  .ab-name-art {
    border: 1px solid color-mix(in srgb, var(--hue) 30%, #1e293b);
    border-radius: 1rem; background: color-mix(in srgb, var(--hue) 7%, transparent);
    padding: 1.9rem 1.6rem; text-align: center;
  }
  .ab-roots { display: flex; align-items: flex-start; justify-content: center; gap: 1.1rem; }
  .ab-root { display: grid; gap: .3rem; opacity: 0; transform: translateY(10px);
             transition: opacity .5s ease, transform .5s cubic-bezier(.16, .84, .44, 1); }
  .ab-root-op { margin-top: .45rem; color: #64748b; font-size: 1.05rem; font-weight: 700;
                opacity: 0; transition: opacity .5s ease .18s; }
  .is-in .ab-root, .is-in .ab-root-op { opacity: 1; transform: none; }
  .is-in .ab-root:nth-of-type(2) { transition-delay: .26s; }
  .ab-root-w { color: #e2e8f0; font-size: 1.05rem; font-weight: 700; font-style: italic;
               letter-spacing: -.01em; }
  .ab-root-d { color: #94a3b8; font-size: .78rem; }
  .ab-name-rule { height: 1px; margin: 1.35rem auto 1.25rem; max-width: 12rem;
                  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hue) 55%, transparent), transparent); }
  .ab-name-out { margin: 0; font-size: clamp(1.6rem, 4.4vw, 2.1rem); font-weight: 800;
                 letter-spacing: -.025em; line-height: 1.15; }
  .ab-name-word { background-image: linear-gradient(100deg, var(--hue) 0%, #c7d2fe 45%, var(--hue) 72%);
                  background-size: 260% 100%; background-position: 120% 0;
                  -webkit-background-clip: text; background-clip: text; color: transparent; }
  .is-in .ab-name-word { animation: abShine 7s ease-in-out infinite; }
  @keyframes abShine { 0%, 100% { background-position: 120% 0; } 50% { background-position: -30% 0; } }
  .ab-name-sub { color: #cbd5e1; }
  .ab-name-claim { margin: .7rem 0 0; color: #94a3b8; font-size: .8rem; letter-spacing: .04em; }

  html.light .ab-name-art { border-color: color-mix(in srgb, #4f46e5 26%, #e2e8f0);
                            background: color-mix(in srgb, #4f46e5 6%, transparent); }
  html.light .ab-root-w { color: #0f172a; }
  html.light .ab-root-d, html.light .ab-name-claim { color: #475569; }
  html.light .ab-name-sub { color: #1e293b; }
  html.light .ab-name-word { background-image: linear-gradient(100deg, #4f46e5 0%, #818cf8 45%, #4f46e5 72%); }


  /* Contact page */
  .ct-hero { border-bottom: 1px solid #1e293b; }
  .ct-wrap { max-width: 72rem; margin: 0 auto; padding: 3.5rem 1.25rem; }
  @media (min-width: 900px) { .ct-wrap { padding: 4.5rem 1.25rem; } }
  .ct-sec { }
  .ct-grid { display: grid; gap: 1.5rem; max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
  @media (min-width: 1000px) { .ct-grid { grid-template-columns: 1.18fr .82fr; gap: 2rem; align-items: start; } }

  .ct-form, .ct-card {
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .44, 1),
                border-color .18s ease, box-shadow .18s ease;
  }
  .ct-form.is-in, .ct-card.is-in { opacity: 1; transform: none; }

  .ct-form {
    position: relative; overflow: hidden;
    border: 1px solid #1e293b; border-radius: 1.25rem; background: rgba(15, 23, 42, .6);
    padding: 1.6rem 1.35rem 1.75rem;
  }
  @media (min-width: 640px) { .ct-form { padding: 2.25rem 2rem 2.4rem; } }
  .ct-form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hue); }
  .ct-fields { display: grid; gap: 1.25rem; }
  @media (min-width: 620px) { .ct-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ct-field--wide { margin-top: 1.25rem; }

  .ct-label { display: block; color: #cbd5e1; font-size: .84rem; font-weight: 600; }
  .ct-opt { color: #64748b; font-weight: 400; }
  .ct-input {
    display: block; width: 100%; margin-top: .5rem;
    border: 1px solid #334155; border-radius: .7rem; background: #020617;
    padding: .75rem 1rem; color: #f1f5f9; font-family: inherit; font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  @media (min-width: 640px) { .ct-input { font-size: .9rem; } }
  .ct-input::placeholder { color: #475569; }
  .ct-input:focus { outline: none; border-color: var(--hue, #6366f1);
                    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue, #6366f1) 25%, transparent); }
  .ct-select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem;
    padding-right: 2.5rem; }
  .ct-area { line-height: 1.7; resize: vertical; min-height: 9rem; }
  .ct-err { margin: .45rem 0 0; color: #fb7185; font-size: .82rem; }
  .ct-err:empty, .ct-err.hidden { display: none; }

  .ct-foot { display: grid; gap: 1rem; margin-top: 1.6rem;
             border-top: 1px solid #1e293b; padding-top: 1.4rem; }
  @media (min-width: 760px) { .ct-foot { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; } }
  .ct-btn {
    justify-self: start; border: 0; border-radius: .7rem; background: var(--hue, #6366f1);
    padding: .8rem 1.5rem; color: #fff; font-family: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: filter .15s ease, transform .15s ease;
  }
  .ct-btn:hover { filter: brightness(1.12); }
  .ct-btn:active { transform: translateY(1px); }
  .ct-note { margin: 0; color: #94a3b8; font-size: .82rem; line-height: 1.7; }
  .ct-link { color: #818cf8; text-decoration: underline; text-underline-offset: 3px; }
  .ct-link:hover { color: #a5b4fc; }
  .ct-status { margin: .9rem 0 0; min-height: 1.25rem; font-size: .86rem; }

  .ct-aside { display: grid; gap: 1.25rem; align-content: start; }
  .ct-card {
    position: relative; overflow: hidden;
    border: 1px solid #1e293b; border-radius: 1.25rem; background: rgba(15, 23, 42, .45);
    padding: 1.5rem 1.4rem;
  }
  .ct-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hue); }
  .ct-card:hover { border-color: color-mix(in srgb, var(--hue) 55%, #1e293b); }
  .ct-card-h { margin: 0; color: #f8fafc; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
  .ct-card-p { margin: .7rem 0 0; color: #94a3b8; font-size: .88rem; line-height: 1.75; max-width: 34ch; }
  .ct-card-a { display: inline-block; margin-top: 1rem; color: var(--hue); font-size: .85rem; font-weight: 600; }
  .ct-card-a:hover { filter: brightness(1.2); }

  .ct-dl { margin: 1.1rem 0 0; display: grid; gap: .95rem; }
  .ct-dt { color: #64748b; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
  .ct-dd { margin: .25rem 0 0; color: #cbd5e1; font-size: .89rem; line-height: 1.65; }

  .ct-steps { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .9rem; }
  .ct-step { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem;
             color: #94a3b8; font-size: .88rem; line-height: 1.7; }
  .ct-num { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
            background: color-mix(in srgb, var(--hue) 22%, transparent);
            color: var(--hue); font-size: .76rem; font-weight: 800; }

  .ct-card--cta { padding-bottom: 1.4rem; }
  .ct-art { position: absolute; right: -2.6rem; bottom: -2.2rem; width: 13rem; opacity: .16;
            pointer-events: none; }
  .ct-art svg { display: block; width: 100%; height: auto; }

  html.light .ct-hero { border-color: #e2e8f0; }
  html.light .ct-form { background: #fff; border-color: #e2e8f0; }
  html.light .ct-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .ct-label { color: #334155; }
  html.light .ct-input { background: #fff; border-color: #cbd5e1; color: #0f172a; }
  html.light .ct-input::placeholder { color: #94a3b8; }
  html.light .ct-card-h { color: #0f172a; }
  html.light .ct-card-p, html.light .ct-note, html.light .ct-step { color: #475569; }
  html.light .ct-dd { color: #334155; }
  html.light .ct-dt { color: #64748b; }
  html.light .ct-foot { border-color: #e2e8f0; }
  html.light .ct-link { color: #4338ca; }
  html.light .ct-art { opacity: .12; }


  /* ---------- Contrast on solid buttons ----------
     Every filled button carries white text, so its background has to be dark
     enough for that text to clear 4.5:1. The brand indigo at #6366f1 lands at
     4.47:1 and a section hue such as the cyan lands far lower, so all filled
     buttons share one darker indigo. The section hues keep their place on the
     card edges, dots, icons and text links, where they are perfectly safe. */
  .fq-cta, .nl-btn, .ct-btn, .svp-cta,
  .bg-indigo-500:not(.selection\:bg-indigo-500) { background: #4338ca; }
  .fq-cta:hover, .nl-btn:hover, .ct-btn:hover, .svp-cta:hover,
  .hover\:bg-indigo-400:hover { background: #4f46e5; filter: none; }
  .hd-cta { background: linear-gradient(135deg, #4338ca, #4f46e5); }
  .ft-mark, .hd-mark { background: #4338ca; }
  html.light .fq-cta, html.light .nl-btn, html.light .ct-btn, html.light .svp-cta,
  html.light .bg-indigo-500:not(.selection\:bg-indigo-500) { background: #4338ca; }

  /* the same problem in small grey labels and hue-coloured category tags */
  .ct-opt, .ct-dt, .ab-root-op { color: #94a3b8; }
  .sr-svc, .svc-kicker { color: color-mix(in srgb, var(--hue) 55%, #e2e8f0); }
  html.light .ct-opt, html.light .ct-dt, html.light .ab-root-op { color: #475569; }
  html.light .sr-svc, html.light .svc-kicker { color: color-mix(in srgb, var(--hue) 62%, #0f172a); }


  /* Newsletter page. The compact .nl-* widget in the footer stays as it is;
     this is the roomier version for the page, built on the contact-page parts. */
  .nlp-confirmed { border-bottom: 1px solid color-mix(in srgb, #10b981 30%, transparent);
                   background: color-mix(in srgb, #10b981 10%, transparent); }
  .nlp-confirmed-p { max-width: 72rem; margin: 0 auto; padding: 1rem 1.25rem;
                     color: #34d399; font-size: .9rem; font-weight: 600; }
  html.light .nlp-confirmed-p { color: #047857; }

  /* The signup is the point of the page, so it follows you down while you read
     the three cards beside it instead of scrolling away. */
  .nlp-card { position: relative; align-self: start; }
  @media (min-width: 1000px) { .nlp-card { position: sticky; top: 6rem; } }
  .nlp-h { margin: 0; color: #f8fafc; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
  .nlp-p { margin: .8rem 0 0; max-width: 46ch; color: #94a3b8; font-size: .95rem; line-height: 1.75; }

  .nlp-form { position: relative; z-index: 1; margin-top: 1.8rem; max-width: 26rem; }
  .nlp-input { min-height: 3rem; font-size: 1rem; }
  @media (min-width: 640px) { .nlp-input { font-size: 1rem; } }
  .nlp-btn { width: 100%; margin-top: .9rem; padding-top: .9rem; padding-bottom: .9rem; }
  @media (min-width: 420px) { .nlp-btn { width: auto; min-width: 11rem; } }
  .nlp-status { margin: .8rem 0 0; min-height: 1.25rem; font-size: .88rem; }
  .nlp-note { margin: 1.1rem 0 0; color: #94a3b8; font-size: .82rem; line-height: 1.7; }
  html.light .nlp-h { color: #0f172a; }
  html.light .nlp-p, html.light .nlp-note { color: #475569; }

  .nlp-art { position: absolute; right: -3rem; bottom: -2.5rem; width: 17rem; opacity: .13;
             pointer-events: none; }
  .nlp-art svg { display: block; width: 100%; height: auto; }
  html.light .nlp-art { opacity: .1; }

  .nlp-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .85rem; }
  .nlp-list li { position: relative; padding-left: 1.1rem;
                 color: #94a3b8; font-size: .88rem; line-height: 1.7; }
  .nlp-list li::before { content: ""; position: absolute; left: 0; top: .62rem;
                         width: .35rem; height: .35rem; border-radius: 50%; background: var(--hue); }
  html.light .nlp-list li { color: #475569; }

  /* On the newsletter page the footer signup is dropped, because the page has
     its own. Without the block above it, the footer needs no divider. */
  .ft-nonl .ft { margin-top: 0; padding-top: 0; border-top: 0; }


  /* ============================= Homepage, new order =============================
     Ergebnisse (.rs-) / Problem (.prb-) / Pakete (.pk-) / Kontakt (.kb-)
     Newsletter band (.nlh-) / closing CTA (.cte-). */

  /* ---------- Ergebnisse: the three real results ---------- */
  .rs-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
  @media (min-width: 720px) { .rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
  .rs-card {
    position: relative; overflow: hidden;
    border: 1px solid #1e293b; border-radius: 1.25rem; background: rgba(15, 23, 42, .45);
    padding: 1.6rem 1.4rem 1.7rem;
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .44, 1),
                border-color .18s ease;
  }
  .rs-card.is-in { opacity: 1; transform: none; }
  .rs-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
                     background: var(--hue); }
  .rs-card:hover { border-color: color-mix(in srgb, var(--hue) 55%, #1e293b); }
  .rs-what { margin: 0; color: color-mix(in srgb, var(--hue) 55%, #e2e8f0);
             font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .rs-client { margin: .6rem 0 0; color: #f8fafc; font-size: 1.05rem; font-weight: 700;
               letter-spacing: -.01em; line-height: 1.4; }
  .rs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: .75rem 1rem; margin: 1.25rem 0 0;
              border-top: 1px solid #1e293b; border-bottom: 1px solid #1e293b;
              padding: 1.1rem 0; }
  .rs-stat { margin: 0; display: grid; gap: .15rem; }
  .rs-num { color: var(--hue); font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em;
            line-height: 1.05; }
  .rs-sl { color: #94a3b8; font-size: .82rem; font-weight: 600; }

  .rs-didh { margin: 1.25rem 0 0; color: #94a3b8; font-size: .72rem; font-weight: 700;
             letter-spacing: .07em; text-transform: uppercase; }
  .rs-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .55rem; }
  .rs-li { position: relative; padding-left: 1.2rem;
           color: #cbd5e1; font-size: .89rem; line-height: 1.6; }
  .rs-li::before { content: ""; position: absolute; left: .1rem; top: .5rem;
                   width: .42rem; height: .42rem; border-radius: 50%;
                   background: var(--hue); }
  html.light .rs-sl { color: #475569; }
  html.light .rs-didh { color: #475569; }
  html.light .rs-li { color: #334155; }
  html.light .rs-stats { border-color: #e2e8f0; }

  .rs-note { margin: 1.75rem 0 0; max-width: 62ch; color: #94a3b8; font-size: .84rem; line-height: 1.75; }

  .rs-now { margin-top: 2.25rem; border-top: 1px solid #1e293b; padding-top: 1.75rem; }
  .rs-now-h { margin: 0; color: #94a3b8; font-size: .74rem; font-weight: 700;
              letter-spacing: .07em; text-transform: uppercase; }
  .rs-now-p { margin: .7rem 0 0; max-width: 62ch; color: #cbd5e1; font-size: .95rem; line-height: 1.75; }

  html.light .rs-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .rs-client { color: #0f172a; }
  html.light .rs-note { color: #475569; }
  html.light .rs-what { color: color-mix(in srgb, var(--hue) 78%, #0f172a); }
  html.light .rs-now { border-color: #e2e8f0; }
  html.light .rs-now-p { color: #334155; }
  html.light .rs-now-h { color: #475569; }

  /* ---------- Problem: a diagnostic list, not a sales pitch ---------- */
  .prb-list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
  @media (min-width: 820px) { .prb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; } }
  .prb-item {
    display: grid; grid-template-columns: 1.6rem 1fr; gap: .85rem; align-items: start;
    border: 1px solid #1e293b; border-radius: .9rem; background: rgba(15, 23, 42, .4);
    padding: 1.05rem 1.15rem;
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.16, .84, .44, 1);
  }
  .prb-item.is-in { opacity: 1; transform: none; }
  .prb-mark { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
              background: rgba(244, 63, 94, .14); color: #fb7185; }
  .prb-mark svg { width: .85rem; height: .85rem; }
  .prb-t { color: #cbd5e1; font-size: .92rem; line-height: 1.7; }
  .prb-foot { margin: 2rem 0 0; max-width: 62ch; color: #f8fafc; font-size: 1.05rem;
              font-weight: 600; line-height: 1.7; }
  html.light .prb-item { background: #f8fafc; border-color: #e2e8f0; }
  html.light .prb-t { color: #334155; }
  html.light .prb-mark { background: rgba(190, 18, 60, .1); color: #be123c; }
  html.light .prb-foot { color: #0f172a; }

  /* ---------- Pakete: scope without prices ---------- */
  .pk-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
  @media (min-width: 680px) { .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
  @media (min-width: 1040px) { .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pk-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    border: 1px solid #1e293b; border-radius: 1.25rem; background: rgba(15, 23, 42, .45);
    padding: 1.6rem 1.4rem 1.6rem;
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .44, 1),
                border-color .18s ease;
  }
  .pk-card.is-in { opacity: 1; transform: none; }
  .pk-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
                     background: var(--hue); }
  .pk-card:hover { border-color: color-mix(in srgb, var(--hue) 55%, #1e293b); }
  .pk-n { margin: 0; color: #f8fafc; font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
  .pk-who { margin: .6rem 0 0; color: color-mix(in srgb, var(--hue) 50%, #e2e8f0);
            font-size: .88rem; font-weight: 600; line-height: 1.65; }
  .pk-list { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .8rem; flex: 1 1 auto; }
  .pk-i { position: relative; padding-left: 1.4rem; color: #94a3b8; font-size: .88rem; line-height: 1.7; }
  .pk-i::before { content: ""; position: absolute; left: 0; top: .42rem; width: .7rem; height: .7rem;
                  border-radius: 50%; background: color-mix(in srgb, var(--hue) 26%, transparent); }
  .pk-i::after { content: ""; position: absolute; left: .2rem; top: .62rem;
                 width: .3rem; height: .16rem; border-left: 1.6px solid var(--hue);
                 border-bottom: 1.6px solid var(--hue); transform: rotate(-45deg); }
  .pk-cta {
    display: block; margin-top: 1.6rem; border-radius: .7rem; background: #4338ca;
    padding: .78rem 1.1rem; color: #fff; font-size: .88rem; font-weight: 600; text-align: center;
    transition: filter .15s ease, transform .15s ease;
  }
  .pk-cta:hover { filter: brightness(1.15); }
  .pk-cta:active { transform: translateY(1px); }
  .pk-note { margin: 2rem 0 0; max-width: 68ch; color: #94a3b8; font-size: .86rem; line-height: 1.75; }
  .pk-link { color: #818cf8; text-decoration: underline; text-underline-offset: 3px; }
  .pk-link:hover { color: #a5b4fc; }
  html.light .pk-card { background: #f8fafc; border-color: #e2e8f0; }
  html.light .pk-n { color: #0f172a; }
  html.light .pk-who { color: color-mix(in srgb, var(--hue) 72%, #0f172a); }
  html.light .pk-i, html.light .pk-note { color: #475569; }
  html.light .pk-link { color: #4338ca; }

  /* ---------- Kontakt band ---------- */
  .kb { display: grid; gap: 2.5rem; }
  @media (min-width: 960px) { .kb { grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; } }
  .kb-lead { margin: 1rem 0 0; max-width: 56ch; color: #94a3b8; font-size: 1.05rem; line-height: 1.75; }
  .kb-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .85rem; }
  .kb-li { position: relative; padding-left: 1.3rem; color: #cbd5e1; font-size: .92rem; line-height: 1.7; }
  .kb-li::before { content: ""; position: absolute; left: 0; top: .6rem; width: .4rem; height: .4rem;
                   border-radius: 50%; background: #6366f1; }
  .kb-ways { display: grid; gap: 1rem; }
  .kb-way {
    position: relative; overflow: hidden; display: grid; gap: .3rem;
    border: 1px solid #1e293b; border-radius: 1rem; background: rgba(15, 23, 42, .45);
    padding: 1.15rem 1.3rem; transition: border-color .18s ease, transform .18s ease;
  }
  .kb-way::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
                    background: var(--hue); }
  .kb-way:hover { border-color: color-mix(in srgb, var(--hue) 55%, #1e293b); transform: translateX(2px); }
  .kb-way-k { color: #f8fafc; font-size: .98rem; font-weight: 700; }
  .kb-way-v { color: #94a3b8; font-size: .86rem; line-height: 1.6; }
  .kb-way--main { background: color-mix(in srgb, var(--hue) 12%, rgba(15, 23, 42, .45)); }
  html.light .kb-lead { color: #475569; }
  html.light .kb-li { color: #334155; }
  html.light .kb-way { background: #f8fafc; border-color: #e2e8f0; }
  html.light .kb-way-k { color: #0f172a; }
  html.light .kb-way-v { color: #475569; }
  html.light .kb-way--main { background: color-mix(in srgb, var(--hue) 8%, #f8fafc); }

  /* ---------- Newsletter band on the homepage ---------- */
  .nlh-card {
    position: relative; overflow: hidden; display: grid; gap: 2rem;
    border: 1px solid #1e293b; border-radius: 1.5rem; background: rgba(15, 23, 42, .6);
    padding: 2rem 1.5rem 2.2rem;
  }
  @media (min-width: 900px) { .nlh-card { grid-template-columns: 1.15fr .85fr;
                                          padding: 2.75rem 2.5rem; align-items: center; } }
  .nlh-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
                      background: var(--hue); }
  .nlh-h { margin: 0; color: #f8fafc; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
  @media (min-width: 640px) { .nlh-h { font-size: 1.9rem; } }
  .nlh-p { margin: .9rem 0 0; max-width: 52ch; color: #94a3b8; font-size: .97rem; line-height: 1.75; }
  .nlh-form { margin-top: 1.6rem; max-width: 32rem; }
  .nlh-row { display: grid; gap: .75rem; margin-top: .5rem; }
  @media (min-width: 480px) { .nlh-row { grid-template-columns: 1fr auto; align-items: stretch; } }
  .nlh-input { margin-top: 0; min-height: 3rem; font-size: 1rem; }
  @media (min-width: 640px) { .nlh-input { font-size: 1rem; } }
  .nlh-btn { width: 100%; padding-top: .9rem; padding-bottom: .9rem; }
  @media (min-width: 480px) { .nlh-btn { width: auto; min-width: 10rem; } }
  .nlh-status { margin: .8rem 0 0; min-height: 1.25rem; font-size: .86rem; }
  .nlh-note { margin: 1rem 0 0; color: #94a3b8; font-size: .82rem; line-height: 1.7; }
  .nlh-art { display: none; }
  @media (min-width: 900px) { .nlh-art { display: block; opacity: .5; } }
  .nlh-art svg { display: block; width: 100%; height: auto; }
  html.light .nlh-card { background: #fff; border-color: #e2e8f0; }
  html.light .nlh-h { color: #0f172a; }
  html.light .nlh-p, html.light .nlh-note { color: #475569; }

  /* ---------- Closing CTA ---------- */
  .cte-sec { }
  .cte {
    position: relative; overflow: hidden; text-align: center;
    border: 1px solid color-mix(in srgb, #6366f1 45%, #1e293b); border-radius: 1.5rem;
    background: linear-gradient(140deg,
                color-mix(in srgb, #6366f1 16%, rgba(15, 23, 42, .6)),
                rgba(15, 23, 42, .6) 65%);
    padding: 2.75rem 1.5rem 3rem;
  }
  @media (min-width: 720px) { .cte { padding: 3.5rem 3rem 3.75rem; } }
  .cte-h { margin: 0 auto; max-width: 24ch; color: #fff; font-size: 1.9rem; font-weight: 800;
           letter-spacing: -.025em; line-height: 1.15; }
  @media (min-width: 640px) { .cte-h { font-size: 2.4rem; } }
  .cte-p { margin: 1.1rem auto 0; max-width: 54ch; color: #cbd5e1; font-size: 1.02rem; line-height: 1.75; }
  .cte-row { display: flex; flex-direction: column; justify-content: center; gap: .75rem; margin-top: 2rem; }
  @media (min-width: 480px) { .cte-row { flex-direction: row; } }
  .cte-a1 { display: inline-flex; align-items: center; justify-content: center;
            border-radius: .7rem; background: #4338ca; padding: .9rem 1.9rem;
            color: #fff; font-size: .92rem; font-weight: 600;
            transition: filter .15s ease, transform .15s ease; }
  .cte-a1:hover { filter: brightness(1.15); }
  .cte-a1:active { transform: translateY(1px); }
  .cte-a2 { display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid #475569; border-radius: .7rem; padding: .9rem 1.9rem;
            color: #fff; font-size: .92rem; font-weight: 600; transition: border-color .15s ease; }
  .cte-a2:hover { border-color: #94a3b8; }
  html.light .cte { border-color: color-mix(in srgb, #4f46e5 40%, #e2e8f0);
                    background: linear-gradient(140deg, color-mix(in srgb, #4f46e5 10%, #fff), #f8fafc 65%); }
  html.light .cte-h { color: #0f172a; }
  html.light .cte-p { color: #475569; }
  html.light .cte-a2 { border-color: #cbd5e1; color: #0f172a; }
  html.light .cte-a2:hover { border-color: #94a3b8; }


  /* package field on the contact page */
  .ct-pknote { margin-top: .6rem; font-size: .78rem; }
  .ct-pkhit {
    margin: 0 0 1.5rem; border: 1px solid color-mix(in srgb, #6366f1 45%, #1e293b);
    border-radius: .8rem; background: color-mix(in srgb, #6366f1 12%, transparent);
    padding: .85rem 1.1rem; color: #e2e8f0; font-size: .88rem; line-height: 1.65;
  }
  html.light .ct-pkhit { border-color: color-mix(in srgb, #4f46e5 35%, #e2e8f0);
                         background: color-mix(in srgb, #4f46e5 7%, #fff); color: #334155; }

  /* band at the top of the services page pointing at the packages */
  .svp-band {
    display: grid; gap: 1rem; margin-top: 2rem;
    border: 1px solid color-mix(in srgb, #6366f1 42%, #1e293b); border-radius: 1.1rem;
    background: color-mix(in srgb, #6366f1 11%, rgba(15, 23, 42, .5));
    padding: 1.4rem 1.5rem;
  }
  @media (min-width: 760px) { .svp-band { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } }
  .svp-band-p { margin: 0; max-width: 62ch; color: #cbd5e1; font-size: .95rem; line-height: 1.7; }
  .svp-band-a { justify-self: start; display: inline-flex; align-items: center; justify-content: center;
                border-radius: .7rem; background: #4338ca; padding: .75rem 1.4rem;
                color: #fff; font-size: .88rem; font-weight: 600; white-space: nowrap;
                transition: filter .15s ease; }
  .svp-band-a:hover { filter: brightness(1.15); }
  html.light .svp-band { border-color: color-mix(in srgb, #4f46e5 32%, #e2e8f0);
                         background: color-mix(in srgb, #4f46e5 7%, #fff); }
  html.light .svp-band-p { color: #334155; }


  /* the header is sticky, so anchored sections need room above the heading */
  #ergebnisse, #problem, #pakete, #ablauf, #faq, #kontakt, #newsletter { scroll-margin-top: 5.5rem; }


  /* one column: the open panel belongs under the card that was tapped,
     not at the top of the list */
  @media (max-width: 639px) {
    .stp .stp-card, .stp .stp-drawer { order: 0; }
  }


  /* capability list on the About page */
  .ab-team { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; }
  .ab-tm { position: relative; display: grid; gap: .3rem;
           border: 1px solid #1e293b; border-radius: .9rem;
           background: rgba(15, 23, 42, .45); padding: 1.05rem 1.2rem 1.05rem 1.4rem; }
  .ab-tm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
                   border-radius: .9rem 0 0 .9rem; background: var(--hue); }
  .ab-tm-r { color: #f8fafc; font-size: .95rem; font-weight: 700; }
  .ab-tm-d { color: #94a3b8; font-size: .88rem; line-height: 1.7; }
  html.light .ab-tm { background: #f8fafc; border-color: #e2e8f0; }
  html.light .ab-tm-r { color: #0f172a; }
  html.light .ab-tm-d { color: #475569; }


  /* "learn more" link under the packages */
  .pk-more { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem;
             min-height: 2.75rem;
             border: 1px solid color-mix(in srgb, #6366f1 60%, #1e293b); border-radius: .7rem;
             background: color-mix(in srgb, #6366f1 16%, transparent);
             padding: .72rem 1.3rem;
             color: #c7d2fe; font-size: .92rem; font-weight: 600;
             transition: background .15s ease, border-color .15s ease, color .15s ease; }
  .pk-more::after { content: ""; width: .42rem; height: .42rem;
                    border-top: 2px solid currentColor; border-right: 2px solid currentColor;
                    transform: rotate(45deg); transition: transform .15s ease; }
  .pk-more:hover { background: color-mix(in srgb, #6366f1 26%, transparent);
                   border-color: #6366f1; color: #fff; }
  .pk-more:hover::after { transform: rotate(45deg) translate(2px, -2px); }
  html.light .pk-more { border-color: color-mix(in srgb, #4f46e5 45%, #e2e8f0);
                        background: color-mix(in srgb, #4f46e5 9%, #fff); color: #4338ca; }
  html.light .pk-more:hover { color: #312e81; }


  /* two products in development, with a screenshot each */
  .rs-prod { display: grid; gap: 1.25rem; margin-top: 1.6rem; }
  @media (min-width: 760px) { .rs-prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
  .rs-pcard { position: relative; overflow: hidden; display: flex; flex-direction: column;
              border: 1px solid #1e293b; border-radius: 1.25rem; background: rgba(15, 23, 42, .45);
              transition: border-color .18s ease; }
  .rs-pcard:hover { border-color: color-mix(in srgb, var(--hue) 55%, #1e293b); }
  .rs-shot { position: relative; border-bottom: 1px solid #1e293b;
             background: color-mix(in srgb, var(--hue) 10%, transparent); }
  .rs-shot img { display: block; width: 100%; height: auto; }
  .rs-pbody { flex: 1 1 auto; padding: 1.35rem 1.4rem 1.5rem; }
  .rs-pn { margin: 0; color: #f8fafc; font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; }
  .rs-pd { margin: .6rem 0 0; color: #94a3b8; font-size: .89rem; line-height: 1.7; }
  .rs-plist { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
  .rs-pli { position: relative; padding-left: 1.2rem;
            color: #cbd5e1; font-size: .85rem; line-height: 1.6; }
  .rs-pli::before { content: ""; position: absolute; left: .1rem; top: .48rem;
                    width: .42rem; height: .42rem; border-radius: 50%; background: var(--hue); }
  html.light .rs-pcard { background: #fff; border-color: #e2e8f0; }
  html.light .rs-shot { border-color: #e2e8f0; }
  html.light .rs-pn { color: #0f172a; }
  html.light .rs-pd { color: #475569; }
  html.light .rs-pli { color: #334155; }


  /* note on the English blog index */
  .bl-note { margin: 1rem 0 0; max-width: 62ch; border-left: 3px solid #6366f1;
             padding: .1rem 0 .1rem 1rem; color: #94a3b8; font-size: .92rem; line-height: 1.75; }
  html.light .bl-note { border-color: #4f46e5; color: #475569; }

  @media (prefers-reduced-motion: reduce) {
    .rs-card, .prb-item, .pk-card { opacity: 1 !important; transform: none !important;
                                    transition: none !important; }

    .ab-sec, .ab-card, .ab-root, .ab-root-op,
    .ct-form, .ct-card { opacity: 1; transform: none; transition: none; }
    .ab-name-word { animation: none; background-position: 0 0; }
    .an-story .reach, .an-story .flat, .an-story .lift { stroke-dashoffset: 0; opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .svp { opacity: 1; transform: none; transition: none; }
    .svp-cta, .svp-jump { transition: none; }
  }

  @media (prefers-reduced-motion: reduce) { .sr-card, .sr-plus { transition: none; } }

  @media (prefers-reduced-motion: reduce) { .pj-card, .pj-shot { transition: none; } }

  @media (prefers-reduced-motion: reduce) { .bl-link, .bl-shot img { transition: none; } }

  @media (prefers-reduced-motion: reduce) {
    .site-header, .hd-link, .hd-link::after, .hd-cta { transition: none; }
  }

  @media (prefers-reduced-motion: reduce) { .an-nl * { animation: none !important; } }

  @media (prefers-reduced-motion: reduce) {
    .hero-spot, .hero-cue span::after, .hero-cta a:last-child::after,
    .hero-copy > p:first-child::before { animation: none !important; }
    .hero-copy h1 span { animation: none !important; background-position: 0 50%; }
    .fq-item { opacity: 1; transform: none; transition: none; }
    .fq-panel.is-open .an *, .fq-foot-art .an * { animation: none !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-grid, .hero-copy > *, .hero-copy h1 span { animation: none !important; }
    .fq-panel, .fq-a, .fq-ico { transition: none; }
  }

  @media (prefers-reduced-motion: reduce) { .ar-shot img { transition: none; } }

  @media (prefers-reduced-motion: reduce) {
    .an * { animation: none !important; }
    .an .tk, .an .ln { stroke-dashoffset: 0; }
    .an .ring { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) { .stp-card, .stp-bar > i { transition: none; } }

  @media (prefers-reduced-motion: reduce) { .str-tab, .str-seg { transition: none; } }

  @media (prefers-reduced-motion: reduce) { .svc-card { transition: none; } }

  @media (prefers-reduced-motion: reduce) {
    .liquid__blob { animation: none; }
    .ticker__track { animation: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation: none !important; }
  }