[data-theme='dark'] {
    /* Main Background & Text */
    --theme-dark-bg: #02010a;
    /* Black */
    --color-bg: var(--theme-dark-bg);
    --color-text: #f1f5f9;

    /* Brand Colors (Midnight Electric Palette) */
    --color-primary: #0d00a4;
    /* Navy Electric */
    --color-primary-dark: #22007c;
    /* Navy */
    --color-primary-light: #140152;
    /* Deep Twilight */

    --color-accent: #fbbf24;
    /* Keeping Gold for high contrast */
    --color-accent-light: #ffd60a;

    /* Neutrals - Mapped to Palette */
    --color-white: #04052e;
    /* Prussian Blue - Used for Cards */
    --color-gray-50: #04052e;
    /* Prussian Blue - Secondary Sections */
    --color-gray-100: #140152;
    --color-gray-200: #22007c;
    --color-gray-300: #64748b;
    --color-gray-400: #94a3b8;
    --color-gray-500: #cbd5e1;
    --color-gray-600: #e2e8f0;
    --color-gray-700: #f1f5f9;
    --color-gray-800: #f8fafc;
    --color-gray-900: #ffffff;
}

[data-theme='dark'] body {
    background-color: #02010a !important;
}

/* Specific Element Overrides for Dark Mode Transparency & Contrast */

[data-theme='dark'] .highlight {
    color: var(--color-accent) !important;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

[data-theme='dark'] .section-title,
[data-theme='dark'] .heading-xl,
[data-theme='dark'] .hero-title,
[data-theme='dark'] .heading-lg,
[data-theme='dark'] .admin-title,
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3 {
    color: #ffffff !important;
}

[data-theme='dark'] .section-badge {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--color-accent) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

[data-theme='dark'] .card,
[data-theme='dark'] .service-card,
[data-theme='dark'] .admin-card,
[data-theme='dark'] .blog-card,
[data-theme='dark'] .tech-card {
    background: #04052e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -15px rgba(2, 1, 10, 0.7);
}

[data-theme='dark'] .card h4,
[data-theme='dark'] .service-title {
    color: #ffffff !important;
}

[data-theme='dark'] .card p,
[data-theme='dark'] .service-description,
[data-theme='dark'] .about-content p,
[data-theme='dark'] .lead,
[data-theme='dark'] .hero-description,
[data-theme='dark'] .section-subtitle {
    color: var(--color-gray-400) !important;
}

[data-theme='dark'] .service-icon {
    background: linear-gradient(135deg, var(--color-primary-light), #000c1f) !important;
}

[data-theme='dark'] .service-icon img {
    filter: brightness(0) invert(1) !important;
}

[data-theme='dark'] .btn-primary {
    color: var(--color-primary-dark) !important;
}


[data-theme='dark'] .home-hero {
    background: transparent !important;
}

[data-theme='dark'] .hero-video-wrapper {
    display: block !important;
}

[data-theme='dark'] .large-header {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/demo-bg.jpg") !important;
    opacity: 1 !important;
}

[data-theme='dark'] .section[style*="background: var(--color-gray-50)"] {
    background: #000814 !important;
}

[data-theme='dark'] .theme-toggle {
    background: var(--color-primary);
}

[data-theme='dark'] .theme-toggle::after {
    transform: translateX(26px);
}


[data-theme='dark'] .home-hero::before {
    display: none;
}

[data-theme='dark'] .about-section,
[data-theme='dark'] .clients-section {
    background: #000c1f !important;


}

/* ========================================
   LOCALIZED COMPONENT OVERRIDES
   ======================================== */

/* Navbar Overrides */
[data-theme='dark'] .navbar {
    background: transparent !important;
    border-bottom: 1px solid transparent;
}

[data-theme='dark'] .navbar.scrolled {
    background: rgba(2, 1, 10, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .navbar-logo {
    color: #ffffff !important;
}

[data-theme='dark'] .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme='dark'] .navbar.scrolled .nav-link {
    color: var(--color-gray-400) !important;
}

[data-theme='dark'] .nav-link:hover,
[data-theme='dark'] .nav-link.active {
    color: var(--color-accent) !important;
}

[data-theme='dark'] .mega-menu {
    background: #04052e !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .mega-title {
    color: var(--color-accent) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] .mega-list a:hover {
    color: #ffffff;
}

/* Footer Overrides */
[data-theme='dark'] .footer {
    background: #000814 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .footer-heading,
[data-theme='dark'] .footer-logo-text {
    color: #ffffff !important;
}

/* AI/ML & Automation Specific Overrides */
[data-theme='dark'] .basic-card,
[data-theme='dark'] .build-card,
[data-theme='dark'] .who-card,
[data-theme='dark'] .expertise-card,
[data-theme='dark'] .process-step,
[data-theme='dark'] .industry-card {
    background: #04052e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

[data-theme='dark'] .icon-circle,
[data-theme='dark'] .why-icon,
[data-theme='dark'] .step-circle {
    background: rgba(13, 0, 164, 0.2) !important;
    color: var(--color-accent) !important;
}

[data-theme='dark'] .build-section,
[data-theme='dark'] .how-section,
[data-theme='dark'] .tech-section,
[data-theme='dark'] .expertise-section,
[data-theme='dark'] .workflow-section {
    background: #02010a !important;
}

[data-theme='dark'] .cta-section {
    background: #04052e !important;
}

[data-theme='dark'] .tech-icon:not(:hover) {
    color: var(--color-gray-400) !important;
    opacity: 0.8;
}

[data-theme='dark'] .tech-card:hover .tech-icon {
    opacity: 1;
}

[data-theme='dark'] .tech-name {
    color: #ffffff !important;
}

[data-theme='dark'] .basic-card p,
[data-theme='dark'] .build-content p,
[data-theme='dark'] .why-text p,
[data-theme='dark'] .how-item p,
[data-theme='dark'] .who-card p,
[data-theme='dark'] .industry-card p {
    color: var(--color-gray-400) !important;
}

[data-theme='dark'] .who-card:hover,
[data-theme='dark'] .industry-card:hover {
    background: rgba(13, 0, 164, 0.3) !important;
    border-color: var(--color-accent) !important;
}

/* ========================================
   WEB DEV SERVICE PAGES — DARK MODE
   Covers: high-speed-ecommerce, mvp-development,
   custom-dashboards, custom-api-development,
   api-payment-systems, speed-security-optimization
   ======================================== */

/* --- Section Backgrounds --- */
[data-theme='dark'] .overview-section,
[data-theme='dark'] .process-section,
[data-theme='dark'] .impact-section,
[data-theme='dark'] .who-section {
    background: #02010a !important;
}

[data-theme='dark'] .capabilities-section,
[data-theme='dark'] .usecases-section,
[data-theme='dark'] .why-section,
[data-theme='dark'] .tech-stack-section {
    background: #04052e !important;
}

/* --- Section Headers (h2 & p) --- */
[data-theme='dark'] .section-header h2,
[data-theme='dark'] .section-title {
    color: #ffffff !important;
}

[data-theme='dark'] .section-header p,
[data-theme='dark'] .overview-content>p {
    color: #94a3b8 !important;
}

/* --- Capability Cards --- */
[data-theme='dark'] .capability-card {
    background: #04052e !important;
    border-left-color: #fbbf24 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme='dark'] .capability-card h3 {
    color: #ffffff !important;
}

[data-theme='dark'] .capability-card p,
[data-theme='dark'] .capability-card ul li {
    color: #94a3b8 !important;
}

[data-theme='dark'] .cap-icon {
    background: rgba(13, 0, 164, 0.3) !important;
    color: #fbbf24 !important;
}

/* --- Process Steps --- */
[data-theme='dark'] .process-step h3 {
    color: #ffffff !important;
}

[data-theme='dark'] .process-step p {
    color: #94a3b8 !important;
}

/* --- Use Case Cards --- */
[data-theme='dark'] .usecase-card {
    background: #02010a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

[data-theme='dark'] .usecase-body {
    background: #04052e !important;
}

[data-theme='dark'] .usecase-body p,
[data-theme='dark'] .usecase-body ul li {
    color: #94a3b8 !important;
}

/* --- Impact Cards --- */
[data-theme='dark'] .impact-card {
    background: #04052e !important;
}

[data-theme='dark'] .impact-card h3 {
    color: #ffffff !important;
}

[data-theme='dark'] .impact-card p {
    color: #94a3b8 !important;
}

[data-theme='dark'] .impact-icon {
    color: #fbbf24 !important;
}

/* --- Why Cards --- */
[data-theme='dark'] .why-card {
    background: #02010a !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme='dark'] .why-text h3 {
    color: #ffffff !important;
}

[data-theme='dark'] .why-text p {
    color: #94a3b8 !important;
}

[data-theme='dark'] .why-icon {
    background: rgba(13, 0, 164, 0.3) !important;
    color: #fbbf24 !important;
}

/* --- Who Cards --- */
[data-theme='dark'] .who-card {
    background: #04052e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme='dark'] .who-card h3 {
    color: #ffffff !important;
}

[data-theme='dark'] .who-card p {
    color: #94a3b8 !important;
}

[data-theme='dark'] .who-card:hover {
    background: rgba(13, 0, 164, 0.3) !important;
    border-color: #fbbf24 !important;
}

/* --- Tech Stack Items --- */
[data-theme='dark'] .tech-item {
    background: #02010a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme='dark'] .tech-item i {
    color: #fbbf24 !important;
}

[data-theme='dark'] .tech-item p {
    color: #ffffff !important;
}

[data-theme='dark'] .tech-item:hover {
    background: rgba(13, 0, 164, 0.3) !important;
    border-color: #fbbf24 !important;
}

/* --- Overview Section --- */
[data-theme='dark'] .ps-item p {
    color: #94a3b8 !important;
}