:root {
  --brand: #eb5d1e;
  --night: #0b1021;
  --ink: #0c1221;
  --mist: #c7d2e5;
  --circuit-stroke: rgba(235, 93, 30, 0.32);
  --circuit-glow: rgba(235, 93, 30, 0.55);
  --circuit-backdrop: rgba(255, 255, 255, 0.08);
}

body {
  font-family: "Space Grotesk", "Manrope", Inter, system-ui, -apple-system, sans-serif;
  background-color: #0b1021;
  color: #e9edf5;
}

html {
  background-color: #0b1021;
}
main {
  background-color: #0b1021;
}

[data-theme="light"] body {
  background-color: #f7f9fc;
  color: #0f172a;
}

[data-theme="light"] {
  --circuit-stroke: rgba(235, 93, 30, 0.42);
  --circuit-glow: rgba(235, 93, 30, 0.7);
  --circuit-backdrop: rgba(235, 93, 30, 0.12);
}

[data-theme="light"] main {
  background-color: #f7f9fc;
}
[data-theme="light"] html {
  background-color: #f7f9fc;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-fog {
  color: #475569 !important;
}

[data-theme="light"] .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .text-brand {
  color: #eb5d1e !important;
}

[data-theme="light"] .bg-night,
[data-theme="light"] .bg-0c1221,
[data-theme="light"] .bg-0e172a,
[data-theme="light"] .bg-0b1120,
[data-theme="light"] .bg-0b0f1a,
[data-theme="light"] .bg-090c15,
[data-theme="light"] .bg-080b12,
[data-theme="light"] .bg-080d16 {
  background-color: #f7f9fc !important;
}

[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10,
[data-theme="light"] .bg-white\/15 {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="light"] .bg-night\/70,
[data-theme="light"] .bg-midnight\/70,
[data-theme="light"] .bg-night\/60 {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/15 {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .shadow-glow {
  box-shadow: 0 10px 30px rgba(235, 93, 30, 0.18);
}

[data-theme="light"] #hero .text-fog,
[data-theme="light"] #hero .text-slate-300 {
  color: #334155 !important;
}

[data-theme="light"] footer {
  border-color: rgba(15, 23, 42, 0.08);
}

/* Section backgrounds for light mode */
[data-theme="light"] #hero {
  background: radial-gradient(circle at 20% 20%, rgba(235, 93, 30, 0.18), transparent 35%), radial-gradient(circle at 80% 0%, rgba(235, 93, 30, 0.12), transparent 30%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  color: #0f172a;
}

/* Light mode hero override for Nyaraka Point page */
[data-theme="light"] #nyaraka-point-hero {
  background: radial-gradient(circle at 20% 20%, rgba(235, 93, 30, 0.16), transparent 35%), radial-gradient(circle at 80% 0%, rgba(235, 93, 30, 0.1), transparent 30%), linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  color: #0f172a;
}

[data-theme="light"] #about,
[data-theme="light"] #services,
[data-theme="light"] #solutions,
[data-theme="light"] #case-studies,
[data-theme="light"] #process,
[data-theme="light"] #contact {
  background: #f7f9fc;
}

[data-theme="light"] footer {
  background: #f1f5f9;
}

[data-theme="light"] footer > div {
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .rounded-3xl.bg-white\/5,
[data-theme="light"] .rounded-2xl.bg-white\/5 {
  background: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .rounded-3xl.bg-white\/5 .text-fog,
[data-theme="light"] .rounded-2xl.bg-white\/5 .text-fog {
  color: #475569 !important;
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5 {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Light theme adjustments for header */
[data-theme="light"] header {
  background-color: rgba(247, 249, 252, 0.94);
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] header a {
  color: #0f172a;
}

[data-theme="light"] header a:hover {
  color: #eb5d1e;
}

/* Handle arbitrary dark backgrounds from Tailwind-style classes */
[data-theme="light"] [class*="bg-[#0c1221]"],
[data-theme="light"] [class*="bg-[#0e172a]"],
[data-theme="light"] [class*="bg-[#0b1120]"],
[data-theme="light"] [class*="bg-[#0b0f1a]"],
[data-theme="light"] [class*="bg-[#090c15]"],
[data-theme="light"] [class*="bg-[#080b12]"],
[data-theme="light"] [class*="bg-[#080d16]"],
[data-theme="light"] [class*="bg-night"],
[data-theme="light"] [class*="bg-midnight"] {
  background-color: #f7f9fc !important;
}

[data-theme="light"] section {
  color: #0f172a;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: #0f172a;
}

[data-theme="light"] .rounded-3xl.bg-white\/5,
[data-theme="light"] .rounded-2xl.bg-white\/5,
[data-theme="light"] .rounded-2xl.bg-night\/70,
[data-theme="light"] .rounded-2xl.bg-midnight\/70,
[data-theme="light"] .rounded-2xl.bg-night\/60 {
  background: rgba(255, 255, 255, 0.94) !important;
}

[data-theme="light"] .rounded-3xl.bg-white\/5 h3,
[data-theme="light"] .rounded-2xl.bg-white\/5 h3,
[data-theme="light"] .rounded-2xl.bg-night\/70 h3,
[data-theme="light"] .rounded-2xl.bg-midnight\/70 h3,
[data-theme="light"] .rounded-2xl.bg-night\/60 h3 {
  color: #0f172a;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-fog,
[data-theme="light"] .text-slate-300 *,
[data-theme="light"] .text-fog * {
  color: #475569 !important;
}

[data-theme="light"] .shadow-glow {
  box-shadow: 0 10px 24px rgba(235, 93, 30, 0.15);
}

[data-theme="light"] .scroll-top {
  background: #0f172a;
  color: #f8fafc;
}

/* Theme toggle buttons */
#theme-toggle,
#theme-toggle-mobile {
  color: #e9edf5;
}

[data-theme="light"] #theme-toggle,
[data-theme="light"] #theme-toggle-mobile {
  color: #0f172a;
  background-color: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] #theme-toggle svg,
[data-theme="light"] #theme-toggle-mobile svg {
  stroke: #0f172a;
}

/* Scroll-to-top positioning */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #0b1021;
  z-index: 60;
}

[data-theme="light"] .scroll-top {
  border-color: rgba(15, 23, 42, 0.12);
  background: #0f172a;
  color: #f8fafc;
}

/* Footer social links visibility in light mode */
[data-theme="light"] footer a {
  color: #0f172a;
}

[data-theme="light"] footer a:hover {
  color: #eb5d1e;
}

.section-shell {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(235, 93, 30, 0.12);
  color: #eb5d1e;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

.card-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.text-glow {
  text-shadow: 0 0 24px rgba(235, 93, 30, 0.35);
}

/* Hero accents */
.hero-glow {
  background:
    radial-gradient(circle at 15% 20%, rgba(235, 93, 30, 0.35), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.15), transparent 35%),
    radial-gradient(circle at 30% 70%, rgba(235, 93, 30, 0.25), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.14), transparent 30%);
  filter: blur(40px);
}

.hero-circuit path {
  stroke-dasharray: 10 8;
  animation: dashFlow 12s linear infinite;
}

.hero-circuit circle {
  filter: drop-shadow(0 0 8px var(--circuit-glow));
  animation: nodePulse 3s ease-in-out infinite;
}

.section-circuit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  mix-blend-mode: screen;
  z-index: 0;
}

[data-theme="light"] .section-circuit {
  opacity: 0.9;
  mix-blend-mode: normal;
}

.section-circuit svg {
  position: absolute;
  inset: 0;
}

.section-circuit path {
  stroke: var(--brand);
  stroke-opacity: 0.85;
  filter: drop-shadow(0 0 12px var(--circuit-glow));
  stroke-width: 1.1;
  fill: none;
  stroke-dasharray: 14 10;
  stroke-linecap: round;
  animation: dashFlow 16s linear infinite;
}

.section-circuit circle {
  stroke: var(--circuit-glow);
  fill: none;
  filter: drop-shadow(0 0 8px var(--circuit-glow));
  animation: nodePulse 4s ease-in-out infinite;
}

/* Creative overlays per section */
.beam-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(235,93,30,0.18) 0%, transparent 45%),
    linear-gradient(240deg, rgba(255,255,255,0.08) 0%, transparent 35%);
  mix-blend-mode: screen;
  opacity: 0.8;
  pointer-events: none;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(235,93,30,0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(235,93,30,0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.45;
  mix-blend-mode: normal;
  pointer-events: none;
}

.dots-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(235,93,30,0.25) 2px, transparent 3px);
  background-size: 60px 60px;
  opacity: 0.55;
  mix-blend-mode: normal;
  pointer-events: none;
}

.timeline-overlay {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(235,93,30,0.45), rgba(235,93,30,0));
  box-shadow: 0 0 24px rgba(235,93,30,0.35);
  transform: translateX(-50%);
  opacity: 0.85;
  pointer-events: none;
}

.mesh-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(235,93,30,0.18), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(235,93,30,0.12), transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.12), transparent 38%);
  filter: blur(18px);
  opacity: 0.8;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* Scroll-to-top visibility/animation */
.scroll-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.scroll-top.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.scroll-top:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Simple entrance animations */
.animate-fade-up {
  opacity: 0;
  transform: translateY(14px);
}

.animate-fade-up.start {
  animation: fadeUp 0.9s ease forwards;
}

.animate-fade-in {
  opacity: 0;
}

.animate-fade-in.start {
  animation: fadeIn 0.9s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Hide background effects only on the About section in dark mode */
[data-theme="dark"] #about .section-circuit,
[data-theme="dark"] #about .beam-overlay,
[data-theme="dark"] #about .grid-overlay,
[data-theme="dark"] #about .dots-overlay,
[data-theme="dark"] #about .mesh-overlay,
[data-theme="dark"] #about .timeline-overlay {
  display: none !important;
}

/* Capability cards (About) */
#about .capability-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] #about .capability-card {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] #about .capability-card p {
  color: #334155 !important;
}

[data-theme="light"] #about .capability-card .text-white {
  color: #0f172a !important;
}

[data-theme="light"] #about .capability-card .text-slate-300 {
  color: #475569 !important;
}
.circuit-overlay {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

[data-theme="light"] .circuit-overlay {
  mix-blend-mode: screen;
  opacity: 0.85;
}

.circuit-overlay .glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, var(--circuit-stroke), transparent 35%),
    radial-gradient(circle at 85% 10%, var(--circuit-backdrop), transparent 35%),
    radial-gradient(circle at 30% 70%, var(--circuit-stroke), transparent 30%),
    radial-gradient(circle at 80% 80%, var(--circuit-backdrop), transparent 30%);
  filter: blur(48px);
  opacity: 0.35;
}

.circuit-overlay .particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--circuit-glow) 2px, transparent 2px),
    radial-gradient(circle, var(--circuit-stroke) 1.4px, transparent 2px);
  background-size: 260px 260px, 210px 210px;
  background-position: 0 0, 80px 60px;
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: driftA 28s linear infinite, driftB 22s linear infinite reverse;
}

.circuit-overlay svg {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}

.circuit-overlay svg path {
  stroke: var(--circuit-stroke);
  stroke-dasharray: 12 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: dashFlow 16s linear infinite;
}

.circuit-overlay svg circle {
  fill: none;
  stroke: var(--circuit-glow);
  filter: drop-shadow(0 0 10px var(--circuit-glow));
  animation: nodePulse 4s ease-in-out infinite;
}

.lines-only,
.lines-only * {
  display: none !important;
}

.hero-dust .particles {
  opacity: 0.5;
}

/* Side circuit rails removed */

@keyframes dashFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -140; }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes driftA {
  from { background-position: 0 0, 60px 40px; }
  to { background-position: 220px 220px, 280px 200px; }
}

@keyframes driftB {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-20px, -20px, 0); }
}
[data-theme="light"] a {
  color: #0f172a;
}

[data-theme="light"] a:hover {
  color: #eb5d1e;
}