*,: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}.-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-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1\.5{margin-left:.375rem}.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-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-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-4{height:1rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[0\.22em\]{height:.22em}.h-full{height:100%}.h-px{height:1px}.w-11{width:2.75rem}.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-\[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))}.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\.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-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))}.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-2xl{border-radius:calc(var(--radius) + 6px)}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:calc(var(--radius) + 2px)}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.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\/35{border-color:rgb(var(--accent)/.35)}.border-border{--tw-border-opacity:1;border-color:hsl(var(--border)/var(--tw-border-opacity,1))}.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\/50{background-color:rgb(var(--accent-soft)/.5)}.bg-accent\/30{background-color:rgb(var(--accent)/.3)}.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-muted{--tw-bg-opacity:1;background-color:hsl(var(--muted)/var(--tw-bg-opacity,1))}.bg-muted\/50{background-color:hsl(var(--muted)/.5)}.bg-muted\/60{background-color:hsl(var(--muted)/.6)}.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-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)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-5{padding:1.25rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.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-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}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.78rem\]{font-size:.78rem}.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\(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-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}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-tight{letter-spacing:-.025em}.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-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-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}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--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-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\.5fr_1fr\]{grid-template-columns:1.5fr 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);
}

/* ==========================================================================
   LA LANDING DI OMEGA TATTOO — foglio di stile SUO.

   È un CSS Module: ogni classe qui dentro viene rinominata in fase di build,
   quindi non può toccare nessun'altra pagina e nessun'altra pagina può toccare
   lei. È la ragione per cui questa landing può permettersi un'identità forte —
   nero, grana, tratto — senza che quel gusto finisca addosso alle altre
   quattordici.

   Due regole tenute per tutto il file:
    · si animano solo `opacity` e `transform` (girano sul compositor: restano
      fluide quanto lo scroll anche su un telefono vecchio);
    · niente animazione può lasciare del contenuto invisibile se il browser non
      la supporta o se l'utente ha chiesto meno movimento.
   ========================================================================== */

.tt-page {
  /* L'accento dell'edizione è quasi nero (#0f172a): perfetto sul chiaro,
     invisibile sul fondo scuro. Le sezioni scure usano questa variabile al
     posto di `--accent`, così ogni testo e ogni bottone restano leggibili
     senza dover riscrivere una classe alla volta. */
  --tt-ink: 10 10 11;
  --tt-accent: 244 244 245;
  --tt-accent-dim: 161 161 170;
  /* Palette PROPRIA: la pagina non legge le variabili del tema condiviso —
     lì `--border` è in HSL e `--accent` è quasi nero — così non dipende da
     scelte fatte altrove e non si rompe se quelle cambiano. */
  --tt-line: #e4e4e7;
  --tt-surface: #ffffff;
  --tt-fg: #18181b;
  --tt-muted: #71717a;
  --tt-wash: #fafafa;
  color: var(--tt-fg);
  background: var(--tt-surface);
}

/* --------------------------------------------------------------- struttura */

.tt-section { padding-block: clamp(3.5rem, 5.5vw, 5.5rem); }
.tt-wrap {
  margin-inline: auto;
  width: 100%;
  max-width: 85rem;
  padding-inline: clamp(1.25rem, 3.6vw, 2.75rem);
}
.tt-dark {
  position: relative;
  overflow: hidden;
  background: rgb(var(--tt-ink));
  color: #fff;
}

.tt-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-muted);
}

.tt-h2 {
  /* Stesso sans di tutto il brand, ma pesante e stretto: qui l'identità
     resta nera e di grana, il carattere condiviso è solo il peso. */
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.tt-lead {
  margin-top: 1.1rem;
  max-width: 46rem;
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  line-height: 1.65;
}

/* ------------------------------------------------------------------- hero */

/* Hero a tutto schermo, come le altre quindici: lo studio riempie il primo
   schermo e il testo ci sta sopra. Il velo (`.tt-heroScrim`) è il pezzo che
   rende la cosa possibile — su una ripresa nera e contrastata come questa il
   bianco reggerebbe comunque, ma non su un fotogramma con la lampada
   accesa in campo. La barra del sito ci scorre dietro trasparente: è il
   `margin-top` negativo qui sotto a farla entrare dentro l'immagine. */
.tt-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 34rem;
  min-height: min(92svh, 60rem);
  margin-top: -4rem;
  background: rgb(var(--tt-ink));
  color: #fff;
}
.tt-heroMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-heroScrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(6 6 8 / 0.68) 0%, rgb(6 6 8 / 0.18) 28%, rgb(6 6 8 / 0.40) 62%, rgb(6 6 8 / 0.86) 100%),
    linear-gradient(96deg, rgb(6 6 8 / 0.72) 0%, rgb(6 6 8 / 0.42) 42%, rgb(6 6 8 / 0.06) 74%, rgb(6 6 8 / 0) 90%);
}
.tt-heroInner {
  position: relative;
  z-index: 2;
  padding-top: calc(4rem + clamp(2.5rem, 8vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}
.tt-heroCopy { max-width: 46rem; }
@media (max-width: 640px) {
  .tt-hero { min-height: min(88svh, 46rem); }
  /* Su telefono il testo prende tutta la larghezza: il gradiente da sinistra
     coprirebbe la foto senza proteggere niente. */
  .tt-heroScrim {
    background: linear-gradient(180deg, rgb(6 6 8 / 0.62) 0%, rgb(6 6 8 / 0.32) 34%, rgb(6 6 8 / 0.56) 68%, rgb(6 6 8 / 0.9) 100%);
  }
}

/* Il vestito scuro dell'hero: le stesse classi della pagina chiara, ribaltate
   una volta sola qui invece che duplicate in HTML. */
.tt-hero .tt-h1 { text-shadow: 0 2px 30px rgb(0 0 0 / 0.45); }
.tt-hero .tt-h1 em { color: rgb(255 255 255 / 0.62); }
.tt-hero .tt-heroSub { color: rgb(255 255 255 / 0.82); text-shadow: 0 1px 16px rgb(0 0 0 / 0.4); }
.tt-hero .tt-cta { background: #fff; color: rgb(var(--tt-ink)); }
.tt-hero .tt-cta:hover { background: rgb(255 255 255 / 0.9); }
.tt-hero .tt-ctaGhost { color: #fff; }
.tt-hero .tt-chip,
.tt-hero .tt-chipSolo {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tt-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.tt-h1 span { display: block; }
.tt-h1 em {
  font-style: normal;
  /* Seconda riga in grigio scuro: sull'accento di questa edizione (quasi nero)
     non si può colorare la parola come sulle altre landing, quindi la
     gerarchia la fa il tono. */
  color: rgb(var(--tt-ink) / 0.5);
}
.tt-heroSub {
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
  max-width: 44rem;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.65;
  color: var(--tt-muted);
}
.tt-heroActions {
  margin-top: clamp(1.5rem, 4vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.tt-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background: rgb(var(--tt-ink));
  color: #fff;
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tt-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgb(0 0 0 / 0.45); }
/* Stesso bottone dentro la fascia scura di fondo pagina: i ruoli si invertono. */
.tt-dark .tt-cta { background: #fff; color: rgb(var(--tt-ink)); }
.tt-ctaGhost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tt-fg);
  opacity: 0.8;
}
.tt-ctaGhost:hover { opacity: 1; }

.tt-chips {
  margin-top: clamp(1.4rem, 3.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tt-chip {
  border-radius: 999px;
  border: 1px solid var(--tt-line);
  background: var(--tt-wash);
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tt-muted);
}
.tt-dark .tt-chip { border-color: rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.07); color: rgb(255 255 255 / 0.8); }

/* Le due righe del titolo si posano sfalsate, come una stampa che scende. */
.tt-line { animation: tt-drop 0.9s cubic-bezier(0.16, 0.9, 0.24, 1) both; }
.tt-line2 { animation-delay: 0.14s; }
@keyframes tt-drop {
  from { opacity: 0; transform: translateY(0.45em); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- la comparsa */

/* Un solo meccanismo per tutta la pagina, e con un fallback che NON nasconde:
   se il browser non sa fare le animazioni allo scroll, il contenuto è già lì. */
.tt-reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tt-reveal {
      animation: tt-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
  }
}
@keyframes tt-rise {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- la grana */

/* Texture SVG inline: nessun file, nessuna richiesta in più. Va SOLO sopra le
   immagini, mai sopra al testo. */
.tt-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.tt-w3.tt-org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Il nero sulle fotografie esiste solo dove c'è un puntatore che possa
   toglierlo: su un telefono l'hover non arriva mai, e una parete grigia per
   sempre non è stile, è un'immagine rotta. */
.tt-photo { transition: filter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) and (pointer: fine) {
  .tt-photo { filter: grayscale(1) contrast(1.15) brightness(0.88); }
  .tt-card:hover .tt-photo,
  .tt-tile:hover .tt-photo { filter: none; transform: scale(1.04); }
}

/* ------------------------------------------------------------- il muro */

.tt-wallMask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tt-wallRow { display: flex; width: max-content; gap: 0.6rem; animation: tt-slide 60s linear infinite; }
.tt-wallBack { animation-direction: reverse; animation-duration: 76s; }
@keyframes tt-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tt-tile {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 0.9rem;
  border: 1px solid var(--tt-line);
  width: clamp(7.5rem, 22vw, 13rem);
  aspect-ratio: 3 / 4;
}
.tt-tile img { height: 100%; width: 100%; object-fit: cover; }

/* --------------------------------------------------------- il manifesto */

.tt-manifesto {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(70svh, 40rem);
  overflow: hidden;
  color: #fff;
}
.tt-manifestoText {
  font-size: clamp(1.9rem, 6.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* ------------------------------------------------------------- griglie */

.tt-grid2 { display: grid; gap: 1.25rem; }
.tt-grid3 { display: grid; gap: 1rem; }
.tt-grid4 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .tt-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tt-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tt-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tt-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--tt-line);
  background: var(--tt-surface);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tt-cardDark {
  border-radius: 1.25rem;
  border: 1px solid var(--tt-line);
  background: var(--tt-surface);
  padding: clamp(1.2rem, 3vw, 1.75rem);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tt-feature {
  border-radius: 1rem;
  border: 1px solid var(--tt-line);
  padding: clamp(1.1rem, 2.5vw, 1.4rem);
  background: var(--tt-surface);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Quindici icone nere tutte uguali pesano quanto i titoli e li coprono: qui
   stanno un passo indietro, e tornano nere sotto il puntatore (più sotto). */
.tt-feature > svg { color: var(--tt-muted); transition: color 0.25s ease; }
.tt-featureTitle { margin-top: 0.75rem; font-weight: 700; font-size: 0.98rem; }
.tt-featureDesc { margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.6; }

/* --------------------------------------------------------- il percorso */

.tt-flow { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 1000px) { .tt-flow { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; } }

.tt-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.tt-stepBtn {
  display: flex;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  border-radius: 1rem;
  padding: 0.75rem;
  /* Il testo della sezione dice «toccale»: senza la mano sopra, nessuno sa
     che sono sei bottoni e non sei voci di elenco. */
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.tt-stepDot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--tt-line);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.tt-stepOn .tt-stepDot { background: rgb(var(--tt-ink)); border-color: rgb(var(--tt-ink)); color: #fff; }
.tt-stepStep { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tt-stepTitle { display: block; margin-top: 0.15rem; font-size: 0.95rem; font-weight: 650; line-height: 1.35; }
.tt-stepDesc { display: block; margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.6; }
.tt-stepKicker {
  display: inline-block;
  margin-top: 0.6rem;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 500;
}
.tt-rail { height: 3px; flex: 1; overflow: hidden; border-radius: 999px; }
.tt-railFill { display: block; height: 100%; border-radius: 999px; transform-origin: left center; animation: tt-fill linear forwards; }
@keyframes tt-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tt-screen {
  position: relative;
  overflow: hidden;
  border-radius: 1.4rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(var(--tt-ink));
  padding: clamp(1rem, 3vw, 1.35rem);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.5);
}
.tt-screenBody { min-height: 17rem; animation: tt-swap 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tt-swap {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ preventivo */

.tt-quote { display: grid; overflow: hidden; border-radius: 1.4rem; border: 1px solid var(--tt-line); }
@media (min-width: 720px) { .tt-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tt-quoteControls { padding: clamp(1.25rem, 3.5vw, 1.75rem); display: grid; gap: 1.1rem; align-content: start; }
.tt-quoteResult { position: relative; overflow: hidden; background: rgb(var(--tt-ink)); color: #fff; padding: clamp(1.25rem, 3.5vw, 1.75rem); }
.tt-quoteBig {
  font-size: clamp(2rem, 7vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* La barra di «ti resta»: la larghezza la scrive il JS, il tempo lo mette
   qui il CSS — così resta in passo con i numeri che si muovono accanto. */
.tt-quoteBar { display: block; height: 100%; border-radius: 999px; background: #4ade80; }
@media (prefers-reduced-motion: no-preference) {
  .tt-quoteBar { transition: width 0.42s cubic-bezier(0.2, 0.7, 0.2, 1); }
}

.tt-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  /* La parte già percorsa si annerisce mentre trascini: la percentuale la
     scrive il JS in `--tt-rangeFill`. Senza JS resta 0% — cioè esattamente
     il cursore chiaro di prima, non un cursore rotto. */
  background: linear-gradient(90deg,
    rgb(var(--tt-ink)) 0%,
    rgb(var(--tt-ink)) var(--tt-rangeFill, 0%),
    rgb(var(--tt-ink) / 0.15) var(--tt-rangeFill, 0%),
    rgb(var(--tt-ink) / 0.15) 100%);
  outline: none;
}
.tt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(var(--tt-ink));
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
  cursor: grab;
  transition: transform 0.15s ease;
}
.tt-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.tt-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgb(var(--tt-ink)) 0%,
    rgb(var(--tt-ink)) var(--tt-rangeFill, 0%),
    rgb(var(--tt-ink) / 0.15) var(--tt-rangeFill, 0%),
    rgb(var(--tt-ink) / 0.15) 100%);
}
.tt-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgb(var(--tt-ink)); border: 3px solid #fff; cursor: grab;
}
.tt-range:focus-visible { outline: 2px solid rgb(var(--tt-ink)); outline-offset: 4px; }

/* ------------------------------------------------------------------- FAQ */

.tt-faqItem { border-top: 1px solid var(--tt-line); }
.tt-faqItem summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.1rem;
  font-weight: 650;
  font-size: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
}
.tt-faqItem summary::-webkit-details-marker { display: none; }
.tt-faqItem summary::after {
  content: '+';
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.tt-faqItem[open] summary::after { transform: rotate(45deg); }
.tt-faqAnswer { padding-bottom: 1.2rem; line-height: 1.7; max-width: 60ch; }

/* -------------------------------------------------------------- rispetto */

@media (prefers-reduced-motion: reduce) {
  .tt-line, .tt-screenBody, .tt-railFill, .tt-reveal,
  .tt-drift, .tt-stepsFill, .tt-faqAnswer {
    /* Lo stato che resta è sempre QUELLO FINALE: il filo dei passaggi pieno
       (non a metà), la foto ferma al centro della sua cornice, la risposta
       della FAQ già aperta. Mai un fotogramma congelato a metà strada. */
    animation: none; opacity: 1; transform: none; translate: none; scale: none;
  }
  .tt-wallRow { animation: none; }
  .tt-photo { transition: none; }
  .tt-cta:hover { transform: none; }
}

/* ------------------------------------------------- classi usate dalla pagina */
/* Tutto ciò che serve al markup sta qui: la pagina non scrive stili inline per
   la struttura, così i punti di rottura sono in un posto solo e si leggono. */

.tt-sectionTight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.tt-wash { background: var(--tt-wash); }
.tt-narrow { max-width: 52rem; }
.tt-center { text-align: center; }
.tt-centerText { margin-inline: auto; }
.tt-blockGap { margin-top: clamp(1.6rem, 4.5vw, 2.8rem); }
.tt-onDark { color: var(--tt-muted); }
/* Il manifesto è l'unica sezione rimasta su fotografia scura: ha il suo. */
.tt-onPhoto { color: rgb(255 255 255 / 0.5); }

.tt-chipSolo {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--tt-line);
  background: var(--tt-surface);
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tt-muted);
  margin-bottom: 1.25rem;
}
.tt-chipsCenter { justify-content: center; }

.tt-manifestoMedia { position: absolute; inset: 0; z-index: -2; height: 100%; width: 100%; object-fit: cover; }
.tt-manifestoVeil { position: absolute; inset: 0; z-index: -1; background: rgb(var(--tt-ink) / 0.82); }
.tt-manifestoGrain { position: absolute; inset: 0; z-index: -1; }
.tt-manifestoGrain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.tt-w3.tt-org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.tt-manifesto .tt-wrap { padding-block: clamp(4rem, 12vw, 7rem); }

.tt-wallFast { animation-duration: 46s; }
.tt-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--tt-line);
  padding: 0.6rem 1.2rem;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.tt-h3 { margin-top: 0.8rem; font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700; }
.tt-h3Light { margin-top: 0.7rem; font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700; }
.tt-body { margin-top: 0.75rem; line-height: 1.7; font-size: 1rem; color: var(--tt-muted); }
.tt-note { margin-top: 2rem; max-width: 48rem; font-size: 0.86rem; line-height: 1.7; color: var(--tt-muted); }
.tt-note strong { color: var(--tt-fg); }

.tt-tagRow { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tt-tag { border-radius: 999px; background: var(--tt-wash); border: 1px solid var(--tt-line); padding: 0.3rem 0.7rem; font-size: 0.74rem; }
.tt-rows { margin-top: 1.1rem; display: grid; gap: 0.4rem; }
.tt-rowLine {
  display: flex; justify-content: space-between; gap: 0.75rem;
  border-radius: 0.7rem; background: var(--tt-wash);
  padding: 0.6rem 0.85rem; font-size: 0.86rem;
}

.tt-cardMedia { position: relative; height: clamp(9rem, 26vw, 13rem); overflow: hidden; }
.tt-cardMedia img { height: 100%; width: 100%; object-fit: cover; }
.tt-cardBody { padding: clamp(1.2rem, 3vw, 1.7rem); }
.tt-inlineIcon { display: inline; vertical-align: -2px; margin-right: 0.25rem; }

.tt-statValue { font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 800; line-height: 1.1; }
.tt-statLabel { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 650; }
.tt-statDesc { margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.6; color: var(--tt-muted); }

.tt-stepNum { font-size: 2rem; font-weight: 800; line-height: 1; opacity: 0.16; }
.tt-stepName { margin-top: 0.6rem; font-weight: 700; }

.tt-ctaTitle { margin-inline: auto; max-width: 20ch; }
.tt-ctaRow { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* Il titolo di sezione ha sempre lo stesso stacco dall'occhiello: senza, ogni
   sezione respirava in modo diverso. */
.tt-h2 { margin-top: 0.7rem; }

/* ------------------------------------------------------------ la profondità */

/* Stesso meccanismo di `.tt-reveal`, esteso: animazioni legate allo scroll,
   nessun JS, nessun IntersectionObserver — e fuori dal `@supports` la pagina
   è già nel suo stato definitivo, non nascosta in attesa di qualcosa.
   Si anima `translate` (proprietà a sé) e mai `transform`: sulle stesse
   immagini `transform` è già occupato dall'ingrandimento di `.tt-photo` e da
   `.tt-reveal`, e due animazioni sulla stessa proprietà si annullano. */

/* Le immagini a tutto schermo (il video dell'hero, la foto del manifesto)
   sono più alte del loro contenitore e centrate: la deriva le muove dentro
   quel margine, così non scopre mai un bordo nero. Con `inset: 0` già
   dichiarato, `top` + `height` insieme sovra-vincolano la scatola e il
   browser ignora `bottom` — che è esattamente quello che serve qui. */
.tt-drift { top: -12%; height: 124%; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tt-drift {
      animation: tt-drift 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes tt-drift {
  from { translate: 0 -5%; }
  to { translate: 0 5%; }
}
}

/* Il filo dei quattro passaggi: un tratto chiaro sempre presente e, sopra,
   un tratto nero che si scrive da sinistra mentre la sezione sale — la
   stessa idea della sequenza sulle altre landing, qui col nero della
   pagina invece dell'accento. Sta nello spazio fra il numero e il titolo:
   non attraversa nessuna parola. */
.tt-stepsRow { position: relative; }
.tt-stepsLine, .tt-stepsFill {
  display: none;
  position: absolute;
  /* A tutta colonna, non rientrato: qui i numeri sono allineati a sinistra,
     e un filo che parte dopo l'1 e finisce nel vuoto dopo il 4 sembrerebbe
     messo a caso. Da bordo a bordo è il tratto di penna sotto ai quattro. */
  left: 0;
  right: 0;
  top: 2.25rem;
  height: 2px;
  border-radius: 999px;
}
/* Sotto le quattro colonne i passaggi vanno a capo: un filo orizzontale
   collegherebbe cose che non sono più in fila. */
@media (min-width: 900px) { .tt-stepsLine, .tt-stepsFill { display: block; } }
.tt-stepsLine { background: var(--tt-line); }
.tt-stepsFill {
  /* Nero pieno fino in fondo e poi scarico: un tratto che finisce, non un
     rettangolo che si interrompe. */
  background: linear-gradient(90deg, rgb(var(--tt-ink)) 0%, rgb(var(--tt-ink)) 88%, rgb(var(--tt-ink) / 0) 100%);
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tt-stepsFill {
      animation: tt-stroke 1ms linear both;
      animation-timeline: view();
      /* `cover` e non `entry`: il filo è alto 2px, e la fase d'ingresso di un
         elemento di 2px dura 2px di scorrimento — si riempirebbe in un
         fotogramma. `cover` misura tutta la traversata del viewport. */
      animation-range: cover 10% cover 45%;
    }
  }
}
@keyframes tt-stroke {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* La risposta della FAQ entra invece di comparire di scatto. Fuori
   dall'animazione è semplicemente visibile: `<details>` la mostra da solo. */
@media (prefers-reduced-motion: no-preference) {
  .tt-faqItem[open] .tt-faqAnswer { animation: tt-faqOpen 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes tt-faqOpen {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------- reazioni al puntatore */

/* Niente di decorativo: ogni regola qui sotto risponde a un gesto. Tutte
   dentro `hover: hover`, perché su un telefono un hover che non arriva mai
   lascerebbe la pagina in uno stato intermedio per sempre. */
@media (hover: hover) and (pointer: fine) {
  .tt-feature:hover { border-color: rgb(var(--tt-ink) / 0.32); box-shadow: 0 14px 30px -22px rgb(0 0 0 / 0.55); }
  .tt-feature:hover > svg { color: rgb(var(--tt-ink)); }
  .tt-card:hover { border-color: rgb(var(--tt-ink) / 0.28); box-shadow: 0 22px 45px -30px rgb(0 0 0 / 0.55); }
  .tt-cardDark:hover { border-color: rgb(var(--tt-ink) / 0.25); box-shadow: 0 2px 4px rgb(17 20 28 / 0.03), 0 10px 26px -14px rgb(17 20 28 / 0.16); }
  .tt-stepBtn:hover { background-color: rgb(0 0 0 / 0.035); }
  .tt-stepBtn:hover .tt-stepDot { border-color: rgb(var(--tt-ink) / 0.4); }
  /* Il nastro si ferma dove guardi. Senza, la foto che si accende sotto il
     puntatore scappa via prima di essersi accesa: l'effetto c'era già, ma
     non era raggiungibile. */
  .tt-wallRow:hover { animation-play-state: paused; }
}

/* Le uniche che spostano davvero qualcosa: doppia condizione. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tt-feature:hover { translate: 0 -2px; }
  .tt-cta svg, .tt-ctaGhost svg { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .tt-cta:hover svg, .tt-ctaGhost:hover svg { transform: translateX(3px); }
}

/* ------------------------------------------------------- rete di sicurezza */
/* Due guardie che non cambiano nulla quando tutto va bene, e salvano la pagina
   quando qualcosa esce dai binari: un titolo lunghissimo, un numero grosso, un
   nastro che sfugge. `clip` e non `hidden`: `hidden` creerebbe un contenitore
   di scorrimento e romperebbe gli elementi appiccicati dell'intestazione. */
.tt-page { overflow-x: clip; }
.tt-page :where(h1, h2, h3, p, span, summary) { overflow-wrap: break-word; }