body.site-home-light,
body[data-seo-page],
body.legal-light {
  background:
    radial-gradient(circle at 82% 14%, rgba(20, 184, 166, .18), transparent 30%),
    radial-gradient(circle at 14% 80%, rgba(37, 99, 235, .20), transparent 31%),
    linear-gradient(135deg, #101827 0%, #142033 48%, #0f2f31 100%) !important;
  color: #f8fafc !important;
}

body.site-home-light::before {
  background-image:
    linear-gradient(rgba(226, 232, 240, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, .06) 1px, transparent 1px) !important;
}

body.site-home-light .surface,
body[data-seo-page] .surface {
  background: rgba(20, 30, 47, .82) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: 0 22px 55px -36px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: #f8fafc !important;
}

body.site-home-light .metric,
body.site-home-light .chat-window,
body.site-home-light .chat-bubble,
body[data-seo-page] article,
body[data-seo-page] section,
body[data-seo-page] .rounded-lg,
body[data-seo-page] .rounded-xl,
body.legal-light main {
  background: rgba(20, 30, 47, .72) !important;
  border-color: rgba(148, 163, 184, .20) !important;
  color: #f8fafc !important;
}

body.site-home-light .chat-bubble.ai {
  background: linear-gradient(135deg, rgba(6, 78, 59, .46), rgba(22, 36, 58, .72)) !important;
  border-color: rgba(16, 185, 129, .32) !important;
}

body.site-home-light .chat-header {
  background: rgba(15, 23, 42, .62) !important;
  border-color: rgba(148, 163, 184, .18) !important;
}

body.site-home-light .ai-line {
  background: rgba(15, 23, 42, .58) !important;
  border-color: rgba(45, 212, 191, .25) !important;
  color: #d1fae5 !important;
}

body.site-home-light .ojxo-robot-bg {
  opacity: .42 !important;
  filter: drop-shadow(0 30px 82px rgba(14, 165, 233, .26)) !important;
}

body.site-home-light .text-white,
body[data-seo-page] .text-white,
body.legal-light .text-slate-100 {
  color: #f8fafc !important;
}

body.site-home-light .text-slate-200,
body.site-home-light .text-slate-300,
body[data-seo-page] .text-slate-200,
body[data-seo-page] .text-slate-300,
body.legal-light .text-slate-300 {
  color: #d9e3ee !important;
}

body.site-home-light .text-slate-400,
body.site-home-light .text-slate-500,
body[data-seo-page] .text-slate-400,
body[data-seo-page] .text-slate-500 {
  color: #aab8ca !important;
}

body.site-home-light .bg-slate-900\/40,
body.site-home-light .bg-slate-950\/45,
body.site-home-light .bg-slate-950\/75,
body.site-home-light .bg-slate-900\/80,
body[data-seo-page] .bg-slate-900,
body[data-seo-page] .bg-slate-950 {
  background-color: rgba(15, 23, 42, .58) !important;
}

body.site-home-light .border-slate-700\/70,
body.site-home-light .border-slate-700,
body.site-home-light .border-slate-600,
body[data-seo-page] .border-slate-800,
body[data-seo-page] .border-slate-700 {
  border-color: rgba(148, 163, 184, .22) !important;
}

body.site-home-light input,
body.site-home-light select,
body.site-home-light textarea {
  background: rgba(15, 23, 42, .72) !important;
  color: #f8fafc !important;
}

body.site-home-light .brand-mark,
body[data-seo-page] .bg-emerald-500,
body.site-home-light .bg-emerald-500,
body.site-home-light .bg-blue-600 {
  color: #ffffff !important;
}

body[data-seo-page] main {
  background: rgba(15, 23, 42, .38);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 18px;
  margin-top: 24px;
  margin-bottom: 24px;
  box-shadow: 0 24px 70px -46px rgba(0, 0, 0, .72);
}

body.legal-light {
  min-height: 100vh;
}

body.legal-light main {
  background: rgba(20, 30, 47, .78) !important;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 70px -46px rgba(0, 0, 0, .72);
}

body.legal-light a,
body[data-seo-page] a:not(.bg-emerald-500),
body.site-home-light a:not(.bg-emerald-500):not(.bg-blue-600) {
  color: #6ee7b7 !important;
}

.site-mini-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.site-mini-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .46);
  color: #d9e3ee !important;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.site-mini-nav a:hover {
  background: rgba(30, 41, 59, .72);
  color: #ffffff !important;
}

.site-mini-nav .site-mini-brand {
  background: linear-gradient(135deg, #2563eb, #059669);
  color: #ffffff !important;
  border-color: transparent;
}

.seo-conversion {
  margin-top: 48px;
  border: 1px solid rgba(16, 185, 129, .32);
  border-radius: 14px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(5, 150, 105, .16), rgba(15, 23, 42, .72)),
    rgba(20, 30, 47, .72);
  box-shadow: 0 24px 64px -46px rgba(0, 0, 0, .72);
}

.seo-conversion__eyebrow {
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 900;
}

.seo-conversion__title {
  margin-top: 8px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 900;
}

.seo-conversion__text {
  margin-top: 10px;
  max-width: 720px;
  color: #d9e3ee;
  line-height: 1.9;
}

.seo-conversion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.seo-conversion__primary,
.seo-conversion__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.seo-conversion__primary {
  background: #10b981;
  color: #052e2b !important;
}

.seo-conversion__secondary {
  border: 1px solid rgba(148, 163, 184, .28);
  color: #d9e3ee !important;
  background: rgba(15, 23, 42, .46);
}

@supports (content-visibility: auto) {
  body.site-home-light nav[aria-label="صفحات دراسات الجدوى"],
  body.site-home-light section[aria-label="ابدأ تقرير OJXO"],
  body.site-home-light section[aria-label="انطباعات مستخدمي OJXO"],
  body[data-seo-page] .directory-group,
  body[data-seo-page] .seo-conversion {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
}