/* ═══════════════════════════════════════════════
   Base brand theme — #0052FF
   ═══════════════════════════════════════════════ */

/* ── Hero: keep the cloud photo, replace the warm wash with Base blue ── */
.hero-bg {
  filter: saturate(0.92) brightness(1.08) !important;
  isolation: isolate !important;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 82% 60% at 18% 18%, rgba(220, 240, 255, 0.78) 0%, transparent 66%),
    radial-gradient(ellipse 72% 58% at 86% 18%, rgba(68, 143, 255, 0.42) 0%, transparent 70%),
    linear-gradient(155deg, rgba(237, 247, 255, 0.74) 0%, rgba(144, 194, 255, 0.56) 46%, rgba(0, 82, 255, 0.34) 100%);
  mix-blend-mode: normal;
  opacity: 0.74;
  pointer-events: none;
  z-index: 1;
}

/* ── CSS Variables ─────────────────────────── */
:root {
  --primary: 220 100% 50% !important;
  --ring: 220 100% 50% !important;
}

/* ── Page / section backgrounds ───────────── */
body { background-color: #F5F8FF !important; }

.bg-stone-50,
.bg-\[\#fafaf9\],
.bg-\[\#f5f3ef\],
.bg-\[\#fdfdfc\],
.bg-\[\#f5f5f4\] { background-color: #F8FAFF !important; }
.bg-stone-100   { background-color: #F2F6FF !important; }
.bg-stone-200   { background-color: #E5EEFF !important; }
.bg-\[\#e8e6e2\] { background-color: #E5EEFF !important; }

/* ── Borders / text ────────────────────────── */
.border-stone-100 { border-color: #E5EEFF !important; }
.border-stone-200 { border-color: #D6E4FF !important; }
.text-stone-600   { color: #4B6080 !important; }
.text-stone-500   { color: #6080A0 !important; }
.text-stone-400   { color: #8EA4C8 !important; }

/* ── CTA button (class generated from HTML replacement) ── */
.bg-\[\#0052FF\] { background-color: #0052FF !important; }

/* ── Primary buttons with orange Tailwind classes ── */
.bg-orange-500, .bg-orange-400, .bg-orange-600,
.bg-pink-500, .bg-pink-400, .bg-pink-600 {
  background-color: #0052FF !important;
}
.text-orange-500, .text-orange-400, .text-orange-600,
.text-pink-500, .text-pink-400, .text-pink-600 { color: #0052FF !important; }
.border-orange-500, .border-orange-400,
.border-pink-500, .border-pink-400 { border-color: #0052FF !important; }
.hover\:bg-orange-600:hover, .hover\:bg-pink-600:hover { background-color: #0040CC !important; }

/* ── Gradient CTAs ─────────────────────────── */
.from-orange-500, .from-pink-500 { --tw-gradient-from: #0052FF !important; }
.to-orange-600,   .to-pink-600   { --tw-gradient-to: #0040CC !important; }
.via-orange-500,  .via-pink-500  { --tw-gradient-via: #2970FF !important; }
.from-orange-50,  .from-pink-50  { --tw-gradient-from: #EEF3FF !important; }
.to-orange-50,    .to-pink-50    { --tw-gradient-to: #EEF3FF !important; }
.bg-orange-50, .bg-pink-50       { background-color: rgba(0,82,255,0.05) !important; }
.bg-orange-100, .bg-pink-100     { background-color: rgba(0,82,255,0.10) !important; }
.text-orange-700, .text-pink-700 { color: #0040CC !important; }
.ring-orange-500, .ring-pink-500 { --tw-ring-color: #0052FF !important; }

/* ── Dashboard nav button — force solid blue ── */
a[href="/dashboard"],
a[href^="/dashboard"] .relative,
nav a[class*="rounded-xl"][class*="overflow-hidden"] {
  background: #0052FF !important;
  background-image: none !important;
}

/* ── Hero section gradient override ─────────── */
.gradient-blur,
[class*="gradient-blur"] {
  background: linear-gradient(to bottom,
    rgba(245,248,255,0) 0%,
    rgba(245,248,255,0.85) 70%,
    #F5F8FF 100%) !important;
}

/* ── Warm inline gradient override ─────────── */
[style*="255, 250, 245"],
[style*="255, 247, 237"],
[style*="255, 237, 213"],
[style*="251, 248, 242"] {
  background-color: #F5F8FF !important;
}

/* ── Add blue accent to hero section ─────────── */
body > div:first-child section:first-of-type::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,82,255,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* ── Agent avatar — Payout Agent (orange png) ── */
img[src*="/assets/agents/outreach"],
img[src*="outreach.png"] {
  filter: hue-rotate(190deg) saturate(1.3) !important;
}

/* ── Policy builder handles ───────────────────── */
.runwise-workflow-builder .react-flow__handle { background: #0052FF !important; }
.dark .runwise-workflow-builder .react-flow__handle { background: #2970FF !important; }

/* ── CTA section — vivid blue gradient (replaces pale/pink/lavender) ── */
section[id="cta"] .rounded-\[22px\],
section[id="cta"] .rounded-\[28px\] {
  background:
    radial-gradient(ellipse 70% 70% at 12% 12%, rgba(111, 188, 255, 0.58) 0%, transparent 56%),
    radial-gradient(ellipse 80% 68% at 88% 82%, rgba(3, 36, 162, 0.62) 0%, transparent 62%),
    linear-gradient(135deg, #5DB8FF 0%, #0052FF 42%, #1234C7 70%, #001B7A 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 22px 70px rgba(0, 82, 255, 0.22) !important;
}
section[id="cta"] .rounded-\[22px\] > div:first-child,
section[id="cta"] .rounded-\[28px\] > div:first-child {
  display: none !important;
}
section[id="cta"] h2,
section[id="cta"] p { color: rgba(255,255,255,0.82) !important; }
section[id="cta"] h2 { color: #fff !important; }
section[id="cta"] a[href="/signup"],
section[id="cta"] a[href="/dashboard/"],
section[id="cta"] button {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  color: #fff !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 10px 32px rgba(0, 18, 92, 0.26), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}
section[id="cta"] a[href="/signup"] span,
section[id="cta"] a[href="/dashboard/"] span,
section[id="cta"] button span,
section[id="cta"] button p {
  color: #fff !important;
}

/* ── Home header: restore compact width and visible brand ───────────── */
header.fixed.top-0.right-0.left-0.z-50.h-auto.w-full nav.relative.flex.items-center.bg-transparent {
  padding-top: 12px !important;
  padding-bottom: 10px !important;
}

header.fixed.top-0.right-0.left-0.z-50.h-auto.w-full
  nav.relative.flex.items-center.bg-transparent
  > div.relative.mx-auto.w-full.flex-1 {
  max-width: 1080px !important;
  padding: 10px 18px !important;
  border-radius: 24px !important;
}

header.fixed.top-0.right-0.left-0.z-50.h-auto.w-full
  nav.relative.flex.items-center.bg-transparent
  a.inline-flex.shrink-0.items-center.transition-all.duration-500.ease-in-out {
  margin-left: 0 !important;
  gap: 12px !important;
}

header.fixed.top-0.right-0.left-0.z-50.h-auto.w-full
  nav.relative.flex.items-center.bg-transparent
  a.inline-flex.shrink-0.items-center.transition-all.duration-500.ease-in-out::after {
  content: "Oculus";
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #111827;
}

header.fixed.top-0.right-0.left-0.z-50.h-auto.w-full
  nav.relative.flex.items-center.bg-transparent
  a.inline-flex.shrink-0.items-center.transition-all.duration-500.ease-in-out
  img.lg\:hidden {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  filter: drop-shadow(0 10px 24px rgba(0, 82, 255, 0.22));
}

header.fixed.top-0.right-0.left-0.z-50.h-auto.w-full
  nav.relative.flex.items-center.bg-transparent
  a.inline-flex.shrink-0.items-center.transition-all.duration-500.ease-in-out
  img.lg\:block {
  display: none !important;
}

@media (max-width: 1023px) {
  header.fixed.top-0.right-0.left-0.z-50.h-auto.w-full
    nav.relative.flex.items-center.bg-transparent
    a.inline-flex.shrink-0.items-center.transition-all.duration-500.ease-in-out::after {
    font-size: 18px;
  }
}