:root {
    /* Light Theme */
    --bg: #ffffff;
    --text: #0f0f14;
    --muted: #6b7280;
  
    --card: #f3f4f6;
    --header: #ffffff;
    --border: #e5e7eb;
  
    --accent: #4f46e5;
    --accent-soft: #eef2ff;
    --accent-contrast: #ffffff;
  
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
      /* Page Hero */
    --hero-overlay: rgba(0, 0, 0, 0.55);
    --hero-overlay-strong: rgba(0, 0, 0, 0.7);
  }
  
  [data-theme="dark"] {
    /* Dark Theme */
    --bg: #0f0f14;
    --text: #ffffff;
    --muted: #9ca3af;
  
    --card: #1b1b28;
    --header: #15151f;
    --border: #2a2a3a;
  
    --accent: #6366f1;
    --accent-soft: #1f223d;
    --accent-contrast: #ffffff;
  
    --success: #22c55e;
    --warning: #fbbf24;
    --danger: #f87171;

      /* Page Hero (slightly softer in dark mode) */
    --hero-overlay: rgba(0, 0, 0, 0.45);
    --hero-overlay-strong: rgba(0, 0, 0, 0.65);
  }
  
  html {
    width: 100%;
    overflow-x: clip;   /* modern, doesn't break sticky */
  }
  
  body {
    margin: 0;
    min-width: 100%;
  }
  
  @supports not (overflow-x: clip) {
    html, body {
      overflow-x: hidden;
    }
  }

  .header,
.site-footer,
.home-hero-world,
.home-clients-marquee,
.mobile-nav,
.mega-panel {
  max-width: 100vw;
  overflow-x: hidden;
}

  
  body {
  background: var(--bg);
  color: var(--text);
}

.header,
.footer {
  background: var(--header);
  border-color: var(--border);
}

.card,
.blog-card,
.service-card,
.career-card {
  background: var(--card);
  border: 1px solid var(--border);
}

a {
  color: var(--accent);
}

a:hover {
  opacity: 0.85;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.form input,
.form textarea {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

.form input::placeholder,
.form textarea::placeholder {
  color: var(--muted);
}

.form input:focus,
.form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

small,
.subtitle,
.muted {
  color: var(--muted);
}