*,: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: }*,: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}.-bottom-16{bottom:-4rem}.-left-12{left:-3rem}.-right-24{right:-6rem}.-top-24{top:-6rem}.-top-3{top:-.75rem}.bottom-10{bottom:2.5rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.left-1\/3{left:33.333333%}.left-10{left:2.5rem}.left-8{left:2rem}.right-0{right:0}.right-10{right:2.5rem}.right-8{right:2rem}.top-0{top:0}.top-1\/2{top:50%}.top-16{top:4rem}.top-20{top:5rem}.z-10{z-index:10}.z-50{z-index:50}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.mx-auto{margin-left:auto;margin-right:auto}.-mr-1{margin-right:-.25rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.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-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-40{height:10rem}.h-48{height:12rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-72{height:18rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-2{width:.5rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.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-y-1\/3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/3{--tw-translate-y:-33.333333%}.translate-x-1\/3{--tw-translate-x:33.333333%}.transform,.translate-x-1\/3{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))}.scroll-mt-20{scroll-margin-top:5rem}.scroll-mt-24{scroll-margin-top:6rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.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-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.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-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-2{row-gap:.5rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-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))}.self-start{align-self:flex-start}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.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}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-amber-200\/80{border-color:hsla(48,97%,77%,.8)}.border-blue-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}.border-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.border-primary\/25{border-color:rgba(37,99,235,.25)}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/40{border-color:hsla(0,0%,100%,.4)}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-400\/10{background-color:rgba(96,165,250,.1)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-cyan-100{--tw-bg-opacity:1;background-color:rgb(207 250 254/var(--tw-bg-opacity,1))}.bg-cyan-600{--tw-bg-opacity:1;background-color:rgb(8 145 178/var(--tw-bg-opacity,1))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity,1))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1))}.bg-indigo-400\/10{background-color:rgba(129,140,248,.1)}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-primary\/5{background-color:rgba(37,99,235,.05)}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}.bg-sky-400\/10{background-color:rgba(56,189,248,.1)}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity,1))}.bg-violet-600{--tw-bg-opacity:1;background-color:rgb(124 58 237/var(--tw-bg-opacity,1))}.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\/80{background-color:hsla(0,0%,100%,.8)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.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))}.from-amber-50{--tw-gradient-from:#fffbeb var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,251,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,246,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-sky-50{--tw-gradient-to:rgba(240,249,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f0f9ff var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-indigo-50{--tw-gradient-to:#eef2ff var(--tw-gradient-to-position)}.to-orange-50{--tw-gradient-to:#fff7ed var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:.5rem}.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\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.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-20{padding-top:5rem;padding-bottom:5rem}.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}.pb-10{padding-bottom:2.5rem}.pb-20{padding-bottom:5rem}.pb-8{padding-bottom:2rem}.pt-24{padding-top:6rem}.pt-28{padding-top:7rem}.text-left{text-align:left}.text-center{text-align:center}.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-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-amber-900{--tw-text-opacity:1;color:rgb(120 53 15/var(--tw-text-opacity,1))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-sky-100\/90{color:rgba(224,242,254,.9)}.text-sky-200{--tw-text-opacity:1;color:rgb(186 230 253/var(--tw-text-opacity,1))}.text-sky-200\/80{color:rgba(186,230,253,.8)}.text-sky-200\/90{color:rgba(186,230,253,.9)}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity,1))}.text-sky-600{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity,1))}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-violet-600{--tw-text-opacity:1;color:rgb(124 58 237/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.no-underline{text-decoration-line:none}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-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)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-blue-500\/25{--tw-shadow-color:rgba(59,130,246,.25);--tw-shadow:var(--tw-shadow-colored)}.blur{--tw-blur:blur(8px)}.blur,.blur-2xl{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-2xl{--tw-blur:blur(40px)}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl,.drop-shadow{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{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.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-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:border-amber-300:hover{--tw-border-opacity:1;border-color:rgb(252 211 77/var(--tw-border-opacity,1))}.hover\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.hover\:border-primary\/40:hover{border-color:rgba(37,99,235,.4)}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-primaryDark:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-slate-300:hover{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.hover\:shadow-2xl:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-amber-100\/50:hover{--tw-shadow-color:hsla(48,96%,89%,.5);--tw-shadow:var(--tw-shadow-colored)}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem}.group:hover .group-hover\:translate-x-0\.5,.group:hover .group-hover\:translate-x-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:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem}.dark\:border-amber-800\/50:is(.dark *){border-color:rgba(146,64,14,.5)}.dark\:border-blue-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity,1))}.dark\:border-slate-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.dark\:border-slate-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity,1))}.dark\:bg-amber-900\/50:is(.dark *){background-color:rgba(120,53,15,.5)}.dark\:bg-amber-950\/30:is(.dark *){background-color:rgba(69,26,3,.3)}.dark\:bg-amber-950\/40:is(.dark *){background-color:rgba(69,26,3,.4)}.dark\:bg-blue-900\/50:is(.dark *){background-color:rgba(30,58,138,.5)}.dark\:bg-slate-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.dark\:bg-slate-800\/80:is(.dark *){background-color:rgba(30,41,59,.8)}.dark\:bg-slate-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.dark\:bg-slate-900\/90:is(.dark *){background-color:rgba(15,23,42,.9)}.dark\:bg-slate-900\/95:is(.dark *){background-color:rgba(15,23,42,.95)}.dark\:bg-slate-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.dark\:from-amber-950\/40:is(.dark *){--tw-gradient-from:rgba(69,26,3,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(69,26,3,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:to-orange-950\/30:is(.dark *){--tw-gradient-to:rgba(67,20,7,.3) var(--tw-gradient-to-position)}.dark\:text-amber-100\/90:is(.dark *){color:hsla(48,96%,89%,.9)}.dark\:text-amber-200:is(.dark *){--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.dark\:text-amber-300:is(.dark *){--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.dark\:text-amber-400:is(.dark *){--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.dark\:text-emerald-400:is(.dark *){--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.dark\:text-slate-100:is(.dark *){--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.dark\:text-slate-200:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.dark\:text-slate-300:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dark\:text-slate-400:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:text-slate-600:is(.dark *){--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:hover\:bg-blue-950\/40:hover:is(.dark *){background-color:rgba(23,37,84,.4)}.dark\:hover\:bg-slate-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\:hover\:shadow-none:hover:is(.dark *){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.sm\:mx-0{margin-left:0;margin-right:0}.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\:justify-start{justify-content:flex-start}.sm\:gap-2{gap:.5rem}.sm\:gap-4{gap:1rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}.sm\:py-4{padding-top:1rem;padding-bottom:1rem}.sm\:text-left{text-align:left}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:mb-10{margin-bottom:2.5rem}.md\:mb-12{margin-bottom:3rem}.md\:mb-14{margin-bottom:3.5rem}.md\:mt-12{margin-top:3rem}.md\:mt-16{margin-top:4rem}.md\:mt-3{margin-top:.75rem}.md\:flex{display:flex}.md\:hidden{display:none}.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\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:space-y-14>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3.5rem*var(--tw-space-y-reverse))}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:pb-10{padding-bottom:2.5rem}.md\:pb-12{padding-bottom:3rem}.md\:pb-28{padding-bottom:7rem}.md\:pt-28{padding-top:7rem}.md\:pt-36{padding-top:9rem}.md\:text-right{text-align:right}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.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-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:gap-9{gap:2.25rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}
html.dark :focus-visible {
  outline-color: #60a5fa;
}

.btn-primary:focus-visible,
a.bg-primary:focus-visible,
#back-to-top:focus-visible,
#theme-toggle:focus-visible,
#lang-toggle:focus-visible,
#mobile-menu-btn:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}
html.dark .btn-primary:focus-visible,
html.dark a.bg-primary:focus-visible,
html.dark #back-to-top:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.45);
}

#back-to-top {
  right: calc(1.25rem + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

html.dark .text-slate-400 { color: #94a3b8 !important; }   
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark footer .text-slate-500,
html.dark footer a { color: #94a3b8; }
html.dark footer a:hover { color: #cbd5e1; }

@media (prefers-reduced-motion: reduce) {
  :focus-visible { transition: none; }
}

html.is-tab-hidden,
html.is-tab-hidden * {
  animation-play-state: paused !important;
}

html.dark a.bg-primary,
html.dark .bg-primary {
  background-color: #3b82f6 !important;
  box-shadow: 0 4px 14px -4px rgba(59, 130, 246, 0.45);
}
html.dark a.bg-primary:hover,
html.dark .bg-primary:hover,
html.dark a.hover\:bg-primaryDark:hover {
  background-color: #2563eb !important;
  box-shadow: 0 8px 22px -6px rgba(59, 130, 246, 0.55);
}

html.dark .btn-primary:not(.bg-white) {
  box-shadow: 0 4px 16px -4px rgba(59, 130, 246, 0.4);
}
html.dark .btn-primary:not(.bg-white):hover {
  box-shadow: 0 12px 28px -8px rgba(59, 130, 246, 0.55);
}

html.dark .btn-outline {
  border-color: rgba(148, 163, 184, 0.45) !important;
  color: #e2e8f0 !important;
}
html.dark .btn-outline:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.65) !important;
  color: #f8fafc !important;
}

html.dark .card-hover {
  border-color: #334155 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}
html.dark .card-hover:hover {
  border-color: rgba(96, 165, 250, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.12),
    0 20px 40px -16px rgba(0, 0, 0, 0.55),
    0 12px 24px -12px rgba(37, 99, 235, 0.25) !important;
  transform: translateY(-4px);
}

html.dark .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
html.dark .shadow,
html.dark .shadow-md {
  --tw-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
html.dark .shadow-lg {
  --tw-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(37, 99, 235, 0.15);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
html.dark .shadow-xl {
  --tw-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -6px rgba(37, 99, 235, 0.18);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

html.dark .border-slate-100,
html.dark .border-slate-200 {
  border-color: #334155 !important;
}
html.dark .border-slate-300 {
  border-color: #475569 !important;
}

html.dark .bg-white {
  background-color: #1e293b !important;
}
html.dark .btn-primary.bg-white,
html.dark a.btn-primary.bg-white,
html.dark #hero-download-btn {
  background-color: #ffffff !important;
  color: #2563eb !important;
}
html.dark .btn-primary.bg-white:hover,
html.dark a.btn-primary.bg-white:hover,
html.dark #hero-download-btn:hover {
  background-color: #f8fafc !important;
  color: #1d4ed8 !important;
}
html.dark .bg-slate-50 {
  background-color: #0f172a !important;
}
html.dark .bg-slate-100 {
  background-color: #1e293b !important;
}

html.dark .tag-pop,
html.dark span.rounded-full.bg-white,
html.dark .rounded-full.border {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html.dark .tag-pop:hover,
html.dark span.rounded-full.bg-white:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}

html.dark .dl-card,
html.dark .guide-card,
html.dark .flow-card {
  border-color: #334155 !important;
  background-color: #1e293b !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark .dl-card:hover,
html.dark .guide-card:hover,
html.dark .flow-card:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.1),
    0 16px 32px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark nav.scrolled {
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.dark #back-to-top {
  background: #3b82f6 !important;
  box-shadow: 0 8px 28px -6px rgba(59, 130, 246, 0.55), 0 0 0 1px rgba(147, 197, 253, 0.15) !important;
}
html.dark #back-to-top:hover {
  background: #60a5fa !important;
  box-shadow: 0 12px 32px -6px rgba(96, 165, 250, 0.6) !important;
}

html.dark #theme-toggle:hover,
html.dark #lang-toggle:hover {
  background: #1e293b !important;
  color: #93c5fd !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

html.dark input,
html.dark textarea,
html.dark select {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark ::selection {
  background: rgba(59, 130, 246, 0.35);
  color: #f8fafc;
}
.nav-contact-wrap{position:relative;}
.nav-contact-wrap > a{display:none;}
@media (min-width:1024px){
  .nav-contact-wrap > a{display:flex;}
}
.suucar-bot-pop{
  --bot-card:#fff; --bot-face:#ececee; --bot-ink:#111827; --bot-muted:#6b7280;
  --bot-orb:#1d4ed8; --bot-eye:#f8fafc; --bot-btn:#2563eb; --bot-btn-text:#fff; --bot-head:#0f172a;
  position:fixed; top:4.25rem; right:1rem; width:336px; z-index:80;
  display:none; pointer-events:none;
}
html.dark .suucar-bot-pop{
  --bot-card:#111827; --bot-face:#1e293b; --bot-ink:#f8fafc; --bot-muted:#94a3b8;
  --bot-orb:#3b82f6; --bot-eye:#f8fafc; --bot-btn:#2563eb; --bot-btn-text:#fff; --bot-head:#e2e8f0;
}
.suucar-bot-pop.is-open{display:block; pointer-events:auto;}
.suucar-bot-pop.is-leaving .suucar-bot-card{animation:suucarBotOut .26s ease-in both;}
.suucar-bot-card{
  position:relative; background:var(--bot-card); color:var(--bot-ink);
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 28px -10px rgba(15,23,42,.16);
  transform-origin:var(--tab-x, 50%) 0;
}
html.dark .suucar-bot-card{
  border-color:rgba(255,255,255,.10);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.55);
}
.suucar-bot-pop.is-open .suucar-bot-card{
  animation:suucarBotIn .92s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes suucarBotIn{
  0%{opacity:0; transform:translateY(-16px) scale(.92);}
  42%{opacity:1; transform:translateY(6px) scale(1.035);}
  68%{transform:translateY(-3px) scale(.992);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes suucarBotOut{
  0%{opacity:1; transform:translateY(0) scale(1);}
  100%{opacity:0; transform:translateY(-10px) scale(.96);}
}
.suucar-bot-tab{
  position:absolute; top:-8px; left:var(--tab-x, 50%); transform:translateX(-50%);
  width:16px; height:9px;
  background:var(--bot-face);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.suucar-bot-face{
  height:168px; display:grid; place-items:center; padding-top:8px;
  background:var(--bot-face); border-radius:21px 21px 0 0;
  overflow:visible; --fg:var(--bot-head); --bg:var(--bot-face);
}
.suucar-bot-mount{width:112px; height:112px; overflow:visible;}
.suucar-bot-mount svg,.suucar-bot-mark{width:100%; height:auto; display:block; overflow:visible!important; user-select:none;}
.suucar-bot-mark__head{fill:var(--fg);}
.suucar-bot-mark__eye{fill:var(--bg);}
.suucar-bot-copy{padding:14px 18px 16px;}
.suucar-bot-copy h2{margin:0 0 8px; font-size:1.02rem; font-weight:650;}
.suucar-bot-copy p{margin:0 0 16px; color:var(--bot-muted); font-size:.84rem; line-height:1.55;}
.suucar-bot-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.suucar-bot-ignore{border:0; background:none; color:var(--bot-muted); font-size:.84rem; cursor:pointer; padding:6px 0;}
.suucar-bot-ignore:hover{color:var(--bot-ink);}
.suucar-bot-cta{
  border:0; border-radius:999px; background:var(--bot-btn); color:var(--bot-btn-text) !important;
  font-weight:700; padding:8px 14px; text-decoration:none; font-size:.84rem; cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.suucar-bot-cta:hover{transform:translateY(-1px); filter:brightness(1.08); color:var(--bot-btn-text) !important;}
.suucar-bot-pop.is-mobile{
  top:auto !important; bottom:max(16px, env(safe-area-inset-bottom, 0px));
  left:16px; right:16px; width:auto; max-width:312px;
  margin:0 auto; transform:none;
}
.suucar-bot-pop.is-mobile .suucar-bot-tab{display:none;}
.suucar-bot-pop.is-mobile .suucar-bot-face{height:148px; padding-top:10px; overflow:visible;}
.suucar-bot-pop.is-mobile .suucar-bot-mount{width:112px; height:112px;}
.suucar-bot-pop.is-mobile .suucar-bot-copy{padding:12px 14px 14px;}
.suucar-bot-pop.is-mobile .suucar-bot-copy h2{font-size:.95rem; margin-bottom:6px;}
.suucar-bot-pop.is-mobile .suucar-bot-copy p{font-size:.78rem; margin-bottom:12px; line-height:1.45;}
.suucar-bot-pop.is-mobile .suucar-bot-cta{padding:7px 12px; font-size:.78rem;}
.suucar-bot-pop.is-mobile .suucar-bot-card{transform-origin:50% 100%; overflow:visible;}

.site-announce {
    position: fixed;
    left: 0; right: 0;
    top: var(--site-announce-top, 3.5rem);
    z-index: 45;
    display: none;
    pointer-events: none;
  }
  .site-announce.is-visible {
    display: block;
    pointer-events: auto;
  }
  .site-announce-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.75rem 0.28rem 0.85rem;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(148,163,184,0.28);
    background: linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(239,246,255,0.98) 55%, rgba(238,242,255,0.97) 100%);
    box-shadow: 0 4px 14px -8px rgba(37, 99, 235, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  html.dark .site-announce-inner {
    background: linear-gradient(90deg, rgba(15,23,42,0.96) 0%, rgba(30,41,59,0.97) 100%);
    border-bottom-color: rgba(71,85,105,0.55);
    box-shadow: 0 6px 16px -10px rgba(0,0,0,0.55);
  }
  .site-announce-badge {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1d4ed8;
    background: #dbeafe;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    line-height: 1.2;
  }
  html.dark .site-announce-badge {
    color: #93c5fd;
    background: rgba(30, 64, 175, 0.45);
  }
  .site-announce-viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    height: 1.35rem;
    min-width: 0;
  }
  .site-announce-track {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(100%, -50%);
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 500;
    color: #334155;
    line-height: 1.35;
    will-change: transform;
  }
  html.dark .site-announce-track { color: #e2e8f0; }
  .site-announce-close {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-announce-close:hover {
    background: rgba(148,163,184,0.2);
    color: #0f172a;
  }
  html.dark .site-announce-close { color: #94a3b8; }
  html.dark .site-announce-close:hover {
    background: rgba(148,163,184,0.15);
    color: #f8fafc;
  }
  body.has-site-announce section.gradient-bg {
    padding-top: var(--hero-pad-top, 7.5rem) !important;
  }
  @media (min-width: 768px) {
    .site-announce-track { font-size: 0.82rem; }
    .site-announce-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
  }
  @media (max-width: 640px) {
    .site-announce {
      
      top: var(--site-announce-top, 3.25rem);
    }
    .site-announce-inner {
      padding: 0.28rem 0.55rem 0.28rem max(0.6rem, env(safe-area-inset-left));
      padding-right: max(0.55rem, env(safe-area-inset-right));
      gap: 0.35rem;
    }
    .site-announce-track { font-size: 0.72rem; }
    .site-announce-viewport { height: 1.35rem; }
    .site-announce-badge { font-size: 0.6rem; padding: 0.12rem 0.4rem; }
    .site-announce-close {
      width: 2rem;
      height: 2rem;
      font-size: 1.05rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-announce-track {
      position: relative;
      transform: none !important;
      left: 0; top: 0;
      white-space: normal;
    }
    .site-announce-viewport { height: auto; }
  }

  .site-announce-viewport { cursor: default; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
               "WenQuanYi Micro Hei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
html.i18n-ready body,
html[data-lang="zh"] body,
html[lang="zh-CN"] body,
html[lang="en"] body { opacity: 1; }

.demo-desc { white-space: pre-line; }

.nav-desk,
.nav-desk-cta { display: none !important; }
.nav-burger { display: inline-flex !important; align-items: center; justify-content: center; }
nav .nav-inner { max-width: none; width: 100%; position: relative; }
nav .nav-brand { flex-shrink: 0; z-index: 2; }
nav .nav-tools { margin-left: auto; flex-shrink: 0; z-index: 2; }
footer .footer-inner { max-width: none; width: 100%; }
@media (min-width: 1024px) {
  nav .nav-desk {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
  .nav-desk,
  .nav-desk-cta { display: flex !important; }
  .nav-burger { display: none !important; }
  .nav-mobile-panel { display: none !important; }
}

.pt-20 { padding-top: 5rem; }
.pb-7 { padding-bottom: 1.75rem; }
.pb-9 { padding-bottom: 2.25rem; }
.pb-14 { padding-bottom: 3.5rem; }
.mb-0 { margin-bottom: 0; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .md\:p-7 { padding: 1.75rem; }
  .md\:pt-24 { padding-top: 6rem; }
  .md\:pt-32 { padding-top: 8rem; }
  .md\:pb-9 { padding-bottom: 2.25rem; }
  .md\:pb-16 { padding-bottom: 4rem; }
  .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .md\:space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }
}
@media (min-width: 1024px) {
  .lg\:text-left { text-align: left; }
}

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #818cf8);
  transition: width 0.08s linear;
  pointer-events: none;
}

.gradient-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #1e40af 100%);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}
html.dark .gradient-bg {
  background: linear-gradient(135deg, #020617 0%, #0b1224 42%, #172554 100%);
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.card-hover {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.icon-svg, .icon-svg-sm, .icon-svg-lg, .icon-svg-xl {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  pointer-events: none;
}
.icon-svg { width: 1.5rem; height: 1.5rem; }
.icon-svg-lg { width: 1.75rem; height: 1.75rem; }
.icon-svg-sm { width: 1rem; height: 1rem; }

#theme-toggle, #lang-toggle {
  width: 2.25rem; height: 2.25rem;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #475569;
  transition: background 0.2s, color 0.2s;
  border: none; cursor: pointer; background: transparent;
}
#theme-toggle:hover, #lang-toggle:hover { background: #f1f5f9; color: #0f172a; }
html.dark #theme-toggle, html.dark #lang-toggle { color: #94a3b8; }
html.dark #theme-toggle:hover, html.dark #lang-toggle:hover { background: #1e293b; color: #f1f5f9; }
#lang-toggle { font-size: 0.75rem; font-weight: 700; }
#theme-toggle .icon-sun { display: none; }
html.dark #theme-toggle .icon-moon { display: none; }
html.dark #theme-toggle .icon-sun { display: block; }

button.faq-q {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.copy-btn {
  margin-top: 0.5rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
html.dark .copy-btn {
  border-color: #1e3a8a;
  background: rgba(30, 58, 138, 0.4);
  color: #93c5fd;
}

.hero-map-wrap { margin-top: 1.5rem; }
.hero-map-wrap .suucar-map-stage {
  border-radius: 1.15rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero-with-map {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.55fr);
    gap: 1.25rem 1.75rem;
    align-items: center;
    text-align: left;
  }
  .hero-with-map .hero-desc { margin-left: 0; margin-right: 0; max-width: 32rem; }
  .hero-with-map .hero-btns { justify-content: flex-start; }
  .hero-map-wrap { margin-top: 0; }
  
}
@media (min-width: 1280px) {
  .hero-with-map {
    grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.7fr);
    gap: 1.5rem 2rem;
  }
  
}

.map-skeleton {
  width: 100%;
  aspect-ratio: 860 / 480;
  border-radius: 1rem;
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: mapSkel 1.2s ease-in-out infinite;
}
html.dark .map-skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
@keyframes mapSkel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.map-disclaimer {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.78);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .map-skeleton, .gradient-bg, .hero-fx-marks { animation: none; }
}

.tut-module {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 1.15rem;
  padding: 1rem 1.1rem 1.1rem;
}
html.dark .tut-module {
  border-color: #334155;
  background: #0f172a;
}
.tut-module-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.tut-module-index {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1d4ed8;
  background: #dbeafe;
}
html.dark .tut-module-index {
  color: #93c5fd;
  background: rgba(30, 64, 175, 0.45);
}
.tut-module-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
html.dark .tut-module-title { color: #f8fafc; }
.tut-module-lead {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
}
.tut-module-link {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  white-space: nowrap;
}
html.dark .tut-module-link {
  color: #93c5fd;
  border-color: #1e3a8a;
  background: rgba(30, 58, 138, 0.35);
}
.tut-module-badge {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}
html.dark .tut-module-badge {
  color: #94a3b8;
  background: #1e293b;
}
.tut-module-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 640px) {
  .tut-module-grid { grid-template-columns: 1fr 1fr; }
}
.tut-module-grid li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 0.7rem 0.8rem;
}
html.dark .tut-module-grid li {
  background: #1e293b;
  border-color: #334155;
}
.tut-step-n {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: #2563eb;
}
.tut-module-grid h3 {
  margin: 0 0 0.15rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
}
html.dark .tut-module-grid h3 { color: #f1f5f9; }
.tut-module-grid p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #64748b;
}
.tut-module--soon {
  opacity: 0.78;
  background: repeating-linear-gradient(
    -12deg,
    #f8fafc,
    #f8fafc 8px,
    #f1f5f9 8px,
    #f1f5f9 16px
  );
}
html.dark .tut-module--soon {
  background: #0f172a;
}
@media (max-width: 640px) {
  .tut-module-head { flex-wrap: wrap; }
  .tut-module-link, .tut-module-badge { margin-left: 2.85rem; }
}

.hero-fx{position:absolute;left:0;right:0;bottom:0;height:88px;pointer-events:none;overflow:hidden;z-index:0;}
.hero-fx-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.16),transparent);}
.hero-fx-strip{position:absolute;left:0;right:0;bottom:0;height:28px;background:linear-gradient(rgba(30,58,138,.10),rgba(15,23,42,.14));}
.hero-fx-strip::before,.hero-fx-strip::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(186,230,253,.16);}
.hero-fx-strip::before{top:6px;}
.hero-fx-strip::after{bottom:6px;}
.hero-fx-marks{position:absolute;left:0;top:50%;width:200%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(125,211,252,.35) 0 22px,transparent 22px 48px);opacity:.4;animation:heroMarks 2.4s linear infinite;will-change:transform;}
@keyframes heroMarks{to{transform:translate3d(-48px,0,0);}}
.hero-note{position:relative;z-index:2;}

.hero-cta{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  width:100%;
  max-width:100%;
}
.hero-cta .hero-btns{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:22rem;
  gap:.75rem;
}
.hero-cta .hero-note{
  margin:0;
  text-align:center;
  line-height:1.55;
  padding:0 .25rem;
}
@media (min-width:640px){
  .hero-cta .hero-btns{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    max-width:none;
    width:auto;
  }
}
@media (min-width:1024px){
  .hero-cta{
    width:auto;
    align-items:center;
  }
  .hero-with-map .hero-cta .hero-btns{justify-content:center;}
}
@media (max-width:379px){
  .hero-cta .hero-btns a{padding-left:1.1rem;padding-right:1.1rem;font-size:.9rem;}
  .hero-cta .hero-note{font-size:.75rem;}
}

section.gradient-bg > .max-w-7xl{padding-bottom:1.25rem;}
@media (max-width:767px){
  .hero-fx{height:64px;}
  .hero-fx-strip{height:22px;}
  section.gradient-bg > .max-w-7xl{padding-bottom:2rem;}
}
@media (prefers-reduced-motion:reduce){
  .hero-fx-marks{animation:none;}
}

.cpv-card{position:relative;width:min(392px,100%);background:#fff;border-radius:24px;box-shadow:0 18px 50px -24px rgba(37,99,235,.28);overflow:visible;}
.cpv-tab{position:absolute;top:50%;right:-9px;width:10px;height:18px;background:#fff;transform:translateY(-50%);clip-path:polygon(0 0,100% 50%,0 100%);}
.cpv-face{height:214px;background:#f1f5f9;border-radius:24px 24px 0 0;overflow:hidden;position:relative;}
.cpv-scene{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px 26px;opacity:0;animation:cpvFade .7s cubic-bezier(.22,1,.36,1) forwards;}
.cpv-letters{display:flex;gap:6px;justify-content:center;max-width:100%;}
.cpv-letters span,.cpv-hero span{display:inline-block;font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1.15;background-image:linear-gradient(180deg,#1e3a8a 0%,#2563eb 58%,#38bdf8 100%);background-size:100% 160%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0.35px rgba(30,58,138,.18);opacity:0;transform:translateY(12px);filter:blur(8px);animation:cpvLetter .9s cubic-bezier(.22,1,.36,1) forwards,cpvSheen 5s ease-in-out 1s infinite;}
.cpv-hero span{font-size:26px;}
.cpv-sub{margin-top:12px;font-size:12px;color:#64748b;letter-spacing:.12em;opacity:0;animation:cpvFade .8s cubic-bezier(.22,1,.36,1) .35s forwards;}
.cpv-chip{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:10px 16px;box-shadow:0 10px 28px -18px rgba(37,99,235,.45);font-size:14px;font-weight:600;color:#1e3a8a;min-height:40px;}
.cpv-caret{display:inline-block;width:7px;height:15px;background:#2563eb;margin-left:2px;animation:cpvBlink 1s steps(1) infinite;vertical-align:-2px;}
.cpv-hero{display:flex;gap:3px;justify-content:center;}
.cpv-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.cpv-pill{padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;font-size:13px;letter-spacing:.1em;opacity:0;transform:translateY(10px);filter:blur(6px);animation:cpvLetter .8s cubic-bezier(.22,1,.36,1) forwards;}
.cpv-pill.ghost{background:#fff;color:#1d4ed8;box-shadow:0 6px 18px -12px rgba(37,99,235,.35);}
.cpv-ms{font-size:42px;font-weight:700;letter-spacing:.02em;background-image:linear-gradient(180deg,#1e3a8a 0%,#2563eb 60%,#38bdf8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cpv-ms small{font-size:15px;margin-left:4px;color:#64748b;font-weight:600;}
.cpv-panel{width:100%;height:100%;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-align:left;box-shadow:0 10px 28px -18px rgba(37,99,235,.35);}
.cpv-bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11px;color:#64748b;border-bottom:1px solid #e2e8f0;}
.cpv-dot{width:7px;height:7px;border-radius:50%;background:#cbd5e1;}
.cpv-dot.on{background:#38bdf8;}
.cpv-body{flex:1;padding:12px 14px;display:grid;align-content:center;gap:10px;}
.cpv-chips{display:flex;gap:6px;flex-wrap:wrap;}
.cpv-chips span{font-size:11px;font-weight:650;padding:5px 8px;border-radius:999px;background:#eff6ff;color:#1d4ed8;}
html.dark .cpv-panel{background:#0f172a;}
html.dark .cpv-bar{border-bottom-color:#334155;color:#94a3b8;}
.cpv-scene-qs{padding:0;}
.cpv-q-stage{position:absolute;inset:0 0 36px;overflow:hidden;}
.cpv-q{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;color:#3b82f6;opacity:0;animation:cpvQIn .7s cubic-bezier(.22,1,.36,1) forwards,cpvQfloat 3.4s ease-in-out infinite;}
.cpv-q svg{width:100%;height:100%;display:block;transform:scale(var(--s,1));}
.cpv-q.main{width:58px;height:58px;margin:-29px 0 0 -29px;color:#2563eb;}
.cpv-q-ok{position:absolute;left:50%;top:42%;width:64px;height:64px;margin:-32px 0 0 -32px;color:#16a34a;opacity:0;transform:scale(.7);pointer-events:none;}
.cpv-q-ok svg{width:100%;height:100%;display:block;}
.cpv-q-stage.resolved .cpv-q{animation:cpvQOut .7s cubic-bezier(.22,1,.36,1) forwards;}
.cpv-q-stage.resolved .cpv-q-ok{animation:cpvQok .7s cubic-bezier(.22,1,.36,1) .08s forwards;}
.cpv-q-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;letter-spacing:.14em;color:#64748b;}
html.dark .cpv-q{color:#60a5fa;}
html.dark .cpv-q.main{color:#93c5fd;}
html.dark .cpv-q-ok{color:#4ade80;}
html.dark .cpv-q-cap{color:#94a3b8;}
@keyframes cpvQIn{from{opacity:0;transform:translate(-50%,-40%) scale(.6);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes cpvQfloat{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,calc(-50% - 7px));}}
@keyframes cpvQOut{to{opacity:0;transform:translate(-50%,-58%) scale(.55);}}
@keyframes cpvQok{to{opacity:1;transform:scale(1);}}
@keyframes cpvLetter{to{opacity:1;transform:none;filter:blur(0);}}
@keyframes cpvSheen{50%{background-position:0 100%;}}
@keyframes cpvFade{to{opacity:1;}}
@keyframes cpvBlink{50%{opacity:0;}}
.cpv-scene-echo{padding:0;}
.cpv-brands{position:absolute;inset:0;overflow:hidden;}
.cpv-brand{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -10px rgba(15,23,42,.45);display:grid;place-items:center;opacity:0;overflow:hidden;will-change:transform;padding:8px;box-sizing:border-box;}
.cpv-brand svg,.cpv-brand img{width:100%;height:100%;display:block;object-fit:contain;}
.cpv-echo-ring{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(37,99,235,.38);pointer-events:none;animation:cpvEcho 1.35s cubic-bezier(.16,1,.3,1) forwards;}
.cpv-echo-ring-2{animation-delay:.52s;border-color:rgba(37,99,235,.22);}
@keyframes cpvEcho{to{opacity:0;transform:scale(18);border-width:0;}}
.cpv-brand-echo{pointer-events:none;filter:saturate(.85);}
.cpv-copy{padding:16px 20px 18px;text-align:left;}
.cpv-copy h2{margin:0 0 6px;font-size:18px;font-weight:750;letter-spacing:-.03em;color:#0f172a;line-height:1.25;}
.cpv-copy p{margin:0 0 14px;color:#64748b;font-size:13.5px;line-height:1.55;}
.cpv-actions{display:flex;align-items:center;justify-content:flex-end;}
.cpv-cta{display:inline-flex;align-items:center;justify-content:center;min-width:108px;height:36px;padding:0 16px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;font-size:14px;text-decoration:none;}
html.dark .cpv-card{background:#0f172a;border-color:#334155;box-shadow:0 8px 28px -14px rgba(0,0,0,.45);}
html.dark .cpv-tab{background:#0f172a;}
html.dark .cpv-face{background:#1e293b;}
html.dark .cpv-copy h2{color:#f8fafc;}
html.dark .cpv-copy p{color:#94a3b8;}
#tutorial .cpv-card{width:100%;max-width:none;height:100%;display:flex;flex-direction:column;border:1px solid #e2e8f0;box-shadow:0 8px 28px -14px rgba(15,23,42,.12);}
#tutorial .cpv-face{flex:1 1 auto;height:auto;min-height:260px;}
#tutorial .cpv-copy{padding:20px 24px 22px;}
#tutorial .cpv-copy h2{font-size:22px;}
#tutorial .cpv-copy p{font-size:14.5px;margin-bottom:16px;}
#tutorial .cpv-cta{
  position:relative;
  overflow:hidden;
  min-width:128px;
  height:40px;
  font-size:15px;
  box-shadow:0 8px 20px -8px rgba(37,99,235,.55);
  animation:cpvCtaPulse 2.4s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
}
#tutorial .cpv-cta::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:cpvCtaShine 3.2s ease-in-out infinite;
}
#tutorial .cpv-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -8px rgba(37,99,235,.6);
}
#tutorial .cpv-cta:active{transform:translateY(0) scale(.98);}
@keyframes cpvCtaPulse{
  0%,100%{box-shadow:0 8px 20px -8px rgba(37,99,235,.45);}
  50%{box-shadow:0 12px 28px -6px rgba(37,99,235,.7);}
}
@keyframes cpvCtaShine{
  0%,55%{transform:translateX(-120%);}
  75%,100%{transform:translateX(120%);}
}
@media (prefers-reduced-motion:reduce){
  #tutorial .cpv-cta,#tutorial .cpv-cta::after{animation:none;}
}
@media (max-width:639px){
  #tutorial .cpv-actions{justify-content:stretch;}
  #tutorial .cpv-cta{width:100%;min-height:44px;height:44px;}
}
#tutorial .cpv-letters span,#tutorial .cpv-hero span{font-size:32px;}
#tutorial .cpv-ms{font-size:56px;}
#tutorial .cpv-chip{font-size:16px;min-height:46px;padding:12px 18px;}
#tutorial .cpv-brand{width:58px;height:58px;padding:9px;}
html.dark #tutorial .cpv-card{border-color:#334155;}
@media (max-width:1023px){
  #tutorial .cpv-face{min-height:220px;}
  #tutorial .cpv-letters span,#tutorial .cpv-hero span{font-size:26px;}
  #tutorial .cpv-ms{font-size:44px;}
}

.home-section{padding:4rem 0;}
@media (min-width:768px){.home-section{padding:5rem 0;}}
.home-head{margin-bottom:2.5rem;text-align:center;}
.home-head h2{margin-bottom:.75rem;}
.home-brands{margin-top:2.5rem;padding:1.35rem 1.1rem 1.2rem;border-radius:1.25rem;border:1px solid #e2e8f0;background:#f8fafc;}
html.dark .home-brands{border-color:#334155;background:#0f172a;}
.home-brands h3{margin-bottom:.75rem;}
.home-brands .home-brands-desc{margin-bottom:1rem;}
.home-brands .home-brands-note{margin-top:.85rem;}
body {
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
                   "WenQuanYi Micro Hei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    html[lang="en"] body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

    #scroll-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0%;
      z-index: 60;
      background: linear-gradient(90deg, #2563eb, #38bdf8, #818cf8);
      transition: width 0.08s linear;
      pointer-events: none;
    }

    .hero-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(147, 197, 253, 0.15);
      pointer-events: none;
      animation: ringPulse 6s ease-in-out infinite;
    }
    .hero-ring-1 { width: 280px; height: 280px; top: 10%; right: 8%; animation-delay: 0s; }
    .hero-ring-2 { width: 420px; height: 420px; top: 5%; right: 2%; animation-delay: -2s; opacity: 0.6; }
    .hero-ring-3 { width: 180px; height: 180px; bottom: 15%; left: 10%; animation-delay: -4s; }
    @keyframes ringPulse {
      0%, 100% { transform: scale(1); opacity: 0.4; }
      50% { transform: scale(1.06); opacity: 0.75; }
    }
    @media (max-width: 767px) {
      .hero-ring { display: none; }
    }

    
    .step-wrap {
      position: relative;
      display: flex;
      gap: 1.25rem;
      align-items: stretch;
      margin-bottom: 1.25rem;
    }
    .step-wrap:last-child {
      margin-bottom: 0;
    }
    .step-rail {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 3rem;
      z-index: 2;
    }
    .step-line {
      position: absolute;
      left: 50%;
      top: 3.15rem;
      bottom: -1.25rem;
      width: 2px;
      margin-left: -1px;
      background: linear-gradient(180deg, #2563eb 0%, #93c5fd 55%, rgba(147, 197, 253, 0.15) 100%);
      opacity: 0.5;
      z-index: 0;
      pointer-events: none;
      border-radius: 1px;
    }
    .step-wrap:last-child .step-line {
      display: none;
    }
    .step-body {
      flex: 1;
      min-width: 0;
    }
    html.dark .step-line {
      background: linear-gradient(180deg, #3b82f6 0%, #1e40af 55%, rgba(59, 130, 246, 0.15) 100%);
      opacity: 0.6;
    }

    .tag-pop {
      opacity: 0;
      transform: translateY(12px) scale(0.96);
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .tag-pop.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .gradient-bg {
      background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #1e40af 100%);
      background-size: 200% 200%;
      animation: gradientShift 12s ease infinite;
    }

    html.dark .gradient-bg {
      background: linear-gradient(135deg, #020617 0%, #0b1224 42%, #172554 100%);
      background-size: 200% 200%;
    }
    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .fade-up {
      opacity: 0;
      transform: translateY(48px) scale(0.98);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .fade-up-delay-1 { transition-delay: 0.08s; }
    .fade-up-delay-2 { transition-delay: 0.16s; }
    .fade-up-delay-3 { transition-delay: 0.24s; }
    .fade-up-delay-4 { transition-delay: 0.32s; }
    .fade-up-delay-5 { transition-delay: 0.40s; }
    .fade-up-delay-6 { transition-delay: 0.48s; }

    .hero-badge {
      opacity: 0;
      animation: heroIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
    }
    .hero-title {
      opacity: 0;
      animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
    }
    .hero-desc {
      opacity: 0;
      animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    }
    .hero-btns {
      opacity: 0;
      animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
    }
    @keyframes heroIn {
      from { opacity: 0; transform: translateY(36px); filter: blur(4px); }
      to   { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    .float {
      animation: float 7s ease-in-out infinite;
    }
    .float-slow {
      animation: float 10s ease-in-out infinite reverse;
    }
    @keyframes float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(8px, -14px) scale(1.03); }
      66% { transform: translate(-6px, -8px) scale(0.98); }
    }

    .card-hover {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.3s ease,
                  background-color 0.3s ease;
    }
    .card-hover:hover {
      
      box-shadow: 0 28px 40px -12px rgb(37 99 235 / 0.18),
                  0 12px 20px -8px rgb(0 0 0 / 0.08);
      border-color: rgb(147 197 253 / 0.6);
    }

    .icon-svg {
      width: 1.5rem;
      height: 1.5rem;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      pointer-events: none;
    }
    .icon-svg-lg {
      width: 1.75rem;
      height: 1.75rem;
    }
    .icon-svg-sm {
      width: 1rem;
      height: 1rem;
    }
    .feat-icon {
      position: relative;
      width: 3rem;
      height: 3rem;
      border-radius: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
      flex-shrink: 0;
    }
    .feat-icon .icon-svg {
      width: 1.5rem;
      height: 1.5rem;
      overflow: visible;
    }
    .feat-icon--bolt { background: #dbeafe; color: #2563eb; }
    .feat-icon--device { background: #e0f2fe; color: #0284c7; }
    .feat-icon--usb { background: #e0e7ff; color: #4f46e5; }
    .feat-icon--lock { background: #cffafe; color: #0891b2; }
    .feat-icon--pin { background: #ede9fe; color: #7c3aed; }
    .feat-icon--list { background: #d1fae5; color: #059669; }
    html.dark .feat-icon--bolt { background: rgba(30, 64, 175, 0.4); color: #93c5fd; }
    html.dark .feat-icon--device { background: rgba(3, 105, 161, 0.35); color: #7dd3fc; }
    html.dark .feat-icon--usb { background: rgba(67, 56, 202, 0.35); color: #a5b4fc; }
    html.dark .feat-icon--lock { background: rgba(14, 116, 144, 0.35); color: #67e8f9; }
    html.dark .feat-icon--pin { background: rgba(91, 33, 182, 0.35); color: #c4b5fd; }
    html.dark .feat-icon--list { background: rgba(4, 120, 87, 0.35); color: #6ee7b7; }

    
    .feat-icon--bolt .fi-bolt {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 36;
      stroke-dashoffset: 0;
      animation: fiDrawBolt 2.4s ease-in-out infinite;
    }
    @keyframes fiDrawBolt {
      0%   { stroke-dashoffset: 36; opacity: 0.35; }
      35%  { stroke-dashoffset: 0; opacity: 1; }
      70%  { stroke-dashoffset: 0; opacity: 1; }
      100% { stroke-dashoffset: -36; opacity: 0.35; }
    }

    
    .feat-icon--device .fi-screen {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feat-icon--device .fi-scan {
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-dasharray: 14;
      stroke-dashoffset: 0;
      animation: fiScan 2.2s linear infinite;
      opacity: 0.85;
    }
    @keyframes fiScan {
      0% { stroke-dashoffset: 28; }
      100% { stroke-dashoffset: 0; }
    }

    
    .feat-icon--usb .fi-usb {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feat-icon--usb .fi-flow {
      stroke-dasharray: 4 6;
      animation: fiFlow 1.1s linear infinite;
    }
    @keyframes fiFlow {
      to { stroke-dashoffset: -20; }
    }

    
    .feat-icon--lock .fi-lock-body {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feat-icon--lock .fi-shackle {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transform-origin: 7px 11px;
      animation: fiShackle 2.8s ease-in-out infinite;
    }
    @keyframes fiShackle {
      0%, 18%   { transform: rotate(0deg); }
      38%, 55%  { transform: rotate(-42deg); }
      75%, 100% { transform: rotate(0deg); }
    }

    
    .feat-icon--pin .fi-pin {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feat-icon--pin .fi-dot {
      fill: currentColor;
      stroke: none;
      transform-origin: 12px 10px;
      animation: fiDot 1.8s ease-in-out infinite;
    }
    @keyframes fiDot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.45); opacity: 0.55; }
    }

    
    .feat-icon--list .fi-list {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feat-icon--list .fi-check {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 14;
      stroke-dashoffset: 0;
      animation: fiCheck 2.4s ease-in-out infinite;
    }
    @keyframes fiCheck {
      0%, 12%  { stroke-dashoffset: 14; opacity: 0.2; }
      35%, 65% { stroke-dashoffset: 0; opacity: 1; }
      88%, 100%{ stroke-dashoffset: 14; opacity: 0.2; }
    }

    .card-hover:hover .feat-icon {
      transform: scale(1.05);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .feat-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

    .faq-arrow .icon-svg {
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (prefers-reduced-motion: reduce) {
      .feat-icon .fi-bolt,
      .feat-icon .fi-scan,
      .feat-icon .fi-flow,
      .feat-icon .fi-shackle,
      .feat-icon .fi-dot,
      .feat-icon .fi-check {
        animation: none !important;
      }
      .feat-icon .fi-bolt,
      .feat-icon .fi-check {
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
      }
      .feat-icon .fi-shackle {
        transform: none !important;
      }
    }

    nav {
      transition: box-shadow 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
    }
    nav.scrolled {
      box-shadow: 0 8px 30px -8px rgb(0 0 0 / 0.1);
      background: rgba(255,255,255,0.95);
    }
    nav a {
      position: relative;
      transition: color 0.25s ease;
    }
    nav a:not(.bg-primary)::after {
      content: '';
      position: absolute;
      left: 0; bottom: -4px;
      width: 0; height: 2px;
      background: #2563eb;
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      border-radius: 1px;
    }
    nav a:not(.bg-primary):hover::after {
      width: 100%;
    }

    .btn-primary,
    .btn-outline,
    a[href],
    button {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .btn-primary {
      position: relative;
      overflow: hidden;
      min-height: 48px;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.25s ease;
    }
    .btn-primary:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 12px 24px -8px rgb(37 99 235 / 0.45);
    }
    .btn-primary:active {
      transform: translateY(0) scale(0.97);
    }
    .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }
    .btn-primary:hover::after {
      transform: translateX(100%);
    }
    .btn-cta-pulse {
      animation: ctaPulse 2.4s ease-in-out infinite;
    }
    @keyframes ctaPulse {
      0%, 100% { box-shadow: 0 8px 24px -6px rgba(255,255,255,0.35), 0 0 0 0 rgba(255,255,255,0.0); }
      50% { box-shadow: 0 14px 36px -4px rgba(255,255,255,0.7), 0 0 0 6px rgba(255,255,255,0.18); }
    }
    html.dark .btn-cta-pulse {
      animation-name: ctaPulseDark;
    }
    @keyframes ctaPulseDark {
      0%, 100% { box-shadow: 0 8px 24px -6px rgba(59,130,246,0.4), 0 0 0 0 rgba(96,165,250,0); }
      50% { box-shadow: 0 14px 36px -6px rgba(96,165,250,0.65), 0 0 0 6px rgba(96,165,250,0.2); }
    }
    @media (prefers-reduced-motion: reduce) {
      .btn-cta-pulse { animation: none; }
    }

    .btn-outline {
      min-height: 48px;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-outline:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,0.12);
    }
    .btn-outline:active {
      transform: scale(0.97);
    }

    @media (max-width: 639px) {
      .hero-btns .btn-primary,
      .hero-btns .btn-outline {
        width: 100%;
        justify-content: center;
      }
    }

    .step-num {
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    }
    .step-wrap:hover .step-num,
    .card-hover:hover .step-num {
      transform: scale(1.08);
      box-shadow: 0 10px 20px -4px rgb(37 99 235 / 0.35);
    }

    .faq-item {
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-height: 48px;
      user-select: none;
    }
    .faq-item .faq-answer {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.35s ease,
                  margin 0.35s ease;
      margin-top: 0;
    }
    .faq-item.open {
      border-color: rgb(147 197 253 / 0.8);
      background: #f8fafc;
      box-shadow: 0 8px 20px -8px rgb(37 99 235 / 0.12);
    }
    .faq-item.open .faq-answer {
      max-height: min(80vh, 720px);
      opacity: 1;
      margin-top: 0.75rem;
    }
    .faq-item.open .faq-q {
      color: #2563eb;
    }
    .faq-item .faq-arrow {
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .faq-item.open .faq-arrow {
      transform: rotate(180deg);
      color: #2563eb;
    }
    @media (hover: hover) and (pointer: fine) {
      .faq-item:hover {
        border-color: rgb(147 197 253 / 0.8);
        background: #f8fafc;
        box-shadow: 0 8px 20px -8px rgb(37 99 235 / 0.12);
      }
    }

    .title-line {
      position: relative;
      display: inline-block;
    }
    .title-line::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #2563eb, #38bdf8);
      border-radius: 2px;
      transform: translateX(-50%);
      transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
    }
    .fade-up.visible .title-line::after {
      width: 48px;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(147, 197, 253, 0.5);
      border-radius: 50%;
      animation: particleFloat 8s ease-in-out infinite;
    }
    @keyframes particleFloat {
      0%, 100% { transform: translate(0, 0); opacity: 0.3; }
      25% { transform: translate(20px, -30px); opacity: 0.7; }
      50% { transform: translate(-15px, -50px); opacity: 0.4; }
      75% { transform: translate(25px, -20px); opacity: 0.6; }
    }

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

    img { max-width: 100%; height: auto; }

    #mobile-menu-btn svg {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    }
    #mobile-menu-btn.is-open svg {
      transform: rotate(90deg) scale(0.92);
    }
    #mobile-menu:not(.hidden) {
      animation: menuSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes menuSlideIn {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    #back-to-top {
      position: fixed;
      right: calc(1.25rem + env(safe-area-inset-right, 0px));
      bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
      z-index: 40;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 9999px;
      background: #2563eb;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px -6px rgb(37 99 235 / 0.45);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px) scale(0.9);
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      border: none;
      cursor: pointer;
    }
    #back-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    #back-to-top:hover {
      background: #1d4ed8;
      transform: translateY(-2px) scale(1.05);
    }
    #back-to-top:active {
      transform: scale(0.95);
    }

    #theme-toggle, #lang-toggle {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      border: none;
      cursor: pointer;
      background: transparent;
      color: #475569;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    #theme-toggle:hover, #lang-toggle:hover {
      background: #f1f5f9;
      color: #2563eb;
    }
    #theme-toggle .icon-sun,
    #theme-toggle .icon-moon {
      width: 1.25rem;
      height: 1.25rem;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #theme-toggle .icon-sun { display: none; }
    #theme-toggle .icon-moon { display: block; }
    html.dark #theme-toggle .icon-sun { display: block; }
    html.dark #theme-toggle .icon-moon { display: none; }
    html.dark #theme-toggle,
    html.dark #lang-toggle {
      color: #94a3b8;
    }
    html.dark #theme-toggle:hover,
    html.dark #lang-toggle:hover {
      background: #1e293b;
      color: #60a5fa;
    }
    #lang-toggle {
      min-width: 2.5rem;
      padding: 0 0.35rem;
    }

    html.dark {
      color-scheme: dark;
    }
    html.dark body {
      background-color: #0f172a;
      color: #e2e8f0;
    }
    html.dark nav {
      background: rgba(15, 23, 42, 0.92);
      border-color: #1e293b;
    }
    html.dark nav.scrolled {
      background: rgba(15, 23, 42, 0.96);
      box-shadow: 0 8px 30px -8px rgb(0 0 0 / 0.45);
    }
    html.dark nav a:not(.bg-primary):not(.suucar-bot-cta) {
      color: #cbd5e1;
    }
    html.dark nav a:not(.bg-primary):not(.suucar-bot-cta):hover {
      color: #60a5fa;
    }
    html.dark nav a:not(.bg-primary):not(.suucar-bot-cta)::after {
      background: #60a5fa;
    }
    html.dark #mobile-menu {
      background: rgba(15, 23, 42, 0.98);
      border-color: #1e293b;
    }
    html.dark #mobile-menu a {
      color: #cbd5e1;
    }
    html.dark #mobile-menu-btn:hover {
      background: #1e293b;
    }
    html.dark #mobile-menu-btn svg {
      color: #e2e8f0;
    }
    html.dark section.bg-white,
    html.dark section.bg-slate-50 {
      background-color: #0f172a !important;
    }
    html.dark .card-hover,
    html.dark .faq-item,
    html.dark #tutorial .bg-slate-50,
    html.dark #features .bg-slate-50,
    html.dark #contact .bg-slate-50,
    html.dark #scenarios .bg-white,
    html.dark #pricing .bg-white {
      background-color: #1e293b !important;
      border-color: #334155 !important;
    }
    html.dark .card-hover:hover {
      border-color: rgb(96 165 250 / 0.5) !important;
      box-shadow: 0 28px 40px -12px rgb(37 99 235 / 0.25),
                  0 12px 20px -8px rgb(0 0 0 / 0.3);
    }
    html.dark .border-slate-100,
    html.dark .border-slate-200,
    html.dark section.border-t {
      border-color: #334155 !important;
    }
    html.dark .text-slate-500 {
      color: #94a3b8 !important;
    }
    html.dark .text-slate-600 {
      color: #94a3b8 !important;
    }
    html.dark .text-slate-800 {
      color: #e2e8f0 !important;
    }
    html.dark .text-slate-400 {
      color: #64748b !important;
    }
    html.dark .text-slate-900 {
      color: #f1f5f9 !important;
    }
    html.dark #tutorial .step-num {
      box-shadow: 0 8px 16px -4px rgb(37 99 235 / 0.4);
    }
    html.dark .faq-item.open {
      background-color: #0f172a !important;
      border-color: rgb(96 165 250 / 0.5) !important;
      box-shadow: 0 8px 20px -8px rgb(37 99 235 / 0.2);
    }
    html.dark .faq-item .faq-q {
      color: #e2e8f0;
    }
    html.dark .faq-item.open .faq-q {
      color: #60a5fa;
    }
    html.dark .faq-arrow {
      color: #64748b;
    }
    @media (hover: hover) and (pointer: fine) {
      html.dark .faq-item:hover {
        background-color: #0f172a !important;
        border-color: rgb(96 165 250 / 0.5) !important;
        box-shadow: 0 8px 20px -8px rgb(37 99 235 / 0.2);
      }
      html.dark .faq-item:hover .faq-q {
        color: #60a5fa;
      }
    }
    html.dark footer {
      background-color: #020617;
    }
    html.dark #back-to-top {
      background: #3b82f6;
      box-shadow: 0 8px 24px -6px rgb(59 130 246 / 0.5);
    }
    html.dark #back-to-top:hover {
      background: #2563eb;
    }
    html.dark .title-line::after {
      background: linear-gradient(90deg, #3b82f6, #38bdf8);
    }
    #hero-download-btn,
    html.dark #hero-download-btn,
    .btn-primary.bg-white,
    html.dark .btn-primary.bg-white {
      background-color: #ffffff !important;
      color: #2563eb !important;
    }
    html.dark #hero-download-btn:hover,
    html.dark .btn-primary.bg-white:hover {
      background-color: #f8fafc !important;
      color: #1d4ed8 !important;
    }
    html.dark .rounded-full.bg-white {
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #e2e8f0;
    }

    
    .tut-cta-card {
      border-radius: 1.25rem;
      border: 1px solid #e2e8f0;
      background: #fff;
      padding: 1.35rem 1.25rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    html.dark .tut-cta-card {
      background: #0f172a;
      border-color: #334155;
    }
    .tut-cta-card::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 12rem;
      height: 12rem;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37,99,235,0.12), transparent 70%);
      pointer-events: none;
    }
    .tut-learn-list {
      list-style: none;
      padding: 0;
      margin: 0 0 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .tut-learn-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
      font-size: 0.8125rem;
      line-height: 1.45;
      color: #475569;
    }
    html.dark .tut-learn-list li { color: #94a3b8; }
    .tut-learn-list .num {
      flex-shrink: 0;
      width: 1.35rem; height: 1.35rem;
      border-radius: 0.4rem;
      background: linear-gradient(145deg, #3b82f6, #1d4ed8);
      color: #fff;
      font-size: 0.7rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 10px -3px rgba(37,99,235,0.4);
    }
    .tut-chip-row {
      display: flex; flex-wrap: wrap; gap: 0.45rem;
      margin-top: auto;
    }
    .tut-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      padding: 0.35rem 0.7rem;
      border-radius: 9999px;
      font-size: 0.72rem; font-weight: 600;
      background: #f1f5f9; color: #334155;
      border: 1px solid #e2e8f0;
      text-decoration: none;
      transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
    }
    .tut-chip:hover {
      background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
      transform: translateY(-1px);
    }
    html.dark .tut-chip {
      background: #1e293b; color: #cbd5e1; border-color: #334155;
    }
    html.dark .tut-chip:hover {
      background: rgba(30, 58, 138, 0.45); color: #93c5fd; border-color: rgba(59, 130, 246, 0.4);
    }
    .tut-dot-blink {
      animation: tutBlink 1.5s ease-in-out infinite;
    }
    @keyframes tutBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.25; }
    }
    @media (prefers-reduced-motion: reduce) {
      .tut-dot-blink { animation: none !important; }
    }

    
    .demo-stage {
      position: relative;
      border-radius: 1.5rem;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 1.75rem 1.25rem 1.5rem;
      overflow: hidden;
    }
    html.dark .demo-stage {
      background: #0f172a;
      border-color: #1e293b;
    }
    .demo-nodes {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0.35rem;
      align-items: center;
    }
    .demo-link-v { display: none; }
    @media (max-width: 767px) {
      .demo-nodes {
        grid-template-columns: 1fr;
        gap: 0.1rem;
      }
      .demo-link {
        width: 24px;
        min-width: 24px;
        height: 2.85rem;
        margin: 0.1rem auto;
        transform: none;
      }
      .demo-link-h { display: none; }
      .demo-link-v { display: block; width: 24px; height: 2.85rem; }
    }
    .demo-node {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 1rem;
      padding: 1.1rem 0.85rem;
      text-align: center;
      box-shadow: 0 4px 16px -8px rgba(15, 23, 42, 0.08);
    }
    html.dark .demo-node {
      background: #1e293b;
      border-color: #334155;
      box-shadow: none;
    }
    .demo-icon {
      width: 2.75rem; height: 2.75rem;
      margin: 0 auto 0.6rem;
      border-radius: 0.75rem;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
    }
    .demo-icon.car { background: #0ea5e9; }
    .demo-icon.server { background: #6366f1; }
    .demo-icon.eng { background: #2563eb; }
    .demo-icon svg {
      width: 1.35rem; height: 1.35rem;
      stroke: currentColor; fill: none; stroke-width: 1.75;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .demo-node h4 {
      font-size: 0.875rem; font-weight: 700;
      color: #0f172a; margin-bottom: 0.25rem;
    }
    html.dark .demo-node h4 { color: #f1f5f9; }
    .demo-node p, .demo-desc {
      font-size: 0.7rem; color: #64748b; line-height: 1.45;
      white-space: pre-line;
    }
    html.dark .demo-node p, html.dark .demo-desc { color: #94a3b8; }
    .demo-status {
      display: inline-flex; align-items: center; gap: 0.3rem;
      margin-top: 0.55rem;
      font-size: 0.65rem; font-weight: 600;
      color: #059669;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      padding: 0.15rem 0.5rem;
      border-radius: 9999px;
    }
    html.dark .demo-status {
      background: rgba(6, 78, 59, 0.35);
      border-color: rgba(52, 211, 153, 0.35);
      color: #6ee7b7;
    }
    .demo-status .dot {
      width: 0.35rem; height: 0.35rem; border-radius: 50%;
      background: #10b981;
      animation: statusBlink 1.8s ease-in-out infinite;
    }
    @keyframes statusBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    
    .demo-link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.25rem;
      min-width: 4.25rem;
      height: 24px;
      flex-shrink: 0;
    }
    @media (min-width: 768px) {
      .demo-link { width: 5.5rem; min-width: 5.5rem; }
    }
    @media (max-width: 767px) {
      .demo-link {
        width: 24px;
        min-width: 24px;
        height: 2.85rem;
      }
    }
    .demo-link .demo-link-h {
      width: 100%;
      height: 24px;
      overflow: visible;
    }
    .demo-link .demo-link-v {
      width: 24px;
      height: 100%;
      overflow: visible;
    }
    .demo-link .track {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 2;
      stroke-linecap: round;
    }
    html.dark .demo-link .track { stroke: #334155; }
    .demo-link .flow-dot { color: #3b82f6; }
    html.dark .demo-link .flow-dot { color: #60a5fa; }
    .demo-link .flow-dot.alt { color: #6366f1; }
    html.dark .demo-link .flow-dot.alt { color: #a5b4fc; }
    .demo-link .flow {
      fill: none;
      stroke: #3b82f6;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 6 10;
      animation: flowDash 1.1s linear infinite;
    }
    html.dark .demo-link .flow { stroke: #60a5fa; }
    @keyframes flowDash {
      to { stroke-dashoffset: -16; }
    }

    .demo-caption {
      margin-top: 1.25rem;
      text-align: center;
      font-size: 0.8125rem;
      color: #64748b;
      line-height: 1.6;
    }
    html.dark .demo-caption { color: #94a3b8; }
    .demo-steps {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
      margin-top: 1rem;
    }
    .demo-chip {
      font-size: 0.7rem; font-weight: 600;
      padding: 0.3rem 0.7rem;
      border-radius: 9999px;
      background: #eff6ff; color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    html.dark .demo-chip {
      background: rgba(30, 58, 138, 0.35);
      color: #93c5fd;
      border-color: rgba(59, 130, 246, 0.3);
    }
    @media (prefers-reduced-motion: reduce) {
      .demo-status .dot, .demo-link .flow, .demo-link .mover {
        animation: none !important;
      }
      .demo-link .flow { stroke-dasharray: none; }
    }

    
    .pricing-note {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: auto;
      margin-right: auto;
      padding: 0.65rem 1.25rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 600;
      color: #1d4ed8;
      background: linear-gradient(90deg, #eff6ff, #dbeafe, #eff6ff);
      background-size: 200% 100%;
      border: 1px solid #bfdbfe;
      box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.25);
      animation: pricingNotePulse 2.4s ease-in-out infinite, pricingNoteShimmer 4s linear infinite;
      text-decoration: none;
      transition: color 0.2s, border-color 0.2s, transform 0.2s;
    }
    .pricing-note:hover {
      color: #1e40af;
      border-color: #93c5fd;
      transform: translateY(-1px);
    }
    .pricing-note-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: #2563eb;
      flex-shrink: 0;
      animation: pricingNoteDot 1.4s ease-in-out infinite;
    }
    @keyframes pricingNotePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.28); }
      50% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    }
    @keyframes pricingNoteShimmer {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    @keyframes pricingNoteDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(0.85); }
    }
    html.dark .pricing-note {
      color: #93c5fd;
      background: linear-gradient(90deg, rgba(30, 58, 138, 0.45), rgba(37, 99, 235, 0.25), rgba(30, 58, 138, 0.45));
      background-size: 200% 100%;
      border-color: rgba(59, 130, 246, 0.4);
    }
    html.dark .pricing-note:hover { color: #bfdbfe; }
    html.dark .pricing-note-dot { background: #60a5fa; }
    @media (prefers-reduced-motion: reduce) {
      .pricing-note, .pricing-note-dot { animation: none !important; }
    }

  
    
    .js-anim-root.is-offscreen,
    .js-anim-root.is-offscreen * {
      animation-play-state: paused !important;
    }

.home-brands-more{
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: #64748b;
}
html.dark .home-brands-more { color: #94a3b8; }

#contact { overflow: visible; }
.contact-wechat { position: relative; z-index: 1; overflow: visible; }
.contact-wechat:hover,
.contact-wechat.qr-on { z-index: 6; }
.wechat-icon {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.wechat-qr {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 188px;
  padding: 10px 10px 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35);
  transform: translateX(-50%) translateY(12px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wechat-qr::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  transform: rotate(45deg);
}
.wechat-qr img {
  display: block;
  width: 168px;
  height: 168px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.wechat-qr-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #64748b;
}
.contact-wechat:hover .wechat-qr,
.contact-wechat.qr-on .wechat-qr {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
.contact-wechat:hover .wechat-icon,
.contact-wechat.qr-on .wechat-icon {
  transform: scale(1.08) rotate(-6deg);
}
html.dark .wechat-qr {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
}
html.dark .wechat-qr::after {
  background: #0f172a;
  border-color: #334155;
}
html.dark .wechat-qr-hint { color: #94a3b8; }
@media (max-width: 639px) {
  .wechat-qr {
    width: 168px;
    padding: 8px 8px 6px;
  }
  .wechat-qr img {
    width: 148px;
    height: 148px;
  }
}
.pricing-offer-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0.22rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #1d4ed8;
  background: linear-gradient(90deg, #eff6ff, #dbeafe 40%, #e0f2fe 70%, #eff6ff);
  background-size: 220% 100%;
  border: 1px solid rgb(147 197 253 / 0.7);
  animation: pricingOfferShine 3.6s ease-in-out infinite;
}
html.dark .pricing-offer-line {
  color: #93c5fd;
  background: linear-gradient(90deg, #0f172a, #1e3a8a 45%, #0f172a);
  background-size: 220% 100%;
  border-color: rgb(96 165 250 / 0.35);
}
@keyframes pricingOfferShine {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 0 0 0 rgb(37 99 235 / 0); }
  50% { background-position: 100% 50%; box-shadow: 0 0 0 6px rgb(37 99 235 / 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-offer-line { animation: none; }
}
.pricing-grid {
  align-items: stretch;
}
@media (min-width: 768px) {
  .pricing-grid { grid-auto-rows: 1fr; }
}
.pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: visible;
}
.pricing-tip {
  position: relative;
  cursor: help;
}
.pricing-tip-label {
  border-bottom: 1px dashed currentColor;
}
.pricing-tip-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  width: max(12rem, 100%);
  max-width: 16.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  box-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.55);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pricing-tip-pop::after {
  content: '';
  position: absolute;
  left: 1rem;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: #0f172a;
}
.pricing-tip.is-open .pricing-tip-pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pricing-tip.is-hint {
  color: #1d4ed8;
}
.pricing-tip.is-hint .pricing-tip-label {
  background-image: linear-gradient(90deg, transparent, rgba(37,99,235,.16), transparent);
  background-size: 220% 100%;
  animation: pricingHintSweep 1.6s ease-in-out infinite;
}
.pricing-hint-cursor {
  position: absolute;
  z-index: 9;
  left: var(--hint-x, 48px);
  top: var(--hint-y, 0);
  color: #2563eb;
  filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.35));
  pointer-events: none;
  animation: pricingCursorSlide 1.7s ease-in-out infinite;
}
@keyframes pricingHintSweep {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@keyframes pricingCursorSlide {
  0% { transform: translate(-18px, 0) rotate(-22deg); opacity: 0; }
  18% { opacity: 1; }
  55% { transform: translate(var(--hint-run, 48px), 6px) rotate(-6deg); opacity: 1; }
  100% { transform: translate(var(--hint-run, 48px), 6px) rotate(-6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-hint-cursor,
  .pricing-tip.is-hint .pricing-tip-label { animation: none !important; }
}
.pricing-amount { margin-bottom: 0.35rem; }
.pricing-compare {
  min-height: 1.5rem;
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
}
.pricing-compare-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}
.pricing-was {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: #94a3b8;
}
.pricing-save-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
  letter-spacing: 0.01em;
  animation: pricingSavePulse 2.4s ease-in-out infinite;
}
.pricing-plus {
  color: #1e3a8a;
  font-weight: 600;
}
.pricing-plus-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 800;
  animation: pricingPlusPop 2.8s ease-in-out infinite;
}
.pricing-miss {
  color: #94a3b8;
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
}
.pricing-miss-mark {
  display: inline-flex;
  width: 1rem;
  justify-content: center;
  color: #cbd5e1;
}
.pricing-card-best {
  background-image: linear-gradient(180deg, #eff6ff 0%, #fff 42%);
}
.pricing-rec-badge {
  animation: pricingRecFloat 2.8s ease-in-out infinite;
}
@keyframes pricingSavePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(37 99 235 / 0.0); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgb(37 99 235 / 0.08); }
}
@keyframes pricingPlusPop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}
@keyframes pricingRecFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -2px); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-save-tag,
  .pricing-plus-mark,
  .pricing-rec-badge { animation: none !important; }
}
html.dark .pricing-compare { color: #94a3b8; }
html.dark .pricing-was { color: #64748b; }
html.dark .pricing-save-tag { background: #1e3a8a; color: #bfdbfe; }
html.dark .pricing-plus { color: #93c5fd; }
html.dark .pricing-miss { color: #64748b; }
html.dark .pricing-miss-mark { color: #475569; }
html.dark .pricing-card-best {
  background-image: linear-gradient(180deg, #0b1f44 0%, #0f172a 46%);
}
.pricing-card-list { flex: 1 1 auto; }
.price-currency {
  margin-left: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
  vertical-align: super;
}
html.dark .price-currency { color: #94a3b8; }
html.dark .pricing-card .text-slate-600,
html.dark #pricing .text-slate-600 {
  color: #cbd5e1 !important;
}




:root{
  --page-max:72rem;
  --page-side:clamp(1rem,2.2vw,2rem);
  --section-y:clamp(3.5rem,5.5vw,6.5rem);
  --card-gap:clamp(1rem,1.4vw,1.6rem);
  --feat-min:16.25rem;
  --feat-max:21.5rem;
  --scene-min:17.5rem;
  --scene-max:24rem;
  --price-max:20rem;
}
@media (min-width:1280px){
  :root{ --page-max:84rem; --feat-max:22rem; --scene-max:25rem; }
}
@media (min-width:1600px){
  :root{ --page-max:96rem; --feat-max:22.5rem; --scene-max:26rem; }
}
@media (min-width:1920px){
  :root{ --page-max:108rem; --feat-max:23rem; --scene-max:26.5rem; }
}
@media (min-width:2400px){
  :root{ --page-max:120rem; }
}
.max-w-5xl,.max-w-6xl,.max-w-7xl{
  width:100%;
  max-width:var(--page-max);
  box-sizing:border-box;
}
.home-section{padding-top:var(--section-y);padding-bottom:var(--section-y);}
#features .grid,
#scenarios .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap);
}
#features .grid > *,
#scenarios .grid > *{
  box-sizing:border-box;
}
@media (max-width:639px){
  #features .grid > *,
  #scenarios .grid > *{flex:1 1 100%;max-width:100%;}
}
@media (min-width:640px){
  #features .grid > *{flex:1 1 var(--feat-min);max-width:var(--feat-max);}
  #scenarios .grid > *{flex:1 1 var(--scene-min);max-width:var(--scene-max);}
}
.pricing-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap);
  max-width:none;
}
.pricing-grid > *{
  flex:1 1 16.5rem;
  max-width:var(--price-max);
}
@media (max-width:767px){
  .pricing-grid > *{flex:1 1 100%;max-width:100%;}
}
.compare-layout{
  width:100%;
  max-width:min(84rem,100%);
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:960px){
  .compare-layout{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) minmax(220px,.82fr);
    gap:var(--card-gap);
  }
}
@media (min-width:1600px){
  .compare-layout{max-width:min(92rem,100%);}
  .compare-layout .map-svg{max-height:300px;}
}
.dl-card{max-width:26rem;width:100%;}
@media (min-width:768px){
  #downloads .grid{justify-items:center;}
}


.card-hover,.dl-card,.guide-card,.compare-card,.toc-card,
.pricing-card,.tut-cta-card,.cpv-card,.flow-card,.faq-item,
.main-dl-card{
  container-type:inline-size;
  container-name:scard;
}
.card-hover h3,.dl-card h3,.guide-card h3,.compare-card h3,
.pricing-card h3,.tut-cta-card h3,.cpv-card h3,.faq-item h3{
  font-size:clamp(1.05rem, calc(.32cqi + .95rem), 1.28rem);
}
.card-hover p,.dl-card p,.guide-card p,.compare-card p,
.pricing-card p,.tut-cta-card p,.cpv-copy p{
  font-size:clamp(.8125rem, calc(.18cqi + .78rem), .9375rem);
  max-width:44em;
}
#scenarios .card-hover{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}
.toc-card{align-items:flex-start;}
@container scard (min-width:22.5rem){
  #scenarios .card-hover{
    flex-direction:row;
    gap:1.25rem;
  }
}
@container scard (max-width:22rem){
  .toc-card{flex-direction:column;gap:.45rem;}
  .guide-card .flex.items-start{flex-direction:column;}
}
@container scard (min-width:20rem){
  .card-hover,.dl-card,.pricing-card,.tut-cta-card{
    padding-block:clamp(1.2rem, calc(.8cqi + 1rem), 1.85rem);
    padding-inline:clamp(1.1rem, calc(.7cqi + .95rem), 1.75rem);
  }
}
@container scard (max-width:21.5rem){
  #scenarios .card-hover .w-14{
    width:2.75rem;
    height:2.75rem;
  }
}

#tutorial .max-w-6xl,
#pricing .max-w-6xl,
#contact .max-w-6xl{
  container-type:inline-size;
  container-name:homesec;
}
#tutorial .grid{
  display:flex;
  flex-direction:column;
  gap:var(--card-gap,1.25rem);
}
#tutorial .grid > *{min-width:0;width:100%;grid-column:auto;}
#tutorial .cpv-card,
#tutorial .tut-cta-card{width:100%;max-width:40rem;margin-left:auto;margin-right:auto;}
@container homesec (min-width:48rem){
  #tutorial .grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(16.5rem,.88fr);
    align-items:stretch;
  }
  #tutorial .cpv-card,
  #tutorial .tut-cta-card{max-width:none;height:100%;}
}
#pricing .pricing-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap,1.25rem);
  max-width:none;
}
#pricing .pricing-grid > *{
  flex:1 1 16.5rem;
  max-width:22rem;
}
#contact .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap,1.25rem);
  max-width:none;
}
#contact .grid > *{
  flex:1 1 15.5rem;
  max-width:22rem;
}
@container scard (min-width:18rem){
  #contact .card-hover{padding:1.4rem 1.25rem;}
}

#faq .max-w-3xl{
  max-width:min(72rem,100%);
  container-type:inline-size;
  container-name:faqsec;
}
#faq .space-y-3{display:flex;flex-direction:column;gap:.75rem;}
#faq .space-y-3 > * + *{margin-top:0;}
@container faqsec (min-width:42rem){
  #faq .space-y-3{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.85rem;
    align-items:start;
  }
}
#downloads .grid,
#guide .grid,
.guide-card .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap,1.25rem);
}
#downloads .grid > *,
.guide-card .grid > *{
  flex:1 1 16.5rem;
  min-width:0;
}
#downloads .grid:has(.dl-card) > *{max-width:26rem;}
#downloads .grid:has(.flow-card) > *,
.guide-card .grid > *{max-width:none;}
#tutorial .grid.gap-3{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}
#tutorial .grid.gap-3 > *{
  flex:1 1 14rem;
  max-width:22rem;
}

section.gradient-bg.hero-calm{
  animation:none !important;
  background-size:100% 100% !important;
}
section.gradient-bg.hero-calm .hero-fx-marks{
  animation:none !important;
}

@media (max-width:639px){
  .btn-cta-pulse{transform:none;}
  @keyframes ctaPulse{
    0%,100%{box-shadow:0 8px 24px -6px rgba(255,255,255,.35),0 0 0 0 rgba(255,255,255,0);transform:none;}
    50%{box-shadow:0 12px 28px -4px rgba(255,255,255,.62),0 0 0 5px rgba(255,255,255,.16);transform:none;}
  }
  @keyframes ctaPulseDark{
    0%,100%{box-shadow:0 8px 24px -6px rgba(59,130,246,.4),0 0 0 0 rgba(96,165,250,0);transform:none;}
    50%{box-shadow:0 12px 28px -6px rgba(96,165,250,.58),0 0 0 5px rgba(96,165,250,.18);transform:none;}
  }
  #faq .space-y-3{display:flex;flex-direction:column;}
  .hero-cta .hero-btns a{width:100%;}
}
html.dark .suucar-map-root.is-hold-paused .map-play-hero{
  color:#dbeafe;
  border-color:rgba(147,197,253,.45);
}