@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*, ::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.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}::before,
::after {
  --tw-content: '';
}/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}/*
Remove the default font size and weight for headings.
*/h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}/*
Reset links to optimize for opt-in styling instead of opt-out.
*/a {
  color: inherit;
  text-decoration: inherit;
}/*
Add the correct font weight in Edge and Safari.
*/b,
strong {
  font-weight: bolder;
}/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}/*
Add the correct font size in all browsers.
*/small {
  font-size: 80%;
}/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}sub {
  bottom: -0.25em;
}sup {
  top: -0.5em;
}/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}/*
Remove the inheritance of text transform in Edge and Firefox.
*/button,
select {
  text-transform: none;
}/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}/*
Use the modern Firefox focus style for all focusable elements.
*/:-moz-focusring {
  outline: auto;
}/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/:-moz-ui-invalid {
  box-shadow: none;
}/*
Add the correct vertical alignment in Chrome and Firefox.
*/progress {
  vertical-align: baseline;
}/*
Correct the cursor style of increment and decrement buttons in Safari.
*/::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}/*
Remove the inner padding in Chrome and Safari on macOS.
*/::-webkit-search-decoration {
  -webkit-appearance: none;
}/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}/*
Add the correct display in Chrome and Safari.
*/summary {
  display: list-item;
}/*
Removes the default spacing and border for appropriate elements.
*/blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}fieldset {
  margin: 0;
  padding: 0;
}legend {
  padding: 0;
}ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}/*
Reset default styling for dialogs.
*/dialog {
  padding: 0;
}/*
Prevent resizing textareas horizontally by default.
*/textarea {
  resize: vertical;
}/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}/*
Set the default cursor for buttons.
*/button,
[role="button"] {
  cursor: pointer;
}/*
Make sure disabled buttons don't get the pointer cursor.
*/:disabled {
  cursor: default;
}/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/img,
video {
  max-width: 100%;
  height: auto;
}/* Make elements with the HTML hidden attribute stay hidden by default */[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #0f172a;
  color: #ffffff;
}#root {
  min-height: 100vh;
}/* Custom scrollbar */::-webkit-scrollbar {
  width: 8px;
}::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}/* Smooth transitions for all interactive elements */button, a, .group {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}/* Glass morphism effect enhancement */.backdrop-blur-md {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}/* Gradient text enhancement */.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}/* Custom animations */@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}.animate-float {
  animation: float 6s ease-in-out infinite;
}/* Focus styles for accessibility */button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}/* Loading animation enhancement */@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}/* White Wave Animation Keyframes */@keyframes waveFlow1 {
  0% {
    transform: translateX(-100%) translateY(0) rotate(-2deg) scaleY(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(100vw) translateY(-30px) rotate(2deg) scaleY(1.2);
    opacity: 0;
  }
}@keyframes waveFlow2 {
  0% {
    transform: translateX(-100%) translateY(20px) rotate(1deg) scaleY(1.1);
    opacity: 0;
  }
  20% {
    opacity: 0.5;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(100vw) translateY(-10px) rotate(-1deg) scaleY(0.9);
    opacity: 0;
  }
}@keyframes waveFlow3 {
  0% {
    transform: translateX(-100%) translateY(-10px) rotate(-1deg) scaleY(0.9);
    opacity: 0;
  }
  25% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.2;
  }
  100% {
    transform: translateX(100vw) translateY(25px) rotate(1deg) scaleY(1.3);
    opacity: 0;
  }
}@keyframes waveFlow4 {
  0% {
    transform: translateX(-100%) translateY(15px) rotate(0.5deg) scaleY(1.0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(100vw) translateY(-20px) rotate(-0.5deg) scaleY(0.8);
    opacity: 0;
  }
}@keyframes waveFlow5 {
  0% {
    transform: translateX(-100%) translateY(-5px) rotate(-0.8deg) scaleY(1.2);
    opacity: 0;
  }
  30% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    transform: translateX(100vw) translateY(10px) rotate(0.8deg) scaleY(1.0);
    opacity: 0;
  }
}@keyframes waveShimmer {
  0%, 100% {
    filter: brightness(1) blur(1px);
  }
  25% {
    filter: brightness(1.3) blur(0.5px);
  }
  50% {
    filter: brightness(0.9) blur(1.5px);
  }
  75% {
    filter: brightness(1.2) blur(0.8px);
  }
}/* White Wave Animation Classes */.wave-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}.wave-layer {
  position: absolute;
  width: 200%;
  height: 80px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.15) 20%, 
    rgba(255, 255, 255, 0.25) 40%, 
    rgba(255, 255, 255, 0.20) 60%, 
    rgba(255, 255, 255, 0.10) 80%, 
    transparent 100%
  );
  border-radius: 40px;
  filter: blur(1px);
  animation: waveShimmer 6s ease-in-out infinite;
}.wave-layer-1 {
  top: 25%;
  animation: waveFlow1 20s linear infinite, waveShimmer 6s ease-in-out infinite;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.20) 25%, 
    rgba(255, 255, 255, 0.30) 50%, 
    rgba(255, 255, 255, 0.20) 75%, 
    transparent 100%
  );
}.wave-layer-2 {
  top: 40%;
  height: 60px;
  animation: waveFlow2 25s linear infinite, waveShimmer 8s ease-in-out infinite;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.15) 20%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0.15) 80%, 
    transparent 100%
  );
}.wave-layer-3 {
  top: 55%;
  height: 100px;
  animation: waveFlow3 30s linear infinite, waveShimmer 10s ease-in-out infinite;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.10) 15%, 
    rgba(255, 255, 255, 0.20) 40%, 
    rgba(255, 255, 255, 0.15) 65%, 
    rgba(255, 255, 255, 0.08) 85%, 
    transparent 100%
  );
}.wave-layer-4 {
  top: 70%;
  height: 70px;
  animation: waveFlow4 22s linear infinite, waveShimmer 7s ease-in-out infinite;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.18) 30%, 
    rgba(255, 255, 255, 0.28) 60%, 
    rgba(255, 255, 255, 0.18) 90%, 
    transparent 100%
  );
}.wave-layer-5 {
  top: 15%;
  height: 50px;
  animation: waveFlow5 28s linear infinite, waveShimmer 9s ease-in-out infinite;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.12) 25%, 
    rgba(255, 255, 255, 0.22) 55%, 
    rgba(255, 255, 255, 0.12) 85%, 
    transparent 100%
  );
}/* Futuristic AI Cityscape Backgrounds *//* Home/Landing Page - Animated white abstract wave design with flowing patterns */.bg-home-cityscape {
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(15, 23, 42, 0.98) 0%,
      rgba(30, 41, 59, 0.95) 25%,
      rgba(51, 65, 85, 0.92) 50%,
      rgba(30, 41, 59, 0.95) 75%,
      rgba(15, 23, 42, 0.98) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='whitewaves' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='20' height='60' x='10' y='40' fill='%23ffffff' opacity='0.1'/%3E%3Crect width='15' height='80' x='35' y='20' fill='%23ffffff' opacity='0.08'/%3E%3Crect width='25' height='70' x='55' y='30' fill='%23ffffff' opacity='0.06'/%3E%3Crect width='18' height='50' x='85' y='50' fill='%23ffffff' opacity='0.09'/%3E%3Cpath d='M15,15 Q25,5 35,15 T55,15' stroke='%23ffffff' stroke-width='2' fill='none' opacity='0.12'/%3E%3Cpath d='M65,25 Q75,15 85,25 T100,25' stroke='%23ffffff' stroke-width='2' fill='none' opacity='0.10'/%3E%3Ccircle cx='25' cy='25' r='2' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='75' cy='35' r='1.5' fill='%23ffffff' opacity='0.12'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23whitewaves)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 200px 200px;
  background-position: center, center, center, center, 0 0;
  background-attachment: fixed;
  position: relative;
}/* Agent Marketplace - Bustling commercial district */.bg-marketplace-cityscape {
  background: 
    radial-gradient(circle at 30% 70%, rgba(34, 197, 94, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(249, 115, 22, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(15, 23, 42, 0.95) 0%,
      rgba(22, 78, 99, 0.9) 25%,
      rgba(7, 89, 133, 0.85) 50%,
      rgba(22, 78, 99, 0.9) 75%,
      rgba(15, 23, 42, 0.95) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='marketplace' x='0' y='0' width='120' height='120' patternUnits='userSpaceOnUse'%3E%3Crect width='25' height='70' x='5' y='50' fill='%2322c55e' opacity='0.3'/%3E%3Crect width='20' height='85' x='35' y='35' fill='%23f97316' opacity='0.25'/%3E%3Crect width='30' height='60' x='60' y='60' fill='%23ec4899' opacity='0.2'/%3E%3Crect width='22' height='75' x='95' y='45' fill='%2306b6d4' opacity='0.25'/%3E%3Ccircle cx='20' cy='30' r='3' fill='%23fbbf24' opacity='0.4'/%3E%3Ccircle cx='80' cy='25' r='2' fill='%23a855f7' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23marketplace)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 240px 240px;
  background-position: center, center, center, center, 0 0;
  background-attachment: fixed;
}/* Agent Builder Studio - High-tech construction facilities */.bg-builder-cityscape {
  background: 
    radial-gradient(circle at 25% 75%, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, rgba(34, 197, 94, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(15, 23, 42, 0.95) 0%,
      rgba(55, 48, 163, 0.9) 25%,
      rgba(79, 70, 229, 0.85) 50%,
      rgba(55, 48, 163, 0.9) 75%,
      rgba(15, 23, 42, 0.95) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='140' height='140' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='builder' x='0' y='0' width='140' height='140' patternUnits='userSpaceOnUse'%3E%3Crect width='30' height='90' x='10' y='50' fill='%23a855f7' opacity='0.3'/%3E%3Crect width='25' height='100' x='50' y='40' fill='%233b82f6' opacity='0.25'/%3E%3Crect width='35' height='80' x='85' y='60' fill='%2322c55e' opacity='0.2'/%3E%3Cpolygon points='25,20 35,10 45,20 35,30' fill='%23fbbf24' opacity='0.4'/%3E%3Cpolygon points='95,15 105,5 115,15 105,25' fill='%23f59e0b' opacity='0.4'/%3E%3Crect width='8' height='8' x='65' y='25' fill='%23ef4444' opacity='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23builder)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 280px 280px;
  background-position: center, center, center, center, 0 0;
  background-attachment: fixed;
}/* User Dashboard - Personal command center */.bg-dashboard-cityscape {
  background: 
    radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 60% 40%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(15, 23, 42, 0.95) 0%,
      rgba(6, 78, 59, 0.9) 25%,
      rgba(5, 150, 105, 0.85) 50%,
      rgba(6, 78, 59, 0.9) 75%,
      rgba(15, 23, 42, 0.95) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='dashboard' x='0' y='0' width='160' height='160' patternUnits='userSpaceOnUse'%3E%3Crect width='35' height='85' x='15' y='75' fill='%2310b981' opacity='0.3'/%3E%3Crect width='28' height='95' x='60' y='65' fill='%233b82f6' opacity='0.25'/%3E%3Crect width='32' height='75' x='100' y='85' fill='%239333ea' opacity='0.2'/%3E%3Crect width='40' height='60' x='140' y='100' fill='%2306b6d4' opacity='0.2'/%3E%3Ccircle cx='32' cy='50' r='4' fill='%2322c55e' opacity='0.5'/%3E%3Ccircle cx='74' cy='40' r='3' fill='%23a855f7' opacity='0.5'/%3E%3Ccircle cx='116' cy='55' r='3' fill='%23f59e0b' opacity='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23dashboard)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 320px 320px;
  background-position: center, center, center, center, 0 0;
  background-attachment: fixed;
}/* Analytics & Insights - Data visualization cityscape */.bg-analytics-cityscape {
  background: 
    radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(15, 23, 42, 0.95) 0%,
      rgba(88, 28, 135, 0.9) 25%,
      rgba(147, 51, 234, 0.85) 50%,
      rgba(88, 28, 135, 0.9) 75%,
      rgba(15, 23, 42, 0.95) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='analytics' x='0' y='0' width='180' height='180' patternUnits='userSpaceOnUse'%3E%3Crect width='25' height='100' x='20' y='80' fill='%23ec4899' opacity='0.3'/%3E%3Crect width='30' height='120' x='55' y='60' fill='%23a855f7' opacity='0.25'/%3E%3Crect width='28' height='90' x='95' y='90' fill='%233b82f6' opacity='0.2'/%3E%3Crect width='32' height='110' x='135' y='70' fill='%2306b6d4' opacity='0.2'/%3E%3Cpath d='M10,40 Q30,20 50,40 T90,40' stroke='%23fbbf24' stroke-width='2' fill='none' opacity='0.4'/%3E%3Cpath d='M100,30 Q120,10 140,30 T180,30' stroke='%2322c55e' stroke-width='2' fill='none' opacity='0.4'/%3E%3Ccircle cx='25' cy='25' r='2' fill='%23ef4444' opacity='0.6'/%3E%3Ccircle cx='70' cy='20' r='2' fill='%23f59e0b' opacity='0.6'/%3E%3Ccircle cx='140' cy='15' r='2' fill='%2310b981' opacity='0.6'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23analytics)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 360px 360px;
  background-position: center, center, center, center, 0 0;
  background-attachment: fixed;
}/* ICP Wallet & Payments - Financial district */.bg-wallet-cityscape {
  background: 
    radial-gradient(circle at 30% 20%, rgba(251, 191, 36, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(34, 197, 94, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 90% 40%, rgba(249, 115, 22, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(15, 23, 42, 0.95) 0%,
      rgba(120, 53, 15, 0.9) 25%,
      rgba(194, 65, 12, 0.85) 50%,
      rgba(120, 53, 15, 0.9) 75%,
      rgba(15, 23, 42, 0.95) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wallet' x='0' y='0' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='40' height='120' x='20' y='80' fill='%23fbbf24' opacity='0.3'/%3E%3Crect width='35' height='140' x='70' y='60' fill='%2322c55e' opacity='0.25'/%3E%3Crect width='38' height='100' x='120' y='100' fill='%23f97316' opacity='0.2'/%3E%3Crect width='42' height='130' x='170' y='70' fill='%2306b6d4' opacity='0.2'/%3E%3Ccircle cx='40' cy='50' r='5' fill='%23fbbf24' opacity='0.5'/%3E%3Ccircle cx='87' cy='35' r='4' fill='%2322c55e' opacity='0.5'/%3E%3Ccircle cx='139' cy='45' r='4' fill='%23f97316' opacity='0.5'/%3E%3Cpath d='M15,25 L45,25 L40,35 L20,35 Z' fill='%23a855f7' opacity='0.4'/%3E%3Cpath d='M155,20 L185,20 L180,30 L160,30 Z' fill='%23ec4899' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wallet)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 400px 400px;
  background-position: center, center, center, center, 0 0;
  background-attachment: fixed;
}/* Help/Docs Center - Educational campus */.bg-help-cityscape {
  background: 
    radial-gradient(circle at 50% 30%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(15, 23, 42, 0.95) 0%,
      rgba(12, 74, 110, 0.9) 25%,
      rgba(14, 116, 144, 0.85) 50%,
      rgba(12, 74, 110, 0.9) 75%,
      rgba(15, 23, 42, 0.95) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='220' height='220' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='help' x='0' y='0' width='220' height='220' patternUnits='userSpaceOnUse'%3E%3Crect width='45' height='110' x='25' y='110' fill='%2306b6d4' opacity='0.3'/%3E%3Crect width='40' height='130' x='80' y='90' fill='%2310b981' opacity='0.25'/%3E%3Crect width='42' height='95' x='135' y='125' fill='%233b82f6' opacity='0.2'/%3E%3Crect width='38' height='115' x='190' y='105' fill='%2322c55e' opacity='0.2'/%3E%3Ccircle cx='47' cy='80' r='6' fill='%2306b6d4' opacity='0.4'/%3E%3Ccircle cx='100' cy='60' r='5' fill='%2310b981' opacity='0.4'/%3E%3Ccircle cx='156' cy='90' r='5' fill='%233b82f6' opacity='0.4'/%3E%3Cpath d='M30,40 Q50,20 70,40' stroke='%23fbbf24' stroke-width='3' fill='none' opacity='0.3'/%3E%3Cpath d='M140,35 Q160,15 180,35' stroke='%23a855f7' stroke-width='3' fill='none' opacity='0.3'/%3E%3Ctext x='47' y='85' font-family='Arial' font-size='12' fill='%23ffffff' opacity='0.2'%3E?%3C/text%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23help)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 440px 440px;
  background-position: center, center, center, center, 0 0;
  background-attachment: fixed;
}/* Mobile-specific optimizations */@media (max-width: 640px) {
  /* Ensure minimum tap target size */
  button, a, input, select, textarea {
    min-height: 44px;
  }
  
  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden;
  }
  
  /* Optimize text sizes for mobile */
  .text-xs { font-size: 0.75rem; }
  .text-sm { font-size: 0.875rem; }
  .text-base { font-size: 1rem; }
  .text-lg { font-size: 1.125rem; }
  .text-xl { font-size: 1.25rem; }
  .text-2xl { font-size: 1.5rem; }
  .text-3xl { font-size: 1.875rem; }
  .text-4xl { font-size: 2.25rem; }
  .text-5xl { font-size: 3rem; }
  .text-6xl { font-size: 3.75rem; }

  /* Optimize background patterns for mobile */
  .bg-home-cityscape,
  .bg-marketplace-cityscape,
  .bg-builder-cityscape,
  .bg-dashboard-cityscape,
  .bg-analytics-cityscape,
  .bg-wallet-cityscape,
  .bg-help-cityscape {
    background-attachment: scroll;
  }

  /* Mobile wave optimizations */
  .wave-layer {
    height: 50px;
  }
  
  .wave-layer-1 {
    animation-duration: 18s;
  }
  
  .wave-layer-2 {
    animation-duration: 22s;
    height: 40px;
  }
  
  .wave-layer-3 {
    animation-duration: 26s;
    height: 60px;
  }
  
  .wave-layer-4 {
    animation-duration: 20s;
    height: 45px;
  }
  
  .wave-layer-5 {
    animation-duration: 24s;
    height: 35px;
  }
}/* Touch-friendly hover states for mobile */@media (hover: none) and (pointer: coarse) {
  .hover\:scale-105:hover {
    transform: none;
  }
  
  .hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }
  
  button:active, a:active {
    transform: scale(0.98);
  }
}/* Improved mobile form inputs */@media (max-width: 640px) {
  input, textarea, select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 16px;
  }
}/* Mobile navigation improvements */@media (max-width: 1024px) {
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
}/* Responsive grid improvements */@media (max-width: 640px) {
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}@media (min-width: 640px) and (max-width: 768px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}/* Mobile-optimized spacing */@media (max-width: 640px) {
  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem;
  }
  
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
  }
  
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.5rem;
  }
  
  .space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem;
  }
}/* Improved mobile card layouts */@media (max-width: 640px) {
  .backdrop-blur-md {
    margin-left: 0;
    margin-right: 0;
    border-radius: 1rem;
  }
}/* Mobile-friendly table styles */@media (max-width: 640px) {
  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 600px;
  }
}/* Enhanced background animations for desktop */@media (min-width: 1024px) {
  .bg-marketplace-cityscape,
  .bg-builder-cityscape,
  .bg-dashboard-cityscape,
  .bg-analytics-cityscape,
  .bg-wallet-cityscape,
  .bg-help-cityscape {
    animation: subtle-shift 60s ease-in-out infinite;
  }
}@keyframes subtle-shift {
  0%, 100% { 
    background-position: center, center, center, center, 0 0; 
  }
  50% { 
    background-position: center, center, center, center, 20px 20px; 
  }
}/* High contrast mode support */@media (prefers-contrast: high) {
  .bg-home-cityscape,
  .bg-marketplace-cityscape,
  .bg-builder-cityscape,
  .bg-dashboard-cityscape,
  .bg-analytics-cityscape,
  .bg-wallet-cityscape,
  .bg-help-cityscape {
    filter: contrast(1.2) brightness(1.1);
  }
}/* Reduced motion support */@media (prefers-reduced-motion: reduce) {
  .bg-home-cityscape,
  .bg-marketplace-cityscape,
  .bg-builder-cityscape,
  .bg-dashboard-cityscape,
  .bg-analytics-cityscape,
  .bg-wallet-cityscape,
  .bg-help-cityscape {
    animation: none;
    background-attachment: scroll;
  }
  
  .animate-float,
  .animate-pulse {
    animation: none;
  }
  
  .wave-layer {
    animation: none;
    opacity: 0;
  }
}/* Performance optimizations for wave animation */.wave-layer {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}/* Ensure waves don't interfere with content interaction */.wave-container {
  pointer-events: none;
}/* Additional mobile performance optimizations */@media (min-width: 641px) {
  .wave-layer-1 {
    animation-duration: 20s;
  }
  
  .wave-layer-2 {
    animation-duration: 25s;
  }
  
  .wave-layer-3 {
    animation-duration: 30s;
  }
  
  .wave-layer-4 {
    animation-duration: 22s;
  }
  
  .wave-layer-5 {
    animation-duration: 28s;
  }
}