/* ===== DARK MODE ===== */
body.dark {
  --bg:          #0a0a0a;
  --bg2:         #111111;
  --bg3:         #1a1a1a;
  --border:      rgba(168,85,247,0.15);
  --border-soft: rgba(168,85,247,0.08);
  --dim:         rgba(168,85,247,0.1);
  --text:        #ffffff;
  --text2:       #d4d4d8;
  --muted:       #71717a;
  --muted2:      #52525b;
  --sh-xs: 0 1px 2px rgba(0,0,0,0.4), 0 1px 6px rgba(168,85,247,0.06);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.5), 0 4px 16px rgba(168,85,247,0.1);
  --sh-md: 0 4px 24px rgba(0,0,0,0.6), 0 8px 32px rgba(168,85,247,0.14);
  --sh-lg: 0 8px 48px rgba(0,0,0,0.7), 0 16px 56px rgba(168,85,247,0.18);
}

body.dark .nav { background: rgba(10,10,10,0.8); }
body.dark .nav--scrolled { background: rgba(10,10,10,0.95); }
body.dark .nav-links a:hover { background: rgba(255,255,255,0.05); }
body.dark .nav-links.open { background: rgba(10,10,10,0.99); }

body.dark .hero { background: linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 100%); }

body.dark .trust-bar { background: var(--bg); }

body.dark .bento-card { background:
  radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(99,102,241,0.1), transparent 42%),
  var(--bg2); }
body.dark .service-card,
body.dark .process-step,
body.dark .why-card,
body.dark .testimonial-card,
body.dark .pricing-card,
body.dark .mockup-card { background: var(--bg2); }
body.dark .pricing-card--featured { background: rgba(79,70,229,0.12); }

body.dark .float-1,
body.dark .float-2 { background: var(--bg2); }

body.dark .btn-ghost { background: var(--bg2); border-color: var(--border); color: var(--text2); }
body.dark .btn-ghost:hover { color: #a78bfa; border-color: rgba(99,102,241,0.4); background: var(--bg3); }
body.dark .btn-outline { border-color: rgba(99,102,241,0.3); color: #a78bfa; }
body.dark .btn-outline:hover { background: rgba(99,102,241,0.1); }

body.dark .section--alt { background: var(--bg2); }

body.dark .cta-banner {
  background: linear-gradient(135deg, #130f2a 0%, #1a1235 60%, #150f28 100%);
  border-color: rgba(99,102,241,0.15);
}

body.dark .footer { background: #050505; }

body.dark .mockup-btn { box-shadow: 0 2px 10px rgba(79,70,229,0.35); }

body.dark .pricing-badge { box-shadow: 0 2px 12px rgba(79,70,229,0.4); }

/* ===== TOGGLE BUTTON ===== */
.dark-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--border-soft);
  color: var(--muted); margin-left: 8px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.dark-toggle:hover { background: var(--bg3); color: var(--text); border-color: var(--border); }
.dark-toggle svg { width: 16px; height: 16px; }
.dark-toggle .icon-sun { display: none; }
.dark-toggle .icon-moon { display: block; }
body.dark .dark-toggle .icon-sun { display: block; }
body.dark .dark-toggle .icon-moon { display: none; }
body.dark .dark-toggle { background: var(--bg3); color: #a78bfa; border-color: var(--border); }

/* smooth transition when toggling */
body { transition: background 0.25s, color 0.25s; }