/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
.pointer-events-auto {
  pointer-events: auto;
}
.pointer-events-none {
  pointer-events: none;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.static {
  position: static;
}
.-top-\[20\%\] {
  top: calc(20% * -1);
}
.-top-\[100\%\] {
  top: calc(100% * -1);
}
.top-1\/2 {
  top: calc(1 / 2 * 100%);
}
.top-\[1px\] {
  top: 1px;
}
.top-\[10\%\] {
  top: 10%;
}
.top-\[30\%\] {
  top: 30%;
}
.top-\[40\%\] {
  top: 40%;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.-right-\[20\%\] {
  right: calc(20% * -1);
}
.right-\[10\%\] {
  right: 10%;
}
.right-\[15\%\] {
  right: 15%;
}
.right-\[30\%\] {
  right: 30%;
}
.-bottom-\[20\%\] {
  bottom: calc(20% * -1);
}
.bottom-\[10\%\] {
  bottom: 10%;
}
.bottom-\[20\%\] {
  bottom: 20%;
}
.-left-\[10\%\] {
  left: calc(10% * -1);
}
.left-1\/2 {
  left: calc(1 / 2 * 100%);
}
.left-1\/4 {
  left: calc(1 / 4 * 100%);
}
.left-\[10\%\] {
  left: 10%;
}
.left-\[20\%\] {
  left: 20%;
}
.left-\[50\%\] {
  left: 50%;
}
.-z-10 {
  z-index: calc(10 * -1);
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[90\] {
  z-index: 90;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[9999\] {
  z-index: 9999;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.container {
  width: 100%;
}
.mx-auto {
  margin-inline: auto;
}
.mt-auto {
  margin-top: auto;
}
.ml-auto {
  margin-left: auto;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.aspect-\[3\/4\] {
  aspect-ratio: 3/4;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.size-\(--cell-size\) {
  width: var(--cell-size);
  height: var(--cell-size);
}
.h-\(--cell-size\) {
  height: var(--cell-size);
}
.h-1\/3 {
  height: calc(1 / 3 * 100%);
}
.h-\[1px\] {
  height: 1px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[25\%\] {
  height: 25%;
}
.h-\[30\%\] {
  height: 30%;
}
.h-\[35\%\] {
  height: 35%;
}
.h-\[40\%\] {
  height: 40%;
}
.h-\[40vh\] {
  height: 40vh;
}
.h-\[50vw\] {
  height: 50vw;
}
.h-\[60vw\] {
  height: 60vw;
}
.h-\[70vw\] {
  height: 70vw;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[350px\] {
  height: 350px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[800px\] {
  height: 800px;
}
.h-\[1000px\] {
  height: 1000px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-\(--radix-context-menu-content-available-height\) {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\(--radix-select-content-available-height\) {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.min-h-\[40vh\] {
  min-height: 40vh;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-\(--cell-size\) {
  width: var(--cell-size);
}
.w-\(--sidebar-width\) {
  width: var(--sidebar-width);
}
.w-1\/3 {
  width: calc(1 / 3 * 100%);
}
.w-2\/3 {
  width: calc(2 / 3 * 100%);
}
.w-3\/4 {
  width: calc(3 / 4 * 100%);
}
.w-\[1px\] {
  width: 1px;
}
.w-\[25\%\] {
  width: 25%;
}
.w-\[30\%\] {
  width: 30%;
}
.w-\[35\%\] {
  width: 35%;
}
.w-\[40\%\] {
  width: 40%;
}
.w-\[50vw\] {
  width: 50vw;
}
.w-\[60vw\] {
  width: 60vw;
}
.w-\[70vw\] {
  width: 70vw;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[450px\] {
  width: 450px;
}
.w-\[500px\] {
  width: 500px;
}
.w-\[600px\] {
  width: 600px;
}
.w-\[800px\] {
  width: 800px;
}
.w-\[1000px\] {
  width: 1000px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: max-content;
}
.w-px {
  width: 1px;
}
.max-w-\(--skeleton-width\) {
  max-width: var(--skeleton-width);
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[540px\] {
  max-width: 540px;
}
.max-w-\[600px\] {
  max-width: 600px;
}
.max-w-\[620px\] {
  max-width: 620px;
}
.max-w-\[700px\] {
  max-width: 700px;
}
.max-w-\[800px\] {
  max-width: 800px;
}
.max-w-\[1000px\] {
  max-width: 1000px;
}
.max-w-\[1200px\] {
  max-width: 1200px;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-max {
  max-width: max-content;
}
.max-w-none {
  max-width: none;
}
.min-w-\(--cell-size\) {
  min-width: var(--cell-size);
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.flex-1 {
  flex: 1;
}
.flex-\[0_0_100\%\] {
  flex: 0 0 100%;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\(--radix-context-menu-content-transform-origin\) {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\(--radix-dropdown-menu-content-transform-origin\) {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\(--radix-hover-card-content-transform-origin\) {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\(--radix-menubar-content-transform-origin\) {
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\(--radix-popover-content-transform-origin\) {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\(--radix-select-content-transform-origin\) {
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\(--radix-tooltip-content-transform-origin\) {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-1\/3 {
  --tw-translate-x: calc(calc(1 / 3 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-1\/4 {
  --tw-translate-x: calc(calc(1 / 4 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-px {
  --tw-translate-x: -1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-1\/3 {
  --tw-translate-x: calc(1 / 3 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-1\/4 {
  --tw-translate-x: calc(1 / 4 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-px {
  --tw-translate-x: 1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/3 {
  --tw-translate-y: calc(calc(1 / 3 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/4 {
  --tw-translate-y: calc(calc(1 / 4 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-1\/3 {
  --tw-translate-y: calc(1 / 3 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-1\/4 {
  --tw-translate-y: calc(1 / 4 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\!scale-110 {
  --tw-scale-x: 110% !important;
  --tw-scale-y: 110% !important;
  --tw-scale-z: 110% !important;
  scale: var(--tw-scale-x) var(--tw-scale-y) !important;
}
.scale-50 {
  --tw-scale-x: 50%;
  --tw-scale-y: 50%;
  --tw-scale-z: 50%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-75 {
  --tw-scale-x: 75%;
  --tw-scale-y: 75%;
  --tw-scale-z: 75%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-95 {
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-100 {
  --tw-scale-x: 100%;
  --tw-scale-y: 100%;
  --tw-scale-z: 100%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-110 {
  --tw-scale-x: 110%;
  --tw-scale-y: 110%;
  --tw-scale-z: 110%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.-rotate-6 {
  rotate: calc(6deg * -1);
}
.-rotate-12 {
  rotate: calc(12deg * -1);
}
.rotate-6 {
  rotate: 6deg;
}
.rotate-12 {
  rotate: 12deg;
}
.rotate-45 {
  rotate: 45deg;
}
.rotate-90 {
  rotate: 90deg;
}
.rotate-\[24deg\] {
  rotate: 24deg;
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-pan-y {
  --tw-pan-y: pan-y;
  touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
}
.touch-none {
  touch-action: none;
}
.resize {
  resize: both;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-content-center {
  place-content: center;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.self-start {
  align-self: flex-start;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[24px\] {
  border-radius: 24px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-none {
  border-radius: 0;
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-style: var(--tw-border-style);
  border-width: 1.5px;
}
.border-\[1px\] {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-y {
  border-block-style: var(--tw-border-style);
  border-block-width: 1px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
}
.border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}
.border-none {
  --tw-border-style: none;
  border-style: none;
}
.border-\(--color-border\) {
  border-color: var(--color-border);
}
.border-\[\#5a22d4\] {
  border-color: #5a22d4;
}
.border-\[\#5a22d4\]\/40 {
  border-color: color-mix(in oklab, #5a22d4 40%, transparent);
}
.border-\[\#5a22d4\]\/50 {
  border-color: color-mix(in oklab, #5a22d4 50%, transparent);
}
.border-\[\#301968\]\/40 {
  border-color: color-mix(in oklab, #301968 40%, transparent);
}
.border-transparent {
  border-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.bg-\(--color-bg\) {
  background-color: var(--color-bg);
}
.bg-\[\#0a0a0a\] {
  background-color: #0a0a0a;
}
.bg-\[\#0ea5e9\]\/30 {
  background-color: color-mix(in oklab, #0ea5e9 30%, transparent);
}
.bg-\[\#000000\] {
  background-color: #000000;
}
.bg-\[\#3b82f6\]\/20 {
  background-color: color-mix(in oklab, #3b82f6 20%, transparent);
}
.bg-\[\#5a22d4\] {
  background-color: #5a22d4;
}
.bg-\[\#5a22d4\]\/10 {
  background-color: color-mix(in oklab, #5a22d4 10%, transparent);
}
.bg-\[\#5a22d4\]\/20 {
  background-color: color-mix(in oklab, #5a22d4 20%, transparent);
}
.bg-\[\#5a22d4\]\/30 {
  background-color: color-mix(in oklab, #5a22d4 30%, transparent);
}
.bg-\[\#5a22d4\]\/40 {
  background-color: color-mix(in oklab, #5a22d4 40%, transparent);
}
.bg-\[\#5a22d4\]\/60 {
  background-color: color-mix(in oklab, #5a22d4 60%, transparent);
}
.bg-\[\#06b6d4\]\/20 {
  background-color: color-mix(in oklab, #06b6d4 20%, transparent);
}
.bg-\[\#8b5cf6\]\/50 {
  background-color: color-mix(in oklab, #8b5cf6 50%, transparent);
}
.bg-\[\#111\] {
  background-color: #111;
}
.bg-\[\#020617\] {
  background-color: #020617;
}
.bg-\[\#050505\] {
  background-color: #050505;
}
.bg-\[\#070707\] {
  background-color: #070707;
}
.bg-\[\#d4229b\]\/5 {
  background-color: color-mix(in oklab, #d4229b 5%, transparent);
}
.bg-\[\#d4229b\]\/10 {
  background-color: color-mix(in oklab, #d4229b 10%, transparent);
}
.bg-transparent {
  background-color: transparent;
}
.bg-gradient-to-b {
  --tw-gradient-position: to bottom in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  --tw-gradient-position: to top in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-\[\#1a1a1a\] {
  --tw-gradient-from: #1a1a1a;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-\[\#6C4CF5\] {
  --tw-gradient-from: #6C4CF5;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-\[\#9b6ef9\] {
  --tw-gradient-from: #9b6ef9;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-\[\#14082c\] {
  --tw-gradient-from: #14082c;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-\[\#090314\] {
  --tw-gradient-from: #090314;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-\[\#111\] {
  --tw-gradient-via: #111;
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.to-\[\#0a0a0a\] {
  --tw-gradient-to: #0a0a0a;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[\#8B5CF6\] {
  --tw-gradient-to: #8B5CF6;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[\#7139f5\] {
  --tw-gradient-to: #7139f5;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[\#14082c\] {
  --tw-gradient-to: #14082c;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[\#090314\] {
  --tw-gradient-to: #090314;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-transparent {
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.bg-cover {
  background-size: cover;
}
.bg-clip-text {
  background-clip: text;
}
.bg-center {
  background-position: center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentcolor;
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.p-\[1px\] {
  padding: 1px;
}
.px-\(--cell-size\) {
  padding-inline: var(--cell-size);
}
.px-\[16px\] {
  padding-inline: 16px;
}
.py-\[14px\] {
  padding-block: 14px;
}
.py-\[17px\] {
  padding-block: 17px;
}
.pt-\[4\.5rem\] {
  padding-top: 4.5rem;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.align-bottom {
  vertical-align: bottom;
}
.align-middle {
  vertical-align: middle;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[6\.5px\] {
  font-size: 6.5px;
}
.text-\[6vw\] {
  font-size: 6vw;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[7vw\] {
  font-size: 7vw;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9\.5vw\] {
  font-size: 9.5vw;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[60px\] {
  font-size: 60px;
}
.leading-\[1\.1\] {
  --tw-leading: 1.1;
  line-height: 1.1;
}
.leading-\[1\.6\] {
  --tw-leading: 1.6;
  line-height: 1.6;
}
.leading-\[1\.15\] {
  --tw-leading: 1.15;
  line-height: 1.15;
}
.leading-\[1\.25\] {
  --tw-leading: 1.25;
  line-height: 1.25;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.tracking-\[0\.1em\] {
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
}
.tracking-\[0\.2em\] {
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
}
.tracking-\[0\.5px\] {
  --tw-tracking: 0.5px;
  letter-spacing: 0.5px;
}
.tracking-\[0\.12em\] {
  --tw-tracking: 0.12em;
  letter-spacing: 0.12em;
}
.tracking-\[0\.15em\] {
  --tw-tracking: 0.15em;
  letter-spacing: 0.15em;
}
.tracking-\[1px\] {
  --tw-tracking: 1px;
  letter-spacing: 1px;
}
.break-words {
  overflow-wrap: break-word;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-\[\#5a22d4\] {
  color: #5a22d4;
}
.text-\[\#8b5cf6\] {
  color: #8b5cf6;
}
.text-\[\#8f8f9a\] {
  color: #8f8f9a;
}
.text-\[\#333\] {
  color: #333;
}
.text-\[\#888\] {
  color: #888;
}
.text-\[\#050505\] {
  color: #050505;
}
.text-\[\#a8a8a8\] {
  color: #a8a8a8;
}
.text-\[\#ffffff\] {
  color: #ffffff;
}
.text-current {
  color: currentcolor;
}
.text-transparent {
  color: transparent;
}
.uppercase {
  text-transform: uppercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0%;
}
.opacity-10 {
  opacity: 10%;
}
.opacity-15 {
  opacity: 15%;
}
.opacity-20 {
  opacity: 20%;
}
.opacity-30 {
  opacity: 30%;
}
.opacity-40 {
  opacity: 40%;
}
.opacity-50 {
  opacity: 50%;
}
.opacity-60 {
  opacity: 60%;
}
.opacity-70 {
  opacity: 70%;
}
.opacity-80 {
  opacity: 80%;
}
.opacity-100 {
  opacity: 100%;
}
.opacity-\[0\.02\] {
  opacity: 0.02;
}
.mix-blend-multiply {
  mix-blend-mode: multiply;
}
.mix-blend-overlay {
  mix-blend-mode: overlay;
}
.mix-blend-screen {
  mix-blend-mode: screen;
}
.shadow-\[0_0_0_1px_var\(--sidebar-border\)\] {
  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(255\,255\,255\,0\.5\)\] {
  --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(255,255,255,0.5));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_15px_rgba\(255\,255\,255\,0\.2\)\] {
  --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(255,255,255,0.2));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.5\)\] {
  --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(0,0,0,0.5));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(90\,34\,212\,0\.15\)\] {
  --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(90,34,212,0.15));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_8px_32px_0_rgba\(0\,0\,0\,0\.36\)\] {
  --tw-shadow: 0 8px 32px 0 var(--tw-shadow-color, rgba(0,0,0,0.36));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[inset_0_1px_1px_rgba\(255\,255\,255\,0\.4\)\] {
  --tw-shadow: inset 0 1px 1px var(--tw-shadow-color, rgba(255,255,255,0.4));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[inset_0_2px_4px_rgba\(0\,0\,0\,0\.1\)\] {
  --tw-shadow: inset 0 2px 4px var(--tw-shadow-color, rgba(0,0,0,0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-0 {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-1 {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.blur-\[4px\] {
  --tw-blur: blur(4px);
  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-\[50px\] {
  --tw-blur: blur(50px);
  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,);
}
.blur-\[120px\] {
  --tw-blur: blur(120px);
  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-\[140px\] {
  --tw-blur: blur(140px);
  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-\[150px\] {
  --tw-blur: blur(150px);
  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-\[180px\] {
  --tw-blur: blur(180px);
  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-\[200px\] {
  --tw-blur: blur(200px);
  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-none {
  --tw-blur:  ;
  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,);
}
.contrast-125 {
  --tw-contrast: contrast(125%);
  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,);
}
.\!grayscale-0 {
  --tw-grayscale: grayscale(0%) !important;
  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,) !important;
}
.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,);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.saturate-50 {
  --tw-saturate: saturate(50%);
  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-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-\[left\,right\,width\] {
  transition-property: left,right,width;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-\[margin\,opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-\[width\,height\,padding\] {
  transition-property: width,height,padding;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.delay-0 {
  transition-delay: 0ms;
}
.delay-300 {
  transition-delay: 300ms;
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.duration-500 {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.duration-700 {
  --tw-duration: 700ms;
  transition-duration: 700ms;
}
.duration-1000 {
  --tw-duration: 1000ms;
  transition-duration: 1000ms;
}
.duration-\[1s\] {
  --tw-duration: 1s;
  transition-duration: 1s;
}
.ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
  --tw-ease: cubic-bezier(0.16,1,0.3,1);
  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
}
.ease-linear {
  --tw-ease: linear;
  transition-timing-function: linear;
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.select-none {
  -webkit-user-select: none;
  user-select: none;
}
.\[--cell-size\:2rem\] {
  --cell-size: 2rem;
}
.perspective-\[2000px\] {
  perspective: 2000px;
}
.group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
  opacity: 100%;
}
@media (hover: hover) {
  .group-hover\:scale-110:is(:where(.group):hover *) {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .group-hover\:opacity-100:is(:where(.group):hover *) {
    opacity: 100%;
  }
  .group-hover\:grayscale-0:is(:where(.group):hover *) {
    --tw-grayscale: grayscale(0%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
    opacity: 100%;
  }
}
.group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *) {
  display: none;
}
.group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible="icon"] *) {
  width: var(--sidebar-width-icon);
}
.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible="icon"] *) {
  width: calc(var(--sidebar-width-icon) + 1rem);
}
.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) {
  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}
.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *) {
  overflow: hidden;
}
.group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *) {
  opacity: 0%;
}
.group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
  right: calc(var(--sidebar-width) * -1);
}
.group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
  left: calc(var(--sidebar-width) * -1);
}
.group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) {
  position: relative;
}
.group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) {
  z-index: 10;
}
.group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *) {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *) {
  rotate: 180deg;
}
.group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *) {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
  rotate: 180deg;
}
.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
  cursor: not-allowed;
}
.peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
  opacity: 70%;
}
.file\:border-0::file-selector-button {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: calc(1 / 2 * 100%);
}
.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *)::after {
  content: var(--tw-content);
  left: 100%;
}
.first\:border-l:first-child {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
@media (hover: hover) {
  .hover\:scale-105:hover {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .hover\:border-\[\#5a22d4\]:hover {
    border-color: #5a22d4;
  }
  .hover\:border-\[\#8b5cf6\]:hover {
    border-color: #8b5cf6;
  }
  .hover\:bg-\[\#8b5cf6\]:hover {
    background-color: #8b5cf6;
  }
  .hover\:tracking-\[0\.2em\]:hover {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .hover\:tracking-\[0\.3em\]:hover {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .hover\:text-\[\#5a22d4\]:hover {
    color: #5a22d4;
  }
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
  .hover\:opacity-100:hover {
    opacity: 100%;
  }
  .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hover\:shadow-\[0_0_25px_rgba\(255\,255\,255\,0\.4\)\]:hover {
    --tw-shadow: 0 0 25px var(--tw-shadow-color, rgba(255,255,255,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hover\:shadow-\[0_0_30px_rgba\(139\,92\,246\,0\.4\)\]:hover {
    --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(139,92,246,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hover\:brightness-110:hover {
    --tw-brightness: brightness(110%);
    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,);
  }
}
.focus\:ring-1:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-2:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus\:outline-none:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-visible\:outline-none:focus-visible {
  --tw-outline-style: none;
  outline-style: none;
}
.active\:scale-95:active {
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.active\:scale-\[0\.98\]:active {
  scale: 0.98;
}
.active\:border-\[\#8b5cf6\]:active {
  border-color: #8b5cf6;
}
.active\:bg-\[\#8b5cf6\]:active {
  background-color: #8b5cf6;
}
.active\:shadow-\[0_0_30px_rgba\(139\,92\,246\,0\.4\)\]:active {
  --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(139,92,246,0.4));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.active\:duration-0:active {
  --tw-duration: 0ms;
  transition-duration: 0ms;
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 50%;
}
.has-focus\:ring-\[3px\]:has(:focus) {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.has-\[\:disabled\]\:opacity-50:has(:is(:disabled)) {
  opacity: 50%;
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 50%;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 50%;
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 50%;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0;
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0;
}
.data-\[state\=closed\]\:animate-\[accordion-up_0\.5s_cubic-bezier\(0\.16\,1\,0\.3\,1\)\][data-state="closed"] {
  animation: accordion-up 0.5s cubic-bezier(0.16,1,0.3,1);
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.data-\[state\=open\]\:animate-\[accordion-down_0\.5s_cubic-bezier\(0\.16\,1\,0\.3\,1\)\][data-state="open"] {
  animation: accordion-down 0.5s cubic-bezier(0.16,1,0.3,1);
}
.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 100%;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
  --tw-outline-style: none;
  outline-style: none;
}
.\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
  --tw-outline-style: none;
  outline-style: none;
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
  --tw-outline-style: none;
  outline-style: none;
}
.\[\&_a\]\:text-\[\#5a22d4\] a {
  color: #5a22d4;
}
.\[\&_a\:hover\]\:underline a:hover {
  text-decoration-line: underline;
}
.\[\&_blockquote\]\:\!w-full blockquote {
  width: 100% !important;
}
.\[\&_blockquote\]\:\!min-w-full blockquote {
  min-width: 100% !important;
}
.\[\&_iframe\]\:\!w-full iframe {
  width: 100% !important;
}
.\[\&_iframe\]\:\!min-w-full iframe {
  min-width: 100% !important;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
:is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg) {
  rotate: 180deg;
}
:is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
  rotate: 180deg;
}
.\[\&\>\*\]\:pointer-events-auto > * {
  pointer-events: auto;
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role=checkbox] {
  --tw-translate-y: 2px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\[\&\>button\]\:hidden > button {
  display: none;
}
.\[\&\>span\]\:line-clamp-1 > span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>span\]\:opacity-70 > span {
  opacity: 70%;
}
.\[\&\>span\:last-child\]\:truncate > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\[\&\>svg\]\:absolute > svg {
  position: absolute;
}
.\[\&\>svg\]\:shrink-0 > svg {
  flex-shrink: 0;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\] > svg + div {
  --tw-translate-y: -3px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
}
.\[\&\>ul\]\:list-disc > ul {
  list-style-type: disc;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical] > div {
  rotate: 90deg;
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open] > svg {
  rotate: 180deg;
}
[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
@layer utilities {
  .vz-animate-fadein {
    opacity: 0;
    transform: translateY(20px);
  }
  .vz-animate-slideup {
    opacity: 0;
    transform: translateY(40px);
  }
  .vz-animate-textreveal {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(20px);
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-x {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));
@custom-variant hover (&:hover, &:active);

/*
 * Design system definition.
 *
 * The @theme inline block maps CSS custom properties to Tailwind utility
 * classes (e.g. --color-primary -> bg-primary, text-primary).
 *
 * The :root and .dark blocks define the actual color values using oklch.
 * All colors MUST use oklch format.
 *
 * To add a new semantic color:
 * 1. Add the variable to :root (light value) and .dark (dark value)
 * 2. Register it in @theme inline as --color-<name>: var(--<name>)
 */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.35rem;
  --background: oklch(0.14 0.005 60);
  --foreground: oklch(0.96 0.004 80);
  --card: oklch(0.17 0.006 60);
  --card-foreground: oklch(0.96 0.004 80);
  --popover: oklch(0.17 0.006 60);
  --popover-foreground: oklch(0.96 0.004 80);
  --primary: oklch(0.74 0.17 52);
  --primary-foreground: oklch(0.15 0.02 50);
  --secondary: oklch(0.22 0.008 60);
  --secondary-foreground: oklch(0.96 0.004 80);
  --muted: oklch(0.22 0.008 60);
  --muted-foreground: oklch(0.62 0.008 70);
  --accent: oklch(0.74 0.17 52);
  --accent-foreground: oklch(0.15 0.02 50);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.28 0.006 60);
  --input: oklch(0.28 0.006 60);
  --ring: oklch(0.74 0.17 52);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
}

@theme {
  --font-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Manrope", ui-monospace, monospace;
  --font-roboto: "Roboto", sans-serif;
}

/* ---------- Motion system ---------- */

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes vz-rise {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes vz-wipe {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes vz-scale-bleed {
  from {
    transform: scale(1.12);
    filter: brightness(0.5) saturate(0.6);
  }
  to {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}

@keyframes vz-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes vz-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.06);
  }
  50% {
    transform: translate3d(-1.5%, -1%, 0) scale(1.12);
  }
}

@keyframes vz-char {
  from {
    opacity: 0;
    transform: translateY(105%) rotate(4deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }
}

@utility vz-char {
  opacity: 0;
  animation: vz-char 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes vz-tile {
  from {
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
    filter: blur(5px);
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    transform: scale(1);
  }
}

@utility vz-tile {
  opacity: 0;
  [data-shown="true"] & {
    animation: vz-tile 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

.vz-rise {
  opacity: 0;
  animation: vz-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.vz-wipe {
  animation: vz-wipe 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.vz-bleed {
  animation: vz-scale-bleed 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.vz-drift {
  animation: vz-drift 26s ease-in-out infinite !important;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.vz-marquee {
  display: flex !important;
  width: max-content !important;
  animation: vz-marquee 60s linear infinite !important;
  will-change: transform;
}


/* hover: line sweep under label */
@utility vz-link {
  position: relative;
  display: inline-block;
  color: var(--muted-foreground);
  transition: color 0.4s ease;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  &:hover {
    color: var(--foreground);
  }
  &:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* top bar panel: fill sweeps in from left */
@utility vz-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklab, var(--foreground) 14%, transparent);
    transform: translateX(-101%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  &:hover::before {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

*,
*::before,
*::after {
  cursor: none !important;
}

/* Animation Reveal States */
[data-fade-in] {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
[data-fade-in].is-in-view {
  opacity: 1;
}

[data-slide-up] {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-slide-up].is-in-view {
  opacity: 1;
  transform: translateY(0);
}

[data-scale-reveal] {
  opacity: 0;
  transform: scale(0.9) translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scale-reveal].is-in-view {
  opacity: 1;
  transform: scale(1) translateY(0);
}

[data-mask-reveal] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  filter: blur(10px);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-mask-reveal].is-in-view,
[data-scale-reveal].is-in-view [data-mask-reveal],
[data-slide-up].is-in-view [data-mask-reveal] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: blur(0px);
}

[data-spring-pop] {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-spring-pop].is-in-view {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Delays */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }
.delay-700 { transition-delay: 0.7s !important; }
.delay-800 { transition-delay: 0.8s !important; }

/* 3D Work Carousel */
.perspective-2000 {
  perspective: 2000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.work-card {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* TopBar Keyframes */
@keyframes topbar-slide-in {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes topbar-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes logo-pop-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Preloader Keyframes */
@keyframes fillBar {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes pulseText {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes slideUpFade {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* Explicit Preloader Styles */
#vz-preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;
  background-color: #0a0a0a !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
}
#vz-preloader .preloader-logo {
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  object-fit: contain !important;
}
#vz-preloader .preloader-bar-bg {
  width: 240px !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  position: relative !important;
}
#vz-preloader .preloader-bar-fill {
  height: 100% !important;
  background: white !important;
  border-radius: 9999px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  animation: fillBar 2.5s linear forwards !important;
}

.work-card picture {
  display: block;
  width: 100%;
  height: 100%;
}
.work-card picture img,
.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vz-marquee {
  display: flex !important;
  width: max-content !important;
  animation: vz-marquee 120s linear infinite !important;
  will-change: transform;
}

/* Framer-grade scroll reveal utilities */
.vz-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
.vz-reveal.is-in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.work-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

[data-fade-in] {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
[data-fade-in].is-in-view {
  opacity: 1 !important;
}

[data-slide-up] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
[data-slide-up].is-in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

[data-spring-pop] {
  opacity: 0;
  transform: scale(0.97) translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
[data-spring-pop].is-in-view {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

[data-scale-reveal] {
  opacity: 0;
  transform: scale(0.97) translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
[data-scale-reveal].is-in-view {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

[data-mask-reveal] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  filter: blur(6px);
  transition: clip-path 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
[data-mask-reveal].is-in-view {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
  filter: blur(0px) !important;
}

/* ==========================================================================
   BoilerLab-Style Sticky Stacking Section Transitions (GPU Accelerated)
   ========================================================================== */
html {
  scroll-behavior: initial;
}

html, body {
  max-width: 100%;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.stack-section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  width: 100%;
  box-shadow: 0 -25px 50px rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  background-color: #000000 !important;
  background: #000000 !important;
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Stacking layers hierarchy for card-over-card transitions */
.stack-hero {
  z-index: 10;
}
.stack-studio {
  z-index: 20;
}
.stack-mission {
  z-index: 30;
}
.stack-work {
  z-index: 40;
}
.stack-why {
  z-index: 50;
}
.stack-agencies {
  z-index: 60;
}
.stack-global {
  z-index: 70;
}
.stack-team {
  z-index: 80;
}
.stack-testimonials {
  z-index: 90;
}
.stack-faq {
  z-index: 100;
}
.stack-talk {
  z-index: 110;
}
.stack-footer-brand {
  z-index: 120;
}
.stack-footer-services {
  z-index: 130;
}
.stack-footer {
  z-index: 140;
}

/* Mobile containment: Ensure width constraints without breaking position:sticky */
html, body {
  max-width: 100%;
  width: 100%;
  position: relative;
}


/* Marquee wrapper containment */
.vz-marquee-container {
  max-width: 100vw !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Ensure fixed header stays on top of all stacking sections with locked height */
header {
  z-index: 1000 !important;
  height: 56px !important;
  max-height: 56px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}
header img {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (min-width: 640px) {
  header {
    height: 64px !important;
    max-height: 64px !important;
  }
  header img {
    height: 44px !important;
    max-height: 44px !important;
  }
}

/* Project Inquiry Modal Fullscreen Floating Context */
#project-inquiry-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  margin: 0 !important;
}

/* Hero Refined Typography & Aesthetics */
.hero-headline {
  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
}

.hero-gradient-text {
  background: linear-gradient(135deg, #ffffff 20%, #f0e6ff 60%, #c4a1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal-headline-gradient {
  background: linear-gradient(135deg, #ffffff 15%, #e9d5ff 55%, #c4a1ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #c4a1ff;
  display: inline-block;
}

.hero-body-text {
  font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.6;
}

/* Team 3D Flip Card System */
.team-flip-perspective {
  perspective: 1200px;
  -webkit-perspective: 1200px;
}

.team-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.team-flip-inner.is-flipped {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.team-flip-front,
.team-flip-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #0d0d12;
}

.team-flip-front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  z-index: 2;
}

.team-flip-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  z-index: 1;
}

.team-flip-inner.is-flipped .team-flip-front {
  z-index: 1;
}

.team-flip-inner.is-flipped .team-flip-back {
  z-index: 2;
}

.team-card-frame {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px -5px rgba(90, 34, 212, 0.15);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.team-card-frame:hover {
  border-color: rgba(196, 161, 255, 0.45);
  box-shadow: 0 15px 40px -5px rgba(0, 0, 0, 0.9), 0 0 35px rgba(90, 34, 212, 0.35);
}

/* Team Responsive Scoping */
@media (min-width: 640px) {
  #team-mobile-carousel {
    display: none !important;
  }
}
@media (max-width: 639px) {
  #team .sm\:grid,
  #team-container > div.sm\:grid {
    display: none !important;
  }

  /* ==========================================================================
     Mobile-Only Card Responsiveness (Viewport 320px - 430px)
     STRICT ISOLATION: Scoped strictly below 640px.
     Desktop layout (>= 640px) is 100% untouched and pixel-identical.
     ========================================================================== */

  /* 1. What We Do Mobile Carousel Cards (#work-mobile-carousel) */
  #work-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  #work-section .mb-6 {
    margin-bottom: 0.75rem !important;
  }

  #work-mobile-carousel {
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #work-mobile-carousel > div.relative,
  #work-mobile-carousel .relative.min-h-\[195px\] {
    min-height: 220px !important;
    width: 100% !important;
  }

  .work-mobile-slide {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 1.15rem !important;
  }

  .work-mobile-slide h3 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.35rem !important;
  }

  .work-mobile-slide p {
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    color: #b8b8b8 !important;
  }

  /* 2. Why Vizuals Section & Mobile Carousel Cards (#why-vizuals & #why-mobile-carousel) */
  #why-vizuals {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #why-vizuals [data-fade-in] .inline-flex,
  #why-vizuals .inline-flex {
    margin-bottom: 0.35rem !important;
  }

  #why-vizuals h2.hero-headline {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.2rem !important;
  }

  #why-vizuals h2.hero-headline + p {
    font-size: 0.8125rem !important;
    margin-top: 0.15rem !important;
  }

  #why-vizuals [data-slide-up].mb-5,
  #why-vizuals [data-slide-up].sm\:mb-8 {
    margin-bottom: 0.5rem !important;
    padding-top: 0.35rem !important;
  }

  #why-vizuals [data-slide-up] p.font-sans {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  #why-mobile-carousel {
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #why-mobile-carousel .flex.items-center.justify-between.gap-1 {
    margin-bottom: 0.35rem !important;
  }

  #why-mobile-carousel > div.relative,
  #why-mobile-carousel .relative.min-h-\[145px\] {
    min-height: 155px !important;
    width: 100% !important;
  }

  .why-mobile-slide {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 1rem !important;
  }

  .why-mobile-slide h3 {
    font-size: 0.925rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
  }

  .why-mobile-slide p {
    font-size: 0.775rem !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  #why-mobile-carousel .flex.items-center.justify-between.mt-2\.5 {
    margin-top: 0.35rem !important;
  }

  /* 3. Global Reach Mobile Carousel Cards (#global-mobile-carousel) */
  #global-reach {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  #global-mobile-carousel {
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #global-mobile-carousel > div.relative,
  #global-mobile-carousel .relative.min-h-\[260px\] {
    min-height: 380px !important;
    width: 100% !important;
  }

  .global-mobile-slide {
    padding: 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 1.15rem !important;
  }

  /* 4. Hero Section Rotator Card (#hero-mobile-rotator) */
  #hero-mobile-rotator {
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #hero-mobile-rotator > div {
    min-height: 120px !important;
    padding: 14px 16px !important;
    border-radius: 1.15rem !important;
  }

  #hero-mobile-rotator .relative.h-\[60px\] {
    height: 72px !important;
  }

  /* 5. Team Mobile Carousel Cards (#team-mobile-carousel) */
  #team-mobile-carousel {
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #team-mobile-carousel .team-card-slot {
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 6. Testimonials Carousel Card (#testimonials-carousel) */
  #testimonials-carousel {
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 290px !important;
  }

  /* 7. Agency Partnerships Cards (#agency-partnerships) */
  #agency-partnerships [data-slide-up] > .rounded-xl {
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 8. Design Philosophy Question Boxes (#design-philosophy) */
  #design-philosophy .space-y-2 > div {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.65rem 0.85rem !important;
    width: 100% !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #design-philosophy .space-y-2 > div > span {
    flex-shrink: 0 !important;
    margin-top: 0.15rem !important;
  }

  #design-philosophy .space-y-2 > div > p {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    font-size: 0.85rem !important;
  }

  /* 9. Header & Global Mobile Typography */
  header {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  h1.hero-headline {
    font-size: clamp(1.4rem, 6.8vw, 1.75rem) !important;
    line-height: 1.15 !important;
  }

  h1.text-5xl,
  h1.text-6xl {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }
}

/* ==========================================================================
   Mobile-Only GPU & Compositor Optimization (Viewport < 768px)
   Replaces expensive multi-pass Gaussian backdrop-filter blurs with high-performance
   rich dark translucent fills so the mobile GPU maintains locked 60/120 FPS scrolling.
   Desktop (>= 768px) is 100% untouched and retains all backdrop-blur effects.
   ========================================================================== */
@media (max-width: 767px) {
  /* Disable sticky stacking on mobile to enable fluid 60/120 FPS momentum scrolling */
  .stack-section {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Hardware-accelerated smooth touch scrolling on mobile devices */
  html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }

  .backdrop-blur-sm,
  .backdrop-blur-md,
  .backdrop-blur-lg,
  .backdrop-blur-xl {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  header.backdrop-blur-xl {
    background-color: rgba(5, 5, 8, 0.88) !important;
  }
  .bg-black\/40.backdrop-blur-md,
  .bg-black\/60.backdrop-blur-md,
  .bg-purple-950\/30.backdrop-blur-md {
    background-color: rgba(18, 10, 32, 0.92) !important;
  }
  .bg-white\/\[0\.02\].backdrop-blur-sm,
  .bg-white\/\[0\.03\].backdrop-blur-sm,
  .bg-white\/\[0\.04\].backdrop-blur-sm {
    background-color: rgba(22, 18, 35, 0.85) !important;
  }
  .modal-backdrop.backdrop-blur-lg {
    background-color: rgba(0, 0, 0, 0.94) !important;
  }

  /* Release GPU layer promotion on idle mobile cards */
  .team-flip-inner {
    will-change: auto !important;
  }

  /* Eliminate expensive Gaussian blur filters during mobile carousel swipes */
  .work-mobile-slide,
  .why-mobile-slide,
  .testimonial-slide {
    filter: none !important;
  }

  /* Content visibility for deep off-screen mobile sections */
  #testimonials-section,
  #team,
  #faq,
  #contact-mobile {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
  }
}

/* Explicit SVG dimension safety lock so accordion chevrons never blow up */
.faq-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
}

/* Tablet (640px - 1023px) Responsiveness */
@media (min-width: 640px) and (max-width: 1023px) {
  #global-mobile-carousel {
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}