/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-4xl:56rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-bold:700;--tracking-tighter:-.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:#1f3c88;--color-logoBlue:#009dff;--color-dark:#2e2e2e;--color-accent:#c6a75e}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:calc(var(--spacing) * 0)}.right-6{right:calc(var(--spacing) * 6)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-4{left:calc(var(--spacing) * 4)}.left-6{left:calc(var(--spacing) * 6)}.z-10{z-index:10}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[55\]{z-index:55}.z-\[60\]{z-index:60}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-20{margin-top:calc(var(--spacing) * 20)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.mb-20{margin-bottom:calc(var(--spacing) * 20)}.ml-2{margin-left:calc(var(--spacing) * 2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-1{height:calc(var(--spacing) * 1)}.h-1\/3{height:33.3333%}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-\[56vw\]{height:56vw}.h-auto{height:auto}.h-full{height:100%}.max-h-\[320px\]{max-height:320px}.min-h-screen{min-height:100vh}.w-2\/5{width:40%}.w-4{width:calc(var(--spacing) * 4)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-80{width:calc(var(--spacing) * 80)}.w-auto{width:auto}.w-full{width:100%}.max-w-4xl{max-width:var(--container-4xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-\[420px\]{max-width:420px}.flex-shrink{flex-shrink:1}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-12{gap:calc(var(--spacing) * 12)}.gap-20{gap:calc(var(--spacing) * 20)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-accent{border-color:var(--color-accent)}.border-dark{border-color:var(--color-dark)}.border-gray-50{border-color:var(--color-gray-50)}.border-gray-100{border-color:var(--color-gray-100)}.border-logoBlue{border-color:var(--color-logoBlue)}.border-logoBlue\/30{border-color:#009dff4d}@supports (color:color-mix(in lab, red, red)){.border-logoBlue\/30{border-color:color-mix(in oklab, var(--color-logoBlue) 30%, transparent)}}.border-primary{border-color:var(--color-primary)}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-white\/30{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.border-white\/30{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.bg-\[\#0F172A\]{background-color:#0f172a}.bg-accent\/5{background-color:#c6a75e0d}@supports (color:color-mix(in lab, red, red)){.bg-accent\/5{background-color:color-mix(in oklab, var(--color-accent) 5%, transparent)}}.bg-accent\/10{background-color:#c6a75e1a}@supports (color:color-mix(in lab, red, red)){.bg-accent\/10{background-color:color-mix(in oklab, var(--color-accent) 10%, transparent)}}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.bg-dark\/5{background-color:#2e2e2e0d}@supports (color:color-mix(in lab, red, red)){.bg-dark\/5{background-color:color-mix(in oklab, var(--color-dark) 5%, transparent)}}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-logoBlue{background-color:var(--color-logoBlue)}.bg-logoBlue\/5{background-color:#009dff0d}@supports (color:color-mix(in lab, red, red)){.bg-logoBlue\/5{background-color:color-mix(in oklab, var(--color-logoBlue) 5%, transparent)}}.bg-logoBlue\/10{background-color:#009dff1a}@supports (color:color-mix(in lab, red, red)){.bg-logoBlue\/10{background-color:color-mix(in oklab, var(--color-logoBlue) 10%, transparent)}}.bg-primary\/5{background-color:#1f3c880d}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary) 5%, transparent)}}.bg-slate-900{background-color:var(--color-slate-900)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-slate-800{--tw-gradient-from:var(--color-slate-800);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-slate-950{--tw-gradient-to:var(--color-slate-950);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-center{object-position:center}.p-3{padding:calc(var(--spacing) * 3)}.p-10{padding:calc(var(--spacing) * 10)}.p-12{padding:calc(var(--spacing) * 12)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.py-24{padding-block:calc(var(--spacing) * 24)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pt-12{padding-top:calc(var(--spacing) * 12)}.pt-20{padding-top:calc(var(--spacing) * 20)}.pt-28{padding-top:calc(var(--spacing) * 28)}.pt-\[68px\]{padding-top:68px}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-10{padding-bottom:calc(var(--spacing) * 10)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-11{padding-left:calc(var(--spacing) * 11)}.text-center{text-align:center}.text-left{text-align:left}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[11px\]{font-size:11px}.leading-\[1\.15\]{--tw-leading:1.15;line-height:1.15}.leading-\[1\.75\]{--tw-leading:1.75;line-height:1.75}.leading-\[1\.85\]{--tw-leading:1.85;line-height:1.85}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-\[800\]{--tw-font-weight:800;font-weight:800}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.tracking-tighter{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--color-accent)}.text-dark{color:var(--color-dark)}.text-dark\/60{color:#2e2e2e99}@supports (color:color-mix(in lab, red, red)){.text-dark\/60{color:color-mix(in oklab, var(--color-dark) 60%, transparent)}}.text-dark\/70{color:#2e2e2eb3}@supports (color:color-mix(in lab, red, red)){.text-dark\/70{color:color-mix(in oklab, var(--color-dark) 70%, transparent)}}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-logoBlue{color:var(--color-logoBlue)}.text-primary{color:var(--color-primary)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-logoBlue\/20{--tw-shadow-color:#009dff33}@supports (color:color-mix(in lab, red, red)){.shadow-logoBlue\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-logoBlue) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.invert{--tw-invert:invert(100%);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,)}.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-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.group-hover\:bg-accent:is(:where(.group):hover *){background-color:var(--color-accent)}.group-hover\:bg-dark:is(:where(.group):hover *){background-color:var(--color-dark)}.group-hover\:bg-logoBlue:is(:where(.group):hover *){background-color:var(--color-logoBlue)}.group-hover\:bg-primary:is(:where(.group):hover *){background-color:var(--color-primary)}.group-hover\:text-white:is(:where(.group):hover *){color:var(--color-white)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-\[1\.02\]:hover{scale:1.02}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:text-logoBlue:hover{color:var(--color-logoBlue)}.hover\:text-white:hover{color:var(--color-white)}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-logoBlue\/30:focus{--tw-ring-color:#009dff4d}@supports (color:color-mix(in lab, red, red)){.focus\:ring-logoBlue\/30:focus{--tw-ring-color:color-mix(in oklab, var(--color-logoBlue) 30%, transparent)}}@media (min-width:40rem){.sm\:h-14{height:calc(var(--spacing) * 14)}.sm\:flex-row{flex-direction:row}:where(.sm\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)))}:where(.sm\:space-x-6>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)))}.sm\:px-10{padding-inline:calc(var(--spacing) * 10)}.sm\:pt-\[80px\]{padding-top:80px}}@media (min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}}@media (min-width:64rem){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:h-\[101px\]{height:101px}.lg\:h-auto{height:auto}.lg\:max-h-none{max-height:none}.lg\:w-\[52\%\]{width:52%}.lg\:w-\[450px\]{width:450px}.lg\:flex-1{flex:1}.lg\:flex-row{flex-direction:row}.lg\:py-16{padding-block:calc(var(--spacing) * 16)}.lg\:pt-\[112px\]{padding-top:112px}.lg\:pr-8{padding-right:calc(var(--spacing) * 8)}.lg\:pl-\[6vw\]{padding-left:6vw}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1} html { overflow-x: hidden; max-width: 100%; } body { background-color: #070C18; color: #2E2E2E; overflow-x: hidden; font-family: 'Poppins', sans-serif; } .logo-container { display: flex; align-items: center; gap: 15px; } .hero-gradient { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 100%); } .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } /* ── Social icons ── */ .soc-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.45); transition: color 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1); } .soc-icon:hover { color: #fff; transform: scale(1.1); } .soc-icon:active { color: #fff; transform: scale(1.05); } .soc-li:hover { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 4px 18px rgba(10,102,194,0.45); } .soc-li:active { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 4px 18px rgba(10,102,194,0.45); } .soc-ig:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; box-shadow: 0 4px 18px rgba(220,39,67,0.4); } .soc-ig:active { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; box-shadow: 0 4px 18px rgba(220,39,67,0.4); } .soc-yt:hover { background: #FF0000; border-color: #FF0000; box-shadow: 0 4px 18px rgba(255,0,0,0.45); } .soc-yt:active { background: #FF0000; border-color: #FF0000; box-shadow: 0 4px 18px rgba(255,0,0,0.45); } .soc-fb:hover { background: #1877F2; border-color: #1877F2; box-shadow: 0 4px 18px rgba(24,119,242,0.45); } .soc-fb:active { background: #1877F2; border-color: #1877F2; box-shadow: 0 4px 18px rgba(24,119,242,0.45); } .soc-tg:hover { background: #229ED9; border-color: #229ED9; box-shadow: 0 4px 18px rgba(34,158,217,0.45); } .soc-tg:active { background: #229ED9; border-color: #229ED9; box-shadow: 0 4px 18px rgba(34,158,217,0.45); } /* ── Cursor spotlight ── */ #cursor-glow { position: fixed; pointer-events: none; z-index: 0; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(58,174,255,0.07) 0%, transparent 65%); transform: translate(-50%, -50%); transition: opacity 0.4s; opacity: 0; } /* ── Animated CTA gradient border ── */ @keyframes cta-rotate { from { --angle: 0deg; } to { --angle: 360deg; } } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } .cta-animated { position: relative; isolation: isolate; } .cta-animated::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from var(--angle), #3AAEFF, #009DFF, #C6A75E, #3AAEFF); animation: cta-rotate 3s linear infinite; z-index: -1; opacity: 0; transition: opacity 0.35s; } .cta-animated:hover::before { opacity: 1; } /* ── Scroll-to-top circular progress ── */ #scrollTop { position: fixed; bottom: 88px; right: 28px; z-index: 8800; width: 48px; height: 48px; border-radius: 50%; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; padding: 0; } #scrollTop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #scrollTop:hover .arrow-up { transform: translateY(-2px); } .progress-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 2.5; } .progress-ring-fill { fill: none; stroke: #3AAEFF; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.15s linear; } .arrow-up { position: absolute; transition: transform 0.2s; } /* ── Nav active section dot ── */ .nav-item-btn.active-section .nav-active-dot { opacity: 1; transform: scale(1); } .nav-active-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #3AAEFF; margin-left: 5px; vertical-align: middle; opacity: 0; transform: scale(0); transition: opacity 0.3s, transform 0.3s; } /* ── Case study cards ── */ .cs-card { border-radius: 20px; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, border-color 0.35s ease; display: flex; flex-direction: column; position: relative; z-index: 1; } .cs-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(58,174,255,0.38), 0 16px 48px rgba(58,174,255,0.18); border-color: rgba(58,174,255,0.42); z-index: 10; } .cs-img { width: 100%; height: 200px; object-fit: cover; display: block; background: linear-gradient(135deg,#0f1f3d,#0b1220); } .cs-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; } .cs-body button { margin-top: auto !important; } .cs-tag { display: inline-block; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:20px; background: rgba(58,174,255,0.12); color: #3AAEFF; border: 1px solid rgba(58,174,255,0.2); margin-bottom: 12px; } .cs-title { font-family:'Poppins',sans-serif; font-size:17px; font-weight:700; color:#fff; margin:0 0 8px; } .cs-meta { font-family:'Inter',sans-serif; font-size:13px; color:rgba(255,255,255,0.42); margin:0 0 14px; line-height:1.6; } .cs-result { font-family:'Inter',sans-serif; font-size:13px; color:rgba(58,174,255,0.85); margin:0; display:flex; align-items:center; gap:6px; } /* ── FAQ accordion ── */ .faq-item { border-bottom: 1px solid rgba(255,255,255,0.07); } .faq-btn { width: 100%; text-align: left; background: none; border: none; padding: 22px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-q { font-family: 'Poppins',sans-serif; font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.88); line-height: 1.4; } .faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; transition: background 0.25s, border-color 0.25s, transform 0.3s; } .faq-btn:hover .faq-q { color: #fff; } .faq-btn:focus-visible { outline: 2px solid rgba(58,174,255,0.7); outline-offset: 4px; border-radius: 4px; } .faq-btn:hover .faq-icon { border-color: rgba(58,174,255,0.4); color: #3AAEFF; } .faq-btn[aria-expanded="true"] .faq-icon { background: rgba(58,174,255,0.12); border-color: rgba(58,174,255,0.3); color: #3AAEFF; transform: rotate(45deg); } .faq-body { overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s; padding-bottom: 0; } .faq-body.open { max-height: 600px; padding-bottom: 22px; } .faq-body p { font-family:'Inter',sans-serif; font-size:15px; color:rgba(255,255,255,0.52); line-height:1.75; margin:0; } /* ── Quiz modal ── */ #quiz-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(7,12,24,0.88); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; } #quiz-overlay.open { display: flex; } #quiz-modal { background: linear-gradient(180deg,#0f1f3d 0%,#0b1220 100%); border: 1px solid rgba(255,255,255,0.09); border-radius: 22px; padding: 44px 40px 40px; max-width: 520px; width: 92%; position: relative; box-shadow: 0 40px 80px rgba(0,0,0,0.6); max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } #quiz-back:hover { color: rgba(255,255,255,0.75) !important; } @media (max-width: 480px) { #quiz-modal { padding: 44px 20px 28px; width: 96%; } .quiz-h { font-size: 18px !important; } .quiz-opt { font-size: 14px !important; padding: 12px 14px !important; } } #quiz-close { position:absolute;top:16px;right:20px;background:none;border:none;color:rgba(255,255,255,0.3);font-size:22px;cursor:pointer;padding:4px; } #quiz-close:hover { color:rgba(255,255,255,0.7); } .quiz-step { display: none; } .quiz-step.active { display: block; } .quiz-eyebrow { font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3AAEFF;margin:0 0 10px; } .quiz-h { font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;color:#fff;margin:0 0 28px;line-height:1.3; } .quiz-options { display:flex;flex-direction:column;gap:10px; } .quiz-opt { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:14px 18px; cursor:pointer; text-align:left; font-family:'Inter',sans-serif; font-size:15px; color:rgba(255,255,255,0.72); transition:background 0.2s,border-color 0.2s,color 0.2s; } .quiz-opt:hover { background:rgba(58,174,255,0.08);border-color:rgba(58,174,255,0.3);color:#fff; } .quiz-opt.selected { background:rgba(58,174,255,0.12);border-color:rgba(58,174,255,0.45);color:#fff; } .quiz-progress { display:flex;gap:6px;margin-bottom:28px; } .quiz-dot { width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,0.1);transition:background 0.3s; } .quiz-dot.done { background:#3AAEFF; } .quiz-result-box { background:rgba(58,174,255,0.06);border:1px solid rgba(58,174,255,0.18);border-radius:14px;padding:22px 20px;margin-bottom:24px; } .quiz-result-label { font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3AAEFF;margin:0 0 6px; } .quiz-result-pkg { font-family:'Poppins',sans-serif;font-size:21px;font-weight:800;color:#fff;margin:0 0 8px; } .quiz-result-desc { font-family:'Inter',sans-serif;font-size:14px;color:rgba(255,255,255,0.55);margin:0;line-height:1.6; } .quiz-cta-btn { width:100%;font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;background:linear-gradient(135deg,#2EA7FF,#1C7DFF);color:#fff;border:none;border-radius:12px;padding:15px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 6px 24px rgba(0,157,255,0.3); } .quiz-cta-btn:hover { transform:scale(1.02);box-shadow:0 8px 32px rgba(0,157,255,0.5); } /* ── WhatsApp floating button ── */ #wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 9000; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,0.45); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s; cursor: pointer; text-decoration: none; } #wa-float:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,0.6); } #wa-float svg { flex-shrink: 0; } /* ── Sticky CTA bar ── */ #sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 8900; background: linear-gradient(90deg, #0b1220 0%, #0f172a 100%); border-top: 1px solid rgba(58,174,255,0.25); padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 20px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); backdrop-filter: blur(12px); } #sticky-cta.visible { transform: translateY(0); } #sticky-cta-text { font-family: 'Inter',sans-serif; font-size:14px; color:rgba(255,255,255,0.75); margin:0; } #sticky-cta-btn { font-family: 'Poppins',sans-serif; font-size:13px; font-weight:700; background: linear-gradient(135deg,#2EA7FF,#1C7DFF); color: #fff; border: none; border-radius: 8px; padding: 9px 20px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,157,255,0.3); transition: transform 0.2s, box-shadow 0.2s; } #sticky-cta-btn:hover { transform: scale(1.04); box-shadow: 0 6px 24px rgba(0,157,255,0.45); } #sticky-cta-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.35); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px; } #sticky-cta-close:hover { color: rgba(255,255,255,0.7); } /* ── Feature pillars ── */ .pillar-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,0.05); } @media(max-width:700px){ .pillar-grid{ grid-template-columns: repeat(2,1fr); } } .pillar { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 28px 30px; background: #070C18; transition: background 0.3s; } .pillar:hover { background: rgba(58,174,255,0.04); } .pillar-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(58,174,255,0.1); border: 1px solid rgba(58,174,255,0.18); display: flex; align-items: center; justify-content: center; color: #3AAEFF; margin-bottom: 18px; flex-shrink: 0; transition: background 0.3s, box-shadow 0.3s; } .pillar:hover .pillar-icon { background: rgba(58,174,255,0.18); box-shadow: 0 4px 18px rgba(58,174,255,0.2); } .pillar-title { font-family: 'Poppins',sans-serif; font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; } .pillar-desc { font-family: 'Inter',sans-serif; font-size: 13px; color: rgba(255,255,255,0.45); margin: 0; line-height: 1.6; } /* ── Partners marquee ── */ .marquee-track { will-change: transform; display: flex; gap: 0; white-space: nowrap; animation: marquee-scroll 22s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; font-family: 'Poppins',sans-serif; font-size:15px; font-weight:700; letter-spacing: 0.04em; color: rgba(255,255,255,0.22); transition: color 0.25s; border-right: 1px solid rgba(255,255,255,0.06); } .marquee-item:hover { color: rgba(255,255,255,0.65); } /* ── Cookie banner ── */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9900; background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-top: 1px solid rgba(255,255,255,0.09); padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); } #cookie-banner.show { transform: translateY(0); } #cookie-banner p { font-family:'Inter',sans-serif; font-size:13px; color:rgba(255,255,255,0.62); margin:0; max-width:680px; line-height:1.6; } #cookie-banner a { color:#3AAEFF; text-decoration:underline; } .cookie-btns { display:flex; gap:10px; flex-shrink:0; } .cookie-accept { font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; background: linear-gradient(135deg,#2EA7FF,#1C7DFF); color:#fff; border:none; border-radius:8px; padding:9px 20px; cursor:pointer; transition: transform 0.2s; } .cookie-accept:hover { transform: scale(1.04); } .cookie-decline { font-family:'Inter',sans-serif; font-size:13px; background: transparent; color:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:9px 16px; cursor:pointer; transition: color 0.2s, border-color 0.2s; } .cookie-decline:hover { color:rgba(255,255,255,0.75); border-color:rgba(255,255,255,0.35); } /* ── Video modal ── */ @keyframes frame-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } #video-overlay { position: fixed; inset: 0; z-index: 9800; background: rgba(4,8,18,0.88); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #video-overlay.open { opacity: 1; pointer-events: auto; } /* Outer wrapper — handles entry animation + close button */ #video-modal-outer { position: relative; width: 100%; max-width: 538px; transform: scale(0.94) translateY(16px); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); } #video-overlay.open #video-modal-outer { transform: scale(1) translateY(0); } /* Inner wrapper — clips the spinning gradient to create the border */ #video-modal-wrap { position: relative; border-radius: 22px; overflow: hidden; padding: 3px; background: #040810; box-shadow: 0 0 70px rgba(0,157,255,0.22), 0 0 140px rgba(0,157,255,0.10), 0 40px 100px rgba(0,0,0,0.85); } /* GPU-only spinning gradient — transform:rotate is compositor, no repaint */ #video-modal-wrap::before { content: ''; position: absolute; width: 300%; padding-bottom: 300%; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); background: conic-gradient( #009DFF 0%, #3AAEFF 20%, #C6A75E 50%, #3AAEFF 80%, #009DFF 100% ); animation: frame-spin 5s linear infinite; will-change: transform; z-index: 0; } /* Dark inset gap — makes the gradient look like a border */ #video-modal-wrap::after { content: ''; position: absolute; inset: 3px; border-radius: 19px; background: #040810; z-index: 1; } #video-modal-wrap video { position: relative; z-index: 2; display: block; width: 100%; border-radius: 18px; } #video-close { position: absolute; top: -20px; right: -20px; width: 48px; height: 48px; border-radius: 50%; background: rgba(10,16,30,0.97); border: 2px solid rgba(58,174,255,0.45); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, transform 0.2s; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.5); } #video-close:hover { background: rgba(58,174,255,0.22); border-color: #3AAEFF; transform: scale(1.12); } /* ── Exit-intent overlay ── */ #exit-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(7,12,24,0.85); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; } #exit-overlay.open { display: flex; } #exit-modal { background: linear-gradient(180deg,#0f1f3d 0%,#0b1220 100%); border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; padding: 44px 40px; max-width: 480px; width: 90%; text-align: center; position: relative; box-shadow: 0 40px 80px rgba(0,0,0,0.6); } #exit-modal .exit-emoji { font-size: 48px; margin-bottom: 16px; display: block; } #exit-modal h3 { font-family:'Poppins',sans-serif; font-size:22px; font-weight:800; color:#fff; margin:0 0 10px; } #exit-modal p { font-family:'Inter',sans-serif; font-size:15px; color:rgba(255,255,255,0.6); margin:0 0 28px; line-height:1.65; } #exit-cta-btn { font-family:'Poppins',sans-serif; font-size:15px; font-weight:700; background: linear-gradient(135deg,#2EA7FF,#1C7DFF); color:#fff; border:none; border-radius:12px; padding:14px 32px; cursor:pointer; width:100%; box-shadow: 0 6px 24px rgba(0,157,255,0.35); transition: transform 0.22s, box-shadow 0.22s; } #exit-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,157,255,0.55); } #exit-close { position:absolute; top:16px; right:20px; background:none; border:none; color:rgba(255,255,255,0.35); font-size:22px; cursor:pointer; line-height:1; padding:4px; } #exit-close:hover { color:rgba(255,255,255,0.7); } .btn-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Horizontal Dropdown Nav ── */ .nav-menu { display: flex; align-items: center; gap: 4px; } .nav-item { position: relative; } .nav-item-btn { display: flex; align-items: center; gap: 5px; padding: 8px 16px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.88); background: none; border: none; border-radius: 8px; cursor: pointer; transition: color 0.2s, background 0.2s; white-space: nowrap; } .nav-item-btn:hover, .nav-item.open .nav-item-btn { color: #fff; background: rgba(255,255,255,0.1); } .nav-item-btn .chevron { width: 14px; height: 14px; transition: transform 0.25s; opacity: 0.6; } .nav-item.open .nav-item-btn .chevron { transform: rotate(180deg); opacity: 1; } .nav-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 240px; background: linear-gradient(180deg, #0B1220 0%, #0F172A 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 10px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 200; } .nav-item.open .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #0B1220; border-left: 1px solid rgba(255,255,255,0.06); border-top: 1px solid rgba(255,255,255,0.06); border-radius: 2px 0 0 0; } .nav-dropdown a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; white-space: nowrap; } .nav-dropdown a:hover { background: rgba(59,130,246,0.08); } .nav-dropdown a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 1; transition: color 0.2s ease; color: rgba(255,255,255,0.6); } .nav-dropdown a:hover svg { color: #3B82F6; } .nav-dd-text { display: flex; flex-direction: column; gap: 1px; } .nav-dd-title { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.9); transition: color 0.2s ease; } .nav-dropdown a:hover .nav-dd-title { color: #3B82F6; } .nav-dd-desc { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,0.5); transition: color 0.2s ease; } .nav-dropdown a:hover .nav-dd-desc { color: rgba(255,255,255,0.72); } .nav-dd-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 0; } .nav-dd-badge { font-size: 11px; background: rgba(198,167,94,0.18); color: #C6A75E; padding: 2px 7px; border-radius: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-left: auto; flex-shrink: 0; align-self: flex-start; margin-top: 2px; } /* ── Solution Modal ── */ .sol-overlay { position: fixed; inset: 0; z-index: 10100; background: rgba(5,10,22,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .sol-overlay.open { opacity: 1; pointer-events: auto; } .sol-modal { background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%); border: 1px solid rgba(255,255,255,0.09); border-radius: 24px; width: 90%; max-width: 560px; padding: 48px 44px 40px; position: relative; box-shadow: 0 48px 120px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); transform: translateY(20px) scale(0.97); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; opacity: 0; max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .sol-modal::-webkit-scrollbar { display: none; } .sol-overlay.open .sol-modal { transform: translateY(0) scale(1); opacity: 1; } @media (max-width: 600px) { .sol-overlay { align-items: center; } .sol-modal { width: 100%; padding: 28px 20px 22px; border-radius: 20px; } #sol-img { max-height: none; margin-bottom: 14px; } #sol-img img, #sol-img .popup-image { width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 12px; display: block; } .sol-icon-wrap { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; } .sol-icon-wrap svg { width: 18px; height: 18px; } .sol-headline { font-size: 17px; line-height: 1.3; margin-bottom: 8px; } .sol-sub { font-size: 13px; line-height: 1.5; margin-bottom: 16px; } .sol-benefits { gap: 8px; margin-bottom: 18px; } .sol-benefit-dot { width: 18px; height: 18px; } .sol-benefit-dot svg { width: 10px; height: 10px; } .sol-benefit p { font-size: 12.5px; line-height: 1.45; } .sol-cta { padding: 12px; font-size: 13px; } .sol-close { width: 28px; height: 28px; font-size: 12px; top: 12px; right: 12px; } } .sol-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(255,255,255,0.45); transition: background 0.2s, color 0.2s; } .sol-close:hover { background: rgba(255,255,255,0.14); color: #fff; } .sol-icon-wrap { width: 56px; height: 56px; border-radius: 16px; background: rgba(58,174,255,0.12); border: 1px solid rgba(58,174,255,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #3AAEFF; } .sol-icon-wrap svg { width: 28px; height: 28px; } .sol-headline { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700; color: #ffffff; line-height: 1.25; margin-bottom: 10px; } .sol-sub { font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(255,255,255,0.58); line-height: 1.6; margin-bottom: 28px; } .sol-benefits { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .sol-benefit { display: flex; align-items: flex-start; gap: 12px; } .sol-benefit-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(58,174,255,0.12); border: 1px solid rgba(58,174,255,0.22); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .sol-benefit-dot svg { width: 12px; height: 12px; color: #3AAEFF; } .sol-benefit p { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; } .sol-img { width: 100%; border-radius: 14px; background: linear-gradient(135deg, rgba(58,174,255,0.07) 0%, rgba(11,18,32,0.6) 100%); border: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; overflow: hidden; color: rgba(58,174,255,0.5); font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: 0.05em; } .sol-img img { width: 100%; height: auto; display: block; object-fit: contain; border-radius: 14px; } .popup-image { width: 100%; height: auto; display: block; border-radius: 12px; margin-bottom: 16px; object-fit: cover; } .sol-cta { display: block; width: 100%; background: linear-gradient(135deg, #2EA7FF, #1C7DFF); color: #fff; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; padding: 14px 32px; border: none; border-radius: 12px; cursor: pointer; text-align: center; box-shadow: 0 6px 24px rgba(0,157,255,0.35); transition: transform 0.22s, box-shadow 0.22s; } .sol-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,157,255,0.55); } /* Header logo — invert(1) hue-rotate(180deg): blue #009DFF hue 204° → inverted to hue 24° → +180° = hue 204° (stays blue ✓) dark grays → invert to light grays (readable on dark bg ✓) */ #main-nav .logo-container img { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); transition: filter 0.35s ease, -webkit-filter 0.35s ease; } #main-nav.nav-scrolled .logo-container img { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } /* Navbar — transparent overlay */ #main-nav { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08) !important; transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #main-nav.nav-hidden { transform: translateY(-100%); } #main-nav.nav-scrolled { background: rgba(10, 16, 35, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* ── Language Globe Switcher ── */ .lang-switcher-wrap { position: relative; } /* Trigger button */ .lang-globe-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.88); letter-spacing: 0.05em; transition: background 0.2s, color 0.2s; white-space: nowrap; } .lang-globe-btn:hover, .lang-switcher-wrap.open .lang-globe-btn { background: rgba(255,255,255,0.18); color: #fff; } .lang-globe-btn .globe-icon { width: 19px; height: 19px; flex-shrink: 0; } .lang-switcher-wrap.open .globe-icon { animation: globeSpin 5s linear infinite; } @keyframes globeSpin { to { transform: rotate(360deg); } } /* Language code badge — same style for IT / DE / EN */ .lang-code-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; border-radius: 5px; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; flex-shrink: 0; line-height: 1; } .lang-option.active .lang-code-badge { background: #DBEAFE; color: #1d4ed8; } .lang-option.active { background: rgba(58,174,255,0.1); border-radius: 8px; } .lang-globe-btn .lang-chevron { width: 11px; height: 11px; opacity: 0.4; flex-shrink: 0; transition: transform 0.22s ease, opacity 0.22s; } .lang-switcher-wrap.open .lang-chevron { transform: rotate(180deg); opacity: 0.9; } /* Dropdown panel */ .lang-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 196px; background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 4px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 300; } .lang-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Option row */ .lang-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; background: none; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.78); text-align: left; transition: background 0.18s, color 0.18s; } .lang-option:hover { background: rgba(255,255,255,0.07); color: #fff; } .lang-option.active { font-weight: 600; color: #fff; } .lang-option-label { flex: 1; } .lang-check { display: none; width: 14px; height: 14px; color: #3AAEFF; flex-shrink: 0; margin-right: 2px; } .lang-option.active .lang-check { display: block; } .lang-option.active .lang-code-badge { background: rgba(58,174,255,0.2); color: #3AAEFF; } /* Mobile lang strip (inside mobile panel) */ .mob-lang { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .mob-lang-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.65); transition: all 0.2s; flex: 1; justify-content: center; } .mob-lang-btn:hover { border-color: rgba(0,157,255,0.45); background: rgba(0,157,255,0.08); color: #3AAEFF; } .mob-lang-btn.active { border-color: #3AAEFF; background: rgba(58,174,255,0.12); color: #3AAEFF; } /* Nav height — mobile first */ #main-nav .nav-inner { height: 68px; } @media (min-width: 768px) { #main-nav .nav-inner { height: 80px; } } @media (min-width: 1024px) { #main-nav .nav-inner { height: 112px; } } /* Nav CTA button — filled blue, clearly visible */ .nav-cta-btn { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, #2EA7FF 0%, #1C7DFF 100%); color: #fff; border: none; border-radius: 8px; padding: 10px 22px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 18px rgba(0,157,255,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .nav-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(0,157,255,0.5); } /* CTA button arrow */ .btn-arrow { display: inline-flex; align-items: center; gap: 10px; } .btn-arrow svg { transition: transform 0.3s; } .btn-arrow:hover svg { transform: translateX(4px); } /* ══════════════════════════════════ MOBILE NAV ══════════════════════════════════ */ #mobile-menu-btn { display: none; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; padding: 10px; border-radius: 10px; min-width: 44px; min-height: 44px; color: rgba(255,255,255,0.9); transition: background 0.2s; } #mobile-menu-btn:hover { background: rgba(255,255,255,0.18); } #mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 9500; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); } #mobile-nav-panel { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%); border-radius: 0 0 24px 24px; padding: 80px 24px 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05); transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); max-height: 90vh; overflow-y: auto; } #mobile-nav-overlay.open { display: block; } #mobile-nav-overlay.open #mobile-nav-panel { transform: translateY(0); } .mob-section { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #009DFF; margin: 24px 0 10px; padding: 0 4px; } .mob-section:first-child { margin-top: 0; } .mob-link { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.82); text-decoration: none; transition: background 0.18s, color 0.18s; } .mob-link:hover, .mob-link:active { background: rgba(255,255,255,0.06); color: #3AAEFF; } .mob-link svg { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255,255,255,0.4); transition: color 0.18s; } .mob-link:hover svg { color: #3AAEFF; } .mob-link-desc { font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,0.35); display: block; margin-top: 1px; font-family: 'Inter', sans-serif; } .mob-link:hover .mob-link-desc { color: rgba(58,174,255,0.72); } .mob-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 16px 0; } .mob-cta { display: block; width: 100%; margin-top: 20px; background: linear-gradient(135deg, #2EA7FF, #1C7DFF); color: #fff; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; padding: 14px 32px; border: none; border-radius: 12px; cursor: pointer; text-align: center; box-shadow: 0 6px 24px rgba(0,157,255,0.35); transition: transform 0.22s, box-shadow 0.22s; } .mob-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,157,255,0.55); } /* ══════════════════════════════════ RESPONSIVE — TABLET (≤1024px) ══════════════════════════════════ */ @media (max-width: 1024px) { .nav-item-btn { font-size: 12px; padding: 7px 11px; } } /* ── Tablet nav: hamburger for iPad / small screens (769–1023px) ── */ @media (min-width: 769px) and (max-width: 1023px) { #main-nav .nav-inner { padding: 0 20px; } .nav-menu { display: none !important; } #nav-right { display: none !important; } #mobile-menu-btn { display: flex; align-items: center; justify-content: center; } } /* ══════════════════════════════════ RESPONSIVE — MOBILE (≤768px) ══════════════════════════════════ */ @media (max-width: 768px) { /* Nav */ #main-nav .nav-inner { padding: 0 16px; } .nav-menu { display: none !important; } #nav-right { display: none !important; } #mobile-menu-btn { display: flex; align-items: center; justify-content: center; } /* Sol modal */ .sol-modal { padding: 32px 24px 28px !important; } } /* ══════════════════════════════════ RESPONSIVE — SMALL MOBILE (≤480px) ══════════════════════════════════ */ @media (max-width: 480px) { /* Cards padding */ .p-10 { padding: 24px !important; } } /* ══════════════════════════════════ CONTATTI MODAL — Premium 2-col ══════════════════════════════════ */ #contatti-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(15,23,42,0.48); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } #contatti-overlay.open { opacity: 1; pointer-events: auto; } #contatti-modal { position: relative; width: 100%; max-width: 780px; background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%); border-radius: 22px; box-shadow: 0 48px 120px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; transform: translateY(14px) scale(0.98); transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1), opacity 0.28s; opacity: 0; } #contatti-overlay.open #contatti-modal { transform: translateY(0) scale(1); opacity: 1; } /* Close */ .ct-close { position: absolute; top: 14px; right: 14px; z-index: 10; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.4); transition: background 0.2s, color 0.2s, transform 0.25s; } .ct-close:hover { background: rgba(255,255,255,0.14); color: #fff; transform: rotate(90deg); } /* ── LEFT PANEL ── */ .ct-left { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; } .ct-eyebrow { font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #3AAEFF; margin-bottom: 16px; } .ct-headline { font-family: 'Poppins', sans-serif; font-size: 27px; font-weight: 800; color: #ffffff; line-height: 1.18; margin-bottom: 14px; } /* two-line subhead */ .ct-subhead-main { font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.82); line-height: 1.55; margin-bottom: 6px; } .ct-subhead-note { font-family: 'Inter', sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.42); margin-bottom: 30px; } /* CTA buttons */ .ct-ctas { display: flex; flex-direction: column; gap: 9px; } .ct-cta-wa { display: flex; align-items: center; justify-content: center; gap: 9px; background: #16a34a; color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; padding: 14px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 16px rgba(22,163,74,0.28); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .ct-cta-wa:hover { background: #15803d; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(22,163,74,0.36); } .ct-cta-wa svg { width: 18px; height: 18px; flex-shrink: 0; } .ct-cta-tg { display: flex; align-items: center; justify-content: center; gap: 9px; background: #229ED9; color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; padding: 14px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 16px rgba(34,158,217,0.28); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .ct-cta-tg:hover { background: #1a8fbf; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(34,158,217,0.4); } .ct-cta-tg svg { width: 18px; height: 18px; flex-shrink: 0; } .ct-cta-tg-note { font-family: 'Inter', sans-serif; font-size: 10.5px; color: rgba(255,255,255,0.3); text-align: center; margin-top: 2px; } /* Telegram row */ .ct-row.tg .ct-row-icon { background: rgba(34,158,217,0.15); color: #229ED9; } .ct-row.tg:hover { border-color: rgba(34,158,217,0.35); box-shadow: 0 4px 18px rgba(34,158,217,0.12); } .ct-row.tg:hover .ct-row-icon { background: #229ED9; color: #fff; } .ct-row.tg:hover .ct-row-value { color: #229ED9; } .ct-cta-email { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.14); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; padding: 13px 20px; border-radius: 12px; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .ct-cta-email:hover { background: rgba(255,255,255,0.13); border-color: rgba(58,174,255,0.45); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 18px rgba(58,174,255,0.12); } .ct-cta-email svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; } .ct-cta-phone { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(58,174,255,0.09); color: rgba(255,255,255,0.85); border: 1px solid rgba(58,174,255,0.2); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; padding: 13px 20px; border-radius: 12px; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .ct-cta-phone:hover { background: rgba(58,174,255,0.18); border-color: rgba(58,174,255,0.5); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(58,174,255,0.18); } .ct-cta-phone svg { width: 16px; height: 16px; flex-shrink: 0; } /* ── RIGHT PANEL ── */ .ct-right { padding: 38px 32px; background: rgba(255,255,255,0.025); border-left: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; justify-content: center; gap: 20px; } /* Section label */ .ct-section-label { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 9px; } /* Contact rows */ .ct-contacts { display: flex; flex-direction: column; gap: 7px; } .ct-row { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,0.05); border-radius: 11px; padding: 11px 13px; border: 1px solid rgba(255,255,255,0.08); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .ct-row:hover { border-color: rgba(58,174,255,0.38); box-shadow: 0 4px 18px rgba(58,174,255,0.1); transform: translateY(-2px); } .ct-row-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: rgba(58,174,255,0.12); color: #3AAEFF; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; } .ct-row:hover .ct-row-icon { background: #3AAEFF; color: #fff; transform: scale(1.07); } .ct-row-icon svg { width: 16px; height: 16px; } .ct-row-text { flex: 1; min-width: 0; } .ct-row-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.32); text-transform: uppercase; letter-spacing: 0.08em; } .ct-row-value { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; } .ct-row:hover .ct-row-value { color: #3AAEFF; } /* WhatsApp row */ .ct-row.wa .ct-row-icon { background: rgba(22,163,74,0.18); color: #4ade80; } .ct-row.wa:hover { border-color: rgba(74,222,128,0.35); box-shadow: 0 4px 18px rgba(22,163,74,0.12); } .ct-row.wa:hover .ct-row-icon { background: #16a34a; color: #fff; } .ct-row.wa:hover .ct-row-value { color: #4ade80; } .ct-wa-hint { font-family: 'Inter', sans-serif; font-size: 10.5px; color: rgba(255,255,255,0.3); margin-top: 4px; padding-left: 2px; } /* Team */ .ct-team { display: flex; flex-direction: column; gap: 8px; } .ct-member { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .ct-member:hover { border-color: rgba(58,174,255,0.3); box-shadow: 0 4px 14px rgba(58,174,255,0.08); transform: translateY(-1px); } .ct-avatar { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg, #3AAEFF 0%, #1F3C88 100%); display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0.03em; } .ct-member-name { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 800; color: #ffffff; line-height: 1.2; } .ct-member-role { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,0.38); line-height: 1.3; margin-top: 2px; } /* Mobile — full-screen, fills entire viewport, adapts to every iPhone */ @media (max-width: 600px) { /* overlay: no gap, modal edge-to-edge */ #contatti-overlay { padding: 0; align-items: flex-start; } /* modal: true full-screen, split 50/50 vertically */ #contatti-modal { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; } /* close button: always above Dynamic Island / notch */ .ct-close { top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px; } /* LEFT panel — top half, content centered */ .ct-left { padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px 16px; justify-content: center; height: 100%; box-sizing: border-box; } .ct-eyebrow { margin-bottom: 6px; font-size: 10px; } .ct-headline { font-size: 21px; margin-bottom: 6px; } .ct-subhead-main { font-size: 13px; margin-bottom: 2px; } .ct-subhead-note { font-size: 11.5px; margin-bottom: 14px; } .ct-ctas { gap: 6px; } .ct-cta-wa { padding: 9px 16px; font-size: 13px; border-radius: 10px; } .ct-cta-wa svg { width: 16px; height: 16px; } .ct-cta-tg { padding: 9px 16px; font-size: 13px; border-radius: 10px; } .ct-cta-tg svg { width: 16px; height: 16px; } .ct-cta-tg-note { display: none; } .ct-cta-phone { padding: 9px 16px; font-size: 13px; border-radius: 10px; } .ct-cta-email { padding: 9px 16px; font-size: 13px; border-radius: 10px; } /* RIGHT panel — bottom half, content centered */ .ct-right { padding: 16px 24px calc(env(safe-area-inset-bottom, 0px) + 22px); border-left: none; border-top: 1px solid rgba(255,255,255,0.12); justify-content: center; gap: 12px; height: 100%; box-sizing: border-box; } .ct-section-label { margin-bottom: 6px; } .ct-contacts { gap: 5px; } .ct-row { padding: 7px 12px; border-radius: 10px; } .ct-row-icon { width: 28px; height: 28px; border-radius: 7px; } .ct-row-icon svg { width: 14px; height: 14px; } .ct-row-value { font-size: 12.5px; } .ct-wa-hint { font-size: 10px; margin-top: 2px; } .ct-team { gap: 5px; } .ct-member { padding: 7px 12px; border-radius: 9px; } .ct-avatar { width: 28px; height: 28px; border-radius: 7px; font-size: 9.5px; } .ct-member-name { font-size: 12.5px; } .ct-member-role { font-size: 10px; } } /* ══════════════════════════════════════════════ PRIVACY POLICY OVERLAY — unified modal system ══════════════════════════════════════════════ */ #pp-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(7,12,24,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } #pp-overlay.open { opacity: 1; pointer-events: auto; } #pp-modal { background: #0d1526; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; width: 100%; max-width: 900px; max-height: 88vh; overflow-y: auto; overflow-x: hidden; position: relative; box-shadow: 0 32px 80px rgba(0,0,0,0.6); scrollbar-width: thin; scrollbar-color: rgba(58,174,255,0.25) transparent; transform: translateY(18px) scale(0.99); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); } #pp-overlay.open #pp-modal { transform: translateY(0) scale(1); } #pp-modal::-webkit-scrollbar { width: 5px; } #pp-modal::-webkit-scrollbar-thumb { background: rgba(58,174,255,0.25); border-radius: 3px; } #pp-close { position: absolute; top: 16px; right: 16px; z-index: 100000; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); font-size: 18px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } #pp-close:hover { background: rgba(255,255,255,0.12); color: #fff; } .pp-lang-sec { display: none; } .pp-lang-sec.pp-active { display: block; } @media (max-width: 640px) { #pp-modal { border-radius: 14px; } #pp-close { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 16px; } } /* ══════════════════════════════════════════════════════ ENHANCEMENT PACK — index_80 ══════════════════════════════════════════════════════ */ /* #6: Page load fade-in */ @keyframes pageLoad { from { opacity:0; } to { opacity:1; } } body { animation: pageLoad 0.55s ease-out both; } /* #1: Gradient animated hero h1 accent */ @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero-gradient-text { background: linear-gradient(90deg, #009DFF, #3AAEFF, #C6A75E, #3AAEFF, #009DFF); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 4s ease infinite; will-change: background-position; } /* #2: Stagger reveal delays */ .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } .reveal[data-delay="5"] { transition-delay: 0.40s; } .reveal[data-delay="6"] { transition-delay: 0.48s; } /* #4: WhatsApp pulse ring — position:fixed already creates stacking context, no need for relative */ #wa-float::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37,211,102,0.55); animation: wa-pulse 2.2s ease-out infinite; pointer-events: none; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } /* #8: Ripple effect on CTA buttons */ .ripple-btn { position: relative; overflow: hidden; } .ripple-btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.28); transform: scale(0); animation: ripple-anim 0.55s linear; pointer-events: none; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* #9: Sliding nav underline indicator */ .nav-menu { position: relative; } .nav-underline-track { position: absolute; bottom: -2px; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, #3AAEFF, #009DFF); border-radius: 2px; transition: left 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events: none; } /* #10: Nav dropdown icon hover scale (already has color, add scale) */ .nav-dropdown a svg { transition: transform 0.2s ease, color 0.2s ease; } .nav-dropdown a:hover svg { transform: scale(1.12); } /* #12: Dot grid on hero */ .hero-dot-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(58,174,255,0.2) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 75% 85% at 25% 50%, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 75% 85% at 25% 50%, black 20%, transparent 75%); opacity: 0.5; } /* #13: Animated floating glow in hero */ @keyframes hero-glow-float { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.07; } 50% { transform: translate(-50%,-50%) scale(1.25); opacity: 0.13; } } .hero-float-glow { position: absolute; pointer-events: none; z-index: 0; width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(0,157,255,0.55) 0%, transparent 65%); left: 26%; top: 50%; animation: hero-glow-float 6s ease-in-out infinite; will-change: transform, opacity; } /* #14: SVG wave divider */ .wave-divider { display: block; line-height: 0; overflow: hidden; position: relative; } .wave-divider svg { display: block; width: 100%; height: 56px; } /* #16: FAQ open row highlight */ .faq-btn[aria-expanded="true"] .faq-q { color: #3AAEFF; } .faq-item { border-radius: 8px; transition: background 0.25s; padding: 0 8px; margin: 0 -8px; } .faq-item:has(.faq-btn[aria-expanded="true"]) { background: rgba(58,174,255,0.035); } /* #17: Social icon tooltips */ .soc-tooltip-wrap { position: relative; display: inline-flex; } .soc-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(8,14,30,0.95); color: rgba(255,255,255,0.88); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; border: 1px solid rgba(255,255,255,0.09); z-index: 10; } .soc-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: rgba(8,14,30,0.95); } .soc-tooltip-wrap:hover .soc-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* #19: Animated sol-modal icon */ @keyframes sol-icon-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(58,174,255,0.25); } 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(58,174,255,0); } } .sol-overlay.open .sol-icon-wrap { animation: sol-icon-pulse 2.8s ease-in-out infinite; } /* #20: Badge shimmer */ @keyframes badge-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .nav-dd-badge { background: linear-gradient(90deg, rgba(198,167,94,0.15) 0%, rgba(255,224,140,0.5) 45%, rgba(198,167,94,0.15) 80% ) !important; background-size: 200% 100% !important; animation: badge-shimmer 2.8s ease-in-out infinite; } /* #21: Prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } body { animation: none; } .hero-gradient-text { -webkit-text-fill-color: #3AAEFF; animation: none; } } /* #24: will-change hints on key animated elements */ #wa-float, .sol-overlay.open .sol-icon-wrap { will-change: transform; } #scrollTop { will-change: opacity, transform; } .marquee-track { will-change: transform; } /* Click-to-copy toast (#15) */ #copy-toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(12px); background: rgba(8,14,30,0.92); color: #3AAEFF; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 8px 20px; border-radius: 24px; border: 1px solid rgba(58,174,255,0.3); pointer-events: none; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 9999; white-space: nowrap; } #copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ══════════════════════════════════════════════════ MOBILE SAFARI / iPHONE FIX PACK — index_97 ══════════════════════════════════════════════════ */ /* 1. Touch UX */ button, a, [role="button"] { -webkit-tap-highlight-color: transparent; } button { touch-action: manipulation; } /* ── Come funziona: 2 col on tablet ── */ @media (min-width: 768px) and (max-width: 1023px) { .how-grid { grid-template-columns: repeat(2,1fr) !important; gap: 32px !important; } } /* ── Come funziona: vertical stack on mobile ── */ @media (max-width: 767px) { .how-section { padding-top: 60px !important; padding-bottom: 60px !important; } .how-grid { grid-template-columns: 1fr !important; gap: 0 !important; } .how-grid > div { padding: 28px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.07); } .how-grid > div:first-child { padding-top: 0 !important; } .how-grid > div:last-child { border-bottom: none; padding-bottom: 0 !important; } } /* ── Нижний отступ страницы — контент не прячется за sticky bar ── */ @media (max-width: 767px) { body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } } /* 2. Nav: Dynamic Island / notch safe area */ #main-nav { padding-top: env(safe-area-inset-top, 0px); } /* 3. Hero: 100dvh + clear fixed nav on mobile */ #hero-section { min-height: 100dvh; } @media (max-width: 1023px) { #hero-left { padding-top: calc(68px + env(safe-area-inset-top, 0px)) !important; } } /* 4. Mobile nav panel: scrollable + safe area */ #mobile-nav-panel { padding-top: calc(72px + env(safe-area-inset-top, 0px)); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 5. All overlays: overflow + safe area */ .sol-overlay, #contatti-overlay, #video-overlay, #exit-overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* 6. Modal bodies: max-height + scroll */ .sol-modal { max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } #exit-modal { max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 7. Video close button: always visible on mobile/tablet */ @media (max-width: 767px) { #video-modal-outer { padding-top: 52px; } #video-close { top: 8px; right: 8px; } } /* 8. Sticky CTA: safe area padding */ #sticky-cta { padding-left: calc(24px + env(safe-area-inset-left, 0px)); padding-right: calc(24px + env(safe-area-inset-right, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } /* 9. WA float: safe area + dynamic positioning */ #wa-float { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); right: calc(28px + env(safe-area-inset-right, 0px)); transition: bottom 0.3s ease, opacity 0.2s ease, transform 0.2s ease; } body.wa-above-sticky #wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } body.any-overlay-open #wa-float { opacity: 0 !important; pointer-events: none !important; transform: scale(0.8) !important; } /* 10. scrollTop: above WA, no overlap */ #scrollTop { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; right: calc(28px + env(safe-area-inset-right, 0px)) !important; } body.wa-above-sticky #scrollTop { bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important; } @media(max-width:700px){.prob-grid{grid-template-columns:1fr 1fr!important;}.prob-grid>div:nth-child(3n+1){display:none!important;}} @media(max-width:480px){.prob-grid{grid-template-columns:1fr!important;}.prob-grid>div:nth-child(3n+1){display:none!important;}.prob-grid>div{border-right:none!important;}} .prob-secondary-cta { display: inline-flex; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.88); border-radius: 10px; padding: 13px 28px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; white-space: nowrap; } .prob-secondary-cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); } @media (max-width: 767px) { #cs-grid { grid-template-columns: 1fr !important; gap: 20px !important; } } /* ── Footer links — replaces inline onmouseover/onmouseout ── */ .footer-link { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.18s; } .footer-link:hover { color: #fff; } .footer-contact-link { font-family: 'Inter', sans-serif; font-size: 13.5px; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.18s; } .footer-contact-link:hover { color: #fff; } @media(max-width:1000px){ #ft-grid{ grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; } } @media(max-width:860px){ #ft-grid{ grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } } @media(max-width:680px){ #ft-grid{ grid-template-columns: repeat(3, 1fr) !important; } } @media(max-width:440px){ #ft-grid{ grid-template-columns: repeat(2, 1fr) !important; } } @media(max-width:320px){ #ft-grid{ grid-template-columns: 1fr !important; } } #nav-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 500; display: none; flex-direction: column; gap: 10px; pointer-events: auto; } .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28); cursor: pointer; padding: 0; transition: background 0.25s, transform 0.25s, border-color 0.25s; position: relative; } .nav-dot.active { background: #3AAEFF; border-color: #3AAEFF; transform: scale(1.5); } .nav-dot:hover { background: rgba(255,255,255,0.5); } .nav-dot::before { content: attr(data-label); position: absolute; right: 18px; top: 50%; transform: translateY(-50%); background: rgba(7,12,24,0.92); color: #fff; font-family: 'Inter',sans-serif; font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s; border: 1px solid rgba(255,255,255,0.08); } .nav-dot:hover::before { opacity: 1; } @media (max-width: 900px) { #nav-dots { display: flex; } } /* ── 3D Scenari Carousel ── */ #sc3d-stage { position: relative; height: 400px; perspective: 1200px; perspective-origin: 50% 40%; overflow: visible; cursor: grab; user-select: none; touch-action: pan-y; } #sc3d-stage:active { cursor: grabbing; } #sc3d-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .sc3d-card { position: absolute; left: 50%; top: 50%; width: 276px; margin-left: -138px; margin-top: -163px; transition: transform 0.72s cubic-bezier(.4,0,.2,1), opacity 0.72s cubic-bezier(.4,0,.2,1); will-change: transform, opacity; cursor: pointer; pointer-events: auto; transform-style: preserve-3d; } .sc3d-card:not(.sc3d-active) { cursor: pointer; pointer-events: auto; } .sc3d-card.sc3d-active { cursor: pointer; } .sc3d-inner { background: rgba(8,16,40,.82); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.08); border-radius: 26px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45); transition: border-color .5s, box-shadow .5s; } @keyframes sc3d-active-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(58,174,255,.22), 0 0 28px rgba(58,174,255,.12), 0 24px 64px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07); } 50% { box-shadow: 0 0 0 1px rgba(58,174,255,.40), 0 0 48px rgba(58,174,255,.22), 0 24px 64px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07); } } .sc3d-card.sc3d-active .sc3d-inner { border-color: rgba(58,174,255,.45); animation: sc3d-active-pulse 3s ease-in-out infinite; } .sc3d-visual { height: 172px; position: relative; overflow: hidden; } /* Illuminazione – amber glow */ .sc3d-v-illum { background: linear-gradient(135deg, #1a0e00 0%, #2d1800 50%, #1a0e00 100%); } .sc3d-v-illum::before { content: ''; position: absolute; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,160,0,.45) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: sc-glow 3s ease-in-out infinite alternate; } .sc3d-v-illum::after { content: ''; position: absolute; width: 80px; height: 80px; background: radial-gradient(circle, rgba(255,200,60,.7) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-55%); } /* Clima – animated gradient */ .sc3d-v-clima { background: linear-gradient(135deg, #001a2d 0%, #002d4a 50%, #001a2d 100%); animation: sc-clima 6s ease-in-out infinite alternate; } @keyframes sc-clima { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .sc3d-v-clima::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(0,157,255,.3) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 70% 60%, rgba(0,90,180,.25) 0%, transparent 70%); } /* Sicurezza – grid + green glow */ .sc3d-v-sicur { background: #050e1a; background-image: linear-gradient(rgba(0,157,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,157,255,.07) 1px, transparent 1px); background-size: 24px 24px; } .sc3d-v-sicur::before { content: ''; position: absolute; width: 140px; height: 140px; background: radial-gradient(circle, rgba(0,230,100,.3) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: sc-glow 4s ease-in-out infinite alternate; } /* Risveglio – warm sunrise gradient */ .sc3d-v-risveg { background: linear-gradient(160deg, #1a0a00 0%, #3d1800 40%, #6b2500 70%, #3d1800 100%); } .sc3d-v-risveg::after { content: ''; position: absolute; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255,140,0,.55) 0%, rgba(255,80,0,.2) 50%, transparent 70%); bottom: 10px; left: 50%; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 0 40px rgba(255,120,0,.4); } /* Controllo – dark with network */ .sc3d-v-ctrl { background: #040810; } .sc3d-v-ctrl::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(58,174,255,.15) 0%, transparent 70%); } /* Scene – purple/gold */ .sc3d-v-scene { background: linear-gradient(135deg, #0d0520 0%, #1a0d3d 50%, #0d0520 100%); } .sc3d-v-scene::before { content: ''; position: absolute; width: 180px; height: 120px; background: radial-gradient(ellipse, rgba(120,60,220,.45) 0%, transparent 70%); top: 20%; left: 20%; transform: translate(-50%,-50%); animation: sc-glow 5s ease-in-out infinite alternate; } .sc3d-v-scene::after { content: ''; position: absolute; width: 120px; height: 80px; background: radial-gradient(ellipse, rgba(198,167,94,.35) 0%, transparent 70%); bottom: 10%; right: 10%; } /* Energy – emerald green */ .sc3d-v-energ { background: linear-gradient(135deg, #051a10 0%, #0a3320 50%, #051a10 100%); } .sc3d-v-energ::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 55%, rgba(0,210,100,.14) 0%, transparent 70%); } /* Voice – amber */ .sc3d-v-voce { background: linear-gradient(135deg, #1a1000 0%, #2e1e00 50%, #1a1000 100%); } .sc3d-v-voce::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,180,0,.15) 0%, transparent 70%); } /* Arrival – rose/pink */ .sc3d-v-arrivo { background: linear-gradient(135deg, #1a0510 0%, #330d20 50%, #1a0510 100%); } .sc3d-v-arrivo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(230,60,120,.16) 0%, transparent 70%); } /* Music – deep purple */ .sc3d-v-music { background: linear-gradient(135deg, #0d0520 0%, #1e0a3a 50%, #0d0520 100%); } .sc3d-v-music::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(160,80,255,.18) 0%, transparent 70%); } /* Corner markers for sicurezza */ .sc3d-corner { position: absolute; width: 16px; height: 16px; border-color: rgba(0,230,100,.6); border-style: solid; border-width: 0; } .sc3d-corner.tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; } .sc3d-corner.tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; } .sc3d-corner.bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; } .sc3d-corner.br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; } /* Animated dots for ctrl card */ .sc3d-dot-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(58,174,255,.8); box-shadow: 0 0 6px rgba(58,174,255,.6); animation: sc-dot 2s ease-in-out infinite alternate; } .sc3d-dot-node:nth-child(1) { top: 30%; left: 25%; animation-delay: 0s; } .sc3d-dot-node:nth-child(2) { top: 60%; left: 50%; animation-delay: .4s; } .sc3d-dot-node:nth-child(3) { top: 25%; right: 25%; animation-delay: .8s; } .sc3d-dot-node:nth-child(4) { top: 55%; right: 30%; animation-delay: 1.2s; } .sc3d-dot-node:nth-child(5) { top: 75%; left: 35%; animation-delay: .6s; } @keyframes sc-dot { 0% { opacity: .4; transform: scale(.8); } 100% { opacity: 1; transform: scale(1.2); } } /* Card body */ .sc3d-body { padding: 18px 22px 24px; } .sc3d-h { font-family: 'Poppins', sans-serif; font-size: 16.5px; font-weight: 700; color: #fff; margin: 0 0 7px; line-height: 1.3; } .sc3d-p { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,.48); margin: 0; line-height: 1.65; } /* Carousel CTA button */ .sc3d-cta-btn { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2EA7FF, #1C7DFF); border: none; border-radius: 12px; padding: 14px 32px; cursor: pointer; box-shadow: 0 6px 24px rgba(0,157,255,0.35); transition: transform 0.22s, box-shadow 0.22s; } .sc3d-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,157,255,0.55); } /* Arrow buttons */ .sc3d-arrow { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s; flex-shrink: 0; } .sc3d-arrow:hover { background: rgba(58,174,255,.18); border-color: rgba(58,174,255,.45); } /* Dots navigation */ #sc3d-dots { display: flex; align-items: center; justify-content: center; gap: 10px; } .sc3d-dot-btn { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); border: none; cursor: pointer; transition: background .3s, width .3s; padding: 0; flex-shrink: 0; } .sc3d-dot-btn.active { background: #3AAEFF; width: 24px; } .sc3d-dot-btn:hover:not(.active) { background: rgba(255,255,255,0.45); } .sc3d-dot-btn { position: relative; } .sc3d-dot-btn::before { content: ""; position: absolute; top: -18px; left: -18px; right: -18px; bottom: -18px; } /* Responsive */ @media (max-width: 767px) { #sc3d-stage { height: 350px; } .sc3d-card { width: 240px; margin-left: -120px; margin-top: -150px; } .sc3d-visual { height: 148px; } } @media (prefers-reduced-motion: reduce) { .sc3d-card { transition: opacity 0.35s ease; } .sc3d-card.sc3d-active .sc3d-inner { animation: none; } .sc3d-v-illum::before, .sc3d-v-sicur::before, .sc3d-v-scene::before, .sc3d-dot-node { animation: none; } } /* ══════════════════════════════════════════════ DARK / LIGHT THEME TOGGLE ══════════════════════════════════════════════ */ html[data-theme="light"] { filter: invert(1); background: #f0f4ff; } html[data-theme="light"] img, html[data-theme="light"] video, html[data-theme="light"] canvas, html[data-theme="light"] .sc3d-visual { filter: invert(1); } #theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; flex-shrink: 0; } #theme-toggle:hover { background: rgba(255,255,255,0.14); color: #fff; } #theme-icon-sun { display: none; } html[data-theme="light"] #theme-icon-moon { display: none; } html[data-theme="light"] #theme-icon-sun { display: block; } /* ══════════════════════════════════════════════ LIVE COUNTER TRUST BADGE ══════════════════════════════════════════════ */ #counter-trust { display: flex; align-items: center; gap: 9px; margin-top: 20px; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.52); } .ct-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 7px rgba(34,197,94,0.75); flex-shrink: 0; animation: ct-pulse 2.2s ease-in-out infinite; } @keyframes ct-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } } #counter-val { color: #fff; font-weight: 700; font-size: 15px; } /* ══════════════════════════════════════════════ STICKY CTA BAR ══════════════════════════════════════════════ */ #sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9200; background: linear-gradient(90deg, #070e1f 0%, #0d1c38 100%); border-top: 1px solid rgba(58,174,255,0.28); padding: 11px 20px; padding-bottom: max(11px, calc(11px + env(safe-area-inset-bottom, 0px))); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; transform: translateY(110%); transition: transform 0.42s cubic-bezier(0.34,1.46,0.64,1); box-shadow: 0 -4px 24px rgba(0,0,0,0.4); } #sticky-cta-bar.visible { transform: translateY(0); } #sticky-cta-bar.hidden { display: none; } .sticky-cta-text { font-family: 'Inter', sans-serif; font-size: 13.5px; color: rgba(255,255,255,0.78); flex: 1; min-width: 160px; } .sticky-cta-text strong { color: #fff; } #sticky-countdown { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(58,174,255,0.9); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; } #sticky-cta-btn { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: #fff; background: #3AAEFF; border: none; border-radius: 9px; padding: 9px 20px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.2s, transform 0.15s; } #sticky-cta-btn:hover { background: #5bc5ff; transform: scale(1.03); } #sticky-cta-close { width: 28px; height: 28px; border: none; background: rgba(255,255,255,0.07); border-radius: 50%; color: rgba(255,255,255,0.45); font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, color 0.2s; } #sticky-cta-close:hover { background: rgba(255,255,255,0.14); color: #fff; } @media (max-width: 480px) { #sticky-cta-bar { padding: 10px 14px; } .sticky-cta-text { font-size: 12px; } #sticky-countdown { display: none; } } /* ══════════════════════════════════════════════ QUIZ SCENARIO RESULT STRIPE ══════════════════════════════════════════════ */ .quiz-scenario-stripe { height: 4px; border-radius: 4px; margin-bottom: 14px; background: linear-gradient(90deg, #3AAEFF 0%, #7dd3fc 100%); transition: background 0.5s; } .why-hub-ring { inset: -12px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .why-hub-el, .why-hub-ring, .why-card-dot { animation: none !important; } #why-3d-track { transition: none !important; } .why3-card { transition: none !important; } } .why-hub-img { width: 86px; height: auto; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(58,174,255,0.65)); position: relative; z-index: 1; display: block; } /* == Why section 2-row grid == */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 0; align-items: stretch; } .why-spacer { display: none; } .why-image-cell { align-self: stretch; display: flex; flex-direction: column; } .why-image-cell canvas { flex: 1; min-height: 320px; display: block; border-radius: 24px; } @media (min-width: 768px) { .why-spacer { display: block; } } @media (max-width: 767px) { .why-grid { grid-template-columns: 1fr; } } /* ── Why section: tablet/iPad fix (768–1199px) ── */ @media (min-width: 768px) and (max-width: 1199px) { .why-grid { column-gap: 36px; grid-template-columns: 2fr 3fr; } .why-image-cell { align-self: center; max-height: 520px; } .why-image-cell img { height: 100% !important; max-height: 520px !important; object-fit: cover !important; } } /* ── Sticky bar body clearance ── */ @media (max-width: 900px) { body { padding-bottom: 68px; } } /* ═══════════════════════════════════════════════════════════════════════════ Mobile Hero — cinematic full-screen video background (max-width: 767px) ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Video column: lift out of flex flow, cover entire hero section */ #hero-video-col { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; z-index: 0; } /* Hide legacy bottom-fade gradient (replaced by overlay below) */ #hero-video-col .lg\:hidden { display: none !important; } /* Content column: overlay on video, full viewport height */ #hero-left { min-height: 100dvh !important; position: relative; z-index: 2; /* Cinematic dark gradient — stronger at top/bottom, lighter centre */ background: linear-gradient( to bottom, rgba(6, 12, 26, 0.82) 0%, rgba(6, 12, 26, 0.60) 45%, rgba(6, 12, 26, 0.72) 80%, rgba(6, 12, 26, 0.90) 100% ) !important; padding-bottom: 48px !important; } /* CTA buttons: full-width vertical stack */ #hero-btns { flex-direction: column !important; } #hero-btns button { width: 100% !important; justify-content: center !important; text-align: center; } /* Bottom vignette: smooth transition into next section */ #hero-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 96px; background: linear-gradient(to bottom, transparent 0%, #0F172A 100%); pointer-events: none; z-index: 3; } } /* =================================================================== TABLET POLISH v211 — iPad Mini 768-1023px =================================================================== */ @media (min-width: 768px) and (max-width: 1023px) { /* Hero: switch from stacked mobile to side-by-side 55/45 */ #hero-section { flex-direction: row !important; } #hero-left { width: 55% !important; flex-shrink: 0; padding-left: 36px !important; padding-right: 24px !important; padding-top: calc(80px + 20px) !important; padding-bottom: 48px !important; } #hero-video-col { flex: 1 !important; width: 45% !important; height: auto !important; max-height: none !important; min-height: 100%; } /* Show desktop-style left blend gradient, hide mobile bottom gradient */ #hero-video-col > div:first-child { display: block !important; } #hero-video-col > div:nth-child(2) { display: none !important; } /* Buttons side by side */ #hero-btns { flex-direction: row !important; } } /* ==================================================================== iPAD PRO HERO SEAM FIX v214 — desktop ≥ 1024px Removes vertical centre seam & bottom visual divider ==================================================================== */ @media (min-width: 1024px) { /* 1. Left-blend gradient: wider + 2px overlap → kills subpixel gap */ #hero-video-col > div:first-child { width: 52% !important; left: -2px !important; background: linear-gradient( to right, #0F172A 0%, #0F172A 8%, rgba(15,23,42,0.9) 35%, rgba(15,23,42,0.5) 62%, transparent 100% ) !important; will-change: transform; } /* 2. GPU layer alignment — prevents render-boundary compositing seam */ #hero-left, #hero-video-col { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* 3. Video column bottom: fade into page background */ #hero-video-col::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 140px; background: linear-gradient( to bottom, transparent 0%, rgba(15,23,42,0.75) 55%, #0F172A 100% ); pointer-events: none; z-index: 2; } /* 4. Hero-section bottom vignette — unifies both columns */ #hero-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent 0%, #0F172A 100%); pointer-events: none; z-index: 1; } } /* =================================================================== MOBILE POLISH v208 =================================================================== */ /* 1 -- Language switcher: single row IT | DE | EN */ @media (max-width: 767px) { .mob-lang { flex-wrap: nowrap !important; } .mob-lang-btn { padding: 8px 6px !important; font-size: 12px !important; min-width: 0; } } /* 2 -- Come funziona: identical padding/borders on all 4 cards */ @media (max-width: 767px) { .how-grid > div { padding: 28px 0 !important; } .how-grid > div:first-child { padding-top: 28px !important; } .how-grid > div:last-child { padding-bottom: 28px !important; } } /* 3 -- Reduce dead zone between CTA and Case Study (~45% less) */ @media (max-width: 767px) { #section-why { padding-bottom: 48px !important; } #section-why + div { height: 32px !important; overflow: hidden; } #section-progetti { padding-top: 52px !important; padding-bottom: 56px !important; } } /* 4 -- Comparison table: label full-width, bad | good affiancati (2 col) */ @media (max-width: 767px) { #comp-scroll-hint { display: none !important; } /* Slightly tighter side padding for the section */ #section-comparison > div { padding-left: 14px !important; padding-right: 14px !important; } /* Switch to 2-equal-column grid */ .prob-grid { grid-template-columns: 1fr 1fr !important; } /* Label row header + all scenario labels: span both columns */ .comp-hdr-first { grid-column: 1 / -1 !important; } .comp-row-lbl { grid-column: 1 / -1 !important; } /* Uniform compact padding */ .prob-grid > div { padding: 12px 12px !important; } .comp-row-lbl { padding: 12px 14px !important; } /* Hide decorative big numbers (too large for new layout) */ .comp-row-lbl > span[aria-hidden="true"] { display: none !important; } /* Hide VS badge (no longer sits between two adjacent columns) */ .prob-grid > div:nth-child(2) > div[style*="right:-11px"] { display: none !important; } /* Readable font in content cells */ .prob-grid span[style*="font-size:13.5px"] { font-size: 12px !important; line-height: 1.5 !important; } .comp-row-lbl span[style*="font-size:12px"] { font-size: 12px !important; } } @media (min-width: 768px) { #comp-scroll-hint { display: none; } }