*, ::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 */
  tab-size: 4; /* 3 */
  font-family: "Plus Jakarta Sans", "Jakarta Fallback", sans-serif; /* 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]) {
  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::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;
}
    .lucide-icon { display: inline-block; flex-shrink: 0; }
            .glass-light { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.5); }
    .store-card {
  display: flex;
  min-width: 158px;
  align-items: center;
  gap: 0.75rem;
  border-radius: 11px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(230 224 238 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(38 34 52 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
    .store-card:hover {
  --tw-translate-y: -0.125rem;
  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));
}
    .store-card:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(58 50 73 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(33 29 44 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(243 237 249 / var(--tw-text-opacity, 1));
}
    .store-card-lg {
  min-width: 180px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
    .store-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  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;
}
    .store-pill:hover {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
    .store-pill:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.-bottom-32 {
  bottom: -8rem;
}
.-bottom-\[150px\] {
  bottom: -150px;
}
.-left-2 {
  left: -0.5rem;
}
.-left-24 {
  left: -6rem;
}
.-right-24 {
  right: -6rem;
}
.-top-24 {
  top: -6rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-20 {
  bottom: 5rem;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-\[180px\] {
  right: 180px;
}
.top-0 {
  top: 0px;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[70\] {
  z-index: 70;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mb-20 {
  margin-bottom: -5rem;
}
.-ml-20 {
  margin-left: -5rem;
}
.-mr-20 {
  margin-right: -5rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-20 {
  margin-top: -5rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-\[22px\] {
  margin-bottom: 22px;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-20 {
  height: 5rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-\[360px\] {
  height: 360px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[500px\] {
  height: 500px;
}
.h-full {
  height: 100%;
}
.min-h-full {
  min-height: 100%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-80 {
  width: 20rem;
}
.w-\[360px\] {
  width: 360px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[500px\] {
  width: 500px;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[300px\] {
  max-width: 300px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[85vw\] {
  max-width: 85vw;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.translate-x-full {
  --tw-translate-x: 100%;
  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-10 {
  --tw-translate-y: 2.5rem;
  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));
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse-slow {
  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  user-select: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.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-x-6 {
  column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-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-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[25px\] {
  border-radius: 25px;
}
.rounded-\[2rem\] {
  border-radius: 2rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-brand-accent\/30 {
  border-color: rgb(139 92 246 / 0.3);
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.bg-\[\#231a31\] {
  --tw-bg-opacity: 1;
  background-color: rgb(35 26 49 / var(--tw-bg-opacity, 1));
}
.bg-\[\#312442\] {
  --tw-bg-opacity: 1;
  background-color: rgb(49 36 66 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffaf2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 242 / var(--tw-bg-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-brand-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.bg-brand-accent\/10 {
  background-color: rgb(139 92 246 / 0.1);
}
.bg-brand-accent\/20 {
  background-color: rgb(139 92 246 / 0.2);
}
.bg-brand-light {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-brand-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
}
.bg-brand-secondary\/20 {
  background-color: rgb(244 114 182 / 0.2);
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-feature-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--feature-100) / var(--tw-bg-opacity, 1));
}
.bg-feature-400\/30 {
  background-color: rgb(var(--feature-400) / 0.3);
}
.bg-feature-500\/10 {
  background-color: rgb(var(--feature-500) / 0.1);
}
.bg-feature-500\/30 {
  background-color: rgb(var(--feature-500) / 0.3);
}
.bg-feature-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--feature-600) / var(--tw-bg-opacity, 1));
}
.bg-fuchsia-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 232 255 / var(--tw-bg-opacity, 1));
}
.bg-fuchsia-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 38 211 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-sky-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.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));
}
.from-brand-accent {
  --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-feature-500 {
  --tw-gradient-from: rgb(var(--feature-500) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--feature-500) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-50 {
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-brand-secondary {
  --tw-gradient-to: #f472b6 var(--tw-gradient-to-position);
}
.to-feature-700 {
  --tw-gradient-to: rgb(var(--feature-700) / 1) var(--tw-gradient-to-position);
}
.to-pink-50 {
  --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);
}
.bg-clip-text {
  background-clip: text;
}
.object-cover {
  object-fit: cover;
}
.object-top {
  object-position: top;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[30px\] {
  padding: 30px;
}
.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-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-3\.5 {
  padding-left: 0.875rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.font-sans {
  font-family: "Plus Jakarta Sans", "Jakarta Fallback", sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[420px\] {
  font-size: 420px;
}
.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-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-\[1\.16\] {
  line-height: 1.16;
}
.leading-\[1\.7\] {
  line-height: 1.7;
}
.leading-\[1\.8\] {
  line-height: 1.8;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[2px\] {
  letter-spacing: 2px;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-\[\#706a7c\] {
  --tw-text-opacity: 1;
  color: rgb(112 106 124 / var(--tw-text-opacity, 1));
}
.text-\[\#bcb0ca\] {
  --tw-text-opacity: 1;
  color: rgb(188 176 202 / var(--tw-text-opacity, 1));
}
.text-\[\#c4a6ff\] {
  --tw-text-opacity: 1;
  color: rgb(196 166 255 / var(--tw-text-opacity, 1));
}
.text-\[\#d2c7df\] {
  --tw-text-opacity: 1;
  color: rgb(210 199 223 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-brand-accent {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-brand-textLight {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-feature-200 {
  --tw-text-opacity: 1;
  color: rgb(var(--feature-200) / var(--tw-text-opacity, 1));
}
.text-feature-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--feature-300) / var(--tw-text-opacity, 1));
}
.text-feature-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--feature-600) / var(--tw-text-opacity, 1));
}
.text-feature-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--feature-700) / var(--tw-text-opacity, 1));
}
.text-fuchsia-600 {
  --tw-text-opacity: 1;
  color: rgb(192 38 211 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-indigo-100 {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / 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));
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/\[0\.02\] {
  color: rgb(255 255 255 / 0.02);
}
.accent-brand-accent {
  accent-color: #8b5cf6;
}
.opacity-0 {
  opacity: 0;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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-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-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-amber-500\/30 {
  --tw-shadow-color: rgb(245 158 11 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-500\/30 {
  --tw-shadow-color: rgb(16 185 129 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-feature-500\/30 {
  --tw-shadow-color: rgb(var(--feature-500) / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-fuchsia-500\/30 {
  --tw-shadow-color: rgb(217 70 239 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-green-500\/30 {
  --tw-shadow-color: rgb(34 197 94 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-500\/30 {
  --tw-shadow-color: rgb(99 102 241 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-orange-500\/30 {
  --tw-shadow-color: rgb(249 115 22 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/30 {
  --tw-shadow-color: rgb(168 85 247 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-sky-500\/30 {
  --tw-shadow-color: rgb(14 165 233 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-violet-500\/20 {
  --tw-shadow-color: rgb(139 92 246 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-violet-500\/25 {
  --tw-shadow-color: rgb(139 92 246 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-violet-500\/30 {
  --tw-shadow-color: rgb(139 92 246 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-violet-900\/10 {
  --tw-shadow-color: rgb(76 29 149 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline {
  outline-style: solid;
}
.blur-\[100px\] {
  --tw-blur: blur(100px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[110px\] {
  --tw-blur: blur(110px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[60px\] {
  --tw-blur: blur(60px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.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;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Plus Jakarta Sans - SIL Open Font License, see OFL.txt. Served from our own
   origin so the page never waits on fonts.googleapis.com. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('./jakarta-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('./jakarta-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Stand-in shown until Plus Jakarta Sans arrives (font-display: swap): Arial resized to
   Jakarta's widths and line heights, so text wraps the same way before and after the
   swap and nothing below it jumps (CLS). Measured in the browser against Jakarta:
   regular text is ~1-5% wider than Arial (102.5% sits in the middle), bold ~1% wider than Arial Bold; Jakarta's
   ascent/descent are 104%/22% of the font size (Arial: 91%/21%). The overrides are
   divided by size-adjust because the browser scales them by it. A bold face of its
   own matters: synthetic bold on regular Arial is narrower than real Arial Bold. */
@font-face {
    font-family: 'Jakarta Fallback';
    src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica');
    font-weight: 100 549;
    size-adjust: 102.5%;
    ascent-override: 101.5%;
    descent-override: 21.5%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Jakarta Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold');
    font-weight: 550 900;
    size-adjust: 101%;
    ascent-override: 103%;
    descent-override: 21.8%;
    line-gap-override: 0%;
}

/* feature-* colours (tailwind.config.js). Violet = brand default; feature pages and
   home feature sections override these with their own colour (build -> theme_style). */
:root {
    --feature-50: 245 243 255; --feature-100: 237 233 254; --feature-200: 221 214 254; --feature-300: 196 181 253; --feature-400: 167 139 250;
    --feature-500: 139 92 246; --feature-600: 124 58 237; --feature-700: 109 40 217; --feature-800: 91 33 182; --feature-900: 76 29 149;
}

/* Inlined Lucide icons: sized by the w-* and h-* utilities the markup already used.
   In the components layer so utilities (hidden, dark:block...) still win over it. */

        /* Anchor jumps (#faq, #shopping...) land below the fixed 80px navbar instead of under it */
        html { scroll-padding-top: 6rem; }

        /* In a layer so Tailwind generates dark:glass-dark - outside one, the markup's
           "glass-light dark:glass-dark" stayed white glass in dark mode. */

        .icon { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }

        .feature-frame { border-radius: 30px; overflow: hidden; position: relative; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3); aspect-ratio: 9/16; background: #1e293b; }
        .browser-frame { border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 28px 65px -18px rgba(79, 70, 229, 0.38); aspect-ratio: 16/10; background: #1e293b; border: 1px solid rgba(139, 92, 246, 0.22); }

        /* Phone mockup. The screenshots are 1170x2532 (iPhone, status bar included),
           so the screen box uses exactly that ratio and nothing gets cropped.
           The bezel and the Dynamic Island are drawn here, never baked into the image. */
        .phone-mock { position: relative; width: 100%; max-width: 290px; margin-inline: auto; padding: 3.2%; border-radius: 16% / 7.4%; background: linear-gradient(150deg, #3b4050 0%, #151821 45%, #0b0d12 100%); box-shadow: inset 0 0 0 1.5px #4b5162, inset 0 0 0 4px #0b0d12, 0 30px 60px -20px rgba(15, 23, 42, 0.55), 0 14px 28px -14px rgba(91, 33, 182, 0.35); }
        .phone-mock::before { content: ''; position: absolute; z-index: 3; top: 5.1%; left: 50%; width: 31%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; pointer-events: none; }
        .phone-mock::after { content: ''; position: absolute; top: 20%; right: -3px; width: 3px; height: 11%; border-radius: 0 3px 3px 0; background: #2a2e39; }
        .phone-screen { position: relative; overflow: hidden; aspect-ratio: 1170 / 2532; border-radius: 13% / 6%; background: #fff; }

        /* Swipeable screenshots (phone and browser). Plain scroll-snap: swipe works
           without JS; site.js only adds the dots and arrows. */
        .carousel-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .carousel-track::-webkit-scrollbar { display: none; }
        .carousel-track:focus-visible { outline: 3px solid rgb(var(--feature-500)); outline-offset: -3px; }
        .carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: top; scroll-snap-align: start; scroll-snap-stop: always; user-select: none; -webkit-user-drag: none; }
        .carousel-nav { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 0.6rem; min-height: 2.75rem; }
        .carousel-nav:empty { display: none; }
        .carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgb(var(--feature-500) / 0.3); background: rgba(255, 255, 255, 0.7); color: rgb(var(--feature-700)); transition: background 0.2s, opacity 0.2s; }
        .carousel-arrow:hover { background: rgb(var(--feature-100)); }
        .dark .carousel-arrow { background: rgba(30, 41, 59, 0.7); color: rgb(var(--feature-300)); border-color: rgb(var(--feature-300) / 0.25); }
        .carousel-dots { display: flex; }
        /* 24px wide (WCAG 2.2 target size, nine dots still fit a 320px screen) and 44px tall; the visible dot is drawn by ::before */
        .carousel-dot { display: grid; place-items: center; min-width: 1.5rem; height: 2.75rem; padding: 0 0.1rem; border-radius: 999px; }
        .carousel-dot::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: rgb(var(--feature-500) / 0.3); transition: width 0.25s, background 0.25s; }
        .carousel-dot:focus-visible { outline: 2px solid rgb(var(--feature-500)); outline-offset: 1px; }
        .carousel-dot[aria-current="true"]::before { width: 1.4rem; background: rgb(var(--feature-500)); }

        /* Download Modal */
        .download-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
        /* visible immediately on open (so focus can move into the dialog), hidden only after the fade-out */
        .download-modal-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
        .download-modal-overlay .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
        .download-modal { position: relative; z-index: 1; width: 90%; max-width: 420px; max-height: calc(100vh - 2rem); overflow-y: auto; border-radius: 1.5rem; padding: 2rem 1.5rem; transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .download-modal:focus { outline: none; }
        .download-modal-overlay.active .download-modal { transform: translateY(0) scale(1); }
        .download-modal-light { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 92, 246, 0.15); box-shadow: 0 25px 60px -12px rgba(139, 92, 246, 0.2), 0 0 0 1px rgba(255,255,255,0.7) inset; }
        .dark .download-modal-light { background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(139, 92, 246, 0.25); box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05) inset; }
        .download-btn-store { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 1rem; font-weight: 600; transition: all 0.25s ease; width: 100%; text-decoration: none; }
        .download-btn-store:hover { transform: translateY(-2px); }
        .download-btn-google { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: white; box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.3); }
        .download-btn-google:hover { box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, #222244 0%, #1a2a4e 100%); }
        .download-btn-apple { background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); color: white; box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.3); }
        .download-btn-apple:hover { box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, #111 0%, #222 100%); }
        .download-btn-chrome { background: linear-gradient(135deg, #4338ca 0%, #7c3aed 55%, #db2777 100%); color: white; box-shadow: 0 8px 20px -4px rgba(124, 58, 237, 0.4); }
        .download-btn-chrome:hover { box-shadow: 0 12px 28px -4px rgba(124, 58, 237, 0.5); filter: saturate(1.08); }
        .dark .download-btn-google { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border: 1px solid rgba(139, 92, 246, 0.2); }
        .dark .download-btn-google:hover { background: linear-gradient(135deg, #2a3a52 0%, #3d506a 100%); border-color: rgba(139, 92, 246, 0.4); }
        .dark .download-btn-apple { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border: 1px solid rgba(244, 114, 182, 0.2); }
        .dark .download-btn-apple:hover { background: linear-gradient(135deg, #2a3a52 0%, #3d506a 100%); border-color: rgba(244, 114, 182, 0.4); }
        .dark .download-btn-chrome { border: 1px solid rgba(196, 181, 253, 0.35); }
        .modal-glow { position: absolute; width: 150px; height: 150px; border-radius: 50%; filter: blur(60px); opacity: 0.3; pointer-events: none; }
        /* QR code in the download window: desktop visitors scan it to install on their phone.
           The SVG is always black on white, also in dark mode, so every camera can read it. */
        .download-qr { width: 112px; height: 112px; flex-shrink: 0; padding: 8px; border-radius: 0.75rem; background: #fff; box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.15); }
        .download-qr svg { display: block; width: 100%; height: 100%; }

        /* Mobile download bar (partials/sticky-cta.html). visibility:hidden also takes it out
           of the tab order and the accessibility tree while it is off screen. */
        .sticky-cta { position: fixed; left: 0.75rem; right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.625rem 0.625rem 0.75rem; border-radius: 1.25rem; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(139, 92, 246, 0.18); box-shadow: 0 12px 32px -8px rgba(76, 29, 149, 0.28); transform: translateY(calc(100% + 1.5rem)); visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; }
        .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform 0.3s ease, visibility 0s; }
        .dark .sticky-cta { background: rgba(15, 23, 42, 0.94); border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6); }
        @media (min-width: 1024px) { .sticky-cta { display: none; } }
        @media (prefers-reduced-motion: reduce) { .sticky-cta, .sticky-cta.is-visible { transition: none; } }

        /* Section eyebrow badge */
        .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

        /* Before / After compare slider.
           The "before" photo is the base layer; the "after" photo sits on top, clipped to the
           part left of the handle (--pos). So 0 = all Before, 100 = all After: moving toward the
           "Önce" end shows the before photo, toward "Sonra" the try-on result.
           Works without JS (static 50/50 split); JS only updates --pos. */
        .compare { --pos: 50%; position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; background: #1e293b; }
        .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
        .compare .compare-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
        .compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-50%); z-index: 5; pointer-events: none; }
        .compare-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
        .compare-handle::before { content: '⇔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6; font-size: 18px; color: #8b5cf6; font-weight: bold; }
        .compare-end { flex-shrink: 0; min-height: 2.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(15,23,42,0.75); color: #fff; padding: 6px 12px; border-radius: 999px; transition: background 0.2s; }
        .compare-end:hover { background: #8b5cf6; }
        .compare-end:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }

        /* FAQ accordion (native <details>, crawlable, no JS required) */
        .faq-item summary { cursor: pointer; list-style: none; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item .faq-chevron { transition: transform 0.2s ease; }
        .faq-item[open] .faq-chevron { transform: rotate(180deg); }

        .feature-bullet-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
        }
    
/* Store buttons (partials/store-buttons.html, footer-stores.html, feature mid CTA). */

/* Demo video (partials/demo-video.html). The <video> fills the phone screen or the
   browser frame; site.js swaps the native controls for the bar under the frame
   (seek, time, 5 s back / play-pause / 5 s forward). It sits outside the screen so it
   never covers the video's own captions. */
.demo-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #1e293b; }
.video-controls { margin-top: 1.25rem; color: #fff; }
.video-controls[hidden] { display: none; }
.video-seek { display: block; width: 100%; height: 1.5rem; margin: 0; accent-color: rgb(var(--feature-400)); cursor: pointer; }
.video-seek:disabled { cursor: default; opacity: 0.5; }
.video-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.35rem; }
.video-time { min-width: 2.75rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: #d2c7df; }
.video-time:last-child { text-align: right; }
.video-buttons { display: flex; align-items: center; gap: 0.75rem; }
.video-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; transition: background 0.2s; }
.video-btn:hover { background: rgba(255, 255, 255, 0.2); }
.video-btn:focus-visible, .video-seek:focus-visible { outline: 3px solid rgb(var(--feature-300)); outline-offset: 2px; }
.video-toggle { width: 3.25rem; height: 3.25rem; background: rgb(var(--feature-500)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.video-toggle:hover { background: rgb(var(--feature-600)); }
/* Second play/pause on the screen itself (bottom right, inside the rounded corner). */
.video-overlay { position: absolute; right: 1rem; bottom: 1rem; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.2s; }
.video-overlay[hidden] { display: none; }
.phone-mock .video-overlay { right: 11%; bottom: 5.5%; }
.video-overlay:hover { background: rgba(15, 23, 42, 0.9); }
.video-overlay:focus-visible { outline: 3px solid rgb(var(--feature-300)); outline-offset: 2px; }
[data-video-toggle] .video-icon-pause, [data-video-toggle][data-state="playing"] .video-icon-play { display: none; }
[data-video-toggle][data-state="playing"] .video-icon-pause { display: inline-block; }

/* Numbered step bubbles on the feature pages ("How it works" list). */
.step-number { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }

/* Japanese: the Latin headline tracking is too tight for kana/kanji, and lines should break
   between phrases (auto-phrase, Chromium) or at least by the strict kinsoku rules elsewhere. */
:lang(ja) { line-break: strict; word-break: auto-phrase; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .tracking-tight, :lang(ja) .tracking-tighter { letter-spacing: 0; text-wrap: balance; }
:lang(ja) h1 { line-height: 1.3; }

/* Korean: words are space-separated, so break between words only (keep-all) instead of mid-word,
   and loosen the headline tracking that is tuned for Latin letters. */
:lang(ko) { word-break: keep-all; line-break: strict; }
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .tracking-tight, :lang(ko) .tracking-tighter { letter-spacing: 0; text-wrap: balance; }
:lang(ko) h1 { line-height: 1.3; }
            .dark\:glass-dark:is(.dark *) { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
.selection\:bg-brand-accent *::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.selection\:bg-feature-500 *::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--feature-500) / var(--tw-bg-opacity, 1));
}
.selection\:text-white *::selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.selection\:bg-brand-accent::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.selection\:bg-feature-500::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--feature-500) / var(--tw-bg-opacity, 1));
}
.selection\:text-white::selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  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));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  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));
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}
.hover\:border-amber-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-accent:hover {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.hover\:border-feature-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--feature-500) / var(--tw-border-opacity, 1));
}
.hover\:border-fuchsia-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 70 239 / var(--tw-border-opacity, 1));
}
.hover\:border-indigo-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.hover\:border-orange-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.hover\:border-purple-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.hover\:border-sky-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-accent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-feature-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--feature-700) / var(--tw-bg-opacity, 1));
}
.hover\:bg-fuchsia-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(162 28 175 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-sky-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}
.hover\:text-brand-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.hover\:text-feature-600:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--feature-600) / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:shadow-lg:hover {
  --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);
}
.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-pink-500\/25:hover {
  --tw-shadow-color: rgb(236 72 153 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus\:fixed:focus {
  position: fixed;
}
.focus\:left-3:focus {
  left: 0.75rem;
}
.focus\:top-3:focus {
  top: 0.75rem;
}
.focus\:z-\[300\]:focus {
  z-index: 300;
}
.focus\:rounded-lg:focus {
  border-radius: 0.5rem;
}
.focus\:bg-brand-accent:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.focus\:bg-feature-600:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--feature-600) / var(--tw-bg-opacity, 1));
}
.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}
.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.focus\:font-semibold:focus {
  font-weight: 600;
}
.focus\:text-white:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:visible {
  visibility: visible;
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.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));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {

  .motion-safe\:scroll-smooth {
    scroll-behavior: smooth;
  }
}
.dark\:block:is(.dark *) {
  display: block;
}
.dark\:hidden:is(.dark *) {
  display: none;
}
.dark\:border-amber-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.dark\:border-indigo-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 48 163 / var(--tw-border-opacity, 1));
}
.dark\:border-orange-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(154 52 18 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.dark\:bg-\[\#0b1120\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 17 32 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#0f172a\]\/50:is(.dark *) {
  background-color: rgb(15 23 42 / 0.5);
}
.dark\:bg-\[\#1c1722\]\/70:is(.dark *) {
  background-color: rgb(28 23 34 / 0.7);
}
.dark\:bg-amber-900\/30:is(.dark *) {
  background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-brand-dark:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:bg-emerald-900\/30:is(.dark *) {
  background-color: rgb(6 78 59 / 0.3);
}
.dark\:bg-feature-900\/40:is(.dark *) {
  background-color: rgb(var(--feature-900) / 0.4);
}
.dark\:bg-fuchsia-900\/30:is(.dark *) {
  background-color: rgb(112 26 117 / 0.3);
}
.dark\:bg-green-900\/30:is(.dark *) {
  background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-indigo-900\/40:is(.dark *) {
  background-color: rgb(49 46 129 / 0.4);
}
.dark\:bg-orange-900\/20:is(.dark *) {
  background-color: rgb(124 45 18 / 0.2);
}
.dark\:bg-orange-900\/30:is(.dark *) {
  background-color: rgb(124 45 18 / 0.3);
}
.dark\:bg-purple-900\/30:is(.dark *) {
  background-color: rgb(88 28 135 / 0.3);
}
.dark\:bg-sky-900\/30:is(.dark *) {
  background-color: rgb(12 74 110 / 0.3);
}
.dark\:bg-slate-700\/60:is(.dark *) {
  background-color: rgb(51 65 85 / 0.6);
}
.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-800\/40:is(.dark *) {
  background-color: rgb(30 41 59 / 0.4);
}
.dark\:bg-slate-800\/50:is(.dark *) {
  background-color: rgb(30 41 59 / 0.5);
}
.dark\:bg-slate-800\/60:is(.dark *) {
  background-color: rgb(30 41 59 / 0.6);
}
.dark\:bg-slate-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-900\/30:is(.dark *) {
  background-color: rgb(15 23 42 / 0.3);
}
.dark\:bg-violet-900\/30:is(.dark *) {
  background-color: rgb(76 29 149 / 0.3);
}
.dark\:from-indigo-950\/30:is(.dark *) {
  --tw-gradient-from: rgb(30 27 75 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:via-slate-900:is(.dark *) {
  --tw-gradient-to: rgb(15 23 42 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:to-pink-950\/20:is(.dark *) {
  --tw-gradient-to: rgb(80 7 36 / 0.2) var(--tw-gradient-to-position);
}
.dark\:text-\[\#b9afc7\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(185 175 199 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-brand-textDark:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-feature-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--feature-300) / var(--tw-text-opacity, 1));
}
.dark\:text-feature-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--feature-400) / var(--tw-text-opacity, 1));
}
.dark\:text-fuchsia-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(232 121 249 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-sky-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-slate-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:text-gray-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
@media (min-width: 360px) {

  .min-\[360px\]\:-left-4 {
    left: -1rem;
  }
}
@media (min-width: 640px) {

  .sm\:-left-7 {
    left: -1.75rem;
  }

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mb-16 {
    margin-bottom: 4rem;
  }

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

  .sm\:flex {
    display: flex;
  }

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

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

  .sm\:max-w-sm {
    max-width: 24rem;
  }

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

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

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

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

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

  .sm\:rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }

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

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:pb-\[70px\] {
    padding-bottom: 70px;
  }

  .sm\:pt-20 {
    padding-top: 5rem;
  }

  .sm\:text-center {
    text-align: center;
  }

  .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-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

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

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

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

  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }

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

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

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

  .md\:flex-col {
    flex-direction: column;
  }

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

  .md\:justify-between {
    justify-content: space-between;
  }

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

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

  .md\:p-12 {
    padding: 3rem;
  }

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

  .md\:text-left {
    text-align: left;
  }

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

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

  .md\:text-\[39px\] {
    font-size: 39px;
  }
}
@media (min-width: 1024px) {

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

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

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

  .lg\:flex-col {
    flex-direction: column;
  }

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

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

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

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

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

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

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

  .lg\:pb-20 {
    padding-bottom: 5rem;
  }

  .lg\:pb-24 {
    padding-bottom: 6rem;
  }

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

  .lg\:pt-36 {
    padding-top: 9rem;
  }

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

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

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}
@media (min-width: 1101px) {

  .min-\[1101px\]\:flex-row {
    flex-direction: row;
  }

  .min-\[1101px\]\:px-\[60px\] {
    padding-left: 60px;
    padding-right: 60px;
  }

  .min-\[1101px\]\:py-\[52px\] {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}
@media (min-width: 1280px) {

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

  .xl\:items-center {
    align-items: center;
  }
}
@media not all and (min-width: 640px) {

  .max-sm\:\[\&\>a\]\:w-full>a {
    width: 100%;
  }
}