/* ═══════════════════════════════════════════════════════════
   Infonoxe Technologies — Light Theme Override
   Replaces the dark (slate-950) palette with infonoxe.com's
   clean white + #1a6fc4 blue aesthetic.
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800;900&family=Manrope:wght@400;500;600;700&display=swap');

/* ── Root tokens ── */
:root {
  --blue:        #1a6fc4;
  --blue-dark:   #0d4f9e;
  --blue-light:  rgba(26,111,196,0.08);
  --blue-border: rgba(26,111,196,0.2);
  --wa:          #25d366;
}

/* ── Base ── */
*, body, h1, h2, h3, h4, h5, h6, p, span, a, li {
  font-family: 'Manrope', sans-serif !important;
}

h1, h2, h3 {
  font-family: 'Sora', sans-serif !important;
}

body {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* ── Dark section/page backgrounds ── */
.bg-\[\#020817\],
.bg-\[\#07111f\],
.bg-slate-950,
.bg-slate-900 {
  background-color: #ffffff !important;
}

/* Semi-transparent dark backgrounds (navbar, overlays) */
.bg-slate-950\/50,
.bg-slate-950\/55,
.bg-slate-950\/60,
.bg-slate-950\/85,
.bg-slate-900\/60,
.bg-black\/60 {
  background-color: rgba(255,255,255,0.95) !important;
}

/* Cards / panels using transparent white on dark */
.bg-white\/\[0\.025\],
.bg-white\/\[0\.02\],
.bg-white\/\[0\.03\],
.bg-white\/\[0\.04\],
.bg-white\/5 {
  background-color: #f8f9fb !important;
}

.bg-white\/10,
.bg-white\/15 {
  background-color: #f0f4f8 !important;
}

.bg-white\/30 {
  background-color: #e8eef5 !important;
}

/* Backdrop blur (navbar pill, dropdowns) */
.backdrop-blur-md,
.backdrop-blur-sm,
.backdrop-blur-xl {
  background-color: rgba(255,255,255,0.97) !important;
}

/* ── Borders ── */
.border-white\/10,
.border-white\/\[0\.06\],
.border-white\/\[0\.07\] {
  border-color: rgba(0,0,0,0.08) !important;
}

.hover\:border-white\/20:hover,
.hover\:border-white\/\[0\.14\]:hover {
  border-color: rgba(26,111,196,0.3) !important;
}

/* ── Text: white & light-on-dark → dark ── */
.text-white { color: #0a0a0a !important; }
.text-slate-200 { color: #333333 !important; }
.text-slate-300 { color: #444444 !important; }
.text-slate-400 { color: #666666 !important; }
.text-slate-500 { color: #777777 !important; }
.text-slate-700 { color: #333333 !important; }
.text-slate-950 { color: #0a0a0a !important; }
.text-gray-200  { color: #444444 !important; }

/* Hover on text-white elements */
.hover\:text-white:hover    { color: #0a0a0a !important; }
.hover\:text-slate-950:hover { color: var(--blue) !important; }

/* ── Gradient headline text: cyan → infonoxe blue ── */
.text-transparent.bg-clip-text,
.bg-clip-text.text-transparent {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  background-image: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%) !important;
}

/* Stop-colour overrides so gradients point to infonoxe blue */
.from-cyan-300,
.from-cyan-400 {
  --tw-gradient-from: var(--blue) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-cyan-400,
.via-blue-400 {
  --tw-gradient-stops: var(--tw-gradient-from), var(--blue) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.to-blue-400,
.to-blue-500,
.to-indigo-400 {
  --tw-gradient-to: var(--blue-dark) var(--tw-gradient-to-position) !important;
}

/* Dark-to-transparent gradients (hero image overlays) → remove darkening */
.from-black\/80,
.from-slate-950\/80,
.from-slate-950\/85,
.via-slate-950\/20,
.via-slate-900\/20 {
  --tw-gradient-from: rgba(255,255,255,0) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.bg-gradient-to-t.from-black\/80,
.bg-gradient-to-t.from-slate-950\/80 {
  background-image: none !important;
}

/* ── Cyan → Infonoxe Blue (accent swaps) ── */
.text-cyan-300,
.text-cyan-400,
.hover\:text-cyan-300:hover,
.hover\:text-cyan-400:hover,
.group:hover .group-hover\:text-cyan-300 {
  color: var(--blue) !important;
}

.bg-cyan-400,
.bg-cyan-500 {
  background-color: var(--blue) !important;
}

.hover\:bg-cyan-400:hover,
.hover\:bg-cyan-500:hover {
  background-color: var(--blue-dark) !important;
}

.bg-cyan-400\/10,
.bg-cyan-500\/10,
.bg-cyan-400\/\[0\.08\],
.bg-cyan-500\/\[0\.07\],
.hover\:bg-cyan-500\/\[0\.08\]:hover {
  background-color: var(--blue-light) !important;
}

.border-cyan-400\/20,
.border-cyan-500\/20,
.border-cyan-500\/25,
.focus\:border-cyan-400:focus {
  border-color: var(--blue-border) !important;
}

.shadow-cyan-500\/25,
.hover\:shadow-cyan-500\/25:hover,
.shadow-cyan-500\/\[0\.07\],
.hover\:shadow-cyan-500\/\[0\.07\]:hover {
  --tw-shadow-color: rgba(26,111,196,0.2) !important;
}

/* ── Blue-600 accent (buttons) ── */
.bg-blue-600     { background-color: var(--blue) !important; }
.bg-blue-600\/10 { background-color: var(--blue-light) !important; }
.hover\:bg-blue-700:hover { background-color: var(--blue-dark) !important; }
.border-blue-500  { border-color: var(--blue-border) !important; }

/* ── Primary CTA buttons ── */
/* "Book a Demo" / "Contact" dark buttons → infonoxe blue */
.bg-slate-900.text-white,
button.bg-slate-900 {
  background-color: var(--blue) !important;
}

/* ── Hero grid animation ── */
.hero-grid {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(rgba(26,111,196,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,111,196,0.055) 1px, transparent 1px) !important;
}

/* ── Hero ambient blobs ── */
.hero-wave-1 {
  background: radial-gradient(circle at center, rgba(26,111,196,0.07), transparent 45%) !important;
}
.hero-wave-2 {
  background: radial-gradient(circle at center, rgba(26,111,196,0.05), transparent 42%) !important;
}
.hero-wave-3 {
  background: radial-gradient(circle at center, rgba(26,111,196,0.04), transparent 40%) !important;
}

/* ── WhatsApp / green accents — keep as-is ── */
.bg-emerald-400, .bg-emerald-500 { background-color: #25d366 !important; }
.text-emerald-300 { color: #059669 !important; }
.border-emerald-400\/20, .border-emerald-500\/20 { border-color: rgba(5,150,105,0.2) !important; }

/* ── Sections that use a dark inset card look ── */
/* Contact form inputs */
.bg-slate-900\/60 input,
.bg-slate-900\/60 textarea {
  background: #f8f9fb !important;
  color: #111 !important;
  border-color: rgba(0,0,0,0.12) !important;
}

.placeholder\:text-slate-500::placeholder {
  color: #aaa !important;
}

/* ── Navbar specific ── */
/* The nav pill wrapper that used dark glass */
[class*="backdrop-blur"] {
  background-color: rgba(255,255,255,0.97) !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* Logo (white logo on dark → switch to colored version) */
nav img[src*="logo"],
header img[src*="logo"] {
  filter: none !important;
}

/* ── Scrollbar (match infonoxe.com) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ── Section dividers / dot patterns ── */
.opacity-\[0\.03\] { opacity: 0.04 !important; filter: invert(1); }

/* ── Glow effects on dark ── */
.shadow-\[0_0_8px_rgba\(34\,211\,238\,0\.6\)\] {
  box-shadow: 0 0 8px rgba(26,111,196,0.35) !important;
}

/* ── Animation dot color swap ── */
.bg-cyan-400.animate-ping,
.bg-cyan-500.animate-ping {
  background-color: var(--blue) !important;
}

/* ── Ensure white text on infonoxe-blue backgrounds stays white ── */
.bg-blue-600 .text-white,
.bg-\[#1a6fc4\] .text-white,
[style*="background: #1a6fc4"] .text-white,
[style*="background-color: #1a6fc4"] .text-white {
  color: #ffffff !important;
}

/* ── Fix amber/yellow highlights ── */
.text-amber-300 { color: #d97706 !important; }
.bg-amber-400, .bg-amber-500 { background-color: #f59e0b !important; }

/* ── Footer link colors ── */
a.text-slate-400:hover,
.hover\:text-cyan-400:hover {
  color: var(--blue) !important;
}

/* ── Misc: ensure no dark remnants bleed through ── */
.bg-slate-700\/20 { background-color: rgba(0,0,0,0.04) !important; }
.border-slate-600\/20 { border-color: rgba(0,0,0,0.08) !important; }
.text-slate-200.bg-clip-text { color: #333 !important; }