*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family: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}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.bottom-3{bottom:.75rem}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.bottom-6{bottom:1.5rem}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-3{left:.75rem}.left-4{left:1rem}.left-5{left:1.25rem}.left-6{left:1.5rem}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.right-5{right:1.25rem}.right-6{right:1.5rem}.top-0{top:0}.top-14{top:3.5rem}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}.top-5{top:1.25rem}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[60\]{z-index:60}.col-span-1{grid-column:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-\[9\/16\]{aspect-ratio:9/16}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-36{height:9rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[400px\]{height:400px}.h-full{height:100%}.max-h-80{max-height:20rem}.max-h-\[80vh\]{max-height:80vh}.min-h-\[1\.5em\]{min-height:1.5em}.min-h-\[2\.4em\]{min-height:2.4em}.min-h-\[55vh\]{min-height:55vh}.min-h-screen{min-height:100vh}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[600px\]{width:600px}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[650px\]{min-width:650px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-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-x-full{--tw-translate-x:-100%}.scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.scale-110,.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-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize-none{resize:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[1fr_auto_auto_auto\]{grid-template-columns:1fr auto auto auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-8{gap:2rem}.gap-\[5px\]{gap:5px}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[var\(--border\)\]{border-color:var(--border)}.border-\[var\(--border-strong\)\]{border-color:var(--border-strong)}.border-blue-400\/25{border-color:rgba(96,165,250,.25)}.border-blue-400\/30{border-color:rgba(96,165,250,.3)}.border-gray-500\/30{border-color:hsla(220,9%,46%,.3)}.border-neon{--tw-border-opacity:1;border-color:rgb(57 255 20/var(--tw-border-opacity,1))}.border-neon\/20{border-color:rgba(57,255,20,.2)}.border-neon\/25{border-color:rgba(57,255,20,.25)}.border-neon\/30{border-color:rgba(57,255,20,.3)}.border-neon\/40{border-color:rgba(57,255,20,.4)}.border-red-400\/20{border-color:hsla(0,91%,71%,.2)}.border-red-400\/25{border-color:hsla(0,91%,71%,.25)}.border-red-400\/30{border-color:hsla(0,91%,71%,.3)}.border-red-400\/40{border-color:hsla(0,91%,71%,.4)}.border-red-500\/30{border-color:rgba(239,68,68,.3)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/15{border-color:hsla(0,0%,100%,.15)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/25{border-color:hsla(0,0%,100%,.25)}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.border-yellow-400\/25{border-color:rgba(250,204,21,.25)}.border-yellow-400\/30{border-color:rgba(250,204,21,.3)}.bg-\[var\(--bg\)\]{background-color:var(--bg)}.bg-\[var\(--bg-alt\)\]{background-color:var(--bg-alt)}.bg-\[var\(--bg-elevated\)\]{background-color:var(--bg-elevated)}.bg-\[var\(--card-bg\)\]{background-color:var(--card-bg)}.bg-\[var\(--text\)\]{background-color:var(--text)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-black\/90{background-color:rgba(0,0,0,.9)}.bg-blue-400\/10{background-color:rgba(96,165,250,.1)}.bg-blue-400\/5{background-color:rgba(96,165,250,.05)}.bg-charcoal{--tw-bg-opacity:1;background-color:rgb(13 13 13/var(--tw-bg-opacity,1))}.bg-gray-500\/5{background-color:hsla(220,9%,46%,.05)}.bg-neon{--tw-bg-opacity:1;background-color:rgb(57 255 20/var(--tw-bg-opacity,1))}.bg-neon\/10{background-color:rgba(57,255,20,.1)}.bg-neon\/15{background-color:rgba(57,255,20,.15)}.bg-neon\/5{background-color:rgba(57,255,20,.05)}.bg-neon\/90{background-color:rgba(57,255,20,.9)}.bg-red-400\/10{background-color:hsla(0,91%,71%,.1)}.bg-red-400\/5{background-color:hsla(0,91%,71%,.05)}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.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\/15{background-color:hsla(0,0%,100%,.15)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-yellow-400\/10{background-color:rgba(250,204,21,.1)}.bg-yellow-400\/5{background-color:rgba(250,204,21,.05)}.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-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.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-black\/70{--tw-gradient-from:rgba(0,0,0,.7) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black\/80{--tw-gradient-from:rgba(0,0,0,.8) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black\/85{--tw-gradient-from:rgba(0,0,0,.85) 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-neon\/10{--tw-gradient-from:rgba(57,255,20,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(57,255,20,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neon\/15{--tw-gradient-from:rgba(57,255,20,.15) var(--tw-gradient-from-position);--tw-gradient-to:rgba(57,255,20,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neon\/40{--tw-gradient-from:rgba(57,255,20,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(57,255,20,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-black\/10{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-black\/20{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.2) var(--tw-gradient-via-position),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-black\/50{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.5) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-black\/70{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.7) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[var\(--bg-elevated\)\]{--tw-gradient-to:var(--bg-elevated) var(--tw-gradient-to-position)}.to-black{--tw-gradient-to:#000 var(--tw-gradient-to-position)}.to-black\/10{--tw-gradient-to:rgba(0,0,0,.1) var(--tw-gradient-to-position)}.to-black\/30{--tw-gradient-to:rgba(0,0,0,.3) var(--tw-gradient-to-position)}.to-neon{--tw-gradient-to:#39ff14 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.p-1{padding:.25rem}.p-10{padding:2.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-8{padding-bottom:2rem}.pt-16{padding-top:4rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-40{padding-top:10rem}.pt-5{padding-top:1.25rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-display{font-family:Inter,system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[6rem\]{font-size:6rem}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-\[1\.15\]{line-height:1.15}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[var\(--border-strong\)\]{color:var(--border-strong)}.text-\[var\(--text\)\]{color:var(--text)}.text-\[var\(--text-faint\)\]{color:var(--text-faint)}.text-\[var\(--text-muted\)\]{color:var(--text-muted)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-neon{--tw-text-opacity:1;color:rgb(57 255 20/var(--tw-text-opacity,1))}.text-neon\/70{color:rgba(57,255,20,.7)}.text-neon\/80{color:rgba(57,255,20,.8)}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-400\/50{color:hsla(0,91%,71%,.5)}.text-red-400\/60{color:hsla(0,91%,71%,.6)}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/20{color:hsla(0,0%,100%,.2)}.text-white\/25{color:hsla(0,0%,100%,.25)}.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)}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-neon{accent-color:#39ff14}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow-\[0_0_16px_rgba\(57\2c 255\2c 20\2c 0\.25\)\]{--tw-shadow:0 0 16px rgba(57,255,20,.25);--tw-shadow-colored:0 0 16px 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_20px_rgba\(57\2c 255\2c 106\2c \.5\)\]{--tw-shadow:0 0 20px rgba(57,255,106,.5);--tw-shadow-colored:0 0 20px var(--tw-shadow-color)}.shadow-\[0_0_20px_rgba\(57\2c 255\2c 106\2c \.5\)\],.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-\[var\(--shadow\)\]{--tw-shadow-color:var(--shadow);--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-neon\/30{--tw-ring-color:rgba(57,255,20,.3)}.ring-neon\/50{--tw-ring-color:rgba(57,255,20,.5)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.first\:mt-0:first-child{margin-top:0}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:gap-2\.5:hover{gap:.625rem}.hover\:border-neon:hover{--tw-border-opacity:1;border-color:rgb(57 255 20/var(--tw-border-opacity,1))}.hover\:border-neon\/40:hover{border-color:rgba(57,255,20,.4)}.hover\:border-red-400:hover{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.hover\:border-red-400\/30:hover{border-color:hsla(0,91%,71%,.3)}.hover\:border-white\/20:hover{border-color:hsla(0,0%,100%,.2)}.hover\:border-white\/30:hover{border-color:hsla(0,0%,100%,.3)}.hover\:bg-\[var\(--bg-elevated\)\]:hover{background-color:var(--bg-elevated)}.hover\:bg-black\/10:hover{background-color:rgba(0,0,0,.1)}.hover\:bg-neon:hover{--tw-bg-opacity:1;background-color:rgb(57 255 20/var(--tw-bg-opacity,1))}.hover\:bg-red-500\/10:hover{background-color:rgba(239,68,68,.1)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-\[var\(--text\)\]:hover{color:var(--text)}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-neon:hover{--tw-text-opacity:1;color:rgb(57 255 20/var(--tw-text-opacity,1))}.hover\:text-red-400:hover{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.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\:underline:hover{text-decoration-line:underline}.hover\:ring-1:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\:ring-neon\/30:hover{--tw-ring-color:rgba(57,255,20,.3)}.hover\:ring-neon\/40:hover{--tw-ring-color:rgba(57,255,20,.4)}.hover\:ring-white\/20:hover{--tw-ring-color:hsla(0,0%,100%,.2)}.focus\:border-neon:focus{--tw-border-opacity:1;border-color:rgb(57 255 20/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-20:disabled{opacity:.2}.disabled\:opacity-50:disabled{opacity:.5}.group[open] .group-open\:rotate-45{--tw-rotate:45deg}.group:hover .group-hover\:scale-105,.group[open] .group-open\:rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.group:hover .group-hover\: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))}@media (min-width:640px){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:min-h-\[1\.3em\]{min-height:1.3em}.sm\:w-20{width:5rem}.sm\:w-72{width:18rem}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-10{gap:2.5rem}.sm\:p-6{padding:1.5rem}.sm\:py-0{padding-top:0;padding-bottom:0}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:right-8{right:2rem}.md\:top-16{top:4rem}.md\:top-8{top:2rem}.md\:hidden{display:none}.md\:aspect-\[3\/4\]{aspect-ratio:3/4}.md\:h-14{height:3.5rem}.md\:h-16{height:4rem}.md\:h-20{height:5rem}.md\:h-32{height:8rem}.md\:h-7{height:1.75rem}.md\:w-14{width:3.5rem}.md\:w-20{width:5rem}.md\:w-7{width:1.75rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-2{gap:.5rem}.md\:gap-5{gap:1.25rem}.md\:p-10{padding:2.5rem}.md\:p-16{padding:4rem}.md\:p-8{padding:2rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-20{padding-bottom:5rem}.md\:pt-48{padding-top:12rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1024px){.lg\:static{position:static}.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-80{width:20rem}.lg\:translate-x-0{--tw-translate-x:0px;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))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:p-8{padding:2rem}}:root{color-scheme:light;--glass-bg:rgba(255,255,255,.55);--glass-border:rgba(255,255,255,.6);--glass-highlight:rgba(255,255,255,.8);--glass-shadow:0 8px 32px -8px rgba(0,0,0,.12);--font-display:'Space Grotesk',Inter,system-ui,sans-serif;--font-body:'Space Grotesk',Inter,system-ui,sans-serif;--bg:#fff;--bg-elevated:#f4f5f4;--bg-alt:#fafaf9;--text:#0a0a0a;--text-muted:hsla(0,0%,4%,.65);--text-faint:hsla(0,0%,4%,.45);--border:hsla(0,0%,4%,.1);--border-strong:hsla(0,0%,4%,.16);--neon:#1fa82c;--neon-alt:#178a22;--neon-on:#fff;--card-bg:#fff;--shadow:0 4px 24px -8px rgba(0,0,0,.08)}[data-theme=dark]{color-scheme:dark;--glass-bg:rgba(20,32,26,.45);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.12);--glass-shadow:0 8px 32px -8px rgba(0,0,0,.5);--bg:#07110b;--bg-elevated:#0d1a12;--bg-alt:#0a150f;--text:#f5fff8;--text-muted:hsla(140,20%,92%,.62);--text-faint:hsla(140,20%,92%,.42);--border:hsla(140,80%,60%,.12);--border-strong:hsla(140,80%,60%,.2);--neon:#39ff6a;--neon-alt:#2ee88f;--neon-on:#04140a;--card-bg:#0e1a13;--shadow:0 4px 24px -8px rgba(0,0,0,.5);--danger:#ff4d5e;--danger-bg:rgba(255,77,94,.12)}
.bg-gym-texture{background-image:radial-gradient(circle at 50% 0,rgba(57,255,106,.08),transparent 60%),repeating-linear-gradient(180deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 3px)}
.badge-discount{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .65rem;border-radius:9999px;background:var(--danger-bg,rgba(255,77,94,.12));color:var(--danger,#ff4d5e);font-size:11px;font-weight:800;letter-spacing:.02em}
.badge-price{display:inline-flex;align-items:center;padding:.3rem .75rem;border-radius:9999px;background:rgba(57,255,106,.14);color:var(--neon);font-weight:800;font-size:13px;border:1px solid rgba(57,255,106,.25)}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}body,html{background-color:var(--bg);color:var(--text);font-family:var(--font-body,Inter,system-ui,sans-serif);-webkit-font-smoothing:antialiased;margin:0;padding:0;transition:background-color .25s ease,color .25s ease;overflow-x:hidden;max-width:100vw}*{box-sizing:border-box}.font-display{font-family:var(--font-display,Inter,system-ui,sans-serif);font-weight:800;letter-spacing:-.01em}.glow-text{text-shadow:0 0 20px rgba(57,255,20,.7),0 0 40px rgba(57,255,20,.3)}.glow-box{box-shadow:0 0 20px rgba(57,255,20,.5),0 0 60px rgba(57,255,20,.2)}.glow-box-sm{box-shadow:0 0 12px rgba(57,255,20,.4)}.nav-active .nav-dot{background-color:#39ff14;box-shadow:0 0 10px #39ff14}.nav-active .nav-label,.nav-active .nav-num{color:#39ff14}.radial-glow{background:radial-gradient(circle,rgba(57,255,20,.15) 0,transparent 70%);filter:blur(80px)}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}::-webkit-scrollbar{width:0;height:0}::-moz-selection{background:#39ff14;color:#000}::selection{background:#39ff14;color:#000}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom)}.branch-panel{transition:opacity .3s ease}@media (max-width:767px){body{padding-bottom:70px}}.card-hover{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}.card-hover:hover{transform:translateY(-4px);border-color:rgba(57,255,20,.4);box-shadow:0 12px 40px -12px rgba(57,255,20,.25)}.btn-press:active{transform:scale(.97)}.focus-ring:focus-visible{outline:2px solid #39ff14;outline-offset:2px}.skeleton{background:linear-gradient(90deg,hsla(0,0%,100%,.04) 25%,hsla(0,0%,100%,.08) 37%,hsla(0,0%,100%,.04) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite}@keyframes skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.nav-utility{gap:.375rem}.nav-utility,.theme-toggle-btn{display:flex;align-items:center}.theme-toggle-btn{justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border-strong);background:transparent;color:var(--text-muted);cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease}.theme-toggle-btn:hover{color:#39ff14;border-color:rgba(57,255,20,.4)}.theme-toggle-btn svg{width:16px;height:16px}.theme-toggle-btn .icon-sun,[data-theme=light] .theme-toggle-btn .icon-moon{display:none}[data-theme=light] .theme-toggle-btn .icon-sun{display:block}.lang-dropdown{position:relative}.lang-dropdown-btn{display:flex;align-items:center;gap:.3rem;height:36px;padding:0 .65rem;border-radius:8px;border:1px solid var(--border-strong);background:transparent;color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s ease,color .2s ease}.lang-dropdown-btn:hover{color:#39ff14;border-color:rgba(57,255,20,.4)}.lang-dropdown-btn svg{width:10px;height:10px;transition:transform .2s ease}.lang-dropdown-btn[aria-expanded=true] svg{transform:rotate(180deg)}.lang-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:140px;padding:.4rem;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 12px 32px -8px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}[data-theme=light] .lang-dropdown-menu{box-shadow:0 12px 32px -8px rgba(0,0,0,.15)}.lang-dropdown-menu a{display:flex;align-items:center;gap:.5rem;padding:.55rem .65rem;border-radius:6px;font-size:13px;color:var(--text);text-decoration:none;transition:background-color .15s ease,color .15s ease}.lang-dropdown-menu a:focus-visible,.lang-dropdown-menu a:hover{background:rgba(57,255,20,.1);color:#39ff14;outline:none}.lang-dropdown-menu a.is-active{color:#39ff14;font-weight:700}.admin-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border-strong);color:var(--text-muted);text-decoration:none;transition:border-color .2s ease,color .2s ease}.admin-link:hover{color:#39ff14;border-color:rgba(57,255,20,.4)}.admin-link svg{width:15px;height:15px}#main-nav.nav-scrolled{box-shadow:0 1px 0 var(--border),0 8px 24px -12px rgba(0,0,0,.15)}.logo-dark,[data-theme=dark] .logo-light{display:none}[data-theme=dark] .logo-dark{display:block}.hero-caret{display:inline-block;color:#39ff14;animation:caret-blink .9s step-end infinite;font-weight:400}@keyframes caret-blink{0%,to{opacity:1}50%{opacity:0}}.hero-grid{background-image:linear-gradient(hsla(0,0%,100%,.035) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.035) 1px,transparent 0);background-size:56px 56px;mask-image:radial-gradient(ellipse 65% 65% at 50% 45%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 45%,#000 20%,transparent 75%)}.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-\[var\(--border-strong\)\]:hover{border-color:var(--border-strong)}.hover\:border-neon:hover{--tw-border-opacity:1;border-color:rgb(57 255 20/var(--tw-border-opacity,1))}.hover\:border-neon\/30:hover{border-color:rgba(57,255,20,.3)}.hover\:border-neon\/40:hover{border-color:rgba(57,255,20,.4)}.hover\:border-red-400:hover{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.hover\:border-red-400\/30:hover{border-color:hsla(0,91%,71%,.3)}.hover\:border-white\/30:hover{border-color:hsla(0,0%,100%,.3)}.hover\:bg-\[var\(--bg-elevated\)\]:hover{background-color:var(--bg-elevated)}.hover\:bg-neon:hover{--tw-bg-opacity:1;background-color:rgb(57 255 20/var(--tw-bg-opacity,1))}.hover\:bg-neon-alt:hover{--tw-bg-opacity:1;background-color:rgb(0 255 102/var(--tw-bg-opacity,1))}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-\[var\(--text\)\]:hover{color:var(--text)}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-neon:hover{--tw-text-opacity:1;color:rgb(57 255 20/var(--tw-text-opacity,1))}.hover\:text-red-400:hover{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:border-neon:focus{--tw-border-opacity:1;border-color:rgb(57 255 20/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y: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:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:min-h-\[1\.3em\]{min-height:1.3em}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-10{gap:2.5rem}.sm\:py-0{padding-top:0;padding-bottom:0}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:hidden{display:none}.md\:aspect-\[3\/4\]{aspect-ratio:3/4}.md\:h-14{height:3.5rem}.md\:h-16{height:4rem}.md\:h-32{height:8rem}.md\:w-14{width:3.5rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-2{gap:.5rem}.md\:p-10{padding:2.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem}.md\:pb-20,.md\:py-20{padding-bottom:5rem}.md\:pt-48{padding-top:12rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1024px){.lg\:static{position:static}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:translate-x-0{--tw-translate-x:0px;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))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
[data-tilt-card]{transform-style:preserve-3d;will-change:transform}
/* will-change forces the browser to keep a dedicated GPU layer for every
card at all times, even though the tilt effect only ever runs on
fine-pointer/hover devices (see motion.js). On touch phones that's
pure overhead sitting on every .class-card alongside its blur — drop
it there so mobile isn't paying for an effect it never uses. */
@media (hover:none),(pointer:coarse){[data-tilt-card]{will-change:auto}}.glass{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-highlight);}
/* Same visual style, lighter blur radius on phones — a large blur radius
is the most GPU-expensive part of backdrop-filter, and with a dozen+
.glass cards on screen at once (each also fading in via GSAP on load)
this was a real contributor to the reload jank / unresponsive tap. */
@media (max-width:767px){.glass{backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);}}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-highlight),inset 0 0 60px rgba(57,255,106,.03);}.glass-nav{background:var(--glass-bg);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--glass-border);}.glass-shine{position:relative;overflow:hidden}.glass-shine::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-20deg);transition:left .8s ease}.glass-shine:hover::before{left:130%}
.hero-text-shadow{text-shadow:0 2px 24px rgba(0,0,0,.8),0 1px 4px rgba(0,0,0,.9)}.hero-vignette{background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(0,0,0,.32) 0%,transparent 70%)}
#hero-video{transition:opacity 1500ms ease;background-color:#000}
/* .object-contain is used on #hero-video but was missing from this
compiled Tailwind build (likely purged because the class wasn't
detected in whatever the build step scanned) — without this rule,
the browser fell back to object-fit's default (`fill`), which
stretches the portrait source video/poster to completely fill the
wide, short hero box, smearing the logo mark into a distorted
shape edge-to-edge. Defined manually here, matching Tailwind's own
utility, so it exists regardless of what the build step picks up. */
.object-contain{-o-object-fit:contain;object-fit:contain}
/* ============================================================
Photo-safe reveal — see initPhotoSafeReveal() in motion.js.
An ![]()
starts invisible (opacity 0) behind
its placeholder background, and only fades in once the browser
confirms the image has actually finished loading. This is what
stops a photo from flashing into view and then disappearing on
a slow connection or when a VPN is slow/blocked reaching a
third-party image host: the image's own load state — not a
scroll position or a fixed timer — is what controls whether it
ever becomes visible at all.
============================================================ */
img.photo-loading{opacity:0}
img.photo-loaded{opacity:1;transition:opacity .45s ease}
/* .photo-placeholder wraps every photo slot (trainer, review,
class, product, mosaic tile) and supplies the shimmer + icon
shown behind the ![]()
while it loads, and shown permanently in
place of the ![]()
when there's no photo yet or it failed to
load. Reuses the same shimmer keyframes as the existing
.skeleton utility above, so a loading photo looks visually
consistent with the rest of the site's own loading states
rather than introducing a second, different-looking pattern. */
.photo-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(57,255,20,.08),var(--bg-elevated));overflow:hidden}
.photo-placeholder::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.06) 50%,transparent 75%);background-size:200% 100%;animation:photo-placeholder-shimmer 1.8s ease infinite}
@keyframes photo-placeholder-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.photo-placeholder svg{position:relative;width:28px;height:28px;color:rgba(57,255,20,.35);flex-shrink:0}
/* Once a photo has confirmed-loaded, its placeholder's shimmer
animation is no longer doing anything useful (the ![]()
is on
top and opaque) — stopping it here avoids burning CPU/battery
on an animation nobody can see, which matters most on the exact
lower-end/slow-connection devices this whole fix targets. */
.photo-placeholder.photo-resolved::before{animation:none}
/* A resolved *empty* placeholder (no photo uploaded at all, distinct
from a photo that's still loading or failed) drops the shimmer
and dims slightly, so an intentionally-empty slot doesn't read as
"stuck loading forever" to a visitor. */
.photo-placeholder.photo-empty::before{animation:none}
.photo-placeholder.photo-empty{opacity:.7}
/* ================================================================
3D CARD SYSTEM — black base with a layered neon-green shadow,
used for trainer cards, class cards, pricing cards, product cards,
review cards, and branch cards on the public site. Built on top of
the existing --card-bg/--border tokens so it still respects
light/dark mode, but adds real depth (offset dark shadow + a thin
green glow layer + a subtle top-edge highlight, as if lit from
above) instead of the flat bordered boxes used before. A gentle
3D perspective tilt on hover reinforces the raised, physical feel
without being gimmicky — a few degrees, not a full flip.
Admin pages intentionally do NOT use this — kept plain for speed
and clarity there.
================================================================ */
.card-3d{
position:relative;
background:var(--card-bg);
border:1px solid var(--border-strong);
border-radius:1.25rem;
box-shadow:
0 1px 0 rgba(255,255,255,.05) inset,
0 -1px 0 rgba(0,0,0,.3) inset,
0 14px 30px -12px rgba(0,0,0,.55),
0 4px 10px -4px rgba(0,0,0,.4),
0 0 0 1px rgba(57,255,20,.05);
transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
transform:translateZ(0) perspective(800px) rotateX(0deg);
transform-style:preserve-3d;
}
.card-3d:hover{
transform:translateY(-7px) scale(1.015) perspective(800px) rotateX(1.5deg);
border-color:rgba(57,255,20,.35);
box-shadow:
0 1px 0 rgba(255,255,255,.07) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 28px 54px -16px rgba(0,0,0,.62),
0 10px 24px -6px rgba(0,0,0,.48),
0 0 36px -4px rgba(57,255,20,.28);
}
@media (prefers-reduced-motion: reduce){
.card-3d, .card-3d:hover{ transform:none; transition:box-shadow .35s ease, border-color .35s ease; }
}
[data-theme=light] .card-3d{
box-shadow:
0 1px 0 rgba(255,255,255,.55) inset,
0 -1px 0 rgba(0,0,0,.05) inset,
0 14px 30px -14px rgba(0,0,0,.22),
0 4px 10px -4px rgba(0,0,0,.12),
0 0 0 1px rgba(31,168,44,.06);
}
[data-theme=light] .card-3d:hover{
box-shadow:
0 1px 0 rgba(255,255,255,.65) inset,
0 -1px 0 rgba(0,0,0,.06) inset,
0 22px 44px -16px rgba(0,0,0,.25),
0 10px 20px -8px rgba(0,0,0,.15),
0 0 30px -6px rgba(31,168,44,.3);
}
/* ================================================================
LIQUID GLASS PILL — the frosted, softly-glowing badge style used
for the "3 Branches..." announcement and any similar short status
pill. Distinct from .glass/.glass-panel (which are for larger
surfaces): this one is rounded-full, has a moving highlight sheen,
and a soft green bloom that breathes slightly.
================================================================ */
.glass-pill{
position:relative;
background:var(--glass-bg);
backdrop-filter:blur(18px) saturate(180%);
-webkit-backdrop-filter:blur(18px) saturate(180%);
border:1px solid var(--glass-border);
box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 24px -4px rgba(57,255,20,.25);
overflow:hidden;
animation:glass-pill-breathe 4s ease-in-out infinite;
}
.glass-pill::before{
content:'';
position:absolute;
top:0; left:-60%;
width:40%; height:100%;
background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
transform:skewX(-20deg);
animation:glass-pill-sheen 5s ease-in-out infinite;
}
@keyframes glass-pill-sheen{
0%{ left:-60%; }
45%{ left:130%; }
100%{ left:130%; }
}
@keyframes glass-pill-breathe{
0%,100%{ box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 20px -6px rgba(57,255,20,.2); }
50%{ box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 32px -4px rgba(57,255,20,.4); }
}
@media (prefers-reduced-motion: reduce){
.glass-pill{ animation:none; }
.glass-pill::before{ animation:none; display:none; }
}
/* Social icon buttons on the Contact page — small glass discs
consistent with the liquid-glass pill/card language used elsewhere,
rather than plain flat circles. */
.social-glass-icon{
background:var(--glass-bg);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border:1px solid var(--glass-border);
box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.social-glass-icon:hover{
transform:translateY(-2px);
border-color:rgba(57,255,20,.4);
box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 16px -2px rgba(57,255,20,.35);
}
/* ================================================================
DECORATIVE ACCENT FONTS — used sparingly for specific stylized
moments (never body text). Akronim gets an actual layered
text-shadow to read as carved/shaded wood-type rather than a flat
web font; Cookie is a soft handwritten accent; Bodoni Moda is a
high-contrast editorial serif for a single standout word or line.
================================================================ */
.font-wood{
/* Akronim has no Ge'ez glyphs, so Amharic text falls back to the
site's own display font automatically — still on-brand (bold
uppercase neon-green), just without the carved-wood texture,
which only Latin-script text gets. */
font-family:'Akronim', var(--font-display), cursive;
font-weight:400;
color:#39ff14;
text-shadow:
1px 1px 0 #0d3a14,
2px 2px 0 #0a2e10,
3px 3px 0 #072209,
4px 4px 6px rgba(0,0,0,.5);
letter-spacing:.02em;
}
[data-theme=light] .font-wood{
color:#178a22;
text-shadow:
1px 1px 0 #c8f5cc,
2px 2px 0 #a8e8ae,
3px 3px 0 #8ad990,
4px 4px 6px rgba(0,0,0,.15);
}
.font-script{
/* Same Ge'ez fallback consideration as .font-wood above. */
font-family:'Cookie', var(--font-display), cursive;
font-weight:400;
letter-spacing:.01em;
}
.font-editorial{
font-family:'Bodoni Moda', serif;
font-optical-sizing:auto;
font-weight:600;
font-style:italic;
}
/* Social feed cards on the Contact page — platform icon + label,
card-3d base with a subtle lift on hover so they read as clickable
without needing extra border/ring changes. */
.social-feed-card{ transition:transform .25s ease; }
.social-feed-card:hover{ transform:translateY(-3px); }
/* The mobile drawer uses .glass-panel for the blur/shine effect, but
glass-panel's background is intentionally translucent (55% white
in light mode) so it can sit over photo/video content elsewhere.
Behind a bright hero (lots of neon green, or a video mid-frame),
that translucency let page content tint through strongly enough
to wash out the drawer's own low-contrast muted text ("Dark Mode"
became nearly unreadable in light mode over a green hero). This
class layers a near-opaque, theme-aware background UNDER the
existing glass blur so the drawer's own text always has reliable
contrast, regardless of what's scrolling behind it. */
.mobile-menu-solid{
background-image: linear-gradient(var(--bg-elevated), var(--bg-elevated));
background-blend-mode: normal;
}
[data-theme="light"] .mobile-menu-solid{
background-color: rgba(255,255,255,.94);
}
[data-theme="dark"] .mobile-menu-solid{
background-color: rgba(10,20,14,.92);
}
/* [data-tilt-card] gets a live rotateX/rotateY transform from GSAP on
hover (see motion.js). Without these hints, browsers can visibly
soften/blur the raster photo inside the card during the 3D
transform — backface-visibility + a transform-only will-change
keeps the layer crisp instead of resampling it on every frame. */
[data-tilt-card]{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
transform: translateZ(0);
}
[data-tilt-card] img{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* ============================================================
Nav redesign — smoother mobile drawer stagger, animated desktop
dropdown polish, and social icon buttons shared by the header
drawer, footer, contact page, and the new standalone Social page.
============================================================ */
/* Mobile drawer nav links + CTA/theme rows reveal with a staggered
fade-and-rise as the drawer opens, instead of appearing instantly
the moment the drawer finishes sliding in. Delays are set inline
per-item via --stagger-delay so markup stays simple (see
includes/header.php). Respects reduced-motion. */
#mobile-menu [data-drawer-item]{
opacity: 0;
transform: translateY(10px);
transition: opacity .35s ease, transform .35s ease;
transition-delay: var(--stagger-delay, 0ms);
}
#mobile-menu.is-open [data-drawer-item]{
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
#mobile-menu [data-drawer-item]{ transition: none; opacity: 1; transform: none; }
}
/* Desktop nav links get a soft underline sweep on hover instead of
just a background swap, for a more deliberate "designed" feel. */
#main-nav .nav-desktop-link{ position: relative; overflow: hidden; }
#main-nav .nav-desktop-link:not(.nav-desktop-link-active)::after{
content: '';
position: absolute;
left: 14px; right: 14px; bottom: 6px;
height: 2px;
background: #39ff14;
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
#main-nav .nav-desktop-link:not(.nav-desktop-link-active):hover::after{
transform: scaleX(1);
}
/* Round social icon buttons — used in the mobile drawer, footer,
contact page, and the standalone Social page. Frosted glass base
matching the rest of the site's glass-panel language, with a neon
glow ring on hover instead of a flat color swap. */
.social-glass-icon{
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.social-glass-icon:hover{
border-color: rgba(57,255,20,.5);
box-shadow: 0 0 0 3px rgba(57,255,20,.08), 0 0 18px rgba(57,255,20,.25);
transform: translateY(-2px);
}
/* Slow, ambient rotation for the decorative logo-mark watermark used
as a background texture (Social page hero, and the post-hero
section redesign). Extremely low opacity + slow spin so it reads
as ambient texture, never as a distracting moving element. */
/* Decorative logo-mark watermark used as ambient background texture
(Social page hero, and the .section-brand-texture sections). Per
feedback, this must never spin and must never read as a crisp
"logo stuck in the corner" — it should look like a soft brand
texture behind the content, nothing more. Heavy blur + very low
opacity + oversized relative to its container accomplishes that:
at this blur radius the M-mark and ring text are no longer legible
as a logo, just an ambient glow shape. */
.logo-watermark{
filter: blur(18px);
}
/* ============================================================
Public review submission form (services.php) — star rating input
and modal panel, styled to match includes/modal.php's existing
glass-panel contact modal so the two feel like the same system.
============================================================ */
.review-star-input{
display: inline-flex;
gap: .35rem;
direction: ltr;
}
.review-star-input button{
background: none;
border: none;
padding: 2px;
cursor: pointer;
color: var(--border-strong);
transition: color .15s ease, transform .15s ease;
line-height: 0;
}
.review-star-input button.is-filled,
.review-star-input button:hover,
.review-star-input button:hover ~ button{
color: #39ff14;
}
.review-star-input button:active{ transform: scale(.9); }
/* ============================================================
Post-hero section redesign — subtle brand-mark background texture
reused across the branches/gallery/quick-link sections so they
share one consistent "premium" backdrop instead of a flat color.
============================================================ */
.section-brand-texture{
position: relative;
isolation: isolate;
}
.section-brand-texture::before{
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: url('../images/logo-badge-dark.png');
background-repeat: no-repeat;
background-position: center;
background-size: min(70vw, 900px);
opacity: .035;
filter: blur(14px);
pointer-events: none;
}
[data-theme="light"] .section-brand-texture::before{
background-image: url('../images/logo-badge-light.png');
opacity: .05;
}
/* ============================================================
Hero-style page-intro glow — a bolder, more deliberate green
radial glow for the top of secondary pages (Classes, Services,
Social), replacing a flat bg-[var(--bg)] with something that reads
as designed rather than empty. Needs the section to have
position:relative + overflow:hidden (the ::before is what actually
paints the glow, kept behind the real content via z-index). Bolder
than .section-brand-texture on purpose — this is the very first
thing visible on the page, so it should read as an intentional
design choice, not a barely-there hint.
============================================================ */
.hero-glow{ position: relative; }
.hero-glow::before{
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse 75% 60% at 20% 0%, rgba(57,255,20,.28), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 30%, rgba(46,232,143,.18), transparent 62%);
}
[data-theme="light"] .hero-glow::before{
background-image:
radial-gradient(ellipse 75% 60% at 20% 0%, rgba(31,168,44,.16), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 30%, rgba(23,138,34,.10), transparent 62%);
}
/* Content sitting on top of the glow needs its own `relative z-10`
(or similar) to clear the ::before layer — every page this class
is used on (classes.php, services.php, social.php) already wraps
its hero content that way, so no automatic child selector is
needed here; adding one risks fighting a page's own absolutely-
positioned decorative layers, like social.php's watermark div. */
/* ============================================================
Page-wide ambient background — requested per feedback: dark mode
should feel like a dark canvas with a soft light-green glow (not
flat black), light mode should be clean white with the faintest
green tint, rather than each section carrying its own separate
flat background color. Applied to with background-attachment:
fixed so it reads as one continuous canvas behind the whole page as
you scroll, rather than visibly repeating or shifting per section.
Individual sections still set their own bg-[var(--bg)] / bg-[var(
--bg-alt)] classes on top of this — those are mostly near-transparent
in practice since --bg/--bg-alt are themselves very close to black
(dark) or white (light), so this glow shows through everywhere.
============================================================ */
body{
background-image:
radial-gradient(ellipse 80% 55% at 15% -8%, rgba(57,255,20,.22), transparent 62%),
radial-gradient(ellipse 70% 50% at 100% 15%, rgba(46,232,143,.14), transparent 60%),
radial-gradient(ellipse 65% 45% at 85% 95%, rgba(57,255,20,.12), transparent 65%);
background-attachment: fixed;
background-repeat: no-repeat;
}
[data-theme="light"] body{
background-image:
radial-gradient(ellipse 80% 55% at 15% -8%, rgba(31,168,44,.13), transparent 62%),
radial-gradient(ellipse 70% 50% at 100% 15%, rgba(23,138,34,.08), transparent 60%),
radial-gradient(ellipse 65% 45% at 85% 95%, rgba(31,168,44,.07), transparent 65%);
}