/* BrightAI visual recovery layer: Arabic-first enterprise layout. */
:root {
  --bg-base: #06070D;
  --bg-surface-1: #0B0E1A;
  --bg-surface-2: #111523;
  --bg-surface-3: #1A1F33;
  --bg-elevated: #161B2E;
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-neon: rgba(56,189,248,0.35);
  --text-primary: #F5F7FF;
  --text-secondary: #C7CEE0;
  --text-tertiary: #8B93AB;
  --text-muted: #5E6680;
  --brand-cyan: #38BDF8;
  --brand-cyan-2: #06B6D4;
  --brand-violet: #A78BFA;
  --brand-magenta: #E879F9;
  --brand-amber: #FBBF24;
  --brand-emerald: #34D399;
  --gradient-hero:
    radial-gradient(1200px 600px at 80% -10%, rgba(167,139,250,0.18), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(56,189,248,0.16), transparent 55%),
    linear-gradient(180deg, #06070D 0%, #0B0E1A 100%);
  --gradient-cta: linear-gradient(135deg, #38BDF8 0%, #A78BFA 100%);
  --gradient-card: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-divider: linear-gradient(90deg, transparent, rgba(56,189,248,0.4), transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-glow-cyan: 0 0 0 1px rgba(56,189,248,0.25), 0 12px 40px rgba(56,189,248,0.18);
  --shadow-glow-violet: 0 0 0 1px rgba(167,139,250,0.25), 0 12px 40px rgba(167,139,250,0.18);
  --font-display: "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --fs-h1: clamp(2.25rem, 4.2vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-body: 1.0625rem;
  --lh-body: 1.85;
  --tracking-ar: 0;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --space-section: clamp(72px, 10vw, 128px);
  --bai-page-bg: var(--bg-base);
  --bai-surface: rgba(11, 14, 26, 0.78);
  --bai-surface-soft: rgba(17, 21, 35, 0.58);
  --bai-border: var(--border-default);
  --bai-text: var(--text-primary);
  --bai-muted: var(--text-secondary);
  --bai-dim: var(--text-tertiary);
  --bai-cyan: var(--brand-cyan);
  --bai-green: var(--brand-emerald);
  --bai-indigo: var(--brand-violet);
  --bai-container: 1180px;
  --bai-font: var(--font-display);
}

html {
  scroll-padding-block-start: calc(var(--nav-height, 72px) + 1rem);
}

body {
  font-family: var(--bai-font) !important;
  background: var(--bg-base) !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

body,
body * {
  letter-spacing: 0 !important;
}

.container,
.nav-container {
  inline-size: min(100% - 2rem, var(--bai-container)) !important;
  margin-inline: auto !important;
}

.unified-nav {
  min-block-size: var(--nav-height, 72px);
  background: rgba(8, 13, 28, 0.9) !important;
  border-block-end: 1px solid rgba(148, 163, 184, 0.16) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

.nav-container {
  min-block-size: var(--nav-height, 72px);
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(1rem, 2vw, 2rem) !important;
}

.nav-logo {
  justify-self: start !important;
}

.nav-desktop {
  justify-self: center !important;
}

.nav-actions {
  justify-self: end !important;
}

.nav-links {
  gap: clamp(0.5rem, 1.4vw, 1.25rem) !important;
}

.nav-link {
  min-block-size: 40px;
  padding-inline: 0.875rem !important;
  color: #dbeafe !important;
  font-family: var(--bai-font) !important;
  font-size: clamp(0.95rem, 1vw, 1.05rem) !important;
  font-weight: 750 !important;
}

.search-desktop {
  min-inline-size: 10rem;
  min-block-size: 44px;
}

@media (min-width: 1024px) {
  .mobile-toggle,
  .search-mobile,
  .lang-switcher-btn-mobile {
    display: none !important;
  }
}

main {
  background: transparent !important;
}

.breadcrumb-nav {
  margin-block-start: calc(var(--nav-height, 72px) + 0.85rem) !important;
  margin-block-end: 0 !important;
  padding-block: 0 !important;
}

.hero.section,
#top.hero {
  min-block-size: auto !important;
  padding-block: clamp(4rem, 9vh, 7rem) clamp(3.5rem, 7vh, 6rem) !important;
  overflow: hidden !important;
}

.hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(22rem, 0.78fr) !important;
  align-items: center !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  min-block-size: auto !important;
}

.hero-content {
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: start !important;
  min-block-size: auto !important;
  max-inline-size: 42rem !important;
}

.hero-content .inline-flex:first-child,
.badge,
.eyebrow,
.pill {
  min-block-size: 36px;
  border-radius: 999px !important;
  border: 1px solid rgba(103, 232, 249, 0.2) !important;
  background: rgba(14, 165, 233, 0.09) !important;
  color: #bae6fd !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.title,
h1,
h2,
h3 {
  font-family: var(--bai-font) !important;
  text-wrap: balance;
}

.hero-title,
.hero-content .title,
#top h1 {
  max-inline-size: 11.5ch !important;
  margin-block: 0 1.1rem !important;
  color: #ffffff !important;
  font-size: clamp(3.25rem, 6.4vw, 5.8rem) !important;
  font-weight: 850 !important;
  line-height: 1.04 !important;
}

.hero-subtitle,
.hero-content .subtitle {
  max-inline-size: 39rem !important;
  margin-block: 0 1.6rem !important;
  color: #dbeafe !important;
  font-size: clamp(1.08rem, 1.55vw, 1.32rem) !important;
  line-height: 1.95 !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
  justify-content: flex-start !important;
}

.hero-actions .btn,
.btn.primary,
a.btn {
  min-block-size: 52px !important;
  border-radius: 16px !important;
  padding: 0.9rem 1.35rem !important;
  font-family: var(--bai-font) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
}

.hero-actions .btn.primary,
.btn.primary {
  background: linear-gradient(135deg, var(--bai-green), var(--bai-cyan)) !important;
  color: #031018 !important;
  box-shadow: 0 18px 46px -22px rgba(103, 232, 249, 0.85) !important;
}

.hero-actions .btn:not(.primary) {
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: #f8fafc !important;
}

.hero-content .mt-12 {
  margin-block-start: 1.6rem !important;
  opacity: 0.85 !important;
  filter: none !important;
}

.hero-visual {
  display: block !important;
  position: relative !important;
  min-block-size: 28rem !important;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 6% 2% auto auto;
  inline-size: min(28rem, 90%);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(103, 232, 249, 0.16), transparent 64%),
    radial-gradient(circle at 65% 30%, rgba(129, 140, 248, 0.18), transparent 58%);
  filter: blur(2px);
  pointer-events: none;
}

.glass-card,
.hero-visual .glass-card,
.tech-card,
.bento,
.panel,
.project,
.post,
.engine,
.robot,
.price,
.kpi-card,
.vm-card,
.align-card,
.step {
  border: 1px solid var(--bai-border) !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(8, 13, 28, 0.62)) !important;
  box-shadow: 0 24px 70px -38px rgba(15, 23, 42, 0.96) !important;
}

.ux-trust-grid {
  inline-size: min(100% - 2rem, var(--bai-container));
  margin: 0 auto clamp(2.75rem, 5vw, 4.5rem) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem !important;
}

.ux-trust-grid > * {
  min-block-size: 7rem;
  padding: 1.2rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: rgba(15, 23, 42, 0.62) !important;
}

.section {
  padding-block: clamp(4.5rem, 8vw, 7rem) !important;
}

.section > .container {
  display: block;
}

.section .title,
main > section h2.title,
.services-page h1,
.services-page .hero h1 {
  max-inline-size: 18ch;
  margin-inline: auto;
  margin-block: 0 1rem !important;
  text-align: center !important;
  color: #fff !important;
  font-size: clamp(2.15rem, 4vw, 3.45rem) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

.section .subtitle,
main > section p.subtitle {
  max-inline-size: 46rem !important;
  margin-inline: auto !important;
  text-align: center !important;
  color: var(--bai-muted) !important;
  font-size: clamp(1rem, 1.25vw, 1.17rem) !important;
  line-height: 1.95 !important;
}

.grid,
.cards-4,
.robotics,
.tri,
.engines,
.pricing,
.kpi-grid,
.blog,
.align,
.vm,
.projects,
.values,
.steps,
.bots {
  gap: clamp(1rem, 2vw, 1.4rem) !important;
}

.grid > .group,
.cards-4 > *,
.robotics > *,
.tri > *,
.engines > *,
.pricing > *,
.kpi-grid > *,
.blog > *,
.align > *,
.vm > *,
.projects > *,
.values > *,
.steps > *,
.bots > * {
  border-radius: 18px !important;
}

.seo-home-answer,
.seo-intent-section {
  inline-size: min(100% - 2rem, var(--bai-container));
  margin-inline: auto;
}

.seo-home-answer {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.seo-intent-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.seo-answer-block,
.seo-intent-group,
.seo-intent-links {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.48);
  padding: 1.2rem;
}

.seo-intent-group h2,
.seo-intent-links h2 {
  margin-block-start: 0;
  color: #f8fafc;
  font-size: 1.18rem;
}

.seo-intent-group h3 {
  color: #bfdbfe;
  font-size: 1rem;
}

.seo-intent-group p,
.seo-answer-block p,
.seo-intent-links a {
  color: var(--bai-muted);
  font-size: 0.98rem;
  line-height: 1.9;
}

/* Services catalog page. */
.services-page .hero,
body:has(.product-grid) .hero {
  padding-block: clamp(4.5rem, 8vw, 6rem) !important;
}

.services-page .hero-grid,
body:has(.product-grid) .hero-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 0.8fr) !important;
}

.product-grid,
.ai-agent-grid,
.service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.product-card,
.ai-agent-card,
.service-card {
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(8, 13, 28, 0.64)) !important;
  box-shadow: 0 22px 58px -40px rgba(0, 0, 0, 0.9) !important;
}

/* ContractAI landing page. */
.tender-landing-polish .hero,
body:has(.contractai-hero) .hero {
  min-block-size: auto !important;
  padding-block: clamp(4.5rem, 8vw, 7rem) !important;
}

.tender-landing-polish .hero h1,
body:has(.contractai-hero) .hero h1 {
  max-inline-size: 13ch !important;
  margin-inline: auto !important;
  font-size: clamp(2.8rem, 5vw, 4.8rem) !important;
  line-height: 1.08 !important;
}

.tender-landing-polish .feature-grid,
.tender-landing-polish .steps-grid,
.tender-landing-polish .pricing-grid,
body:has(.contractai-hero) .feature-grid,
body:has(.contractai-hero) .steps-grid,
body:has(.contractai-hero) .pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.accessibility-widget,
[aria-label="إعدادات الوصول"],
.a11y-toolbar {
  inset-inline-start: 1rem !important;
  inset-inline-end: auto !important;
  bottom: 1rem !important;
}

#bai-chat-fab,
.chat-fab,
.services-chatbot {
  inset-inline-start: auto !important;
  inset-inline-end: 1.1rem !important;
  bottom: 1.1rem !important;
}

.to-top,
#toTop {
  inset-inline-start: 1.1rem !important;
  inset-inline-end: auto !important;
}

@media (max-width: 1023px) {
  .nav-container {
    display: flex !important;
  }

  .hero-grid,
  .services-page .hero-grid,
  body:has(.product-grid) .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-content,
  .hero-copy {
    align-items: center !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  .hero-title,
  .hero-content .title,
  #top h1,
  .services-page .hero h1 {
    margin-inline: auto !important;
    max-inline-size: 12ch !important;
    font-size: clamp(2.45rem, 10vw, 4rem) !important;
  }

  .hero-subtitle,
  .hero-content .subtitle {
    max-inline-size: 34rem !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .hero-visual {
    min-block-size: 18rem !important;
    opacity: 0.9;
  }

  .ux-trust-grid,
  .seo-intent-section,
  .product-grid,
  .ai-agent-grid,
  .service-grid,
  .tender-landing-polish .feature-grid,
  .tender-landing-polish .steps-grid,
  .tender-landing-polish .pricing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .container,
  .nav-container,
  .seo-home-answer,
  .seo-intent-section,
  .ux-trust-grid {
    inline-size: min(100% - 1.25rem, var(--bai-container)) !important;
  }

  .hero.section,
  #top.hero {
    padding-block-start: calc(var(--nav-height, 60px) + 2rem) !important;
  }

  .hero-visual {
    display: none !important;
  }

  .hero-actions .btn {
    inline-size: 100%;
    justify-content: center;
  }
}

/* Midnight + Neon visual system for the Arabic homepage. */
html {
  font-family: var(--font-display) !important;
  background: var(--bg-base) !important;
}

h1,
h2,
h3,
h4,
strong {
  color: var(--text-primary) !important;
  letter-spacing: 0 !important;
}

p,
li {
  color: var(--text-secondary);
}

::selection {
  background: rgba(56,189,248,0.35);
  color: #fff;
}

* {
  letter-spacing: 0 !important;
}

.num,
.price,
.stat-value,
[data-num],
[data-count],
.big,
.amount {
  font-variant-numeric: tabular-nums;
}

.unified-nav,
header,
.navbar {
  background: rgba(6,7,13,.72) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
}

.navbar a,
.nav-link,
.nav-desktop a {
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
}

.navbar a:hover,
.navbar a[aria-current="page"],
.nav-link:hover {
  color: var(--text-primary) !important;
}

.search-input,
.search-desktop input,
.lang-switch,
.lang-switcher-btn,
.lang-switcher-btn-mobile {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.search-input::placeholder,
.search-desktop input::placeholder {
  color: var(--text-muted) !important;
}

.hero.section,
#top.hero,
.hero-shell {
  background: var(--gradient-hero) !important;
  position: relative !important;
  isolation: isolate;
}

.hero.section::before,
#top.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.75) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.75) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 86%);
}

.hero-title,
.hero-content .title,
#top h1 {
  color: var(--text-primary) !important;
  font-size: var(--fs-h1) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  max-inline-size: 14ch !important;
}

.hero-subtitle,
.hero-content .subtitle {
  color: var(--text-secondary) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  max-inline-size: 56ch !important;
}

.hero-content > .inline-flex:first-child {
  border-color: var(--border-neon) !important;
  background: rgba(56,189,248,0.08) !important;
  color: var(--brand-cyan) !important;
  box-shadow: var(--shadow-sm) !important;
}

.hero-content > .mt-12 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-block-start: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.03) !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero-content > .mt-12 .flex.gap-4 {
  gap: 8px !important;
  font-family: var(--font-display) !important;
}

.hero-content > .mt-12 .flex.gap-4 > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(52,211,153,.28);
  border-radius: 999px;
  background: rgba(52,211,153,.08);
  color: var(--text-primary);
}

.hero-content > .mt-12 .flex.gap-4 > span::before {
  content: "✓";
  color: var(--brand-emerald);
  font-weight: 900;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 24px;
  justify-content: flex-start;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}

.btn-lg {
  padding: 16px 26px !important;
  font-size: 1.0625rem !important;
}

.btn-primary {
  background: linear-gradient(135deg,#22C55E 0%, #16A34A 100%) !important;
  color: #06270F !important;
  box-shadow: 0 10px 30px rgba(34,197,94,.28) !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(34,197,94,.4) !important;
}

.btn-secondary {
  background: var(--gradient-cta) !important;
  color: #0A0F1F !important;
  box-shadow: var(--shadow-glow-cyan) !important;
  position: relative;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(56,189,248,.32) !important;
}

.btn-badge {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #0A0F1F;
  color: var(--brand-amber);
  font-weight: 800;
  border: 1px solid rgba(251,191,36,.4);
}

.btn-ic {
  flex-shrink: 0;
}

section,
.section {
  padding-block: var(--space-section) !important;
  position: relative;
}

main > section:nth-of-type(odd) {
  background: var(--bg-base) !important;
}

main > section:nth-of-type(even) {
  background: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-base) 100%) !important;
}

main > section + section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--gradient-divider);
  opacity: .6;
}

section > h2,
section .section-title,
.section .title,
main > section h2.title {
  color: var(--text-primary) !important;
  font-size: var(--fs-h2) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 14px !important;
  position: relative;
}

main > section h2.title {
  padding-inline-start: 18px;
}

main > section h2.title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .35em;
  bottom: .35em;
  width: 5px;
  border-radius: 4px;
  background: var(--gradient-cta);
  box-shadow: 0 0 18px rgba(56,189,248,.5);
}

section > p:first-of-type,
.section .subtitle,
main > section p.subtitle {
  color: var(--text-secondary) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  max-inline-size: 72ch !important;
}

.card,
[class*="card"],
.feature-card,
.service-card,
.pricing-card,
.glass-card,
.tech-card,
.bento,
.panel,
.project,
.post,
.engine,
.robot,
.price,
.kpi-card,
.vm-card,
.align-card,
.step,
.ux-trust-card,
.grid > .group {
  background: var(--bg-surface-1) !important;
  background-image: var(--gradient-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
  position: relative;
  overflow: hidden;
}

.card::before,
.glass-card::before,
.tech-card::before,
.bento::before,
.panel::before,
.project::before,
.post::before,
.engine::before,
.robot::before,
.price::before,
.kpi-card::before,
.vm-card::before,
.align-card::before,
.step::before,
.ux-trust-card::before,
.grid > .group::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.5), transparent);
  opacity: .5;
}

.card:hover,
.glass-card:hover,
.tech-card:hover,
.bento:hover,
.panel:hover,
.project:hover,
.post:hover,
.engine:hover,
.robot:hover,
.price:hover,
.kpi-card:hover,
.vm-card:hover,
.align-card:hover,
.step:hover,
.ux-trust-card:hover,
.grid > .group:hover {
  transform: translateY(-4px);
  border-color: var(--border-neon) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan) !important;
  background: var(--bg-surface-2) !important;
}

.card h3,
.card-title,
.glass-card h3,
.tech-card h3,
.bento h3,
.panel h3,
.project h3,
.post h3,
.engine h3,
.robot h3,
.price h3,
.kpi-card h3,
.vm-card h3,
.align-card h3,
.step h3,
.grid > .group h3 {
  color: var(--text-primary) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.card p,
.glass-card p,
.tech-card p,
.bento p,
.panel p,
.project p,
.post p,
.engine p,
.robot p,
.price p,
.kpi-card p,
.vm-card p,
.align-card p,
.step p,
.grid > .group p {
  color: var(--text-secondary) !important;
  line-height: var(--lh-body) !important;
}

.tag,
.badge,
.chip,
.sector .ico,
.tool-chip,
[class*="badge"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  background: rgba(56,189,248,.08) !important;
  color: var(--brand-cyan) !important;
  border: 1px solid rgba(56,189,248,.25) !important;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-surface-1) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
}

thead th {
  background: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-strong) !important;
}

tbody td {
  padding: 14px 16px;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

tbody tr:hover {
  background: rgba(56,189,248,.04) !important;
}

.price.enterprise,
.pricing-card.popular {
  border-color: var(--brand-violet) !important;
  box-shadow: var(--shadow-glow-violet) !important;
}

.price .amount,
.pricing-card .price,
.kpi .value,
.stat-value,
.kpi-card .big {
  color: transparent !important;
  background: var(--gradient-cta) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-weight: 900 !important;
}

.price ul li {
  color: var(--text-secondary) !important;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.project[data-cat="gov"] { border-top: 3px solid var(--brand-cyan) !important; }
.project[data-cat="health"] { border-top: 3px solid var(--brand-emerald) !important; }
.project[data-cat="retail"] { border-top: 3px solid var(--brand-magenta) !important; }
.project[data-cat="industry"] { border-top: 3px solid var(--brand-amber) !important; }
.project[data-cat="telco"] { border-top: 3px solid var(--brand-violet) !important; }
.project[data-cat="hr"] { border-top: 3px solid #F472B6 !important; }

.kpi,
.stat-card,
.kpi-card {
  text-align: center;
}

.kpi .label,
.kpi-card .unit {
  color: var(--text-tertiary) !important;
}

.bar,
.metric-bar {
  background: var(--bg-surface-3) !important;
  border-radius: 999px;
  overflow: hidden;
}

.bar > div,
.metric-bar > span {
  background: linear-gradient(90deg,#34D399,#22C55E) !important;
  border-radius: 999px;
}

.dash-3d .stats,
.live-stats {
  background:
    linear-gradient(rgba(11,14,26,.92),rgba(11,14,26,.92)),
    repeating-linear-gradient(0deg, rgba(56,189,248,.06) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(56,189,248,.06) 0 1px, transparent 1px 32px) !important;
  border: 1px solid var(--border-neon) !important;
  border-radius: var(--radius-xl) !important;
  padding: 32px !important;
}

.dash-3d .stats strong,
.live-stats .stat .value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #67E8F9 !important;
}

.live,
.pulse-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.live::before,
.pulse-dot {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.step {
  padding-top: 34px !important;
}

.workflow-stage-label {
  display: inline-grid !important;
  place-items: center;
  min-inline-size: 40px;
  min-block-size: 40px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--gradient-cta) !important;
  color: #0A0F1F !important;
  font-weight: 900 !important;
  box-shadow: var(--shadow-glow-cyan);
}

.steps {
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  inset-inline: 6%;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand-cyan) 0 8px, transparent 8px 16px);
  opacity: .35;
  pointer-events: none;
}

:focus-visible,
.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.6), 0 0 0 6px rgba(56,189,248,.18) !important;
  border-radius: 8px;
}

#bai-chat-wa,
.wa-fab {
  background: linear-gradient(135deg,#22C55E,#16A34A) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(34,197,94,.4) !important;
  transition: transform .2s ease;
}

#bai-chat-wa:hover,
.wa-fab:hover {
  transform: scale(1.04);
}

@media (max-width: 1023px) {
  .hero-cta-group {
    justify-content: center;
  }

  .steps::before {
    display: none;
  }
}

@media (max-width: 540px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Final homepage redesign layer: scoped, Arabic-first, content-preserving. */
body:has(#top) {
  --home-bg: #05070d;
  --home-bg-2: #080c16;
  --home-panel: rgba(13, 18, 31, 0.78);
  --home-panel-strong: rgba(18, 25, 42, 0.92);
  --home-border: rgba(212, 220, 235, 0.14);
  --home-border-strong: rgba(125, 211, 252, 0.34);
  --home-text: #f7fbff;
  --home-text-soft: #d7e2f2;
  --home-text-muted: #a9b6ca;
  --home-blue: #5eead4;
  --home-sky: #38bdf8;
  --home-purple: #a78bfa;
  --home-green: #22c55e;
  --home-gold: #fbbf24;
  --home-radius: 18px;
  --home-radius-lg: 24px;
  --home-shadow: 0 18px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background:
    radial-gradient(900px 420px at 82% 8%, rgba(56, 189, 248, 0.13), transparent 62%),
    radial-gradient(680px 380px at 8% 20%, rgba(34, 197, 94, 0.08), transparent 64%),
    linear-gradient(180deg, var(--home-bg) 0%, #070a12 42%, #05070d 100%) !important;
  color: var(--home-text-soft) !important;
}

body:has(#top) main {
  overflow: clip;
}

body:has(#top) .container {
  inline-size: min(100% - clamp(1.25rem, 4vw, 3rem), 1180px) !important;
}

body:has(#top) .unified-nav {
  background: rgba(5, 7, 13, 0.84) !important;
  border-block-end: 1px solid rgba(212, 220, 235, 0.11) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28) !important;
}

body:has(#top) .nav-link,
body:has(#top) .search-trigger,
body:has(#top) .lang-switcher-btn {
  min-block-size: 42px;
  border-radius: 12px !important;
}

body:has(#top) .nav-link:hover,
body:has(#top) .search-trigger:hover,
body:has(#top) .lang-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

body:has(#top) .breadcrumb-shell {
  inline-size: min(100% - clamp(1.25rem, 4vw, 3rem), 1180px);
  margin-inline: auto !important;
  padding: 0.85rem 0 !important;
}

body:has(#top) .hero-shell {
  min-block-size: auto !important;
  padding-block: clamp(4.8rem, 8vw, 7rem) clamp(4rem, 7vw, 6rem) !important;
  background:
    radial-gradient(900px 520px at 75% 4%, rgba(94, 234, 212, 0.14), transparent 64%),
    radial-gradient(720px 460px at 18% 18%, rgba(167, 139, 250, 0.14), transparent 62%),
    linear-gradient(180deg, #070a12 0%, #0a0f1b 52%, #05070d 100%) !important;
}

body:has(#top) .hero-shell::after {
  content: "";
  position: absolute;
  inset-inline: min(3vw, 3rem);
  inset-block-end: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.42), transparent);
  pointer-events: none;
}

body:has(#top) .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.74fr) !important;
}

body:has(#top) .hero-content {
  max-inline-size: 45rem !important;
}

body:has(#top) .hero-title,
body:has(#top) #top h1 {
  max-inline-size: 12ch !important;
  color: var(--home-text) !important;
  text-shadow: 0 10px 38px rgba(0, 0, 0, 0.38);
}

body:has(#top) .hero-subtitle {
  max-inline-size: 44rem !important;
  color: var(--home-text-soft) !important;
}

body:has(#top) .hero-cta-group,
body:has(#top) .hero-actions,
body:has(#top) .action-row {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.9rem !important;
}

body:has(#top) .btn,
body:has(#top) a.btn,
body:has(#top) .inline-flex[href] {
  min-block-size: 46px;
  border-radius: 14px !important;
  text-decoration: none !important;
}

body:has(#top) .btn.primary,
body:has(#top) .btn-primary,
body:has(#top) .hero-cta-consultation,
body:has(#top) a.bg-cyan-400 {
  border: 1px solid rgba(94, 234, 212, 0.35) !important;
  background: linear-gradient(135deg, #67e8f9 0%, #34d399 100%) !important;
  color: #041018 !important;
  box-shadow: 0 18px 42px rgba(45, 212, 191, 0.22) !important;
}

body:has(#top) .btn:not(.primary):not(.btn-primary),
body:has(#top) .btn-secondary,
body:has(#top) .btn.ghost,
body:has(#top) .hero-cta-demo {
  border: 1px solid var(--home-border) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--home-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body:has(#top) .btn:hover,
body:has(#top) .inline-flex[href]:hover {
  transform: translateY(-2px);
}

body:has(#top) section,
body:has(#top) .section {
  padding-block: clamp(4.8rem, 8.5vw, 7.6rem) !important;
}

body:has(#top) main > section {
  background:
    radial-gradient(620px 300px at 84% 0%, rgba(56, 189, 248, 0.055), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0)) !important;
}

body:has(#top) main > section:nth-of-type(even) {
  background:
    radial-gradient(620px 320px at 14% 10%, rgba(167, 139, 250, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)) !important;
}

body:has(#top) #contractai-system > .container > .relative,
body:has(#top) #try-tools,
body:has(#top) #interactive .dash-3d,
body:has(#top) #semrush-index-html,
body:has(#top) #geo-entity-answers,
body:has(#top) .brightai-internal-links {
  border: 1px solid var(--home-border) !important;
  background:
    linear-gradient(145deg, rgba(13, 18, 31, 0.84), rgba(8, 12, 22, 0.7)) !important;
  box-shadow: var(--home-shadow) !important;
}

body:has(#top) #try-tools {
  margin-inline: auto;
}

body:has(#top) .text-center,
body:has(#top) .section .title,
body:has(#top) .section .subtitle {
  text-align: center !important;
}

body:has(#top) .section .title,
body:has(#top) main > section h2.title {
  max-inline-size: 21ch !important;
  color: var(--home-text) !important;
  font-weight: 850 !important;
}

body:has(#top) .section .subtitle,
body:has(#top) main > section p.subtitle {
  max-inline-size: 58rem !important;
  color: var(--home-text-soft) !important;
}

body:has(#top) main > section h2.title::before {
  display: none !important;
}

body:has(#top) .badge,
body:has(#top) .tag,
body:has(#top) .chip,
body:has(#top) [class*="badge"],
body:has(#top) .tool-chip {
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  background: rgba(14, 165, 233, 0.09) !important;
  color: #c7f9ff !important;
}

body:has(#top) .grid > .group,
body:has(#top) .ux-trust-card,
body:has(#top) .tech-card,
body:has(#top) .panel,
body:has(#top) .bento,
body:has(#top) .robot,
body:has(#top) .engine,
body:has(#top) .bot,
body:has(#top) .step,
body:has(#top) .project,
body:has(#top) .kpi-card,
body:has(#top) .post,
body:has(#top) .align-card,
body:has(#top) .vm-card,
body:has(#top) .price,
body:has(#top) .seo-answer-block,
body:has(#top) .seo-intent-group,
body:has(#top) .seo-intent-links,
body:has(#top) #cities-served li,
body:has(#top) #sectors-served a {
  border: 1px solid var(--home-border) !important;
  border-radius: var(--home-radius-lg) !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--home-panel) !important;
  box-shadow: var(--home-shadow) !important;
}

body:has(#top) .grid > .group,
body:has(#top) .tech-card,
body:has(#top) .panel,
body:has(#top) .bento,
body:has(#top) .robot,
body:has(#top) .engine,
body:has(#top) .bot,
body:has(#top) .step,
body:has(#top) .project,
body:has(#top) .post,
body:has(#top) .price {
  padding: clamp(1.25rem, 2.3vw, 1.9rem) !important;
}

body:has(#top) .grid > .group:hover,
body:has(#top) .tech-card:hover,
body:has(#top) .panel:hover,
body:has(#top) .bento:hover,
body:has(#top) .robot:hover,
body:has(#top) .engine:hover,
body:has(#top) .bot:hover,
body:has(#top) .step:hover,
body:has(#top) .project:hover,
body:has(#top) .post:hover,
body:has(#top) .price:hover {
  border-color: var(--home-border-strong) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(56, 189, 248, 0.08) !important;
}

body:has(#top) .grid > .group p,
body:has(#top) .tech-card p,
body:has(#top) .panel p,
body:has(#top) .bento p,
body:has(#top) .robot p,
body:has(#top) .engine p,
body:has(#top) .bot p,
body:has(#top) .step p,
body:has(#top) .project p,
body:has(#top) .post p,
body:has(#top) .price p,
body:has(#top) .muted-note,
body:has(#top) .meta {
  color: var(--home-text-muted) !important;
}

body:has(#top) .grid > .group h3,
body:has(#top) .tech-card h3,
body:has(#top) .panel h3,
body:has(#top) .bento h3,
body:has(#top) .robot h3,
body:has(#top) .engine h3,
body:has(#top) .bot h4,
body:has(#top) .step h3,
body:has(#top) .project h3,
body:has(#top) .post h3,
body:has(#top) .price h3 {
  color: var(--home-text) !important;
}

body:has(#top) .robot img {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  filter: saturate(1.08) contrast(1.02);
}

body:has(#top) .compare-wrap,
body:has(#top) table {
  border-radius: var(--home-radius-lg) !important;
  border: 1px solid var(--home-border) !important;
  background: var(--home-panel-strong) !important;
  box-shadow: var(--home-shadow) !important;
}

body:has(#top) .compare th,
body:has(#top) table th {
  background: rgba(125, 211, 252, 0.09) !important;
  color: var(--home-text) !important;
}

body:has(#top) .compare td,
body:has(#top) table td {
  color: var(--home-text-soft) !important;
}

body:has(#top) .tools-row,
body:has(#top) .tri,
body:has(#top) .robotics,
body:has(#top) .engines,
body:has(#top) .bots,
body:has(#top) .steps,
body:has(#top) .projects,
body:has(#top) .blog,
body:has(#top) .align,
body:has(#top) .vm,
body:has(#top) .pricing,
body:has(#top) .kpi-grid,
body:has(#top) .grid-bento {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

body:has(#top) .price.enterprise {
  inline-size: min(100% - clamp(1.25rem, 4vw, 3rem), 1180px) !important;
  margin: 1.5rem auto 0 !important;
}

body:has(#top) #interactive .dash-body {
  gap: clamp(1rem, 3vw, 2rem) !important;
}

body:has(#top) .screen3d,
body:has(#top) .dash-3d .stats {
  border-color: rgba(125, 211, 252, 0.24) !important;
}

body:has(#top) .workflow-stage-label,
body:has(#top) .kpi strong,
body:has(#top) .amount {
  color: #06111b !important;
  background: linear-gradient(135deg, #67e8f9, #34d399) !important;
}

body:has(#top) #faq details,
body:has(#top) #faq .faq-item {
  border: 1px solid var(--home-border) !important;
  border-radius: var(--home-radius) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body:has(#top) footer {
  background:
    radial-gradient(620px 300px at 18% 0%, rgba(56, 189, 248, 0.08), transparent 70%),
    #05070d !important;
  border-block-start: 1px solid var(--home-border) !important;
}

body:has(#top) .mobile-dropdown {
  margin-inline-start: 0 !important;
  margin-inline-end: 3rem !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 1rem !important;
  border-inline-start: 0 !important;
  border-inline-end: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}

body:has(#top) .dropdown-menu {
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  transform-origin: top right !important;
}

body:has(#top) .to-top,
body:has(#top) #toTop,
body:has(#top) .cookies {
  inset-inline-start: 1.25rem !important;
  inset-inline-end: auto !important;
}

body:has(#top) #bai-chat-fab,
body:has(#top) .ch-widget {
  inset-inline-end: 1.25rem !important;
  inset-inline-start: auto !important;
}

@media (min-width: 1024px) {
  body:has(#top) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body:has(#top) .robotics,
  body:has(#top) .projects,
  body:has(#top) .blog,
  body:has(#top) .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  body:has(#top) .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(#top) .hero-content,
  body:has(#top) .hero-actions,
  body:has(#top) .hero-cta-group,
  body:has(#top) .action-row {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:has(#top) .hero-title,
  body:has(#top) .hero-subtitle {
    margin-inline: auto !important;
  }

  body:has(#top) .hero-content > .mt-12 {
    margin-inline: auto !important;
  }

  body:has(#top) .hero-visual {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body:has(#top) {
    --fs-body: 1rem;
  }

  body:has(#top) .hero-shell {
    padding-block-start: calc(var(--nav-height, 64px) + 2.25rem) !important;
  }

  body:has(#top) .hero-title,
  body:has(#top) #top h1 {
    font-size: clamp(2.35rem, 13vw, 3.5rem) !important;
    line-height: 1.12 !important;
  }

  body:has(#top) .hero-cta-group,
  body:has(#top) .hero-actions,
  body:has(#top) .action-row,
  body:has(#top) .flex.flex-wrap.gap-4 {
    inline-size: 100%;
  }

  body:has(#top) .hero-cta-group > *,
  body:has(#top) .hero-actions > *,
  body:has(#top) .action-row > *,
  body:has(#top) .btn,
  body:has(#top) a.btn {
    inline-size: 100%;
    justify-content: center !important;
  }

  body:has(#top) .section .title,
  body:has(#top) main > section h2.title {
    max-inline-size: 100% !important;
    font-size: clamp(1.8rem, 8vw, 2.55rem) !important;
  }

  body:has(#top) .grid,
  body:has(#top) .tri,
  body:has(#top) .robotics,
  body:has(#top) .engines,
  body:has(#top) .bots,
  body:has(#top) .steps,
  body:has(#top) .projects,
  body:has(#top) .blog,
  body:has(#top) .align,
  body:has(#top) .vm,
  body:has(#top) .pricing,
  body:has(#top) .kpi-grid,
  body:has(#top) .grid-bento {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(#top) .compare-wrap {
    overflow-x: auto;
  }

  body:has(#top) .compare {
    min-inline-size: 42rem;
  }

  body:has(#top) .cookies {
    inset-inline: 0.75rem !important;
    inline-size: auto !important;
  }
}