/* ============================================================
   Octaboo Light/Dark Theme Layer
   Keeps the existing dark UI intact and adds a readable light UI
   across the static Tailwind CDN pages.
   ============================================================ */
:root {
  --theme-bg: #0d0b17;
  --theme-bg-soft: #111125;
  --theme-surface: rgba(255, 255, 255, 0.04);
  --theme-surface-strong: rgba(255, 255, 255, 0.08);
  --theme-border: rgba(255, 255, 255, 0.1);
  --theme-text: #f8fafc;
  --theme-muted: #a5a5c7;
  --theme-heading: #ffffff;
  --theme-primary: #7c3aed;
  --theme-primary-2: #a855f7;
  --theme-shadow: rgba(0, 0, 0, 0.45);

  /* Timed Pop-up variables (Dark Mode default) */
  --popup-bg: rgba(10, 10, 11, 0.95);
  --popup-text: #f8fafc;
  --popup-text-muted: #94a3b8;
  --popup-border: rgba(139, 92, 246, 0.3);
  --popup-border-focus: #8b5cf6;
  --popup-border-focus-glow: rgba(139, 92, 246, 0.4);
  --popup-btn-bg: #8b5cf6;
  --popup-btn-bg-hover: #7c3aed;
  --popup-btn-text: #ffffff;
  --popup-input-bg: rgba(255, 255, 255, 0.03);
  --popup-input-bg-focus: rgba(255, 255, 255, 0.05);
  --popup-input-border: rgba(139, 92, 246, 0.3);
  --popup-input-text: #ffffff;
  --popup-input-placeholder: #64748b;
  --popup-overlay: rgba(2, 6, 23, 0.85);
  --popup-close-color: #94a3b8;
  --popup-close-hover-bg: rgba(255, 255, 255, 0.08);
  --popup-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --popup-glow: 0 0 30px rgba(139, 92, 246, 0.25);

  --brand-purple: #8b5cf6;
  --brand-purple-transparent: rgba(139, 92, 246, 0.2);
  --popup-badge-border: rgba(139, 92, 246, 0.5);
  --popup-badge-shadow: rgba(139, 92, 246, 0.2);
  --popup-badge-bg: rgba(139, 92, 246, 0.08);
  --popup-floating-shadow: rgba(139, 92, 246, 0.3);
  --popup-glow-mid: rgba(139, 92, 246, 0.65);
  --popup-mesh-bg: radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%), radial-gradient(at 50% 50%, rgba(139, 92, 246, 0.05) 0px, transparent 50%);
}

html.light {
  color-scheme: light;
  --theme-bg: #f8f6ff;
  --theme-bg-soft: #ffffff;
  --theme-surface: rgba(255, 255, 255, 0.74);
  --theme-surface-strong: rgba(255, 255, 255, 0.92);
  --theme-border: rgba(124, 58, 237, 0.16);
  --theme-text: #111827;
  --theme-muted: #5f6475;
  --theme-heading: #0f172a;
  --theme-shadow: rgba(88, 28, 135, 0.12);

  /* Timed Pop-up variables (Light Mode overrides) */
  --popup-bg: rgba(255, 255, 255, 0.98);
  --popup-text: #0f172a;
  --popup-text-muted: #64748b;
  --popup-border: rgba(124, 58, 237, 0.2);
  --popup-border-focus: #7c3aed;
  --popup-border-focus-glow: rgba(124, 58, 237, 0.3);
  --popup-btn-bg: #7c3aed;
  --popup-btn-bg-hover: #6d28d9;
  --popup-btn-text: #ffffff;
  --popup-input-bg: rgba(15, 23, 42, 0.03);
  --popup-input-bg-focus: rgba(15, 23, 42, 0.05);
  --popup-input-border: rgba(124, 58, 237, 0.24);
  --popup-input-text: #0f172a;
  --popup-input-placeholder: #94a3b8;
  --popup-overlay: rgba(15, 23, 42, 0.45);
  --popup-close-color: #64748b;
  --popup-close-hover-bg: rgba(15, 23, 42, 0.06);
  --popup-shadow: 0 25px 50px -12px rgba(88, 28, 135, 0.12);
  --popup-glow: 0 0 30px rgba(124, 58, 237, 0.12);

  --brand-purple: #7c3aed;
  --brand-purple-transparent: rgba(124, 58, 237, 0.2);
  --popup-badge-border: rgba(124, 58, 237, 0.4);
  --popup-badge-shadow: rgba(124, 58, 237, 0.15);
  --popup-badge-bg: rgba(124, 58, 237, 0.06);
  --popup-floating-shadow: rgba(124, 58, 237, 0.2);
  --popup-glow-mid: rgba(124, 58, 237, 0.45);
  --popup-mesh-bg: radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.08) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(124, 58, 237, 0.05) 0px, transparent 50%), radial-gradient(at 50% 50%, rgba(124, 58, 237, 0.03) 0px, transparent 50%);
}

html.light
{
background-color: rgba(255, 255, 255, 0.76) !important;
  color: var(--theme-text) !important;
}

html.light body::selection {
  background: rgba(124, 58, 237, 0.18);
  color: #111827;
}

/* Page and section backgrounds */
html.light .body-bg-color,
html.light .dark-mesh-gradient,
html.light .bg-gradient-mesh,
html.light .mesh-gradient,
html.light .gradient-bg,
html.light .bg-radial-glow,
html.light .radial-gradient-bg,
html.light .feature-one,
html.light .feature-one-vertical,
html.light .footer-right-shadow,
html.light .cta-card-bg
{
  background:
    radial-gradient(760px 420px at 10% 0%, rgba(214, 122, 177, 0.18), transparent 56%),
    radial-gradient(700px 380px at 92% 10%, rgba(54, 133, 181, 0.14), transparent 56%),
    #f8f6ff !important;
}

html.light #precision-routing path{
    stroke: rgba(124, 58, 237, 0.38);
}

html.light .gradient-bg {
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.12) 0%, #f8f6ff 70%) !important;
}

html.light .mesh-gradient,
html.light .bg-gradient-mesh {
  background-size: 400% 400%;
}

/* Tailwind dark backgrounds that were hardcoded in the generated pages */
html.light .bg-background-dark,
html.light .bg-deep-black,
html.light .bg-space-black,
html.light .bg-midnight,
html.light .bg-card-bg,
html.light [class~="bg-background-dark/80"],
html.light [class~="bg-midnight/50"],
html.light [class~="bg-midnight-black/60"],
html.light [class~="bg-charcoal/50"],
html.light [class~="bg-[#0B0B14]"],
html.light [class~="bg-[#0B0D19]"],
html.light [class~="bg-[#050208]"],
html.light [class~="bg-[#020205]"],
html.light [class~="bg-[#020408]"],
html.light .bg-slate-950,
html.light .bg-slate-900,
html.light [class~="bg-slate-900/50"],
html.light [class~="bg-slate-900/80"],
html.light [class~="bg-slate-900/90"],
html.light .bg-slate-800,
html.light [class~="bg-slate-800/40"],
html.light [class~="bg-slate-800/50"],
html.light .bg-slate-700,
html.light .bg-gray-800,
html.light .bg-gray-700,
html.light .bg-deep-purple,
html.light [class~="bg-deep-purple/90"],
html.light [class~="bg-indigo-950/40"],
html.light [class~="bg-indigo-950/80"],
html.light [class~="bg-purple-900/10"],
html.light [class~="bg-purple-900/20"],
html.light [class~="bg-purple-900/30"],
html.light [class~="bg-purple-950/20"],
html.light [class~="bg-black/20"],
html.light [class~="bg-black/40"],
html.light .bg-black,
html.light [class~="bg-[#0c0c0e]"]
{
  background-color: rgba(255, 255, 255, 0.76) !important;
}

html.light [class~="bg-white/5"],
html.light [class~="bg-white/10"],
html.light [class~="bg-white/20"],
html.light [class~="bg-white/[0.02]"],
html.light [class~="bg-glass-white"],
html.light [class~="bg-glass-white/5"] {
  background-color: rgba(255, 255, 255, 0.72) !important;
}

html.light .bg-transparent {
  background-color: transparent !important;
}

/* Gradient stop corrections for light mode */
html.light .from-black,
html.light [class~="from-[#0a0c14]"],
html.light [class~="from-purple-900/10"],
html.light [class~="from-purple-900/20"],
html.light [class~="from-purple-900/30"],
html.light [class~="from-purple-900/40"],
html.light [class~="from-blue-900/20"],
html.light [class~="from-blue-900/30"],
html.light [class~="from-purple-800/20"] {
  --tw-gradient-from: rgba(255, 255, 255, 0.86) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position) !important;
}

html.light .to-deep-black,
html.light [class~="to-[#05070a]"],
html.light [class~="to-blue-900/20"],
html.light [class~="to-blue-900/40"],
html.light [class~="to-blue-900/60"],
html.light [class~="to-indigo-900"],
html.light [class~="to-purple-900/10"],
html.light [class~="to-purple-900/40"] {
  --tw-gradient-to: rgba(248, 246, 255, 0.96) var(--tw-gradient-to-position) !important;
}

html.light [class~="via-transparent"],
html.light [class~="via-purple-900/30"],
html.light [class~="via-accent-purple/20"],
html.light [class~="via-primary/20"] {
  --tw-gradient-via: rgba(255, 255, 255, 0.45) var(--tw-gradient-via-position) !important;
}

/* Text utilities: convert dark-theme text to light-theme readable text */
html.light .text-white,
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-slate-300,
html.light .text-gray-200,
html.light .text-gray-300,
html.light [class~="text-white/90"],
html.light [class~="text-white/80"],
html.light [class~="text-white/70"],
html.light [class~="text-[#C7C3D6]"],
html.light .feature-one__title,
html.light .feature-one__rating-text,
html.light .footer-col-heading {
  color: var(--theme-heading) !important;
}

html.light .text-slate-400,
html.light .text-slate-500,
html.light .text-gray-400,
html.light .text-gray-500,
html.light [class~="text-white/60"],
html.light [class~="text-white/40"],
html.light .text-lavender-muted,
html.light .feature-one__subtext,
html.light .feature-one-vertical__subtext,
html.light .footer-nav-link,
html.light .article-text {
  color: var(--theme-muted) !important;
}

html.light .text-slate-600,
html.light .text-gray-600,
html.light .text-gray-700,
html.light .text-slate-900,
html.light .text-black {
  color: var(--theme-text) !important;
}

/* Keep intentionally bright button / badge text white */
html.light .thm-btn,
html.light .octa-navbar__btn--primary,
html.light .octa-navbar__mobile-btn--primary,
html.light .newsletter-send-btn,
html.light .footer-widget__btn,
html.light [class*="bg-gradient-to"][class~="text-white"],
html.light [class*="bg-gradient-to"] [class~="text-white"],
html.light .bg-primary[class~="text-white"],
html.light .bg-accent-purple[class~="text-white"],
html.light .bg-purple-500[class~="text-white"],
html.light .bg-purple-600[class~="text-white"],
html.light [class~="bg-[#6366f1]"][class~="text-white"],
html.light [class~="bg-[#8b5cf6]"][class~="text-white"],
html.light .bg-brand-purple[class~="text-white"],
html.light .bg-octa-purple[class~="text-white"],
html.light .bg-neonPurple[class~="text-white"],
html.light .bg-neon-purple[class~="text-white"],
html.light .bg-blue-500[class~="text-white"],
html.light .bg-blue-600[class~="text-white"],
html.light .bg-accent-emerald[class~="text-white"],
html.light [class~="bg-[#0bda87]"][class~="text-white"],
html.light .bg-emerald-500[class~="text-white"],
html.light .bg-green-500[class~="text-white"],
html.light .bg-orange-500[class~="text-white"] {
  color: #ffffff !important;
}

/* Cards, panels, forms and glassmorphism surfaces */
html.light .glass-card,
html.light .glass-panel,
html.light .glass-effect,
html.light .glass-shape,
html.light .search-glow,
html.light .bento-card,
html.light .routing-glass-card,
html.light .prospect-glass-panel,
html.light .glass-node-3d,
html.light .wl-glass-panel,
html.light .digital-page,
html.light .logo-card,
html.light .glass-toggle,
html.light .glass-icon,
html.light .floating-element,
html.light .icon-glass,
html.light .feature-icon-box,
html.light .blockquote-custom,
html.light .page-sales-team .glass-panel,
html.light .page-growth-strategy .glass-panel,
html.light .page-sub-solution .glass-panel,
html.light .page-main-solutions .glass-card,
html.light .page-sub-solution .glass-card,
html.light .page-sales-team .glass-card,
html.light .page-growth-strategy .glass-card {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 24px 70px -28px var(--theme-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html.light .glass-card:hover,
html.light .bento-card:hover,
html.light .routing-glass-card:hover,
html.light .page-main-solutions .glass-card:hover,
html.light .page-sub-solution .glass-card:hover,
html.light .page-sales-team .glass-card:hover,
html.light .page-growth-strategy .glass-card:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(124, 58, 237, 0.38) !important;
  box-shadow: 0 32px 90px -34px rgba(124, 58, 237, 0.34), 0 0 28px rgba(168, 85, 247, 0.12) !important;
}

html.light .glass-card::before,
html.light .routing-glass-card::before,
html.light .bento-card::before {
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(168, 85, 247, 0.10) 0%, transparent 60%) !important;
}

/* Borders from dark Tailwind utility classes */
html.light [class~="border-white/5"],
html.light [class~="border-white/10"],
html.light [class~="border-white/20"],
html.light [class~="border-white/30"],
html.light [class~="border-white/80"],
html.light .border-slate-800,
html.light .border-slate-700,
html.light .border-gray-700,
html.light .border-midnight-black,
html.light .border-glass-border,
html.light [class~="border-black"] {
  border-color: var(--theme-border) !important;
}

html.light .border-t,
html.light .border-b,
html.light .border-r,
html.light .border-x {
  border-color: var(--theme-border);
}

/* Inputs */
html.light input,
html.light textarea,
html.light select,
html.light .footer-widget__email-input-box input[type="email"],
html.light [class~="bg-slate-100"] {
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: var(--theme-text) !important;
  border-color: rgba(124, 58, 237, 0.18) !important;
}

html.light input::placeholder,
html.light textarea::placeholder,
html.light .newsletter-input::placeholder {
  color: rgba(95, 100, 117, 0.72) !important;
}

/* Decorative patterns and glows tuned for light mode */
html.light .bg-grid-pattern,
html.light .tech-grid,
html.light .grid-bg,
html.light .grid-pattern,
html.light .bg-grid-tech,
html.light .automation-grid-pattern,
html.light .bg-grid-blueprint,
html.light .circuit-pattern,
html.light .data-particles {
  opacity: 0.75;
}

html.light .tech-grid,
html.light .grid-pattern,
html.light .automation-grid-pattern {
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 133, 181, 0.06) 1px, transparent 1px) !important;
}

html.light .radial-glow,
html.light .neural-glow,
html.light .mission-glow,
html.light .vision-glow,
html.light .glow-aura {
  opacity: 0.65;
  mix-blend-mode: multiply;
}

html.light .feature-one__color-overly-1,
html.light .feature-one__color-overly-2,
html.light .feature-one__color-overly-3 {
  opacity: 0.16 !important;
  z-index: 0;
}

html.light .octa-orbit__ring {
  border-color: rgba(124, 58, 237, 0.20) !important;
}

html.light .octa-orbit__center,
html.light .octa-orbit__node {
  background-color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(124, 58, 237, 0.16) !important;
  box-shadow: 0 20px 55px -24px rgba(88, 28, 135, 0.36) !important;
}

html.light .particle,
html.light .routing-particle {
  background: #7c3aed !important;
  opacity: 0.16 !important;
}

html.light .mist-fade,
html.light .fade-edge-right::after {
  background: linear-gradient(to bottom, transparent, rgba(248, 246, 255, 0.95)) !important;
}

html.light .fade-edge-right::after {
  background: linear-gradient(to right, transparent, rgba(248, 246, 255, 0.96)) !important;
}

/* Footer light mode */
html.light .footer-right-shadow {
  background: #ffffff !important;
  border-top: 1px solid var(--theme-border);
}

html.light .footer-right-shadow::before,
html.light .free-trail__shape-1 {
  opacity: 0.08 !important;
}

html.light .cta-card-bg {
  border-color: rgba(124, 58, 237, 0.20) !important;
  box-shadow: 0 26px 70px -34px rgba(88, 28, 135, 0.28) !important;
}

html.light .cta-inner-shadow {
  box-shadow: -25px 0 35px -24px rgba(88, 28, 135, 0.25) !important;
}

html.light .footer-social-link {
  color: rgba(17, 24, 39, 0.62) !important;
}

html.light .footer-social-link:hover {
  color: var(--theme-primary) !important;
}

html.light .monochrome-logo {
  filter: brightness(0) opacity(0.7) !important;
}

/* Scrollbar */
html.light ::-webkit-scrollbar-track {
  background: #f3efff;
}

html.light ::-webkit-scrollbar-thumb {
  background: #c4b5fd;
}

/* Accessibility: reduce harsh text shadows in light mode */
html.light .glow-text,
html.light .glow-purple,
html.light .glow-text-purple,
html.light .text-glow,
html.light .text-glow-purple,
html.light .neon-glow {
  text-shadow: none !important;
}

/* Gradient text needs darker starts in light mode so headings stay visible. */
html.light .text-gradient-neon,
html.light .text-gradient-growth,
html.light .gradient-text,
html.light .gradient-text-glow,
html.light .text-gradient-purple-testimonial,
html.light .icon-14 {
  background: linear-gradient(135deg, #111827 0%, #7c3aed 55%, #3685b5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.light .feature-one-vertical__title span,
html.light .text-glow-purple,
html.light .text-glow-primary,
html.light .text-glow-orange {
  filter: none !important;
}



.hero-section{
  margin-top: 140px !important;
}