*,: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:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;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}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-bottom-1\.5{bottom:-.375rem}.-bottom-6{bottom:-1.5rem}.-top-6{top:-1.5rem}.bottom-0{bottom:0}.bottom-16{bottom:4rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.left-6{left:1.5rem}.left-\[2px\]{left:2px}.left-full{left:100%}.right-0{right:0}.right-6{right:1.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-6{top:1.5rem}.top-\[17\%\]{top:17%}.top-\[2px\]{top:2px}.top-full{top:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[6\]{z-index:6}.z-\[9999\]{z-index:9999}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.-mx-3{margin-left:-.75rem;margin-right:-.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-\[15\%\]{margin-left:15%}.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-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[2\.2\/1\]{aspect-ratio:2.2/1}.aspect-square{aspect-ratio:1/1}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-1\/2{height:50%}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-28{height:7rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-80{height:20rem}.h-\[1\.4rem\]{height:1.4rem}.h-\[1\.8rem\]{height:1.8rem}.h-\[100dvh\]{height:100dvh}.h-\[2px\]{height:2px}.h-\[420px\]{height:420px}.h-\[48px\]{height:48px}.h-full{height:100%}.h-px{height:1px}.w-0{width:0}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-80{width:20rem}.w-\[1\.4rem\]{width:1.4rem}.w-\[1050px\]{width:1050px}.w-\[1100px\]{width:1100px}.w-\[3\.2rem\]{width:3.2rem}.w-\[40\%\]{width:40%}.w-\[45\%\]{width:45%}.w-\[55\%\]{width:55%}.w-\[60\%\]{width:60%}.w-\[850px\]{width:850px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-\[85\%\]{max-width:85%}.max-w-\[90\%\]{max-width:90%}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-4{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-4{--tw-translate-x:-1rem}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.-translate-y-\[2px\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-\[2px\]{--tw-translate-y:-2px}.translate-y-2{--tw-translate-y:0.5rem}.translate-y-2,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-90{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))}.rotate-90{--tw-rotate:90deg}.scale-0{--tw-scale-x:0;--tw-scale-y:0}.scale-0,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-50{--tw-scale-x:.5;--tw-scale-y:.5}.scale-50,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-default{cursor:default}.cursor-none{cursor:none}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\[1\.5rem\]{border-radius:1.5rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-\[999px\]{border-radius:999px}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-none{border-style:none}.border-transparent{border-color:transparent}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-\[var\(--theme-ambient\)\]{background-color:var(--theme-ambient)}.bg-\[var\(--theme-color\)\]{background-color:var(--theme-color)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/20{background-color:rgba(0,0,0,.2)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/\[0\.02\]{background-color:hsla(0,0%,100%,.02)}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-\[var\(--theme-ambient\)\]{--tw-gradient-from:var(--theme-ambient) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-emerald-900\/40{--tw-gradient-from:rgba(6,78,59,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,78,59,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-900\/40{--tw-gradient-from:rgba(49,46,129,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(49,46,129,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-rose-900\/40{--tw-gradient-from:rgba(136,19,55,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(136,19,55,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-white\/10{--tw-gradient-from:hsla(0,0%,100%,.1) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-black\/40{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/10{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-black{--tw-gradient-to:#000 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white\/5{--tw-gradient-to:hsla(0,0%,100%,.05) var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-top{background-position:top}.bg-no-repeat{background-repeat:no-repeat}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.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}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.pb-12{padding-bottom:3rem}.pt-0\.5{padding-top:.125rem}.pt-2{padding-top:.5rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.text-7xl{font-size:4.5rem;line-height:1}.text-\[1\.7rem\]{font-size:1.7rem}.text-\[10px\]{font-size:10px}.text-\[11\.5vw\]{font-size:11.5vw}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[2\.5rem\]{font-size:2.5rem}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.leading-\[0\.9\]{line-height:.9}.leading-\[1\.8\]{line-height:1.8}.leading-\[1\],.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}.text-\[var\(--theme-color\)\]{color:var(--theme-color)}.text-green-400\/80{color:rgba(74,222,128,.8)}.text-red-400\/60{color:hsla(0,91%,71%,.6)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.mix-blend-screen{mix-blend-mode:screen}.mix-blend-overlay{mix-blend-mode:overlay}.shadow-\[0_0_10px_var\(--theme-color\)\]{--tw-shadow:0 0 10px var(--theme-color);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(255\2c 255\2c 255\2c 0\.15\)\]{--tw-shadow:0 0 30px hsla(0,0%,100%,.15);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 20px 50px rgba(0,0,0,.5);--tw-shadow-colored:0 20px 50px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_1px_1px_rgba\(255\2c 255\2c 255\2c 0\.15\)\2c _0_10px_20px_-5px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:inset 0 1px 1px hsla(0,0%,100%,.15),0 10px 20px -5px rgba(0,0,0,.5);--tw-shadow-colored:inset 0 1px 1px var(--tw-shadow-color),0 10px 20px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:inset 0 1px 3px rgba(0,0,0,.3);--tw-shadow-colored:inset 0 1px 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{--tw-shadow:inset 0 2px 4px rgba(0,0,0,.6);--tw-shadow-colored:inset 0 2px 4px var(--tw-shadow-color)}.shadow-\[inset_0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.6\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl,.blur-\[100px\]{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)}.blur-\[100px\]{--tw-blur:blur(100px)}.drop-shadow-\[0_0_15px_rgba\(255\2c 255\2c 255\2c 0\.2\)\]{--tw-drop-shadow:drop-shadow(0 0 15px hsla(0,0%,100%,.2))}.drop-shadow-\[0_0_15px_rgba\(255\2c 255\2c 255\2c 0\.2\)\],.drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.backdrop-blur-3xl{--tw-backdrop-blur:blur(64px)}.backdrop-blur-3xl,.backdrop-blur-\[2px\]{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-\[2px\]{--tw-backdrop-blur:blur(2px)}.backdrop-blur-\[40px\]{--tw-backdrop-blur:blur(40px)}.backdrop-blur-\[40px\],.backdrop-blur-md{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-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-\[color\2c transform\]{transition-property:color,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[opacity\2c background-color\2c border-color\2c transform\]{transition-property:opacity,background-color,border-color,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[opacity\2c transform\]{transition-property:opacity,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\2c background-color\]{transition-property:width,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-1000{transition-delay:1s}.delay-200{transition-delay:.2s}.duration-1000{transition-duration:1s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.duration-\[1500ms\]{transition-duration:1.5s}.duration-\[2000ms\]{transition-duration:2s}.duration-\[400ms\]{transition-duration:.4s}.duration-\[800ms\]{transition-duration:.8s}.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\]{transition-timing-function:cubic-bezier(.16,1,.3,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.will-change-transform{will-change:transform}.placeholder\:text-white\/40::-moz-placeholder{color:hsla(0,0%,100%,.4)}.placeholder\:text-white\/40::placeholder{color:hsla(0,0%,100%,.4)}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-white\/20:hover{border-color:hsla(0,0%,100%,.2)}.hover\:border-white\/5:hover{border-color:hsla(0,0%,100%,.05)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:bg-white\/\[0\.03\]:hover{background-color:hsla(0,0%,100%,.03)}.hover\:bg-white\/\[0\.04\]:hover{background-color:hsla(0,0%,100%,.04)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-white\/70:hover{color:hsla(0,0%,100%,.7)}.hover\:\!opacity-100:hover{opacity:1!important}.group:focus-within .group-focus-within\:opacity-10{opacity:.1}.group:hover .group-hover\:w-full{width:100%}.group\/about:hover .group-hover\/about\:translate-x-1{--tw-translate-x:0.25rem}.group\/about:hover .group-hover\/about\:translate-x-1,.group\/featured:hover .group-hover\/featured\:-translate-y-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group\/featured:hover .group-hover\/featured\:-translate-y-2{--tw-translate-y:-0.5rem}.group\/featured:hover .group-hover\/featured\:translate-y-1{--tw-translate-y:0.25rem}.group\/featured:hover .group-hover\/featured\:translate-y-1,.group\/item:hover .group-hover\/item\:translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group\/item:hover .group-hover\/item\:translate-y-0{--tw-translate-y:0px}.group\/logo:hover .group-hover\/logo\:translate-x-0{--tw-translate-x:0px}.group:hover .group-hover\:rotate-180,.group\/logo:hover .group-hover\/logo\:translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-180{--tw-rotate:180deg}.group\/banner:hover .group-hover\/banner\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.group\/banner:hover .group-hover\/banner\:scale-110,.group\/featured:hover .group-hover\/featured\:scale-105{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group\/featured:hover .group-hover\/featured\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.group\/item:hover .group-hover\/item\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.group\/item:hover .group-hover\/item\:scale-110,.group\/logo:hover .group-hover\/logo\:scale-\[1\.05\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group\/logo:hover .group-hover\/logo\:scale-\[1\.05\]{--tw-scale-x:1.05;--tw-scale-y:1.05}.group\/mob-card:hover .group-hover\/mob-card\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group\/item:hover .group-hover\/item\:border-\[var\(--theme-color\)\]{border-color:var(--theme-color)}.group\/about:hover .group-hover\/about\:text-white,.group\/feature:hover .group-hover\/feature\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group\/feature:hover .group-hover\/feature\:text-white\/70{color:hsla(0,0%,100%,.7)}.group\/featured:hover .group-hover\/featured\:text-\[var\(--theme-color\)\],.group\/item:hover .group-hover\/item\:text-\[var\(--theme-color\)\]{color:var(--theme-color)}.group\/logo:hover .group-hover\/logo\:text-white,.group\/mob-card:hover .group-hover\/mob-card\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group\/item:hover .group-hover\/item\:opacity-100,.group\/logo:hover .group-hover\/logo\:opacity-100,.group\/mob-card:hover .group-hover\/mob-card\:opacity-100{opacity:1}.group\/tracklist:hover .group-hover\/tracklist\:opacity-30{opacity:.3}.group\/tracklist:hover .group-hover\/tracklist\:opacity-40{opacity:.4}.group\/logo:active .group-active\/logo\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:bottom-24{bottom:6rem}.sm\:bottom-6{bottom:1.5rem}.sm\:left-10{left:2.5rem}.sm\:right-10{right:2.5rem}.sm\:top-\[19\%\]{top:19%}.sm\:ml-2{margin-left:.5rem}.sm\:ml-4{margin-left:1rem}.sm\:ml-\[25\%\]{margin-left:25%}.sm\:h-10{height:2.5rem}.sm\:h-12{height:3rem}.sm\:h-16{height:4rem}.sm\:h-5{height:1.25rem}.sm\:h-6{height:1.5rem}.sm\:h-7{height:1.75rem}.sm\:h-8{height:2rem}.sm\:h-\[1\.6rem\]{height:1.6rem}.sm\:h-\[2rem\]{height:2rem}.sm\:w-12{width:3rem}.sm\:w-5{width:1.25rem}.sm\:w-6{width:1.5rem}.sm\:w-7{width:1.75rem}.sm\:w-8{width:2rem}.sm\:w-\[1\.6rem\]{width:1.6rem}.sm\:w-\[3\.6rem\]{width:3.6rem}.sm\:max-w-md{max-width:28rem}.sm\:gap-4{gap:1rem}.sm\:gap-5{gap:1.25rem}.sm\:gap-6{gap:1.5rem}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:pt-8{padding-top:2rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-\[10px\]{font-size:10px}.sm\:text-\[11px\]{font-size:11px}.sm\:text-\[9vw\]{font-size:9vw}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:ml-\[30\%\]{margin-left:30%}.md\:max-w-\[500px\]{max-width:500px}}@media (min-width:1024px){.lg\:-bottom-8{bottom:-2rem}.lg\:-top-8{top:-2rem}.lg\:bottom-28{bottom:7rem}.lg\:bottom-8{bottom:2rem}.lg\:left-16{left:4rem}.lg\:right-16{right:4rem}.lg\:top-\[15\%\]{top:15%}.lg\:ml-\[42\%\]{margin-left:42%}.lg\:mt-0{margin-top:0}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:px-16{padding-left:4rem;padding-right:4rem}.lg\:text-\[11px\]{font-size:11px}.lg\:text-\[9\.5rem\]{font-size:9.5rem}.lg\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:1280px){.xl\:top-\[13\%\]{top:13%}.xl\:text-\[11px\]{font-size:11px}}
/* Fontul pentru textul normal / global */
        @font-face {
            font-family: 'CustomRegularFont';
            src: url('../vendor/fonts/regular.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* Fontul pentru titluri */
        @font-face {
            font-family: 'CustomTitleFont';
            src: url('../vendor/fonts/title.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        body {
            font-family: 'CustomRegularFont', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #111111;
        }

        .font-title {
            font-family: 'CustomTitleFont', 'CustomRegularFont', sans-serif;
        }

.tracking-widest-custom {
    letter-spacing: 0.2em;
}

.app-hero-bottom-mask {
    background: linear-gradient(
        to top,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.82) 8%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.18) 24%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.1) 100%
    );
}

.dark-mode .app-hero-bottom-mask {
    background: linear-gradient(
        to top,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.82) 8%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.18) 24%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.1) 100%
    );
}

@property --mask-r {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --mask-g {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --mask-b {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@keyframes maskColorToDark {
    from { --mask-r: 0; --mask-g: 0; --mask-b: 0; }
    to { --mask-r: 17; --mask-g: 17; --mask-b: 17; }
}

@keyframes maskColorToLight {
    from { --mask-r: 17; --mask-g: 17; --mask-b: 17; }
    to { --mask-r: 0; --mask-g: 0; --mask-b: 0; }
}

:root.theme-animating.theme-to-dark {
    animation: maskColorToDark 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root.theme-animating.theme-to-light {
    animation: maskColorToLight 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================== */
/* ANIMAȚII AWWWARDS (OPTIMIZATE PENTRU PERFORMANȚĂ) */
/* ========================================== */

        :root {
            --app-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
            --app-motion-duration: 0.9s;
            --app-motion-duration-fast: 0.82s;
            --app-motion-shift-y: 20px;
        }

        @keyframes bg-scale-in {
            0% { transform: scale(1.08); opacity: 0; filter: blur(8px); }
            100% { transform: scale(1); opacity: 1; filter: blur(0); }
        }

        @keyframes reveal-up {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes reveal-down {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes reveal-left {
            0% { opacity: 0; transform: translateX(30px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        @keyframes reveal-right {
            0% { opacity: 0; transform: translateX(-30px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        .anim-bg { animation: bg-scale-in 2s var(--ease-premium) both; }
        .anim-reveal-up { animation: reveal-up 1.4s var(--ease-premium) both; }
        .anim-reveal-down { animation: reveal-down 1.4s var(--ease-premium) both; }
        .anim-reveal-left { animation: reveal-left 1.4s var(--ease-premium) both; }
        .anim-reveal-right { animation: reveal-right 1.4s var(--ease-premium) both; }

        @keyframes fade-in-up-soft {
            0% { opacity: 0; transform: translateY(var(--app-motion-shift-y)) scale(0.985); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes pop-in {
            0% { opacity: 0; transform: translateY(10px) scale(0.97); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .section-projects .app-projects-title,
        .section-projects .app-projects-lede,
        .section-projects .app-projects-filter-wrap,
        .section-projects .app-projects-primary,
        .section-projects .app-projects-feature,
        .section-projects .app-projects-recent-head,
        .section-projects .app-projects-recent-slider,
        .section-projects .app-projects-card,
        .section-projects .app-projects-archive-btn,
        .section-services .app-services-mobile-header,
        .section-services .servicesSwiper,
        .section-services .app-services-mobile-header h2,
        .section-services .app-services-mobile-header p,
        .section-services .app-services-card,
        .section-services .app-services-contact-btn {
            opacity: 0;
            transform: translateY(var(--app-motion-shift-y)) scale(0.985);
            will-change: opacity, transform;
        }

        .app-projects-title.revealed,
        .app-projects-lede.revealed,
        .app-projects-filter-wrap.revealed,
        .app-projects-primary.revealed,
        .app-projects-feature.revealed,
        .app-projects-recent-head.revealed,
        .app-projects-recent-slider.revealed,
        .app-services-mobile-header.revealed,
        .servicesSwiper.revealed,
        .app-services-mobile-header h2.revealed,
        .app-services-mobile-header p.revealed,
        .app-projects-card.revealed,
        .app-services-card.revealed {
            animation: fade-in-up-soft var(--app-motion-duration) var(--app-motion-ease) both;
        }

        .app-projects-archive-btn.revealed,
        .app-services-contact-btn.revealed {
            animation: pop-in var(--app-motion-duration-fast) var(--app-motion-ease) both;
        }

        .app-shift-text {
            --shift-word-step: 0.075s;
            --shift-text-delay: 0s;
            animation: none !important;
        }

        .js-enabled .app-shift-text {
            opacity: 1 !important;
            transform: none !important;
        }

        .js-enabled #home-hero-line-1:not(.app-shift-text),
        .js-enabled #home-hero-line-2:not(.app-shift-text) {
            opacity: 0;
        }

        .app-shift-word-wrapper {
            display: inline-block;
            overflow: hidden;
            vertical-align: bottom;
        }

        .app-shift-word {
            display: inline-block;
            opacity: 0;
            transform: translate3d(0, 105%, 0) rotate(10deg);
            transform-origin: left bottom;
            transition:
                transform 0.92s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--shift-text-delay) + var(--shift-word-delay, 0s)),
                opacity 0.82s ease-out calc(var(--shift-text-delay) + var(--shift-word-delay, 0s));
            will-change: transform, opacity;
        }

        .app-shift-text.is-shift-revealed .app-shift-word {
            opacity: 1;
            transform: translate3d(0, 0, 0) rotate(0deg);
        }

        @media (prefers-reduced-motion: reduce) {
            .app-shift-word {
                opacity: 1;
                transform: none;
                transition: none;
                will-change: auto;
            }

            .section-projects .app-projects-card,
            .section-services .app-services-card,
            .section-projects .app-projects-filter-wrap,
            .section-projects .app-projects-primary,
            .section-projects .app-projects-feature,
            .section-projects .app-projects-recent-head,
            .section-projects .app-projects-recent-slider,
            .section-services .app-services-mobile-header,
            .section-services .servicesSwiper,
            .section-projects .app-projects-archive-btn,
            .section-services .app-services-contact-btn {
                opacity: 1;
                transform: none;
                animation: none;
            }
        }

        .delay-200 { animation-delay: 0.2s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-800 { animation-delay: 0.8s; }
        .delay-1000 { animation-delay: 1.0s; }
        .delay-1200 { animation-delay: 1.2s; }
        .delay-1400 { animation-delay: 1.4s; }
        .delay-1500 { animation-delay: 1.5s; }
        .delay-1600 { animation-delay: 1.6s; }
        .delay-1700 { animation-delay: 1.7s; }

        /* Mobile-first performance mode for first viewport rendering */
        @media (max-width: 1023px) {
            .anim-bg,
            .anim-reveal-up,
            .anim-reveal-down,
            .anim-reveal-left,
            .anim-reveal-right {
                animation: none !important;
                opacity: 1 !important;
                transform: none !important;
                filter: none !important;
            }
        }

        /* ========================================== */
        /* GLOBAL THEME VARIABLES & SCROLLBAR/SELECTION*/
        /* ========================================== */

        @property --theme-color {
            syntax: '<color>';
            inherits: true;
            initial-value: #c04050;
        }
        @property --theme-bg-alpha {
            syntax: '<color>';
            inherits: true;
            initial-value: rgba(255, 143, 160, 0.35);
        }
        @property --theme-hover-alpha {
            syntax: '<color>';
            inherits: true;
            initial-value: rgba(255, 143, 160, 0.15);
        }
        @property --theme-ambient {
            syntax: '<color>';
            inherits: true;
            initial-value: rgba(255, 143, 160, 0.25);
        }
        @property --theme-glow-outer {
            syntax: '<color>';
            inherits: true;
            initial-value: rgba(192, 64, 80, 0.24);
        }

        :root {
            --bg-primary: #faf9f6;
            --bg-secondary: #f3f1ed;
            --bg-soft: #eceae6;
            --surface-card: #ffffff;

            --text-primary: #0f0f10;
            --text-secondary: #38383d;
            --text-muted: #6b6770;

            --border-subtle: rgba(15, 15, 16, 0.08);
            --border-strong: rgba(15, 15, 16, 0.16);

            --accent-primary: #c04050;
            --accent-deep: #8c3040;
            --accent-hover: #9f3344;
            --accent-soft: #ff8fa0;
            --accent-gradient: linear-gradient(135deg, #ffa8b0 0%, #c04050 58%, #8c3040 100%);

            --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
            --radius-pill: 999px;
            --radius-card-lg: 2rem;
            --radius-card-md: 1.5rem;
            --radius-card-sm: 1rem;
            --radius-panel-lg: 1.75rem;
            --radius-cinematic: 2rem;
            --glass-light: rgba(255, 255, 255, 0.08);
            --glass-border-light: rgba(255, 255, 255, 0.12);
            --shadow-soft: 0 18px 34px -22px rgba(0, 0, 0, 0.42);
            --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.08);
            --shadow-card-hover: 0 24px 52px rgba(0, 0, 0, 0.18);
            --shadow-editorial: 0 26px 70px rgba(0, 0, 0, 0.28);
            --blur-glass-sm: 10px;
            --blur-glass-md: 16px;
            --blur-glass-lg: 24px;
            --blur-panel: 28px;
            --blur-atmosphere: 84px;
            --blur-hero-atmosphere: 100px;
            --space-1: 0.5rem;
            --space-2: 0.75rem;
            --space-3: 1rem;
            --space-4: 1.5rem;
            --space-5: 2rem;
            --space-6: 3rem;
            --space-7: 4.5rem;
            --space-8: 6rem;
            --section-pad-x: clamp(1.25rem, 5vw, 4.0625rem);
            --section-pad-y: clamp(5.5rem, 9vw, 8rem);
            --section-pad-y-mobile: clamp(3.75rem, 14vw, 5rem);
            --heading-content-gap: clamp(1rem, 2vw, 1.4rem);
            --section-flow-gap: clamp(2.25rem, 4.5vw, 4rem);
            --grid-gap-premium: clamp(1rem, 2vw, 1.5rem);
            --btn-about-height: 58px;
            --btn-about-min-width: 210px;
            --btn-about-font-size: 0.82rem;
            --ui-control-height: 44px;
            --ui-control-font-size: 13px;
            --ui-control-font-weight: 700;
            --ui-control-letter-spacing: 0.02em;
            --ui-control-icon-size: 1.1em;
            --ui-control-pad-x: 1.2rem;
            --ui-control-gap: 0.5rem;
            --ui-control-height-about: 52px;
            --btn-font-size-global: var(--ui-control-font-size);
            --btn-font-weight-global: var(--ui-control-font-weight);
            --ui-title-size: clamp(2.7rem, 6.8vw, 5.6rem);
            --ui-title-line-height: 0.98;
            --ui-title-letter-spacing: -0.012em;
            --ui-description-size: clamp(1rem, 1.45vw, 1.2rem);
            --ui-description-line-height: 1.55;
            --ui-description-weight: 500;
            --ui-muted-opacity: 0.72;
            --ui-kicker-size: 0.76rem;
            --ui-kicker-tracking: 0.11em;
            --mask-r: 0;
            --mask-g: 0;
            --mask-b: 0;
            --ui-title-desc-gap: clamp(0.5rem, 1.8vw, 1rem);
            --ui-section-flow-gap: clamp(1.25rem, 3vw, 2.5rem);

            --theme-color: #c04050;
            --theme-bg-alpha: rgba(255, 143, 160, 0.34);
            --theme-hover-alpha: rgba(255, 143, 160, 0.16);
            --theme-ambient: rgba(255, 143, 160, 0.24);
            --theme-glow-outer: rgba(192, 64, 80, 0.24);

            --mega-icon-bg-hover: var(--theme-hover-alpha);
            --mega-icon-text-hover: var(--theme-color);
            --selection-bg: var(--theme-bg-alpha);
            --selection-text: #ffffff;
            --scrollbar-thumb: var(--theme-color);

            transition: --theme-color 2s ease-in-out,
                        --theme-bg-alpha 2s ease-in-out,
                        --theme-hover-alpha 2s ease-in-out,
                        --theme-ambient 2s ease-in-out,
                        --theme-glow-outer 2s ease-in-out;
        }

        .dark-mode {
            --bg-primary: #111111;
            --bg-secondary: #171717;
            --bg-soft: #1c1c1c;
            --surface-card: #171717;
            --theme-color: #EA4606;
            --theme-bg-alpha: rgba(234, 70, 6, 0.35);
            --theme-hover-alpha: rgba(252, 156, 88, 0.15);
            --theme-ambient: rgba(234, 70, 6, 0.24);
            --theme-glow-outer: rgba(252, 156, 88, 0.2);
            --mask-r: 17;
            --mask-g: 17;
            --mask-b: 17;
        }

        ::selection {
            background-color: var(--selection-bg);
            color: var(--selection-text);
        }
        ::-moz-selection {
            background-color: var(--selection-bg);
            color: var(--selection-text);
        }

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #111111;
        }
        ::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb);
            border-radius: 99px;
            border: 2px solid #111111;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: var(--mega-icon-text-hover);
        }

        /* ========================================== */
        /* MEGA MENU GLASSMORPHISM & ANIMATION        */
        /* ========================================== */

        .mega-menu-wrapper {
            visibility: hidden;
            opacity: 0;
            transform: translateY(20px) translateX(-50%) scale(0.98);
            filter: blur(10px);
            content-visibility: auto;
            contain-intrinsic-size: 560px 1100px;
            transition: visibility 0.5s var(--ease-premium), opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium), filter 0.5s var(--ease-premium);
            pointer-events: none;
        }

        .nav-item.group:hover > .mega-menu-wrapper {
            visibility: visible;
            opacity: 1;
            transform: translateY(0) translateX(-50%) scale(1);
            filter: blur(0);
            pointer-events: auto;
        }

        .mega-panel-glass {
            background-color: #111111;
            box-shadow:
                0 34px 90px -28px rgba(0,0,0,0.92),
                0 18px 40px -26px var(--theme-glow-outer),
                0 0 72px -46px var(--theme-color);
            position: relative;
            overflow: hidden;
        }

        .mega-panel-glass::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(95% 80% at 18% 0%, rgba(255, 143, 160, 0.22) 0%, transparent 55%),
                radial-gradient(100% 90% at 82% 0%, rgba(192, 64, 80, 0.18) 0%, transparent 58%),
                radial-gradient(120% 100% at 50% 0%, var(--theme-ambient) 0%, transparent 62%);
            pointer-events: none;
            z-index: 0;
            border-radius: inherit;
        }

        .mega-panel-glass > * {
            position: relative;
            z-index: 1;
        }

        .menu-col {
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
        }
        .nav-item.group:hover .menu-col {
            opacity: 1;
            transform: translateY(0);
        }

        .reviews-mega-icon {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.06);
        }
        .reviews-mega-icon svg {
            width: 14px;
            height: 14px;
        }
        .reviews-mega-dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            display: inline-block;
        }
        .reviews-mega-icon--amber,
        .reviews-mega-dot--amber { color: #ff8fa0; background-color: rgba(255, 143, 160, 0.2); }
        .reviews-mega-icon--blue,
        .reviews-mega-dot--blue { color: #c04050; background-color: rgba(192, 64, 80, 0.2); }
        .reviews-mega-icon--green,
        .reviews-mega-dot--green { color: #ffa8b0; background-color: rgba(255, 168, 176, 0.18); }

        .dark-mode .reviews-mega-icon--amber,
        .dark-mode .reviews-mega-dot--amber { color: #FC9C58; background-color: rgba(252, 156, 88, 0.22); }
        .dark-mode .reviews-mega-icon--blue,
        .dark-mode .reviews-mega-dot--blue { color: #EA4606; background-color: rgba(234, 70, 6, 0.26); }
        .dark-mode .reviews-mega-icon--green,
        .dark-mode .reviews-mega-dot--green { color: #ffcbb3; background-color: rgba(255, 203, 179, 0.2); }

        .app-reviews-rec {
            color: #ffffff;
        }
        .app-reviews-rec-icon {
            font-size: 13px;
            line-height: 1;
            color: #f3a6c8;
        }
        .app-reviews-rec-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            display: inline-block;
            flex: 0 0 7px;
        }
        .app-reviews-rec--abs { color: #ffffff; }
        .app-reviews-rec--maybe { color: #ffffff; }
        .app-reviews-rec--unlikely { color: #ffffff; }
        .app-reviews-rec-dot--abs { background: #f59e0b; }
        .app-reviews-rec-dot--maybe { background: #3b82f6; }
        .app-reviews-rec-dot--unlikely { background: #ef4444; }

        .dark-mode .app-reviews-rec--abs { color: #ffffff; }
        .dark-mode .app-reviews-rec--maybe { color: #ffffff; }
        .dark-mode .app-reviews-rec--unlikely { color: #ffffff; }
        .dark-mode .app-reviews-rec-icon {
            color: #FC9C58;
        }

        .dark-mode .app-reviews-leave-btn .app-reviews-leave-btn-light {
            opacity: 0 !important;
            pointer-events: none;
        }
        .dark-mode .app-reviews-leave-btn .app-reviews-leave-btn-dark {
            opacity: 1 !important;
            pointer-events: auto;
        }
        .app-reviews-mega-actions {
            min-height: var(--ui-control-height);
        }
        .nav-item.group:hover .menu-col:nth-child(1) { transition-delay: 0.05s; }
        .nav-item.group:hover .menu-col:nth-child(2) { transition-delay: 0.12s; }
        .nav-item.group:hover .menu-col:nth-child(3) { transition-delay: 0.19s; }

.feature-item:hover .icon-box {
    color: var(--mega-icon-text-hover);
    transform: scale(1.1);
}

.mega-panel-glass a[data-cursor="VIEW MORE"] > div:first-child {
    background:
        radial-gradient(circle at 25% 22%, rgba(255, 143, 160, 0.48), transparent 42%),
        radial-gradient(circle at 76% 78%, rgba(192, 64, 80, 0.42), transparent 45%),
        linear-gradient(135deg, rgba(255, 168, 176, 0.34), rgba(20, 8, 12, 0.9)) !important;
}

.mega-panel-glass .group\/featured > div:first-child {
    background: linear-gradient(to top, rgba(255, 143, 160, 0.34), transparent) !important;
}

.dark-mode .mega-panel-glass::before {
    background:
        radial-gradient(95% 80% at 18% 0%, rgba(252, 156, 88, 0.2) 0%, transparent 55%),
        radial-gradient(100% 90% at 82% 0%, rgba(234, 70, 6, 0.18) 0%, transparent 58%),
        radial-gradient(120% 100% at 50% 0%, var(--theme-ambient) 0%, transparent 62%);
}

.dark-mode .mega-panel-glass a[data-cursor="VIEW MORE"] > div:first-child {
    background:
        radial-gradient(circle at 25% 22%, rgba(252, 156, 88, 0.48), transparent 42%),
        radial-gradient(circle at 76% 78%, rgba(234, 70, 6, 0.42), transparent 45%),
        linear-gradient(135deg, rgba(252, 156, 88, 0.34), rgba(20, 8, 4, 0.9)) !important;
}

.dark-mode .mega-panel-glass .group\/featured > div:first-child {
    background: linear-gradient(to top, rgba(234, 70, 6, 0.34), transparent) !important;
}

        /* ========================================== */
        /* BUTON GET STARTED - THEME VARIABLES        */
        /* ========================================== */

        .custom-btn.light-theme {
            --modern-btn-bg:
                radial-gradient(ellipse at 30% 35%, #ff8fa0 0%, transparent 55%),
                radial-gradient(ellipse at 70% 65%, #c04050 0%, transparent 55%),
                radial-gradient(circle at 50% 90%, rgba(80, 30, 40, 0.6), transparent 60%),
                linear-gradient(135deg, #ffa8b0, #8c3040);
            --modern-btn-shadow:
                0 0 0 rgba(255, 175, 190, 0),
                0 8px 16px -4px rgba(40, 20, 30, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.25),
                inset 0 -4px 8px rgba(60, 20, 30, 0.2);
            --modern-btn-hover-shadow:
                -6px -6px 18px rgba(255, 175, 190, 0.45),
                10px 10px 22px rgba(60, 20, 30, 0.4),
                inset 0 3px 6px rgba(255, 255, 255, 0.5),
                inset 0 -4px 8px rgba(60, 20, 30, 0.1);
            --modern-btn-active-shadow:
                0 0 0 rgba(255, 175, 190, 0),
                0 0 0 rgba(60, 20, 30, 0),
                inset 6px 6px 12px rgba(80, 30, 40, 0.6),
                inset -4px -4px 10px rgba(255, 143, 160, 0.3);
            --modern-btn-reflection-left: 50%;
            --modern-btn-reflection-right: 50%;
            --modern-btn-reflection-hover-left: 2%;
            --modern-btn-reflection-hover-right: 2%;
        }

        .custom-btn.dark-theme {
            --modern-btn-bg:
                radial-gradient(ellipse at 30% 35%, #ffcbb3 0%, transparent 55%),
                radial-gradient(ellipse at 70% 65%, #9e2a00 0%, transparent 55%),
                radial-gradient(circle at 50% 90%, rgba(40, 15, 5, 0.6), transparent 60%),
                linear-gradient(135deg, #FC9C58, #EA4606);
            --modern-btn-shadow:
                -5px -5px 14px rgba(255, 255, 255, 0.03),
                0 8px 16px -4px rgba(0, 0, 0, 0.6),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -4px 8px rgba(0, 0, 0, 0.35);
            --modern-btn-hover-shadow:
                -8px -8px 22px rgba(255, 255, 255, 0.06),
                12px 12px 26px rgba(0, 0, 0, 0.7),
                inset 0 3px 6px rgba(255, 255, 255, 0.45),
                inset 0 -4px 8px rgba(0, 0, 0, 0.2);
            --modern-btn-active-shadow:
                0 0 0 rgba(255, 255, 255, 0),
                0 0 0 rgba(0, 0, 0, 0),
                inset 6px 6px 12px rgba(0, 0, 0, 0.65),
                inset -4px -4px 10px rgba(255, 255, 255, 0.05);
            --modern-btn-reflection-left: 0;
            --modern-btn-reflection-right: 0;
            --modern-btn-reflection-hover-left: 0;
            --modern-btn-reflection-hover-right: 0;
        }

        .custom-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            border: none;
            background: transparent;
            padding: 0;
            border-radius: 999px;
            cursor: pointer;
            box-shadow: none;
            text-decoration: none;
        }

        .btn-depth {
            display: none;
        }

        .btn-surface {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--ui-control-gap);
            min-height: var(--ui-control-height);
            padding: 0 var(--ui-control-pad-x);
            border-radius: 999px;
            overflow: hidden;
            color: #fff;
            background: var(--modern-btn-bg);
            box-shadow: var(--modern-btn-shadow);
            transition:
                transform 0.6s ease-out,
                box-shadow 0.6s ease-out;
            z-index: 2;
        }

        .btn-surface::before {
            content: "";
            position: absolute;
            top: 1px;
            left: var(--modern-btn-reflection-left);
            right: var(--modern-btn-reflection-right);
            height: 45%;
            border-radius: 999px 999px 0 0;
            background: radial-gradient(
                ellipse at 50% 0%,
                rgba(255, 255, 255, 0.88) 0%,
                rgba(255, 255, 255, 0.15) 65%,
                transparent 100%
            );
            pointer-events: none;
            opacity: 0;
            transform: translateY(-4px) scaleY(0.5) scaleX(0.9);
            transition: all 0.4s ease-out;
        }

        .btn-surface::after {
            content: none;
        }

        .btn-text {
            position: relative;
            z-index: 3;
            color: #fff;
            font-family: "Manrope", "CustomRegularFont", system-ui, sans-serif;
            font-size: var(--ui-control-font-size);
            font-weight: var(--ui-control-font-weight);
            text-transform: none;
            letter-spacing: var(--ui-control-letter-spacing);
            text-shadow: none;
            transition: none;
            white-space: nowrap;
            line-height: 1;
        }

        .btn-wrapper:hover .btn-surface {
            transform: translateY(-4px) scale(1.02);
            box-shadow: var(--modern-btn-hover-shadow);
            transition:
                transform 0.85s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
        }

        .btn-wrapper:hover .btn-surface::before {
            left: var(--modern-btn-reflection-hover-left);
            right: var(--modern-btn-reflection-hover-right);
            opacity: 0.95;
            transform: translateY(0) scaleY(1) scaleX(1);
            transition:
                opacity 1.2s ease-in 0.15s,
                left 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
                right 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
                transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.15s;
        }

        .btn-wrapper:active .btn-surface {
            transform: translateY(2px) scale(0.96);
            box-shadow: var(--modern-btn-active-shadow);
            transition: all 0.15s ease-out;
        }

        .btn-wrapper:active .btn-surface::before {
            opacity: 0;
            transform: translateY(-8px) scaleY(0.6);
            transition: all 0.15s ease-out;
        }

        /* Hide scrollbar for mobile menu content */
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Bento Mobile Card Premium UI - PURE GLASSMORPHISM */
        .bento-card {
            background: rgba(255, 255, 255, 0.04);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 40px -10px rgba(0,0,0,0.8);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border-radius: 2rem;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
        }
        .bento-card:active {
            transform: scale(0.96);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 5px 15px rgba(0,0,0,0.6);
        }


.app-bg-night {
    background-image: url("../img/hero/night-banner-optimized.webp");
}

.app-bg-day {
    background-image: none;
}

@media (max-width: 1023px) {
    .app-bg-night {
        background-image: url("../img/hero/night-banner-mobile.jpg");
    }

    .app-bg-day {
        background-image: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.custom-btn-compact {
    width: 100%;
}

.custom-btn-compact .btn-depth {
    transform: translateY(4px);
}

.custom-btn-compact .btn-surface {
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
}

.custom-btn-compact .btn-text {
    font-size: var(--ui-control-font-size);
    letter-spacing: var(--ui-control-letter-spacing);
}

.app-header-cta .btn-surface {
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
    gap: var(--ui-control-gap);
}

.app-header-cta .btn-text {
    font-size: var(--ui-control-font-size) !important;
}

/* Global button typography audit lock (index.html) */
:where(
    button,
    [role="button"],
    a.btn-wrapper,
    a.ui-btn-secondary,
    .app-about-secondary-link,
    .app-projects-filter-btn,
    .app-projects-link,
    .app-projects-primary,
    .app-projects-case-btn,
    .app-projects-archive-btn,
    .app-projects-round-btn,
    .app-projects-timer,
    .app-services-actions a,
    .app-services-contact-btn
) {
    font-size: var(--btn-font-size-global) !important;
    font-weight: var(--btn-font-weight-global) !important;
}

:where(
    .btn-text,
    .ui-btn-secondary span
) {
    font-size: inherit !important;
    font-weight: inherit !important;
}

:where(
    .app-projects-filter-btn .app-projects-icon,
    .app-projects-link .app-projects-icon,
    .app-projects-primary .app-projects-icon,
    .app-projects-case-btn .app-projects-icon,
    .app-projects-archive-btn .app-projects-icon,
    .app-projects-round-btn .app-projects-icon,
    .app-services-actions .app-services-icon,
    .app-services-contact-btn .app-services-icon,
    .app-about-secondary-link svg,
    .ui-btn-secondary svg
) {
    width: var(--ui-control-icon-size);
    height: var(--ui-control-icon-size);
    flex: 0 0 auto;
}


.ui-btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-control-gap);
    appearance: none;
    overflow: hidden;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
    border-radius: 999px;
    border: 1px solid rgba(15, 15, 16, 0.16);
    outline: none;
    background: rgba(255, 255, 255, 0.72);
    color: #111111;
    font-family: "Manrope", "CustomRegularFont", system-ui, sans-serif;
    font-size: var(--ui-control-font-size) !important;
    font-weight: var(--ui-control-font-weight);
    text-transform: none;
    letter-spacing: var(--ui-control-letter-spacing);
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 10px 22px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease,
        background 240ms ease;
}

.ui-btn-secondary span {
    position: relative;
    z-index: 2;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

.ui-btn-secondary svg {
    position: relative;
    z-index: 2;
}

.ui-btn-secondary::before {
    content: none;
}

.ui-btn-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(15, 15, 16, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 14px 28px rgba(0, 0, 0, 0.14);
}

.ui-btn-secondary:active {
    transform: translateY(0) scale(0.98);
    border-color: rgba(15, 15, 16, 0.2);
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.15),
        0 6px 14px rgba(0, 0, 0, 0.1);
}

.dark-mode .ui-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

.dark-mode .ui-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 16px 30px rgba(0, 0, 0, 0.4);
}

.dark-mode .ui-btn-secondary:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.38),
        0 8px 16px rgba(0, 0, 0, 0.26);
}

/* Global secondary model normalization for requested CTAs */
.app-about-secondary-link.ui-btn-secondary,
.app-projects-primary.ui-btn-secondary,
.app-projects-case-btn.ui-btn-secondary,
.app-projects-archive-btn.ui-btn-secondary,
.app-services-contact-btn.ui-btn-secondary,
.app-services-actions a.ui-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-control-gap);
    min-height: var(--ui-control-height);
    border-radius: 999px;
    padding: 0 var(--ui-control-pad-x);
    text-decoration: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app-services-actions a.ui-btn-secondary {
    font-size: var(--ui-control-font-size) !important;
}

.app-services-contact-btn.ui-btn-secondary {
    font-size: var(--ui-control-font-size) !important;
    font-weight: var(--ui-control-font-weight) !important;
    text-transform: none !important;
    letter-spacing: var(--ui-control-letter-spacing) !important;
}

.app-services-floating-card .app-services-contact-btn.ui-btn-secondary {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 22px rgba(0, 0, 0, 0.2);
}

.app-services-floating-card .app-services-contact-btn.ui-btn-secondary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

:root:not(.dark-mode) .app-services-contact-btn.ui-btn-secondary,
:root:not(.dark-mode) .app-services-contact-btn.ui-btn-secondary.revealed {
    background: #ffffff;
    border-color: rgba(15, 15, 16, 0.16);
    color: #111111;
}

.app-services-actions .btn-wrapper {
    width: 100%;
    height: 100%;
}

.app-about-actions .btn-wrapper,
.app-services-actions .btn-wrapper,
.app-about-actions .btn-light-wrapper,
.app-about-actions .btn-dark-wrapper,
.app-services-actions .btn-light-wrapper,
.app-services-actions .btn-dark-wrapper,
.app-about-actions .custom-btn,
.app-services-actions .custom-btn {
    background: transparent !important;
}

.dark-mode .app-about-actions .btn-light-wrapper,
.dark-mode .app-services-actions .btn-light-wrapper {
    opacity: 0 !important;
    visibility: hidden;
}

.dark-mode .app-about-actions .btn-dark-wrapper,
.dark-mode .app-services-actions .btn-dark-wrapper {
    opacity: 1 !important;
    visibility: visible;
}

.dark-mode .app-services-contact-btn.ui-btn-secondary,
.dark-mode .app-projects-archive-btn.ui-btn-secondary,
.dark-mode .app-projects-primary.ui-btn-secondary,
.dark-mode .app-projects-case-btn.ui-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 26px rgba(0, 0, 0, 0.34);
    color: #fff;
}

.dark-mode .app-services-floating-card .app-services-contact-btn.ui-btn-secondary {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 22px rgba(0, 0, 0, 0.2);
}

.dark-mode .app-services-floating-card .app-services-contact-btn.ui-btn-secondary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

.section-service-ticker {
    position: relative;
    z-index: 15;
    background: #fff;
}

.dark-mode .section-service-ticker {
    background: #111111;
}

.ui-ticker {
    position: relative;
    background: #000;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 40px 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border: none;
    box-shadow: none;
}

.dark-mode .ui-ticker {
    background: #111111;
}

.ui-ticker__viewport {
    display: flex;
    align-items: center;
    min-height: clamp(3.25rem, 6vw, 4.25rem);
    white-space: nowrap;
    overflow: hidden;
}

.ui-ticker__track {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.75rem);
    will-change: transform;
}

.ui-ticker__item {
    display: inline-flex;
    align-items: center;
    font-size: clamp(2rem, 5.5vw, 3.2rem);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 100;
    font-synthesis: weight;
    color: rgba(255, 255, 255, 0.68);
    transition: opacity 260ms ease, color 260ms ease, transform 260ms ease, text-shadow 260ms ease;
}

.ui-ticker__item.is-center {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.96);
    opacity: 1;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.34);
}

.ui-ticker__dot {
    width: 0.34rem;
    height: 0.34rem;
    margin: 0 clamp(0.75rem, 2vw, 1.45rem);
    border-radius: 999px;
    background: var(--theme-color);
    box-shadow: 0 0 12px var(--theme-color);
    flex: 0 0 auto;
}

.ui-ticker__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(2.5rem, 8vw, 6rem);
    pointer-events: none;
    z-index: 2;
}

.ui-ticker__fade--left {
    left: 0;
    background: linear-gradient(to right, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0) 100%);
}

.ui-ticker__fade--right {
    right: 0;
    background: linear-gradient(to left, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0) 100%);
}

.dark-mode .ui-ticker__fade--left {
    background: linear-gradient(to right, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0) 100%);
}

.dark-mode .ui-ticker__fade--right {
    background: linear-gradient(to left, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0) 100%);
}

.ui-ticker--fallback .ui-ticker__track {
    animation: uiTickerFallback 28s linear infinite;
}

@keyframes uiTickerFallback {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
}

@media (max-width: 640px) {
    .ui-ticker__item {
        letter-spacing: 0.12em;
    }
}

.section-about {
    position: relative;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

.app-about-inner {
    min-height: 100vh;
    padding: var(--section-pad-y) var(--section-pad-x) clamp(4.5rem, 8vw, 6rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.app-about-content {
    width: min(100%, 1120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--heading-content-gap);
}

.app-about-arrow {
    margin-bottom: clamp(1rem, 3vw, 2rem);
    width: 42px;
    height: 42px;
    object-fit: contain;
    opacity: 0.88;
    filter: invert(1);
}

.app-about-greeting {
    margin: 0;
    font-size: clamp(0.88rem, 1.8vw, 1.08rem);
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.app-about-greeting strong {
    color: var(--text-primary);
    font-weight: 800;
}

.app-about-title {
    margin: 0;
    max-width: 1120px;
    font-family: 'CustomRegularFont', system-ui, sans-serif;
    font-size: var(--ui-title-size);
    font-weight: 900;
    line-height: var(--ui-title-line-height);
    letter-spacing: var(--ui-title-letter-spacing);
    text-wrap: balance;
}

.app-about-description {
    margin: var(--heading-content-gap) auto 0;
    max-width: 760px;
    font-size: var(--ui-description-size);
    line-height: var(--ui-description-line-height);
    font-weight: var(--ui-description-weight);
    text-wrap: balance;
}

.app-about-title-accent {
    font-family: 'CustomTitleFont', 'CustomRegularFont', system-ui, sans-serif;
}

.app-about-fill > span {
    display: inline;
    color: transparent;
    background-color: rgba(15, 15, 16, 0.16);
    background-image: linear-gradient(135deg, var(--text-primary) 48%, rgba(15, 15, 16, 0.16) 60%);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0% 200%;
    -webkit-background-clip: text;
    background-clip: text;
}

.app-about-wave {
    display: inline-block;
    color: initial;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    animation: appAboutWave 2.5s 3;
    transform-origin: 70% 70%;
}

.app-about-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0.9rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3.25rem);
}

.app-about-secondary-link:not(.ui-btn-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    box-sizing: border-box;
    min-width: var(--btn-about-min-width);
    height: var(--btn-about-height);
    padding: 0 1.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #0f0f10;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(15, 15, 16, 0.06) inset;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease, color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

.app-about-actions .btn-wrapper,
.app-about-actions .btn-light-wrapper,
.app-about-actions .btn-dark-wrapper,
.app-about-actions .custom-btn {
    box-sizing: border-box;
    height: var(--ui-control-height-about);
}

.app-about-actions .btn-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.app-about-actions .custom-btn {
    min-width: var(--btn-about-min-width);
    width: 100%;
    box-shadow: none;
}

.app-about-actions .custom-btn .btn-surface {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: var(--ui-control-height-about);
    padding: 0 var(--ui-control-pad-x);
}

.app-about-actions .app-about-secondary-link.ui-btn-secondary {
    min-height: var(--ui-control-height-about) !important;
}

.app-about-actions .custom-btn .btn-text {
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    flex-direction: row !important;
    gap: 0.45rem;
}

.app-about-actions .custom-btn .btn-text .app-services-icon {
    order: -1;
    margin: 0;
}

.app-about-secondary-link:not(.ui-btn-secondary):hover {
    transform: translateY(-2px);
    border-color: rgba(15, 15, 16, 0.14);
    color: #0a0a0a;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(15, 15, 16, 0.1) inset;
}

.dark-mode .section-about {
    background: #111111;
    color: #fff;
}

.dark-mode .app-about-arrow,
.dark-mode .app-about-greeting strong {
    color: #fff;
}

.dark-mode .app-about-arrow {
    filter: none;
}

.dark-mode .app-about-greeting {
    color: rgba(255, 255, 255, 0.58);
}

.dark-mode .app-about-fill > span {
    background-color: rgba(255, 255, 255, 0.18);
    background-image: linear-gradient(135deg, #fff 48%, rgba(255, 255, 255, 0.18) 60%);
}

.dark-mode .app-about-secondary-link:not(.ui-btn-secondary) {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    background: #111111;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.dark-mode .app-about-secondary-link:not(.ui-btn-secondary):hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: #171717;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.section-projects {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--bg-primary);
    background-image: url("../img/projects/day_banner.webp");
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--text-primary);
    font-family: 'CustomRegularFont', system-ui, sans-serif;
}

@media (max-width: 1023px) {
    .section-projects {
        background-attachment: scroll;
    }

    .section-projects,
    .section-services {
        content-visibility: auto;
        contain-intrinsic-size: 1000px;
    }

    .app-hero-bottom-mask,
    .drop-shadow-md,
    .shadow-lg,
    .backdrop-blur-xl,
    .backdrop-blur-md,
    .backdrop-blur-3xl {
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

.dark-mode .section-projects {
    background-color: #111111;
    background-image: url("../img/projects/night_banner.webp");
    color: #fff;
}

.js-enabled .section-projects {
    background-image: none;
}

.js-enabled .section-projects.is-visible {
    background-image: url("../img/projects/day_banner.webp");
}

.js-enabled .dark-mode .section-projects.is-visible {
    background-image: url("../img/projects/night_banner.webp");
}

.dark-mode .section-projects::before,
.dark-mode .section-projects::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    height: min(34vh, 22rem);
    pointer-events: none;
}

.dark-mode .section-projects::before {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.82) 28%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0) 100%
    );
}

.dark-mode .section-projects::after {
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 1) 0%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.82) 28%,
        rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0) 100%
    );
}

.app-projects-bg,
.app-projects-bg--night,
.app-projects-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.app-projects-bg {
    display: none;
    inset: 0;
    z-index: -3;
}

.app-projects-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.dark-mode .app-projects-bg {
    inset: 0;
}

.app-projects-bg--night {
    display: none;
    z-index: -2;
    background: none;
    opacity: 0;
    transition: opacity 800ms var(--ease-premium);
}

.dark-mode .app-projects-bg--night {
    opacity: 1;
}

.js-enabled .section-projects.is-visible .app-projects-bg--night {
    background: url("../img/projects/night_banner.webp") center top / cover no-repeat;
}

.app-projects-overlay {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.56), rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.2) 42%, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.52)),
        radial-gradient(circle at 86% 15%, rgba(255, 255, 255, 0.1), transparent 32%);
}

.dark-mode .app-projects-overlay {
    background:
        linear-gradient(180deg, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.68), rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.24) 42%, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.64)),
        radial-gradient(circle at 86% 15%, rgba(255, 122, 0, 0.1), transparent 32%);
}

.app-projects-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--section-pad-y) var(--section-pad-x);
}

.app-projects-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(2rem, 6vw, 5rem);
    margin-bottom: var(--section-flow-gap);
}

.app-projects-title {
    margin: 0;
    max-width: 48rem;
    color: #fff;
    font-size: var(--ui-title-size);
    font-weight: 900;
    line-height: var(--ui-title-line-height);
    letter-spacing: var(--ui-title-letter-spacing);
    text-align: left;
}

.app-projects-lede {
    margin: var(--ui-title-desc-gap) 0 0;
    max-width: 25rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--ui-description-size);
    font-weight: var(--ui-description-weight);
    line-height: var(--ui-description-line-height);
    text-align: right;
}

.app-projects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.app-projects-filter-wrap {
    max-width: 100%;
    overflow: hidden;
}

.app-projects-filter {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    gap: 0.125rem;
    padding: 0.375rem;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(var(--blur-glass-md));
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.app-projects-filter::-webkit-scrollbar {
    display: none;
}

.app-projects-filter-slider {
    position: absolute;
    top: 0.375rem;
    bottom: 0.375rem;
    left: 0;
    z-index: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    transition: width 400ms var(--ease-premium), transform 400ms var(--ease-premium);
}

.app-projects-filter-btn,
.app-projects-link,
.app-projects-primary,
.app-projects-timer,
.app-projects-case-btn,
.app-projects-round-btn,
.app-projects-archive-btn:not(.ui-btn-secondary) {
    -webkit-tap-highlight-color: transparent;
}

.app-projects-filter-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.74);
    font: inherit;
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 240ms ease, transform 240ms ease;
}

.app-projects-filter-btn.is-active {
    color: var(--text-primary);
}

.app-projects-filter-btn:hover {
    color: #fff;
}

.app-projects-filter-btn.is-active:hover {
    color: var(--text-primary);
}

.app-projects-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex: 0 0 auto;
}

.app-projects-link,
.app-projects-primary,
.app-projects-case-btn,
.app-projects-archive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.app-projects-link {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.9rem;
    font-weight: 700;
    transition: color 240ms ease, transform 240ms ease;
}

.app-projects-link:hover {
    color: #fff;
}

.app-projects-primary {
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16);
    transition: transform 240ms ease, box-shadow 240ms ease;
}

.app-projects-primary:hover,
.app-projects-case-btn:hover,
.app-projects-archive-btn:not(.ui-btn-secondary):hover {
    transform: translateY(-1px);
}

.app-projects-primary.ui-btn-secondary,
.app-projects-case-btn.ui-btn-secondary {
    border: 1px solid rgba(15, 15, 16, 0.12);
    background: #fff;
    color: #0f0f10;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(15, 15, 16, 0.05) inset;
}

.app-projects-primary.ui-btn-secondary:hover,
.app-projects-case-btn.ui-btn-secondary:hover {
    border-color: rgba(15, 15, 16, 0.18);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(15, 15, 16, 0.09) inset;
}

.app-projects-panel {
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.045), 0 1px 2px rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(var(--blur-panel));
    -webkit-backdrop-filter: blur(var(--blur-panel));
}

.app-projects-panel.is-filtered-view {
    padding-top: 0.9rem;
}

.dark-mode .app-projects-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(10, 10, 10, 0.62);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.36);
}

.app-projects-panel.is-filtered-view .app-projects-feature {
    display: none;
}

.app-projects-panel.is-filtered-view .app-projects-recent-head {
    margin-bottom: 0.85rem;
}

.app-projects-panel.is-filtered-view .app-projects-slider {
    margin-top: 0;
    padding-top: 0.25rem;
}

.app-projects-feature {
    position: relative;
    min-height: clamp(25rem, 54vw, 37.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    border-radius: 1.5rem;
    background: #111111;
    box-shadow: var(--shadow-editorial);
}

.app-projects-feature > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transform: scale(1.001);
    transition: transform 1500ms var(--ease-premium), opacity 500ms ease;
}

.app-projects-feature:hover > img {
    transform: scale(1.03);
}

.app-projects-feature-shade,
.app-projects-card-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.app-projects-feature-shade {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.1));
}

.app-projects-feature-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
}

.app-projects-timer {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(16rem, 100%);
    min-height: var(--ui-control-height);
    padding: 0 1rem 0 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: background 240ms ease, transform 240ms ease;
}

.app-projects-timer:hover {
    background: rgba(255, 255, 255, 0.2);
}

.app-projects-timer-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
}

.app-projects-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.app-projects-progress-track {
    color: rgba(255, 255, 255, 0.2);
}

.app-projects-progress-value {
    color: #fff;
}

.app-projects-timer-media img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    object-fit: cover;
}

.app-projects-timer-copy {
    min-width: 0;
}

.app-projects-timer-label,
.app-projects-timer-title {
    display: block;
}

.app-projects-timer-label {
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--ui-kicker-size);
    font-weight: 750;
    letter-spacing: var(--ui-kicker-tracking);
}

.app-projects-timer-title {
    max-width: 11rem;
    overflow: hidden;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-projects-feature-info {
    max-width: 48rem;
}

.app-projects-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-projects-feature-title {
    margin: 0 0 2rem;
    color: #fff;
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
}

.app-projects-case-btn {
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
    transition: transform 240ms ease, box-shadow 240ms ease;
}

.app-projects-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.app-projects-recent-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 850;
    letter-spacing: -0.01em;
}

.dark-mode .app-projects-recent-head h3 {
    color: #fff;
}

.app-projects-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.38);
    font-size: 0.75rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    margin-top: 3px;
}

.dark-mode .app-projects-count {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.1);
}

.app-projects-slider-controls {
    display: flex;
    gap: 0.5rem;
}

.app-projects-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-control-height);
    height: var(--ui-control-height);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition: background 240ms ease, transform 240ms ease;
}

.app-projects-round-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}

.app-projects-round-btn:disabled,
.app-projects-round-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.dark-mode .app-projects-round-btn {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.app-projects-slider {
    display: flex;
    gap: var(--grid-gap-premium);
    margin: -1rem -1.25rem 0;
    padding: 1rem 1.25rem clamp(2rem, 4vw, 3rem);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.app-projects-card {
    position: relative;
    min-width: min(85vw, 24rem);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 0;
    border-radius: 1.5rem;
    background: #111111;
    cursor: none;
    scroll-snap-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
    transition: transform 500ms var(--ease-premium), box-shadow 500ms var(--ease-premium), opacity 300ms ease;
}

.app-projects-card.is-filtered-out {
    display: none;
}

.section-services.is-visible .app-services-card {
    opacity: 1;
    transform: none;
}

.app-projects-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.app-projects-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 500ms var(--ease-premium), filter 500ms ease;
}

.app-projects-card:hover img {
    transform: scale(1.025);
    filter: none;
}

.app-projects-card-shade {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.18) 55%, transparent);
}

.dark-mode .app-projects-feature-shade {
    background: linear-gradient(to top, rgba(17, 17, 17, 0.9), rgba(17, 17, 17, 0.28) 58%, rgba(17, 17, 17, 0.1));
}

.dark-mode .app-projects-card-shade {
    background: linear-gradient(to top, rgba(17, 17, 17, 0.82), rgba(17, 17, 17, 0.18) 55%, transparent);
}

.app-projects-card-eye {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

.app-projects-card-eye span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(0.75rem) scale(0.92);
    transition: transform 500ms var(--ease-premium), background 300ms ease;
}

.app-projects-card:hover .app-projects-card-eye {
    opacity: 1;
}

.app-projects-card:hover .app-projects-card-eye span {
    transform: translateY(0) scale(1);
}

.app-projects-card-tag,
.app-projects-card-copy {
    position: absolute;
    z-index: 2;
}

.app-projects-card-tag {
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: var(--ui-kicker-size);
    font-weight: 750;
    letter-spacing: var(--ui-kicker-tracking);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 500ms ease, transform 500ms var(--ease-premium);
}

.app-projects-card:hover .app-projects-card-tag {
    opacity: 0;
    transform: translateY(-0.5rem);
}

.app-projects-card-copy {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    transition: transform 500ms var(--ease-premium);
}

.app-projects-card:hover .app-projects-card-copy {
    transform: translateY(-0.5rem);
}

.app-projects-card-copy h4 {
    margin: 0 0 0.3rem;
    color: #fff;
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.app-projects-card-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
}

.app-projects-archive {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 1.75rem;
}

.app-projects-archive-btn {
    position: relative;
    min-height: var(--ui-control-height);
    max-width: 100%;
    padding: 0 var(--ui-control-pad-x);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: var(--text-primary);
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
    transition: background 300ms ease, transform 240ms ease, box-shadow 240ms ease;
}

.app-projects-archive-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.13);
}

.dark-mode .app-projects-archive-btn:not(.ui-btn-secondary) {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.app-projects-icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-projects-filter-btn:focus-visible,
.app-projects-link:focus-visible,
.app-projects-primary:focus-visible,
.app-projects-timer:focus-visible,
.app-projects-case-btn:focus-visible,
.app-projects-round-btn:focus-visible,
.app-projects-slider:focus-visible,
.app-projects-archive-btn:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 4px;
}

@media (min-width: 640px) {
    .app-projects-card {
        min-width: min(45vw, 25rem);
        aspect-ratio: 1;
    }
}

@media (min-width: 1024px) {
    .app-projects-card {
        min-width: calc(33.3333% - 0.84rem);
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 1023px) {
    .app-projects-hero,
    .app-projects-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-projects-hero {
        margin-bottom: var(--section-flow-gap);
    }

    .app-projects-lede {
        text-align: left;
    }

    .app-projects-actions {
        display: none;
    }

    .app-projects-filter {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .app-projects-inner {
        padding: var(--section-pad-y-mobile) 1.25rem;
    }

    .app-projects-hero {
        margin-bottom: clamp(2rem, 8vw, 3rem);
    }

    .app-projects-panel {
        padding: 1rem;
        border-radius: 1.65rem;
    }

    .app-projects-feature {
        min-height: 31rem;
        border-radius: 1.35rem;
    }

    .app-projects-feature > img {
        object-fit: contain;
        object-position: center center;
        background: #0f0f10;
        transform: translate3d(0, 0, 0) scale(1.02);
        will-change: transform;
    }

    .app-projects-feature-content {
        padding: 1rem;
    }

    .app-projects-timer {
        max-width: 12.8rem;
    }

    .app-projects-kicker {
        max-width: 100%;
        font-size: 0.72rem;
    }

    .app-projects-slider {
        margin-inline: -1rem;
        padding-inline: 1rem;
    }

    .app-projects-archive-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-projects-feature > img,
    .app-projects-card,
    .app-projects-card img,
    .app-projects-filter-slider {
        transition-duration: 0s;
    }
}

.section-services {
    position: relative;
    z-index: 10;
    isolation: isolate;
    min-height: 100vh;
    padding: 0 0 clamp(4rem, 8vw, 7rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: #FAF9F6;
    color: var(--text-primary);
    font-family: 'CustomRegularFont', system-ui, sans-serif;
}

.dark-mode .section-services {
    background: #111111;
    color: #fff;
}

.app-services-bg {
    display: none;
}

.app-services-bg--day {
    background-image: url("../img/services/web.webp");
}

.app-services-bg--night {
    background-image: url("../img/services/app.webp");
    filter: brightness(1.22) contrast(1.08) saturate(1.04);
    opacity: 0;
}

.dark-mode .app-services-bg--day {
    opacity: 0;
}

.dark-mode .app-services-bg--night {
    opacity: 1;
}

.app-services-ambient {
    position: absolute;
    width: min(46vw, 38rem);
    aspect-ratio: 1;
    border-radius: 999px;
    filter: blur(var(--blur-atmosphere));
    pointer-events: none;
    z-index: -2;
}

.app-services-ambient--one {
    display: none;
}

.app-services-ambient--two {
    display: none;
}

.dark-mode .app-services-ambient--two {
    display: none;
}

.app-services-watermark {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    z-index: 1;
    display: none;
    min-height: clamp(9rem, 24vw, 24rem);
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
    user-select: none;
}

.app-services-watermark h2 {
    margin: 0;
    color: #E2DFD5;
    font-size: clamp(10.25rem, 23.5vw, 23.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    mix-blend-mode: normal;
}

.dark-mode .app-services-watermark h2 {
    color: #fff;
    opacity: 0.075 !important;
}

.app-services-mobile-header {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1rem 2rem;
}

.app-services-mobile-header h2 {
    margin: 0 0 var(--ui-title-desc-gap);
    font-size: var(--ui-title-size);
    font-weight: 900;
    line-height: var(--ui-title-line-height);
    letter-spacing: var(--ui-title-letter-spacing);
}

.app-services-mobile-header p {
    margin: 0;
    max-width: 24rem;
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
    font-size: var(--ui-description-size);
    line-height: var(--ui-description-line-height);
    font-weight: var(--ui-description-weight);
}

.dark-mode .app-services-mobile-header p {
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
}

.app-services-slider-wrap {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1600px;
    margin: clamp(2.5rem, 5vw, 4.25rem) auto 0;
    padding: 0 1rem;
}

.servicesSwiper {
    overflow: visible !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: -40px !important;
    margin-bottom: -40px !important;
}

.app-services-slide {
    height: auto;
}

.app-services-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 560px;
    overflow: hidden;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: var(--radius-card-lg);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    cursor: pointer;
    transition: box-shadow 500ms ease, border-color 500ms ease, background 500ms ease;
}

.dark-mode .app-services-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.app-services-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.app-services-card-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 30;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translate(-10px, 10px) scale(0.8);
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
}

.app-services-card:has(.app-services-actions a:hover) .app-services-card-arrow {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.app-services-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.app-services-image-box {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 38%;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--radius-card-md);
    background: var(--bg-secondary);
    transition: bottom 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-services-card:hover .app-services-image-box {
    bottom: 0.75rem;
}

.app-services-parallax-wrap {
    position: absolute;
    inset-inline: 0;
    top: -15%;
    height: 130%;
    will-change: transform;
}

.app-services-parallax-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-services-card:hover .app-services-parallax-wrap img {
    transform: scale(1.03);
}

.app-services-gradient-mask {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(to top, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.82), rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.34), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dark-mode .app-services-gradient-mask {
    background: linear-gradient(to top, rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.82), rgba(var(--mask-r), var(--mask-g), var(--mask-b), 0.34), transparent);
}

.app-services-card:hover .app-services-gradient-mask {
    opacity: 1;
}

.app-services-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    text-align: left;
    pointer-events: none;
}

.app-services-card-content h3 {
    margin: 0 0 0.38rem;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -0.01em;
    transition: color 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-services-card-content p {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.5;
    transition: color 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dark-mode .app-services-card-content h3 {
    color: rgba(255, 255, 255, 0.92);
}

.dark-mode .app-services-card-content p {
    color: rgba(255, 255, 255, 0.68);
}

.app-services-card:hover .app-services-card-content h3 {
    color: #fff;
}

.app-services-card:hover .app-services-card-content p {
    color: rgba(255, 255, 255, 0.8);
}

.app-services-control-row {
    position: relative;
    height: 58px;
    overflow: hidden;
    border-radius: 0.75rem;
    pointer-events: auto;
    transition: height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-services-tags {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    overflow-x: auto;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
}

.app-services-tags span {
    flex: 0 0 auto;
    padding: 0.42rem 0.72rem;
    border-radius: 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.dark-mode .app-services-tags span {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
}

.app-services-actions {
    position: absolute;
    inset: 1px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.08rem;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
}

.app-services-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ui-control-height);
    border-radius: 0.75rem;
    text-decoration: none;
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    white-space: nowrap;
    transition: background 240ms ease, transform 240ms ease;
}

.app-services-actions .btn-wrapper,
.app-services-actions a.ui-btn-secondary {
    min-height: var(--ui-control-height);
    height: var(--ui-control-height);
    width: 100%;
}

.app-services-actions .btn-wrapper {
    justify-self: start;
    transform: none;
}

.app-services-actions a.ui-btn-secondary {
    justify-self: end;
}

.app-services-actions .custom-btn {
    box-shadow: none;
    width: 100%;
}

.app-services-actions .btn-wrapper .btn-light-wrapper,
.app-services-actions .btn-wrapper .btn-dark-wrapper,
.app-services-actions .btn-wrapper .btn-depth,
.app-services-actions .btn-wrapper .btn-surface {
    width: 100%;
}

.app-services-actions .btn-wrapper:hover .custom-btn {
    box-shadow: none;
}

.app-services-actions .custom-btn-compact .btn-surface {
    justify-content: center;
    padding: 0 1.6rem;
}

.app-services-actions .custom-btn-compact .btn-text {
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    letter-spacing: var(--ui-control-letter-spacing);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.app-services-actions .custom-btn-compact .btn-text .app-services-icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}

.app-services-actions a.ui-btn-secondary {
    font-size: var(--ui-control-font-size);
    min-height: var(--ui-control-height);
    justify-content: center;
    padding: 0 1.08rem;
}

.app-services-actions a:first-child:not(.ui-btn-secondary):not(.btn-wrapper) {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.app-services-actions a:last-child:not(.ui-btn-secondary) {
    gap: 0.4rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.app-services-actions a:hover {
    transform: translateY(-1px);
}

.app-services-card:hover .app-services-tags {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.app-services-card:hover .app-services-actions {
    opacity: 1;
    transform: translateY(0);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.app-services-floating-cta {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(3rem, 5vw, 5rem);
    padding: 0 1rem;
}

.app-services-floating-card {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    max-width: 48rem;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    background: #111111;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), background 500ms ease, border-color 500ms ease;
}

.app-services-floating-card:hover {
    transform: translateY(-4px);
}

.dark-mode .app-services-floating-card {
    border-color: rgba(0, 0, 0, 0.14);
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
}

.app-services-client-proof {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-services-client-proof > div:last-child,
.app-services-contact-btn > span {
    white-space: nowrap;
}

.app-services-avatars {
    display: flex;
    align-items: center;
    margin-left: 0.55rem;
}

.app-services-avatars img,
.app-services-avatars span {
    width: 3rem;
    height: 3rem;
    margin-left: -0.75rem;
    border: 3px solid #000;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.app-services-avatars img {
    object-fit: cover;
}

.app-services-avatars span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    background: #fff;
    color: #000;
    font-size: 0.75rem;
    font-weight: 900;
}

.dark-mode .app-services-avatars span {
    background: #111111;
    color: #fff;
}

.dark-mode .app-services-avatars img,
.dark-mode .app-services-avatars span {
    border-color: #fff;
}

.app-services-client-proof strong,
.app-services-client-proof > div:last-child span {
    display: block;
}

.app-services-client-proof strong {
    color: #fff;
    font-size: clamp(0.94rem, 1.8vw, 1.06rem);
    font-weight: 900;
    line-height: 1.15;
}

.app-services-client-proof > div:last-child span {
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.86rem;
    font-weight: 600;
}

.dark-mode .app-services-client-proof strong {
    color: #111;
}

.dark-mode .app-services-client-proof > div:last-child span {
    color: rgba(17, 17, 17, 0.62);
}

.app-services-contact-btn:not(.ui-btn-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-control-gap);
    text-decoration: none;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-size: var(--ui-control-font-size);
    font-weight: var(--ui-control-font-weight);
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    transition: transform 240ms ease, background 240ms ease;
}

.app-services-contact-btn:not(.ui-btn-secondary):hover {
    transform: translateY(-1px);
    background: #ededed;
}

.app-services-contact-btn:not(.ui-btn-secondary) .app-services-icon {
    transition: transform 300ms ease;
}

.app-services-contact-btn:not(.ui-btn-secondary):hover .app-services-icon {
    transform: translateX(4px);
}

.dark-mode .app-services-contact-btn:not(.ui-btn-secondary) {
    background: #111111;
    color: #fff;
}

@media (min-width: 1024px) {
    .app-services-watermark {
        display: flex;
    }

    .app-services-mobile-header {
        display: none;
    }

    .app-services-slider-wrap {
        margin-top: clamp(14rem, 18vw, 17rem);
        padding-inline: 65px;
    }

    .servicesSwiper {
        padding-bottom: 140px !important;
        margin-bottom: -140px !important;
    }
}

@media (max-width: 1023px) {
    .app-services-image-box {
        bottom: 0.75rem;
    }

    .app-services-gradient-mask {
        opacity: 1;
    }

    .app-services-card-content h3 {
        color: #fff;
    }

    .app-services-card-content p {
        color: rgba(255, 255, 255, 0.8);
    }

    .app-services-tags {
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
    }

    .app-services-actions {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 640px) {
    .section-services {
        padding-top: 2.25rem;
    }

    .app-services-mobile-header {
        padding-top: 1.5rem;
        padding-bottom: 0.75rem;
    }

    .app-services-slider-wrap {
        margin-top: 2rem;
    }

    .app-services-card {
        height: 520px;
        border-radius: 1.65rem;
    }

    .app-services-card-content {
        padding: 1.5rem;
    }

    .app-services-actions {
        grid-template-columns: 1fr;
    }

    .app-services-actions .btn-wrapper {
        display: none;
    }

    .app-services-actions a.ui-btn-secondary {
        display: inline-flex;
    }

    .app-services-floating-card {
        width: min(100%, 24rem);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        border-radius: 2rem;
        gap: 1.25rem;
    }

    .app-services-client-proof {
        justify-content: center;
    }

    .app-services-contact-btn {
        width: 100%;
    }
}

@keyframes appAboutWave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-about-fill > span {
        background-size: 200% 200%;
    }

    .app-about-wave {
        animation: none;
    }
}

@media (max-width: 1023px) {
    .anim-bg,
    .anim-reveal-up,
    .anim-reveal-down,
    .anim-reveal-left,
    .anim-reveal-right {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

@media (max-width: 640px) {
    :root {
        --ui-title-size: clamp(2.3rem, 9vw, 3.5rem);
        --ui-description-size: clamp(0.96rem, 3.8vw, 1.05rem);
        --ui-description-line-height: 1.55;
        --ui-section-flow-gap: 1.25rem;
    }

    .app-about-inner {
        min-height: 100vh;
        padding-top: var(--section-pad-y-mobile);
        padding-bottom: var(--section-pad-y-mobile);
    }

    .app-about-actions {
        width: 100%;
        flex-direction: column;
    }

    .app-about-actions .btn-wrapper,
    .app-about-actions .btn-light-wrapper,
    .app-about-actions .btn-dark-wrapper,
    .app-about-actions .custom-btn,
    .app-about-secondary-link {
        width: min(100%, 280px);
    }

    .app-about-actions .custom-btn .btn-surface {
        width: 100%;
        justify-content: center;
    }
}

.section-reviews {
    --reviews-bg-body: #f7f7f8;
    --reviews-bg-card: #f7f7f8;
    --reviews-bg-shift-start: #ffffff;
    --reviews-sh-light: #ffffff;
    --reviews-sh-light-inset: #ffffff;
    --reviews-sh-dark: rgba(183, 186, 192, 0.32);
    --reviews-sh-dark-strong: rgba(166, 170, 178, 0.38);
    --reviews-sh-dark-inset: rgba(166, 170, 178, 0.07);
    --reviews-sh-pressed-dark: rgba(166, 170, 178, 0.48);
    --reviews-divider: rgba(166, 170, 178, 0.2);
    --reviews-divider-glow: #ffffff;
    --reviews-quote-color: rgba(138, 58, 107, 0.18);
    --reviews-btn-ghost-hover: rgba(166, 170, 178, 0.2);
    position: relative;
    z-index: 10;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(1rem, 2.5vw, 2.5rem);
    background: var(--reviews-bg-body);
    color: var(--text-primary);
    font-family: 'CustomRegularFont', system-ui, sans-serif;
    animation: appReviewsBgShift 1.5s ease-out forwards;
    transition: background-color 500ms ease, color 500ms ease;
}

.dark-mode .section-reviews {
    --reviews-bg-body: #111111;
    --reviews-bg-card: #141416;
    --reviews-bg-shift-start: #050505;
    --reviews-sh-light: rgba(255, 255, 255, 0.08);
    --reviews-sh-light-inset: rgba(255, 255, 255, 0.06);
    --reviews-sh-dark: rgba(0, 0, 0, 0.7);
    --reviews-sh-dark-strong: rgba(0, 0, 0, 0.9);
    --reviews-sh-dark-inset: rgba(0, 0, 0, 0.8);
    --reviews-sh-pressed-dark: rgba(0, 0, 0, 0.95);
    --reviews-divider: rgba(255, 255, 255, 0.05);
    --reviews-divider-glow: rgba(0, 0, 0, 0.5);
    --reviews-quote-color: #27272a;
    --reviews-btn-ghost-hover: rgba(255, 255, 255, 0.05);
    color: #fff;
}

@keyframes appReviewsBgShift {
    0% { background-color: var(--reviews-bg-shift-start); }
    100% { background-color: var(--reviews-bg-body); }
}

@keyframes appReviewsFormCard {
    0% { opacity: 0; transform: translateY(40px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes appReviewsSinkOut {
    0% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate(var(--slide-dir, -20px), 10px) scale(0.92); filter: blur(4px); }
}

@keyframes appReviewsRiseIn {
    0% { opacity: 0; transform: translate(calc(var(--slide-dir, -20px) * -1), -15px) scale(0.92); filter: blur(4px); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
}

.app-reviews-card {
    position: relative;
    width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 4vw, 4rem);
    border-radius: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--reviews-bg-card);
    box-shadow:
        -8px -8px 20px var(--reviews-sh-light),
        8px 8px 20px var(--reviews-sh-dark),
        inset -2px -2px 8px var(--reviews-sh-dark-inset),
        inset 2px 2px 8px var(--reviews-sh-light);
    animation: appReviewsFormCard 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transition: background 500ms ease, box-shadow 500ms ease;
}

.app-reviews-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 5vw, 5rem);
}

.app-reviews-left,
.app-reviews-right,
.app-reviews-left-main,
.app-reviews-title-wrap,
.app-reviews-detail,
.app-reviews-photos {
    display: flex;
    flex-direction: column;
}

.app-reviews-left {
    width: 100%;
}

.app-reviews-left-main {
    flex: 1;
}

.app-reviews-serif {
    font-family: 'CustomTitleFont', 'CustomRegularFont', system-ui, sans-serif;
}

.app-reviews-muted-heading {
    margin: 0 0 0.75rem;
    color: rgba(15, 15, 16, 0.45);
    font-size: clamp(1.75rem, 6.6vw, 2.875rem);
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.03em;
    transition: color 500ms ease;
}

.dark-mode .app-reviews-muted-heading {
    color: #71717a;
}

.app-reviews-title {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.25rem, 12vw, 5.25rem);
    font-weight: 900;
    line-height: var(--ui-title-line-height);
    letter-spacing: -0.04em;
    transition: color 500ms ease;
}

.dark-mode .app-reviews-title {
    color: #fff;
}

.app-reviews-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.5rem);
    margin-top: clamp(3rem, 7vw, 5rem);
}

.app-reviews-stat-card {
    display: flex;
    min-height: 8rem;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1rem, 2vw, 1.25rem);
    border-radius: clamp(1rem, 2.5vw, 1.5rem);
    background: var(--reviews-bg-card);
    box-shadow:
        inset 5px 5px 10px var(--reviews-sh-dark-strong),
        inset -5px -5px 10px var(--reviews-sh-light-inset);
    cursor: default;
    animation: appReviewsFormCard 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transition: box-shadow 850ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1), background 500ms ease;
}

.app-reviews-stat-card:nth-child(1) { animation-delay: 0.3s; }
.app-reviews-stat-card:nth-child(2) { animation-delay: 0.4s; }
.app-reviews-stat-card:nth-child(3) { animation-delay: 0.5s; }
.app-reviews-stat-card:nth-child(4) { animation-delay: 0.6s; }

.app-reviews-stat-card:hover {
    box-shadow:
        -12px -12px 24px var(--reviews-sh-light),
        12px 12px 24px var(--reviews-sh-dark),
        inset -1px -1px 2px var(--reviews-sh-dark-inset),
        inset 1px 1px 2px var(--reviews-sh-light-inset);
    transform: translateY(-5px);
}

.app-reviews-stat-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.app-reviews-stat-head span,
.app-reviews-detail-label {
    color: var(--text-muted);
    font-size: var(--ui-kicker-size);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: var(--ui-kicker-tracking);
    text-transform: uppercase;
    transition: color 500ms ease;
}

.dark-mode .app-reviews-stat-head span,
.dark-mode .app-reviews-detail-label,
.dark-mode .app-reviews-date {
    color: #a1a1aa;
}

.app-reviews-stat-icon {
    width: clamp(2rem, 4vw, 2.5rem);
    height: clamp(2rem, 4vw, 2.5rem);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--reviews-bg-card);
    box-shadow: -3px -3px 6px var(--reviews-sh-light), 3px 3px 6px var(--reviews-sh-dark-strong);
    transition: box-shadow 850ms cubic-bezier(0.2, 0.8, 0.2, 1), color 500ms ease;
}

.dark-mode .app-reviews-stat-icon {
    color: #fff;
}

.app-reviews-stat-icon svg,
.app-reviews-btn svg,
.app-reviews-arrow svg,
.app-reviews-satisfaction svg,
.app-reviews-service-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.app-reviews-stat-card:hover .app-reviews-stat-icon {
    box-shadow: inset 3px 3px 6px var(--reviews-sh-dark-strong), inset -3px -3px 6px var(--reviews-sh-light-inset);
}

.app-reviews-stat-card:hover .app-reviews-stat-icon--amber { color: #f59e0b; }
.app-reviews-stat-card:hover .app-reviews-stat-icon--blue { color: #3b82f6; }
.app-reviews-stat-card:hover .app-reviews-stat-icon--green { color: #10b981; }
.app-reviews-stat-card:hover .app-reviews-stat-icon--violet { color: var(--theme-color); }

.app-reviews-stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
    overflow: visible;
    transform: translateY(-0.38rem);
}

.app-reviews-stat-value strong {
    color: var(--text-primary);
    font-size: clamp(1.75rem, 7vw, 2.625rem);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -0.035em;
    transition: color 500ms ease;
}

.app-reviews-stat-value span {
    color: var(--text-muted);
    font-size: clamp(0.75rem, 2.8vw, 1.25rem);
    font-weight: 800;
    line-height: 1.12;
    transform: translateY(0.18em);
    transition: color 500ms ease;
}

.app-reviews-stat-value .app-reviews-word-wrapper {
    overflow: visible;
    padding: 0.12em 0.08em 0.18em;
    margin: -0.12em -0.08em -0.18em;
}

.dark-mode .app-reviews-stat-value strong,
.dark-mode .app-reviews-author h3,
.dark-mode .app-reviews-rating strong,
.dark-mode .app-reviews-satisfaction span,
.dark-mode .app-reviews-service > span,
.dark-mode .app-reviews-service-icon,
.dark-mode .app-reviews-stat-value strong {
    color: #fff;
}

.app-reviews-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.app-reviews-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-control-gap);
    width: 100%;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-control-pad-x);
    border-radius: 1rem;
    text-decoration: none;
    font-size: var(--ui-control-font-size) !important;
    font-weight: var(--ui-control-font-weight) !important;
    line-height: 1;
    animation: appReviewsFormCard 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s backwards;
    transition: color 500ms ease, box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 300ms ease;
}

.app-reviews-btn--premium {
    color: var(--text-primary);
    background: var(--reviews-bg-card);
    box-shadow:
        -4px -4px 8px var(--reviews-sh-light),
        4px 4px 8px var(--reviews-sh-dark-strong),
        inset -1px -1px 3px rgba(255, 255, 255, 0.2),
        inset 1px 1px 3px var(--reviews-sh-dark-inset);
}

.dark-mode .app-reviews-btn--premium {
    color: #fff;
}

.app-reviews-btn--premium:active {
    box-shadow: inset 3px 3px 8px var(--reviews-sh-pressed-dark), inset -3px -3px 8px var(--reviews-sh-light-inset);
    transform: scale(0.98);
}

.app-reviews-btn--ghost {
    border: 1px solid rgba(15, 15, 16, 0.05);
    color: var(--text-muted);
    background: transparent;
}

.app-reviews-btn--ghost:hover {
    color: var(--text-primary);
    box-shadow: -4px -4px 10px var(--reviews-sh-light), 4px 4px 10px var(--reviews-btn-ghost-hover);
}

.dark-mode .app-reviews-btn--ghost {
    border-color: rgba(255, 255, 255, 0.05);
    color: #a1a1aa;
}

.dark-mode .app-reviews-btn--ghost:hover {
    color: #fff;
}

.app-reviews-right {
    position: relative;
    width: 100%;
}

.app-reviews-review-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    flex: 1;
}

.app-reviews-quote {
    display: none;
    flex: 0 0 auto;
    margin-top: -1.5rem;
}

.app-reviews-quote svg {
    width: clamp(3.75rem, 6vw, 5.3125rem);
    height: auto;
    overflow: visible;
    fill: var(--reviews-quote-color);
    stroke: var(--reviews-quote-color);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
    transition: fill 500ms ease, stroke 500ms ease;
}

.app-reviews-concave {
    width: 100%;
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: clamp(1.5rem, 3vw, 2rem);
    background: var(--reviews-bg-card);
    box-shadow:
        inset 5px 5px 10px var(--reviews-sh-dark-strong),
        inset -5px -5px 10px var(--reviews-sh-light-inset);
    transform-style: preserve-3d;
    animation: appReviewsFormCard 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
    transition: box-shadow 500ms cubic-bezier(0.3, 0, 0.2, 1), transform 500ms cubic-bezier(0.3, 0, 0.2, 1), background 500ms ease;
}

.app-reviews-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-reviews-content.anim-out .app-reviews-stagger {
    animation: appReviewsSinkOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.app-reviews-content.anim-in .app-reviews-stagger {
    opacity: 0;
    animation: appReviewsRiseIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.app-reviews-stagger:nth-child(1) { animation-delay: 0s; }
.app-reviews-stagger:nth-child(2) { animation-delay: 0.05s; }
.app-reviews-stagger:nth-child(3) { animation-delay: 0.1s; }
.app-reviews-stagger:nth-child(4) { animation-delay: 0.15s; }
.app-reviews-stagger:nth-child(5) { animation-delay: 0.2s; }

.app-reviews-concave.is-pressed-next,
.app-reviews-concave.is-pressed-prev {
    box-shadow:
        inset 15px 15px 30px var(--reviews-sh-pressed-dark),
        inset -15px -15px 30px var(--reviews-sh-light-inset) !important;
}

.app-reviews-concave.is-pressed-next {
    transform: perspective(1000px) scale(0.96) rotateY(-2.5deg) rotateX(1deg);
}

.app-reviews-concave.is-pressed-prev {
    transform: perspective(1000px) scale(0.96) rotateY(2.5deg) rotateX(1deg);
}

.app-reviews-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.app-reviews-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-reviews-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.app-reviews-avatar-wrap img {
    width: clamp(3.5rem, 6vw, 4rem);
    height: clamp(3.5rem, 6vw, 4rem);
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(15, 15, 16, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .app-reviews-avatar-wrap img {
    border-color: rgba(255, 255, 255, 0.1);
}

.app-reviews-verified {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    display: flex;
    width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 999px;
    background: var(--reviews-bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 500ms ease;
}

.app-reviews-verified svg {
    width: 100%;
    height: 100%;
}

.app-reviews-author h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.25rem, 3.6vw, 1.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    transition: color 500ms ease;
}

.app-reviews-date {
    color: var(--text-muted);
    font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
    font-weight: 800;
    transition: color 500ms ease;
}

.app-reviews-date--desktop {
    display: none;
}

.app-reviews-date--mobile {
    display: block;
    margin-top: 0.25rem;
}

.app-reviews-text {
    margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
    color: var(--text-secondary);
    font-size: clamp(1rem, 3.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.025em;
    transition: color 500ms ease;
}

.dark-mode .app-reviews-text {
    color: #d4d4d8;
}

.app-reviews-divider {
    width: 100%;
    height: 2px;
    margin: clamp(1.5rem, 3vw, 2rem) 0;
    background: var(--reviews-divider);
    box-shadow: 0 1px 0 var(--reviews-divider-glow);
    transition: background 500ms ease, box-shadow 500ms ease;
}

.app-reviews-details {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
}

.app-reviews-detail {
    gap: 0.5rem;
    width: 100%;
}

.app-reviews-rating {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    min-width: 0;
    overflow: visible;
    transform: translateY(-0.16rem);
}

.app-reviews-rating strong {
    color: var(--text-primary);
    font-size: clamp(2.25rem, 6vw, 2.875rem);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -0.035em;
    transition: color 500ms ease;
}

.app-reviews-rating span {
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 800;
    line-height: 1.35;
    transform: translateY(-0.18em);
    transition: color 500ms ease;
}

.app-reviews-rating .app-reviews-word-wrapper {
    overflow: visible;
    padding: 0.12em 0.08em 0.18em;
    margin: -0.12em -0.08em -0.18em;
}

.dark-mode .app-reviews-rating span,
.dark-mode .app-reviews-stat-value span {
    color: #a1a1aa;
}

.app-reviews-satisfaction {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 500ms ease, border-color 500ms ease;
}

.dark-mode .app-reviews-satisfaction {
    border-color: rgba(255, 255, 255, 0.05);
    background: #0a0a0b;
}

.app-reviews-satisfaction span,
.app-reviews-service > span {
    color: var(--text-primary);
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    font-weight: 900;
    transition: color 500ms ease;
}

.app-reviews-service {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-reviews-service-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--text-primary);
    background: #e5e5ea;
    transition: background 500ms ease, color 500ms ease;
}

.dark-mode .app-reviews-service-icon {
    background: #0a0a0b;
}

.app-reviews-photos {
    gap: 0.75rem;
    width: 100%;
    margin-top: auto;
}

.app-reviews-photo-row {
    display: flex;
    gap: 1rem;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.app-reviews-photo-row::-webkit-scrollbar {
    display: none;
}

.app-reviews-photo-row img {
    width: clamp(5rem, 12vw, 6rem);
    height: clamp(5rem, 12vw, 6rem);
    flex: 0 0 auto;
    border-radius: 1rem;
    object-fit: cover;
    border: 1px solid rgba(15, 15, 16, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 300ms ease, border-color 500ms ease;
}

.app-reviews-photo-row img:hover {
    transform: scale(1.05);
}

.dark-mode .app-reviews-photo-row img {
    border-color: rgba(255, 255, 255, 0.1);
}

.app-reviews-nav {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    margin-top: 2rem;
}

.app-reviews-arrow {
    display: flex;
    width: var(--ui-control-height);
    height: var(--ui-control-height);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--reviews-bg-card);
    box-shadow: -4px -4px 8px var(--reviews-sh-light), 4px 4px 8px var(--reviews-sh-dark-strong);
    cursor: pointer;
    animation: appReviewsFormCard 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s backwards;
    transition: color 500ms ease, box-shadow 200ms ease, transform 200ms ease, background 500ms ease;
}

.dark-mode .app-reviews-arrow {
    color: #fff;
}

.app-reviews-arrow:active {
    box-shadow: inset 3px 3px 6px var(--reviews-sh-pressed-dark), inset -3px -3px 6px var(--reviews-sh-light-inset);
    transform: scale(0.95);
}

.app-reviews-word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.app-reviews-word {
    opacity: 0;
    display: inline-block;
    transform: translateY(110%) rotate(10deg);
    line-height: inherit;
    will-change: transform, opacity;
}

.section-reviews:not(.is-visible) .app-reviews-card,
.section-reviews:not(.is-visible) .app-reviews-concave,
.section-reviews:not(.is-visible) .app-reviews-stat-card,
.section-reviews:not(.is-visible) .app-reviews-btn,
.section-reviews:not(.is-visible) .app-reviews-arrow {
    animation: none;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}

.section-reviews.is-visible .app-reviews-card {
    animation: appReviewsFormCard 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.section-reviews.is-visible .app-reviews-concave {
    animation: appReviewsFormCard 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

.section-reviews.is-visible .app-reviews-stat-card {
    animation: appReviewsFormCard 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.section-reviews.is-visible .app-reviews-stat-card:nth-child(1) { animation-delay: 0.3s; }
.section-reviews.is-visible .app-reviews-stat-card:nth-child(2) { animation-delay: 0.4s; }
.section-reviews.is-visible .app-reviews-stat-card:nth-child(3) { animation-delay: 0.5s; }
.section-reviews.is-visible .app-reviews-stat-card:nth-child(4) { animation-delay: 0.6s; }

.section-reviews.is-visible .app-reviews-btn {
    animation: appReviewsFormCard 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s backwards;
}

.section-reviews.is-visible .app-reviews-arrow {
    animation: appReviewsFormCard 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s backwards;
}

@media (min-width: 640px) {
    .app-reviews-actions {
        width: max-content;
        flex-direction: row;
        gap: 1.25rem;
    }

    .app-reviews-btn {
        width: auto;
    }

    .app-reviews-header {
        align-items: center;
        flex-direction: row;
    }

    .app-reviews-date--desktop {
        display: block;
    }

    .app-reviews-date--mobile {
        display: none;
    }

    .app-reviews-details {
        align-items: flex-end;
        flex-direction: row;
        gap: 1.5rem;
    }

    .app-reviews-detail,
    .app-reviews-satisfaction {
        width: auto;
    }
}

@media (min-width: 768px) {
    .app-reviews-card {
        box-shadow:
            -20px -20px 60px var(--reviews-sh-light),
            20px 20px 60px var(--reviews-sh-dark),
            inset -5px -5px 15px var(--reviews-sh-dark-inset),
            inset 5px 5px 15px var(--reviews-sh-light);
    }

    .app-reviews-concave {
        box-shadow:
            inset 8px 8px 16px var(--reviews-sh-dark-strong),
            inset -8px -8px 16px var(--reviews-sh-light-inset);
    }

    .app-reviews-btn--premium {
        box-shadow:
            -6px -6px 12px var(--reviews-sh-light),
            6px 6px 12px var(--reviews-sh-dark-strong),
            inset -2px -2px 5px rgba(255, 255, 255, 0.2),
            inset 2px 2px 5px var(--reviews-sh-dark-inset);
    }

    .app-reviews-arrow {
        box-shadow: -5px -5px 12px var(--reviews-sh-light), 5px 5px 12px var(--reviews-sh-dark-strong);
    }

    .app-reviews-quote {
        display: block;
    }

    .app-reviews-review-row {
        flex-direction: row;
        gap: clamp(1rem, 3vw, 2rem);
    }
}

@media (min-width: 1024px) {
    .app-reviews-card {
        min-height: min(80vh, 58rem);
    }

    .app-reviews-layout {
        min-height: calc(100dvh - clamp(2rem, 5vw, 5rem) - clamp(3rem, 8vw, 8rem));
        flex-direction: row;
    }

    .app-reviews-left {
        width: 40%;
    }

    .app-reviews-right {
        width: 60%;
        margin-top: 0;
    }

    .app-reviews-stats {
        margin-top: auto;
    }

    .app-reviews-title {
        line-height: var(--ui-title-line-height);
    }

    .app-reviews-nav {
        justify-content: flex-end;
        padding-right: 1rem;
    }
}

@media (max-width: 767px) {
    .section-reviews {
        align-items: flex-start;
        overflow-y: auto;
    }
}

@media (max-width: 640px) {
    .section-reviews {
        padding: 1rem;
    }

    .app-reviews-title br {
        display: none;
    }

    .app-reviews-card {
        min-height: calc(100dvh - 2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-reviews,
    .app-reviews-card,
    .app-reviews-concave,
    .app-reviews-stat-card,
    .app-reviews-btn,
    .app-reviews-arrow,
    .app-reviews-word {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .app-reviews-word {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Final typography lock: all interactive buttons/CTA/utilities in index */
button,
[role="button"],
.btn-wrapper,
.custom-btn,
.btn-surface,
.btn-text,
.ui-btn-secondary,
.ui-btn-secondary span,
.app-about-secondary-link,
.app-projects-filter-btn,
.app-projects-link,
.app-projects-primary,
.app-projects-case-btn,
.app-projects-archive-btn,
.app-projects-timer,
.app-projects-round-btn,
.app-services-actions a,
.app-services-contact-btn,
.app-reviews-btn {
    font-size: var(--btn-font-size-global) !important;
    font-weight: var(--btn-font-weight-global) !important;
    letter-spacing: var(--ui-control-letter-spacing) !important;
    line-height: 1 !important;
}

:where(
    .btn-surface,
    .ui-btn-secondary,
    .app-about-secondary-link,
    .app-projects-filter-btn,
    .app-projects-link,
    .app-projects-primary,
    .app-projects-case-btn,
    .app-projects-archive-btn,
    .app-projects-timer,
    .app-services-actions a,
    .app-services-contact-btn,
    .app-reviews-btn
) {
    min-height: var(--ui-control-height) !important;
    gap: var(--ui-control-gap) !important;
}

:where(
    .app-projects-round-btn,
    .app-reviews-arrow,
    .intro-search-btn
) {
    width: var(--ui-control-height);
    height: var(--ui-control-height);
}

:where(
    .btn-surface,
    .ui-btn-secondary,
    .app-about-secondary-link,
    .app-projects-filter-btn,
    .app-projects-link,
    .app-projects-primary,
    .app-projects-case-btn,
    .app-projects-archive-btn,
    .app-services-actions a,
    .app-services-contact-btn,
    .app-reviews-btn
) {
    padding-inline: var(--ui-control-pad-x) !important;
}

:where(
    .btn-surface svg,
    .ui-btn-secondary svg,
    .app-projects-icon,
    .app-services-icon,
    .app-reviews-btn svg,
    .app-reviews-arrow svg
) {
    width: var(--ui-control-icon-size) !important;
    height: var(--ui-control-icon-size) !important;
}

/* ========================================== */
/* INTRO EXPERIENCE */
/* ========================================== */
.intro-section {
      --bg: #FAF9F6;
      --bg-soft: #FAF9F6;
      --ink: #0a0a0a;
      --muted: #888880;
      --grid-gap: #FAF9F6;
      --glass: rgba(190, 184, 170, 0.45);
      --glass-border: rgba(255, 255, 255, 0.45);
    }

    .intro-section,
.intro-section * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .intro-section {
      min-height: 100vh;
    }

    .intro-section {
      font-family: "Wix Madefor Display", system-ui, sans-serif;
      background: var(--bg);
      background-color: #FAF9F6;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
      margin: 0;
      padding: 20px 60px;
      box-sizing: border-box;
    }

    .intro-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
          ellipse 1200px 800px at 50% 50%,
          rgba(250, 249, 246, 0.6),
          transparent 70%
        ),
        radial-gradient(
          ellipse 400px 300px at 15% 80%,
          rgba(255, 235, 210, 0.2),
          transparent 70%
        ),
        radial-gradient(
          ellipse 400px 300px at 85% 20%,
          rgba(220, 225, 240, 0.2),
          transparent 70%
        );
      pointer-events: none;
      z-index: 0;
    }

    .intro-section > * {
      position: relative;
      z-index: 1;
    }

    /* Noul container cu 20px padding */
    .intro-custom-wrapper {
      width: 100%;
      min-height: calc(100vh - 40px);
      border-radius: 20px;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      z-index: 1; /* Asigură vizibilitatea deasupra pseudo-elementului body::before */
      background-color: #FAF9F6;
    }

    /* Strat dedicat pentru background pentru a-l putea blura separat */
    .intro-bg-layer {
      position: absolute;
      inset: -30px; /* Extindem marginile ca să nu apară un contur alb/transparent de la blur */
      background-image: url("../img/intro/day_banner.webp");
      background-color: #FAF9F6;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
      /* Va porni clar și se va anima spre blur în GSAP */
      filter: blur(0px);
    }

    .intro-page {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px 40px 80px;
      /* Ajustăm înălțimea minimă pentru a compensa padding-ul părintelui */
      min-height: calc(100vh - 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
    }

    /* ============= STAGE (holds sphere + floating cards) ============= */
    .intro-stage {
      position: relative;
      width: 100%;
      max-width: 1300px;
      aspect-ratio: 16/9;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
    }

    /* ============= SPHERE ============= */
    .intro-sphere {
      position: relative;
      width: 540px;
      height: 540px;
      border-radius: 50%;
      overflow: hidden;
      background: #FAF9F6;
      box-shadow: 0 4px 12px rgba(40, 40, 30, 0.05),
        0 20px 50px -10px rgba(40, 40, 30, 0.12),
        0 50px 100px -30px rgba(40, 40, 30, 0.08);
      z-index: 2;
      cursor: pointer;
    }

    .intro-sphere-inner {
      position: absolute;
      inset: -8%; /* extend slightly so edges don't show grid limits */
      display: grid;
      grid-template-columns: 0.9fr 1fr 1fr 0.9fr;
      grid-template-rows: 0.9fr 1fr 1fr 0.9fr;
      gap: 8px;
      padding: 8px;
      background: var(--grid-gap);
      transition: transform 0.5s ease;
    }

    .intro-tile {
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      background: linear-gradient(180deg, #d0c8b8 0%, #a09888 100%);
    }

    .intro-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      color: transparent;
      font-size: 0;
      position: absolute;
      inset: 0;
      z-index: 2;
    }

    .intro-tile svg.intro-tile-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    /* Subtle dimming overlay on sphere edges for 3D effect */
    .intro-sphere::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(
        circle at 50% 50%,
        transparent 55%,
        rgba(40, 30, 20, 0.15) 90%,
        rgba(40, 30, 20, 0.25) 100%
      );
      pointer-events: none;
      z-index: 3;
    }

    /* ============= SEARCH BAR ============= */
    .intro-search-bar {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 620px;
      height: 78px;
      border-radius: 100px;
      background: var(--glass);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid var(--glass-border);
      display: flex;
      align-items: center;
      padding: 6px 8px 6px 30px;
      z-index: 5;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 -1px 2px rgba(0, 0, 0, 0.05) inset, 0 8px 20px -4px rgba(40, 40, 30, 0.12),
        0 20px 40px -16px rgba(40, 40, 30, 0.1);
    }

    .intro-search-icon {
      width: 24px;
      height: 24px;
      color: #ffffff;
      flex-shrink: 0;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
      margin-right: 14px;
    }

    .intro-search-input {
      flex: 1;
      background: transparent;
      border: 0;
      outline: none;
      color: #ffffff;
      font-family: inherit;
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.005em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .intro-search-input::placeholder {
      color: #ffffff;
      opacity: 0.95;
    }

    .intro-search-btn {
      width: var(--ui-control-height);
      height: var(--ui-control-height);
      border-radius: 50%;
      background: #FAF9F6;
      border: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-left: 10px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset,
        0 -1px 2px rgba(0, 0, 0, 0.04) inset, 0 4px 10px rgba(40, 40, 30, 0.15);
      transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .intro-search-btn:hover {
      transform: scale(1.06);
    }
    .intro-search-btn:active {
      transform: scale(0.96);
    }

    .intro-icon-container {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .intro-dot-container {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    .intro-send-container {
      opacity: 0;
      transform: scale(0.5) translate(-20px, 20px);
      color: #ffffff;
    }

    .intro-send-icon {
      width: 24px;
      height: 24px;
    }

    /* States when text is typed */
    .intro-search-btn.intro-has-text {
      background: var(--ink);
      box-shadow: 0 4px 14px rgba(10, 10, 10, 0.3);
    }

    .intro-search-btn.intro-has-text .intro-dot-container {
      opacity: 0;
      transform: scale(0.5) translate(20px, -20px);
    }

    .intro-search-btn.intro-has-text .intro-send-container {
      opacity: 1;
      transform: scale(1) translate(0, 0);
    }

    /* Paper plane flying animation */
    @keyframes introFlyAway {
      0% { transform: translate(0, 0) scale(1); opacity: 1; }
      40% { transform: translate(30px, -30px) scale(0.8); opacity: 0; }
      41% { transform: translate(-30px, 30px) scale(0.5); opacity: 0; }
      100% { transform: translate(0, 0) scale(1); opacity: 1; }
    }

    .intro-search-btn.intro-fly .intro-send-container .intro-send-icon {
      animation: introFlyAway 0.6s ease forwards;
    }

    .intro-dot-pattern {
      display: grid;
      grid-template-columns: repeat(3, 4px);
      grid-template-rows: repeat(2, 4px);
      gap: 5px;
      width: 22px;
      height: 13px;
    }

    .intro-dot-pattern span {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--ink);
    }

    /* ============= FLOATING CARDS ============= */
    .intro-float-card {
      position: absolute;
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      z-index: 4;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 -1px 2px rgba(0, 0, 0, 0.04) inset, 0 4px 10px rgba(40, 40, 30, 0.1),
        0 14px 28px -6px rgba(40, 40, 30, 0.15),
        0 28px 50px -16px rgba(40, 40, 30, 0.1);
      transition: filter 0.2s ease;
    }

    .intro-float-card svg,
    .intro-float-card img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .intro-float-card.intro-fc-1 { top: 8%; left: 12%; width: 110px; height: 130px; transform: rotate(-3deg); }
    .intro-float-card.intro-fc-2 { top: 38%; left: 6%; width: 130px; height: 180px; transform: rotate(2deg); }
    .intro-float-card.intro-fc-3 { bottom: 12%; left: 14%; width: 110px; height: 100px; transform: rotate(-4deg); }
    .intro-float-card.intro-fc-4 { top: 10%; right: 12%; width: 120px; height: 150px; transform: rotate(3deg); }
    .intro-float-card.intro-fc-5 { top: 40%; right: 6%; width: 140px; height: 170px; transform: rotate(-2deg); }
    .intro-float-card.intro-fc-6 { bottom: 10%; right: 14%; width: 130px; height: 110px; transform: rotate(4deg); }

    /* ============= ANIMATION STATE ============= */
    .intro-js-ready .intro-sphere,
    .intro-js-ready .intro-search-bar,
    .intro-js-ready .intro-float-card {
      opacity: 0;
    }

    .intro-section.intro-js-ready .intro-custom-wrapper {
      opacity: 0;
      transform: scale(0.95);
    }

    /* ============= RESPONSIVE ============= */
    @media (max-width: 1100px) {
      .intro-sphere { width: 460px; height: 460px; }
      .intro-search-bar { width: 520px; height: 70px; }
      .intro-search-input { font-size: 20px; }
      .intro-float-card.intro-fc-1, .intro-float-card.intro-fc-4 { width: 80px; height: 100px; }
      .intro-float-card.intro-fc-2, .intro-float-card.intro-fc-5 { width: 100px; height: 140px; }
      .intro-float-card.intro-fc-3, .intro-float-card.intro-fc-6 { width: 80px; height: 80px; }
    }

    @media (max-width: 720px) {
      .intro-section { padding-right: 20px; padding-left: 20px; }
      .intro-stage { aspect-ratio: auto; min-height: 500px; }
      .intro-sphere { width: 320px; height: 320px; }
      .intro-search-bar {
        width: min(90vw, 560px);
        height: 52px;
        padding: 4px 56px 4px 14px;
        border-radius: 999px;
        position: absolute;
      }
      .intro-search-icon {
        width: 18px;
        height: 18px;
        margin-right: 10px;
      }
      .intro-search-input {
        font-size: 15px;
        padding-right: 6px;
      }
      .intro-search-btn {
        width: 38px;
        height: 38px;
        margin-left: 0;
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
      }
      .intro-search-btn:hover {
        transform: translateY(-50%) scale(1.04);
      }
      .intro-search-btn:active {
        transform: translateY(-50%) scale(0.96);
      }
      .intro-float-card { display: none; }
      .intro-float-card.intro-fc-1, .intro-float-card.intro-fc-4 { display: block; }
    }


    .dark-mode .intro-section {
      --bg: #111111;
      --bg-soft: #171717;
      --ink: #ffffff;
      --muted: rgba(255, 255, 255, 0.58);
      --grid-gap: #171717;
      --glass: rgba(18, 18, 18, 0.52);
      --glass-border: rgba(255, 255, 255, 0.14);
      background: #111111;
      background-color: #111111;
      color: #ffffff;
    }

    .dark-mode .intro-section::before {
      background: radial-gradient(
          ellipse 1200px 800px at 50% 50%,
          rgba(0, 0, 0, 0.58),
          transparent 70%
        ),
        radial-gradient(
          ellipse 420px 320px at 15% 80%,
          rgba(255, 122, 0, 0.12),
          transparent 72%
        ),
        radial-gradient(
          ellipse 420px 320px at 85% 20%,
          rgba(234, 70, 6, 0.1),
          transparent 72%
        );
    }

    .dark-mode .intro-custom-wrapper {
      background-color: #111111;
    }

    .dark-mode .intro-page,
    .dark-mode .intro-stage {
      background-color: transparent;
    }

    .dark-mode .intro-bg-layer {
      background-image: url("../img/intro/night_banner.webp");
      background-color: #111111;
      opacity: 0.86;
    }

    .dark-mode .intro-sphere {
      background: #171717;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
        0 24px 58px -14px rgba(0, 0, 0, 0.72),
        0 50px 110px -30px rgba(255, 122, 0, 0.14);
    }

    .dark-mode .intro-sphere::after {
      background: radial-gradient(
        circle at 50% 50%,
        transparent 52%,
        rgba(0, 0, 0, 0.28) 86%,
        rgba(0, 0, 0, 0.58) 100%
      );
    }

    .dark-mode .intro-search-bar {
      background: var(--glass);
      border-color: var(--glass-border);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 -1px 2px rgba(0, 0, 0, 0.32) inset,
        0 12px 32px -14px rgba(0, 0, 0, 0.75);
    }

    .dark-mode .intro-search-btn {
      background: #171717;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 -1px 2px rgba(0, 0, 0, 0.5) inset,
        0 8px 18px rgba(0, 0, 0, 0.44);
    }

    .dark-mode .intro-search-btn.intro-has-text {
      background: #ffffff;
      box-shadow: 0 6px 18px rgba(255, 255, 255, 0.16);
    }

    .dark-mode .intro-search-btn.intro-has-text .intro-send-container {
      color: #111111;
    }

    .dark-mode .intro-dot-pattern span {
      background: #ffffff;
    }

    .dark-mode .intro-tile {
      background: linear-gradient(180deg, #24211c 0%, #11100d 100%);
    }

    .dark-mode .intro-float-card {
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 -1px 2px rgba(0, 0, 0, 0.35) inset,
        0 18px 42px -18px rgba(0, 0, 0, 0.86);
    }

/* ============= STILURI PENTRU SECȚIUNEA 2 ============= */
    .intro-hero-second {
      position: relative;
      min-height: 100vh;
      padding: 15vh 32px 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      z-index: 5;
      background: #FAF9F6;
      background-color: #FAF9F6;
    }

    .intro-small-team {
      font-family: "Wix Madefor Display", sans-serif;
      font-weight: 700;
      font-size: clamp(40px, 6.4vw, 92px);
      letter-spacing: -0.028em;
      line-height: 1.02;
      color: var(--ink);
      text-align: center;
      margin-bottom: 0;
      z-index: 4;
      position: relative;
    }
    .intro-small-team .intro-word {
      display: inline-block;
      overflow: hidden;
      vertical-align: top;
    }

    .intro-small-team .intro-word > .intro-letter {
      display: inline-block;
      /* Pornesc de jos pt animație */
      transform: translateY(105%);
      transform-origin: bottom center;
      will-change: transform, scale;
    }

    /* Big results faded back text */
    .intro-big-results-wrap {
      position: relative;
      width: 100%;
      margin-top: -20px;
      display: flex;
      justify-content: center;
      z-index: 1;
      background-color: #FAF9F6;
    }
    .intro-big-results {
      font-family: "Wix Madefor Display", sans-serif;
      font-style: italic;
      font-weight: 800;
      font-size: clamp(110px, 21vw, 300px);
      letter-spacing: -0.038em;
      line-height: 0.9;
      color: #e2dfd5; /* Gri-crem foarte subtil */
      text-align: center;
      white-space: nowrap;
      user-select: none;
      z-index: 1;
      text-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    }
    .intro-big-results .intro-letter {
      display: inline-block;
      transform-origin: bottom center;
      /* Pornesc invizibile pt animație */
      opacity: 0;
      transform: translateY(80px);
      will-change: transform, scale;
    }

    /* Cards row */
    .intro-cards-row {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 320px;
      z-index: 3;
      pointer-events: none;
      perspective: 1200px; /* Adăugat pentru efect 3D premium fără glitch */
      background-color: transparent;
    }
    .intro-cards-row > * {
      pointer-events: auto;
    }

    /* Card stil curat (fără portocaliu) */
    .intro-port-card {
      position: absolute;
      border-radius: 14px;
      overflow: hidden;
      background: #FAF9F6;
      border: 4px solid #FAF9F6; /* Ramă curată tip polaroid/editorial */
      box-shadow: 0 14px 26px -8px rgba(0, 0, 0, 0.1),
        0 5px 10px -2px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      will-change: transform;
      transform-style: preserve-3d; /* Smooth 3D rendering */
      transition: box-shadow 0.4s cubic-bezier(0.6, 0, 0.2, 1);

      /* Starea de pornire pentru GSAP */
      opacity: 0;
      transform: translateY(-800px) scale(0.7);
    }

    .intro-port-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      border-radius: 8px; /* colțuri fine în interiorul ramei albe */
    }
    .intro-port-card:hover {
      box-shadow: 0 30px 50px -16px rgba(0, 0, 0, 0.15),
        0 14px 26px -8px rgba(0, 0, 0, 0.1);
    }

    /* Card sizing/positioning (adaptate de la codul original) */
    .intro-port-1 { width: 130px; height: 180px; left: 4%;  top: 30px; z-index: 1; }
    .intro-port-2 { width: 160px; height: 220px; left: 12%; top: 50px; z-index: 2; }
    .intro-port-3 { width: 200px; height: 270px; left: 22%; top: 20px; z-index: 4; }
    .intro-port-4 { width: 150px; height: 200px; left: 36%; top: 70px; z-index: 3; }
    .intro-port-5 { width: 230px; height: 310px; left: 44%; top: 0px;  z-index: 5; }
    .intro-port-6 { width: 160px; height: 215px; left: 59%; top: 55px; z-index: 3; }
    .intro-port-7 { width: 175px; height: 240px; left: 70%; top: 30px; z-index: 4; }
    .intro-port-8 { width: 130px; height: 175px; left: 84%; top: 50px; z-index: 2; }

    @media (max-width: 750px) {
      .intro-hero-second { padding: 12vh 16px 40px; min-height: 80vh; }
      .intro-small-team { font-size: 10vw; }
      .intro-big-results { font-size: 20vw; }
      .intro-cards-row { height: 220px; top: 52%; }
      .intro-port-1 { width: 80px;  height: 110px; left: 0%;  top: 20px; }
      .intro-port-2 { width: 90px;  height: 130px; left: 10%; top: 35px; }
      .intro-port-3 { width: 110px; height: 150px; left: 22%; top: 15px; }
      .intro-port-4 { width: 90px;  height: 120px; left: 36%; top: 50px; }
      .intro-port-5 { width: 130px; height: 180px; left: 46%; top: 0; }
      .intro-port-6 { width: 95px;  height: 130px; left: 62%; top: 40px; }
      .intro-port-7 { width: 100px; height: 140px; left: 74%; top: 20px; }
      .intro-port-8 { width: 80px;  height: 110px; left: 87%; top: 35px; }
    }

    .dark-mode .intro-hero-second,
    .dark-mode .intro-big-results-wrap {
      background: #111111;
      background-color: #111111;
    }

    .dark-mode .intro-small-team {
      color: #ffffff;
    }

    .dark-mode .intro-big-results {
      color: rgba(255, 255, 255, 0.1);
      text-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
    }

    .dark-mode .intro-port-card {
      background: #0b0b0b;
      border-color: #0b0b0b;
      box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.88),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    }

.section-home-reviews {
    --home-reviews-bg: #faf9f6;
    --home-reviews-text: #111111;
    --home-reviews-muted: #6f7178;
    --home-reviews-soft: #9ca3af;
    --home-reviews-line: rgba(214, 215, 219, 0.58);
    --home-reviews-glass: rgba(255, 255, 255, 0.65);
    --home-reviews-glass-strong: rgba(255, 255, 255, 0.78);
    --home-reviews-panel: rgba(240, 239, 236, 0.62);
    --home-reviews-accent: var(--theme-color, #c04050);
    --rating-star-start: #ffa8b0;
    --rating-star-end: #8c3040;
    --rating-star-glow: #c04050;
    position: relative;
    z-index: 11;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 6%, rgba(138, 58, 107, 0.12), transparent 32rem),
        radial-gradient(circle at 82% 28%, rgba(217, 170, 199, 0.16), transparent 34rem),
        var(--home-reviews-bg);
    color: var(--home-reviews-text);
    font-family: 'CustomRegularFont', system-ui, sans-serif;
}

.section-home-reviews::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: clamp(4rem, 10vw, 9rem);
    pointer-events: none;
    background: linear-gradient(to bottom, #FAF9F6 0%, rgba(250, 249, 246, 0.86) 22%, rgba(250, 249, 246, 0) 100%);
}

.dark-mode .section-home-reviews::before {
    background: linear-gradient(to bottom, #111111 0%, rgba(17, 17, 17, 0.86) 22%, rgba(17, 17, 17, 0) 100%);
}

.dark-mode .section-home-reviews {
    --home-reviews-bg: #111111;
    --home-reviews-text: #ffffff;
    --home-reviews-muted: #a1a1aa;
    --home-reviews-soft: #71717a;
    --home-reviews-line: rgba(255, 255, 255, 0.08);
    --home-reviews-glass: rgba(25, 25, 27, 0.72);
    --home-reviews-glass-strong: rgba(31, 31, 34, 0.82);
    --home-reviews-panel: rgba(255, 255, 255, 0.045);
    --rating-star-start: #FC9C58;
    --rating-star-end: #EA4606;
    --rating-star-glow: #FC9C58;
    background:
        radial-gradient(circle at 18% 6%, rgba(234, 70, 6, 0.24), transparent 32rem),
        radial-gradient(circle at 82% 28%, rgba(252, 156, 88, 0.1), transparent 34rem),
        var(--home-reviews-bg);
}

.app-home-reviews-shell {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: clamp(5rem, 8vw, 7rem) clamp(1rem, 3.2vw, 3rem);
}

@keyframes appHomeReviewsFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(0.98);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

.js-enabled .section-home-reviews .app-home-reviews-stats-card,
.js-enabled .section-home-reviews .app-home-reviews-stat,
.js-enabled .section-home-reviews .app-home-reviews-actions,
.js-enabled .section-home-reviews .app-home-reviews-dock,
.js-enabled .section-home-reviews .app-home-reviews-card {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.98);
    filter: blur(8px);
    will-change: opacity, transform, filter;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-stats-card {
    animation: appHomeReviewsFadeIn var(--app-motion-duration) var(--app-motion-ease) 0.18s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-stat:nth-child(1) {
    animation: appHomeReviewsFadeIn var(--app-motion-duration-fast) var(--app-motion-ease) 0.32s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-stat:nth-child(2) {
    animation: appHomeReviewsFadeIn var(--app-motion-duration-fast) var(--app-motion-ease) 0.42s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-stat:nth-child(3) {
    animation: appHomeReviewsFadeIn var(--app-motion-duration-fast) var(--app-motion-ease) 0.52s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-actions {
    animation: appHomeReviewsFadeIn var(--app-motion-duration-fast) var(--app-motion-ease) 0.62s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-dock {
    animation: appHomeReviewsFadeIn var(--app-motion-duration) var(--app-motion-ease) 0.72s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-slide:nth-child(1) .app-home-reviews-card {
    animation: appHomeReviewsFadeIn var(--app-motion-duration) var(--app-motion-ease) 0.84s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-slide:nth-child(2) .app-home-reviews-card {
    animation: appHomeReviewsFadeIn var(--app-motion-duration) var(--app-motion-ease) 0.94s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-slide:nth-child(3) .app-home-reviews-card {
    animation: appHomeReviewsFadeIn var(--app-motion-duration) var(--app-motion-ease) 1.04s both;
}

.section-home-reviews.is-visible:not(.has-played-intro) .app-home-reviews-slide:nth-child(n+4) .app-home-reviews-card {
    animation: appHomeReviewsFadeIn var(--app-motion-duration) var(--app-motion-ease) 1.14s both;
}

.section-home-reviews.has-played-intro .app-home-reviews-stats-card,
.section-home-reviews.has-played-intro .app-home-reviews-stat,
.section-home-reviews.has-played-intro .app-home-reviews-actions,
.section-home-reviews.has-played-intro .app-home-reviews-dock,
.section-home-reviews.has-played-intro .app-home-reviews-card,
.app-home-reviews-card.app-home-reviews-card--static {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    will-change: auto;
}

.app-home-reviews-hero {
    position: relative;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5rem;
    text-align: center;
}

.app-home-reviews-hero h2 {
    max-width: 13ch;
    margin: 0 0 2rem;
    color: var(--home-reviews-text);
    font-size: clamp(3.75rem, 9vw, 7.5rem);
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.app-home-reviews-hero h2 .app-shift-word {
    color: #111111;
}

.dark-mode .app-home-reviews-hero h2 .app-shift-word {
    color: #ffffff;
}

.app-home-reviews-title-accent {
    display: inline-block;
    padding-right: 0.12em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #111111 0%, #ff8fa0 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
}

.app-home-reviews-hero h2 .app-home-reviews-title-accent .app-shift-word {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #111111 0%, #ff8fa0 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
}

.dark-mode .app-home-reviews-title-accent,
.dark-mode .app-home-reviews-hero h2 .app-home-reviews-title-accent .app-shift-word {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #ffffff 0%, #FC9C58 100%);
}

.app-home-reviews-hero > p {
    max-width: 42rem;
    margin: 0 0 4rem;
    color: var(--home-reviews-muted);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 650;
    line-height: 1.62;
}

.app-home-reviews-stats-card,
.app-home-reviews-card,
.app-home-reviews-command,
.app-home-reviews-tooltip {
    background: var(--home-reviews-glass);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

.dark-mode .app-home-reviews-stats-card,
.dark-mode .app-home-reviews-card,
.dark-mode .app-home-reviews-command,
.dark-mode .app-home-reviews-tooltip {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 46px -18px rgba(0, 0, 0, 0.65);
}

.app-home-reviews-stats-card {
    position: relative;
    display: flex;
    align-items: stretch;
    width: min(100%, 64rem);
    padding: 0.75rem;
    border-radius: 2.5rem;
}

.app-home-reviews-stat {
    position: relative;
    flex: 1 1 0;
    display: flex;
    min-height: 9rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-right: 1px solid var(--home-reviews-line);
}

.app-home-reviews-stat strong,
.app-home-reviews-rating strong {
    color: var(--home-reviews-text);
    font-size: 2.75rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.06em;
}

.app-home-reviews-stat > span {
    margin-top: 0.5rem;
    color: var(--home-reviews-soft);
    font-size: 0.625rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.app-home-reviews-rating {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.app-home-reviews-rating svg {
    width: 2rem;
    height: 2rem;
    overflow: visible;
    transition: transform 500ms ease;
}

.app-home-reviews-rating svg:hover {
    transform: scale(1.1);
}

.app-home-reviews-info {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #d1d5db;
    border-radius: 999px;
    transition: color 250ms ease, transform 250ms ease;
}

.app-home-reviews-stat:hover .app-home-reviews-info,
.app-home-reviews-info:focus-visible {
    color: var(--home-reviews-text);
    transform: translateY(-1px);
}

.app-home-reviews-tooltip {
    position: absolute;
    top: calc(100% + 1.25rem);
    left: 50%;
    z-index: 90;
    width: 15rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -0.5rem);
    transition: opacity 300ms ease, transform 300ms ease;
}

.app-home-reviews-tooltip--wide {
    width: 16rem;
    padding: 1.5rem;
}

.app-home-reviews-stat:hover .app-home-reviews-tooltip,
.app-home-reviews-stat:focus-within .app-home-reviews-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.app-home-reviews-tooltip p {
    margin: 0;
    color: var(--home-reviews-muted);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.app-home-reviews-tooltip p strong {
    display: inline-block;
    font-size: inherit;
    letter-spacing: 0;
    transform: translateY(-0.08em);
}

.app-home-reviews-tooltip-title {
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--home-reviews-line);
    color: var(--home-reviews-soft) !important;
    font-size: 0.625rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.app-home-reviews-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.875rem;
    color: var(--home-reviews-muted);
    font-size: 0.8125rem;
    font-weight: 800;
}

.app-home-reviews-breakdown-row strong {
    color: var(--home-reviews-text);
    font-size: inherit;
    letter-spacing: 0;
}

.app-home-reviews-actions {
    flex: 1 1 0;
    display: flex;
    min-height: 9rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
}

.app-home-reviews-primary-btn,
.app-home-reviews-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.375rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 850;
    letter-spacing: 0.025em;
    transition: transform 600ms ease, box-shadow 600ms ease, background 300ms ease;
}

.app-home-reviews-primary-btn {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(ellipse at 30% 35%, #ff8fa0 0%, transparent 55%),
        radial-gradient(ellipse at 70% 65%, var(--home-reviews-accent) 0%, transparent 55%),
        radial-gradient(circle at 50% 90%, rgba(69, 10, 59, 0.62), transparent 60%),
        linear-gradient(135deg, #ffa8b0, #8c3040);
    box-shadow: 0 12px 24px -6px rgba(40, 20, 30, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 8px rgba(60, 20, 30, 0.2);
}

.app-home-reviews-primary-btn::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 50%;
    right: 50%;
    height: 45%;
    border-radius: 999px 999px 0 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15) 60%, transparent);
    opacity: 0;
    transform: translateY(-4px) scaleY(0.5);
    transition: opacity 400ms ease, left 400ms ease, right 400ms ease, transform 400ms ease;
}

.app-home-reviews-primary-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: -6px -6px 18px rgba(217, 170, 199, 0.34), 10px 10px 22px rgba(60, 20, 30, 0.36), inset 0 3px 6px rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(60, 20, 30, 0.1);
}

.dark-mode .app-home-reviews-primary-btn {
    background:
        radial-gradient(ellipse at 30% 35%, #ffcbb3 0%, transparent 55%),
        radial-gradient(ellipse at 70% 65%, #9e2a00 0%, transparent 55%),
        radial-gradient(circle at 50% 90%, rgba(40, 15, 5, 0.6), transparent 60%),
        linear-gradient(135deg, #FC9C58, #EA4606);
    box-shadow:
        -5px -5px 14px rgba(255, 255, 255, 0.03),
        0 8px 16px -4px rgba(0, 0, 0, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -4px 8px rgba(0, 0, 0, 0.35);
}

.dark-mode .app-home-reviews-primary-btn:hover {
    box-shadow:
        -8px -8px 22px rgba(255, 255, 255, 0.06),
        12px 12px 26px rgba(0, 0, 0, 0.7),
        inset 0 3px 6px rgba(255, 255, 255, 0.45),
        inset 0 -4px 8px rgba(0, 0, 0, 0.2);
}

.app-home-reviews-primary-btn:hover::before {
    left: 2%;
    right: 2%;
    opacity: 0.95;
    transform: translateY(0) scaleY(1);
}

.app-home-reviews-secondary-btn {
    color: var(--home-reviews-text);
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(229, 231, 235, 0.86);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.app-home-reviews-primary-btn .app-shift-word-wrapper + .app-shift-word-wrapper,
.app-home-reviews-secondary-btn .app-shift-word-wrapper + .app-shift-word-wrapper {
    margin-left: 0.25em;
}

.dark-mode .app-home-reviews-secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}

.app-home-reviews-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.28);
}

.dark-mode .app-home-reviews-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.13);
}

.app-home-reviews-dock {
    position: relative;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: calc(100vw - 120px);
    max-width: calc(100vw - 120px);
    margin-left: calc(50% - 50vw + 60px);
    transform: none;
    margin-bottom: 3rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    background: var(--home-reviews-panel);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 -2px 6px rgba(255, 255, 255, 0.5), 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.dark-mode .app-home-reviews-dock {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(18, 18, 18, 0.68);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.04), 0 14px 40px -20px rgba(0, 0, 0, 0.8);
}

.app-home-reviews-services {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.25rem;
    scrollbar-width: none;
}

.app-home-reviews-services::-webkit-scrollbar {
    display: none;
}

.app-home-reviews-pill-indicator {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0;
    z-index: 0;
    width: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: var(--home-reviews-glass-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    transition: width 500ms cubic-bezier(0.25, 1, 0.5, 1), transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.dark-mode .app-home-reviews-pill-indicator {
    border-color: rgba(252, 156, 88, 0.48);
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 203, 179, 0.32), transparent 44%),
        linear-gradient(135deg, rgba(252, 156, 88, 0.94), rgba(234, 70, 6, 0.88));
    box-shadow:
        0 10px 28px -16px rgba(234, 70, 6, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.app-home-reviews-service-btn,
.app-home-reviews-sort-btn,
.app-home-reviews-sort-option,
.app-home-reviews-nav button {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.app-home-reviews-service-btn {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    color: var(--home-reviews-muted);
    font-size: 0.8125rem;
    font-weight: 850;
    line-height: 1.5;
    white-space: nowrap;
    transition: color 300ms ease;
}

.app-home-reviews-service-btn:hover,
.app-home-reviews-service-btn.is-active {
    color: var(--home-reviews-text);
}

.dark-mode .app-home-reviews-service-btn.is-active {
    color: #111111;
}

.dark-mode .app-home-reviews-service-btn:hover:not(.is-active) {
    color: #FC9C58;
}

.app-home-reviews-dock-divider,
.app-home-reviews-control-divider {
    flex: 0 0 auto;
    width: 1px;
    background: var(--home-reviews-line);
}

.app-home-reviews-dock-divider {
    height: 2rem;
}

.app-home-reviews-control-divider {
    height: 1.5rem;
}

.dark-mode .app-home-reviews-dock-divider,
.dark-mode .app-home-reviews-control-divider {
    background: rgba(252, 156, 88, 0.18);
}

.app-home-reviews-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0 0.5rem;
}

.app-home-reviews-sort {
    position: relative;
}

.app-home-reviews-sort-btn {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 10rem;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    color: var(--home-reviews-text);
    background: var(--home-reviews-glass-strong);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 0.8125rem;
    font-weight: 850;
    transition: box-shadow 300ms ease;
}

.dark-mode .app-home-reviews-sort-btn {
    color: #FC9C58;
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(252, 156, 88, 0.28);
    box-shadow:
        0 10px 28px -22px rgba(234, 70, 6, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-home-reviews-sort-btn:hover {
    box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.3);
}

.app-home-reviews-sort-btn > span {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.app-home-reviews-sort-btn i {
    color: var(--home-reviews-soft);
    font-size: 1rem;
    transition: color 250ms ease, transform 300ms ease;
}

.dark-mode .app-home-reviews-sort-btn i,
.dark-mode .app-home-reviews-sort-btn [data-home-reviews-sort-label] {
    color: #FC9C58;
}

.app-home-reviews-sort-btn:hover i:first-child {
    color: var(--home-reviews-accent);
}

.app-home-reviews-sort-btn.is-open > i:last-child {
    transform: rotate(180deg);
}

.app-home-reviews-sort-menu {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    z-index: 30;
    display: flex;
    width: 11.875rem;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem;
    border-radius: 1.25rem;
    background: var(--home-reviews-glass-strong);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    transition: opacity 220ms ease, transform 220ms ease;
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    backdrop-filter: blur(30px) saturate(150%);
}

.app-home-reviews-sort-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.app-home-reviews-sort-option {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: var(--home-reviews-muted);
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 850;
    transition: color 250ms ease, background 250ms ease, box-shadow 250ms ease;
}

.app-home-reviews-sort-option:hover,
.app-home-reviews-sort-option.is-active {
    color: var(--home-reviews-text);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dark-mode .app-home-reviews-sort-option:hover,
.dark-mode .app-home-reviews-sort-option.is-active {
    color: #111111;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 203, 179, 0.28), transparent 44%),
        linear-gradient(135deg, rgba(252, 156, 88, 0.94), rgba(234, 70, 6, 0.88));
    box-shadow: 0 10px 24px -18px rgba(234, 70, 6, 0.9);
}

.app-home-reviews-nav {
    display: flex;
    gap: 0.5rem;
}

.app-home-reviews-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: var(--home-reviews-text);
    background: var(--home-reviews-glass-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.app-home-reviews-nav button:hover:not(:disabled) {
    color: var(--home-reviews-accent);
    box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.3);
}

.app-home-reviews-nav button:disabled {
    color: #d1d5db;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
}

.dark-mode .app-home-reviews-nav button {
    color: #FC9C58;
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(252, 156, 88, 0.24);
    box-shadow:
        0 10px 28px -22px rgba(234, 70, 6, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dark-mode .app-home-reviews-nav button:hover:not(:disabled) {
    color: #111111;
    background:
        radial-gradient(circle at 26% 18%, rgba(255, 203, 179, 0.34), transparent 44%),
        linear-gradient(135deg, rgba(252, 156, 88, 0.95), rgba(234, 70, 6, 0.9));
    border-color: rgba(252, 156, 88, 0.38);
}

.dark-mode .app-home-reviews-nav button:disabled {
    color: rgba(252, 156, 88, 0.28);
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(252, 156, 88, 0.1);
    box-shadow: none;
}

.app-home-reviews-carousel {
    position: relative;
    z-index: 2;
    width: calc(100vw - 120px + 2rem);
    max-width: calc(100vw - 120px + 2rem);
    margin: 0 0 0 calc(50% - 50vw + 44px);
    transform: none;
    overflow: visible;
    padding: 1rem;
}

.app-home-reviews-track {
    display: flex;
    transition: transform 700ms cubic-bezier(0.25, 1, 0.5, 1);
}

.app-home-reviews-slide {
    flex: 0 0 auto;
    padding: 0 0.75rem;
}

.app-home-reviews-card {
    display: flex;
    height: 100%;
    min-height: 36.5rem;
    flex-direction: column;
    overflow: hidden;
    border-radius: 2rem;
    transition: transform 500ms ease;
}

.app-home-reviews-card:hover {
    transform: translateY(-0.25rem);
}

.app-home-reviews-cover {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    background: #f3f4f6;
}

.app-home-reviews-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.app-home-reviews-cover button:hover img,
.app-home-reviews-cover-photo:hover img {
    transform: scale(1.05);
}

.app-home-reviews-cover button,
.app-home-reviews-cover-photo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.app-home-reviews-cover button::after,
.app-home-reviews-cover-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    transition: background 300ms ease;
}

.app-home-reviews-cover button:hover::after,
.app-home-reviews-cover-photo:hover::after {
    background: rgba(0, 0, 0, 0.1);
}

.app-home-reviews-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--home-reviews-bg);
    box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.03), inset -6px -6px 12px rgba(255, 255, 255, 1);
}

.dark-mode .app-home-reviews-cover--empty {
    box-shadow: inset 8px 8px 18px rgba(0, 0, 0, 0.6), inset -6px -6px 14px rgba(255, 255, 255, 0.04);
}

.app-home-reviews-cover-empty-bg,
.app-home-reviews-cover-empty-grid {
    position: absolute;
    inset: 0;
}

.app-home-reviews-cover-empty-bg {
    opacity: 0.42;
    background:
        radial-gradient(circle at 0% 0%, rgba(217, 170, 199, 0.5), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(138, 58, 107, 0.34), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(200, 200, 200, 0.3), transparent 50%);
    filter: blur(20px);
    mix-blend-mode: multiply;
    transition: opacity 700ms ease;
}

.dark-mode .app-home-reviews-cover-empty-bg {
    background:
        radial-gradient(circle at 0% 0%, rgba(252, 156, 88, 0.46), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(234, 70, 6, 0.34), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 203, 179, 0.18), transparent 50%);
    mix-blend-mode: screen;
}

.app-home-reviews-cover--empty:hover .app-home-reviews-cover-empty-bg {
    opacity: 0.6;
}

.app-home-reviews-cover-empty-grid {
    background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.app-home-reviews-cover-empty-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.app-home-reviews-cover-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: var(--home-reviews-accent);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.app-home-reviews-cover-empty-icon i {
    font-size: 1.65rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(2px);
}

.dark-mode .app-home-reviews-cover-empty-icon {
    color: #FC9C58;
    background: rgba(252, 156, 88, 0.12);
    border-color: rgba(252, 156, 88, 0.34);
    box-shadow:
        0 12px 28px -18px rgba(234, 70, 6, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dark-mode .app-home-reviews-cover-empty-icon i {
    color: inherit;
}

.app-home-reviews-cover-empty-content p {
    margin: 0;
    color: var(--home-reviews-text);
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.app-home-reviews-cover-empty-content span {
    display: block;
    margin-top: 0.125rem;
    color: var(--home-reviews-muted);
    font-size: 0.625rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.app-home-reviews-cover--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    background: #ffffff;
}

.app-home-reviews-cover--many {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2px;
    background: #ffffff;
}

.app-home-reviews-cover--many .app-home-reviews-cover-photo:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.app-home-reviews-extra {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    font-size: 0.875rem;
    font-weight: 850;
    transition: background 250ms ease;
}

.app-home-reviews-cover-photo:hover .app-home-reviews-extra {
    background: rgba(0, 0, 0, 0.6);
}

.app-home-reviews-card-head {
    position: relative;
    padding: 0 2rem;
}

.app-home-reviews-avatar-wrap {
    position: absolute;
    top: -2.5rem;
    left: 2rem;
}

.app-home-reviews-avatar {
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    border: 4px solid #ffffff;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.app-home-reviews-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-home-reviews-rating-badge {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    background: #111111;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
    font-size: 0.6875rem;
    font-weight: 950;
}

.app-home-reviews-card-head h3 {
    margin: 0;
    padding: 3rem 0 1.5rem;
    color: var(--home-reviews-text);
    font-size: 1.375rem;
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.app-home-reviews-card-body {
    flex: 1 1 auto;
    padding: 0 2rem 2rem;
}

.app-home-reviews-card-body p {
    margin: 0;
    color: var(--home-reviews-muted);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.7;
}

.app-home-reviews-card-foot {
    margin-top: auto;
    padding: 0 1.5rem 1.5rem;
}

.app-home-reviews-dashboard {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    background: rgba(253, 253, 252, 0.82);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.dark-mode .app-home-reviews-dashboard {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.045);
}

.app-home-reviews-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-100%);
    transition: transform 1000ms ease;
}

.app-home-reviews-dashboard:hover::before {
    transform: translateX(100%);
}

.app-home-reviews-dashboard-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.app-home-reviews-dashboard-item:nth-child(3) {
    align-items: center;
}

.app-home-reviews-dashboard-item:nth-child(5) {
    align-items: flex-end;
}

.app-home-reviews-dashboard-item small {
    color: var(--home-reviews-soft);
    font-size: 0.625rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.app-home-reviews-dashboard-item strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--home-reviews-text);
    font-size: 0.8125rem;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-home-reviews-dashboard-divider {
    position: relative;
    z-index: 1;
    width: 1px;
    height: 2.5rem;
    margin: 0 0.75rem;
    background: var(--home-reviews-line);
}

.app-home-reviews-recommend {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
}

.app-home-reviews-recommend i {
    flex: 0 0 auto;
    font-size: 0.875rem;
}

.app-home-reviews-recommend span {
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-home-reviews-recommend--absolutely {
    color: #059669;
}

.app-home-reviews-recommend--maybe {
    color: #d97706;
}

.app-home-reviews-recommend--unlikely {
    color: #e11d48;
}

.app-home-reviews-empty {
    width: 100%;
    padding: 5rem 1rem;
    color: var(--home-reviews-soft);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 850;
}

.app-home-reviews-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(250, 249, 246, 0.95);
    opacity: 0;
    transition: opacity 500ms ease;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}

.dark-mode .app-home-reviews-lightbox {
    background: rgba(17, 17, 17, 0.95);
}

.app-home-reviews-lightbox.is-open {
    display: flex;
}

.app-home-reviews-lightbox.is-visible {
    opacity: 1;
}

.app-home-reviews-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(1.5rem, 3vw, 2rem);
}

.app-home-reviews-command {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--home-reviews-text);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.55);
}

.app-home-reviews-lightbox-counter {
    min-height: 2.5rem;
    padding: 0 1.5rem;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-home-reviews-lightbox-close,
.app-home-reviews-lightbox-nav {
    width: 3rem;
    height: 3rem;
    border: 0;
    cursor: pointer;
    transition: transform 250ms ease;
}

.app-home-reviews-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 3.5rem;
    height: 3.5rem;
    transform: translateY(-50%);
}

.app-home-reviews-lightbox-nav--prev {
    left: clamp(1rem, 4vw, 3rem);
}

.app-home-reviews-lightbox-nav--next {
    right: clamp(1rem, 4vw, 3rem);
}

.app-home-reviews-lightbox-close:hover,
.app-home-reviews-lightbox-nav:hover {
    transform: scale(1.05);
}

.app-home-reviews-lightbox-nav:hover {
    transform: translateY(-50%) scale(1.05);
}

.app-home-reviews-lightbox-nav.is-hidden {
    display: none;
}

.app-home-reviews-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: clamp(2rem, 9vw, 8rem);
}

.app-home-reviews-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 1rem;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.3);
    transition: transform 500ms ease;
}

@media (max-width: 900px) {
    .app-home-reviews-stats-card,
    .app-home-reviews-dock {
        border-radius: 1.5rem;
    }

    .app-home-reviews-stats-card,
    .app-home-reviews-dock {
        flex-direction: column;
    }

    .app-home-reviews-dock {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        transform: none;
    }

    .app-home-reviews-carousel {
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
        margin: 0 -1rem;
        transform: none;
    }

    .app-home-reviews-stat,
    .app-home-reviews-actions {
        width: 100%;
    }

    .app-home-reviews-stat {
        min-height: 8rem;
        border-right: 0;
        border-bottom: 1px solid var(--home-reviews-line);
    }

    .app-home-reviews-dock-divider,
    .app-home-reviews-control-divider {
        display: none;
    }

    .app-home-reviews-services,
    .app-home-reviews-controls {
        width: 100%;
    }

    .app-home-reviews-controls {
        justify-content: space-between;
    }
}

@media (max-width: 720px) {
    .app-home-reviews-shell {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .app-home-reviews-hero {
        margin-bottom: 3rem;
    }

    .app-home-reviews-hero h2 {
        font-size: clamp(3.15rem, 15vw, 4.75rem);
    }

    .app-home-reviews-hero > p {
        margin-bottom: 2.5rem;
        font-size: 1rem;
    }

    .app-home-reviews-stat strong,
    .app-home-reviews-rating strong {
        font-size: 2.45rem;
    }

    .app-home-reviews-service-btn {
        padding-inline: 1.1rem;
    }

    .app-home-reviews-card {
        min-height: 35rem;
    }

    .app-home-reviews-card-head,
    .app-home-reviews-card-body {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .app-home-reviews-card-foot {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .app-home-reviews-dashboard {
        padding: 1rem;
    }

    .app-home-reviews-dashboard-divider {
        margin: 0 0.5rem;
    }

    .app-home-reviews-dashboard-item small {
        font-size: 0.55rem;
    }

    .app-home-reviews-dashboard-item strong,
    .app-home-reviews-recommend span {
        font-size: 0.68rem;
    }

    .app-home-reviews-lightbox-nav {
        width: 3rem;
        height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-home-reviews *,
    .section-home-reviews *::before,
    .section-home-reviews *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}