/*! tailwindcss v4.3.1 | 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-divide-y-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-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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-outline-style:solid;--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-duration:initial;--tw-ease:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;--shimmer-angle:0deg}}}@layer theme{:root,:host{--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-orange-400:oklch(75% .183 55.934);--color-amber-400:oklch(82.8% .189 84.429);--color-yellow-400:oklch(85.2% .199 91.936);--color-green-400:oklch(79.2% .209 151.711);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-teal-600:oklch(60% .118 184.704);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-600:oklch(54.6% .245 262.881);--color-violet-400:oklch(70.2% .183 293.541);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-400:oklch(71.8% .202 349.761);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--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-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-md:calc(var(--radius) - 2px);--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--blur-2xl:40px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--app-font-sans);--default-mono-font-family:var(--app-font-mono)}}@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;-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}*{box-sizing:border-box;border-color:hsl(var(--border))}html{scroll-behavior:smooth}body{font-family:var(--app-font-sans);color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#05050b;overflow-x:hidden}body:before{content:"";z-index:1;pointer-events:none;opacity:.034;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px;position:fixed;inset:0}}@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}.static{position:static}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-x-\[5\%\]{inset-inline:5%}.inset-x-\[20\%\]{inset-inline:20%}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.top-7{top:calc(var(--spacing) * 7)}.top-\[8\%\]{top:8%}.top-\[20\%\]{top:20%}.top-full{top:100%}.bottom-0{bottom:0}.bottom-\[10\%\]{bottom:10%}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.left-5{left:calc(var(--spacing) * 5)}.left-\[calc\(100\%\+10px\)\]{left:calc(100% + 10px)}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[100\]{z-index:100}.col-span-2{grid-column:span 2/span 2}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-\[6px\]{margin-top:6px}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-2\.5{margin-bottom:calc(var(--spacing) * 2.5)}.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-7{margin-bottom:calc(var(--spacing) * 7)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-9{margin-bottom:calc(var(--spacing) * 9)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.mb-14{margin-bottom:calc(var(--spacing) * 14)}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.mb-20{margin-bottom:calc(var(--spacing) * 20)}.ml-1{margin-left:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[4\/5\]{aspect-ratio:4/5}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-4\.5{height:calc(var(--spacing) * 4.5)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-24{height:calc(var(--spacing) * 24)}.h-36{height:calc(var(--spacing) * 36)}.h-40{height:calc(var(--spacing) * 40)}.h-56{height:calc(var(--spacing) * 56)}.h-\[13px\]{height:13px}.h-\[14px\]{height:14px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[64px\]{height:64px}.h-\[300px\]{height:300px}.h-\[600px\]{height:600px}.h-auto{height:auto}.h-fit{height:fit-content}.h-full{height:100%}.h-px{height:1px}.min-h-\[82vh\]{min-height:82vh}.min-h-\[100dvh\]{min-height:100dvh}.min-h-\[280px\]{min-height:280px}.min-h-dvh{min-height:100dvh}.min-h-screen{min-height:100vh}.w-\(--calculator-progress\){width:var(--calculator-progress)}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-4\.5{width:calc(var(--spacing) * 4.5)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-40{width:calc(var(--spacing) * 40)}.w-56{width:calc(var(--spacing) * 56)}.w-60{width:calc(var(--spacing) * 60)}.w-64{width:calc(var(--spacing) * 64)}.w-80{width:calc(var(--spacing) * 80)}.w-\[18px\]{width:18px}.w-\[64px\]{width:64px}.w-\[200px\]{width:200px}.w-\[340px\]{width:340px}.w-\[500px\]{width:500px}.w-\[calc\(100\%-20px\)\]{width:calc(100% - 20px)}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-7xl{max-width:var(--container-7xl)}.max-w-\[15ch\]{max-width:15ch}.max-w-\[46ch\]{max-width:46ch}.max-w-\[140px\]{max-width:140px}.max-w-\[220px\]{max-width:220px}.max-w-\[320px\]{max-width:320px}.max-w-\[420px\]{max-width:420px}.max-w-\[440px\]{max-width:440px}.max-w-\[460px\]{max-width:460px}.max-w-\[480px\]{max-width:480px}.max-w-\[500px\]{max-width:500px}.max-w-\[520px\]{max-width:520px}.max-w-\[540px\]{max-width:540px}.max-w-\[560px\]{max-width:560px}.max-w-\[580px\]{max-width:580px}.max-w-\[600px\]{max-width:600px}.max-w-\[620px\]{max-width:620px}.max-w-\[640px\]{max-width:640px}.max-w-\[680px\]{max-width:680px}.max-w-\[700px\]{max-width:700px}.max-w-\[760px\]{max-width:760px}.max-w-\[800px\]{max-width:800px}.max-w-\[820px\]{max-width:820px}.max-w-\[860px\]{max-width:860px}.max-w-\[900px\]{max-width:900px}.max-w-\[1060px\]{max-width:1060px}.max-w-\[1100px\]{max-width:1100px}.max-w-\[1440px\]{max-width:1440px}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-\[180px\]{min-width:180px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);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)}.translate-y-\[2\%\]{--tw-translate-y:2%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-90{rotate:-90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-mt-24{scroll-margin-top:calc(var(--spacing) * 24)}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0{gap:0}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-7{gap:calc(var(--spacing) * 7)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-16{gap:calc(var(--spacing) * 16)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-3\.5{column-gap:calc(var(--spacing) * 3.5)}:where(.-space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)))}.gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-white\/\[0\.05\]>:not(:last-child)){border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){:where(.divide-white\/\[0\.05\]>:not(:last-child)){border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[2rem\]{border-radius:2rem}.rounded-\[min\(var\(--radius-md\)\,10px\)\]{border-radius:min(var(--radius-md), 10px)}.rounded-\[min\(var\(--radius-md\)\,12px\)\]{border-radius:min(var(--radius-md), 12px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-t-\[2rem\]{border-top-left-radius:2rem;border-top-right-radius:2rem}.rounded-t-md{border-top-left-radius:calc(var(--radius) - 2px);border-top-right-radius:calc(var(--radius) - 2px)}.rounded-t-sm{border-top-left-radius:calc(var(--radius) - 4px);border-top-right-radius:calc(var(--radius) - 4px)}.rounded-b-\[2rem\]{border-bottom-right-radius:2rem;border-bottom-left-radius:2rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y{border-block-style:var(--tw-border-style);border-block-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-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-\[\#0A66F7\]{border-color:#0a66f7}.border-\[\#0A66F7\]\/15{border-color:oklab(55.7454% -.0369725 -.227342/.15)}.border-\[\#0A66F7\]\/20{border-color:oklab(55.7454% -.0369725 -.227342/.2)}.border-\[\#0A66F7\]\/25{border-color:oklab(55.7454% -.0369725 -.227342/.25)}.border-\[\#0A66F7\]\/30{border-color:oklab(55.7454% -.0369725 -.227342/.3)}.border-\[\#0A66F7\]\/40{border-color:oklab(55.7454% -.0369725 -.227342/.4)}.border-\[\#0a0a0a\]{border-color:#0a0a0a}.border-\[\#f59e0b\]\/15{border-color:oklab(76.8591% .0560995 .154808/.15)}.border-black\/\[0\.08\]{border-color:#00000014}@supports (color:color-mix(in lab, red, red)){.border-black\/\[0\.08\]{border-color:color-mix(in oklab, var(--color-black) 8%, transparent)}}.border-blue-100{border-color:var(--color-blue-100)}.border-blue-400\/20{border-color:#54a2ff33}@supports (color:color-mix(in lab, red, red)){.border-blue-400\/20{border-color:color-mix(in oklab, var(--color-blue-400) 20%, transparent)}}.border-border{border-color:hsl(var(--border))}.border-emerald-500\/15{border-color:#00bb7f26}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/15{border-color:color-mix(in oklab, var(--color-emerald-500) 15%, transparent)}}.border-emerald-500\/25{border-color:#00bb7f40}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/25{border-color:color-mix(in oklab, var(--color-emerald-500) 25%, transparent)}}.border-gray-50{border-color:var(--color-gray-50)}.border-gray-100{border-color:var(--color-gray-100)}.border-green-400\/20{border-color:#05df7233}@supports (color:color-mix(in lab, red, red)){.border-green-400\/20{border-color:color-mix(in oklab, var(--color-green-400) 20%, transparent)}}.border-orange-400\/20{border-color:#ff8b1a33}@supports (color:color-mix(in lab, red, red)){.border-orange-400\/20{border-color:color-mix(in oklab, var(--color-orange-400) 20%, transparent)}}.border-pink-400\/20{border-color:#fb64b633}@supports (color:color-mix(in lab, red, red)){.border-pink-400\/20{border-color:color-mix(in oklab, var(--color-pink-400) 20%, transparent)}}.border-purple-400\/20{border-color:#c07eff33}@supports (color:color-mix(in lab, red, red)){.border-purple-400\/20{border-color:color-mix(in oklab, var(--color-purple-400) 20%, transparent)}}.border-red-100{border-color:var(--color-red-100)}.border-red-400\/15{border-color:#ff656826}@supports (color:color-mix(in lab, red, red)){.border-red-400\/15{border-color:color-mix(in oklab, var(--color-red-400) 15%, transparent)}}.border-red-400\/20{border-color:#ff656833}@supports (color:color-mix(in lab, red, red)){.border-red-400\/20{border-color:color-mix(in oklab, var(--color-red-400) 20%, transparent)}}.border-red-500\/15{border-color:#fb2c3626}@supports (color:color-mix(in lab, red, red)){.border-red-500\/15{border-color:color-mix(in oklab, var(--color-red-500) 15%, transparent)}}.border-red-500\/25{border-color:#fb2c3640}@supports (color:color-mix(in lab, red, red)){.border-red-500\/25{border-color:color-mix(in oklab, var(--color-red-500) 25%, transparent)}}.border-transparent{border-color:#0000}.border-violet-400\/20{border-color:#a685ff33}@supports (color:color-mix(in lab, red, red)){.border-violet-400\/20{border-color:color-mix(in oklab, var(--color-violet-400) 20%, transparent)}}.border-white\/8{border-color:#ffffff14}@supports (color:color-mix(in lab, red, red)){.border-white\/8{border-color:color-mix(in oklab, var(--color-white) 8%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.border-white\/\[0\.1\]{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.1\]{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/\[0\.04\]{border-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.04\]{border-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.border-white\/\[0\.05\]{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.05\]{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-white\/\[0\.06\]{border-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.06\]{border-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.border-white\/\[0\.07\]{border-color:#ffffff12}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.07\]{border-color:color-mix(in oklab, var(--color-white) 7.0%, transparent)}}.border-white\/\[0\.08\]{border-color:#ffffff14}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.08\]{border-color:color-mix(in oklab, var(--color-white) 8%, transparent)}}.border-white\/\[0\.15\]{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.15\]{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-yellow-400\/20{border-color:#fac80033}@supports (color:color-mix(in lab, red, red)){.border-yellow-400\/20{border-color:color-mix(in oklab, var(--color-yellow-400) 20%, transparent)}}.bg-\[\#0A66F7\]{background-color:#0a66f7}.bg-\[\#0A66F7\]\/10{background-color:oklab(55.7454% -.0369725 -.227342/.1)}.bg-\[\#0A66F7\]\/14{background-color:oklab(55.7454% -.0369725 -.227342/.14)}.bg-\[\#0A66F7\]\/40{background-color:oklab(55.7454% -.0369725 -.227342/.4)}.bg-\[\#0A66F7\]\/\[0\.06\]{background-color:oklab(55.7454% -.0369725 -.227342/.06)}.bg-\[\#0A66F7\]\/\[0\.07\]{background-color:oklab(55.7454% -.0369725 -.227342/.07)}.bg-\[\#0A66F7\]\/\[0\.08\]{background-color:oklab(55.7454% -.0369725 -.227342/.08)}.bg-\[\#0A1020\]\/80{background-color:oklab(17.6477% -.00164211 -.0345358/.8)}.bg-\[\#0A1120\]\/70{background-color:oklab(17.9375% -.00325377 -.032808/.7)}.bg-\[\#0C1226\]{background-color:#0c1226}.bg-\[\#0a0a0a\]{background-color:#0a0a0a}.bg-\[\#0f0f0f\]{background-color:#0f0f0f}.bg-\[\#1a1a1a\]{background-color:#1a1a1a}.bg-\[\#111\]{background-color:#111}.bg-\[\#05050b\]{background-color:#05050b}.bg-\[\#06080d\]{background-color:#06080d}.bg-\[\#070707\]{background-color:#070707}.bg-\[\#080808\]{background-color:#080808}.bg-amber-400{background-color:var(--color-amber-400)}.bg-background{background-color:hsl(var(--background))}.bg-black\/30{background-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.bg-black\/30{background-color:color-mix(in oklab, var(--color-black) 30%, transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-400\/10{background-color:#54a2ff1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-400\/10{background-color:color-mix(in oklab, var(--color-blue-400) 10%, transparent)}}.bg-destructive\/10{background-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, hsl(var(--destructive)) 10%, transparent)}}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/10{background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.bg-emerald-500\/15{background-color:#00bb7f26}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/15{background-color:color-mix(in oklab, var(--color-emerald-500) 15%, transparent)}}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-green-400\/10{background-color:#05df721a}@supports (color:color-mix(in lab, red, red)){.bg-green-400\/10{background-color:color-mix(in oklab, var(--color-green-400) 10%, transparent)}}.bg-green-400\/\[0\.06\]{background-color:#05df720f}@supports (color:color-mix(in lab, red, red)){.bg-green-400\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-green-400) 6%, transparent)}}.bg-green-400\/\[0\.08\]{background-color:#05df7214}@supports (color:color-mix(in lab, red, red)){.bg-green-400\/\[0\.08\]{background-color:color-mix(in oklab, var(--color-green-400) 8%, transparent)}}.bg-orange-400\/10{background-color:#ff8b1a1a}@supports (color:color-mix(in lab, red, red)){.bg-orange-400\/10{background-color:color-mix(in oklab, var(--color-orange-400) 10%, transparent)}}.bg-orange-400\/\[0\.05\]{background-color:#ff8b1a0d}@supports (color:color-mix(in lab, red, red)){.bg-orange-400\/\[0\.05\]{background-color:color-mix(in oklab, var(--color-orange-400) 5%, transparent)}}.bg-pink-400\/10{background-color:#fb64b61a}@supports (color:color-mix(in lab, red, red)){.bg-pink-400\/10{background-color:color-mix(in oklab, var(--color-pink-400) 10%, transparent)}}.bg-primary{background-color:hsl(var(--primary))}.bg-purple-400\/10{background-color:#c07eff1a}@supports (color:color-mix(in lab, red, red)){.bg-purple-400\/10{background-color:color-mix(in oklab, var(--color-purple-400) 10%, transparent)}}.bg-red-50{background-color:var(--color-red-50)}.bg-red-400\/10{background-color:#ff65681a}@supports (color:color-mix(in lab, red, red)){.bg-red-400\/10{background-color:color-mix(in oklab, var(--color-red-400) 10%, transparent)}}.bg-red-400\/\[0\.04\]{background-color:#ff65680a}@supports (color:color-mix(in lab, red, red)){.bg-red-400\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-red-400) 4%, transparent)}}.bg-red-400\/\[0\.05\]{background-color:#ff65680d}@supports (color:color-mix(in lab, red, red)){.bg-red-400\/\[0\.05\]{background-color:color-mix(in oklab, var(--color-red-400) 5%, transparent)}}.bg-red-500\/5{background-color:#fb2c360d}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/5{background-color:color-mix(in oklab, var(--color-red-500) 5%, transparent)}}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-red-500\/15{background-color:#fb2c3626}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/15{background-color:color-mix(in oklab, var(--color-red-500) 15%, transparent)}}.bg-secondary{background-color:hsl(var(--secondary))}.bg-transparent{background-color:#0000}.bg-violet-400\/10{background-color:#a685ff1a}@supports (color:color-mix(in lab, red, red)){.bg-violet-400\/10{background-color:color-mix(in oklab, var(--color-violet-400) 10%, transparent)}}.bg-white{background-color:var(--color-white)}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-white\/\[0\.02\]{background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.02\]{background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.bg-white\/\[0\.05\]{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.05\]{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.bg-white\/\[0\.06\]{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.bg-white\/\[0\.07\]{background-color:#ffffff12}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.07\]{background-color:color-mix(in oklab, var(--color-white) 7.0%, transparent)}}.bg-white\/\[0\.08\]{background-color:#ffffff14}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.08\]{background-color:color-mix(in oklab, var(--color-white) 8%, transparent)}}.bg-white\/\[0\.15\]{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.15\]{background-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.bg-yellow-400\/\[0\.05\]{background-color:#fac8000d}@supports (color:color-mix(in lab, red, red)){.bg-yellow-400\/\[0\.05\]{background-color:color-mix(in oklab, var(--color-yellow-400) 5%, transparent)}}.bg-yellow-400\/\[0\.06\]{background-color:#fac8000f}@supports (color:color-mix(in lab, red, red)){.bg-yellow-400\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-yellow-400) 6%, transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[\#0A66F7\]{--tw-gradient-from:#0a66f7;--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))}.from-black\/85{--tw-gradient-from:#000000d9}@supports (color:color-mix(in lab, red, red)){.from-black\/85{--tw-gradient-from:color-mix(in oklab, var(--color-black) 85%, transparent)}}.from-black\/85{--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))}.from-blue-400{--tw-gradient-from:var(--color-blue-400);--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))}.from-emerald-400{--tw-gradient-from:var(--color-emerald-400);--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))}.from-violet-400{--tw-gradient-from:var(--color-violet-400);--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))}.from-white\/\[0\.1\]{--tw-gradient-from:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.from-white\/\[0\.1\]{--tw-gradient-from:color-mix(in oklab, var(--color-white) 10%, transparent)}}.from-white\/\[0\.1\]{--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-\[\#3b82f6\]{--tw-gradient-to:#3b82f6;--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-blue-600{--tw-gradient-to:var(--color-blue-600);--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-purple-600{--tw-gradient-to:var(--color-purple-600);--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-teal-600{--tw-gradient-to:var(--color-teal-600);--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-transparent{--tw-gradient-to:transparent;--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))}.bg-clip-padding{background-clip:padding-box}.fill-amber-400{fill:var(--color-amber-400)}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-left-top{object-position:left top}.object-top{object-position:top}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-7{padding:calc(var(--spacing) * 7)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.\!px-5{padding-inline:calc(var(--spacing) * 5)!important}.\!px-6{padding-inline:calc(var(--spacing) * 6)!important}.\!px-7{padding-inline:calc(var(--spacing) * 7)!important}.\!px-8{padding-inline:calc(var(--spacing) * 8)!important}.px-0{padding-inline:0}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-12{padding-inline:calc(var(--spacing) * 12)}.\!py-2\.5{padding-block:calc(var(--spacing) * 2.5)!important}.\!py-3{padding-block:calc(var(--spacing) * 3)!important}.\!py-3\.5{padding-block:calc(var(--spacing) * 3.5)!important}.\!py-4{padding-block:calc(var(--spacing) * 4)!important}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-14{padding-block:calc(var(--spacing) * 14)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.py-24{padding-block:calc(var(--spacing) * 24)}.py-28{padding-block:calc(var(--spacing) * 28)}.pt-0{padding-top:0}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3\.5{padding-top:calc(var(--spacing) * 3.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-28{padding-top:calc(var(--spacing) * 28)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pt-36{padding-top:calc(var(--spacing) * 36)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-0{padding-bottom:0}.pb-0\.5{padding-bottom:calc(var(--spacing) * .5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-14{padding-bottom:calc(var(--spacing) * 14)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pb-24{padding-bottom:calc(var(--spacing) * 24)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-sans{font-family:var(--app-font-sans)}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\!text-\[13px\]{font-size:13px!important}.\!text-\[14px\]{font-size:14px!important}.\!text-\[15px\]{font-size:15px!important}.text-\[0\.8rem\]{font-size:.8rem}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[26px\]{font-size:26px}.text-\[28px\]{font-size:28px}.text-\[32px\]{font-size:32px}.text-\[36px\]{font-size:36px}.text-\[38px\]{font-size:38px}.text-\[40px\]{font-size:40px}.text-\[46px\]{font-size:46px}.text-\[52px\]{font-size:52px}.leading-\[0\.95\]{--tw-leading:.95;line-height:.95}.leading-\[1\.02\]{--tw-leading:1.02;line-height:1.02}.leading-\[1\.2\]{--tw-leading:1.2;line-height:1.2}.leading-\[1\.04\]{--tw-leading:1.04;line-height:1.04}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-\[1\.06\]{--tw-leading:1.06;line-height:1.06}.leading-\[1\.6\]{--tw-leading:1.6;line-height:1.6}.leading-\[1\.07\]{--tw-leading:1.07;line-height:1.07}.leading-\[1\.7\]{--tw-leading:1.7;line-height:1.7}.leading-\[1\.45\]{--tw-leading:1.45;line-height:1.45}.leading-\[1\.65\]{--tw-leading:1.65;line-height:1.65}.leading-\[1\.75\]{--tw-leading:1.75;line-height:1.75}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[-0\.03em\]{--tw-tracking:-.03em;letter-spacing:-.03em}.tracking-\[-0\.04em\]{--tw-tracking:-.04em;letter-spacing:-.04em}.tracking-\[-0\.025em\]{--tw-tracking:-.025em;letter-spacing:-.025em}.tracking-\[-0\.035em\]{--tw-tracking:-.035em;letter-spacing:-.035em}.tracking-\[-0\.045em\]{--tw-tracking:-.045em;letter-spacing:-.045em}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-\[0\.14em\]{--tw-tracking:.14em;letter-spacing:.14em}.tracking-\[0\.15em\]{--tw-tracking:.15em;letter-spacing:.15em}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-nowrap{white-space:nowrap}.text-\[\#0A66F7\]{color:#0a66f7}.text-\[\#0A66F7\]\/30{color:oklab(55.7454% -.0369725 -.227342/.3)}.text-\[\#0A66F7\]\/40{color:oklab(55.7454% -.0369725 -.227342/.4)}.text-\[\#0A66F7\]\/50{color:oklab(55.7454% -.0369725 -.227342/.5)}.text-\[\#0A66F7\]\/60{color:oklab(55.7454% -.0369725 -.227342/.6)}.text-\[\#0A66F7\]\/70{color:oklab(55.7454% -.0369725 -.227342/.7)}.text-\[\#f59e0b\]{color:#f59e0b}.text-\[\#f59e0b\]\/50{color:oklab(76.8591% .0560995 .154808/.5)}.text-amber-400{color:var(--color-amber-400)}.text-blue-400{color:var(--color-blue-400)}.text-blue-400\/70{color:#54a2ffb3}@supports (color:color-mix(in lab, red, red)){.text-blue-400\/70{color:color-mix(in oklab, var(--color-blue-400) 70%, transparent)}}.text-destructive{color:hsl(var(--destructive))}.text-emerald-400{color:var(--color-emerald-400)}.text-emerald-400\/50{color:#00d29480}@supports (color:color-mix(in lab, red, red)){.text-emerald-400\/50{color:color-mix(in oklab, var(--color-emerald-400) 50%, transparent)}}.text-emerald-400\/60{color:#00d29499}@supports (color:color-mix(in lab, red, red)){.text-emerald-400\/60{color:color-mix(in oklab, var(--color-emerald-400) 60%, transparent)}}.text-emerald-400\/70{color:#00d294b3}@supports (color:color-mix(in lab, red, red)){.text-emerald-400\/70{color:color-mix(in oklab, var(--color-emerald-400) 70%, transparent)}}.text-emerald-400\/80{color:#00d294cc}@supports (color:color-mix(in lab, red, red)){.text-emerald-400\/80{color:color-mix(in oklab, var(--color-emerald-400) 80%, transparent)}}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-400\/70{color:#05df72b3}@supports (color:color-mix(in lab, red, red)){.text-green-400\/70{color:color-mix(in oklab, var(--color-green-400) 70%, transparent)}}.text-green-400\/80{color:#05df72cc}@supports (color:color-mix(in lab, red, red)){.text-green-400\/80{color:color-mix(in oklab, var(--color-green-400) 80%, transparent)}}.text-orange-400{color:var(--color-orange-400)}.text-pink-400{color:var(--color-pink-400)}.text-pink-400\/70{color:#fb64b6b3}@supports (color:color-mix(in lab, red, red)){.text-pink-400\/70{color:color-mix(in oklab, var(--color-pink-400) 70%, transparent)}}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-purple-400{color:var(--color-purple-400)}.text-purple-400\/70{color:#c07effb3}@supports (color:color-mix(in lab, red, red)){.text-purple-400\/70{color:color-mix(in oklab, var(--color-purple-400) 70%, transparent)}}.text-red-400{color:var(--color-red-400)}.text-red-400\/40{color:#ff656866}@supports (color:color-mix(in lab, red, red)){.text-red-400\/40{color:color-mix(in oklab, var(--color-red-400) 40%, transparent)}}.text-red-400\/50{color:#ff656880}@supports (color:color-mix(in lab, red, red)){.text-red-400\/50{color:color-mix(in oklab, var(--color-red-400) 50%, transparent)}}.text-red-400\/60{color:#ff656899}@supports (color:color-mix(in lab, red, red)){.text-red-400\/60{color:color-mix(in oklab, var(--color-red-400) 60%, transparent)}}.text-red-400\/70{color:#ff6568b3}@supports (color:color-mix(in lab, red, red)){.text-red-400\/70{color:color-mix(in oklab, var(--color-red-400) 70%, transparent)}}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-violet-400{color:var(--color-violet-400)}.text-white{color:var(--color-white)}.text-white\/15{color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.text-white\/15{color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.text-white\/18{color:#ffffff2e}@supports (color:color-mix(in lab, red, red)){.text-white\/18{color:color-mix(in oklab, var(--color-white) 18%, transparent)}}.text-white\/20{color:#fff3}@supports (color:color-mix(in lab, red, red)){.text-white\/20{color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.text-white\/22{color:#ffffff38}@supports (color:color-mix(in lab, red, red)){.text-white\/22{color:color-mix(in oklab, var(--color-white) 22%, transparent)}}.text-white\/25{color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.text-white\/25{color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.text-white\/30{color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.text-white\/30{color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.text-white\/35{color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.text-white\/35{color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.text-white\/40{color:#fff6}@supports (color:color-mix(in lab, red, red)){.text-white\/40{color:color-mix(in oklab, var(--color-white) 40%, transparent)}}.text-white\/45{color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.text-white\/45{color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.text-white\/50{color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.text-white\/50{color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.text-white\/55{color:#ffffff8c}@supports (color:color-mix(in lab, red, red)){.text-white\/55{color:color-mix(in oklab, var(--color-white) 55%, transparent)}}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab, red, red)){.text-white\/60{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.text-white\/65{color:#ffffffa6}@supports (color:color-mix(in lab, red, red)){.text-white\/65{color:color-mix(in oklab, var(--color-white) 65%, transparent)}}.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)}}.text-white\/75{color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.text-white\/75{color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-400\/80{color:#fac800cc}@supports (color:color-mix(in lab, red, red)){.text-yellow-400\/80{color:color-mix(in oklab, var(--color-yellow-400) 80%, transparent)}}.text-yellow-400\/90{color:#fac800e6}@supports (color:color-mix(in lab, red, red)){.text-yellow-400\/90{color:color-mix(in oklab, var(--color-yellow-400) 90%, transparent)}}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.placeholder-white\/20::placeholder{color:#fff3}@supports (color:color-mix(in lab, red, red)){.placeholder-white\/20::placeholder{color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.accent-\[\#0A66F7\]{accent-color:#0a66f7}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.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-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px 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)}.shadow-black\/80{--tw-shadow-color:#000c}@supports (color:color-mix(in lab, red, red)){.shadow-black\/80{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-black) 80%, transparent) var(--tw-shadow-alpha), transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur-2xl{--tw-blur:blur(var(--blur-2xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));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,)}.brightness-0{--tw-brightness:brightness(0%);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,)}.brightness-\[5\]{--tw-brightness:brightness(5);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{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(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,)}.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))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.running{animation-play-state:running}@media (hover:hover){.group-hover\:scale-\[1\.03\]:is(:where(.group):hover *){scale:1.03}.group-hover\:bg-\[\#0A66F7\]\/15:is(:where(.group):hover *){background-color:oklab(55.7454% -.0369725 -.227342/.15)}.group-hover\:bg-gray-50\/60:is(:where(.group):hover *){background-color:#f9fafb99}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-gray-50\/60:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-gray-50) 60%, transparent)}}.group-hover\:bg-gray-200:is(:where(.group):hover *){background-color:var(--color-gray-200)}.group-hover\:text-\[\#0A66F7\]:is(:where(.group):hover *){color:#0a66f7}.group-hover\:text-gray-800:is(:where(.group):hover *){color:var(--color-gray-800)}.group-hover\:text-gray-900:is(:where(.group):hover *){color:var(--color-gray-900)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\/footer\:translate-x-0\.5:is(:where(.group\/footer):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}.focus-within\:border-\[\#0A66F7\]\/60:focus-within{border-color:oklab(55.7454% -.0369725 -.227342/.6)}@media (hover:hover){.hover\:border-white\/20:hover{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/20:hover{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.hover\:border-white\/\[0\.14\]:hover{border-color:#ffffff24}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/\[0\.14\]:hover{border-color:color-mix(in oklab, var(--color-white) 14.0%, transparent)}}.hover\:border-white\/\[0\.15\]:hover{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/\[0\.15\]:hover{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.hover\:bg-\[\#1a72ff\]:hover{background-color:#1a72ff}.hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover{background-color:color-mix(in oklch,var(--secondary),var(--foreground) 5%)}}.hover\:bg-destructive\/20:hover{background-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/20:hover{background-color:color-mix(in oklab, hsl(var(--destructive)) 20%, transparent)}}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-muted:hover{background-color:hsl(var(--muted))}.hover\:bg-primary\/80:hover{background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab, hsl(var(--primary)) 80%, transparent)}}.hover\:bg-white\/\[0\.04\]:hover{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.04\]:hover{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.hover\:bg-white\/\[0\.05\]:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.05\]:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:text-\[\#0A66F7\]:hover{color:#0a66f7}.hover\:text-foreground:hover{color:hsl(var(--foreground))}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-white\/32:hover{color:#ffffff52}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/32:hover{color:color-mix(in oklab, var(--color-white) 32%, transparent)}}.hover\:text-white\/50:hover{color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/50:hover{color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.hover\:text-white\/55:hover{color:#ffffff8c}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/55:hover{color:color-mix(in oklab, var(--color-white) 55%, transparent)}}.hover\:text-white\/60:hover{color:#fff9}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/60:hover{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.hover\:text-white\/65:hover{color:#ffffffa6}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/65:hover{color:color-mix(in oklab, var(--color-white) 65%, transparent)}}.hover\:text-white\/70:hover{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/70:hover{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.hover\:text-white\/80:hover{color:#fffc}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/80:hover{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px 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)}}.focus-visible\:border-destructive\/40:focus-visible{border-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.focus-visible\:border-destructive\/40:focus-visible{border-color:color-mix(in oklab, hsl(var(--destructive)) 40%, transparent)}}.focus-visible\:border-ring:focus-visible{border-color:hsl(var(--ring))}.focus-visible\:ring-3:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + 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-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, hsl(var(--destructive)) 20%, transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:hsl(var(--ring))}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, hsl(var(--ring)) 50%, transparent)}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-4:focus-visible{outline-offset:4px}.focus-visible\:outline-\[\#0A66F7\]:focus-visible{outline-color:#0a66f7}.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]){--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg{border-radius:var(--radius)}.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 1.5)}.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 2)}.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 1.5)}.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 2)}.aria-expanded\:bg-muted[aria-expanded=true]{background-color:hsl(var(--muted))}.aria-expanded\:bg-secondary[aria-expanded=true]{background-color:hsl(var(--secondary))}.aria-expanded\:text-foreground[aria-expanded=true]{color:hsl(var(--foreground))}.aria-expanded\:text-secondary-foreground[aria-expanded=true]{color:hsl(var(--secondary-foreground))}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:hsl(var(--destructive))}.aria-invalid\:ring-3[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + 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)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, hsl(var(--destructive)) 20%, transparent)}}@media (width>=40rem){.sm\:mx-6{margin-inline:calc(var(--spacing) * 6)}.sm\:block{display:block}.sm\:hidden{display:none}.sm\:w-\[400px\]{width:400px}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-12{gap:calc(var(--spacing) * 12)}.sm\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.sm\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.sm\:p-7{padding:calc(var(--spacing) * 7)}.sm\:px-8{padding-inline:calc(var(--spacing) * 8)}.sm\:px-10{padding-inline:calc(var(--spacing) * 10)}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-\[16px\]{font-size:16px}.sm\:text-\[20px\]{font-size:20px}.sm\:text-\[28px\]{font-size:28px}.sm\:text-\[32px\]{font-size:32px}.sm\:text-\[34px\]{font-size:34px}.sm\:text-\[40px\]{font-size:40px}.sm\:text-\[44px\]{font-size:44px}.sm\:text-\[46px\]{font-size:46px}.sm\:text-\[48px\]{font-size:48px}.sm\:text-\[50px\]{font-size:50px}.sm\:text-\[52px\]{font-size:52px}.sm\:text-\[60px\]{font-size:60px}.sm\:text-\[64px\]{font-size:64px}.sm\:whitespace-nowrap{white-space:nowrap}}@media (width>=48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:text-\[62px\]{font-size:62px}.md\:text-\[72px\]{font-size:72px}}@media (width>=64rem){.lg\:block{display:block}.lg\:h-64{height:calc(var(--spacing) * 64)}.lg\:w-\[42\%\]{width:42%}.lg\:w-\[58\%\]{width:58%}.lg\:w-\[400px\]{width:400px}.lg\:flex-1{flex:1}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[4fr_5fr\]{grid-template-columns:4fr 5fr}.lg\:grid-cols-\[360px_1fr\]{grid-template-columns:360px 1fr}.lg\:grid-cols-\[380px_1fr\]{grid-template-columns:380px 1fr}.lg\:grid-cols-\[400px_1fr\]{grid-template-columns:400px 1fr}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:gap-10{gap:calc(var(--spacing) * 10)}.lg\:gap-16{gap:calc(var(--spacing) * 16)}.lg\:p-12{padding:calc(var(--spacing) * 12)}.lg\:px-10{padding-inline:calc(var(--spacing) * 10)}.lg\:px-16{padding-inline:calc(var(--spacing) * 16)}.lg\:px-\[196px\]{padding-inline:196px}.lg\:text-\[70px\]{font-size:70px}}.dark\:border-input:is(.dark *){border-color:hsl(var(--input))}.dark\:bg-destructive\/20:is(.dark *){background-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.dark\:bg-destructive\/20:is(.dark *){background-color:color-mix(in oklab, hsl(var(--destructive)) 20%, transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:hsl(var(--input))}@supports (color:color-mix(in lab, red, red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab, hsl(var(--input)) 30%, transparent)}}@media (hover:hover){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:color-mix(in oklab, hsl(var(--destructive)) 30%, transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:hsl(var(--input))}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab, hsl(var(--input)) 50%, transparent)}}.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:hsl(var(--muted))}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:color-mix(in oklab, hsl(var(--muted)) 50%, transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, hsl(var(--destructive)) 40%, transparent)}}.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:color-mix(in oklab, hsl(var(--destructive)) 50%, transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, hsl(var(--destructive)) 40%, transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}@media (width>=64rem){.lg\:\[\&\>\*\:first-child\]\:order-2>:first-child{order:2}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(data:font/woff2;base64,d09GMgABAAAAAAfsABQAAAAAEAwAAAeCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoP0hWQVJbBmA/U1RBVIFiJyYAdC9qEQgKhGSEAAsgADCGCAE2AiQDOgQgBYlMB4EUDAcbLQ4onoexrSC/2ZyLAa8p8VHB8/x3Vue+V0hVJalMJg2nx/TCrQXxBeqLjQG7FyM1WEa/X1tEXN7cFz9EJEMmMUz3RihWSSKeQCbcIou0izz/C8v+fq3VfajEa9gDD11CImXS7qL/RJFVzC1qiB6KmKeD6TZdQ6IRGv78dL6uSVVCfgni5mzu7kcgQBgAEAQTQRCoL++STTYybkJxNfQxAAIAGu8OdEB9teW2jh4BpgDqFjAeSEByW3zFP0CBBgNMsMCGEDjgggdhiEAUAeIIED7ABTDUEnkIE9Q9ahFgKttcVhApo4ACB4qobHaccgDfEjFO6aaWUhjMLt2SyIvHKoDqoA4CSUwEIYQCEjhAO9R1G6keDeDZGjNo+AhxOjCEGTr1WeIF3kYBiLAOKvkJSMiKX0VdAyQt3SDJClCkxJCHkCzfqyVTriJZLcolS32JZHUekq2TYNkYtCtjYHMQXSxGjXDz2t/yLWXzDzxz+o3zFwDEaN23F+13pyMdQAEaSKAR9vcGq4A4MTSKCElGW+M7UcY7xqkggITb28ZJhlqc9q2twYKTt0NjixBgYvO9BIihEBLYuOFXQzfIQ7dXGUEEEgFDooBfAzqiQbpJrhiWSuKJCRFKYbHCyJKI2G5GiZbNAvgAu5pc3vwx4G+g3aDkhklABiSz0BICXrYghtYhx/cdJ+44rY2oZ0aMNRFz3VZjb6W33F3gzltqtOCV8tTHSpOeXuItfvr5lCdfzFpqtEitvqdcdGGFd28ZqqC0tPbeChGXgrIlnhSWu/eUso4uKWFLugyDzQJhflY4659+WjQ++6x72WUMv9G8mw6QJl7BVxX5fe/kpUsOvnZwee9uQ0cGXYd0o89XB2748sDSnt8d2VphdOTTgceDVvOds0v9P/s7HPq15aGun/6Vllb56f1dl0t1LejqrNkpdRZsG8TOnM5vkBG5oiVyVGnS8LHps5cfNWJs6qKPfaNSxiQNBUm3cKNWROr0GSur7Za31k1vieq7LH11VF+jXdRIasRKflc7jkobm1Z9te1IyZA0pDkhLR98+H37Zf1c/8at+dB7x+7GfVyTfJMPiYztsnl59Y5l4j+0n1RXlpHnF3Tq7HecmNF/CJodEMAikruxiyJaGLvHOdAfoA+oDvpjBm2b91cHGRZMU9n25xEU0A8fgEEAdKI3Q1iDtc034sug5YVMkE2jsE+BIkwSoQ3gxXMqz9tELp48bd0cFKOKS7xYjEuXBnZP5ia7DyiO/X/YI+PQSbt2uSdqAkWL9nQbV1XB94/+uPfdZz8dnXYFBYrcTl2SIR/ybxJNJPz/Gupb0JaZeens2ekC7EKr8t+Ls/P5VJPYJdHKyqfg2nqU6bhlidzcddQV/7MmecTzJ5VPcKXkNKSEogHjYFx6QZ7rQ+FSe8njaiNuOnXS8H2ScQ619c2mC3VTtauL0rRbXd/CkSOP37FY9Zkjz8+GibYUMOEWF+RdrFS8Ecv1SHOpPUPZGEIpjPvFyU5cXKjd6OXqorTqy9GwRd++HVufPGnVsW+aO3vggKZ18jR9sXaTC1PWTEsVUaK0FkNySbTQDqlm2PfDjZcu4aalnSLKjnOoYQ0nUlqqXcGpPu/4VgV/xU2pAqW4BW3qzhQ8/hFKhV2qE3+BKAtDqBXjfgnVdH4y0wg5tbVNRenNdTWOrenWLcupQdmsbq5b+18piTe/xRdp1xbILxNPJGInm2z6hoB21Lal0i+ePTtd7B45+3XhFJ329evskXm7qurUVREotqSluSo/L29d3qDhI4YOQqWhI4YNvBNfsMHeXKemXrxQfKeuPOGRVayA3JtkJKEgbPp+dXUDluddutRYLFoXGXWX6N3WFaGLbQtRSitVYNacTNSdy7AaG/HSaUEANcBoGXNdcZvZsOqQ1icBDv21/gzAoYPHH/WDW0qNR3QTYKEAEHig6o13NXbND06CQPlRtYjGNnSktRc09k1mAMDvAlDKfQjgy6fssInlfzmNAjKkDxoxHOBLdVRAIVt9j4qo+hA1w9T1aNBNTUOTTNUHLbqokE+UAfJXCIGw/IxCSL5GRUJeR40rL/UxTm4Q08H6MbCs70ObuNyIIXrINHQYInF06UUlevTjbQzTh5upiDMzMMogUtEnjPs/Y7jAHCJeB0GBHh04tC6FiB6ZFB1oArUSIoFoqhzCeAN6lHwm0T4C3VVPWvjpSMXReuWesMEcoqrmgtNBGd2noWeV0hNAz9rFeShNJxHGsPa3HXeKTk8b55hahySYHaYKKFFLpCfN8rsoaJn01CR04Gkc+5k7KVTCmClX8Q10HCrUEkVlSX+XO33oQR9609tJ516H497WSobWs5Up6TLaS10/dessIskgJSLiDlWvHVUywpkQ7hdPZqGyiEF0uVQerVcPamT1A3eKXdyI1vG9OoflrSXihZ1qqGE3nhmAgiIbRCQgPLEPtOM3UQwTLYaYYomNlpA44opnjV6jkD6id80OOrzf6BzmMD6eEa1zKyeYG1fzfEf16V6jw9XYOaar1/b2kP/IYX8oR2mcFvv2GtBV3JXgd437AQAA)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/lp/assets/jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/lp/assets/jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/lp/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/lp/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/lp/assets/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(data:font/woff2;base64,d09GMgABAAAAAAn4ABMAAAAAEwQAAAmOAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGjQbgnQcLj9IVkFSgQEGYD9TVEFUgQIAgQovahEICok0h0ULIAAwhzoBNgIkAzwEIAWHJgeBDgwHG6QQUdRKTmoBFD8K42bniObKrG3LZFcMWZzFmrjTFhQ6TVTqPJcInrfrvzq3b2PGn1wwMiNYGTy9ViREYARlL1zAGcPdPqBt3gNWrfKthv4xnM+b9caw+wmjgEUVRjHXhS6jgCK6zf5HiWQacJpGdAgdrbV6g/Rf1BfxRqZVQnrxRVWSJb6RLFnyu0elilmjeoSQCKnxsmwLaddUMjnksriSYuuPl06EAl7KfAiWQjCUETz0zNZ3EII94CDQtzkMfZ/9IkkY8tZRZTDky5ZVwBAM+GYpdd4ZVAWYImnLkiTg48l79gGx3D+VBtLeyg8u7bJAd4uo0pFuQBFysE9C95l0W4Fkiao6GfrDbu77lVU7wk9cV3uqOsXmQiMkhVKl1ugjzUAJBSIkkVWHijkpkVSyUFsgVBuJMA0N+ZnXtyUv5yMigGdfQRmwL1AAjQ3YXG6iIFNSUdPQo8+AISPGAltBMDQRAtyf4ZspLlZkpyOVoMZPvFGWzvk8p5SUC/NWPMj6T2/Yas2EdlON5GkfdkeFwVGjta825H89NIenlLWAPAp5h1KDtRhCaAQWMsFKtEvOKpIhgLHlXPARokkgEGEOAkqxJRQpKYq4ezahIiLHP6hZpqMbV0pUF2vdvEimLEQ/iIUYLgYWs0VXGVlLTOPdaPmFfCC/XrtzqVo1ez7vz6+Kd2+7o11ZJ+4MreLbB5BKVGxobAq4jZYalZ5aX2CKJiwUuc9GNJyi4M8bGyKcdjSRrG4JohdF8buJfmQefbYYREnMFsOoiNliFDVxmRgL0XUmUMLqzW0A4gCQAhWGYCQpFNukwXhIkPMsbRI19ewtw8Cp2Wj/Ro5cM2OTAbJAvZ/L4opBXb9+UHscYuOKM/W8isgwN26Exexjizmfnlp9dE3hOSqdZ/F5QqbckIlPb+oKfXxd6hftJ7Sm/uyPYpONza84CRlMNk/uhOrLpyf53982++zRkXNu3g3VF8qFbx1+7fbHZ9DrB3VXWNSmhnT2vrwS1+1Z+kHGBaZIhnnvuLBTNDeA340D1DWu5/jEa9pVfl6+Jij+yo3EELNixXCLjr173Q5eDP7Y7/L4iQFHbjpaJLFoP4cCsYP6sAPL7gMHNg53yYjqxqTDrYqLDl5DzW/eTLjYxCvucprjI3yl2ykKowKUC2Ox2FJLFo6Fa1HBWLC2jMCIIBEmklkYhmkpmBhTm/LCvJAH5oGcMKcgFEP1xUdho8ANPa6RFD99/PN60fjj9eXy2Eex4B5MpmRapXidzFk1p4uLk3+hn6jAP9ovJcXPPwk8o/0ltizbdbnTprvx4PSxT0VZ3Xc772aN7RflgbXRYwc3hLNO+k878nxGwfuVM8m8Gs7WEoVGWLHwSpx4vNSHBCMNqJ4m15Kp/TfHHVkQd++eY7PGN4W5byTs+6Ft8Ozvb/D60btv37de8ER0mS3P/0sLW84qGjEVkwztPzz06eGUWwKLwPb0D/WFd3vltl2aP276KpM0JNz6AfnAnZ5ADlF2zVyZ2OkxHSMxWPMnSZLbbDR3F1UjPVqp4d68da13F1YZujdWw7271iecO2l9+/4p47Oztjck355/75wFOI+VdGDqbNGs+ISgxg3iB2jb2r+b0CWsNLHIM4sdv8SDSFBP/Oromz6FNCWw2iMTxV0R8QLyBTkpe0j5+pSSJOOTB5Mck/gh3IopuNQnhKj02t3FL80gGbEh89SZcwTxcYt5cZT/nMnB3uXfPy8BSpVMBuRx+ZhACGzDBmwHsJRAjhotOnzuj2wDz3ug2wOUAY2NgZln9/TK/enG/oE4rO1wxvGUFMAxsZ0qNjRC7hl9d17e7imbgDt6uJXhUobDg7v3RX/yRCKxgMhfyiKcZfbpk0wmCcdQlIAOHeakXLvCNt++WfKiozNqSZxxJotn+c0a7DdPsx7DPYgKIDxwwYUZDg9aJbxocTjcwovr9WAsVV32mQoiiIOCHc60Oltst9qCQYuCqN1yHo0Kj60OgI2OqmiuBUWrNA0NDhYCDcdpmMrs1fZZ0xdTzMr1HdPtIHstYhqaPDDA5YxUDx7J4fJiisBSDI/L6G/bn34GNy8Q2g044ZTulAdFLb0tI6NNxfj3DzLjWiNGxje1pz7aXOcNV68lDPEd2SXl6VfBuwmHzdf1gxFy1HvA7pD8I2BnnmyGw852Cg5XbgIdEEGE5UCzen5jTlG6JCU5iajlxVcsXvbcS0SAcg1dcesWJLVK8+hYHOYQ+Pjy+EyVGXP0aPTFagrV9E03hCQvYx+g47KGq+1GsLj8uBIyihNw33YUe8PNC4BOJ3Lm1AglLV3nCuvUdIP+v15tVGbWIwgxLVpPkfpthCGpTKG+oA/DQfsKKvxhScqaN6FuElAUtTKv2UYgOmQegsN/n7njHUju8wM4VTcm+Q8xfX9SFwjTzdVqu95UOWSIGOabH8OGBEba//8Yxl3GcPdP/dMBOoSX/0z5SZmBoLbaPs+9asaMpb36yknKaw6FqWZa6A5vDa02mhkOba1q6KtLV208xrkwmW5C4VD6n2fvRjADy2qDYYnNy+H10Fq0LMbNzS863gkO7iQ8eC48/Ny5m59tOcEso3u7Qg3yrqDL6eKXwJAuWnhylfbWrRObe66rzX59+XDtzusnL66dI/86ArmtLlzED860Ef3bFPV78OX/zFTA11fcBn2Vntb7qiGBSgLBHyuv/uEaqqoTgSpOyjlzh86me1Vriv7i9rLPLvtghWmSnblRbAsBJL/4dScSQTBxOivHMO5QvBBY0iheJvfwWLxLOGzYKZyM4zVc2Cll46zEpeUV4MqGEWZj22SdOxhGAjgs9AEnfT+RoiMfcDb0GS5NncKVxju4Nt/mRk13O9Gz3FLct5oCD6wkwUNrCfHIUg6SMf8LwQGyVaBUqpLPW5BaMpRshEpl8nS1qw5dgnzlik8QBXmdy5UrIH74heTKZKMSilQso4hsRiGraQZRzxpNGqlEJMsXuAU7GlcR8mWSykUpVkWGyIf0a8v4qEQp5CtGsMiZa+4ESYQy+WilCiguHzxMXO54ogShooTV2bj2z1zL6DYSoImoQ8lFUWxMLBNQQgLkV2tHYgUoIbkuREz+fJHKxxWBcnvu3KQppFCxLkguB1NyVSp/TknRvNwYlCdbblWu3ze6owHdWluhE5tgQ6ej2SV65CijijoaRfSiH4Nqz1OpfEW+WeI/oU0ly60zkV9YzOQSYtZVEGYmrysTZAJkY4qZtIBD9/LYTIK7Nww3vMiYBwA=)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/lp/assets/manrope-cyrillic-wght-normal-Dvxsihut.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/lp/assets/manrope-greek-wght-normal-DL7QRZyv.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/lp/assets/manrope-vietnamese-wght-normal-usUDDRr7.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/lp/assets/manrope-latin-ext-wght-normal-Ch3YOpNY.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/lp/assets/manrope-latin-wght-normal-DHIcAJRg.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--background:0 0% 4%;--foreground:0 0% 100%;--border:0 0% 10%;--card:0 0% 6%;--card-foreground:0 0% 95%;--popover:0 0% 6%;--popover-foreground:0 0% 95%;--primary:218 92% 51%;--primary-foreground:0 0% 100%;--secondary:0 0% 8%;--secondary-foreground:0 0% 70%;--muted:0 0% 7%;--muted-foreground:0 0% 42%;--accent:218 92% 51%;--accent-foreground:0 0% 100%;--destructive:0 72% 51%;--destructive-foreground:0 0% 100%;--input:0 0% 12%;--ring:218 92% 51%;--sidebar:0 0% 5%;--sidebar-foreground:0 0% 80%;--sidebar-border:0 0% 10%;--sidebar-primary:218 92% 51%;--sidebar-primary-foreground:0 0% 100%;--sidebar-accent:0 0% 8%;--sidebar-accent-foreground:0 0% 80%;--sidebar-ring:218 92% 51%;--app-font-sans:"Manrope Variable", system-ui, -apple-system, sans-serif;--app-font-mono:"JetBrains Mono Variable", Menlo, monospace;--radius:.6rem}.page-grid{background-image:linear-gradient(#ffffff0e 1px,#0000 1px),linear-gradient(90deg,#ffffff0e 1px,#0000 1px),linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-position:50% 0,50% 0,50% 0,50% 0;background-size:288px 288px,288px 288px,72px 72px,72px 72px}.page-vignette{background:radial-gradient(80% 70% at 50% 30%,#0000 0% 40%,#00000073 100%)}.col-layout{position:relative}.col-layout:before,.col-layout:after{content:"";pointer-events:none;background:linear-gradient(#0000 0%,#ffffff12 8% 92%,#0000 100%);width:1px;position:absolute;top:0;bottom:0}.col-layout:before{left:196px}.col-layout:after{right:196px}@media (width<=1024px){.col-layout:before{left:40px}.col-layout:after{right:40px}}@media (width<=640px){.col-layout:before,.col-layout:after{display:none}}@property --shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes shimmer-spin{to{--shimmer-angle:360deg}}.shimmer-btn-wrap{background:conic-gradient(from var(--shimmer-angle), transparent 0%, transparent 40%, #ffffff4d 47%, #ffffffbf 50%, #ffffff4d 53%, transparent 60%, transparent 100%);cursor:pointer;border-radius:14px;padding:1.5px;text-decoration:none;transition:box-shadow .25s,transform .2s;animation:3.6s linear infinite shimmer-spin;display:inline-flex;position:relative;box-shadow:inset 0 1px #ffffff14,0 8px 24px #0a66f752,0 2px 8px #0006,0 0 0 1px #0a66f726}.shimmer-btn-wrap:hover{transform:translateY(-2px)scale(1.01);box-shadow:inset 0 1px #ffffff1a,0 14px 36px #0a66f770,0 4px 12px #00000073,0 0 0 1px #0a66f738}.shimmer-btn-wrap:active{transform:translateY(0)scale(.99);box-shadow:inset 0 1px #ffffff0d,0 4px 12px #0a66f738,0 1px 4px #00000059,0 0 0 1px #0a66f71f}.shimmer-btn-inner{color:#fff;letter-spacing:-.01em;white-space:nowrap;background:linear-gradient(175deg,#ffffff29 0%,#0000 55%),#0a66f7;border-radius:13px;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:800;transition:background .22s,box-shadow .22s;display:inline-flex;box-shadow:inset 0 1px #ffffff38,inset 0 -1px #0000002e}.shimmer-btn-wrap:hover .shimmer-btn-inner{background:linear-gradient(175deg,#fff3 0%,#0000 55%),#1a72ff;box-shadow:inset 0 1px #ffffff42,inset 0 -1px #0003}.shimmer-btn-wrap:active .shimmer-btn-inner{background:linear-gradient(175deg,#ffffff14 0%,#0000 55%),#0858d6;box-shadow:inset 0 1px #ffffff24,inset 0 -1px #0000003d}.shimmer-btn-wrap--light{background:conic-gradient(from var(--shimmer-angle), transparent 0%, transparent 40%, #0a66f747 47%, #0a66f7b3 50%, #0a66f747 53%, transparent 60%, transparent 100%);box-shadow:0 8px 24px #0a66f738,0 2px 8px #0000001a,0 0 0 1px #0a66f71f}.shimmer-btn-wrap--light:hover{box-shadow:0 14px 36px #0a66f752,0 4px 12px #00000024,0 0 0 1px #0a66f72e}.shimmer-btn-inner--light{background:linear-gradient(175deg,#ffffff29 0%,#0000 55%),#0a66f7}.shimmer-btn-wrap--hero{background:conic-gradient(from var(--shimmer-angle), transparent 0%, transparent 38%, #ffffff40 44%, #ffffffd9 50%, #ffffff40 56%, transparent 62%, transparent 100%);overflow:visible;box-shadow:0 4px 20px #00000040}.shimmer-btn-wrap--hero:hover{transform:translateY(-2px)scale(1.01);box-shadow:0 8px 28px #0000004d}.shimmer-btn-wrap--hero:active{transform:translateY(0)scale(.99)}.shimmer-btn-inner--hero{box-shadow:none;color:#06060f;z-index:1;background:#fff;position:relative}.shimmer-btn-wrap--hero:hover .shimmer-btn-inner--hero{background:#f4f4f4}.shimmer-btn-wrap--hero:active .shimmer-btn-inner--hero{background:#e8e8e8}.shimmer-btn-wrap--white{background:conic-gradient(from var(--shimmer-angle), transparent 0%, transparent 40%, #fff6 47%, #ffffffd9 50%, #fff6 53%, transparent 60%, transparent 100%);box-shadow:0 8px 24px #0003,0 2px 6px #00000026,0 0 0 1px #ffffff1f}.shimmer-btn-wrap--white:hover{box-shadow:0 14px 36px #00000047,0 4px 10px #0000002e,0 0 0 1px #ffffff2e}.shimmer-btn-inner--white{color:#0a66f7;background:linear-gradient(175deg,#ffffff4d 0%,#fffffff2 100%);box-shadow:inset 0 1px #fffc,inset 0 -1px #0000000f}.btn-primary{color:#fff;background:#0a66f7;transition:all .12s;transform:translateY(0);box-shadow:0 4px #0847b5,0 8px 20px #0a66f74d}.btn-primary:hover{background:#1a72ff;transform:translateY(-2px);box-shadow:0 6px #0847b5,0 12px 28px #0a66f761}.btn-primary:active{transform:translateY(4px);box-shadow:0 0 #0847b5,0 4px 12px #0a66f733}.btn-primary-3d{color:#fff;background:#0a66f7;transition:all .12s;transform:translateY(0);box-shadow:0 4px #0847b5,0 8px 20px #0a66f74d}.btn-primary-3d:hover{background:#1a72ff;transform:translateY(-2px);box-shadow:0 6px #0847b5,0 12px 28px #0a66f761}.btn-primary-3d:active{transform:translateY(4px);box-shadow:0 0 #0847b5,0 4px 12px #0a66f733}.btn-primary-light{color:#fff;background:#0a66f7;transition:all .12s;transform:translateY(0);box-shadow:0 4px #0847b5,0 8px 20px #0a66f740}.btn-primary-light:hover{background:#1a72ff;transform:translateY(-2px);box-shadow:0 6px #0847b5,0 12px 28px #0a66f752}.btn-primary-light:active{transform:translateY(4px);box-shadow:0 0 #0847b5,0 4px 8px #0a66f726}.blue-text{color:#0a66f7}.blue-glow-text{color:#3b82f6;text-shadow:0 0 60px #0a66f72e}.section-border-t{border-top:1px solid #fff1}.mockup-fade-bottom{background:linear-gradient(#0000 60%,#0a0a0a 100%)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.marquee-mask{-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%)}@keyframes marquee-left{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes marquee-right{0%{transform:translate(-50%)}to{transform:translate(0)}}.marquee-track{will-change:transform;width:max-content;display:flex}.marquee-track--left{animation:34s linear infinite marquee-left}.marquee-track--right{animation:38s linear infinite marquee-right}.marquee-wrap:hover .marquee-track{animation-play-state:paused}@keyframes cursor-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes float-a{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes float-b{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes float-c{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spotlight-breathe{0%,to{opacity:.8}50%{opacity:1}}@keyframes orb-breathe{0%,to{opacity:.75;transform:translate(-50%)scale(1)}50%{opacity:1;transform:translate(-50%)scale(1.06)}}@keyframes nebula-drift{0%{opacity:.8;transform:translate(0)scale(1)}33%{opacity:1;transform:translate(-2%,2%)scale(1.04)}66%{opacity:.85;transform:translate(1%,-1.5%)scale(.97)}to{opacity:.8;transform:translate(0)scale(1)}}@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-divide-y-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:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";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:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";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-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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:"<percentage>";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:"<percentage>";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:"<length>";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-outline-style{syntax:"*";inherits:false;initial-value:solid}@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:"<percentage>";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-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}


/* Plus Jakarta Sans (licence SIL OFL) — la police du dashboard TikTrack, hébergée ici. */
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lp/fonts/jakarta-4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lp/fonts/jakarta-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lp/fonts/jakarta-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lp/fonts/jakarta-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lp/fonts/jakarta-4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lp/fonts/jakarta-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lp/fonts/jakarta-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lp/fonts/jakarta-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lp/fonts/jakarta-4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lp/fonts/jakarta-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lp/fonts/jakarta-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lp/fonts/jakarta-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lp/fonts/jakarta-4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lp/fonts/jakarta-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lp/fonts/jakarta-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lp/fonts/jakarta-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lp/fonts/jakarta-4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lp/fonts/jakarta-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lp/fonts/jakarta-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lp/fonts/jakarta-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* tiktrack.css — tout ce qui nous appartient.
   Chargé APRÈS la feuille du modèle : c'est ici qu'on s'en éloigne.
   Rien n'est écrasé par hasard, nos classes commencent toutes par « tt- ». */



/* --- La police ----------------------------------------------------------
   Plus Jakarta Sans, celle du dashboard. On ne touche QUE à la famille :
   les graisses, les tailles et les interlignes du modèle restent intacts. */
html {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
*,
*::before,
*::after {
  font-family: inherit;
}
/* On garde la police à chasse fixe là où elle est demandée exprès. */
.font-mono,
code,
pre,
kbd {
  font-family: 'JetBrains Mono Variable', ui-monospace, monospace;
}

:root {
  --tt-bleu: #0075ff;
  --tt-bleu-clair: #4d9bff;
  --tt-vert: #3ddc97;
  --tt-nuit: #060d1e;
  --tt-souple: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Le bleu -----------------------------------------------------------
   Le modèle écrit son bleu directement dans le NOM des classes
   (`text-[#0A66F7]`). On ne peut donc pas le renommer dans le HTML sans casser
   la correspondance : on redéfinit ces classes ici, une bonne fois. */
.text-\[\#0A66F7\] {
  color: var(--tt-bleu) !important;
}
.bg-\[\#0A66F7\] {
  background-color: var(--tt-bleu) !important;
}
.bg-\[\#0A66F7\]\/10 {
  background-color: rgba(0, 117, 255, 0.1) !important;
}
.bg-\[\#0A66F7\]\/14 {
  background-color: rgba(0, 117, 255, 0.14) !important;
}
.border-\[\#0A66F7\]\/20 {
  border-color: rgba(0, 117, 255, 0.2) !important;
}

/* --- Les apparitions au défilement ------------------------------------- */
/* ⚠️ CES BLOCS SONT INVISIBLES TANT QUE LE SCRIPT N'A PAS POSÉ `.vu`. C'est
   voulu — c'est ce qui permet l'apparition au défilement — mais ça veut dire que
   si le script n'arrive jamais (réseau coupé en route, erreur JavaScript), la
   page reste DÉFINITIVEMENT blanche. Un site entier suspendu à un fichier.

   D'où le filet : au bout de 2,5 secondes, l'animation `tt-secours` révèle tout,
   quoi qu'il arrive. Elle ne se déclenche jamais en temps normal, puisque `.vu`
   la coupe (`animation: none`) bien avant.

   ⚠️ PAS DE `backwards` DANS LE `fill-mode` : pendant les 2,5 s d'attente,
   l'animation ne doit RIEN appliquer, sinon elle écraserait l'`opacity: 0` de
   la règle et tout serait visible d'emblée — une animation en cours prime
   toujours sur la propriété de base. */
[data-apparition] {
  opacity: 0;
  transform: var(--depart, translateY(24px));
  transition:
    opacity 0.75s var(--tt-souple),
    transform 0.75s var(--tt-souple);
  will-change: opacity, transform;
  animation: tt-secours 0s linear 2.5s forwards;
}
[data-apparition].vu {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes tt-secours {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-apparition] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- La barre du haut ---------------------------------------------------
   Demande de Ghilès : elle ne suit JAMAIS le défilement.
   Elle est POSÉE PAR-DESSUS le hero (`absolute`, pas `fixed`) : en `relative`
   elle occupait sa propre bande noire au-dessus du dégradé bleu, ce qui
   coupait la page en deux. En `absolute` le fond animé passe derrière le logo
   et la barre s'en va normalement quand on défile. */
.tt-entete {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  /* Collée tout en haut, comme sur tiktrack.io (`absolute top-0`, py-4) : les
     8 px de retrait décalaient le trait bleu du bas de la rangée. */
  padding-top: 0;
  background: transparent !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* `h-20` de Tailwind n'existe pas dans le CSS aspiré (purgé) : la rangée
   retombait à 43 px, d'où la barre écrasée. On fixe la hauteur ici. */
/* Le cadre remplace le conteneur d'origine (centré sur 1440 px PUIS rentré de
   196 px) : la rangée tombe désormais PILE sur les deux rails verticaux, donc
   le trait bleu sous le header s'y raccorde exactement, comme sur tiktrack.io. */
.tt-entete__cadre {
  max-width: none;
  margin: 0;
  padding: 0 196px;
}
@media (max-width: 1024px) {
  .tt-entete__cadre {
    padding: 0 40px;
  }
}
@media (max-width: 640px) {
  .tt-entete__cadre {
    padding: 0 16px;
  }
}
.tt-entete__rangee {
  height: 66px;
  padding: 0 16px;
  /* LE trait sous le header — `border-b-[#073571]` sur tiktrack.io. */
  border-bottom: 1px solid #073571;
}
@media (max-width: 640px) {
  .tt-entete {
    padding-top: 0;
  }
  .tt-entete__rangee {
    height: 60px;
    padding: 0;
    border-bottom: 0;
  }
}
/* ⚠️ 30 px, PAS 34 : la même taille que dans le SaaS (Ghilès, 24/08 :
   « fais exactement pareil que sur le dashboard »). Là-bas l'icône fait 30 px
   et le mot « Tiktrack » 15 px ; ce SVG a le même rapport largeur/hauteur
   (119/34 contre 106/30), donc le poser à 30 px suffit à retrouver le même
   logo dans les deux univers. Si le dessin du SaaS change, ce nombre change. */
.tt-logo {
  height: 30px;
  width: auto;
  max-width: 210px;
}
@media (max-width: 640px) {
  .tt-logo {
    height: 26px;
  }
}

/* --- Le menu du téléphone ---------------------------------------------- */
/* ⚠️ LE MENU N'EST PLUS EN `display: none`. On ne peut PAS animer `display` :
   il bascule d'un coup, et le panneau apparaissait sec. Il reste donc toujours
   affiché, et c'est son OPACITÉ et sa POSITION qui sont animées.
   `visibility` fait le travail que faisait `display` — le panneau fermé est
   hors de l'arbre d'accessibilité et ne capte aucun clic. Elle bascule
   instantanément à l'ouverture, mais attend la fin du fondu à la fermeture
   (d'où le délai sur la transition ci-dessous), sinon le panneau disparaîtrait
   avant d'avoir fini de s'effacer. */
.tt-menu {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(10, 16, 34, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.28s var(--tt-souple),
    visibility 0s linear 0.28s;
}
.tt-menu--ouvert {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.2s ease,
    transform 0.28s var(--tt-souple),
    visibility 0s;
}
/* Les entrées arrivent en escalier derrière le panneau. Les délais ne sont
   posés que sur l'état OUVERT : à la fermeture, tout s'efface d'un bloc. */
.tt-menu > * {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.22s ease,
    transform 0.26s var(--tt-souple);
}
.tt-menu--ouvert > * {
  opacity: 1;
  transform: none;
}
.tt-menu--ouvert > :nth-child(1) {
  transition-delay: 0.05s;
}
.tt-menu--ouvert > :nth-child(2) {
  transition-delay: 0.09s;
}
.tt-menu--ouvert > :nth-child(3) {
  transition-delay: 0.13s;
}
.tt-menu--ouvert > :nth-child(4) {
  transition-delay: 0.17s;
}
.tt-menu--ouvert > :nth-child(5) {
  transition-delay: 0.21s;
}
@media (prefers-reduced-motion: reduce) {
  .tt-menu,
  .tt-menu > *,
  .tt-menu--ouvert > * {
    transition-duration: 0.01s;
    transition-delay: 0s;
    transform: none;
  }
}
.tt-menu a {
  padding: 12px 14px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.tt-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.tt-menu__cta {
  /* 6 px au-dessus, 14 px en dessous : le bouton était collé à ce qui le suit,
     et sur un téléphone le pouce arrive juste en dessous. */
  margin-top: 10px;
  margin-bottom: 14px;
  text-align: center;
  background: var(--tt-bleu);
  color: #fff !important;
  box-shadow: 0 12px 28px -10px rgba(0, 117, 255, 0.7);
}

/* --- Le fond du hero ----------------------------------------------------
   Repris de la landing TikTrack : le quadrillage, la lueur conique, les deux
   bulles bleues et la courbe.
   RÈGLE DE GHILÈS (1er août) : SEULE LA COURBE BOUGE. Le quadrillage, la lueur
   et les bulles sont POSÉS, immobiles. Ne pas leur remettre d'animation. */
.tt-fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Le dégradé de SoftSearch, repris tel quel de sa page (trois ellipses bleues
   empilées, accrochées au haut du hero). Il remplace l'image banner-glow.png.
   Il passe SOUS le quadrillage (z-index 1 contre 2) : au-dessus, ses 3 couches
   l'effaceraient, exactement comme les flous de la lueur conique. */
.tt-fond__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(0, 117, 255, 0.42) 0%, rgba(0, 117, 255, 0.14) 42%, transparent 74%),
    radial-gradient(ellipse 160% 78% at 50% -6%, rgba(0, 117, 255, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 125% 48% at 50% 4%, rgba(0, 117, 255, 0.055) 0%, transparent 82%);
}
/* Valeurs relevées au pixel sur tiktrack.io (`.hero-bg-grid`) : 0.043 de blanc,
   maille de 48 px, masque radial qui s'éteint à 62 %. Ne pas « améliorer ».
   Le quadrillage passe AU-DESSUS de la lueur et des bulles (`z-index: 2`) :
   posé en dessous, il était noyé par les flous de 90-100 px et on ne le voyait
   plus du tout — c'est pour ça qu'il semblait absent.

   ⚠️ PAS DE 48 PX, FIXE. NE PLUS JAMAIS Y TOUCHER.
   On avait essayé de caler la grille sur les deux rails verticaux de la page
   (`.col-layout::before/::after`, à 196 px des bords) en fixant le NOMBRE de
   colonnes : `calc((100% - 392px) / 24)`. Résultat : un pas de 47,66 px, donc
   fractionnaire. Sur un écran à 1,5× (le cas de Ghilès), une ligne sur deux
   tombe entre deux pixels physiques : une nette, une floue, et l'espacement
   paraît irrégulier — « la grille est mal faite ». Un pas de 48 px tombe
   toujours juste (48 × 1,5 = 72), toutes les lignes sont nettes.
   Le décalage de 4 px (196 = 4 × 48 + 4) fait tomber une ligne PILE sur le
   rail de gauche, sans rien casser ailleurs. */
.tt-fond__grille {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 4px 0;
  /* DEUX masques combinés (`intersect`) :
     1. celui de tiktrack.io, qui éteint la grille vers le bas (62 %) ;
     2. un fondu par le HAUT sur 150 px, pour qu'elle s'efface en douceur en
        montant vers le header.
     Avant, ce fondu était un rectangle sombre posé PAR-DESSUS tout le hero
     (`.tt-hero__fondu`) : il effaçait la grille d'un coup et créait une cassure
     nette juste sous le trait du header. En le mettant sur la grille seule, le
     dégradé du fond reste continu et il n'y a plus de raccord visible. */
  -webkit-mask-image:
    radial-gradient(115% 75% at 50% 0%, #000 0%, transparent 62%),
    linear-gradient(180deg, transparent 0, #000 150px);
  mask-image:
    radial-gradient(115% 75% at 50% 0%, #000 0%, transparent 62%),
    linear-gradient(180deg, transparent 0, #000 150px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* ⚠️ COMPENSATION DU PLAFOND DE LA LUEUR (25/08). Le masque de la grille est
   dimensionné en POURCENTAGE de la hauteur du hero : en plafonnant la lueur à
   600 px, le hero est passé de 1493 à 1372 px sur un écran de 1920, donc la
   grille s'éteignait 56 px plus haut qu'avant — « la grille a été déplacée ».
   On rend ces 56 px là où le plafond agit, et NULLE PART AILLEURS : sous
   1310 px de large la lueur n'est pas plafonnée, le hero n'a pas changé, et
   le masque d'origine reste le bon.
   75 % x 1493 / 1372 = 81,6 -> 82 %. */
@media (min-width: 1310px) {
  .tt-fond__grille {
    -webkit-mask-image:
      radial-gradient(115% 82% at 50% 0%, #000 0%, transparent 62%),
      linear-gradient(180deg, transparent 0, #000 150px);
    mask-image:
      radial-gradient(115% 82% at 50% 0%, #000 0%, transparent 62%),
      linear-gradient(180deg, transparent 0, #000 150px);
  }
}
.tt-fond__conique {
  position: absolute;
  left: 50%;
  top: -26%;
  width: 1150px;
  height: 1150px;
  max-width: 150vw;
  transform: translateX(-50%);
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.55;
  background: conic-gradient(
    from 0deg,
    rgba(0, 117, 255, 0) 0deg,
    rgba(0, 117, 255, 0.5) 65deg,
    rgba(58, 160, 255, 0.16) 150deg,
    rgba(125, 180, 255, 0.42) 235deg,
    rgba(0, 117, 255, 0) 320deg
  );
}
.tt-fond__bulle {
  position: absolute;
  border-radius: 9999px;
  filter: blur(100px);
}
.tt-fond__bulle--une {
  left: 6%;
  top: 2%;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(58, 160, 255, 0.45) 0%, rgba(58, 160, 255, 0) 70%);
}
.tt-fond__bulle--deux {
  right: 4%;
  top: 12%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 117, 255, 0.42) 0%, rgba(0, 117, 255, 0) 70%);
}
.tt-fond__courbe {
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  width: 100%;
  height: 44%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.28) 33%, rgba(0, 0, 0, 0.28) 67%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.28) 33%, rgba(0, 0, 0, 0.28) 67%, #000 100%);
}
/* Plus rien à neutraliser ici : le quadrillage, la lueur et les bulles sont
   déjà immobiles. Seule la courbe s'anime, via son `<animate>` SVG. */

/* --- Le hero, calé sur tiktrack.io --------------------------------------
   Trois choses manquaient et faisaient toute la différence :
   1. LA COULEUR DE FOND. Le hero repose sur #060D1E (bleu nuit très sombre).
      Sans elle, la lueur conique et les bulles délavaient tout en bleu clair
      et le quadrillage disparaissait — d'où l'impression de « pas la même
      grille » alors que ses valeurs étaient déjà les bonnes.
   2. LA LUEUR DU HAUT : banner-glow.png, l'image large et douce du vrai site.
      C'est elle qui tient la hauteur ; le texte remonte par-dessus.
   3. LE FONDU SOMBRE EN HAUT, qui éteint le quadrillage quand il monte vers
      le header (`#060D1E` opaque sur 160 px, puis transparent). */
/* La couleur de fond = EXACTEMENT celle de SoftSearch : #05050b, la couleur de
   `body` de leur feuille de style. Tout le bleu vient du dégradé posé par-dessus
   (`.tt-fond__gradient`), pas de la couleur elle-même — c'est pour ça qu'un
   bleu mis « en dur » ici ne donnera jamais leur rendu. */
.tt-hero {
  background: #05050b;
  padding-bottom: 0;
}
/* La lueur du haut n'est plus l'image de tiktrack.io (banner-glow.png) mais le
   DÉGRADÉ de SoftSearch — demande de Ghilès. Ce bloc-ci ne fait plus que
   réserver la hauteur (le rapport de l'ancienne image, 1440 × 680) ; la lueur
   elle-même est `.tt-fond__gradient`, qui couvre tout le hero. */
/* ⚠️ LA LUEUR EST CE QUI CREUSE LE HAUT DU HERO, et c'est pour ça qu'elle est
   plafonnée. Elle occupe la place dans le flux (elle n'est pas absolue), et
   `.tt-hero__texte` remonte dedans d'un nombre FIXE de pixels (-400 au-dessus
   de 1280 px). Sa hauteur, elle, suit la largeur de l'écran via son rapport :
   1 920 px de large donnaient 722 px de lueur pour une remontée qui restait à
   400 — soit près de 300 px de vide au-dessus du badge, de plus en plus grand
   à mesure que l'écran s'élargit. Sur un portable ça ne se voyait pas, sur un
   grand écran ça crevait les yeux.
   Le plafond n'entre en jeu qu'au-delà de ~1 310 px : en dessous, le rapport
   d'origine s'applique intact. */
.tt-hero__lueur {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 680;
  max-height: 600px;
  pointer-events: none;
}
/* ⚠️ SUPPRIMÉ (Ghilès, 1er août) : le fondu du haut était un rectangle opaque
   de 160 px posé par-dessus TOUT le hero. Il éteignait la grille d'un coup et
   faisait une bande sombre qui se raccordait mal au trait du header — « le bug
   de la grille au-dessus ». Le fondu est désormais porté par le masque de
   `.tt-fond__grille` elle-même. Ne pas le remettre. */
/* Raccord avec le noir de la page (#05050b) en bas du hero. */
.tt-hero__fondu-bas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 224px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 5, 11, 0), #05050b);
}
.tt-hero__texte {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -200px;
}
@media (min-width: 1280px) {
  .tt-hero__texte {
    margin-top: -400px;
  }
}
@media (max-width: 640px) {
  /* Sous 640 px le vrai site n'affiche pas l'image : la lueur du fond suffit. */
  .tt-hero__lueur {
    display: none;
  }
  .tt-hero__texte {
    margin-top: 108px;
  }
  .tt-hero__saut {
    display: none;
  }
}

/* Le badge de preuve sociale, AU-DESSUS du titre (et non plus en bas).
   Habillage repris de SoftSearch : fond un peu plus clair, liseré plus net,
   ombre portée + reflet intérieur, et le petit trait qui sépare les visages
   des étoiles. */
.tt-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 5px 16px 5px 5px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tt-hero__etoiles::before {
  content: '';
  width: 1px;
  height: 15px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.16);
}
.tt-hero__visages {
  display: flex;
}
.tt-hero__visage {
  width: 24px;
  height: 24px;
  margin-right: -10px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #0b1f44;
}
.tt-hero__visage:last-child {
  margin-right: 0;
}
.tt-hero__visage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-hero__etoiles {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}
.tt-hero__etoile {
  width: 12px;
  height: 12px;
}
.tt-hero__badge p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .tt-hero__etoiles {
    display: none;
  }
}

.tt-hero__titre {
  max-width: 820px;
  margin: 24px auto 0;
  font-weight: 700;
  font-size: 66px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
}
@media (max-width: 1280px) {
  .tt-hero__titre {
    font-size: 48px;
  }
}
@media (max-width: 640px) {
  .tt-hero__titre {
    font-size: 34px;
  }
}
.tt-hero__sous-titre {
  max-width: 580px;
  margin: 20px auto 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.55);
}

/* --- La lueur qui ORBITE autour du bouton --------------------------------
   Demande de Ghilès : « une lueur qui tourne autour du bouton, PAS COLLÉE au
   bouton ». SoftSearch n'a que le liseré qui tourne (le conic-gradient du
   `.shimmer-btn-wrap`, collé au bord). On garde ce liseré ET on ajoute, en
   dessous, la MÊME lueur en plus large et floutée : elle déborde de 8 px et
   tourne au même rythme, donc on voit la lumière passer AUTOUR du bouton.

   ⚠️ `--shimmer-angle` est déclarée en `inherits: false` : un pseudo-élément
   n'hérite donc PAS de l'angle animé du parent. C'est pour ça que le ::before
   porte sa propre animation — sans elle il resterait figé à 0°. */
/* La vitesse de la lueur qui tourne. SoftSearch la fait tourner en 3,6 s :
   Ghilès trouve ça trop rapide. Un tour = la valeur ci-dessous, c'est le seul
   chiffre à changer. */
.shimmer-btn-wrap {
  animation-duration: 6.5s !important;
}

/* Le bouton blanc PLAT du header : aucune lueur, aucune animation. */
.tt-btn-blanc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Il ne doit JAMAIS passer sur deux lignes : entre 768 et 1023 px il le
     faisait, et le bouton devenait plus haut (61 px) que la barre du haut elle-
     même (66 px), en débordant en haut et en bas. */
  white-space: nowrap;
  border-radius: 13px;
  background: #fff;
  padding: 11px 21px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #06060f;
  transition:
    background 0.22s ease,
    transform 0.2s ease;
}
.tt-btn-blanc:hover {
  background: #f4f4f4;
  transform: translateY(-1px);
}
/* --- TABLETTE (768 → 1023 px) : la barre du haut est trop juste ----------
   Logo 119 + menu 364 + boutons 233 = 716 px dans une rangée de 736. En
   empêchant le bouton de passer à la ligne il lui faut 50 px de plus, donc ça
   ne rentre plus. On récupère la place sur les respirations du menu, qui en ont
   à revendre, plutôt qu'en rétrécissant le bouton d'action. */
@media (min-width: 768px) and (max-width: 1023px) {
  header nav > a {
    padding-left: 8px;
    padding-right: 8px;
  }
  .tt-btn-blanc,
  .tt-btn-fantome {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13px;
  }
}
.tt-btn-blanc:active {
  background: #e8e8e8;
  transform: translateY(0);
}

/* ⚠️ `.tt-btn-halo` n'est plus posé sur aucun bouton : le halo flou ajouté
   autour ne donnait pas l'effet de SoftSearch (« pas du tout pareil »). Seul
   le liseré qui tourne de `.shimmer-btn-wrap` est utilisé, tel quel. */
.tt-btn-halo {
  position: relative;
  isolation: isolate;
}
.tt-btn-halo::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 22px;
  background: conic-gradient(
    from var(--shimmer-angle),
    transparent 0%,
    transparent 34%,
    rgba(120, 180, 255, 0.3) 42%,
    rgba(210, 232, 255, 0.85) 50%,
    rgba(120, 180, 255, 0.3) 58%,
    transparent 66%,
    transparent 100%
  );
  filter: blur(10px);
  animation: shimmer-spin 3.6s linear infinite;
  pointer-events: none;
}
.tt-btn-halo--petit::before {
  inset: -6px;
  border-radius: 18px;
  filter: blur(7px);
}
/* Le bouton blanc du header : même bouton que le hero, en plus petit. */
.tt-btn-entete {
  padding: 10px 20px;
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .tt-btn-halo::before {
    animation: none;
  }
}

/* Les deux boutons du hero — et ceux du header, en plus petit. */
.tt-btn-bleu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #0075ff 0%, #3390ff 100%);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 117, 255, 0.3);
  transition: all 0.3s ease;
}
.tt-btn-bleu:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 28px rgba(0, 117, 255, 0.42);
}
.tt-btn-bleu--grand {
  background: #0075ff;
  padding: 12px 24px;
  font-size: 14px;
}
.tt-btn-fantome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.3s ease;
}
.tt-btn-fantome:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.tt-btn-fantome--grand {
  border-width: 1.5px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.tt-btn-fantome--grand:hover {
  transform: translateY(-2px);
}
.tt-btn__chrome {
  width: 16px;
  height: 16px;
}
.tt-hero__boutons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 640px) {
  .tt-hero__boutons {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  /* ⚠️ Les deux boutons doivent faire EXACTEMENT la même taille une fois
     empilés. La règle ne visait que `.tt-btn-bleu--grand` et
     `.tt-btn-fantome--grand` : or le premier bouton est passé au bouton à
     liseré tournant du hero (`.shimmer-btn-wrap`) et a perdu cette classe.
     Seul le second était donc élargi — 300 × 48 contre 247 × 54.
     On cible maintenant TOUS les enfants directs de la rangée, comme ça un
     changement de bouton ne pourra plus refaire décrocher l'autre. */
  .tt-hero__boutons > * {
    width: 100%;
    max-width: 300px;
    min-height: 54px;
  }
  /* Le bouton fantôme est un simple lien : sans ces trois lignes, il ne
     remplirait pas la hauteur imposée et son texte ne serait pas centré. */
  .tt-hero__boutons > .tt-btn-fantome {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }
  /* Le liseré tournant enveloppe son propre intérieur : il faut que les deux
     s'étirent, sinon le bouton reste large et son fond reste étroit. */
  .tt-hero__boutons > .shimmer-btn-wrap {
    display: flex;
  }
  /* Une fois empilés, « Extension gratuite » passe AU-DESSUS de « Commencer
     gratuitement » (demande de Ghilès). On inverse par `order` et non dans le
     HTML : l'ordre du document reste celui du bureau, où les deux boutons sont
     côte à côte et où l'action principale doit rester à gauche. */
  .tt-hero__boutons > .tt-btn-fantome {
    order: 1;
  }
  .tt-hero__boutons > .shimmer-btn-wrap {
    order: 2;
  }
  .tt-hero__boutons .shimmer-btn-inner {
    width: 100%;
    justify-content: center;
  }
}

/* Les trois pastilles, SOUS les boutons. */
.tt-hero__pastilles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
/* Style SoftSearch : plus de grosse pastille ronde autour de l'icône — juste
   l'icône bleue posée dans une gélule sombre à liseré net, avec le reflet en
   haut. C'est plus fin et ça va avec le badge. */
/* Les trois arguments sous la headline.
   Ils étaient trois capsules vitrées identiques — bordure, fond translucide,
   reflet intérieur, icône bleue dans un rond, et un soulèvement au survol. Trois
   pastilles parfaitement symétriques sous un titre, c'est la signature visuelle
   d'une page pondue par un générateur ; ça sent le gabarit, pas le produit.
   On enlève tout le décor : plus de capsule, plus de reflet, plus de survol.
   Reste une ligne de texte discrète, séparée par de fins traits — la mention
   passe au second plan, ce qui est sa place : le titre doit rester seul à
   capter le regard. */
.tt-pastille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
/* ⚠️ 12/08/2026 — LE TRAIT VERTICAL DANS LES GÉLULES DU HERO.
   Ce séparateur appartient à la version « ligne de texte discrète » décrite
   juste au-dessus : sans gélule, un fin trait entre deux mentions. Mais une
   SECONDE règle `.tt-pastille` existe plus bas dans ce fichier (écrite pour la
   section « 3 étapes ») et, à spécificité égale, c'est la dernière qui gagne :
   elle redonne padding, fond et liseré. Les pastilles du hero se retrouvaient
   donc en gélules AVEC ce trait coincé à l'intérieur, contre le bord gauche.
   C'est le « bug des icônes » signalé sur la page en ligne.

   On garde l'apparence en gélule (c'est celle qui est en production et qui a
   été validée), et on éteint le séparateur, qui n'a de sens que dans l'autre
   version. Pour revenir à la ligne discrète : remettre `content: ""` ici ET
   restreindre la règle du bas à `.tt-etapes__entete .tt-pastille`. */
.tt-pastille + .tt-pastille::before {
  content: none;
}
.tt-pastille__rond {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-pastille__rond svg {
  width: 13px;
  height: 13px;
  /* L'icône accompagne le texte, elle ne l'annonce pas : même gris, pas de bleu
     de marque qui ferait trois points d'attention de plus. */
  color: rgba(255, 255, 255, 0.42);
}
.tt-pastille > span:last-child {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .tt-hero__pastilles {
    gap: 6px;
    margin-top: 24px;
  }
  .tt-pastille {
    /* ⚠️ était `padding: 0` — hérité de la version sans gélule. Comme la règle
       du bas redonne un fond et un liseré, le texte se retrouvait collé aux
       bords de la gélule sur téléphone. On garde un rembourrage, réduit. */
    padding: 6px 12px;
    gap: 5px;
  }
  /* Le séparateur est éteint plus haut (`content: none`) : ce bloc n'a donc
     plus d'effet. Il reste ici pour le jour où la ligne discrète reviendrait. */
  .tt-pastille + .tt-pastille::before {
    margin-right: 10px;
    height: 10px;
  }
  .tt-pastille__rond svg {
    width: 11px;
    height: 11px;
  }
  .tt-pastille > span:last-child {
    font-size: 11px;
  }
}

/* --- La bascule Mensuel / Annuel ----------------------------------------
   La pastille GLISSE d'une option à l'autre. */
.tt-bascule-rangee {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
}
.tt-bascule {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.tt-bascule__pastille {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 999px;
  background: var(--tt-bleu);
  box-shadow: 0 8px 22px -8px rgba(0, 117, 255, 0.85);
  transition:
    transform 0.42s var(--tt-souple),
    width 0.42s var(--tt-souple);
}
.tt-bascule button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}
.tt-bascule button:hover {
  color: rgba(255, 255, 255, 0.75);
}
.tt-bascule button[aria-selected='true'] {
  color: #fff;
}
.tt-bascule em {
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.tt-bascule button[aria-selected='false'] em {
  background: rgba(61, 220, 151, 0.14);
  color: var(--tt-vert);
}

/* « Economise 30 % », posé DANS la gélule, à droite des deux options — comme
   sur tiktrack.io. Ce n'est pas un bouton : il ne se clique pas. */
.tt-bascule__eco {
  padding: 0 16px 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tt-bleu);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .tt-bascule__eco {
    padding: 0 12px 0 8px;
    font-size: 11.5px;
  }
}

/* L'entête des tarifs, reprise de tiktrack.io. */
.tt-tarifs__entete {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
}
.tt-tarifs__entete h2 {
  margin-top: 24px;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.tt-tarifs__entete p {
  margin-top: 20px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Les surtitres (les « bulles » au-dessus des titres) -----------------
   Règle de Ghilès : sur panneau CLAIR, la bulle blanche à texte sombre ;
   sur panneau SOMBRE, la bulle blanche à texte BLEU, pour qu'elle ressorte. */
/* ⚠️ Sélecteur DOUBLE (`.tt-pastille.tt-pastille--x`) : la règle générale
   `.tt-pastille` est écrite plus bas dans le fichier et, à poids égal, c'est
   la dernière qui gagne — le modificateur était donc ignoré. */
.tt-pastille.tt-pastille--claire {
  color: #0a0f1e;
  background: #fff;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 24px -14px rgba(0, 0, 0, 0.35);
}
.tt-pastille.tt-pastille--sombre {
  color: var(--tt-bleu);
  background: #fff;
  border-color: transparent;
  box-shadow:
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.tt-pastille.tt-pastille--sombre:hover {
  background: #fff;
  transform: translateY(-1px);
}
.tt-probleme__entete {
  max-width: 820px;
  margin: 0 auto 64px;
  text-align: center;
}
.tt-probleme__entete h2 {
  margin-top: 26px;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0a0f1e;
}
.tt-probleme__entete mark {
  padding: 0 12px;
  border-radius: 10px;
  background: var(--tt-bleu);
  color: #fff;
}
.tt-probleme__entete p {
  margin-top: 22px;
  font-size: 16px;
  color: #59617a;
}
@media (min-width: 800px) {
  .tt-probleme__grille {
    grid-template-columns: 1fr 1fr;
  }
}
.tt-probleme {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 34px 32px;
  background: #f8f9fc;
  transition: background 0.3s ease;
}
.tt-probleme:hover {
  background: #fff;
}
.tt-probleme__icone {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}
.tt-probleme h3 {
  font-size: 19px;
  font-weight: 700;
  color: #0a0f1e;
}
.tt-probleme p {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #59617a;
}

/* --- Les encarts repris de tiktrack.io ---------------------------------- */
/* --- LE RYTHME DE LA PAGE : les sections regroupées par ton ---------------
   Consigne de Ghilès (2 août) : ce qui est sur fond BLANC chez tiktrack.io
   reste dans un bloc blanc, à la suite ; ce qui est sur fond sombre va dans un
   bloc sombre. Moins de bascules, quitte à avoir moins de blocs.

   Avant : 8 bascules clair/sombre. Maintenant 4 blocs :
     1. le hero                                                    (sombre)
     2. Le Problème · Niches qui rapportent · Niches faceless ·
        Analyse des données en temps réel                          (CLAIR)
     3. 3 étapes · Tarifs                                          (sombre)
     4. FAQ · Avis clients · bloc final                            (CLAIR)
     5. le pied de page                                            (sombre)

   Le bloc clair du haut tient TOUTES les sections à visuels (2 août) : leurs
   images sont dessinées pour du blanc. Le « mot du fondateur » a été retiré.

   Aucune section n'est déplacée dans le fichier : le conteneur est une colonne
   flexible et chaque section porte un `order`. Pour changer l'ordre, il suffit
   de changer un chiffre ici. */
.tt-page {
  display: flex;
  flex-direction: column;
}
.tt-page > header {
  order: 0;
}
.tt-page > .tt-hero {
  order: 1;
}
#how-it-works {
  order: 10;
}
#spy {
  order: 11;
}
#track {
  order: 12;
}
#data {
  order: 13;
}
#etapes {
  order: 20;
}
#pricing {
  order: 21;
}
#faq {
  order: 30;
}
#testimonials {
  order: 31;
}
/* Le bloc final ferme la page, juste avant le pied de page — comme sur
   tiktrack.io. Il forme avec lui le dernier bloc sombre : le nombre de
   bascules ne bouge pas, mais la page se termine sur l'appel à l'action. */
#cta-final {
  order: 35;
}
.tt-page > footer {
  order: 40;
}

/* ⚠️ PLEINE LARGEUR (demande de Ghilès, 2 août). Les blocs clairs étaient des
   panneaux flottants : 16 à 24 px de marge de chaque côté et des coins arrondis
   en haut et en bas. Il restait donc une bande sombre le long des deux bords de
   la page. Ils vont maintenant d'un bord à l'autre, sans arrondi.
   Le regroupement par ton ne change pas : c'est toujours UN SEUL bloc clair du
   haut (#how-it-works → #data) et UN SEUL bloc clair du bas (#faq → footer). */
/* ⚠️ SEULE LA LARGEUR CHANGE. Les arrondis en haut du premier bloc et en bas du
   dernier sont CONSERVÉS (Ghilès : « ne retire pas les arrondis ni les ombres,
   élargis juste ») : ils se découpent maintenant sur le fond sombre en haut et
   en bas au lieu de flotter au milieu de la page. */
#how-it-works,
#spy,
#track,
#data,
#faq,
#testimonials {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}
#how-it-works,
#faq {
  border-radius: 2rem 2rem 0 0;
}
#data {
  border-radius: 0 0 2rem 2rem;
}
/* ⚠️ LES TRAITS ENTRE LES SECTIONS. Ce n'étaient pas des bordures — j'ai
   cherché longtemps : aucun élément n'en portait. C'est une COUTURE
   SOUS-PIXEL. Les sections claires ont des hauteurs fractionnaires ; sur un
   écran à 2× (et en zoom), il reste un demi-pixel entre deux sections
   voisines, et c'est le fond SOMBRE de la page (#05050b) qui transparaît par
   cette fente. D'où un filet gris parfaitement net, qui apparaît et disparaît
   selon le zoom.
   Le remède : chaque section claire mord d'1 px sur la suivante. La fente ne
   peut plus exister. À garder sur toute section claire suivie d'une autre. */
#how-it-works,
#spy,
#track,
#faq,
#testimonials,
#cta-final {
  margin-bottom: -1px;
}
/* Le bloc clair du bas ne s'arrête plus aux avis : il CONTINUE derrière le
   bloc d'appel à l'action et derrière le pied de page, jusqu'en bas de page.
   L'appel à l'action reste, lui, un panneau sombre posé dessus. */
#cta-final,
.tt-page > footer {
  margin-left: 0;
  margin-right: 0;
  background: #f8f9fc;
}
.tt-page > footer {
  border-radius: 0 0 2rem 2rem;
}

/* --- LE BLOC FINAL : le hero, en plus petit ------------------------------
   Demande de Ghilès : « c'est le même bloc que le hero, la même animation,
   avec un autre copy ». Le fond animé est donc REPRIS TEL QUEL (dégradé,
   lueur, bulles, quadrillage, courbe) dans un grand panneau arrondi.
   ⚠️ L'identifiant du dégradé de la courbe est suffixé (`ttCourbe-final`) :
   deux SVG avec le même id, et la seconde courbe disparaît. */
/* Le bloc remonte vers les avis (demande de Ghilès, 2 août) : 160 px de vide
   entre les deux (104 sous les avis + 56 ici), ça faisait décrocher la fin de
   page. On enlève la moitié des deux côtés — voir aussi `.tt-avis`
   padding-bottom plus bas. */
.tt-final {
  padding: 14px 20px 14px;
}
@media (min-width: 640px) {
  .tt-final {
    /* Le padding du BAS est ce qui sépare le panneau du pied de page : il doit
       rester visible (Ghilès : « un petit espace entre le footer et ce
       bloc-là »), mais léger. Celui du haut est réduit au minimum pour que le
       bloc remonte vers les avis. */
    padding: 16px 28px 20px;
  }
}
.tt-final__panneau {
  position: relative;
  overflow: hidden;
  max-width: 1240px;
  margin: 0 auto;
  padding: 104px 24px 112px;
  border-radius: 2rem;
  background: #05050b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Le fond du hero est calibré pour une pleine page : dans un panneau de 500 px
   de haut, la lueur et les bulles seraient énormes. Mêmes proportions que la
   variante « CTA » de tiktrack.io. */
.tt-fond--final .tt-fond__conique {
  width: 900px;
  height: 900px;
  top: -52%;
  opacity: 0.5;
}
.tt-fond--final .tt-fond__bulle--une {
  width: 360px;
  height: 360px;
  top: -4%;
}
.tt-fond--final .tt-fond__bulle--deux {
  width: 340px;
  height: 340px;
  top: 6%;
}
.tt-final__contenu {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tt-final__titre {
  margin: 26px 0 0;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: #fff;
}
.tt-final__titre span {
  color: #c3d8f8;
}
.tt-final__sous-titre {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
}
.tt-final__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.tt-final__mention {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.tt-final__mention svg {
  width: 15px;
  height: 15px;
}

/* --- LE PIED DE PAGE, celui de tiktrack.io -------------------------------
   Il est CLAIR : sur tiktrack.io le pied de page est sur fond blanc, et ici le
   bloc clair du bas descend jusqu'en bas de page. Tous les gris sont donc des
   gris sombres sur blanc, pas des blancs transparents. */
.tt-pied {
  padding: 56px 24px 40px;
}
.tt-pied__cadre {
  max-width: 1240px;
  margin: 0 auto;
}
.tt-pied__marque {
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tt-pied__identite {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tt-pied__logo {
  height: 30px;
  width: auto;
}
.tt-pied__copyright {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: #5b6478;
}
.tt-pied__copyright::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: #dddddd;
}
.tt-pied__phrase {
  margin: 12px 0 0;
  font-size: 14px;
  color: #5b6478;
}
.tt-pied__milieu {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  padding: 36px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tt-pied__reseaux {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tt-pied__reseaux a {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(20, 30, 60, 0.1),
    0 0 0 1px rgba(20, 30, 60, 0.06);
  color: var(--tt-bleu);
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.tt-pied__reseaux a:hover {
  box-shadow:
    0 8px 20px -8px rgba(0, 117, 255, 0.6),
    0 0 0 1px rgba(0, 117, 255, 0.35);
  transform: translateY(-2px);
}
.tt-pied__reseaux svg {
  width: 16px;
  height: 16px;
}
.tt-pied__colonnes {
  display: flex;
  gap: 72px;
}
.tt-pied__colonne h3 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: #0a0f1e;
}
.tt-pied__colonne ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tt-pied__colonne a {
  font-size: 14px;
  color: rgba(37, 45, 62, 0.7);
  transition: color 0.25s ease;
}
.tt-pied__colonne a:hover,
.tt-pied__legal a:hover {
  color: var(--tt-bleu);
}
.tt-pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
}
.tt-pied__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ⚠️ PLUS DE SÉPARATEUR EN `::before`. Il était posé sur chaque élément sauf le
   premier — donc au RETOUR À LA LIGNE, la barre se retrouvait en tête de la
   ligne suivante, devant « Conditions générales d'utilisation », sans rien à
   séparer. Aucune règle CSS ne sait dire « sauf en début de ligne ».
   L'espacement seul sépare aussi bien, et ne peut pas se retrouver orphelin. */
.tt-pied__legal {
  column-gap: 22px;
  row-gap: 8px;
}
.tt-pied__legal a {
  font-size: 12.5px;
  color: rgba(37, 45, 62, 0.5);
  transition: color 0.25s ease;
}
.tt-pied__signature {
  margin: 0;
  font-size: 12.5px;
  color: rgba(37, 45, 62, 0.6);
}
.tt-pied__signature span {
  color: var(--tt-bleu);
}
@media (max-width: 640px) {
  .tt-pied__colonnes {
    gap: 48px;
  }
  .tt-pied__milieu {
    flex-direction: column;
    gap: 32px;
  }
}

.tt-encart {
  position: relative;
  padding: 104px 24px;
  overflow: hidden;
}
/* De quel côté tombe le visuel de chaque encart : voir plus bas, la règle
   `#spy / #track / #data`. On ne se sert PLUS de `:nth-of-type(even)` : cette
   parité comptait toutes les `<section>` de la page, pas seulement les trois
   encarts, donc réordonner ou ajouter une section ailleurs retournait des
   colonnes sans qu'on comprenne pourquoi. */
.tt-encart--sombre {
  background: #05050b;
}
.tt-encart--clair {
  background: #f8f9fc;
  margin: 0 16px;
  border-radius: 2rem;
}
.tt-encart__contenu {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .tt-encart__contenu {
    flex-direction: row;
    gap: 72px;
  }
  /* LE CÔTÉ DU VISUEL, ENCART PAR ENCART.
     `row` = texte à gauche, visuel à droite. `row-reverse` = l'inverse.
     C'est le seul endroit à toucher pour changer un côté. */
  #spy .tt-encart__contenu   { flex-direction: row-reverse; }  /* radar à GAUCHE */
  #track .tt-encart__contenu { flex-direction: row; }          /* faceless à DROITE */
  #data .tt-encart__contenu  { flex-direction: row-reverse; }  /* temps réel à GAUCHE */
  .tt-encart__texte,
  .tt-encart__visuel {
    flex: 1 1 0;
    min-width: 0;
  }
}
.tt-encart__titre {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #0a0f1e;
}
.tt-encart--sombre .tt-encart__titre {
  color: #fff;
}
.tt-encart__icone {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.tt-encart__chapeau {
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #4c5468;
}
.tt-encart--sombre .tt-encart__chapeau {
  color: rgba(255, 255, 255, 0.55);
}
.tt-encart__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}
.tt-encart__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #3d4457;
}
.tt-encart--sombre .tt-encart__points li {
  color: rgba(255, 255, 255, 0.75);
}
.tt-puce {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(0, 117, 255, 0.12);
  color: var(--tt-bleu);
}
.tt-encart__visuel img {
  display: block;
  width: 100%;
  height: auto;
}
/* Les visuels dessinés sur fond blanc gardent leur fond blanc, même dans une
   section sombre — sinon ils se découpent salement. */
.tt-encart__visuel--clair {
  padding: 26px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6);
}
/* Dans une section claire, l'ombre noire de ce cadre n'a plus de sens : on la
   remplace par une ombre douce et un liseré, sinon le visuel se fond dans le
   panneau et perd ses contours. */
.tt-encart--clair .tt-encart__visuel--clair {
  box-shadow:
    0 22px 50px -30px rgba(10, 15, 30, 0.28),
    0 0 0 1px rgba(10, 15, 30, 0.06);
}
.tt-encart__etiquette {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-bleu);
  background: rgba(0, 117, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 117, 255, 0.2);
}

.tt-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 15px 26px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: var(--tt-bleu);
  box-shadow: 0 16px 34px -14px rgba(0, 117, 255, 0.9);
  transition:
    transform 0.3s var(--tt-souple),
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.tt-bouton:hover {
  transform: translateY(-2px);
  background: #1a83ff;
  box-shadow: 0 20px 40px -14px rgba(0, 117, 255, 1);
}

/* --- « Comment ça marche ? » — les trois étapes -------------------------- */
/* --- Les avis clients, sous la FAQ --------------------------------------
   Reprise de la section « Témoignages » de tiktrack.io : cinq étoiles, la
   citation, puis l'auteur. Panneau clair — elle appartient au bloc blanc du
   bas, avec la FAQ et le bloc final. */
.tt-avis {
  background: #f8f9fc;
  padding: 104px 24px;
}
.tt-avis__entete {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}
.tt-avis__etiquette {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-bleu);
}
.tt-avis__entete h2 {
  margin-top: 20px;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0a0f1e;
}
.tt-avis__grille {
  display: grid;
  gap: 16px;
  max-width: 1150px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .tt-avis__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .tt-avis__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tt-avis__carte {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(10, 15, 30, 0.06),
    0 10px 30px -18px rgba(10, 15, 30, 0.12);
  transition:
    transform 0.3s var(--tt-souple),
    box-shadow 0.3s var(--tt-souple);
}
.tt-avis__carte:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(10, 15, 30, 0.08),
    0 22px 50px -20px rgba(10, 15, 30, 0.2);
}
.tt-avis__etoiles {
  display: flex;
  gap: 2px;
  color: #f5b301;
}
.tt-avis__carte blockquote {
  flex: 1;
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #3d4457;
}
.tt-avis__carte figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(10, 15, 30, 0.06);
}
.tt-avis__carte figcaption img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}
.tt-avis__auteur {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tt-avis__nom {
  font-size: 13.5px;
  font-weight: 700;
  color: #0a0f1e;
}
.tt-avis__pseudo {
  font-size: 12.5px;
  color: #8a91a3;
}

.tt-etapes {
  background: #05050b;
  padding: 112px 24px;
}
.tt-etapes__entete {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}
.tt-pastille {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.tt-pastille img {
  width: 17px;
  height: 17px;
}
.tt-etapes__entete h2 {
  margin-top: 26px;
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.tt-etapes__entete mark {
  padding: 0 12px;
  border-radius: 10px;
  background: var(--tt-bleu);
  color: #fff;
}
.tt-etapes__grille {
  display: grid;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .tt-etapes__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Le fond de la carte est celui de tiktrack.io (#1A202E, liseré #393E4C) :
   les trois visuels sont des SVG transparents dessinés POUR ce fond. Avec un
   fond plus sombre, on voyait le rectangle du visuel se détacher. */
.tt-etape {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #1a202e;
  box-shadow: inset 0 0 0 1px #393e4c;
  transition:
    transform 0.35s var(--tt-souple),
    box-shadow 0.35s ease;
}
/* Même règle que pour les carrés du Problème : au survol, la carte ne se
   DÉPLACE pas. Elle se déplaçait de 6 px, donc elle s'échappait sous le
   curseur près de ses bords — le même effet de tremblement qui a été retiré
   ailleurs. Seule la couleur change. */
.tt-etape:hover {
  transform: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 117, 255, 0.45),
    0 40px 80px -40px rgba(0, 117, 255, 0.6);
}
/* ⚠️ Le visuel ne doit JAMAIS être rogné : `object-fit: cover` coupait les
   pastilles du premier visuel et le haut du graphique du troisième. */
.tt-etape__visuel {
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-etape__visuel img {
  width: 100%;
  height: auto;
  max-width: 302px;
  object-fit: contain;
}
.tt-etape h3 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.tt-etape p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
}
.tt-etape__numero {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.22);
}

/* --- Les trois plans ----------------------------------------------------
   SoftSearch n'avait qu'une carte au milieu. Nous en avons trois : Découverte,
   Lite (mise en avant, surélevée, cerclée de bleu) et Pro. */
.tt-plans {
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  /* ⚠️ `stretch` alignait les trois cartes sur la plus haute. Au passage en
     annuel, Lite et Pro gagnent deux lignes (le prix barré et « Soit …€/mois »)
     et Découverte, qui n'a rien de plus à montrer, s'étirait avec elles pour
     rien : sa carte grandissait en laissant du vide en bas. Chaque carte garde
     désormais sa propre hauteur — Découverte ne bouge plus du tout. */
  align-items: start;
}
@media (min-width: 1024px) {
  .tt-plans {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.tt-plan {
  position: relative;
  display: flex;
  border-radius: 26px;
  padding: 1.5px;
  background: rgba(255, 255, 255, 0.07);
  transition: transform 0.3s var(--tt-souple);
}
.tt-plan:not(.tt-plan--avant):hover {
  transform: translateY(-4px);
}
.tt-plan--avant {
  background: linear-gradient(160deg, #3390ff 0%, var(--tt-bleu) 45%, #123a8f 100%);
  box-shadow: 0 40px 90px -30px rgba(0, 117, 255, 0.5);
}
@media (min-width: 1024px) {
  .tt-plan--avant {
    margin: -16px 0;
  }
}

/* Le corps de carte n'est plus un aplat : une lueur bleue tombe du coin haut
   gauche, comme sur la carte de SoftSearch. C'est ce qui fait la différence
   entre « une boîte sombre » et une carte qui a de la matière. */
.tt-plan__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px;
  border-radius: 24.5px;
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(0, 117, 255, 0.11) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 40%),
    #0b1223;
}
.tt-plan--avant .tt-plan__corps {
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(0, 117, 255, 0.26) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    #0a1430;
}
.tt-plan:hover {
  transform: translateY(-4px);
}
.tt-plan--avant:hover {
  transform: translateY(-4px);
}
@media (min-width: 1024px) {
  .tt-plan--avant .tt-plan__corps {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Le nom du plan et son badge partagent une même ligne : c'est ce qui garantit
   que « LE PLUS POPULAIRE » reste sur l'axe de « LITE ». En absolu (l'ancienne
   version), le badge était calé sur le haut de la CARTE, pas sur le nom — et la
   carte mise en avant ayant 8 px de padding en plus, il retombait trop haut.
   Le `min-height` donne aux trois cartes la même hauteur d'entête, pour que les
   prix restent alignés entre eux. */
.tt-plan__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 26px;
}

/* Pastille ambrée avec sa petite bille, plutôt que l'étiquette bleue qui
   débordait au-dessus de la carte. */
.tt-plan__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(245, 179, 1, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 179, 1, 0.3);
  color: #f5b301;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
}
.tt-plan__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #f5b301;
  box-shadow: 0 0 8px rgba(245, 179, 1, 0.9);
}

.tt-plan__nom {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}
.tt-plan--avant .tt-plan__nom {
  color: #6fb0ff;
}

.tt-plan__tarif {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.tt-plan__prix {
  font-size: 58px;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #fff;
}
.tt-plan__ancre {
  font-size: 15px;
}
.tt-plan__colonne {
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
}
.tt-plan__ancre {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: line-through;
}
.tt-plan__periode {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.tt-plan__parmois {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tt-vert);
}
.tt-vide {
  display: none;
}

.tt-plan__promesse {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}
.tt-plan--avant .tt-plan__promesse {
  color: rgba(255, 255, 255, 0.75);
}

.tt-plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding: 15px 16px;
  border-radius: 14px;
  /* `nowrap` : avec la flèche ajoutée, « Commencer gratuitement » passait sur
     deux lignes et le bouton devenait deux fois plus haut que les autres. */
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition:
    transform 0.3s var(--tt-souple),
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.tt-plan__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s var(--tt-souple);
}
.tt-plan__cta:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}
.tt-plan__cta:hover svg {
  transform: translate(2px, -2px);
}
/* Le bouton du plan mis en avant : le bleu de SoftSearch, avec sa lueur. */
.tt-plan--avant .tt-plan__cta {
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.16) 0%, transparent 55%), var(--tt-bleu);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 34px -8px rgba(0, 117, 255, 0.85);
}
.tt-plan--avant .tt-plan__cta:hover {
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.2) 0%, transparent 55%), #1a83ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 44px -8px rgba(0, 117, 255, 0.95);
}

.tt-plan__mention {
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.35);
}

/* « Inclus dans le plan X : » — l'intitulé de tiktrack.io au-dessus de la
   liste. C'est lui qui porte maintenant le filet de séparation. */
.tt-plan__inclus {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.tt-plan--avant .tt-plan__inclus {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.tt-plan__liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.tt-plan--avant .tt-plan__liste {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.tt-plan__ligne {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}
.tt-plan--avant .tt-plan__ligne {
  color: rgba(255, 255, 255, 0.9);
}
/* Les coches sont bleues sur TOUTES les cartes (SoftSearch) : en gris elles
   disparaissaient et la liste retombait à plat. */
.tt-coche {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(0, 117, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 117, 255, 0.42);
  color: #7ec0ff;
}
.tt-coche--avant {
  background: var(--tt-bleu);
  box-shadow: none;
  color: #fff;
}
/* Ce que le plan N'A PAS : barré, avec une croix. C'est cette ligne-là qui
   fait monter en gamme — une carte qui n'affiche que des « ✓ » ne compare rien. */
.tt-croix {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.4);
}
.tt-plan__ligne--non {
  color: rgba(255, 255, 255, 0.32);
}
.tt-plan__ligne--non > span {
  text-decoration: line-through;
}
.tt-plan--avant .tt-plan__ligne--non {
  color: rgba(255, 255, 255, 0.5);
}
.tt-plan--avant .tt-croix {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}
.tt-bientot {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(139, 92, 246, 0.15);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.2);
  color: rgba(167, 139, 250, 0.9);
}

/* --- La FAQ ------------------------------------------------------------- */
.tt-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tt-faq__item {
  border-radius: 18px;
  background: #f6f7fb;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.tt-faq__item--ouvert {
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(0, 117, 255, 0.2),
    0 14px 40px -20px rgba(0, 117, 255, 0.25);
}
.tt-faq__bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: #0a0f1e;
}
.tt-faq__signe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  color: #0a0f1e;
  transition: transform 0.3s var(--tt-souple), background 0.3s ease, color 0.3s ease;
}
.tt-faq__item--ouvert .tt-faq__signe {
  transform: rotate(45deg);
  background: var(--tt-bleu);
  color: #fff;
}
.tt-faq__reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--tt-souple);
}
.tt-faq__item--ouvert .tt-faq__reponse {
  grid-template-rows: 1fr;
}
.tt-faq__reponse > p {
  overflow: hidden;
  margin: 0;
  padding: 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #5b6478;
}
.tt-faq__item--ouvert .tt-faq__reponse > p {
  padding-bottom: 24px;
}

/* --- Respiration --------------------------------------------------------
   Les panneaux du modèle sont un peu serrés ; on les arrondit davantage et on
   leur donne de l'air, comme sur la landing TikTrack. */
section[style*="#f8f9fc"],
section.section-border-t {
  scroll-margin-top: 80px;
}
/* Le filet clair au-dessus des tarifs (hérité de SoftSearch : `section-border-t`)
   coupait le noir en deux juste avant « Nos offres ». Retiré à la demande de
   Ghilès — les sections sombres s'enchaînent maintenant sans couture. */
section.section-border-t {
  border-top: 0;
}
@media (min-width: 1024px) {
  section#pricing {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}

/* ===========================================================================
   PASSE « SURTITRES + RESPIRATION » (2026-08-02)
   Écrite en fin de fichier : ces règles doivent gagner sur celles d'origine.
   ======================================================================== */

/* --- LA bulle de section, la même partout --------------------------------
   Deux tons seulement, et c'est tout ce qu'il y a à retenir :
   sur panneau SOMBRE -> bulle bleue, texte et icône blancs ;
   sur panneau CLAIR  -> bulle blanche, texte et icône bleus.
   L'icône est un SVG en `currentColor`, donc elle suit la couleur du texte :
   plus aucun fichier d'icône à dupliquer par couleur. */
.tt-bulle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
  vertical-align: middle;
}
.tt-bulle svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.tt-bulle--sombre {
  background: linear-gradient(180deg, #2f8dff 0%, var(--tt-bleu) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 28px -12px rgba(0, 117, 255, 0.95);
}
.tt-bulle--clair {
  background: #fff;
  color: var(--tt-bleu);
  box-shadow:
    inset 0 -1.5px 0 rgba(16, 24, 40, 0.05),
    0 0 0 1px rgba(16, 24, 40, 0.07),
    0 10px 24px -14px rgba(16, 24, 40, 0.4);
}

/* --- Les encarts : la bulle au-dessus du titre, à gauche ----------------- */
.tt-encart__texte .tt-bulle {
  margin-bottom: 20px;
}
/* Le titre n'a plus d'icône : il redevient un bloc de texte normal, sinon le
   `display:flex` hérité coupe les retours à la ligne. */
.tt-encart__titre {
  display: block;
}

/* --- La FAQ -------------------------------------------------------------- */
.tt-faq__entete {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}
.tt-faq__entete h2 {
  margin-top: 22px;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0a0f1e;
}
.tt-faq__entete p {
  margin-top: 18px;
  font-size: 16px;
  color: #59617a;
}
.tt-faq__contact {
  margin: 34px 0 0;
  text-align: center;
  font-size: 14.5px;
  color: #59617a;
}
.tt-faq__contact a {
  font-weight: 700;
  color: var(--tt-bleu);
}
.tt-faq__contact a:hover {
  text-decoration: underline;
}

/* --- Le bloc final : plus bas, et le bouton BLANC du hero ---------------- */
.tt-final__panneau {
  padding: 76px 24px 72px;
}
/* Le liseré tournant porte déjà sa propre ombre ; on ajoute celle que Ghilès
   demande DERRIÈRE le bouton, plus large et plus douce. */
/* Le bouton du bloc final est BLEU, pas blanc (demande de Ghilès, 2 août) : le
   blanc y était le même que celui du header, et l'appel à l'action qui ferme la
   page doit être le bouton le plus fort de tout le document. Le liseré qui
   tourne est conservé — il tourne maintenant autour d'un bouton bleu. */
.tt-final__bouton {
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.25),
    0 22px 50px -18px rgba(0, 117, 255, 0.75);
}
.tt-final__bouton .shimmer-btn-inner {
  background: var(--tt-bleu) !important;
  color: #fff !important;
}
.tt-final__bouton:hover .shimmer-btn-inner {
  background: #1a83ff !important;
}
.tt-final__titre {
  margin-top: 22px;
  font-size: clamp(32px, 4.4vw, 54px);
}
.tt-final__sous-titre {
  margin-top: 18px;
}
.tt-final__action {
  margin-top: 30px;
}

/* --- La respiration entre les sections -----------------------------------
   Deux endroits où l'espace était trop grand : le bas des 3 étapes contre le
   haut des tarifs, et le bas de la FAQ contre le haut des témoignages. Les
   deux sections ajoutaient chacune leur propre marge. */
.tt-etapes {
  padding-bottom: 72px;
}
section#pricing {
  padding-top: 88px;
}
@media (min-width: 640px) {
  section#pricing {
    padding-top: 96px;
  }
}
#faq {
  padding-bottom: 64px;
}
.tt-avis {
  padding-top: 64px;
}

/* --- Le pied de page, plus ramassé --------------------------------------- */
.tt-pied {
  padding: 40px 24px 26px;
}
.tt-pied__marque {
  padding-bottom: 26px;
}
.tt-pied__milieu {
  padding: 26px 0;
}
.tt-pied__bas {
  padding-top: 20px;
}

/* --- Les avis clients, en « mur » (style demandé par Ghilès) -------------
   Une grille en colonnes plutôt qu'en lignes : chaque carte garde SA hauteur
   et les colonnes se décalent naturellement. Une grille classique alignait
   toutes les cartes sur la plus haute, ce qui laissait de grands vides. */
.tt-avis__grille {
  display: block;
  column-count: 1;
  column-gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .tt-avis__grille {
    column-count: 2;
  }
}
@media (min-width: 1080px) {
  .tt-avis__grille {
    column-count: 3;
  }
}
.tt-avis__carte {
  display: block;
  break-inside: avoid;
  margin: 0 0 18px;
}
@media (min-width: 760px) {
  .tt-probleme__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .tt-probleme__grille {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
/* --- Respiration des trois encarts ---------------------------------------
   Chaque encart posait 104 px de marge en haut ET en bas : entre deux blocs
   ça faisait plus de 200 px de vide, on avait l'impression que la page était
   coupée. On descend à ~60 px de chaque côté (~120 px entre deux blocs), et
   on resserre aussi le bas du bloc « Le Problème » qui les précède. */
.tt-encart {
  padding: 58px 24px;
}
@media (min-width: 1024px) {
  .tt-encart {
    padding: 66px 24px;
  }
}
/* Le `py-28` hérité de SoftSearch pose 112 px au-dessus de la pastille
   « Le Problème » : c'est la première chose qu'on voit après le hero, et
   l'attente était trop longue. Allégé sans supprimer la respiration. */
#how-it-works {
  padding-top: 78px;
  padding-bottom: 68px;
}
/* --- Le mur d'avis : fondu en bas + bouton qui déplie -------------------- */
.tt-avis__mur {
  position: relative;
  /* Avec six avis sur trois colonnes, le mur fait ~575 px : on le coupe à
     460 px pour que la deuxième rangée passe sous le fondu et que le bouton
     ait vraiment quelque chose à révéler. */
  max-height: 460px;
  /* ⚠️ `clip` ET PAS `hidden` (24/08). `overflow: hidden` coupe à l'écran mais
     laisse un CONTENEUR DE DÉFILEMENT : le mur peut donc être scrollé sans
     qu'on le demande — un `scrollIntoView`, une ancre, une tabulation qui
     donne le focus à une carte cachée, et il glisse. Le fondu et le bouton
     « Voir tous les avis » sont posés en `absolute` sur ce conteneur : ils
     défilaient avec, et se retrouvaient AU MILIEU du mur, cartes visibles en
     dessous. Mesuré : `scrollTop` à 346 px, bouton à 374 px du bas au lieu de
     28. `overflow: clip` ne crée aucun conteneur de défilement — le mur ne
     peut plus bouger du tout. (`hidden` reste écrit au-dessus pour les
     navigateurs qui ne connaîtraient pas `clip`.) */
  overflow: hidden;
  overflow: clip;
  transition: max-height 0.6s var(--tt-souple);
}
.tt-avis__mur--ouvert {
  max-height: 4000px;
}
.tt-avis__fondu {
  position: absolute;
  inset: auto 0 0;
  height: 260px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 249, 252, 0) 0%, rgba(248, 249, 252, 0.92) 62%, #f8f9fc 100%);
  transition: opacity 0.4s ease;
}
/* ⚠️ LE MÊME BOUTON BLEU QUE LES ENCARTS CLAIRS (`.tt-bouton`, demande de
   Ghilès du 24/08). Il était noir. Toutes les valeurs sont reprises de là :
   bleu plein, rayon 14, ombre bleue portée. On ne peut PAS simplement lui
   ajouter la classe `.tt-bouton` — il est en `position:absolute` avec un
   `translateX(-50%)` qui le centre, et le survol de `.tt-bouton` écraserait
   cette transformation. */
.tt-avis__plus {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 15px 26px;
  border-radius: 14px;
  background: var(--tt-bleu);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 34px -14px rgba(0, 117, 255, 0.9);
  transition:
    transform 0.3s var(--tt-souple),
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.tt-avis__plus:hover {
  transform: translateX(-50%) translateY(-2px);
  background: #1a83ff;
  box-shadow: 0 20px 40px -14px rgba(0, 117, 255, 1);
}
.tt-avis__mur--ouvert .tt-avis__fondu,
.tt-avis__mur--ouvert .tt-avis__plus {
  opacity: 0;
  pointer-events: none;
}

/* --- Le mur, version longue (2026-08-02) ---------------------------------
   Une trentaine d'avis derrière le bouton : on laisse voir un peu plus haut
   avant la coupe (deux rangées entières plutôt qu'une et demie), et on passe
   à quatre colonnes sur les grands écrans, sinon le mur déplié devient une
   colonne interminable. */
/* La coupe : 540 px ne montraient que 13 % du mur (4012 px de contenu), et le
   fondu de 260 px en recouvrait la moitié — il ne restait qu'une rangée
   lisible, ce qui donnait l'impression d'une section tronquée plutôt que d'un
   aperçu. On montre deux à trois rangées entières, le fondu est plus court, et
   il reste largement de quoi récompenser le clic. */
.tt-avis__mur {
  max-height: 800px;
}
.tt-avis__fondu {
  height: 210px;
}
/* Moins d'air sous les avis : c'est l'autre moitié du rapprochement du bloc
   final (voir `.tt-final`). */
.tt-avis {
  padding-bottom: 56px;
}
@media (min-width: 1400px) {
  .tt-avis__grille {
    column-count: 4;
  }
}

/* Les avis sans photo : les initiales dans une pastille pleine, à la manière
   des avatars de Slack ou Notion — même diamètre et même place qu'une vraie
   photo de profil, pour que le mur reste régulier.
   ⚠️ ON N'INVENTE JAMAIS UN VISAGE. Ces avis-là ne sont pas encore de vrais
   clients : y coller une photo (générée ou piochée ailleurs) ferait passer un
   exemple pour un témoignage réel. Le jour où de vrais avis arrivent avec leur
   vraie photo, il suffit d'ajouter `photo:` dans la liste `AVIS` et la pastille
   laisse la place à l'image. */
.tt-avis__monogramme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(150deg, hsl(var(--teinte) 76% 62%), hsl(var(--teinte) 68% 45%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 3px 8px -2px hsl(var(--teinte) 60% 40% / 0.55);
  color: #fff;
}
.tt-avis__monogramme[data-teinte='0'] {
  --teinte: 214;
}
.tt-avis__monogramme[data-teinte='1'] {
  --teinte: 265;
}
.tt-avis__monogramme[data-teinte='2'] {
  --teinte: 168;
}
.tt-avis__monogramme[data-teinte='3'] {
  --teinte: 24;
}
.tt-avis__monogramme[data-teinte='4'] {
  --teinte: 330;
}
.tt-avis__monogramme[data-teinte='5'] {
  --teinte: 192;
}

/* --- Le bloc final : le titre entièrement BLANC -------------------------- */
.tt-final__titre span {
  color: #fff;
}

/* Le dernier encart clair FERME le grand bloc blanc : il lui faut plus d'air
   en bas qu'entre deux encarts, sinon le bouton touche presque le bord du
   panneau et le bloc a l'air coupé. */
#data {
  padding-bottom: 116px;
}
/* Le grand chiffre, posé en filigrane derrière le texte. */
.tt-souci__chiffre {
  position: absolute;
  right: 16px;
  bottom: -14px;
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(16, 24, 40, 0.032);
  pointer-events: none;
}
.tt-souci__jeton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, #eaf2ff 0%, #dce9fd 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(0, 117, 255, 0.14);
  color: var(--tt-bleu);
}
.tt-souci__jeton svg {
  width: 21px;
  height: 21px;
}

/* ===========================================================================
   « LE PROBLÈME » — version en DEUX COLONNES (2026-08-02, dernière).
   Demande de Ghilès : plus de titre au-dessus et de cartes en dessous, mais un
   bloc à gauche et un bloc à droite. Minimal, technique, sans cadre : le
   propos tient à gauche, la liste des quatre points se lit à droite, séparée
   par de simples filets. Aucune carte, aucune ombre, aucune illustration.
   ======================================================================== */
.tt-probleme__duo {
  display: grid;
  gap: 44px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  .tt-probleme__duo {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 96px;
    align-items: start;
  }
  /* La colonne de gauche reste à l'écran pendant qu'on parcourt la liste. */
  .tt-probleme__cote {
    position: sticky;
    top: 120px;
  }
}
.tt-probleme__cote h2 {
  margin-top: 24px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0a0f1e;
  text-wrap: balance;
}
.tt-probleme__cote p {
  margin-top: 20px;
  /* 30ch quand le sous-titre tenait en une phrase ; il en fait deux maintenant
     qu'il porte la colonne tout seul, et 30ch le hachait en escalier. */
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.65;
  color: #59617a;
}
/* Le numéro, en chasse fixe : c'est lui qui donne le ton « outil ». */
.tt-souci__chiffre {
  position: static;
  flex: 0 0 auto;
  padding-top: 3px;
  font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(16, 24, 40, 0.28);
}
.tt-souci__texte {
  flex: 1 1 auto;
  min-width: 0;
}
.tt-souci__jeton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 2px 0 0;
  border-radius: 11px;
  background: none;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.1);
  color: rgba(16, 24, 40, 0.4);
  transition:
    color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.tt-souci__jeton svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 620px) {
  .tt-souci {
    gap: 16px;
  }
  .tt-souci__jeton {
    display: none;
  }
}

/* ===========================================================================
   « LE PROBLÈME » — v4 (2026-08-02). Voir le commentaire de `enteteProbleme`
   dans personnalise.js pour le pourquoi de chaque changement.
   ======================================================================== */

/* 1. PLUS DE STICKY. La colonne de gauche fait ~330 px contre ~530 px pour la
      mosaïque : le `position: sticky` ne servait qu'à la faire décrocher de
      120 px dès le premier défilement.
      ⚠️ ELLE N'EST PLUS UN CONTENEUR FLEX NON PLUS. En `flex-direction: column`,
      l'étirement par défaut mettait la pastille « Le Problème » sur TOUTE la
      largeur de la colonne — d'où le gros encart bizarre. En bloc normal, elle
      reprend sa largeur de contenu. */
@media (min-width: 1000px) {
  .tt-probleme__cote {
    position: static;
    top: auto;
    display: block;
  }
  .tt-probleme__duo {
    /* Centré : la colonne de texte est plus courte que la mosaïque, le vide se
       répartit au-dessus et en dessous au lieu de s'entasser en bas. */
    align-items: center;
  }
}
/* Ceinture et bretelles : où qu'elle se trouve, la pastille garde sa taille. */
.tt-probleme__cote .tt-pastille {
  align-self: flex-start;
  width: auto;
  max-width: max-content;
}
/* Le sous-titre : une phrase courte, puis les trois constats en liste. Le pavé
   de deux paragraphes qu'il y avait avant faisait un mur de texte face à la
   mosaïque, et plus personne ne le lisait. */
.tt-probleme__intro {
  font-weight: 600;
  color: #3d4457;
}
.tt-probleme__points {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 42ch;
}
.tt-probleme__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #59617a;
}
/* Une croix, pas une coche : c'est la section des problèmes. En BLEU de marque
   (demande de Ghilès) plutôt qu'en gris : les grises passaient inaperçues. Le
   halo bleu autour reprend celui des coches du reste de la page. */
.tt-probleme__puce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(0, 117, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(0, 117, 255, 0.28),
    0 0 0 4px rgba(0, 117, 255, 0.06),
    0 4px 10px -3px rgba(0, 117, 255, 0.4);
  color: var(--tt-bleu);
}
.tt-probleme__puce svg {
  width: 10px;
  height: 10px;
}

/* 2. LA MOSAÏQUE DE QUATRE CARRÉS DÉPHASÉS (v5, demande de Ghilès).
      Quatre carrés posés de travers, la deuxième colonne descendue d'un cran :
      le désordre est le sujet de la section. Au survol, le carré se remet
      droit, se soulève et passe au bleu — la remise en ordre, c'est le produit.
      La colonne de droite prend un peu plus de largeur qu'avant, sinon les
      carrés deviennent des rectangles étroits et le texte se casse en bouillie. */
@media (min-width: 1000px) {
  .tt-probleme__duo {
    /* DEUX COLONNES ÉGALES (demande de Ghilès) : la colonne de texte passe de
       380 à 458 px et la mosaïque de 536 à 458, ce qui ramène les carrés de
       268 à ~219 px. C'est le seul levier pour réduire les carrés sans toucher
       à leur disposition.
       ⚠️ Plancher à ne pas franchir : sous ~440 px à gauche, le gros titre part
       en CINQ lignes et se casse mal. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
}

/* ⚠️ LE BLOC SERRÉ (8 px d'écart) A ÉTÉ ABANDONNÉ. À cette distance, les ombres
   portées des quatre cartes se rejoignaient dans les jointures et tout autour :
   ça dessinait une plaque grise sous l'ensemble, que Ghilès a vue comme « un
   fond derrière les blocs ». On est revenu à l'écartement et au décalage
   précédents, qui laissent respirer les ombres. */
.tt-soucis {
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0;
}
@media (min-width: 620px) {
  .tt-soucis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* `align-items: start` : sans lui, la case de droite et ses 62 px de marge
       rallongent la rangée, et la case de gauche s'étire d'autant. */
    align-items: start;
    /* Les deux carrés du haut sont abaissés : la mosaïque commençait au-dessus
       de la pastille « Le Problème » et le bloc semblait flotter plus haut que
       le texte. Le padding du haut fait descendre l'ensemble, celui du bas
       rattrape ce que la colonne décalée dépasse. */
    padding-top: 26px;
    padding-bottom: 16px;
  }
  .tt-souci:nth-child(even) {
    margin-top: 16px;
  }
}

/* ⚠️ LA CASE NE BOUGE JAMAIS. C'est elle qui reçoit le survol ; si elle se
   déplaçait, elle sortirait de sous le curseur, le survol se couperait, elle
   reviendrait — et la carte vibrerait. Tout le mouvement est sur
   `.tt-souci__carte`, qui est peinte par-dessus sans influencer la mise en
   page (un `transform` ne déplace pas la boîte de survol du parent). */
.tt-souci {
  --gite: 0deg;
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  /* ⚠️ `overflow: visible` OBLIGATOIRE. Une version précédente de `.tt-souci`,
     plus haut dans le fichier, posait `overflow: hidden` — et comme la carte
     penche, ses coins débordent de la case : ils se faisaient RASER au carré.
     C'est ce qui donnait aux carrés inclinés des angles coupés bizarres. */
  overflow: visible;
}
/* ⚠️ Même origine : cette ancienne version posait aussi un filet bleu de 2 px
   en haut de la case, allumé au survol. La case est DROITE et la carte PENCHÉE :
   le trait flottait donc de travers au-dessus du carré. On le supprime. */
.tt-souci::before {
  content: none;
}
/* ⚠️ ET SURTOUT : les anciens `.tt-souci:hover` (0,2,0) l'emportent sur la règle
   de base `.tt-souci` (0,1,0). L'un d'eux posait `padding-left: 8px` au survol —
   la case gagnait 8 px de marge interne, donc la carte RÉTRÉCISSAIT de 8 px.
   C'est ce que Ghilès voyait comme « le bloc se rétrécit ». La case ne doit
   RIEN faire au survol : tout se joue sur la carte, et en couleur seulement. */
.tt-souci:hover,
.tt-souci--actif {
  padding: 0;
  transform: none;
  background: none;
  box-shadow: none;
}
.tt-souci:nth-child(1) {
  --gite: -2.8deg;
}
.tt-souci:nth-child(2) {
  --gite: 2.1deg;
}
.tt-souci:nth-child(3) {
  --gite: 2.6deg;
}
.tt-souci:nth-child(4) {
  --gite: -1.8deg;
}

/* Chaque carré a SON inclinaison : quatre valeurs choisies à la main, jamais la
   même ni son opposé exact, sinon l'œil y lit une grille et l'effet « posé en
   vrac » tombe à plat. */
.tt-souci__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  /* ⚠️ PAS de `space-between`. Il collait l'icône tout en haut et le texte tout
     en bas, en laissant un grand trou au milieu — c'est ce qui donnait aux
     carrés un air cassé. Le contenu est empilé normalement, et le `min-height`
     est calé sur la carte la plus remplie pour qu'il ne reste presque rien à
     rattraper en bas. */
  justify-content: flex-start;
  gap: 16px;
  /* ⚠️ PAS de `height: 100%` tant qu'il y a le décalage vertical : ça
     réétirerait les carrés de gauche (voir le piège n°4 du LISEZ-MOI). Le
     `min-height` est donc le SEUL moyen de leur donner la même hauteur — il est
     calé sur le carré le plus rempli. À revoir si un texte s'allonge. */
  min-height: 214px;
  padding: 20px;
  border-radius: 22px;
  /* Un dégradé très court plutôt qu'un blanc plat : sur un panneau déjà clair
     (#f8f9fc), une carte blanche unie ne se détache pas — elle a l'air d'un
     trou. Le liseré net + les deux ombres (une courte au contact, une longue
     et diffuse) sont ce qui la fait décoller du fond. */
  background: linear-gradient(168deg, #fff 0%, #fdfdff 52%, #f3f7fd 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(16, 24, 40, 0.09),
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 16px 28px -18px rgba(16, 24, 40, 0.3),
    0 40px 70px -46px rgba(16, 24, 40, 0.55);
  /* ⚠️ LE SURVOL NE DÉPLACE PLUS RIEN. La carte se redressait et se soulevait ;
     même avec les deux couches, Ghilès trouvait que « l'animation bug ». Elle
     ne change plus que de couleur — aucun mouvement ne peut plus sauter. */
  transform: rotate(var(--gite));
  transition:
    box-shadow var(--tt-survol) ease,
    background var(--tt-survol) ease;
}

/* La lueur bleue qui monte du bas au survol : posée en pseudo-élément pour ne
   pas toucher au fond blanc de la carte (une image faite pour du blanc reste
   sur du blanc, y compris ici). */
.tt-souci__carte::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(115% 90% at 50% 118%, rgba(0, 117, 255, 0.13), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tt-survol) ease;
}

.tt-souci__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
/* ⚠️ TOUT CE QUI CHANGE AU SURVOL PARTAGE LA MÊME DURÉE (`--tt-survol`) ET LA
   MÊME COURBE. Il y avait 0,3 s ici, 0,35 s là, 0,4 s pour la lueur : le titre,
   le numéro, l'icône et le liseré viraient au bleu les uns après les autres et
   l'effet avait l'air de se propager. Si tu ajoutes un élément qui réagit au
   survol, reprends `var(--tt-survol)`. */
.tt-soucis {
  --tt-survol: 0.2s;
  /* Resserré (demande de Ghilès) : 30 px d'écart et 62 px de décalage, ça
     étalait la mosaïque bien plus haut que la colonne de texte. La DISPOSITION
     ne change pas — mêmes colonnes, même sens de décalage, mêmes inclinaisons —
     seules les distances diminuent. */
  /* Écart horizontal normal, écart VERTICAL très serré : la rangée du haut
     redescend au contact de celle du bas, les quatre carrés se lisent comme un
     seul bloc. */
  column-gap: 16px;
  /* ⚠️ L'écart VU entre la rangée du haut et celle du bas vaut
     `row-gap + décalage`, pas `row-gap` seul : la case décalée rend sa rangée
     plus haute, et la case non décalée finit donc bien avant le bas de la
     rangée. Pour rapprocher les deux rangées, il faut baisser LES DEUX. */
  row-gap: 2px;
  /* Et TOUTE la mosaïque a été réduite d'environ un cinquième : elle faisait
     trop lourd face à la colonne de texte. Rien n'a changé de place — largeur,
     écarts, marges intérieures, icônes et corps de texte ont simplement été
     réduits ensemble, dans les mêmes proportions. */
  max-width: 408px;
  margin-left: auto;
  margin-right: auto;
}
/* En dessous de 1000 px les deux colonnes s'empilent : la mosaïque se retrouve
   sous un texte aligné à gauche, elle doit donc l'être aussi — centrée, elle
   flottait de travers par rapport au titre. */
@media (max-width: 999px) {
  .tt-soucis {
    margin-left: 0;
  }
}
.tt-souci__jeton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f2f6fd 0%, #e8effb 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(16, 24, 40, 0.07);
  color: rgba(16, 24, 40, 0.42);
  transition:
    background var(--tt-survol) ease,
    box-shadow var(--tt-survol) ease,
    color var(--tt-survol) ease;
}
.tt-souci__jeton svg {
  width: 17px;
  height: 17px;
}
/* Le grand numéro : c'est lui qui donne le ton « fiche », et il monte en
   contraste au survol au lieu de rester un filigrane inerte. */
.tt-souci__chiffre {
  position: static;
  padding: 0;
  font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, monospace;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(16, 24, 40, 0.19);
  transition: color var(--tt-survol) ease;
}
.tt-souci__texte {
  flex: 0 0 auto;
}
/* 16,5 px et non 18 : depuis que les carrés sont plus étroits, « Saturation du
   marché » et « Recherche manuelle » passaient sur DEUX lignes et ces deux
   carrés-là devenaient bien plus hauts que les autres. */
.tt-souci h3 {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0a0f1e;
  transition: color var(--tt-survol) ease;
}
.tt-souci p {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #59617a;
}

/* Le survol : de la couleur, rien qui bouge.
   ⚠️ EXACTEMENT LES MÊMES CINQ COUCHES D'OMBRE que l'état de repos, aux mêmes
   décalages — seules les COULEURS changent. Avec un nombre de couches différent
   (il y en avait quatre ici contre cinq au repos), le navigateur ne peut pas
   interpoler : il bascule d'un coup, la grande ombre diffuse disparaît, et la
   carte a l'air de se dégonfler. */
.tt-souci:hover .tt-souci__carte,
.tt-souci--actif .tt-souci__carte {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(0, 117, 255, 0.3),
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 16px 28px -18px rgba(0, 117, 255, 0.34),
    0 40px 70px -46px rgba(16, 24, 40, 0.55);
}
.tt-souci:hover .tt-souci__carte::after,
.tt-souci--actif .tt-souci__carte::after {
  opacity: 1;
}
.tt-souci:hover .tt-souci__chiffre,
.tt-souci--actif .tt-souci__chiffre {
  color: rgba(0, 117, 255, 0.55);
}
.tt-souci:hover h3,
.tt-souci--actif h3 {
  color: var(--tt-bleu);
}
.tt-souci:hover .tt-souci__jeton,
.tt-souci--actif .tt-souci__jeton {
  background: linear-gradient(180deg, #e7f0ff 0%, #d8e7fd 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(0, 117, 255, 0.28);
  color: var(--tt-bleu);
}

/* En dessous de 620 px les carrés s'empilent : plus de déphasage ni de gîte,
   ça deviendrait illisible sur un téléphone. C'est là que `soucis()` reprend la
   main pour allumer la carte au défilement, faute de survol. */
/* ⚠️ PIÈGE DE SPÉCIFICITÉ. `.tt-souci { --gite: 0deg }` ne suffisait PAS :
   `.tt-souci:nth-child(1)` pèse (0,2,0) contre (0,1,0), donc les carrés
   restaient inclinés sur téléphone — en une seule colonne, ils débordaient de
   10 px de leur conteneur. On remet donc la variable à plat AVEC la même
   spécificité, et on coupe la rotation à la source sur la carte. */
@media (max-width: 619px) {
  /* Les carrés sont empilés en une colonne : le `row-gap` de 2 px, pensé pour
     la mosaïque 2×2, les collait les uns aux autres. Ils ont besoin de leur
     propre respiration ici. */
  .tt-soucis {
    row-gap: 14px;
  }
  .tt-souci:nth-child(n) {
    --gite: 0deg;
  }
  .tt-souci__carte {
    transform: none;
    /* ⚠️ `min-height` À ZÉRO SUR TÉLÉPHONE. Les carrés y sont en UNE colonne,
       donc larges : le texte tient en deux lignes et le contenu ne fait plus
       que ~150 px. Le `min-height` de 214 px laissait donc 60 px de blanc mort
       sous le texte de chaque carte. Il ne sert qu'à égaliser les hauteurs
       en 2×2 — en une colonne, il n'y a rien à égaliser. */
    min-height: 0;
  }
}

/* Le carrousel défilant sous la section a été retiré : il ne reste que le
   `<div>` vide qui tient l'équilibre des balises. */
.tt-probleme__fin {
  display: none;
}

/* ── Menu du haut centré sur l'axe de la headline ────────────────────────────
   La rangée est en `justify-between` : logo à gauche, menu, boutons à droite.
   Le menu se retrouvait donc poussé par la largeur du logo d'un côté et des
   deux boutons de l'autre — jamais au milieu, et désaligné avec le titre du
   hero, qui lui est centré (`.tt-hero__titre { margin: … auto }`).

   On le sort du flux et on l'ancre à 50 % de la rangée : il est alors sur le
   même axe que la headline, quelles que soient les largeurs de part et d'autre.
   Uniquement à partir de `md` — en dessous le menu est masqué (`hidden md:flex`)
   et remplacé par le bouton hamburger. */
/* ⚠️ RÉVISÉ LE 23/08 — LE MENU N'EST PLUS ANCRÉ À 50 %.
   Avec quatre entrées, l'ancrage à 50 % de la rangée passait encore. Avec la
   cinquième (« Blog »), le menu s'étalait à droite et venait toucher
   « Connexion » : 46 px de respiration à droite contre 177 px à gauche.
   Demande de Ghilès : « décale les titres un peu vers la gauche pour que ce
   soit centré, pas collé au bouton ».

   On abandonne donc l'ancrage absolu au profit de deux marges automatiques :
   la place libre se partage EN DEUX PARTS ÉGALES entre le logo et les boutons,
   à toutes les largeurs. Le menu est centré entre ses voisins, plus par
   rapport à la page — c'est ce qui se voit, et ça ne se dérègle pas quand on
   ajoute une entrée. */
@media (min-width: 1024px) {
  .tt-entete__rangee {
    position: relative;
  }
  .tt-entete__rangee > nav[data-menu] {
    /* Les marges auto absorbent toute la place libre AVANT que
       `justify-between` n'ait quoi que ce soit à répartir. */
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Le prix qui change au passage mensuel / annuel ──────────────────
   UN VRAI COMPTEUR. L'ancien chiffre s'échappe par le haut pendant que le
   nouveau monte depuis le bas, les deux rognés par la même fenêtre. C'est ce
   chevauchement qui fait le roulement : une simple apparition du nouveau
   chiffre, elle, se lit comme un remplacement, pas comme une valeur qui tourne.

   La fenêtre est un peu plus grande que le texte (`padding` compensé par une
   `margin` négative) : sinon `overflow:hidden` mordrait sur les jambages et le
   dernier chiffre du prix, qui a un crénage serré. */
.tt-roule {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  /* ⚠️ `content-box` est indispensable : la largeur posée en JS est celle du
     TEXTE. En `border-box` (le réglage par défaut du projet), les rembourrages
     seraient déduits de cette largeur et le chiffre serait rogné. */
  box-sizing: content-box;
  /* Le rognage a lieu au bord du rembourrage, pas du texte. Vertical : juste ce
     qu'il faut pour ne pas mordre sur les jambages. Horizontal : LARGE à droite,
     parce que le chiffre entrant est plus long que le sortant (« 24€ » →
     « 228€ ») et que la largeur, elle, met le temps de l'animation à rattraper.
     Sans cette marge, on voyait le dernier chiffre arriver coupé et se compléter
     seulement à la toute fin — c'est le « ça s'arrête avant d'aller au bout du
     chiffre ». */
  padding: 0.14em 1.4em 0.14em 0.08em;
  margin: -0.14em -1.4em -0.14em -0.08em;
  /* La largeur change aussi : sans transition, tout ce qui suit sur la ligne
     sauterait pendant que le chiffre roule. */
  transition: width 0.56s cubic-bezier(0.22, 1, 0.28, 1);
}
.tt-roule__in {
  display: inline-block;
  white-space: nowrap;
}
.tt-roule__entre {
  animation: tt-roule-entre 0.56s cubic-bezier(0.22, 1, 0.28, 1);
}
.tt-roule__out {
  position: absolute;
  left: 0.08em;
  top: 0.14em;
  animation: tt-roule-sort 0.56s cubic-bezier(0.22, 1, 0.28, 1) forwards;
}
@keyframes tt-roule-entre {
  from {
    transform: translateY(125%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes tt-roule-sort {
  from {
    transform: none;
    opacity: 1;
  }
  40% {
    opacity: 0.55;
  }
  to {
    transform: translateY(-125%);
    opacity: 0;
  }
}

/* ── Les lignes qui n'existent qu'en annuel ──────────────────────────────────
   Le prix barré et « Soit …€/mois » n'apparaissent qu'au tarif annuel. Elles
   étaient en `display:none` : elles surgissaient d'un coup et POUSSAIENT tout
   le contenu du dessous d'un cran, en pleine animation du prix. Elles se
   déplient maintenant en même temps que le chiffre roule, sur la même durée et
   la même courbe — la carte grandit sans à-coup.

   `max-height` plutôt que `height` : la hauteur naturelle d'une ligne dépend de
   la police, qui n'est pas encore chargée au premier rendu. Une valeur haute
   sert de plafond, la transition reste douce parce que le contenu est court. */
.tt-plan__parmois,
.tt-plan__ancre {
  overflow: hidden;
  transition:
    max-height 0.56s cubic-bezier(0.22, 1, 0.28, 1),
    opacity 0.34s ease,
    margin-top 0.56s cubic-bezier(0.22, 1, 0.28, 1),
    transform 0.56s cubic-bezier(0.22, 1, 0.28, 1);
  max-height: 40px;
  opacity: 1;
  transform: none;
}
/* ⚠️ Ces deux-là NE prennent PAS le `display:none` générique de `.tt-vide` :
   c'est justement lui qui provoquait le saut. */
.tt-plan__parmois.tt-vide,
.tt-plan__ancre.tt-vide {
  display: block;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  /* Un léger recul vers le haut : la ligne semble se ranger sous le prix au
     lieu de simplement s'écraser. */
  transform: translateY(-4px);
}

/* Mouvement réduit : certains utilisateurs ont des troubles déclenchés par le
   défilement à l'écran. Les valeurs changent quand même, en simple fondu. */
@keyframes tt-prix-fondu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-roule,
  .tt-plan__parmois,
  .tt-plan__ancre {
    transition: none;
  }
  .tt-roule__entre {
    animation: tt-prix-fondu 0.25s ease;
  }
  .tt-roule__out {
    animation: none;
    opacity: 0;
  }
}

/* ── Point d'information « i » ───────────────────────────────────────────────
   Posé à côté d'un terme que le visiteur ne connaît pas (« Accès MCP »). Au
   clic, une bulle explique le terme en français simple. */
.tt-info {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}
/* Le rond et le « i » sont maintenant DESSINÉS (voir `ICONE_INFO` dans
   personnalise.js) : le bouton n'est plus qu'une zone cliquable. Plus de
   bordure ni de police à régler — donc plus de « i » penché ni décentré. */
.tt-info__bouton {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}
.tt-info__bouton svg {
  width: 15px;
  height: 15px;
  display: block;
}
/* Le rond faisant partie du dessin, c'est `color` qui l'éclaire — plus de
   `border-color`, qui n'aurait plus rien à colorer. */
.tt-info__bouton:hover,
.tt-info__bouton[aria-expanded='true'] {
  color: #fff;
}
.tt-info__bulle {
  position: absolute;
  bottom: calc(100% + 9px);
  /* Ancrée à GAUCHE du point plutôt que centrée : la ligne « Accès MCP » est
     près du bord de la carte, une bulle centrée dépasserait du plan. */
  left: -12px;
  width: 268px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #14141c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  z-index: 40;
  /* Fermée : invisible ET hors du parcours du clavier / des lecteurs d'écran.
     `visibility` fait ce que `opacity` seule ne fait pas. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}
.tt-info__bouton[aria-expanded='true'] + .tt-info__bulle {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (max-width: 640px) {
  .tt-info__bulle {
    width: 220px;
    left: auto;
    right: -12px;
  }
}

/* ── Le fondu sous la vidéo de présentation ──────────────────────────────────
   Repris de SoftSearch : `linear-gradient(transparent 60%, #0a0a0a 100%)`.
   Deux défauts :
     1. il finit sur #0a0a0a alors que le fond de la page est #05050b — les deux
        noirs ne se raccordent pas, on voit un liseré plus clair là où le fondu
        s'arrête ;
     2. tout se joue sur les 40 derniers pour cent, en rampe droite. L'œil ne
        perçoit pas l'opacité linéairement : une droite se lit comme une cassure
        nette au milieu du dégradé.
   On reprend donc la vraie couleur de fond et on répartit la montée sur des
   paliers rapprochés, ce qui approche une courbe : le bas de la vidéo se
   dissout au lieu de s'arrêter.

   ⚠️ Doit rester APRÈS `complement.css` dans Maquette.tsx, qui porte la règle
   d'origine — sinon c'est elle qui gagne. */
.mockup-fade-bottom {
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 11, 0) 0%,
    rgba(5, 5, 11, 0.06) 22%,
    rgba(5, 5, 11, 0.18) 40%,
    rgba(5, 5, 11, 0.38) 56%,
    rgba(5, 5, 11, 0.62) 70%,
    rgba(5, 5, 11, 0.85) 84%,
    #05050b 100%
  );
}

/* ── Avatars des avis sans photo ─────────────────────────────────────────────
   Motifs géométriques, jamais de visage : une partie de ces avis sont des
   exemples en attendant de vrais retours, et un visage transformerait un texte
   d'exemple en témoignage qui a l'air authentique.
   Mêmes dimensions que les vraies photos (36 px, rond) pour que le mur reste
   régulier quand les deux se côtoient. */
.tt-avis__avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  /* Le même relief que les photos : sans lui, les motifs paraissent collés à
     plat sur la carte alors que les portraits ont de la matière. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 3px 8px -3px rgba(10, 15, 40, 0.45);
}
.tt-avis__avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   LE BLOG
   =========================================================================
   Une VUE, pas une page : la barre du haut et le pied de page sont les mêmes
   que sur la vitrine, seul le milieu est échangé. Le routeur est dans
   `app.js` (fonction `blog`), le contenu vient de `contenu-blog.json` via
   `blog.js`.

   LA DISPOSITION EST CELLE DE TRENDTRACK : en-tête, puis « À la une » +
   « À découvrir » côte à côte dans deux panneaux, puis une colonne de filtres
   à GAUCHE et la grille à droite. Les cartes sont volontairement PETITES et
   denses — c'est une liste d'articles, pas une page de produit.

   ⚠️ RIEN N'EST INVENTÉ ICI. On reprend le vocabulaire des BLOCS CLAIRS de la
   landing (« Comment ça marche », la FAQ) :
     fond du bloc  #f8f9fc      panneau      #eff1f6
     carte         #fff         liseré       inset 0 0 0 1px rgba(16,24,40,.08)
     titre         #0a0f1e      texte        #5b6478 / #4c5468
     survol        inset … rgba(0,117,255,.22) + ombre bleue (= FAQ ouverte)
     UNE seule couleur d'accent : le bleu TikTrack.
   Si tu changes quelque chose ici, va d'abord voir comment la FAQ le fait.

   ⚠️ POURQUOI CES DEUX PREMIÈRES RÈGLES SONT VITALES
   `.tt-page` est une colonne FLEXIBLE et chaque section porte un `order`
   (voir plus haut). En enfermant la vitrine dans `<main data-vue="landing">`,
   ces `order` se retrouvent sur des enfants d'un bloc normal : ils ne
   s'appliquent plus et la page repart dans l'ordre du modèle. Le `<main>`
   doit donc être, lui aussi, une colonne flexible.
   Et comme on lui donne un `display`, l'attribut `hidden` du navigateur ne
   suffit plus à le masquer : il faut le redire. */
.tt-page > [data-vue] {
  display: flex;
  flex-direction: column;
  order: 20;
  min-width: 0;
}
.tt-page > [data-vue][hidden] {
  display: none;
}
/* Le hero n'est plus un enfant direct de `.tt-page` : il est dans le <main>. */
.tt-page > [data-vue='landing'] > .tt-hero {
  order: 1;
}

/* -------------------------------------------------------------------------
   LA BARRE DU HAUT PASSE EN CLAIR
   -------------------------------------------------------------------------
   Le blog est une page blanche : le logo blanc et les entrées de menu en
   blanc à 45 % y devenaient invisibles. Tout bascule quand `app.js` pose la
   classe `tt-blog-ouvert` sur `<html>` (c'est le routeur qui décide, pas un
   `:has()` : une classe se lit, se débogue et ne dépend d'aucun sélecteur
   récent). Le logo, lui, n'est pas recolorable en CSS — `app.js` échange le
   fichier pour `tiktrack-logo-pied.svg`, la version à texte noir déjà
   utilisée dans le pied de page.

   ⚠️ `!important` sur le fond : le `background-color` de l'en-tête est écrit
   en STYLE EN LIGNE dans le HTML du modèle. Sans `!important`, aucune règle
   ne peut le reprendre. */
.tt-blog-ouvert .tt-entete {
  background-color: #f8f9fc !important;
}
.tt-blog-ouvert .tt-entete__rangee {
  border-bottom-color: #e6e9f0;
}
.tt-blog-ouvert .tt-entete [data-menu] a {
  color: #59617a;
}
.tt-blog-ouvert .tt-entete [data-menu] a:hover {
  color: #0a0f1e;
  background: rgba(16, 24, 40, 0.05);
}
.tt-blog-ouvert .tt-entete [data-menu] a[aria-current='page'] {
  color: #0a0f1e;
  background: rgba(16, 24, 40, 0.06);
}
/* « Connexion » : le fantôme est fait de blancs translucides, il disparaît. */
.tt-blog-ouvert .tt-entete .tt-btn-fantome {
  border-color: rgba(16, 24, 40, 0.12);
  background: #fff;
  color: #2b3345;
}
.tt-blog-ouvert .tt-entete .tt-btn-fantome:hover {
  border-color: rgba(16, 24, 40, 0.22);
  background: #f2f4f8;
  color: #0a0f1e;
}
/* « Commencer maintenant » : blanc sur blanc. Il s'inverse, exactement comme
   la landing inverse ses panneaux — pas une nouvelle couleur, l'opposé. */
.tt-blog-ouvert .tt-entete .tt-btn-blanc {
  background: #06060f;
  color: #fff;
}
.tt-blog-ouvert .tt-entete .tt-btn-blanc:hover {
  background: #1b1b28;
}
.tt-blog-ouvert .tt-entete button {
  color: #4c5468;
}
/* ⚠️ LE LOGO CLAIR EST DANS UNE BOÎTE PLUS HAUTE.
   `tiktrack-logo.svg` fait 119 x 34, `tiktrack-logo-pied.svg` 119 x 38 : même
   dessin, mais 2 px de marge en haut et en bas dans le fichier. Avec la même
   hauteur CSS, la marque n'est donc pas rendue à la même taille dans les deux
   fichiers : à hauteur égale, le logo du blog paraît plus PETIT (c'était le
   défaut d'origine). On rend les 4 px de la boîte.
   ⚠️ CETTE HAUTEUR SUIT CELLE DE `.tt-logo`, IL FAUT LES CHANGER ENSEMBLE.
   Le rapport est 38/34 : quand la vitrine est passée de 34 à 30 px (25/08),
   le blog est resté à 38 et son logo est devenu visiblement plus gros que
   celui de la vitrine — l'inverse du défaut qu'on corrigeait ici.
   30 x 38/34 = 33,5 -> 34. Version téléphone : 26 x 38/34 = 29. */
.tt-blog-ouvert .tt-logo {
  height: 34px;
}
@media (max-width: 640px) {
  .tt-blog-ouvert .tt-logo {
    height: 29px;
  }
}
/* Le panneau du hamburger est un verre sombre : sur une page blanche il
   fallait qu'il devienne, lui aussi, une carte claire. */
.tt-blog-ouvert .tt-menu {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(16, 24, 40, 0.1);
  box-shadow: 0 30px 70px -20px rgba(16, 24, 40, 0.28);
}
.tt-blog-ouvert .tt-menu > a {
  color: #2b3345;
}
.tt-blog-ouvert .tt-menu > a:hover {
  background: rgba(16, 24, 40, 0.05);
  color: #0a0f1e;
}

/* -------------------------------------------------------------------------
   LE BLOC
   -------------------------------------------------------------------------
   Pleine largeur et sans arrondi en haut, comme les blocs clairs de la
   landing depuis le 2 août : l'en-tête au-dessus est clair lui aussi, un
   arrondi laisserait passer deux coins sombres au raccord. Le pied de page,
   déjà en #f8f9fc, prolonge le bloc sans couture. */
.tt-blog {
  position: relative;
  background: #f8f9fc;
  /* ⚠️ 66 px EN HAUT = LA HAUTEUR DE LA BARRE. Elle est en `position:absolute`
     (héritage du modèle) : elle FLOTTE au-dessus du contenu au lieu de le
     pousser. Sur la vitrine c'est voulu, le hero passe dessous. Ici, sans
     cette réserve, le premier élément du blog démarrait à 10 px sous le logo. */
  padding: 66px 24px 100px;
  color: #0a0f1e;
}
.tt-blog__index,
.tt-blog-article__cadre {
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

/* --- L'en-tête, calqué sur celui de la FAQ ------------------------------ */
.tt-blog__tete {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 0 44px;
}
.tt-blog__tete h1 {
  margin: 20px 0 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0a0f1e;
}
.tt-blog__tete > p {
  margin: 16px auto 0;
  max-width: 580px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #59617a;
}

/* --- LA VITRINE : « À la une » + « À découvrir » ------------------------ */
.tt-blog__vitrine {
  display: grid;
  grid-template-columns: 1.28fr 1fr;
  gap: 18px;
  align-items: start;
}
/* Le panneau est UN CRAN plus foncé que la page, et les cartes blanches
   dedans. C'est le seul moyen de faire exister un groupe sans lui dessiner
   une bordure de plus. */
.tt-blog__panneau {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 26px;
  background: #eff1f6;
}
.tt-blog__etiquette {
  padding-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8a93a8;
}
.tt-blog__projecteur {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- LA LISTE : filtres à gauche, grille à droite ----------------------- */
.tt-blog__liste {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 36px;
  margin-top: 56px;
  align-items: start;
}
.tt-blog__cote {
  position: sticky;
  /* 66 px de barre + une respiration. */
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tt-blog__cote-titre {
  margin: 8px 0 0;
  padding-left: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8a93a8;
}
.tt-blog__colonne {
  min-width: 0;
}

.tt-blog__recherche {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.09);
  transition: box-shadow 0.25s ease;
}
.tt-blog__recherche:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(0, 117, 255, 0.35),
    0 10px 26px -18px rgba(0, 117, 255, 0.5);
}
.tt-blog__recherche svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #98a0b3;
}
.tt-blog__recherche input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: #0a0f1e;
  font-size: 14px;
  font-weight: 500;
}
.tt-blog__recherche input::placeholder {
  color: #98a0b3;
}
.tt-blog__recherche input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #c3c9d6;
  cursor: pointer;
}

/* --- Les pastilles de catégorie ----------------------------------------- */
.tt-blog__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tt-blog__filtre {
  height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
  color: #59617a;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.tt-blog__filtre:hover {
  color: #0a0f1e;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.18);
}
.tt-blog__filtre--actif,
.tt-blog__filtre--actif:hover {
  background: var(--tt-bleu);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(0, 117, 255, 0.9);
}

/* ⚠️ LE BOUTON DE REMISE À ZÉRO EST TOUJOURS LÀ, à sa place, comme chez
   TrendTrack. Il était auparavant masqué tant qu'aucun filtre n'était posé,
   et rangé AU BOUT de la rangée de pastilles : au premier clic il
   apparaissait, la rangée se recentrait, et TOUTES les pastilles sautaient.
   Ça se lisait comme « ça a réinitialisé mes filtres ». Une place fixe, et
   plus rien ne bouge. */
.tt-blog__reinit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: flex-start;
  height: 34px;
  margin-top: 4px;
  padding: 0 13px;
  border-radius: 10px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
  color: #59617a;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}
.tt-blog__reinit:hover {
  color: #0a0f1e;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.18);
}
/* Sans filtre posé il n'a rien à faire : il s'efface sans DISPARAÎTRE, donc
   sans rien déplacer. */
.tt-blog__reinit[data-inutile] {
  opacity: 0.42;
  cursor: default;
}
.tt-blog__reinit[data-inutile]:hover {
  color: #59617a;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}
.tt-blog__reinit svg {
  width: 13px;
  height: 13px;
}
.tt-blog__compte {
  padding-left: 2px;
  font-size: 12px;
  color: #98a0b3;
}
.tt-blog__compte b {
  font-weight: 700;
  color: #59617a;
}

/* --- LES CARTES --------------------------------------------------------- */
.tt-blog__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tt-blog__carte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(16, 24, 40, 0.07),
    0 1px 2px rgba(16, 24, 40, 0.04);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease;
}
/* Le survol reprend, à l'identique, celui d'une question de FAQ ouverte. */
.tt-blog__carte:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 117, 255, 0.22),
    0 14px 32px -18px rgba(0, 117, 255, 0.3);
}

/* La couverture : c'est l'affiche de l'article, titre compris. */
.tt-blog__visuel {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #05050b;
}
.tt-blog__carte--une .tt-blog__visuel,
.tt-blog__carte--normale .tt-blog__visuel {
  aspect-ratio: 16 / 9;
}
.tt-blog__couverture,
.tt-blog__couverture-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-blog__couverture svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tt-blog__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 10px 10px;
}
.tt-blog__cat {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 117, 255, 0.09);
  color: var(--tt-bleu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.tt-blog__titre-carte {
  display: block;
  font-size: 15px;
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: #0a0f1e;
}
.tt-blog__meta {
  font-size: 11.5px;
  font-weight: 500;
  color: #98a0b3;
}
.tt-blog__meta i {
  font-style: normal;
  opacity: 0.6;
}
.tt-blog__extrait {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5b6478;
}

/* La carte « À la une » : l'affiche en grand, puis le titre à gauche et
   l'extrait à droite — la disposition de TrendTrack. */
.tt-blog__carte--une .tt-blog__corps {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 8px 24px;
  align-items: start;
  padding: 14px 10px 8px;
}
.tt-blog__bloc-titre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.tt-blog__carte--une .tt-blog__titre-carte {
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.024em;
}

/* Les quatre cartes de « À découvrir » : vignette à gauche, titre à droite. */
.tt-blog__carte--mini {
  flex-direction: row;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
}
.tt-blog__carte--mini .tt-blog__visuel {
  flex: 0 0 104px;
  height: 62px;
  border-radius: 9px;
}
.tt-blog__carte--mini .tt-blog__corps {
  justify-content: center;
  gap: 6px;
  padding: 2px 4px 2px 0;
}
.tt-blog__carte--mini .tt-blog__titre-carte {
  font-size: 13.5px;
  line-height: 1.3;
  /* Deux lignes maximum : sinon les quatre cartes n'ont plus la même hauteur
     et la colonne ne tombe plus en face de l'affiche de gauche. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Le pied de la liste ------------------------------------------------ */
.tt-blog__vide {
  padding: 60px 0;
  text-align: center;
  font-size: 15px;
  color: #8a93a8;
}
.tt-blog__pied {
  display: flex;
  justify-content: center;
  padding-top: 28px;
}
.tt-blog__plus {
  height: 40px;
  padding: 0 22px;
  border-radius: 12px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.1);
  color: #0a0f1e;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    box-shadow 0.22s ease,
    transform 0.2s ease;
}
.tt-blog__plus:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 117, 255, 0.3),
    0 12px 26px -18px rgba(0, 117, 255, 0.5);
}

/* --- L'article ---------------------------------------------------------- */
.tt-blog-article {
  padding-top: 46px;
}
.tt-blog-article__cadre {
  max-width: 740px;
}
.tt-blog-article__retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 13.5px;
  font-weight: 600;
  color: #59617a;
  text-decoration: none;
  transition: color 0.2s ease;
}
.tt-blog-article__retour:hover {
  color: var(--tt-bleu);
}
.tt-blog-article__retour svg {
  width: 15px;
  height: 15px;
}
.tt-blog-article__haut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.tt-blog-article__tete {
  margin-bottom: 42px;
}
.tt-blog-article__tete h1 {
  margin: 18px 0 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #0a0f1e;
}
.tt-blog-article__chapo {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: #59617a;
}
.tt-blog-article__auteur {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2b3345;
}
.tt-blog-article__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
  color: var(--tt-bleu);
}
.tt-blog-article__pastille svg {
  width: 16px;
  height: 16px;
}
/* ⚠️ PAS DE COUVERTURE DÉCORATIVE SUR UN ARTICLE : le bloc n'existe QUE si
   l'article a une vraie image (champ `image`). L'affiche générée, elle, sert
   dans les listes — elle porte le titre, qui est déjà écrit juste au-dessus. */
.tt-blog-article__visuel {
  margin: 34px 0 4px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}
.tt-blog-article__visuel img {
  display: block;
  width: 100%;
  height: auto;
}

/* Le corps de l'article : c'est du HTML libre écrit par la rédaction (ou par
   Hermès). On ne stylise donc PAS des classes, on stylise des BALISES — sinon
   il faudrait connaître à l'avance le balisage de chaque article. */
.tt-blog-article__corps {
  font-size: 16.5px;
  line-height: 1.75;
  color: #4c5468;
}
.tt-blog-article__corps > * + * {
  margin-top: 20px;
}
.tt-blog-article__corps h2 {
  margin-top: 46px;
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: -0.024em;
  font-weight: 800;
  color: #0a0f1e;
}
.tt-blog-article__corps h3 {
  margin-top: 34px;
  font-size: 18.5px;
  line-height: 1.34;
  letter-spacing: -0.018em;
  font-weight: 700;
  color: #0a0f1e;
}
.tt-blog-article__corps strong {
  color: #0a0f1e;
  font-weight: 700;
}
.tt-blog-article__corps em {
  color: #2b3345;
}
.tt-blog-article__corps a {
  color: var(--tt-bleu);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tt-blog-article__corps ul,
.tt-blog-article__corps ol {
  padding-left: 4px;
  list-style: none;
  counter-reset: tt-num;
}
.tt-blog-article__corps li {
  position: relative;
  padding-left: 26px;
  margin-top: 11px;
}
.tt-blog-article__corps ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tt-bleu);
}
.tt-blog-article__corps ol li {
  counter-increment: tt-num;
}
.tt-blog-article__corps ol li::before {
  content: counter(tt-num);
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tt-bleu);
}
.tt-blog-article__corps blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 18px 22px;
  border-left: 3px solid var(--tt-bleu);
  border-radius: 0 18px 18px 0;
  background: #f0f2f7;
  font-size: 16.5px;
  color: #2b3345;
}
.tt-blog-article__corps img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}
/* Un tableau ne doit JAMAIS élargir la page : il défile dans sa propre boîte. */
.tt-blog-article__corps table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14.5px;
}
.tt-blog-article__corps th,
.tt-blog-article__corps td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  white-space: nowrap;
}
.tt-blog-article__corps th {
  color: #0a0f1e;
  font-weight: 700;
}
.tt-blog-article__corps code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #eef1f7;
  font-size: 0.9em;
  color: #0a0f1e;
}

/* L'appel à l'action de fin d'article : le MÊME panneau que le bloc final de
   la vitrine — fond du hero compris (dégradé, lueur conique, deux bulles,
   quadrillage, courbe animée). Le HTML du fond est produit par la fonction
   `fondAnime` de `personnalise.js`, celle-là même qui habille le hero : rien
   n'est redessiné ici, sinon « le même fond » cesserait de l'être à la
   première retouche.
   ⚠️ `overflow:hidden` obligatoire : la lueur conique et les bulles débordent
   largement du panneau. */
.tt-blog-article__cta {
  position: relative;
  overflow: hidden;
  margin-top: 56px;
  /* Assez haut pour que la lueur du haut ait la place de se voir : à 250 px le
     dégradé du hero était coupé net et le panneau paraissait presque noir. */
  padding: 68px 32px 72px;
  border-radius: 2rem;
  text-align: center;
  background: #05050b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Le fond est en `z-index: 0`, ses couches montent jusqu'à 2 : le contenu doit
   passer au-dessus, sinon le quadrillage se dessine PAR-DESSUS le texte. */
.tt-blog-article__cta-contenu {
  position: relative;
  z-index: 10;
}
/* Le fond du hero est calibré pour une pleine page, sa variante « bloc final »
   pour un panneau de 1240 x 500. Celui d'un article fait 700 x 250 : tout est
   ramené à cette échelle, sinon la lueur et les bulles débordent si largement
   qu'on n'en voit plus qu'un coin, et le panneau paraît simplement noir. */
.tt-blog-article__cta .tt-fond__conique {
  width: 560px;
  height: 560px;
  top: -46%;
  opacity: 0.62;
}
.tt-blog-article__cta .tt-fond__bulle {
  filter: blur(62px);
}
.tt-blog-article__cta .tt-fond__bulle--une {
  left: 2%;
  top: -18%;
  width: 250px;
  height: 250px;
}
.tt-blog-article__cta .tt-fond__bulle--deux {
  right: 0%;
  top: -10%;
  width: 230px;
  height: 230px;
}
.tt-blog-article__cta h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.24;
  letter-spacing: -0.026em;
  font-weight: 800;
  color: #fff;
}
.tt-blog-article__cta p {
  margin: 12px auto 0;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}
.tt-blog-article__bouton {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-top: 24px;
  padding: 0 24px;
  border-radius: 13px;
  background: #fff;
  color: #06060f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    background 0.22s ease,
    transform 0.2s ease;
}
.tt-blog-article__bouton:hover {
  background: #f4f4f4;
  transform: translateY(-1px);
}

.tt-blog-article__lies {
  margin-top: 66px;
}
.tt-blog-article__lies h2 {
  margin: 0 0 20px;
  font-size: 21px;
  letter-spacing: -0.024em;
  font-weight: 800;
  color: #0a0f1e;
}
.tt-blog-article__lies-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* --- L'entrée dans la vue ----------------------------------------------- */
/* Les apparitions au défilement de la vitrine ne conviennent pas ici : le
   blog est révélé d'un coup, pas parcouru. Un fondu court sur le bloc entier
   suffit, et il ne dépend d'aucun observateur. */
/* ⚠️ L'ANIMATION NE PART PLUS DE ZÉRO. À `opacity: 0` la première image de la
   vue est VIDE : combinée au défilement qui se replace, ça se lisait comme un
   flash. Elle part maintenant d'une opacité déjà lisible et dure moitié moins
   — on sent l'arrivée, on ne voit jamais de trou. */
@keyframes tt-blog-entre {
  from {
    opacity: 0.55;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tt-blog__index[data-anime],
.tt-blog-article[data-anime] {
  animation: tt-blog-entre 0.24s var(--tt-souple) both;
}
@media (prefers-reduced-motion: reduce) {
  .tt-blog__index[data-anime],
  .tt-blog-article[data-anime] {
    animation: none;
  }
  .tt-blog__carte:hover {
    transform: none;
  }
}

/* --- Adaptation aux petits écrans --------------------------------------- */
@media (max-width: 1100px) {
  .tt-blog__vitrine {
    grid-template-columns: 1fr;
  }
  .tt-blog__projecteur {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tt-blog__liste {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Sur une seule colonne, la colonne de filtres redevient une barre : elle ne
     doit plus coller au haut de l'écran ni s'étirer en hauteur. */
  .tt-blog__cote {
    position: static;
  }
  .tt-blog__grille,
  .tt-blog-article__lies-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .tt-blog__grille,
  .tt-blog-article__lies-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tt-blog__carte--une .tt-blog__corps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  .tt-blog {
    /* La rangée du header tombe à 60 px en dessous de 640 px. */
    padding: 62px 18px 80px;
  }
  .tt-blog__tete {
    padding: 36px 0 30px;
  }
  .tt-blog__projecteur,
  .tt-blog__grille,
  .tt-blog-article__lies-grille {
    grid-template-columns: 1fr;
  }
  .tt-blog__panneau {
    padding: 12px;
    border-radius: 22px;
  }
  .tt-blog-article__cta {
    padding: 30px 22px;
  }
}

/* ⚠️ `hidden` doit gagner contre nos `display`.
   La règle du navigateur (`[hidden] { display: none }`) a la même force qu'une
   classe : dès qu'on donne un `display` à un élément, elle perd. Tous les
   éléments que le routeur ou les filtres masquent doivent donc le redire. */
.tt-blog__carte[hidden],
.tt-blog__grille[hidden],
.tt-blog__index[hidden],
.tt-blog__filtres[hidden],
.tt-blog__plus[hidden],
.tt-blog__recherche[hidden],
.tt-blog-article[hidden] {
  display: none;
}

/* ⚠️ LA 5e ENTRÉE DE MENU (« Blog ») NE TIENT PLUS SUR TABLETTE.
   Le menu, même recentré entre ses voisins, réclame 424 px : avec le logo et
   les deux boutons, la rangée déborde en dessous de 1024 px. C'est donc le
   hamburger qui reprend la main entre 768 et 1023 px — son panneau se
   construit à partir des mêmes liens, « Blog » y est aussi. */
@media (max-width: 1023px) {
  .tt-entete__rangee > nav[data-menu] {
    display: none;
  }
  .tt-entete__rangee > button {
    display: inline-flex;
  }
  /* La rangée est en `justify-between` : sans le menu au milieu, les deux
     boutons partaient se coller au logo. On les renvoie à droite, contre le
     hamburger. */
  .tt-entete__rangee > nav[data-menu] + div {
    margin-left: auto;
  }
}

/* =========================================================================
   L'APERÇU DU BLOG, EN BAS DE LA VITRINE
   =========================================================================
   Trois articles et un bouton, entre les avis et le bloc final. Ce n'est PAS
   un remplacement de l'entrée « Blog » du menu : le menu répond à celui qui
   vient CHERCHER le blog, l'aperçu le fait DÉCOUVRIR à celui qui descend la
   page sans rien cliquer.

   ⚠️ SA PLACE EST DONNÉE PAR `order`, comme toutes les sections de la page
   (voir « .tt-page est une colonne flexible » plus haut) : 33 le pose entre
   les avis (31) et le bloc final (35). Le déplacer = changer ce chiffre, pas
   le HTML. */
#blog-apercu {
  order: 33;
  /* Il est DANS le grand bloc clair du bas (#faq -> pied de page) : même fond,
     pas de bord, pas d'arrondi — sinon on verrait un raccord. */
  background: #f8f9fc;
  padding: 20px 24px 104px;
}
.tt-blog-apercu__cadre {
  max-width: 1160px;
  margin: 0 auto;
}
/* Le même en-tête centré que la FAQ, juste au-dessus. */
.tt-blog-apercu__entete {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.tt-blog-apercu__entete h2 {
  margin-top: 22px;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0a0f1e;
}
.tt-blog-apercu__entete p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #59617a;
}
.tt-blog-apercu__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tt-blog-apercu__pied {
  display: flex;
  justify-content: center;
  padding-top: 36px;
}
/* ⚠️ CE BOUTON EST `.tt-bouton`, celui des encarts clairs (« Commencer
   maintenant »). Il porte la classe, il n'y a donc RIEN à recopier ici : ni
   couleur, ni rayon, ni ombre. Il ne reste que la flèche et l'espacement —
   sinon on aurait deux définitions du même bouton qui divergeraient. */
.tt-blog-apercu__bouton {
  gap: 9px;
  /* `.tt-bouton` porte un `margin-top: 30px` pour les encarts ; ici c'est le
     pied de section qui donne la respiration. */
  margin-top: 0;
  text-decoration: none;
}
.tt-blog-apercu__bouton svg {
  width: 16px;
  height: 16px;
  transition: transform 0.28s var(--tt-souple);
}
.tt-blog-apercu__bouton:hover svg {
  transform: translateX(4px);
}
@media (max-width: 860px) {
  .tt-blog-apercu__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #blog-apercu {
    padding: 12px 18px 76px;
  }
  .tt-blog-apercu__grille {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   LA BARRE DE DÉFILEMENT DISPARAÎT.

   Demande de Ghilès (24/08) : « elle descend sur la page, elle remonte sur la
   page, elle a pas besoin de savoir où elle en est ». Sur une vitrine, la
   barre est un élément de logiciel posé sur une affiche : elle date la page.

   ⚠️ ON MASQUE, ON NE BLOQUE PAS. `scrollbar-width: none` et le pseudo-élément
   WebKit retirent le dessin, mais la page défile exactement comme avant — à la
   molette, au clavier, au pavé tactile, et le défilement reste accessible aux
   lecteurs d'écran. Il ne faut SURTOUT PAS remplacer ça par `overflow: hidden`,
   qui, lui, empêcherait de descendre.
   Deux déclarations parce qu'aucune n'est comprise partout : la première est le
   standard (Firefox et les Chromium récents), la seconde couvre WebKit. */
/* ⚠️ LE SÉLECTEUR VISE LA LANDING, PAS TOUT LE SITE. Ce fichier est importé
   par un composant, mais Next garde le CSS chargé après une navigation côté
   client : une règle posée sur `html` tout court suivrait l'utilisateur
   jusque dans le dashboard, où la barre de défilement est utile (longues
   listes de comptes). `:has(.tt-entete)` ne vaut donc que sur les pages qui
   portent la barre du haut de la vitrine. Si le navigateur ne connaît pas
   `:has`, la règle est ignorée et la barre reste — on ne casse rien. */
html:has(.tt-entete) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html:has(.tt-entete)::-webkit-scrollbar,
html:has(.tt-entete) body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* --- Le sélecteur de langue ---------------------------------------------
   Un menu déroulant, comme TrendTrack : un bouton, un panneau au clic. Le
   panneau s'ouvre VERS LE HAUT — le sélecteur vit en bas de page, vers le bas
   il sortirait de l'écran.

   ⚠️ LE BOUTON PORTE LES DEUX LANGUES, `html[lang]` AFFICHE LA BONNE. Le
   générateur produit un seul HTML pour les deux versions : toute substitution
   de texte à la construction serait un état de plus à maintenir, le CSS le
   fait sans une ligne de script.

   ⚠️ LE PIED EST CLAIR (`rgba(37, 45, 62, …)`) — leçon du 29/08 : jamais de
   couleur « par défaut », ce site a deux fonds opposés. */
.tt-langue {
  position: relative;
  display: inline-block;
}
.tt-langue__bouton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(37, 45, 62, 0.16);
  border-radius: 11px;
  background: #fff;
  color: #252d3e;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms;
}
.tt-langue__bouton:hover {
  border-color: rgba(37, 45, 62, 0.3);
  box-shadow: 0 2px 8px rgba(37, 45, 62, 0.08);
}
.tt-langue__actuelle {
  display: none;
  align-items: center;
  gap: 8px;
}
html[lang='fr'] .tt-langue__actuelle--fr { display: inline-flex; }
html[lang='en'] .tt-langue__actuelle--en { display: inline-flex; }
.tt-langue__chevron {
  width: 14px;
  height: 14px;
  color: rgba(37, 45, 62, 0.5);
  transition: transform 200ms;
}
.tt-langue--ouvert .tt-langue__chevron { transform: rotate(180deg); }
.tt-langue__panneau {
  position: absolute;
  /* Vers le BAS — demande de Ghilès. Il reste ~150 px de pied sous le bouton
     (mentions légales + marges), le panneau de deux lignes y tient. */
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  padding: 5px;
  border: 1px solid rgba(37, 45, 62, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 32px -8px rgba(37, 45, 62, 0.22);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms, transform 180ms;
  z-index: 20;
}
.tt-langue--ouvert .tt-langue__panneau {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tt-langue__lien {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(37, 45, 62, 0.7);
  text-decoration: none;
  white-space: nowrap;
}
.tt-langue__lien:hover {
  background: rgba(37, 45, 62, 0.05);
  color: #252d3e;
}
.tt-langue__lien[aria-current='true'] {
  color: #252d3e;
  font-weight: 600;
  background: rgba(37, 45, 62, 0.05);
}
.tt-langue__drapeau {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(37, 45, 62, 0.16);
}
/* Les réseaux et le sélecteur, empilés dans la colonne de gauche. */
.tt-pied__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.tt-menu__langue {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tt-menu__langue a {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.03);
}
.tt-menu__langue a[aria-current='true'] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
}


@property --shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.col-layout{position:relative}.col-layout:before,.col-layout:after{content:"";pointer-events:none;background:linear-gradient(#0000 0%,#ffffff12 8% 92%,#0000 100%);width:1px;position:absolute;top:0;bottom:0}.col-layout:before{left:196px}.col-layout:after{right:196px}@media (width<=1024px){.col-layout:before{left:40px}}@media (width<=1024px){.col-layout:after{right:40px}}@media (width<=640px){.col-layout:before,.col-layout:after{display:none}}.shimmer-btn-wrap--hero{background:conic-gradient(from var(--shimmer-angle), transparent 0%, transparent 38%, #ffffff40 44%, #ffffffd9 50%, #ffffff40 56%, transparent 62%, transparent 100%);overflow:visible;box-shadow:0 4px 20px #00000040}.shimmer-btn-wrap--hero:hover{transform:translateY(-2px)scale(1.01);box-shadow:0 8px 28px #0000004d}.shimmer-btn-wrap--hero:active{transform:translateY(0)scale(.99)}.shimmer-btn-inner--hero{box-shadow:none;color:#06060f;z-index:1;background:#fff;position:relative}.shimmer-btn-wrap--hero:hover .shimmer-btn-inner--hero{background:#f4f4f4}.shimmer-btn-wrap--hero:active .shimmer-btn-inner--hero{background:#e8e8e8}