:root {
  --stayble-bg: #f8fafc;
  --stayble-surface: #ffffff;
  --stayble-surface-soft: #f7f2ff;
  --stayble-text: #102033;
  --stayble-muted: #53657a;
  --stayble-border: #e5d7f5;
  --stayble-accent: #6d28d9;
  --stayble-accent-2: #a855f7;
  --stayble-accent-deep: #3b0764;
  --stayble-accent-soft: #f1e7ff;
  --stayble-luxe: #c084fc;
}

body,
#root,
.min-h-screen.bg-black {
  background:
    radial-gradient(circle at 12% 8%, rgba(168, 85, 247, 0.13), transparent 28rem),
    radial-gradient(circle at 86% 4%, rgba(109, 40, 217, 0.12), transparent 30rem),
    var(--stayble-bg) !important;
  color: var(--stayble-text) !important;
}

nav.fixed {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--stayble-border) !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}

nav .text-gray-300,
nav .text-gray-400,
nav .hover\:text-violet-400:hover,
footer .text-gray-400,
footer a {
  color: var(--stayble-muted) !important;
}

nav a:hover,
footer a:hover,
.text-violet-400,
.hover\:text-violet-300:hover,
.hover\:text-violet-400:hover {
  color: var(--stayble-accent) !important;
}

.bg-black,
.bg-black\/80,
.bg-black\/90,
.bg-black\/95 {
  background-color: var(--stayble-surface) !important;
}

.bg-gradient-to-br,
.bg-gradient-to-b {
  background-image: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%) !important;
}

.stayble-cream-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.08), transparent 24rem),
    linear-gradient(180deg, #fff8ec 0%, #f7ead5 100%) !important;
}

.stayble-cream-section > .absolute.inset-0 {
  background:
    radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.08), transparent 24rem),
    linear-gradient(180deg, #fff8ec 0%, #f7ead5 100%) !important;
}

.stayble-cream-section .bg-gradient-to-b.from-violet-900\/40,
.stayble-cream-section .bg-gradient-to-b.from-violet-950\/20 {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(109, 40, 217, 0.16) !important;
}

.stayble-contact-info-card {
  background: #fff8ec !important;
  border-color: #ead7b8 !important;
  box-shadow: 0 18px 42px rgba(137, 94, 38, 0.1) !important;
}

.stayble-message-card {
  background: #fff8ec !important;
  border-color: #ead7b8 !important;
  box-shadow: 0 18px 42px rgba(137, 94, 38, 0.1) !important;
}

.stayble-message-card input,
.stayble-message-card textarea {
  background: #fffdf7 !important;
  border-color: #ead7b8 !important;
}

.stayble-form-status {
  margin-top: 0.75rem;
  color: var(--stayble-accent);
  font-size: 0.95rem;
  font-weight: 600;
}

.stayble-form-status[data-state="error"] {
  color: #b42318;
}

.stayble-google-form-wrapper {
  width: 100%;
  overflow: hidden;
  border: 1px solid #ead7b8;
  border-radius: 8px;
  background: #fffdf7;
}

.stayble-google-form-frame {
  display: block;
  width: 100%;
  min-height: 720px;
  background: #fffdf7;
}

.stayble-careers-form-section .rounded-lg.p-8 {
  background: #fff8ec !important;
  border-color: #ead7b8 !important;
  box-shadow: 0 18px 42px rgba(137, 94, 38, 0.1) !important;
  padding: 1rem !important;
}

.from-black,
.to-black,
.via-violet-950\/20,
.from-violet-950\/10,
.to-violet-950\/10,
.from-violet-950\/20 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
  --tw-gradient-via: #f5f9fd var(--tw-gradient-via-position) !important;
  --tw-gradient-to: #f8fafc var(--tw-gradient-to-position) !important;
}

.bg-gradient-to-r.from-violet-500,
.bg-gradient-to-r.from-violet-500.to-purple-600,
.hover\:from-violet-600:hover {
  background-image: linear-gradient(135deg, var(--stayble-accent), var(--stayble-accent-2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(109, 40, 217, 0.24);
}

.border-violet-400,
.border-violet-400\/50,
.border-violet-500,
.border-violet-500\/20,
.border-violet-500\/30,
.border-violet-600\/50,
.border-violet-700\/50 {
  border-color: var(--stayble-border) !important;
}

.bg-violet-500\/10,
.bg-violet-500\/20,
.bg-violet-700\/30,
.bg-violet-900\/40,
.bg-violet-950\/20 {
  background-color: var(--stayble-surface) !important;
}

.bg-gradient-to-b.from-violet-900\/40,
.bg-gradient-to-b.from-violet-950\/20,
.bg-gradient-to-r.from-violet-950\/20 {
  background: var(--stayble-surface) !important;
  border-color: var(--stayble-border) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

.rounded-lg.border,
.shadow-sm,
.group.rounded-lg {
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

.text-white,
.text-black,
.text-gray-300,
.text-gray-400,
.text-black-400,
.prose,
.prose p,
.prose li {
  color: var(--stayble-text) !important;
}

.text-gray-300,
.text-gray-400,
.text-muted-foreground {
  color: var(--stayble-muted) !important;
}

.bg-clip-text.text-transparent {
  background-image: linear-gradient(135deg, #0f172a, var(--stayble-accent), var(--stayble-accent-2)) !important;
}

.group:hover .group-hover\:text-violet-300 {
  color: var(--stayble-accent) !important;
}

.text-violet-300,
.text-violet-400,
.text-violet-700,
.group:hover .group-hover\:text-gray-300,
svg.text-violet-700,
svg.text-violet-400 {
  color: var(--stayble-accent) !important;
}

.rounded-full.bg-violet-700\/30,
.w-12.h-12.bg-gradient-to-r {
  background: var(--stayble-accent-soft) !important;
  color: var(--stayble-accent) !important;
  box-shadow: none !important;
}

.w-12.h-12.bg-gradient-to-r svg,
.rounded-full.bg-violet-700\/30 svg {
  color: var(--stayble-accent) !important;
}

input,
textarea,
.bg-background,
.bg-card,
.bg-popover {
  background-color: #ffffff !important;
  color: var(--stayble-text) !important;
  border-color: var(--stayble-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: #7b8794 !important;
}

footer {
  background: #ffffff !important;
  border-top: 1px solid var(--stayble-border) !important;
}

.hover\:shadow-violet-500\/20:hover,
.hover\:shadow-violet-500\/25:hover,
.hover\:shadow-violet-500\/30:hover {
  box-shadow: 0 20px 48px rgba(109, 40, 217, 0.18) !important;
}

.border-t.border-violet-500\/20 {
  border-color: var(--stayble-border) !important;
}

.md\:hidden.bg-black\/95 {
  background: #ffffff !important;
}

button.border-violet-400,
a.border-violet-400 {
  background: #ffffff !important;
  color: var(--stayble-accent) !important;
  border-color: rgba(109, 40, 217, 0.3) !important;
}

.bg-gradient-to-r.from-violet-500 *,
.bg-gradient-to-r.from-violet-500.to-purple-600 *,
button.bg-gradient-to-r,
a.bg-gradient-to-r {
  color: #ffffff !important;
}