:root {
  color-scheme: dark;
  --wabiot-bg: #05070f;
  --wabiot-surface: rgba(9, 15, 31, 0.78);
  --wabiot-surface-strong: rgba(12, 20, 42, 0.92);
  --wabiot-line: rgba(74, 222, 255, 0.22);
  --wabiot-text: #eef7ff;
  --wabiot-muted: #9fb2c8;
  --wabiot-cyan: #2ee9ff;
  --wabiot-blue: #5b7cff;
  --wabiot-magenta: #d946ef;
  --wabiot-green: #34f5a8;
}

html,
body {
  background: var(--wabiot-bg) !important;
}

body {
  background:
    radial-gradient(circle at 12% 10%, rgba(46, 233, 255, 0.2), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(217, 70, 239, 0.18), transparent 30rem),
    linear-gradient(180deg, #05070f 0%, #08111f 46%, #05070f 100%) !important;
}

.bg-\[\#FAFAF8\],
.bg-white,
.bg-\[\#FFF7F2\] {
  background-color: transparent !important;
}

.text-\[\#1A1A1A\],
.text-black {
  color: var(--wabiot-text) !important;
}

.text-\[\#6B7280\],
.text-stone-500,
.text-gray-500 {
  color: var(--wabiot-muted) !important;
}

.text-\[\#E8622A\] {
  color: var(--wabiot-cyan) !important;
}

.bg-\[\#E8622A\],
.cta-btn {
  background: linear-gradient(135deg, var(--wabiot-cyan), var(--wabiot-blue) 52%, var(--wabiot-magenta)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(46, 233, 255, 0.12) inset,
    0 16px 42px rgba(46, 233, 255, 0.22),
    0 0 32px rgba(217, 70, 239, 0.18) !important;
}

.border-\[\#E8622A\] {
  border-color: var(--wabiot-cyan) !important;
}

nav {
  background: rgba(5, 8, 18, 0.82) !important;
  border-bottom: 1px solid var(--wabiot-line) !important;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.34);
}

header {
  isolation: isolate;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(46, 233, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 233, 255, 0.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 58% 32%, black, transparent 68%);
}

section,
footer {
  background-color: transparent !important;
}

form,
article,
.glass-card,
.rounded-2xl,
.rounded-3xl {
  border-color: var(--wabiot-line) !important;
}

form,
article.bg-white,
article.bg-\[\#151515\],
.glass-card {
  background:
    linear-gradient(180deg, rgba(15, 26, 52, 0.82), rgba(7, 11, 24, 0.82)) !important;
  border: 1px solid var(--wabiot-line) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    0 0 44px rgba(46, 233, 255, 0.08) !important;
  backdrop-filter: blur(16px);
}

article.bg-\[\#E8622A\] {
  background:
    linear-gradient(135deg, rgba(46, 233, 255, 0.92), rgba(91, 124, 255, 0.86), rgba(217, 70, 239, 0.86)) !important;
  box-shadow: 0 22px 62px rgba(91, 124, 255, 0.25) !important;
}

input,
select,
textarea {
  background: rgba(4, 9, 20, 0.76) !important;
  border-color: rgba(46, 233, 255, 0.26) !important;
  color: var(--wabiot-text) !important;
  box-shadow: 0 0 0 1px rgba(46, 233, 255, 0.04) inset;
}

input::placeholder,
textarea::placeholder {
  color: rgba(159, 178, 200, 0.7) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--wabiot-cyan) !important;
  box-shadow:
    0 0 0 1px rgba(46, 233, 255, 0.35),
    0 0 28px rgba(46, 233, 255, 0.18) !important;
}

.section-tag,
.wabiot-static-ads {
  background: rgba(7, 13, 28, 0.84) !important;
  border-color: var(--wabiot-line) !important;
  color: var(--wabiot-muted) !important;
}

.wabiot-static-ad {
  color: var(--wabiot-text) !important;
}

.wabiot-ad-fade {
  background: rgba(7, 13, 28, 0.84) !important;
}

.wabiot-ad-fade::after {
  background: linear-gradient(90deg, transparent, rgba(46, 233, 255, 0.36), transparent) !important;
}

.wabiot-ad-fade strong {
  color: var(--wabiot-cyan) !important;
  text-shadow: 0 0 18px rgba(46, 233, 255, 0.44) !important;
}

.wabiot-ad-fade b {
  color: rgba(91, 124, 255, 0.72) !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(5, 7, 15, 0.1), rgba(2, 4, 10, 0.98)) !important;
  border-top: 1px solid var(--wabiot-line);
}

img[src*="phone-mockup"] {
  filter: drop-shadow(0 0 34px rgba(46, 233, 255, 0.28)) drop-shadow(0 24px 46px rgba(0, 0, 0, 0.48));
}

button {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

button:hover {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 50% 4%, rgba(46, 233, 255, 0.24), transparent 22rem),
      linear-gradient(180deg, #05070f 0%, #08111f 58%, #05070f 100%) !important;
  }

  header::before {
    background-size: 38px 38px;
  }
}