*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-sans),-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-x-1{left:.25rem;right:.25rem}.-bottom-px{bottom:-1px}.bottom-3{bottom:.75rem}.left-3{left:.75rem}.left-\[12\%\]{left:12%}.right-\[12\%\]{right:12%}.top-0{top:0}.top-3{top:.75rem}.top-\[1\.35rem\]{top:1.35rem}.z-40{z-index:40}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.ml-1\.5{margin-left:.375rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-3\.5{margin-top:.875rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.mt-\[3px\]{margin-top:3px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[0\.22em\]{height:.22em}.h-\[8\.5rem\]{height:8.5rem}.h-full{height:100%}.h-px{height:1px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-3{width:.75rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[0\.22em\]{width:.22em}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-\[15rem\]{max-width:15rem}.max-w-\[46rem\]{max-width:46rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.origin-left{transform-origin:left}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-mt-20{scroll-margin-top:5rem}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-\[auto_repeat\(5\2c 1fr\)\]{grid-template-columns:auto repeat(5,1fr)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-0\.5{row-gap:.125rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-20>: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-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-\[1\.6rem\]>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.6rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.6rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-border>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:hsl(var(--border)/var(--tw-divide-opacity,1))}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.text-pretty{text-wrap:pretty}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:calc(var(--radius) + 6px)}.rounded-3xl{border-radius:1.5rem}.rounded-\[1\.6rem\]{border-radius:1.6rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 3px)}.rounded-xl{border-radius:calc(var(--radius) + 2px)}.border{border-width:1px}.border-\[6px\]{border-width:6px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-accent-ink\/20{border-color:rgb(var(--accent-ink)/.2)}.border-accent\/25{border-color:rgb(var(--accent)/.25)}.border-accent\/30{border-color:rgb(var(--accent)/.3)}.border-accent\/35{border-color:rgb(var(--accent)/.35)}.border-accent\/40{border-color:rgb(var(--accent)/.4)}.border-border{--tw-border-opacity:1;border-color:hsl(var(--border)/var(--tw-border-opacity,1))}.border-border\/70{border-color:hsl(var(--border)/.7)}.border-foreground\/85{border-color:hsl(var(--foreground)/.85)}.border-white\/25{border-color:hsla(0,0%,100%,.25)}.bg-accent{--tw-bg-opacity:1;background-color:rgb(var(--accent)/var(--tw-bg-opacity,1))}.bg-accent-soft{--tw-bg-opacity:1;background-color:rgb(var(--accent-soft)/var(--tw-bg-opacity,1))}.bg-accent-soft\/40{background-color:rgb(var(--accent-soft)/.4)}.bg-accent-soft\/50{background-color:rgb(var(--accent-soft)/.5)}.bg-accent\/15{background-color:rgb(var(--accent)/.15)}.bg-accent\/30{background-color:rgb(var(--accent)/.3)}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-400\/70{background-color:rgba(251,191,36,.7)}.bg-background{--tw-bg-opacity:1;background-color:hsl(var(--background)/var(--tw-bg-opacity,1))}.bg-background\/90{background-color:hsl(var(--background)/.9)}.bg-border{--tw-bg-opacity:1;background-color:hsl(var(--border)/var(--tw-bg-opacity,1))}.bg-card{--tw-bg-opacity:1;background-color:hsl(var(--card)/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\/70{background-color:rgba(52,211,153,.7)}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-foreground{--tw-bg-opacity:1;background-color:hsl(var(--foreground)/var(--tw-bg-opacity,1))}.bg-ink-soft{--tw-bg-opacity:1;background-color:rgb(var(--ink-soft)/var(--tw-bg-opacity,1))}.bg-muted{--tw-bg-opacity:1;background-color:hsl(var(--muted)/var(--tw-bg-opacity,1))}.bg-muted-foreground\/30{background-color:hsl(var(--muted-foreground)/.3)}.bg-muted\/30{background-color:hsl(var(--muted)/.3)}.bg-muted\/40{background-color:hsl(var(--muted)/.4)}.bg-muted\/50{background-color:hsl(var(--muted)/.5)}.bg-muted\/60{background-color:hsl(var(--muted)/.6)}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-400\/70{background-color:hsla(0,91%,71%,.7)}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/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-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/65{--tw-gradient-from:rgba(0,0,0,.65) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.stroke-\[3\]{stroke-width:3}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-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-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1\.5{padding-bottom:.375rem}.pb-20{padding-bottom:5rem}.pb-6{padding-bottom:1.5rem}.pl-3{padding-left:.75rem}.pr-1{padding-right:.25rem}.pt-0\.5{padding-top:.125rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-7{padding-top:1.75rem}.text-center{text-align:center}.text-right{text-align:right}.align-baseline{vertical-align:baseline}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.6rem\]{font-size:.6rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.85rem\]{font-size:.85rem}.text-\[0\.88rem\]{font-size:.88rem}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.92rem\]{font-size:.92rem}.text-\[0\.95rem\]{font-size:.95rem}.text-\[0\.98rem\]{font-size:.98rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[1\.02rem\]{font-size:1.02rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.08rem\]{font-size:1.08rem}.text-\[1\.15rem\]{font-size:1.15rem}.text-\[1\.1rem\]{font-size:1.1rem}.text-\[1\.6rem\]{font-size:1.6rem}.text-\[1rem\]{font-size:1rem}.text-\[3\.4rem\]{font-size:3.4rem}.text-\[clamp\(1\.7rem\2c 2\.8vw\2c 2\.4rem\)\]{font-size:clamp(1.7rem,2.8vw,2.4rem)}.text-\[clamp\(1\.9rem\2c 3\.2vw\2c 2\.9rem\)\]{font-size:clamp(1.9rem,3.2vw,2.9rem)}.text-\[clamp\(2\.6rem\2c 4\.9vw\2c 4\.4rem\)\]{font-size:clamp(2.6rem,4.9vw,4.4rem)}.text-\[clamp\(2rem\2c 3\.6vw\2c 3\.1rem\)\]{font-size:clamp(2rem,3.6vw,3.1rem)}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.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-\[1\.06\]{line-height:1.06}.leading-\[1\.08\]{line-height:1.08}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-accent{--tw-text-opacity:1;color:rgb(var(--accent)/var(--tw-text-opacity,1))}.text-accent-foreground{--tw-text-opacity:1;color:rgb(var(--accent-fg)/var(--tw-text-opacity,1))}.text-accent-ink{--tw-text-opacity:1;color:rgb(var(--accent-ink)/var(--tw-text-opacity,1))}.text-accent-ink\/70{color:rgb(var(--accent-ink)/.7)}.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-background{--tw-text-opacity:1;color:hsl(var(--background)/var(--tw-text-opacity,1))}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.text-foreground{--tw-text-opacity:1;color:hsl(var(--foreground)/var(--tw-text-opacity,1))}.text-foreground\/70{color:hsl(var(--foreground)/.7)}.text-foreground\/80{color:hsl(var(--foreground)/.8)}.text-muted-foreground{--tw-text-opacity:1;color:hsl(var(--muted-foreground)/var(--tw-text-opacity,1))}.text-muted-foreground\/50{color:hsl(var(--muted-foreground)/.5)}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/35{color:hsla(0,0%,100%,.35)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-white\/85{color:hsla(0,0%,100%,.85)}.text-white\/90{color:hsla(0,0%,100%,.9)}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-80{opacity:.8}.shadow-\[0_1px_16px_-6px_rgb\(17_20_28\/0\.18\)\]{--tw-shadow:0 1px 16px -6px rgb(17 20 28/0.18);--tw-shadow-colored:0 1px 16px -6px var(--tw-shadow-color)}.shadow-\[0_1px_16px_-6px_rgb\(17_20_28\/0\.18\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm)}.shadow-xl{--tw-shadow:var(--shadow-xl);--tw-shadow-colored:var(--shadow-xl);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black\/10{--tw-ring-color:rgba(0,0,0,.1)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-md{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[height\]{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.marker\:content-\[\'\'\] ::marker{--tw-content:"";content:var(--tw-content)}.marker\:content-\[\'\'\]::marker{--tw-content:"";content:var(--tw-content)}.last\:border-b-0:last-child{border-bottom-width:0}.hover\:border-accent\/35:hover{border-color:rgb(var(--accent)/.35)}.hover\:bg-accent-ink:hover{--tw-bg-opacity:1;background-color:rgb(var(--accent-ink)/var(--tw-bg-opacity,1))}.hover\:bg-white\/90:hover{background-color:hsla(0,0%,100%,.9)}.hover\:text-accent-ink:hover{--tw-text-opacity:1;color:rgb(var(--accent-ink)/var(--tw-text-opacity,1))}.hover\:text-foreground:hover{--tw-text-opacity:1;color:hsl(var(--foreground)/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-accent\/40:focus-visible{--tw-ring-color:rgb(var(--accent)/0.4)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-background:focus-visible{--tw-ring-offset-color:hsl(var(--background)/1)}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98}.active\:scale-\[0\.98\]:active,.group[open] .group-open\:rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group[open] .group-open\:rotate-45{--tw-rotate:45deg}.group[open] .group-open\:border-accent\/40{border-color:rgb(var(--accent)/.4)}.group[open] .group-open\:text-accent-ink{--tw-text-opacity:1;color:rgb(var(--accent-ink)/var(--tw-text-opacity,1))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.group:hover .group-hover\:scale-105,.group:hover .group-hover\:scale-\[1\.04\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-\[1\.04\]{--tw-scale-x:1.04;--tw-scale-y:1.04}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-5{gap:1.25rem}.sm\:p-10{padding:2.5rem}.sm\:p-5{padding:1.25rem}.sm\:p-9{padding:2.25rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.6fr_1fr_1fr\]{grid-template-columns:1.6fr 1fr 1fr}}@media (min-width:1024px){.lg\:block{display:block}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[1\.05fr_0\.95fr\]{grid-template-columns:1.05fr .95fr}.lg\:gap-10{gap:2.5rem}.lg\:gap-20{gap:5rem}.lg\:space-y-28>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(7rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(7rem*var(--tw-space-y-reverse))}.lg\:\[\&\>\*\:first-child\]\:order-2>:first-child{order:2}}
/* ==========================================================================
   Design tokens Omega — porting statico di src/app/globals.css.
   Solo la parte usata dalle pagine pubbliche (home + landing gestionali):
   niente shell gestionale (.app-main-bg, .sidebar-scroll), niente stampa dei
   documenti legali (fuori dal perimetro di questa build). Il resto è
   identico riga per riga alla fonte, perché i due sistemi restino sullo
   stesso family design finché convivono.
   ========================================================================== */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --background: 220 27% 98.2%;
  --foreground: 226 38% 8%;
  --muted: 220 22% 94.8%;
  --muted-foreground: 222 12% 42%;
  --card: 0 0% 100%;
  --card-foreground: 226 38% 8%;
  --border: 220 20% 90.5%;
  --input: 220 18% 87%;
  --ring: 0 72% 51%;
  --radius: 14px;

  --accent: 211 47 47;
  --accent-ink: 185 28 28;
  --accent-soft: 254 242 242;
  --accent-fg: 255 255 255;

  --success: 158 64% 30%;
  --success-soft: 150 60% 95%;
  --warning: 32 95% 38%;
  --warning-soft: 45 95% 94%;
  --danger: 0 72% 44%;
  --danger-soft: 0 86% 96.5%;
  --info: 221 78% 48%;
  --info-soft: 216 90% 95.5%;

  --ink: 5 7 14;
  --ink-soft: 11 18 32;

  /* Palette delle pagine di vendita: bianca, un solo grigio di appoggio, un
     bordo sottilissimo. La carta calda di prima (hue 30, 26% di saturazione)
     tingeva ogni fondo e faceva leggere la pagina come "beige": qui resta
     appena un soffio di caldo nei grigi (hue 30, saturazione bassa) e il
     fondo torna bianco pieno. */
  --mkt-background: 0 0% 100%;
  --mkt-foreground: 220 22% 13%;
  --mkt-muted: 30 14% 97.3%;
  --mkt-muted-foreground: 220 8% 44%;
  --mkt-border: 26 12% 90.5%;
  --mkt-input: 26 12% 86%;
  --mkt-ink: 20 22 30;
  --mkt-ink-soft: 32 36 47;

  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 2px 6px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 5px 12px -3px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 16px 36px -10px rgb(15 23 42 / 0.14), 0 6px 16px -8px rgb(15 23 42 / 0.08);
  --shadow-xl: 0 30px 64px -16px rgb(15 23 42 / 0.24), 0 12px 28px -12px rgb(15 23 42 / 0.11);
  --shadow-glow: 0 0 0 1px rgb(var(--accent) / 0.10), 0 10px 34px -8px rgb(var(--accent) / 0.35);
}

.mkt {
  --background: var(--mkt-background);
  --foreground: var(--mkt-foreground);
  --muted: var(--mkt-muted);
  --muted-foreground: var(--mkt-muted-foreground);
  --border: var(--mkt-border);
  --input: var(--mkt-input);
  --ink: var(--mkt-ink);
  --ink-soft: var(--mkt-ink-soft);
  --radius: 12px;
  /* Ombre delle pagine di vendita: una sola, larga e quasi invisibile, al
     posto della scala a cinque gradini del gestionale. Una card non deve
     "staccarsi" dal foglio, deve solo non sparirci dentro. */
  --shadow-sm: 0 1px 2px rgb(17 20 28 / 0.04);
  --shadow-md: 0 2px 4px rgb(17 20 28 / 0.03), 0 10px 26px -14px rgb(17 20 28 / 0.16);
  --shadow-lg: 0 3px 6px rgb(17 20 28 / 0.03), 0 18px 44px -20px rgb(17 20 28 / 0.20);
  --shadow-xl: 0 6px 12px rgb(17 20 28 / 0.04), 0 34px 70px -30px rgb(17 20 28 / 0.24);
  --shadow-glow: 0 10px 26px -12px rgb(var(--accent) / 0.42);
}

/* ==========================================================================
   Griglia: una larghezza sola per tutto il sito. Prima ogni sezione ripeteva
   `max-w-6xl` (1152px) e a 1600px di schermo restavano 220px di margine per
   lato: la pagina leggeva stretta. Qui il contenuto arriva a 1360px e il
   respiro laterale cresce con lo schermo invece di essere fisso a 20px.
   `.wrap-tight` è per i blocchi che devono restare leggibili a riga corta
   (FAQ, testi lunghi): la larghezza della pagina non è la larghezza della
   riga di testo.
   ========================================================================== */
.wrap {
  width: 100%;
  margin-inline: auto;
  max-width: 1360px;
  padding-inline: clamp(1.25rem, 3.6vw, 2.75rem);
}
.wrap-tight {
  width: 100%;
  margin-inline: auto;
  max-width: 940px;
  padding-inline: clamp(1.25rem, 3.6vw, 2.75rem);
}

/* ==========================================================================
   HERO A TUTTO SCHERMO — il video sta sotto, il testo ci sta sopra.

   Regole del blocco, tutte per lo stesso motivo (il testo deve restare
   leggibile su una ripresa che non controlliamo):
    · il velo non è una tinta piatta ma due gradienti sovrapposti — uno
      verticale che scurisce cima (dove passa la barra) e fondo (dove sta il
      testo), uno da sinistra che protegge la colonna scritta lasciando
      respirare la parte destra dell'immagine;
    · il rientro di 4rem in cima: la barra del sito è `sticky`, quindi resta
      in flusso e occupa la sua altezza (h-16). Senza il margine negativo il
      video comincerebbe SOTTO l'header invece di scorrergli dietro;
    · niente parallax e niente zoom sul video: si muove già da sé, un
      secondo movimento sopra si legge come rumore.
   ========================================================================== */
.hero-full {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 34rem;
  min-height: min(92svh, 60rem);
  margin-top: -4rem;
  background: rgb(8 10 14);
  color: #fff;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Il video sta SOPRA il fermo-immagine e si accende in dissolvenza solo
   quando parte davvero (site.js scrive `data-playing`): senza, fra il momento
   in cui la sorgente viene iniettata e il primo fotogramma si vedrebbe un
   buco nero al posto dell'hero. Vale anche per le due landing con foglio
   proprio (Tattoo, People): stesso attributo, stessa regola. */
video[data-hero-video] {
  opacity: 0;
  transition: opacity 0.7s ease;
}
video[data-hero-video][data-playing='1'] {
  opacity: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(8 10 14 / 0.66) 0%, rgb(8 10 14 / 0.20) 30%, rgb(8 10 14 / 0.42) 64%, rgb(8 10 14 / 0.86) 100%),
    linear-gradient(96deg, rgb(8 10 14 / 0.74) 0%, rgb(8 10 14 / 0.46) 44%, rgb(8 10 14 / 0.08) 74%, rgb(8 10 14 / 0) 90%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: calc(4rem + clamp(2.5rem, 8vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}
.hero-copy {
  max-width: 46rem;
}
/* Un'ombra appena percettibile sotto il titolo: non si vede come effetto, si
   vede solo quando manca — su un fotogramma chiaro il bianco su bianco. */
.hero-copy h1 {
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.42);
}
.hero-copy p {
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.38);
}
/* La riga in accento del titolo: sul chiaro era il colore pieno dell'edizione,
   sul video non reggerebbe (il rosso di casa su fondo scuro vibra). Qui è lo
   stesso colore schiarito verso il bianco, così ogni gestionale mantiene la
   sua tinta senza perdere leggibilità. Il fallback è bianco pieno. */
.hero-accent {
  color: #fff;
}
@supports (color: color-mix(in srgb, red, white)) {
  .hero-accent {
    color: color-mix(in srgb, rgb(var(--accent)) 58%, #fff);
  }
}

@media (max-width: 640px) {
  .hero-full {
    min-height: min(88svh, 46rem);
  }
  /* Su telefono il testo occupa tutta la larghezza, quindi il gradiente da
     sinistra non protegge niente: copre solo la foto — che qui, senza video,
     è tutto quello che c'è. Resta il solo velo verticale. */
  .hero-scrim {
    background: linear-gradient(180deg, rgb(8 10 14 / 0.62) 0%, rgb(8 10 14 / 0.30) 34%, rgb(8 10 14 / 0.54) 68%, rgb(8 10 14 / 0.88) 100%);
  }
}

/* Ritmo verticale unico fra le sezioni. */
.section {
  padding-block: clamp(3.5rem, 5.5vw, 5.5rem);
}
.section-sm {
  padding-block: clamp(2.5rem, 4vw, 4rem);
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: clip;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

::selection {
  background: rgb(var(--accent));
  color: rgb(var(--accent-fg));
}

.headline {
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.headline-hero {
  letter-spacing: -0.045em;
  text-wrap: balance;
  line-height: 1.02;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

.glass {
  background: hsl(var(--background) / 0.68);
  backdrop-filter: saturate(1.9) blur(14px);
  -webkit-backdrop-filter: saturate(1.9) blur(14px);
}
.glass-card {
  background: hsl(var(--card) / 0.66);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
}

.hover-lift {
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover { transform: none; }
}

.border-grad {
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
    linear-gradient(150deg, rgb(var(--accent) / 0.55), hsl(var(--border)) 42%, hsl(var(--border)) 65%, rgb(var(--accent) / 0.3)) border-box;
}
.border-grad-ink {
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(var(--ink-soft)), rgb(var(--ink-soft))) padding-box,
    linear-gradient(150deg, rgb(var(--accent) / 0.6), rgb(255 255 255 / 0.14) 45%, rgb(255 255 255 / 0.08) 70%, rgb(var(--accent) / 0.35)) border-box;
}

@media (max-width: 640px) {
  .tap { min-height: 44px; }
}

/* Fascia d'invito a fondo pagina: un colore pieno, non più quattro aloni
   sfumati sovrapposti al nero con sopra la grana. Il colore lo porta il tema
   del gestionale, quindi la fascia cambia da sola pagina per pagina. */
.cta-band {
  background: linear-gradient(180deg, rgb(var(--accent)) 0%, rgb(var(--accent-ink)) 100%);
}

/* --------------------------------------------------------- barra del sito

   Due stati, un attributo solo: `data-over-hero`. Finché la barra sta sopra
   l'hero a tutto schermo è trasparente e scrive in bianco; appena si scorre
   torna la barra chiara di sempre. Tutto quello che cambia colore è elencato
   qui sotto e dipende da quell'unico attributo — è la protezione contro il
   bug dell'08/08 (logo bianco su barra bianca), che nasceva da due pezzi di
   stato tenuti separati e finiti fuori sincrono. */
.site-header {
  --logo-ink: rgb(var(--accent));
  background-color: hsl(var(--background) / 0.85);
  border-bottom: 1px solid hsl(var(--border));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.3s ease;
}
.site-header[data-over-hero='1'] {
  --logo-ink: #fff;
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header[data-over-hero='1'] .logo-word,
.site-header[data-over-hero='1'] .hdr-tag {
  color: #fff;
}
.site-header[data-over-hero='1'] .hdr-login {
  color: rgb(255 255 255 / 0.82);
}
.site-header[data-over-hero='1'] .hdr-login:hover {
  color: #fff;
}
.site-header[data-over-hero='1'] .hdr-sep {
  background-color: rgb(255 255 255 / 0.32);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.5s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.reveal.reveal-left { transform: translateX(-18px); }
.reveal.reveal-right { transform: translateX(18px); }
.reveal.reveal-scale { transform: scale(0.985); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Punto "vivo" nei mockup di prodotto (niche-signature): un respiro lento sul
   pallino verde della barra del titolo — la stessa convenzione dei prodotti
   veri per dire "in esecuzione", non un effetto decorativo a sé. */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.live-dot { animation: live-pulse 2.2s ease-in-out infinite; }

.browser-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-lg);
  background: hsl(var(--card));
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
}
.browser-dot { width: 10px; height: 10px; border-radius: 999px; background: hsl(var(--border)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-dot { animation: none; opacity: 1; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
}

/* ==========================================================================
   Marketing kit — tipografia display, eyebrow, headline a righe, reveal
   nativo legato allo scroll. Identico a globals.css, non è scoped a `.mkt`
   nella fonte quindi non lo è nemmeno qui.
   ========================================================================== */
.display {
  font-family: var(--font-display);
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.display-hero {
  font-family: var(--font-display);
  letter-spacing: -0.034em;
  line-height: 1.04;
  text-wrap: balance;
}

/* L'occhiello non è più un'etichetta maiuscola con il trattino davanti in
   ogni sezione: resta una parola sola, piccola, nel colore d'accento. Meno
   segni per sezione = pagina più silenziosa. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgb(var(--accent-ink));
}
.eyebrow-light { color: rgb(255 255 255 / 0.75); }

.headline-line {
  display: block;
  animation: headline-drop 0.7s cubic-bezier(0.16, 0.9, 0.24, 1) both;
}
@keyframes headline-drop {
  from { opacity: 0; transform: translateY(0.22em); }
  to { opacity: 1; transform: none; }
}

/* Foto e mockup entrano da soli mentre la sezione sale: una risalita corta,
   dal compositor, senza JS. Ha sostituito i tre parallax di prima (hero,
   media, zoom dell'hero), che muovevano immagini per tutta la pagina —
   piacevole una volta, rumoroso per dodici sezioni di fila. */
@supports (animation-timeline: view()) {
  .view-rise {
    animation: view-rise 1ms linear both;
    animation-timeline: view();
    animation-range: entry 6% entry 52%;
  }
}
@keyframes view-rise {
  from { opacity: 0.001; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Riempimento del filo dei passaggi (`steps()` in sections.ts): sopra al
   trattino statico esistente, un secondo filo pieno che si allunga da
   sinistra mentre la sezione attraversa il viewport — rinforza "sono in
   sequenza" senza aggiungere altro. Fuori da `@supports`/reduced-motion resta
   `scaleX(1)`, cioè un filo pieno fermo: mai un filo "a metà" per chi non
   vede l'animazione. */
.steps-fill { transform-origin: left center; }
@supports (animation-timeline: view()) {
  /* La timeline è quella del CONTENITORE dei passi (`.steps-track`), non del
     filo stesso: un elemento alto 2px entra ed esce dallo schermo in due
     pixel di scorrimento, quindi la sua fase "entry" durerebbe due pixel e
     il riempimento sarebbe uno scatto invece di una crescita. Nominare la
     timeline sul contenitore (che ha un'altezza vera) e farla leggere al
     filo risolve — stessa causa, stesso fix, trovato in parallelo anche
     nelle pagine bespoke di Tattoo e People. */
  .steps-track { view-timeline-name: --steps-track; }
  .steps-fill {
    animation: steps-fill-grow 1ms linear both;
    animation-timeline: --steps-track;
    animation-range: entry 15% entry 85%;
  }
}
@keyframes steps-fill-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cv-auto {
  /* intenzionalmente vuoto — vedi commento nella fonte */
}

@media (hover: hover) {
  .arrow-slide svg { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .arrow-slide:hover svg { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .view-rise, .headline-line, .steps-fill {
    animation: none; opacity: 1; transform: none; scale: none; translate: none;
  }
}

/* ---- Font self-hosted (Inter, unico, subset latin) ------------------------
   Un solo carattere su tutta la pagina: niente serif d'accento, l'accento è
   solo colore (vedi `serif()`/`accentText()` in sections.ts). `--font-display`
   resta come variabile/hook usata da titoli e bespoke (tattoo.css/people.css)
   invece di essere rimossa ovunque: punta allo stesso stack di `--font-sans`,
   così i pesi alti (700/800/900) restano l'unico modo di fare gerarchia. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
}