*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.pointer-events-none {
  pointer-events: none;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.-bottom-3 {
  bottom: -0.75rem;
}
.-bottom-6 {
  bottom: -1.5rem;
}
.-bottom-\[1100px\] {
  bottom: -1100px;
}
.-bottom-\[40px\] {
  bottom: -40px;
}
.-left-\[140px\] {
  left: -140px;
}
.-left-\[45px\] {
  left: -45px;
}
.-right-20 {
  right: -5rem;
}
.-right-40 {
  right: -10rem;
}
.-right-\[128px\] {
  right: -128px;
}
.-right-\[22\%\] {
  right: -22%;
}
.-right-\[45px\] {
  right: -45px;
}
.-top-\[120\%\] {
  top: -120%;
}
.-top-\[50\%\] {
  top: -50%;
}
.-top-\[76\%\] {
  top: -76%;
}
.-top-\[800px\] {
  top: -800px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-\[21\%\] {
  bottom: 21%;
}
.bottom-\[28\%\] {
  bottom: 28%;
}
.bottom-\[30\%\] {
  bottom: 30%;
}
.left-0 {
  left: 0px;
}
.left-\[114\%\] {
  left: 114%;
}
.left-\[48\.3\%\] {
  left: 48.3%;
}
.left-\[50\%\] {
  left: 50%;
}
.left-full {
  left: 100%;
}
.right-0 {
  right: 0px;
}
.right-8 {
  right: 2rem;
}
.right-\[28px\] {
  right: 28px;
}
.top-0 {
  top: 0px;
}
.top-5 {
  top: 1.25rem;
}
.top-52 {
  top: 13rem;
}
.top-8 {
  top: 2rem;
}
.top-\[100px\] {
  top: 100px;
}
.top-\[130px\] {
  top: 130px;
}
.top-\[15\%\] {
  top: 15%;
}
.top-\[175px\] {
  top: 175px;
}
.top-\[22px\] {
  top: 22px;
}
.top-\[28\%\] {
  top: 28%;
}
.top-\[30\%\] {
  top: 30%;
}
.top-\[35\%\] {
  top: 35%;
}
.top-\[41\%\] {
  top: 41%;
}
.top-\[47\%\] {
  top: 47%;
}
.top-\[5\%\] {
  top: 5%;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[50px\] {
  top: 50px;
}
.top-\[65px\] {
  top: 65px;
}
.top-\[70px\] {
  top: 70px;
}
.top-\[78px\] {
  top: 78px;
}
.top-\[82\%\] {
  top: 82%;
}
.top-\[88px\] {
  top: 88px;
}
.top-\[90px\] {
  top: 90px;
}
.top-full {
  top: 100%;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
.m-auto {
  margin: auto;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-\[3\.83px\] {
  margin-left: 3.83px;
  margin-right: 3.83px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-\[120px\] {
  margin-top: 120px;
  margin-bottom: 120px;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-\[107px\] {
  margin-bottom: 107px;
}
.mb-\[17px\] {
  margin-bottom: 17px;
}
.mb-\[3px\] {
  margin-bottom: 3px;
}
.mb-\[50px\] {
  margin-bottom: 50px;
}
.mb-\[5px\] {
  margin-bottom: 5px;
}
.mb-\[60px\] {
  margin-bottom: 60px;
}
.mb-\[88px\] {
  margin-bottom: 88px;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-36 {
  margin-top: 9rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-\[104px\] {
  margin-top: 104px;
}
.mt-\[19px\] {
  margin-top: 19px;
}
.mt-\[20px\] {
  margin-top: 20px;
}
.mt-\[2px\] {
  margin-top: 2px;
}
.mt-\[60px\] {
  margin-top: 60px;
}
.mt-\[80px\] {
  margin-top: 80px;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[7\/5\] {
  aspect-ratio: 7/5;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-12 {
  height: 3rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-\[10px\] {
  height: 10px;
}
.h-\[150px\] {
  height: 150px;
}
.h-\[245px\] {
  height: 245px;
}
.h-\[28px\] {
  height: 28px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[42px\] {
  height: 42px;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-5 {
  max-height: 1.25rem;
}
.max-h-6 {
  max-height: 1.5rem;
}
.max-h-\[1300px\] {
  max-height: 1300px;
}
.max-h-\[151px\] {
  max-height: 151px;
}
.max-h-\[209px\] {
  max-height: 209px;
}
.max-h-\[252px\] {
  max-height: 252px;
}
.max-h-\[333px\] {
  max-height: 333px;
}
.max-h-\[33px\] {
  max-height: 33px;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-5 {
  min-height: 1.25rem;
}
.min-h-\[252px\] {
  min-height: 252px;
}
.min-h-\[333px\] {
  min-height: 333px;
}
.min-h-\[350px\] {
  min-height: 350px;
}
.min-h-\[411px\] {
  min-height: 411px;
}
.min-h-\[776px\] {
  min-height: 776px;
}
.min-h-full {
  min-height: 100%;
}
.w-12 {
  width: 3rem;
}
.w-2 {
  width: 0.5rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-6 {
  width: 1.5rem;
}
.w-\[10px\] {
  width: 10px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[28px\] {
  width: 28px;
}
.w-\[316px\] {
  width: 316px;
}
.w-\[328px\] {
  width: 328px;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[42px\] {
  width: 42px;
}
.w-\[6px\] {
  width: 6px;
}
.w-\[702px\] {
  width: 702px;
}
.w-\[92\%\] {
  width: 92%;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-screen {
  width: 100vw;
}
.min-w-7 {
  min-width: 1.75rem;
}
.min-w-72 {
  min-width: 18rem;
}
.min-w-\[131px\] {
  min-width: 131px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[154px\] {
  min-width: 154px;
}
.min-w-\[204px\] {
  min-width: 204px;
}
.min-w-\[252px\] {
  min-width: 252px;
}
.min-w-\[272px\] {
  min-width: 272px;
}
.min-w-\[352px\] {
  min-width: 352px;
}
.min-w-\[365px\] {
  min-width: 365px;
}
.min-w-\[420px\] {
  min-width: 420px;
}
.min-w-\[430px\] {
  min-width: 430px;
}
.min-w-\[480px\] {
  min-width: 480px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-56 {
  max-width: 14rem;
}
.max-w-7 {
  max-width: 1.75rem;
}
.max-w-\[1216px\] {
  max-width: 1216px;
}
.max-w-\[1300px\] {
  max-width: 1300px;
}
.max-w-\[1308px\] {
  max-width: 1308px;
}
.max-w-\[131px\] {
  max-width: 131px;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[154px\] {
  max-width: 154px;
}
.max-w-\[155px\] {
  max-width: 155px;
}
.max-w-\[1596px\] {
  max-width: 1596px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[168px\] {
  max-width: 168px;
}
.max-w-\[1892px\] {
  max-width: 1892px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[204px\] {
  max-width: 204px;
}
.max-w-\[250px\] {
  max-width: 250px;
}
.max-w-\[252px\] {
  max-width: 252px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[264px\] {
  max-width: 264px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[290px\] {
  max-width: 290px;
}
.max-w-\[327px\] {
  max-width: 327px;
}
.max-w-\[328px\] {
  max-width: 328px;
}
.max-w-\[33px\] {
  max-width: 33px;
}
.max-w-\[352px\] {
  max-width: 352px;
}
.max-w-\[365px\] {
  max-width: 365px;
}
.max-w-\[380px\] {
  max-width: 380px;
}
.max-w-\[400px\] {
  max-width: 400px;
}
.max-w-\[409px\] {
  max-width: 409px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[430px\] {
  max-width: 430px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[50px\] {
  max-width: 50px;
}
.max-w-\[75rem\] {
  max-width: 75rem;
}
.max-w-\[773px\] {
  max-width: 773px;
}
.max-w-full {
  max-width: 100%;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/4 {
  --tw-translate-x: 25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[40\%\] {
  --tw-translate-x: 40%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/4 {
  --tw-translate-y: 25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[200\%\] {
  --tw-scale-x: 200%;
  --tw-scale-y: 200%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-scale-x-100 {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-20 {
  gap: 5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[10px\] {
  gap: 10px;
}
.gap-\[120px\] {
  gap: 120px;
}
.gap-\[160px\] {
  gap: 160px;
}
.gap-\[17px\] {
  gap: 17px;
}
.gap-\[200px\] {
  gap: 200px;
}
.gap-\[22px\] {
  gap: 22px;
}
.gap-\[269px\] {
  gap: 269px;
}
.gap-\[27px\] {
  gap: 27px;
}
.gap-\[30px\] {
  gap: 30px;
}
.gap-\[70px\] {
  gap: 70px;
}
.gap-\[7px\] {
  gap: 7px;
}
.gap-\[84px\] {
  gap: 84px;
}
.space-x-\[30px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(30px * var(--tw-space-x-reverse));
  margin-left: calc(30px * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-end {
  align-self: flex-end;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.text-nowrap {
  text-wrap: nowrap;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[32px\] {
  border-radius: 32px;
}
.rounded-\[74px\] {
  border-radius: 74px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-\[\#171717\] {
  --tw-border-opacity: 1;
  border-color: rgb(23 23 23 / var(--tw-border-opacity, 1));
}
.border-\[\#1F1F1F\] {
  --tw-border-opacity: 1;
  border-color: rgb(31 31 31 / var(--tw-border-opacity, 1));
}
.border-\[\#262626\] {
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
}
.border-\[\#424242\] {
  --tw-border-opacity: 1;
  border-color: rgb(66 66 66 / var(--tw-border-opacity, 1));
}
.border-\[\#ffffff0d\] {
  border-color: #ffffff0d;
}
.border-neutral-gray-100\/10 {
  border-color: rgb(230 230 230 / 0.1);
}
.border-neutral-gray-100\/20 {
  border-color: rgb(230 230 230 / 0.2);
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/5 {
  border-color: rgb(255 255 255 / 0.05);
}
.bg-\[\#05090C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(5 9 12 / var(--tw-bg-opacity, 1));
}
.bg-\[\#171717\] {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.bg-\[\#262626\]\/20 {
  background-color: rgb(38 38 38 / 0.2);
}
.bg-\[\#262626\]\/85 {
  background-color: rgb(38 38 38 / 0.85);
}
.bg-\[180deg\] {
  background-color: 180deg;
}
.bg-\[90deg\] {
  background-color: 90deg;
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-neutral-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity, 1));
}
.bg-neutral-gray-1000 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1));
}
.bg-neutral-gray-1000\/40 {
  background-color: rgb(5 5 5 / 0.4);
}
.bg-neutral-gray-1000\/50 {
  background-color: rgb(5 5 5 / 0.5);
}
.bg-neutral-gray-1000\/95 {
  background-color: rgb(5 5 5 / 0.95);
}
.bg-neutral-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
}
.bg-neutral-gray-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#05090C\] {
  --tw-gradient-from: #05090C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 9 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#1717171A\] {
  --tw-gradient-from: #1717171A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#171717\]\/80 {
  --tw-gradient-from: rgb(23 23 23 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-neutral-gray-1000 {
  --tw-gradient-from: #050505 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 5 5 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[-26\.18\%\] {
  --tw-gradient-from-position: -26.18%;
}
.via-neutral-gray-300 {
  --tw-gradient-to: rgb(168 168 168 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #A8A8A8 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-neutral-gray-1000 {
  --tw-gradient-to: #050505 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.to-\[59\.52\%\] {
  --tw-gradient-to-position: 59.52%;
}
.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.stroke-\[\#585858\] {
  stroke: #585858;
}
.stroke-neutral-gray-100\/80 {
  stroke: rgb(230 230 230 / 0.8);
}
.stroke-neutral-gray-300 {
  stroke: #A8A8A8;
}
.stroke-white {
  stroke: #fff;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-center {
  -o-object-position: center;
     object-position: center;
}
.p-10 {
  padding: 2.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-8 {
  padding: 2rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[30px\] {
  padding-left: 30px;
  padding-right: 30px;
}
.px-\[34px\] {
  padding-left: 34px;
  padding-right: 34px;
}
.px-\[35px\] {
  padding-left: 35px;
  padding-right: 35px;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-28 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-\[13px\] {
  padding-top: 13px;
  padding-bottom: 13px;
}
.py-\[140px\] {
  padding-top: 140px;
  padding-bottom: 140px;
}
.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-\[38\.5px\] {
  padding-top: 38.5px;
  padding-bottom: 38.5px;
}
.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}
.pb-\[120px\] {
  padding-bottom: 120px;
}
.pl-\[10px\] {
  padding-left: 10px;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-\[27px\] {
  padding-top: 27px;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.font-franklin {
  font-family: Libre Franklin;
}
.font-grotesk {
  font-family: Space Grotesk;
}
.font-inter {
  font-family: Inter;
}
.font-jakarta {
  font-family: Plus Jakarta Sans;
}
.font-orbitron {
  font-family: Orbitron;
}
.font-work {
  font-family: Work Sans;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[102px\] {
  font-size: 102px;
}
.text-\[109px\] {
  font-size: 109px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[2\.5rem\] {
  font-size: 2.5rem;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[332px\] {
  font-size: 332px;
}
.text-\[33px\] {
  font-size: 33px;
}
.text-\[40px\] {
  font-size: 40px;
}
.text-\[60px\] {
  font-size: 60px;
}
.text-\[76px\] {
  font-size: 76px;
}
.text-\[78px\] {
  font-size: 78px;
}
.text-\[81px\] {
  font-size: 81px;
}
.text-\[82px\] {
  font-size: 82px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-10 {
  line-height: 2.5rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-9 {
  line-height: 2.25rem;
}
.leading-\[100\%\] {
  line-height: 100%;
}
.leading-\[116\%\] {
  line-height: 116%;
}
.leading-\[120\%\] {
  line-height: 120%;
}
.leading-\[127\%\] {
  line-height: 127%;
}
.leading-\[133\%\] {
  line-height: 133%;
}
.leading-\[137\%\] {
  line-height: 137%;
}
.leading-\[140\%\] {
  line-height: 140%;
}
.leading-\[150\%\] {
  line-height: 150%;
}
.leading-\[160\%\] {
  line-height: 160%;
}
.leading-\[161\%\] {
  line-height: 161%;
}
.leading-\[170\%\] {
  line-height: 170%;
}
.leading-\[171\%\] {
  line-height: 171%;
}
.leading-\[19px\] {
  line-height: 19px;
}
.leading-\[21px\] {
  line-height: 21px;
}
.leading-\[22px\] {
  line-height: 22px;
}
.leading-\[27px\] {
  line-height: 27px;
}
.leading-\[30px\] {
  line-height: 30px;
}
.leading-\[40px\] {
  line-height: 40px;
}
.leading-\[60px\] {
  line-height: 60px;
}
.leading-\[70\%\] {
  line-height: 70%;
}
.leading-\[80\%\] {
  line-height: 80%;
}
.leading-\[82\%\] {
  line-height: 82%;
}
.leading-\[86\%\] {
  line-height: 86%;
}
.leading-normal {
  line-height: 1.5;
}
.-tracking-\[0\.5px\] {
  letter-spacing: -0.5px;
}
.-tracking-\[0\.96px\] {
  letter-spacing: -0.96px;
}
.-tracking-\[1\.2px\] {
  letter-spacing: -1.2px;
}
.-tracking-\[1\.8px\] {
  letter-spacing: -1.8px;
}
.-tracking-\[3px\] {
  letter-spacing: -3px;
}
.-tracking-\[4\.14px\] {
  letter-spacing: -4.14px;
}
.-tracking-\[4\.1px\] {
  letter-spacing: -4.1px;
}
.-tracking-\[5\.4px\] {
  letter-spacing: -5.4px;
}
.-tracking-\[5px\] {
  letter-spacing: -5px;
}
.tracking-\[0\.15px\] {
  letter-spacing: 0.15px;
}
.tracking-\[0\.298px\] {
  letter-spacing: 0.298px;
}
.tracking-\[0\.2px\] {
  letter-spacing: 0.2px;
}
.tracking-\[0\.4px\] {
  letter-spacing: 0.4px;
}
.tracking-\[0\.54px\] {
  letter-spacing: 0.54px;
}
.tracking-\[0\.5px\] {
  letter-spacing: 0.5px;
}
.tracking-\[2px\] {
  letter-spacing: 2px;
}
.tracking-\[4px\] {
  letter-spacing: 4px;
}
.tracking-normal {
  letter-spacing: 0em;
}
.text-\[\#16A34A\] {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-\[\#808080\] {
  --tw-text-opacity: 1;
  color: rgb(128 128 128 / var(--tw-text-opacity, 1));
}
.text-\[\#8C8C8C\] {
  --tw-text-opacity: 1;
  color: rgb(140 140 140 / var(--tw-text-opacity, 1));
}
.text-\[\#9AA0A6\] {
  --tw-text-opacity: 1;
  color: rgb(154 160 166 / var(--tw-text-opacity, 1));
}
.text-\[\#DDD6FE\] {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}
.text-\[\#E6E6E6\] {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity, 1));
}
.text-\[\#EFEDFD\] {
  --tw-text-opacity: 1;
  color: rgb(239 237 253 / var(--tw-text-opacity, 1));
}
.text-\[\#EFEDFD\]\/60 {
  color: rgb(239 237 253 / 0.6);
}
.text-\[\#FFFFFF\] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-100\/60 {
  color: rgb(230 230 230 / 0.6);
}
.text-neutral-gray-100\/80 {
  color: rgb(230 230 230 / 0.8);
}
.text-neutral-gray-1000 {
  --tw-text-opacity: 1;
  color: rgb(5 5 5 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(204 204 204 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(168 168 168 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-300\/50 {
  color: rgb(168 168 168 / 0.5);
}
.text-neutral-gray-300\/60 {
  color: rgb(168 168 168 / 0.6);
}
.text-neutral-gray-300\/80 {
  color: rgb(168 168 168 / 0.8);
}
.text-neutral-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(128 128 128 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(69 69 69 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-65 {
  opacity: 0.65;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-neutral-900\/20 {
  --tw-shadow-color: rgb(23 23 23 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline {
  outline-style: solid;
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-\[8px\] {
  --tw-backdrop-blur: blur(8px);
  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-lg {
  --tw-backdrop-blur: blur(16px);
  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-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:bg-\[\#262626\]\/30:hover {
  background-color: rgb(38 38 38 / 0.3);
}
.hover\:bg-\[\#3a3a3a\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 58 / var(--tw-bg-opacity, 1));
}
.hover\:text-neutral-gray-100:hover {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity, 1));
}
.group\/menu:hover .group-hover\/menu\:flex {
  display: flex;
}
.group\/submenu:hover .group-hover\/submenu\:flex {
  display: flex;
}
.group\/menu:hover .group-hover\/menu\:stroke-neutral-gray-100 {
  stroke: #E6E6E6;
}
.group\/submenu:hover .group-hover\/submenu\:stroke-neutral-gray-100 {
  stroke: #E6E6E6;
}
.group\/menu:hover .group-hover\/menu\:text-neutral-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity, 1));
}
.group\/submenu:hover .group-hover\/submenu\:text-neutral-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(230 230 230 / var(--tw-text-opacity, 1));
}
@media (min-width: 480px) {

  .sm\:-right-\[35\%\] {
    right: -35%;
  }

  .sm\:-top-\[74\%\] {
    top: -74%;
  }

  .sm\:top-\[40\%\] {
    top: 40%;
  }

  .sm\:-mt-5 {
    margin-top: -1.25rem;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:max-h-\[200px\] {
    max-height: 200px;
  }

  .sm\:w-2 {
    width: 0.5rem;
  }

  .sm\:min-w-\[350px\] {
    min-width: 350px;
  }

  .sm\:min-w-\[450px\] {
    min-width: 450px;
  }

  .sm\:min-w-\[460px\] {
    min-width: 460px;
  }

  .sm\:min-w-\[520px\] {
    min-width: 520px;
  }

  .sm\:min-w-\[580px\] {
    min-width: 580px;
  }

  .sm\:max-w-\[180px\] {
    max-width: 180px;
  }

  .sm\:max-w-\[280px\] {
    max-width: 280px;
  }

  .sm\:max-w-\[300px\] {
    max-width: 300px;
  }

  .sm\:max-w-\[360px\] {
    max-width: 360px;
  }

  .sm\:max-w-\[400px\] {
    max-width: 400px;
  }

  .sm\:max-w-\[420px\] {
    max-width: 420px;
  }

  .sm\:max-w-\[450px\] {
    max-width: 450px;
  }

  .sm\:max-w-\[460px\] {
    max-width: 460px;
  }

  .sm\:max-w-\[520px\] {
    max-width: 520px;
  }

  .sm\:max-w-\[580px\] {
    max-width: 580px;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }

  .sm\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }

  .sm\:text-\[10px\] {
    font-size: 10px;
  }

  .sm\:text-\[72px\] {
    font-size: 72px;
  }

  .sm\:text-\[85px\] {
    font-size: 85px;
  }

  .sm\:text-\[86px\] {
    font-size: 86px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
@media (min-width: 768px) {

  .md\:-right-\[51\%\] {
    right: -51%;
  }

  .md\:-top-\[48\%\] {
    top: -48%;
  }

  .md\:-top-\[5\%\] {
    top: -5%;
  }

  .md\:-top-\[80\%\] {
    top: -80%;
  }

  .md\:bottom-0 {
    bottom: 0px;
  }

  .md\:bottom-\[18\%\] {
    bottom: 18%;
  }

  .md\:bottom-\[28\%\] {
    bottom: 28%;
  }

  .md\:top-\[10\%\] {
    top: 10%;
  }

  .md\:top-\[24\%\] {
    top: 24%;
  }

  .md\:top-\[39\%\] {
    top: 39%;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:-mt-20 {
    margin-top: -5rem;
  }

  .md\:-mt-8 {
    margin-top: -2rem;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .md\:mb-\[63px\] {
    margin-bottom: 63px;
  }

  .md\:mt-64 {
    margin-top: 16rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-14 {
    height: 3.5rem;
  }

  .md\:max-h-\[255px\] {
    max-height: 255px;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:min-w-\[200px\] {
    min-width: 200px;
  }

  .md\:min-w-\[250px\] {
    min-width: 250px;
  }

  .md\:min-w-\[650px\] {
    min-width: 650px;
  }

  .md\:min-w-\[770px\] {
    min-width: 770px;
  }

  .md\:max-w-3xl {
    max-width: 48rem;
  }

  .md\:max-w-\[200px\] {
    max-width: 200px;
  }

  .md\:max-w-\[210px\] {
    max-width: 210px;
  }

  .md\:max-w-\[350px\] {
    max-width: 350px;
  }

  .md\:max-w-\[500px\] {
    max-width: 500px;
  }

  .md\:max-w-\[550px\] {
    max-width: 550px;
  }

  .md\:max-w-\[560px\] {
    max-width: 560px;
  }

  .md\:max-w-\[600px\] {
    max-width: 600px;
  }

  .md\:max-w-\[650px\] {
    max-width: 650px;
  }

  .md\:max-w-\[700px\] {
    max-width: 700px;
  }

  .md\:max-w-\[770px\] {
    max-width: 770px;
  }

  .md\:max-w-\[796px\] {
    max-width: 796px;
  }

  .md\:max-w-full {
    max-width: 100%;
  }

  .md\:translate-y-1\/2 {
    --tw-translate-y: 50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:gap-20 {
    gap: 5rem;
  }

  .md\:gap-24 {
    gap: 6rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-5 {
    gap: 1.25rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:p-14 {
    padding: 3.5rem;
  }

  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:py-\[120px\] {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .md\:pt-24 {
    padding-top: 6rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }

  .md\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }

  .md\:text-\[180px\] {
    font-size: 180px;
  }

  .md\:text-\[200px\] {
    font-size: 200px;
  }

  .md\:text-\[40px\] {
    font-size: 40px;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .md\:leading-7 {
    line-height: 1.75rem;
  }

  .md\:leading-\[30px\] {
    line-height: 30px;
  }
}
@media (min-width: 1024px) {

  .lg\:-bottom-\[150px\] {
    bottom: -150px;
  }

  .lg\:-right-\[40\%\] {
    right: -40%;
  }

  .lg\:-top-\[52\%\] {
    top: -52%;
  }

  .lg\:-top-\[65\%\] {
    top: -65%;
  }

  .lg\:bottom-\[28\%\] {
    bottom: 28%;
  }

  .lg\:right-\[10\.5\%\] {
    right: 10.5%;
  }

  .lg\:right-\[22px\] {
    right: 22px;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:top-\[29\%\] {
    top: 29%;
  }

  .lg\:my-\[160px\] {
    margin-top: 160px;
    margin-bottom: 160px;
  }

  .lg\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .lg\:mb-24 {
    margin-bottom: 6rem;
  }

  .lg\:mb-4 {
    margin-bottom: 1rem;
  }

  .lg\:mb-8 {
    margin-bottom: 2rem;
  }

  .lg\:mb-\[20px\] {
    margin-bottom: 20px;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-2 {
    margin-top: 0.5rem;
  }

  .lg\:mt-40 {
    margin-top: 10rem;
  }

  .lg\:mt-48 {
    margin-top: 12rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:mt-7 {
    margin-top: 1.75rem;
  }

  .lg\:mt-\[296px\] {
    margin-top: 296px;
  }

  .lg\:mt-\[72px\] {
    margin-top: 72px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-\[274px\] {
    height: 274px;
  }

  .lg\:h-\[77px\] {
    height: 77px;
  }

  .lg\:max-h-8 {
    max-height: 2rem;
  }

  .lg\:max-h-\[305px\] {
    max-height: 305px;
  }

  .lg\:w-\[1066px\] {
    width: 1066px;
  }

  .lg\:w-\[418px\] {
    width: 418px;
  }

  .lg\:w-\[450px\] {
    width: 450px;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:min-w-\[233px\] {
    min-width: 233px;
  }

  .lg\:min-w-\[510px\] {
    min-width: 510px;
  }

  .lg\:min-w-\[900px\] {
    min-width: 900px;
  }

  .lg\:min-w-full {
    min-width: 100%;
  }

  .lg\:max-w-\[1096px\] {
    max-width: 1096px;
  }

  .lg\:max-w-\[1137px\] {
    max-width: 1137px;
  }

  .lg\:max-w-\[233px\] {
    max-width: 233px;
  }

  .lg\:max-w-\[280px\] {
    max-width: 280px;
  }

  .lg\:max-w-\[594px\] {
    max-width: 594px;
  }

  .lg\:max-w-\[600px\] {
    max-width: 600px;
  }

  .lg\:max-w-\[850px\] {
    max-width: 850px;
  }

  .lg\:max-w-\[900px\] {
    max-width: 900px;
  }

  .lg\:translate-x-\[60\%\] {
    --tw-translate-x: 60%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-32 {
    gap: 8rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-\[120px\] {
    gap: 120px;
  }

  .lg\:gap-\[21px\] {
    gap: 21px;
  }

  .lg\:gap-\[331px\] {
    gap: 331px;
  }

  .lg\:gap-\[50px\] {
    gap: 50px;
  }

  .lg\:gap-\[70px\] {
    gap: 70px;
  }

  .lg\:space-x-\[70px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(70px * var(--tw-space-x-reverse));
    margin-left: calc(70px * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-9 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
  }

  .lg\:rounded-\[20px\] {
    border-radius: 20px;
  }

  .lg\:rounded-\[64px\] {
    border-radius: 64px;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-16 {
    padding: 4rem;
  }

  .lg\:p-\[50px\] {
    padding: 50px;
  }

  .lg\:px-\[10vw\] {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .lg\:px-\[172px\] {
    padding-left: 172px;
    padding-right: 172px;
  }

  .lg\:px-\[80px\] {
    padding-left: 80px;
    padding-right: 80px;
  }

  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .lg\:py-\[331px\] {
    padding-top: 331px;
    padding-bottom: 331px;
  }

  .lg\:text-start {
    text-align: start;
  }

  .lg\:text-end {
    text-align: end;
  }

  .lg\:font-jakarta {
    font-family: Plus Jakarta Sans;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }

  .lg\:text-\[112px\] {
    font-size: 112px;
  }

  .lg\:text-\[15px\] {
    font-size: 15px;
  }

  .lg\:text-\[28\.28px\] {
    font-size: 28.28px;
  }

  .lg\:text-\[40px\] {
    font-size: 40px;
  }

  .lg\:text-\[51px\] {
    font-size: 51px;
  }

  .lg\:text-\[55px\] {
    font-size: 55px;
  }

  .lg\:text-\[60px\] {
    font-size: 60px;
  }

  .lg\:text-\[64px\] {
    font-size: 64px;
  }

  .lg\:text-\[72px\] {
    font-size: 72px;
  }

  .lg\:text-\[88px\] {
    font-size: 88px;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .lg\:font-light {
    font-weight: 300;
  }

  .lg\:leading-\[112px\] {
    line-height: 112px;
  }

  .lg\:leading-\[120\%\] {
    line-height: 120%;
  }

  .lg\:leading-\[150\%\] {
    line-height: 150%;
  }

  .lg\:leading-\[27px\] {
    line-height: 27px;
  }

  .lg\:leading-\[30px\] {
    line-height: 30px;
  }

  .lg\:leading-\[33px\] {
    line-height: 33px;
  }

  .lg\:leading-\[72px\] {
    line-height: 72px;
  }

  .lg\:leading-\[86px\] {
    line-height: 86px;
  }

  .lg\:leading-\[92px\] {
    line-height: 92px;
  }

  .lg\:leading-\[96px\] {
    line-height: 96px;
  }

  .lg\:leading-none {
    line-height: 1;
  }

  .lg\:-tracking-\[16\.6px\] {
    letter-spacing: -16.6px;
  }

  .lg\:-tracking-\[9\.2px\] {
    letter-spacing: -9.2px;
  }

  .lg\:tracking-normal {
    letter-spacing: 0em;
  }
}
@media (min-width: 1280px) {

  .xl\:-bottom-4 {
    bottom: -1rem;
  }

  .xl\:-top-\[65\%\] {
    top: -65%;
  }

  .xl\:bottom-\[29\%\] {
    bottom: 29%;
  }

  .xl\:bottom-\[30\%\] {
    bottom: 30%;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:max-h-\[330px\] {
    max-height: 330px;
  }

  .xl\:min-w-\[1216px\] {
    min-width: 1216px;
  }

  .xl\:min-w-\[350px\] {
    min-width: 350px;
  }

  .xl\:max-w-\[1596px\] {
    max-width: 1596px;
  }

  .xl\:max-w-\[340px\] {
    max-width: 340px;
  }

  .xl\:max-w-\[350px\] {
    max-width: 350px;
  }

  .xl\:max-w-\[650px\] {
    max-width: 650px;
  }

  .xl\:max-w-\[950px\] {
    max-width: 950px;
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:gap-\[169px\] {
    gap: 169px;
  }

  .xl\:gap-\[270px\] {
    gap: 270px;
  }

  .xl\:rounded-\[64px\] {
    border-radius: 64px;
  }

  .xl\:p-24 {
    padding: 6rem;
  }

  .xl\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .xl\:px-36 {
    padding-left: 9rem;
    padding-right: 9rem;
  }

  .xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xl\:px-\[160px\] {
    padding-left: 160px;
    padding-right: 160px;
  }

  .xl\:px-\[352px\] {
    padding-left: 352px;
    padding-right: 352px;
  }

  .xl\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .xl\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .xl\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .xl\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .xl\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }

  .xl\:text-\[44px\] {
    font-size: 44px;
  }

  .xl\:text-\[70px\] {
    font-size: 70px;
  }

  .xl\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .xl\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .xl\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .xl\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
@media (min-width: 1920px) {

  .\32xl\:-right-\[155\%\] {
    right: -155%;
  }

  .\32xl\:-top-\[42\%\] {
    top: -42%;
  }

  .\32xl\:-top-\[56\%\] {
    top: -56%;
  }

  .\32xl\:top-\[18\%\] {
    top: 18%;
  }

  .\32xl\:top-\[22\.5\%\] {
    top: 22.5%;
  }

  .\32xl\:top-\[27\.5\%\] {
    top: 27.5%;
  }

  .\32xl\:top-\[30\%\] {
    top: 30%;
  }

  .\32xl\:top-\[36\%\] {
    top: 36%;
  }

  .\32xl\:top-\[65px\] {
    top: 65px;
  }

  .\32xl\:top-\[75px\] {
    top: 75px;
  }

  .\32xl\:top-\[8\%\] {
    top: 8%;
  }

  .\32xl\:top-\[85px\] {
    top: 85px;
  }

  .\32xl\:top-\[90px\] {
    top: 90px;
  }

  .\32xl\:top-\[95px\] {
    top: 95px;
  }

  .\32xl\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .\32xl\:-mt-12 {
    margin-top: -3rem;
  }

  .\32xl\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .\32xl\:mb-8 {
    margin-bottom: 2rem;
  }

  .\32xl\:mb-\[128px\] {
    margin-bottom: 128px;
  }

  .\32xl\:mb-\[200px\] {
    margin-bottom: 200px;
  }

  .\32xl\:mt-14 {
    margin-top: 3.5rem;
  }

  .\32xl\:max-h-\[356px\] {
    max-height: 356px;
  }

  .\32xl\:max-h-\[385px\] {
    max-height: 385px;
  }

  .\32xl\:min-h-\[385px\] {
    min-height: 385px;
  }

  .\32xl\:min-w-\[1230px\] {
    min-width: 1230px;
  }

  .\32xl\:min-w-\[1303px\] {
    min-width: 1303px;
  }

  .\32xl\:min-w-\[385px\] {
    min-width: 385px;
  }

  .\32xl\:max-w-\[1100px\] {
    max-width: 1100px;
  }

  .\32xl\:max-w-\[1219px\] {
    max-width: 1219px;
  }

  .\32xl\:max-w-\[1230px\] {
    max-width: 1230px;
  }

  .\32xl\:max-w-\[1303px\] {
    max-width: 1303px;
  }

  .\32xl\:max-w-\[1350px\] {
    max-width: 1350px;
  }

  .\32xl\:max-w-\[385px\] {
    max-width: 385px;
  }

  .\32xl\:max-w-\[396px\] {
    max-width: 396px;
  }

  .\32xl\:max-w-\[612px\] {
    max-width: 612px;
  }

  .\32xl\:gap-32 {
    gap: 8rem;
  }

  .\32xl\:gap-8 {
    gap: 2rem;
  }

  .\32xl\:gap-\[120px\] {
    gap: 120px;
  }

  .\32xl\:gap-\[156px\] {
    gap: 156px;
  }

  .\32xl\:gap-\[576px\] {
    gap: 576px;
  }

  .\32xl\:p-\[120px\] {
    padding: 120px;
  }

  .\32xl\:p-\[130px\] {
    padding: 130px;
  }

  .\32xl\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .\32xl\:px-\[235px\] {
    padding-left: 235px;
    padding-right: 235px;
  }

  .\32xl\:px-\[352px\] {
    padding-left: 352px;
    padding-right: 352px;
  }

  .\32xl\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .\32xl\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .\32xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .\32xl\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .\32xl\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }

  .\32xl\:text-\[112px\] {
    font-size: 112px;
  }

  .\32xl\:text-\[17px\] {
    font-size: 17px;
  }

  .\32xl\:text-\[180px\] {
    font-size: 180px;
  }

  .\32xl\:text-\[20px\] {
    font-size: 20px;
  }

  .\32xl\:text-\[264px\] {
    font-size: 264px;
  }

  .\32xl\:text-\[26px\] {
    font-size: 26px;
  }

  .\32xl\:text-\[28px\] {
    font-size: 28px;
  }

  .\32xl\:text-\[302px\] {
    font-size: 302px;
  }

  .\32xl\:text-\[32px\] {
    font-size: 32px;
  }

  .\32xl\:text-\[332px\] {
    font-size: 332px;
  }

  .\32xl\:text-\[372px\] {
    font-size: 372px;
  }

  .\32xl\:text-\[40px\] {
    font-size: 40px;
  }

  .\32xl\:text-\[44px\] {
    font-size: 44px;
  }

  .\32xl\:text-\[64px\] {
    font-size: 64px;
  }

  .\32xl\:text-\[88px\] {
    font-size: 88px;
  }

  .\32xl\:text-\[90px\] {
    font-size: 90px;
  }

  .\32xl\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .\32xl\:leading-\[150\%\] {
    line-height: 150%;
  }

  .\32xl\:-tracking-\[13\.2px\] {
    letter-spacing: -13.2px;
  }

  .\32xl\:-tracking-\[15\.1px\] {
    letter-spacing: -15.1px;
  }

  .\32xl\:-tracking-\[16\.6px\] {
    letter-spacing: -16.6px;
  }

  .\32xl\:-tracking-\[18\.6px\] {
    letter-spacing: -18.6px;
  }

  .\32xl\:-tracking-\[4\.4px\] {
    letter-spacing: -4.4px;
  }

  .\32xl\:-tracking-\[5\.6px\] {
    letter-spacing: -5.6px;
  }

  .\32xl\:tracking-\[1px\] {
    letter-spacing: 1px;
  }
}
* {
  box-sizing: border-box;
  font-family: Plus Jakarta Sans;
}

html {
  scroll-behavior: smooth;
  background-color: #050505;
  overscroll-behavior-y: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #050505;
  overscroll-behavior-y: none;
}

.nav-item-text {
  text-align: center;
  font-family: Plus Jakarta Sans;
  font-weight: 300;
  line-height: 140%;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.chevron-down-variant-1 {
  z-index: 10;
  height: 0.375rem;
  width: 1rem;
  stroke: rgb(230 230 230 / 0.2);
}

.chevron-down-variant-2 {
  z-index: 10;
  height: 0.375rem;
  width: 1rem;
  stroke: rgb(230 230 230 / 0.4);
}

.chevron-down-variant-3 {
  z-index: 10;
  height: 0.375rem;
  width: 1rem;
  stroke: #E6E6E6;
}
html,body{margin:0;width:100%;height:100%}

/* === New Psyche Aerospace logo (black PNG inverted to white) === */
.navbar-logo {
  filter: invert(1);
}

/* === Header: transparent, fixed, no background — only the actions group has bg === */
.page-wrapper > header.fixed {
  position: fixed !important;
  top: 20px !important;
  left: 40px !important;
  right: 40px !important;
  width: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  align-items: center !important;
}

@media (min-width: 1280px) {
  .page-wrapper > header.fixed {
    left: 64px !important;
    right: 64px !important;
  }
}

@media (max-width: 767px) {
  .page-wrapper > header.fixed {
    top: 16px !important;
    left: 20px !important;
    right: 20px !important;
  }
}

/* Target ONLY the navbar wrapper (first div), never the mobile-menu dialog or hamburger button */
.page-wrapper > header.fixed > div:first-of-type:not([role="dialog"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px;
}

/* Logo always on the left, no background, no border */
.page-wrapper > header.fixed > div:first-of-type:not([role="dialog"]) > a {
  flex: 0 0 auto;
  margin-right: auto;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.page-wrapper > header.fixed .navbar-logo {
  height: 22px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 280px !important;
  display: block;
}

@media (min-width: 768px) {
  .page-wrapper > header.fixed .navbar-logo {
    height: 24px !important;
  }
}

/* Actions group on the right: holds nav buttons + language selector with bg/blur/border */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(13, 13, 13, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  flex: 0 0 auto;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

@media (min-width: 768px) {
  /* Inner nav inside actions group: no separate pill */
  .navbar-actions nav > ul {
    width: auto;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
  }

  .navbar-actions nav > ul > li {
    border-radius: 4px;
  }

  .navbar-actions nav > ul > li > a,
  .navbar-actions nav > ul > li > div {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 0;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
    color: #ffffff !important;
    background: transparent !important;
    transition: color 180ms ease;
  }

  .navbar-actions nav > ul > li > a::after,
  .navbar-actions nav > ul > li > div::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 1.5px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
  }

  /* Invisible bridge so cursor can travel from trigger to dropdown without losing hover */
  .navbar-actions nav > ul > li > div::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    z-index: 5;
  }

  .navbar-actions nav > ul > li > a:hover,
  .navbar-actions nav > ul > li > div:hover {
    background: transparent !important;
    color: #ffffff !important;
  }

  .navbar-actions nav > ul > li > a:hover::after,
  .navbar-actions nav > ul > li > div:hover::after {
    transform: scaleX(1);
  }

  .navbar-actions nav > ul > li > div p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
  }

  .navbar-actions nav > ul > li > div svg {
    stroke: #ffffff !important;
  }

  .navbar-actions nav > ul ul[role="menu"] {
    top: calc(100% + 10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px;
    background: rgba(13, 13, 13, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }

  .navbar-actions nav > ul ul[role="menu"] a {
    border-radius: 4px;
    padding: 10px 16px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
  }

  .navbar-actions nav > ul ul[role="menu"] a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff !important;
  }

  /* Lang selector inside actions group */
  .navbar-actions #lang-selector-desktop button {
    border-radius: 5px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .navbar-actions #lang-selector-desktop button:hover {
    background: rgba(255, 255, 255, 0.07);
  }
  .navbar-actions #lang-selector-desktop button p {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .navbar-actions #lang-selector-desktop ul {
    border-radius: 6px;
  }
}

/* Subtle bg intensify on scroll */
.page-wrapper > header.fixed.is-scrolled .navbar-actions {
  background: rgba(13, 13, 13, 0.7);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* === Segmented language switch (EN | PT) === */
.navbar-actions .lang-segmented {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px;
  gap: 0;
  flex: 0 0 auto;
}

.navbar-actions .lang-segmented__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.navbar-actions .lang-segmented[data-active="pt"] .lang-segmented__pill {
  transform: translateX(100%);
}

.navbar-actions .lang-segmented__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 220ms ease;
  cursor: pointer;
  min-width: 60px;
}

.navbar-actions .lang-segmented__option:hover {
  color: #ffffff;
}

.navbar-actions .lang-segmented[data-active="en"] .lang-segmented__option[data-lang="en"],
.navbar-actions .lang-segmented[data-active="pt"] .lang-segmented__option[data-lang="pt"] {
  color: #ffffff;
}

.navbar-actions .lang-segmented__option img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
}

@media (max-width: 767px) {
  .navbar-actions .lang-segmented {
    display: none !important;
  }
}

/* === Footer link underline hover (matches navbar effect) === */
footer a.font-jakarta:not(.rounded-lg):not(.nav-item-text):not([class*="bg-neutral-gray-100"]) {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
}

footer a.font-jakarta:not(.rounded-lg):not(.nav-item-text):not([class*="bg-neutral-gray-100"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

footer a.font-jakarta:not(.rounded-lg):not(.nav-item-text):not([class*="bg-neutral-gray-100"]):hover::after {
  transform: scaleX(1);
}

/* === Social link hover icon (Instagram, LinkedIn) ===
   Absolute positioning so the icon never causes layout shift. */
footer a[href*="instagram.com"]::before,
footer a[href*="linkedin.com"]::before {
  content: "";
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  transform: translateY(-50%) translateX(4px);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' d='M496 128C504.8 128 512 135.2 512 144L512 400C512 408.8 504.8 416 496 416C487.2 416 480 408.8 480 400L480 182.6L155.3 507.3C149.1 513.5 138.9 513.5 132.7 507.3C126.5 501.1 126.5 490.9 132.7 484.7L457.4 160L240 160C231.2 160 224 152.8 224 144C224 135.2 231.2 128 240 128L496 128z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

footer a[href*="instagram.com"]:hover::before,
footer a[href*="linkedin.com"]:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* === Site-wide unified button radius (6px) ===
   Targets CTA-like links/buttons across pages without affecting cards. */
.page-wrapper a[class*="bg-neutral-gray-100"][class*="rounded"],
.page-wrapper button[class*="bg-neutral-gray-100"][class*="rounded"],
.page-wrapper a[class*="74px"][class*="backdrop-blur"],
.page-wrapper a[class*="rounded-2xl"][class*="bg-neutral-gray-1000"],
.page-wrapper a[class*="rounded-lg"][class*="bg-"],
.page-wrapper button[type="submit"][class*="rounded"],
.page-wrapper button[type="button"][class*="rounded"][class*="bg-"] {
  border-radius: 6px !important;
}

/* === Contact form - Liquid Glass Design === */
.contact-form .form-input,
.contact-form input,
.contact-form textarea,
.contact-form select {
  display: flex;
  width: 100%;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  transition: border-color 200ms ease, background 200ms ease;
}

.contact-form .form-input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 400;
}

.contact-form .form-input:hover,
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.contact-form .form-input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/* Red border only on submit validation error */
.contact-form.was-validated .form-input:invalid,
.contact-form.was-validated input:invalid,
.contact-form.was-validated textarea:invalid {
  border-color: rgba(200, 80, 90, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(200, 80, 90, 0.15) !important;
}

.contact-form textarea {
  min-height: 140px !important;
  resize: vertical;
}

.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 44px !important;
  cursor: pointer;
}

.contact-form select option {
  background: #1a1a1a;
  color: #fff;
  padding: 12px;
}

/* Form row layout */
.contact-form .form-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.contact-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.contact-form .form-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.01em;
}

.contact-form .form-row input,
.contact-form .form-field input,
.contact-form .form-field textarea {
  flex: 1;
  min-width: 0;
}

.contact-form .contact-submit-btn,
.contact-form button[type="submit"] {
  display: inline-flex;
  width: auto;
  padding: 13px 32px !important;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  border: none !important;
  background: #f5f0e8 !important;
  color: #0d0d0d !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, transform 100ms ease;
  margin: 0 auto;
}

.contact-form .contact-submit-btn:hover,
.contact-form button[type="submit"]:hover {
  background: #ebe5db !important;
}

.contact-form .contact-submit-btn:active,
.contact-form button[type="submit"]:active {
  transform: scale(0.98);
}

/* Form section container - transparent */
.form-section {
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
  .contact-form .form-input,
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  
  .contact-form .contact-submit-btn,
  .contact-form button[type="submit"] {
    padding: 12px 28px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 640px) {
  .contact-form .form-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .contact-form .form-label {
    font-size: 12px;
  }
  
  .contact-form .form-input,
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
  
  .contact-form .contact-submit-btn,
  .contact-form button[type="submit"] {
    width: 100%;
    padding: 13px 24px !important;
    border-radius: 6px !important;
  }
}

/* === Hardware Details button underline hover effect === */
.page-wrapper a[class*="rounded-[74px]"][class*="backdrop-blur"] p {
  position: relative;
  display: inline-block;
}

.page-wrapper a[class*="rounded-[74px]"][class*="backdrop-blur"] p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1);
}

.page-wrapper a[class*="rounded-[74px]"][class*="backdrop-blur"]:hover p::after {
  transform: scaleX(1);
}

.page-wrapper a[class*="rounded-[74px]"][class*="backdrop-blur"]:not(:hover) p::after {
  transform-origin: right center;
}

/* === Lenis smooth scroll support === */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* === Timeline: static, responsive horizontal scroll (no GSAP pin) === */
.timeline-container {
  overflow: visible !important;
  width: 100% !important;
}

.timeline-card-container {
  transform: none !important;
  -webkit-transform: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  width: 100% !important;
  padding: 60px 24px !important;
  gap: 27px !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.timeline-card-container::-webkit-scrollbar {
  height: 6px;
}
.timeline-card-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.timeline-card-container::-webkit-scrollbar-track {
  background: transparent;
}

.timeline-card {
  filter: none !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ellipse {
  opacity: 1 !important;
  filter: none !important;
}

@media (min-width: 1280px) {
  .timeline-card-container {
    justify-content: center !important;
    overflow-x: visible !important;
  }
}

/* Timeline scroll reveal animation */
.timeline-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-card.reveal {
  opacity: 1 !important;
  transform: translateY(0);
}

.timeline-card:nth-child(1) { transition-delay: 0s; }
.timeline-card:nth-child(2) { transition-delay: 0.1s; }
.timeline-card:nth-child(3) { transition-delay: 0.2s; }
.timeline-card:nth-child(4) { transition-delay: 0.3s; }
.timeline-card:nth-child(5) { transition-delay: 0.4s; }

/* Timeline dotted line positioned above cards */
.timeline-dots {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  width: 100%;
  max-width: 1200px;
}

.timeline-dots .ellipse {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* === About Us hero overlays + left-aligned title (works without Tailwind JIT) === */
.about-hero-section {
  position: relative;
  overflow: hidden;
}

/* 30% black film over the entire image */
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
  pointer-events: none;
}

/* Left horizontal dark blur — desktop only */
.about-hero-blur-left {
  display: none;
}

/* Bottom vertical dark blur — desktop only */
.about-hero-blur-bottom {
  display: none;
}

/* Mobile bottom fade to background color - smooth transition */
.about-hero-mobile-fade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 65%,
    rgba(13, 13, 13, 0.5) 80%,
    rgba(13, 13, 13, 0.9) 95%,
    #0d0d0d 100%
  );
  z-index: 10;
  pointer-events: none;
  display: block;
}

/* Title container — left aligned, low position on mobile */
.about-hero-title {
  position: absolute;
  top: 60%;
  left: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  z-index: 20;
  max-width: calc(100% - 40px);
  text-align: left;
}

.about-hero-title h1 {
  font-size: 28px;
  font-weight: 400;
  text-align: left;
  line-height: 100%;
  margin: 0;
}

.about-hero-title p {
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  line-height: 150%;
  margin: 0;
}

.about-hero-br {
  display: none;
}

@media (min-width: 1024px) {
  .about-hero-blur-left {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 70%;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0)
    );
    z-index: 10;
    pointer-events: none;
  }

  .about-hero-blur-bottom {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background-image: linear-gradient(
      to top,
      #0d0d0d 0%,
      rgba(13, 13, 13, 0.85) 15%,
      rgba(13, 13, 13, 0.4) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    z-index: 10;
    pointer-events: none;
  }

  .about-hero-mobile-fade {
    display: none;
  }

  .about-hero-title {
    top: 32%;
    left: 40px;
    right: auto;
    gap: 16px;
    max-width: 480px;
  }

  .about-hero-title h1 {
    font-size: 3rem;
  }

  .about-hero-title p {
    font-size: 1.125rem;
  }

  .about-hero-br {
    display: inline;
  }
}

@media (min-width: 1280px) {
  .about-hero-title {
    left: 64px;
    max-width: 560px;
  }

  .about-hero-title h1 {
    font-size: 4.5rem;
  }

  .about-hero-title p {
    font-size: 1.25rem;
  }
}

@media (min-width: 1536px) {
  .about-hero-title {
    top: 30%;
  }

  .about-hero-title h1 {
    font-size: 6rem;
  }

  .about-hero-title p {
    font-size: 2rem;
  }
}


/* ============================================================ */
/* Navbar dropdown — smooth top-to-bottom open/close animation  */
/* (applies to Serviços/Services and Hardwares menus, PT & EN)  */
/* ============================================================ */
.group\/menu > ul[role="menu"] {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transform-origin: top center;
  transition:
    clip-path 320ms cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-clip-path 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease-out,
    visibility 0s linear 320ms;
}

.group\/menu:hover > ul[role="menu"],
.group\/menu:focus-within > ul[role="menu"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition:
    clip-path 320ms cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-clip-path 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease-out,
    visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .group\/menu > ul[role="menu"],
  .group\/menu:hover > ul[role="menu"],
  .group\/menu:focus-within > ul[role="menu"] {
    transition: opacity 120ms ease;
    clip-path: none;
    -webkit-clip-path: none;
  }
}

/* ============================================================ */
/* Contact hero — bottom padding for title/CTA position         */
/* (uses vh so the copy sits well above the bottom edge)         */
/* ============================================================ */
.contact-hero-section {
  padding-bottom: 6vh;
}
@media (min-width: 768px) {
  .contact-hero-section { padding-bottom: 8vh; }
}
@media (min-width: 1024px) {
  .contact-hero-section { padding-bottom: 10vh; }
}
@media (min-width: 1280px) {
  .contact-hero-section { padding-bottom: 12vh; }
}

/* ============================================================ */
/* Home — "Psyche na mídia / in the media" section top spacing  */
/* (replaces lg:mt-40 = 10rem with a tighter value)             */
/* ============================================================ */
.home-media-section {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .home-media-section { margin-top: 4.5rem; }
}
@media (min-width: 1280px) {
  .home-media-section { margin-top: 5rem; }
}

/* ============================================================ */
/* Contact submit button — success morph (square + check icon)  */
/* ============================================================ */
.contact-form .contact-submit-btn,
.contact-form button[type="submit"] {
  position: relative;
  overflow: hidden;
  min-width: 180px;
  transition:
    background 320ms ease,
    transform 140ms ease,
    width 760ms cubic-bezier(0.45, 0.05, 0.25, 1),
    min-width 760ms cubic-bezier(0.45, 0.05, 0.25, 1),
    padding 760ms cubic-bezier(0.45, 0.05, 0.25, 1),
    border-radius 760ms cubic-bezier(0.45, 0.05, 0.25, 1),
    box-shadow 520ms ease;
}

.contact-form .contact-submit-btn .submit-label,
.contact-form button[type="submit"] .submit-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: opacity 360ms ease, transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.contact-form .contact-submit-btn .submit-check,
.contact-form button[type="submit"] .submit-check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  color: #16A34A;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition:
    opacity 360ms ease,
    transform 560ms cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}

.contact-form .contact-submit-btn.is-success,
.contact-form button[type="submit"].is-success {
  width: 56px !important;
  min-width: 56px !important;
  padding: 13px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 2px rgba(37, 99, 235, 0.55),
    0 6px 18px rgba(37, 99, 235, 0.22) !important;
  pointer-events: none;
  cursor: default;
}

.contact-form .contact-submit-btn.is-success .submit-label,
.contact-form button[type="submit"].is-success .submit-label {
  opacity: 0;
  transform: scale(0.9);
  transition-duration: 280ms;
}

.contact-form .contact-submit-btn.is-success .submit-check,
.contact-form button[type="submit"].is-success .submit-check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 320ms;
}

@media (max-width: 640px) {
  .contact-form .contact-submit-btn,
  .contact-form button[type="submit"] {
    min-width: 0;
  }
  .contact-form .contact-submit-btn.is-success,
  .contact-form button[type="submit"].is-success {
    width: 56px !important;
    min-width: 56px !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================ */
/* Contact toast — soft right-side success popup                */
/* ============================================================ */
.contact-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  transform: translate3d(120%, 0, 0);
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.contact-toast.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}

.contact-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
  max-width: 360px;
  padding: 14px 14px 14px 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

.contact-toast__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-toast__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-toast__title {
  font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #0d0d0d;
  margin: 0;
}

.contact-toast__desc {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(13, 13, 13, 0.6);
  margin: 0;
}

.contact-toast__close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(13, 13, 13, 0.4);
  cursor: pointer;
  border-radius: 4px;
  transition: color 160ms ease, background 160ms ease;
  padding: 0;
}

.contact-toast__close:hover {
  color: rgba(13, 13, 13, 0.85);
  background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 640px) {
  .contact-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .contact-toast__inner {
    min-width: 0;
    max-width: 100%;
  }
}

/* ================================================================
   MOBILE RESPONSIVE OVERRIDES
   Comprehensive mobile-first refinements for the entire site.
   Applies to: navbar, hero, sections, carousels, forms, tables,
   footer, language selector, hamburger menu, dropdowns, products,
   services pages (incl. Psyche AI), about, contact and EN mirrors.
   ================================================================ */

/* --- Global guards (all viewports) ----------------------------- */
html, body { max-width: 100vw; }
img, video, model-viewer { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05); }

/* iOS: prevent input zoom by ensuring 16px font on focusable inputs */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px !important; }
}

/* --- Mobile (≤ 767px) ------------------------------------------ */
@media (max-width: 767px) {
  html, body, .page-wrapper {
    /* Prevent horizontal overflow without breaking position: sticky.
       overflow-x: hidden creates a new scroll container, which makes
       sticky elements (used by the Psyche AI scroll-driven sections)
       stop tracking the document scroll on mobile (iOS Safari in
       particular). overflow-x: clip clips overflow without becoming
       a scroll container, so sticky keeps working. The hidden value
       below is a fallback for older browsers that don't support clip. */
    overflow-x: hidden;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
  }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  h1, h2, h3, h4, h5, h6, p, a, span, li {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
  }

  /* === Navbar ================================================== */
  .page-wrapper > header.fixed {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 0 !important;
  }
  .page-wrapper > header.fixed .navbar-logo {
    height: 18px !important;
    max-width: 190px !important;
  }
  /* Logo always visible on the LEFT, hamburger on the RIGHT */
  .page-wrapper > header.fixed > div:first-of-type:not([role="dialog"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px;
    position: relative;
  }
  /* Force-hide ALL desktop navbar actions and any leftover language
     switcher elements on mobile (handles original DOM and post-script DOM).
     Strictly scoped to the navbar wrapper — never matches inside the
     mobile dialog (which contains its own nav + lang selector). The
     `:not([role="dialog"])` guard is critical because the dialog is
     a direct `<div>` child of `<header>` and would otherwise inherit
     the `display: none` from this selector. */
  .page-wrapper > header.fixed > div:not([role="dialog"]) .navbar-actions,
  .page-wrapper > header.fixed > div:not([role="dialog"]) > #lang-selector-desktop,
  .page-wrapper > header.fixed > div:not([role="dialog"]) .lang-segmented,
  .page-wrapper > header.fixed > div:not([role="dialog"]) > div.hidden.md\:block {
    display: none !important;
    visibility: hidden !important;
  }
  /* Hamburger button → "Menu" text label (replaces the icon) */
  .hamburger-menu {
    position: static !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 10px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #fff;
    flex: 0 0 auto;
    margin-left: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger-menu svg { display: none !important; }
  .hamburger-menu::after {
    content: "Menu";
    color: #ffffff;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
  }

  /* === Mobile Menu Dialog (smooth open/close animation) ======== */
  /* Always rendered as flex so we can transition opacity & transform.
     Visibility + pointer-events are toggled via .is-visible class set by JS. */
  .hamburger-menu-dialog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    background: rgba(5, 5, 5, 0.97) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 100 !important;
    padding: 24px 24px 48px !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transform-origin: top right;
    pointer-events: none !important;
    visibility: hidden;
    transition:
      opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 600ms;
  }
  .hamburger-menu-dialog.is-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition:
      opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  /* Close button — clean X icon, no background box */
  .hamburger-menu-close-dialog {
    top: 16px !important;
    right: 18px !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger-menu-close-dialog svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #fff !important;
    color: #fff !important;
  }

  /* Mobile menu list (responsive proportional typography via clamp).
     The segmented language switcher is injected as the first child of
     this container by JS, sitting above the <nav>. */
  .hamburger-menu-dialog > div {
    margin-top: clamp(56px, 12vh, 104px) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hamburger-menu-dialog nav { width: 100%; }
  .hamburger-menu-dialog nav > ul {
    width: 100% !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 2px !important;
  }
  .hamburger-menu-dialog nav > ul > li {
    width: 100%;
    border-radius: 10px;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* No hover/active background change anywhere on menu items */
  .hamburger-menu-dialog nav > ul > li:hover,
  .hamburger-menu-dialog nav > ul > li:active,
  .hamburger-menu-dialog nav > ul > li:focus,
  .hamburger-menu-dialog nav > ul > li:focus-within {
    background: transparent !important;
  }

  .hamburger-menu-dialog nav > ul > li > a {
    display: block !important;
    width: 100% !important;
    padding: clamp(10px, 2vh, 14px) 18px !important;
    font-size: clamp(17px, 4.6vw, 21px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    text-align: left !important;
    line-height: 1.25 !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .hamburger-menu-dialog nav > ul > li > a:hover,
  .hamburger-menu-dialog nav > ul > li > a:active,
  .hamburger-menu-dialog nav > ul > li > a:focus {
    background: transparent !important;
  }

  /* Submenu trigger: GRID layout so the chevron stays in the title row
     even while the submenu expands below (overlay in row 1). */
  .hamburger-menu-dialog nav > ul > li > div {
    display: grid !important;
    grid-template-rows: auto auto !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 0 !important;
    color: #ffffff !important;
    cursor: pointer;
    position: relative !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .hamburger-menu-dialog nav > ul > li > div:hover,
  .hamburger-menu-dialog nav > ul > li > div:active,
  .hamburger-menu-dialog nav > ul > li > div:focus,
  .hamburger-menu-dialog nav > ul > li > div.is-open {
    background: transparent !important;
  }
  .hamburger-menu-dialog nav > ul > li > div::before { display: none !important; }
  .hamburger-menu-dialog nav > ul > li > div p {
    grid-row: 1 !important;
    grid-column: 1 !important;
    color: #ffffff !important;
    font-size: clamp(17px, 4.6vw, 21px) !important;
    font-weight: 400 !important;
    margin: 0;
    padding: clamp(10px, 2vh, 14px) 44px clamp(10px, 2vh, 14px) 18px !important;
    width: 100% !important;
    line-height: 1.25 !important;
    text-align: left !important;
    letter-spacing: -0.01em !important;
    background: transparent !important;
  }
  .hamburger-menu-dialog .nav-item-text {
    text-align: left !important;
  }
  /* Chevron: locked to the title row via grid overlay, never drifts */
  .hamburger-menu-dialog nav > ul > li > div svg {
    grid-row: 1 !important;
    grid-column: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-right: 18px !important;
    width: 14px !important;
    height: 14px !important;
    stroke: rgba(255, 255, 255, 0.7) !important;
    transform: none !important;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .hamburger-menu-dialog nav > ul > li > div.is-open svg {
    transform: rotate(180deg) !important;
  }
  /* The submenu UL takes the second grid row (full width, below the title) */
  .hamburger-menu-dialog nav > ul > li > div ul[role="menu"] {
    grid-row: 2 !important;
    grid-column: 1 !important;
  }

  /* Mobile submenu (Serviços / Hardwares) — slow & smooth tap-to-expand,
     scoped strictly to the dialog, never affects desktop dropdowns */
  .hamburger-menu-dialog nav ul ul[role="menu"] {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    border-left: 2px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-direction: column !important;
    display: flex !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: hidden !important;
    max-height: 0 !important;
    padding: 0 0 0 12px !important;
    margin: 0 0 0 18px !important;
    transition:
      max-height 540ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 320ms ease 0ms,
      padding 360ms ease,
      margin 360ms ease !important;
  }
  .hamburger-menu-dialog nav ul li > div.is-open ul[role="menu"],
  .hamburger-menu-dialog nav ul li > div.is-open > ul[role="menu"] {
    max-height: 600px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 2px 0 6px 12px !important;
    margin: 2px 0 6px 18px !important;
    transition:
      max-height 620ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 360ms ease 120ms,
      padding 360ms ease,
      margin 360ms ease !important;
  }
  .hamburger-menu-dialog nav ul ul[role="menu"] li {
    width: 100%;
    background: transparent !important;
  }
  .hamburger-menu-dialog nav ul ul[role="menu"] li > a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(8px, 1.4vh, 11px) 14px !important;
    font-size: clamp(14px, 3.6vw, 16.5px) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.35 !important;
    text-align: left !important;
    border-radius: 8px;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .hamburger-menu-dialog nav ul ul[role="menu"] li > a:hover,
  .hamburger-menu-dialog nav ul ul[role="menu"] li > a:active,
  .hamburger-menu-dialog nav ul ul[role="menu"] li > a:focus {
    background: transparent !important;
    color: #fff !important;
  }

  /* === Segmented EN/PT switcher inside the mobile menu dialog =====
     Sits just above the "Home" link so the user can tap to slide
     between languages, mirroring the desktop pill switcher. The old
     dropdown-style lang selector that lived at the bottom of the menu
     is hidden in favour of this one. */
  .hamburger-menu-dialog #lang-selector-mobile,
  .hamburger-menu-dialog #lang-button-mobile,
  .hamburger-menu-dialog #lang-dropdown-mobile,
  .hamburger-menu-dialog > div > div:has(#lang-selector-mobile) {
    display: none !important;
    visibility: hidden !important;
  }
  /* Match the desktop `.navbar-actions .lang-segmented` look exactly:
     subtle dark background, faint white border, square 6px radius, and
     a translucent pill (not a bright white one) that slides between
     options. Spacing is slightly larger than desktop so the touch target
     stays comfortable. */
  .hamburger-menu-dialog .lang-segmented {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 auto clamp(14px, 2.4vh, 22px) !important;
    padding: 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    z-index: 2;
  }
  .hamburger-menu-dialog .lang-segmented__pill {
    position: absolute !important;
    top: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
    width: calc(50% - 4px) !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 6px !important;
    transform: translateX(0);
    transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1) !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  .hamburger-menu-dialog .lang-segmented[data-active="pt"] .lang-segmented__pill {
    transform: translateX(100%) !important;
  }
  .hamburger-menu-dialog .lang-segmented__option {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 78px !important;
    padding: 7px 16px !important;
    height: auto !important;
    border-radius: 6px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    transition: color 220ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .hamburger-menu-dialog .lang-segmented[data-active="en"] .lang-segmented__option[data-lang="en"],
  .hamburger-menu-dialog .lang-segmented[data-active="pt"] .lang-segmented__option[data-lang="pt"] {
    color: #ffffff !important;
    font-weight: 500 !important;
  }
  .hamburger-menu-dialog .lang-segmented__option img {
    width: 18px !important;
    height: 13px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
  }

  /* === Hero CTA: ensure CTA buttons are visible & tappable ===== */
  .contact-hero-section h1,
  section h1[class*="font-work-sans"] {
    line-height: 1.05 !important;
    padding: 0 8px;
  }
  .contact-hero-section a[href="/contato"],
  .contact-hero-section a[href="/en/contact"],
  .contact-hero-section a[href*="contato"],
  .contact-hero-section a[href*="contact"] {
    padding: 13px 22px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* === Carousels — keep "peek" but never overflow horizontally = */
  .carousel__viewport,
  .embla,
  .embla__viewport {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .card__container,
  .embla__container {
    width: max-content;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* === "Psyche na mídia": standard mobile section + snap carousel === */
  .home-media-section {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 32px !important;
  }
  .home-media-section > p {
    font-size: 22px !important;
    line-height: 1.25 !important;
    padding: 0 24px;
  }
  .home-media-section > div {
    width: 100% !important;
    margin-top: 28px !important;
  }
  /* Show only the 6 unique cards on mobile (collection is duplicated x2) */
  .home-media-section .card__container > a:nth-child(n+7) {
    display: none !important;
  }
  /* Convert viewport into a native scroll-snap carousel on mobile.
     Embla is skipped on mobile (see index.astro_*.js), so we own scroll. */
  .home-media-section .carousel__viewport[data-mobile-carousel="1"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .home-media-section .carousel__viewport[data-mobile-carousel="1"]::-webkit-scrollbar {
    display: none;
  }
  .home-media-section .carousel__viewport[data-mobile-carousel="1"] > .card__container {
    width: max-content !important;
    padding-left: 11vw !important;
    padding-right: 11vw !important;
    transform: none !important;
    gap: 0 !important;
    will-change: transform;
  }
  .home-media-section .carousel__viewport[data-mobile-carousel="1"] > .card__container > a {
    min-width: 78vw !important;
    max-width: 78vw !important;
    width: 78vw !important;
    height: auto !important;
    min-height: 180px !important;
    margin-left: 0 !important;
    margin-right: 12px !important;
    padding: 22px !important;
    border-radius: 16px !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex: 0 0 auto;
  }
  .home-media-section .carousel__viewport[data-mobile-carousel="1"] > .card__container > a:last-of-type,
  .home-media-section .carousel__viewport[data-mobile-carousel="1"] > .card__container > a:nth-child(6) {
    margin-right: 0 !important;
  }
  /* Portal logos: keep original aspect ratio, fit into a uniform box so
     they look visually consistent across cards (no stretching). */
  .home-media-section .card__container > a img {
    width: auto !important;
    height: auto !important;
    max-height: 22px !important;
    max-width: 118px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block;
    flex-shrink: 0;
  }
  .home-media-section .card__container > a p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* === Hardware cards (home grid, 6 hardware tiles) ============ */
  .page-wrapper a[href*="/produtos/"],
  .page-wrapper a[href*="/en/products/"] { -webkit-tap-highlight-color: transparent; }

  /* Compact each hardware tile on the home page (the 1×6 grid) */
  section .grid.grid-cols-1.lg\:grid-cols-2 > div {
    min-height: 0 !important;
    padding: 22px !important;
    /* Larger gap so the floating "Detalhes" button has breathing room
       before the hardware title starts. */
    gap: 36px !important;
    border-radius: 18px !important;
    /* Thinner, more subtle outer card border */
    border: 0.5px solid rgba(255, 255, 255, 0.06) !important;
  }
  /* Image frame: shorter container, thinner/subtler inner border */
  section .grid.grid-cols-1.lg\:grid-cols-2 > div > div:first-child {
    min-height: 200px !important;
    height: 200px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
  }
  section .grid.grid-cols-1.lg\:grid-cols-2 > div > div:first-child > div {
    min-height: 200px !important;
    height: 200px !important;
  }
  /* Reduce overscaled hardware photo on mobile (was scale-[200%]) */
  section .grid.grid-cols-1.lg\:grid-cols-2 img.scale-\[200\%\] {
    transform: scale(1) !important;
  }
  /* Detail button: same border as the desktop version of THIS button
     (Tailwind classes: `border border-[#262626] backdrop-blur-lg`).
     We just shrink the padding/typography for mobile but keep the
     border, fill and blur identical to the web look. */
  section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Botão para ir para a página do hardware"],
  section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Button to go to the hardware page"] {
    padding: 9px 14px !important;
    gap: 8px !important;
    bottom: -18px !important;
    /* Desktop uses `rounded-[74px]` on a ~64px-tall button: the
       radius clamps to ~32px and renders as a soft pill with very
       visible flat sides. On a ~32px-tall mobile button, anything
       above 16px clamps to a perfect circular-ended capsule, which
       visually feels MORE rounded than the desktop one. We force a
       small fixed 10px radius so the corners are crisp and the
       button keeps the same rectangular feel as the desktop one. */
    border-radius: 10px !important;
    font-size: 11.5px !important;
    background: transparent !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #262626 !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: none !important;
  }
  section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Botão para ir para a página do hardware"] p,
  section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Button to go to the hardware page"] p {
    font-size: 11.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
  }
  section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Botão para ir para a página do hardware"] svg,
  section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Button to go to the hardware page"] svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Hardware title — overrides text-[40px] explicit size from Tailwind */
  section .grid.grid-cols-1.lg\:grid-cols-2 > div h2,
  section .grid.grid-cols-1.lg\:grid-cols-2 > div h3,
  section .grid.grid-cols-1.lg\:grid-cols-2 > div p.font-work,
  section .grid.grid-cols-1.lg\:grid-cols-2 > div p[class*="text-\[40px\]"] {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
  }
  /* Subtitle (e.g. "Drone autônomo para pulverização agrícola") */
  section .grid.grid-cols-1.lg\:grid-cols-2 > div .flex.flex-row.justify-between p {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  /* Long description paragraph */
  section .grid.grid-cols-1.lg\:grid-cols-2 > div > div:last-child p:last-child,
  section .grid.grid-cols-1.lg\:grid-cols-2 > div p[class*="text-\[\#8C8C8C\]"] {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* === Sections: prevent inner padding causing overflow ======== */
  section { max-width: 100vw; }
  section > * { max-width: 100%; }
  /* Generic padding for hero/copy sections that lacked it */
  .min-w-full > section:not(.contact-hero-section):not(.home-media-section) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Fix any element using w-screen so it never exceeds 100vw */
  [class*="w-screen"] {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* === About / "A Psyche" hero copy size bump for readability == */
  .about-hero-title h1 { font-size: 32px !important; }
  .about-hero-title p { font-size: 13px !important; }

  /* === Timeline: mobile horizontal scroll polish =============== */
  .timeline-card-container {
    padding: 32px 16px !important;
    gap: 16px !important;
    scroll-padding-left: 16px;
  }
  .timeline-card { min-width: 230px; max-width: 80vw; }

  /* === Form section spacing on contact page ==================== */
  .form-section, [data-astro-cid-bd6jexa6] {
    padding: 20px !important;
    border-radius: 14px !important;
  }
  .contact-form .form-row { flex-direction: column !important; gap: 12px !important; }
  .contact-form .contact-submit-btn,
  .contact-form button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* === Footer ================================================= */
  footer { padding-left: 0 !important; padding-right: 0 !important; }
  footer > div, footer > div > div { max-width: 100% !important; }

  /* CTA row at top of footer — text/button on the LEFT, "future is autonomous" on the RIGHT */
  footer > div > div.flex.flex-col.md\:flex-row {
    padding-top: 28px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 14px !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
  /* LEFT block: title + subtitle + "Send your question" button.
     Spacing: title <-> subtitle and subtitle <-> button (more breathing room). */
  footer > div > div.flex.flex-col.md\:flex-row > div:first-child {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    align-items: flex-start !important;
    gap: 22px !important; /* space between (title+subtitle) and button */
  }
  /* Title + subtitle wrapper: more space between H2 and "Conte com a gente!" */
  footer > div > div.flex.flex-col.md\:flex-row > div:first-child > div:first-child {
    gap: 14px !important; /* space between title and "Conte com a gente!" */
  }
  /* RIGHT block: "/ O futuro é autônomo".
     Vertically aligned with the "Conte com a gente!" subtitle on the left. */
  footer > div > div.flex.flex-col.md\:flex-row > div:last-child {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 38% !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right;
    /* Push down so it lines up with "Conte com a gente!" / "Count on us!" */
    margin-top: 60px !important;
  }
  footer h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  footer h2 br { display: none; } /* let it wrap naturally */
  footer a[href="/contato"],
  footer a[href="/en/contact"] {
    width: auto !important;
    align-self: flex-start;
    padding: 12px 20px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  /* "/ O futuro é autônomo" — right-aligned, wraps within its narrow column */
  footer .flex.w-full.items-start.justify-start.lg\:justify-end {
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: right;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  footer .text-\[\#DDD6FE\] { font-size: 14px !important; }
  footer .text-\[\#DDD6FE\] + p,
  footer p[class*="font-jakarta"][class*="text-neutral-gray-100\\/80"] {
    font-size: 12px !important;
    text-align: right;
    line-height: 1.35 !important;
  }

  /* The 3 link columns row: only Jurídico + Encontre-nos visible on
     mobile; both centered horizontally as a 2-column grid */
  footer .flex.w-full.items-start.justify-between {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 14px !important;
    width: 100% !important;
    padding: 8px 0 24px !important;
    align-items: start !important;
    justify-items: center !important;
  }
  footer .flex.w-full.items-start.justify-between > div {
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  footer .flex.w-full.items-start.justify-between > div > div {
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Hide the first column (desktop email wrapper) on mobile */
  footer .flex.w-full.items-start.justify-between > div:first-child:has(.hidden.md\:flex),
  footer .flex.w-full.items-start.justify-between > div:first-child {
    display: none !important;
  }
  /* Hide the LAST column on mobile too — it holds the desktop-only
     logo + copyright and a typo'd `md-flex` class that bypasses Tailwind. */
  footer .flex.w-full.items-start.justify-between > div:last-child:has(img[alt*="Psyche"]),
  footer .flex.w-full.items-start.justify-between > div:last-child {
    display: none !important;
  }
  /* Re-show only the two middle columns: Jurídico (2nd) and Encontre-nos (3rd) */
  footer .flex.w-full.items-start.justify-between > div:nth-child(2),
  footer .flex.w-full.items-start.justify-between > div:nth-child(3) {
    display: flex !important;
  }
  /* "Email" column hidden on desktop wrapper kept hidden on mobile */
  footer .hidden.md\:flex.flex-col.items-end {
    display: none !important;
  }
  /* Hide the dedicated mobile-only email block under the link columns
     (md:hidden wrapper containing "Email" + contato@psycheaerospace.com) */
  footer .flex-col.w-full.items-start.justify-center.gap-3.md\:hidden,
  footer > div > div > div.flex-col.md\:hidden,
  footer a[href="mailto:contato@psycheaerospace.com"] {
    display: none !important;
    visibility: hidden !important;
  }
  /* Also remove the "Email" label paragraph that appears alongside the
     mobile-only email anchor (paragraph immediately preceding the anchor
     in the md:hidden block) */
  footer .md\:hidden p[class*="uppercase"][class*="tracking-\\[0.4px\\]"] {
    display: none !important;
  }
  footer p[class*="uppercase"][class*="tracking-\\[0.4px\\]"] {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    color: rgba(230, 230, 230, 0.55) !important;
  }
  footer a[class*="text-neutral-gray-100"][class*="font-medium"] {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* Bottom strip with copyright */
  footer + div, footer .flex.w-full.items-center.justify-center {
    padding: 12px 16px !important;
  }

  /* === Cookies policy page: simpler header treatment =========== */
  .bg-black header.flex.justify-between {
    padding: 16px 12px !important;
  }
  .bg-black .navbar-logo { height: 22px !important; }
  .bg-black h1[class*="text-\\[2\\.5rem\\]"] { font-size: 26px !important; }
  .bg-black h2[class*="text-\\[2\\.5rem\\]"] { font-size: 20px !important; }

  /* === Psyche AI page: dense data sections, range, chips ======= */
  /* Range slider full width, big thumb */
  input[type="range"] { width: 100% !important; }
  /* Chip-row buttons (cultura, regional, etc.) wrap & look tappable */
  button[type="button"]:not(.media-stepper__dot) { min-height: 44px; }
  /* AI page: prevent decorative absolute videos/images from forcing wide layouts */
  .min-w-full > section { overflow: hidden; }

  /* === Product 3D viewer area ================================== */
  model-viewer {
    width: 100% !important;
    height: 60vh !important;
    min-height: 420px;
  }

  /* === Product specs lists & tables ============================ */
  ul[role="list"] li, ul li { word-break: normal; }
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* === Generic CTAs ============================================ */
  a[class*="rounded-lg"][class*="bg-neutral-gray-100"] {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Decorative blurs/glow images that overflow viewport */
  img[class*="max-w-\\[200px\\]"],
  img[class*="absolute"][alt*="desfocada"],
  img[class*="absolute"][alt*="blurred"] {
    pointer-events: none;
  }
}

/* --- Small phones (≤ 380px) ----------------------------------- */
@media (max-width: 380px) {
  .page-wrapper > header.fixed .navbar-logo { height: 20px !important; max-width: 200px !important; }
  .contact-hero-section h1,
  section h1[class*="font-work-sans"] { font-size: 34px !important; }
  footer h2 { font-size: 22px !important; }
  .home-media-section .carousel__viewport[data-mobile-carousel="1"] > .card__container > a {
    min-width: 86vw !important;
    max-width: 86vw !important;
    width: 86vw !important;
    padding: 22px !important;
    min-height: 200px !important;
  }
  .media-stepper { margin-top: 18px; }
  .media-stepper__dot.is-active { width: 32px !important; min-width: 32px !important; }
  .hamburger-menu-dialog nav > ul > li > a { font-size: 16px !important; padding: 10px 14px !important; }
  .hamburger-menu-dialog nav > ul > li > div p { font-size: 16px !important; padding: 10px 44px 10px 14px !important; }
  .hamburger-menu-dialog nav ul ul[role="menu"] li > a { font-size: 13.5px !important; padding: 8px 12px !important; }
  .hamburger-menu-dialog .lang-segmented__option { min-width: 70px !important; padding: 6px 12px !important; font-size: 12.5px !important; }
}

/* --- Landscape phones — keep menu dialog scrollable ----------- */
@media (max-width: 900px) and (orientation: landscape) {
  .hamburger-menu-dialog > div { margin-top: 3rem !important; }
  .hamburger-menu-dialog nav > ul > li > a { padding: 8px 18px !important; font-size: 15.5px !important; }
  .hamburger-menu-dialog nav > ul > li > div p { padding: 8px 44px 8px 18px !important; font-size: 15.5px !important; }
  .hamburger-menu-dialog .lang-segmented { margin-bottom: 10px !important; padding: 3px !important; }
  .hamburger-menu-dialog .lang-segmented__option { padding: 5px 14px !important; min-width: 70px !important; }
}

/* === Media stepper (mobile + desktop) =========================== */
/* Same visual stepper used under the "Psyche na mídia" carousel on
   both mobile (custom scroll-snap carousel) and desktop (Embla). */
.media-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 0 24px;
  width: 100%;
}
.media-stepper__dot {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  line-height: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* Instant collapse back to a dot when no longer active (no slow shrink, no blink) */
  transition: width 0ms linear, background-color 200ms ease;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.media-stepper__dot.is-active {
  width: 36px !important;
  min-width: 36px !important;
  background: rgba(255, 255, 255, 0.18);
  /* Smooth expansion when becoming active */
  transition: width 360ms cubic-bezier(0.65, 0, 0.35, 1),
              background-color 200ms ease;
}
.media-stepper__progress {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #ffffff;
  border-radius: 999px;
  transform-origin: left center;
  /* Default: instant reset (no transition) when not active */
  transition: width 0ms linear;
  pointer-events: none;
}
.media-stepper__dot.is-active .media-stepper__progress {
  width: 100%;
  transition: width var(--media-stepper-duration, 5000ms) linear;
}

/* Desktop: align the stepper with the carousel container width */
@media (min-width: 768px) {
  .home-media-section .media-stepper {
    margin-top: 28px;
    padding: 0;
  }
}

/* === Psyche na mídia — desktop responsive cards ================= */
/* Cards, logos and copy scale fluidly with the viewport so they
   stay proportional with the rest of the page (just like mobile).  */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-media-section .card__container > a {
    min-width: clamp(280px, 38vw, 380px) !important;
    width: clamp(280px, 38vw, 380px) !important;
    max-width: clamp(280px, 38vw, 380px) !important;
    height: auto !important;
    min-height: clamp(220px, 28vw, 250px) !important;
    padding: clamp(22px, 3vw, 30px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    border-radius: 16px !important;
  }
}
@media (min-width: 1024px) {
  .home-media-section .card__container > a {
    min-width: clamp(360px, 30vw, 510px) !important;
    width: clamp(360px, 30vw, 510px) !important;
    max-width: clamp(360px, 30vw, 510px) !important;
    height: auto !important;
    min-height: clamp(240px, 18vw, 274px) !important;
    padding: clamp(28px, 2.4vw, 40px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    border-radius: 18px !important;
  }
}
@media (min-width: 768px) {
  /* Uniform portal logo: contain, never stretch, anchored left */
  .home-media-section .card__container > a img {
    width: auto !important;
    height: auto !important;
    max-height: clamp(26px, 2vw, 34px) !important;
    max-width: clamp(110px, 9.5vw, 150px) !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    flex-shrink: 0;
  }
  /* Headline copy scales with viewport */
  .home-media-section .card__container > a p {
    font-size: clamp(14px, 1.05vw, 17px) !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   "Detalhes do Hardware" button — match mobile border style
   on the web/desktop version too.

   The Tailwind class on the button is `rounded-[74px]`, which on
   the desktop button (~64px tall) clamps to a soft pill. To make
   the desktop button match the mobile look (a crisp rounded
   rectangle with `border-radius: 10px`), we override the radius
   globally for this specific button.
   ============================================================ */
section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Botão para ir para a página do hardware"],
section .grid.grid-cols-1.lg\:grid-cols-2 a[aria-label="Button to go to the hardware page"] {
  border-radius: 10px !important;
}

/* ============================================================
   "Nossa trajetória de inovação" — 1-card-at-a-time stepper
   carousel that mirrors the "Psyche na mídia" section pattern.

   - Hides the decorative tiny-dot line (replaced by stepper).
   - Responsive card sizing via CSS variables that match the
     same `clamp()` curves used on the media cards, so cards
     scale together with the rest of the page content.
   - Cards centered via padding-inline; one card snapped at a
     time using `scroll-snap-type: x mandatory`.
   ============================================================ */
.timeline-container {
  overflow: hidden !important;
}

.timeline-card-container {
  --tl-card-w: 62vw;
  --tl-card-h: clamp(260px, 84vw, 340px);

  transform: none !important;
  -webkit-transform: none !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;

  overflow-x: auto !important;
  overflow-y: visible !important;
  width: 100% !important;

  /* Block padding > card-side breathing room → top/bottom borders
     of every card stay well inside the section. */
  padding: 36px calc((100% - var(--tl-card-w)) / 2) !important;
  gap: 14px !important;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scrollbar-width: none !important;
}
.timeline-card-container::-webkit-scrollbar { display: none; }

.timeline-card {
  min-width: var(--tl-card-w) !important;
  width: var(--tl-card-w) !important;
  max-width: var(--tl-card-w) !important;

  /* Strict height — every card has exactly this height, matching
     the visible/short look of the reference "OUT 2023" card. */
  height: var(--tl-card-h) !important;
  min-height: var(--tl-card-h) !important;
  max-height: var(--tl-card-h) !important;

  flex: 0 0 auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;

  filter: none !important;
  margin: 0 !important;

  /* Slightly brighter border so the rounded edges are visible against
     the dark page background. */
  border-color: rgba(255, 255, 255, 0.1) !important;

  /* Defensive: clip ANY descendant (image, gradient, text) to the
     card's rounded corners. Without this, the absolute-positioned
     <img min-w-full min-h-full object-cover> can overflow visually
     and hide the bottom rounded corners on some browsers. */
  overflow: hidden !important;
  position: relative !important;
}

/* Force every image inside a timeline card to match the card box
   exactly (no overflow, identical rounded corners for every card,
   regardless of intrinsic aspect-ratio from width/height attrs). */
.timeline-card > img,
.timeline-card img.absolute {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
  display: block !important;
}

/* All cards stay visible inside the carousel — disable the
   IntersectionObserver-driven reveal animation. */
.timeline-card,
.timeline-card.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile: lock the carousel — no manual horizontal scroll/swipe.
   Page vertical scrolling still passes through (`touch-action: pan-y`),
   and autoplay (JS-driven `scrollLeft`) keeps working even with
   `overflow: hidden`. */
@media (max-width: 767px) {
  .timeline-card-container {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    touch-action: pan-y !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }
  .timeline-card {
    pointer-events: none !important;
  }
}

/* Tablet sizing */
@media (min-width: 768px) {
  .timeline-card-container {
    --tl-card-w: clamp(220px, 28vw, 280px);
    --tl-card-h: clamp(300px, 36vw, 360px);
    padding-block: 48px !important;
  }
}

/* Desktop sizing — narrower portrait cards, comfortable height.
   Slightly taller than tablet so the photo breathes more on wide screens
   while still matching the visible/short feel of the reference card.
   Width unchanged → cards stay compact and aligned with stepper. */
@media (min-width: 1024px) {
  .timeline-card-container {
    --tl-card-w: clamp(240px, 18vw, 310px);
    --tl-card-h: clamp(380px, 26vw, 450px);
    padding-block: 56px !important;
  }
}

/* Hide the decorative tiny-dot line (replaced by stepper) */
.timeline-dots { display: none !important; }

/* Cloned cards (added by JS for seamless loop) inherit all card
   styles but should be ignored for assistive tech. */
.timeline-card--clone {
  scroll-snap-align: center;
}

/* ============================================================
   "Honey Badger" section (a-psyche / the-psyche) — mobile
   - Compact word stack and smaller fonts so the section stays
     compatible in size with other mobile sections.
   - Badger animal repositioned to sit between the two words
     inside the section so nothing overflows into the section
     above and the full image stays visible.
   ============================================================ */
@media (max-width: 767px) {
  .honey-badger-section {
    gap: 24px !important;
    padding: 24px 16px 8px !important;
  }
  .honey-badger-section > div:first-of-type {
    gap: 80px !important;
  }
  .honey-badger-section > div:first-of-type > p {
    font-size: 52px !important;
    line-height: 1 !important;
  }
  .honey-badger-section > div:first-of-type > img {
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    max-width: 110px !important;
    max-height: 100px !important;
  }
  .honey-badger-section > div:nth-of-type(2) > p:first-child {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    padding: 0 16px;
  }
  .honey-badger-section > div:nth-of-type(2) > p:not(:first-child) {
    font-size: 13px !important;
    line-height: 1.55 !important;
    padding: 0 18px;
    max-width: 360px;
  }
}