/* Dark Mode Variables */
body.dark-mode {
  --primary: #ffffff;
  --secondary: #0a0a0a;
  --gray-50: #111111;
  --gray-100: #1a1a1a;
  --gray-200: #2a2a2a;
  --gray-600: #a0a0a0;
  --gray-900: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.1);
}

/* ===========================================
   MOBILE NAVIGATION DARK MODE SUPPORT
   =========================================== */
.dark-mode .nav {
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gray-200);
}

.dark-mode .logo {
  color: var(--primary);
}

.dark-mode .logo-icon {
  background: var(--accent);
  color: var(--secondary);
}

.dark-mode .mobile-menu-toggle {
  background: transparent;
}

.dark-mode .mobile-menu-toggle:hover {
  background: var(--gray-100);
}

.dark-mode .mobile-menu-toggle span {
  background: var(--primary);
}

.dark-mode .mobile-menu {
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px);
}

.dark-mode .mobile-nav-item {
  color: var(--primary);
  border-bottom: 1px solid var(--gray-200);
}

.dark-mode .mobile-nav-item:hover {
  color: var(--accent);
}

.dark-mode .mobile-lang-toggle {
  color: var(--gray-600);
  background: var(--gray-200);
}

.dark-mode .mobile-lang-toggle.active {
  background: var(--primary);
  color: var(--secondary);
}

/* Desktop navigation dark mode (for larger screens) */
@media (min-width: 1024px) {
  .dark-mode .nav {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid var(--gray-200);
  }

  .dark-mode .nav-item {
    color: var(--gray-600);
  }

  .dark-mode .nav-item:hover {
    color: var(--primary);
  }

  .dark-mode .lang-toggle {
    color: var(--gray-600);
    border: 1px solid transparent;
  }

  .dark-mode .lang-toggle:hover {
    background: var(--gray-200);
    color: var(--primary);
  }

  .dark-mode .lang-toggle.active {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }

  .dark-mode .lang-toggle.active:hover {
    background: var(--primary);
    color: var(--secondary);
    transform: scale(1.05);
  }
}

/* ===========================================
   EXISTING DARK MODE STYLES
   =========================================== */
.dark-mode .hero-3d {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
}

.dark-mode .service-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}

.dark-mode .service-icon {
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-600) 100%);
}

.dark-mode .service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--accent) 0%, #00cc75 100%);
}

.dark-mode .service-card:hover {
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 255, 148, 0.2);
}

.dark-mode .materials {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
}

.dark-mode .material-card {
  background: var(--gray-200);
  border: 2px solid var(--gray-600);
  color: var(--primary);
}

.dark-mode .usecases {
  background: #000000;
}

.dark-mode .industry-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--gray-600);
}

.dark-mode .industry-card:hover {
  background: rgba(0, 255, 148, 0.08);
}

.dark-mode .section-title {
  color: var(--gray-600);
}

.dark-mode .about {
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 50%, var(--gray-200) 100%);
}

.dark-mode .early-customers-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}

.dark-mode .early-customers-card::before {
  background: linear-gradient(135deg, transparent 0%, rgba(0, 255, 148, 0.05) 100%);
}

.dark-mode .early-customers-metric {
  border-top: 2px solid var(--gray-200);
}

.dark-mode .placeholder-card {
  background: rgba(26, 26, 26, 0.5);
  border: 2px dashed var(--gray-600);
}

.dark-mode .gallery {
  background: #000000 !important;
  color: var(--primary);
}

.dark-mode .gallery .section-title {
  color: var(--primary);
}

.dark-mode .gallery .section-badge {
  color: var(--accent);
}

.dark-mode .form-input,
.dark-mode .form-textarea {
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  color: var(--primary);
}

.dark-mode .form-input::placeholder,
.dark-mode .form-textarea::placeholder {
  color: var(--gray-600);
}

.dark-mode .gallery-desc {
  color: var(--gray-600);
}

.dark-mode .notification {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--primary);
}

.dark-mode .footer {
  background: rgba(10, 10, 10, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #d0d0d0;
}

.dark-mode .hero-cta {
  background: var(--secondary);
  color: var(--primary);
  border: 2px solid var(--primary);
}

.dark-mode .form-submit {
  background: var(--secondary);
  color: var(--primary);
  border: 2px solid var(--primary);
}

/* ===========================================
   ADDITIONAL MOBILE DARK MODE ELEMENTS
   =========================================== */
.dark-mode .trusted-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}

.dark-mode .trusted-card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.dark-mode .trusted-icon,
.dark-mode .early-customers-icon {
  background: linear-gradient(135deg, var(--accent) 0%, #00cc75 100%);
}

.dark-mode .stat-item {
  background: rgba(26, 26, 26, 0.7);
  border: 1px solid var(--gray-200);
}

.dark-mode .stat-item:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dark-mode .contact {
  background: var(--gray-100);
}

.dark-mode .section-badge {
  color: var(--accent);
}

.dark-mode .hero-badge {
  background: var(--accent);
  color: var(--secondary);
}

.dark-mode .materials .section-desc {
  color: var(--gray-600);
}

.dark-mode .about-title {
  color: var(--primary);
}

.dark-mode .about-desc {
  color: var(--gray-600);
}

/* ===========================================
   MOBILE DARK MODE TOUCH IMPROVEMENTS
   =========================================== */
.dark-mode .hero-cta,
.dark-mode .form-submit,
.dark-mode .mobile-nav-item,
.dark-mode .mobile-lang-toggle,
.dark-mode .service-card,
.dark-mode .material-card,
.dark-mode .industry-card,
.dark-mode .early-customers-card,
.dark-mode .trusted-card,
.dark-mode .gallery-item,
.dark-mode .stat-item {
  -webkit-tap-highlight-color: rgba(0, 255, 148, 0.2);
}

/* ===========================================
   MOBILE DARK MODE ACCESSIBILITY
   =========================================== */
@media (prefers-contrast: high) {
  .dark-mode .service-card,
  .dark-mode .material-card,
  .dark-mode .industry-card,
  .dark-mode .early-customers-card,
  .dark-mode .trusted-card,
  .dark-mode .gallery-item {
    border: 2px solid var(--primary);
  }

  .dark-mode .hero-cta,
  .dark-mode .form-submit {
    border: 2px solid var(--primary);
  }
}