/* ============================================================
   DPC — Dark theme (enhanced)
   Deep purple-tinted canvas with ambient glow, layered card
   surfaces, glowing accents and refined details.
   Layered over styles.css; activated by html[data-theme="dark"].
   ============================================================ */
html[data-theme="dark"] {
  --purple:       #ab99dd;
  --purple-deep:  #c8bcee;
  --purple-soft:  #b6a8dc;
  --lavender:     #1b1830;   /* wash boxes (promise / lavender cards) */
  --lavender-2:   #2a2440;
  --ink:          #f4f2fb;
  --ink-2:        #d7d2e6;
  --muted:        #9b94ad;
  --line:         rgba(180,168,220,.12);
  --bg:           #0c0a12;
  --bg-alt:       #100d18;
  --shadow:       0 1px 2px rgba(0,0,0,.5), 0 24px 60px -24px rgba(80,62,128,.65);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(80,62,128,.6);
}

/* Ambient canvas — soft purple light pooled toward the hero */
html[data-theme="dark"] body {
  color: var(--ink-2);
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(134,116,179,.20), transparent 60%),
    radial-gradient(900px 520px at -5% 18%, rgba(95,79,140,.13), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* Selection + scrollbar */
html[data-theme="dark"] ::selection { background: rgba(171,153,221,.32); color: #fff; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #08060d; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2440; border-radius: 8px; border: 3px solid #08060d; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3158; }

/* Header */
html[data-theme="dark"] .site-header { background: rgba(12,10,18,.78); }
html[data-theme="dark"] .site-header.scrolled { border-color: rgba(180,168,220,.14); box-shadow: 0 10px 34px -18px rgba(0,0,0,.95); }
html[data-theme="dark"] .nav-links a { color: var(--ink-2); }
html[data-theme="dark"] .nav-toggle span { background: var(--ink); }
/* Use the white wordmark on the dark bar */
html[data-theme="dark"] .brand .brand-logo--light { display: none; }
html[data-theme="dark"] .brand .brand-logo--dark { display: block; }

/* Toggles */
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .theme-switch { border-color: var(--line); }
html[data-theme="dark"] .lang-toggle button,
html[data-theme="dark"] .theme-switch button { color: var(--muted); }
html[data-theme="dark"] .lang-toggle button:hover,
html[data-theme="dark"] .theme-switch button:hover { color: var(--ink); }
html[data-theme="dark"] .lang-toggle button.active,
html[data-theme="dark"] .lang-toggle a.active,
html[data-theme="dark"] .theme-switch button.active { background: var(--purple); color: #15101f; }

/* Buttons — gradient fill + purple glow */
html[data-theme="dark"] .btn--primary {
  background: linear-gradient(135deg, #c0b2ea 0%, #8e7cc2 100%); color: #160f24;
  box-shadow: 0 8px 24px -8px rgba(134,116,179,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
html[data-theme="dark"] .btn--primary:hover {
  background: linear-gradient(135deg, #cdc0f2 0%, #9d8bd2 100%); color: #160f24;
  box-shadow: 0 14px 32px -8px rgba(134,116,179,.8), inset 0 1px 0 rgba(255,255,255,.32);
}
html[data-theme="dark"] .btn--ghost { background: transparent; border-color: rgba(180,168,220,.28); color: var(--ink); }
html[data-theme="dark"] .btn--ghost:hover { border-color: var(--purple); color: var(--purple-deep); background: rgba(171,153,221,.06); }
html[data-theme="dark"] .btn--light { background: #1a1628; color: var(--ink); border: 1px solid var(--line); }
html[data-theme="dark"] .btn--light:hover { background: #221c34; }

/* Hero — dark canvas with a glowing geometric motif */
html[data-theme="dark"] .hero {
  background:
    radial-gradient(900px 520px at 14% 10%, rgba(134,116,179,.22), transparent 60%),
    linear-gradient(135deg, #15111f 0%, #0c0a12 100%);
}
html[data-theme="dark"] .ht1 { background: #3a2f5e; opacity: .5; }
html[data-theme="dark"] .ht2 { background: #0a0810; opacity: .9; }
html[data-theme="dark"] .ht3 { background: var(--purple); opacity: .45; }
html[data-theme="dark"] .ht4 { background: #241d3a; opacity: .6; }
html[data-theme="dark"] .ht5 { background: var(--purple-soft); opacity: .4; }
html[data-theme="dark"] .hero-stats { border-top-color: var(--line); }
html[data-theme="dark"] .hero-stats .s { border-inline-start-color: var(--line); }
html[data-theme="dark"] .hero-stats .n { color: var(--purple-deep); }
html[data-theme="dark"] .hero-tags .accent { color: var(--purple-deep); }
html[data-theme="dark"] .eyebrow { text-shadow: 0 0 22px rgba(171,153,221,.25); }

/* Inner-page banner */
html[data-theme="dark"] .page-hero {
  background:
    radial-gradient(720px 380px at 82% -25%, rgba(134,116,179,.24), transparent 60%),
    linear-gradient(160deg, #181323 0%, var(--bg) 72%);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .page-hero::after { opacity: .3; }

/* Section surfaces */
html[data-theme="dark"] .bg-alt { background: #0e0b16; }
html[data-theme="dark"] .bg-ink {
  background:
    radial-gradient(760px 420px at 14% 0%, rgba(134,116,179,.20), transparent 60%),
    #07050c;
}

/* Cards / surfaces — layered gradient + glowing hover */
html[data-theme="dark"] .area-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .pillar,
html[data-theme="dark"] .partner-cat,
html[data-theme="dark"] .mission-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .industry {
  background: linear-gradient(180deg, #181425 0%, #131020 100%);
  border-color: var(--line);
}
html[data-theme="dark"] .product-card:hover {
  background: linear-gradient(180deg, #211a38 0%, #181227 100%);
  border-color: rgba(171,153,221,.30);
  box-shadow: 0 0 0 1px rgba(171,153,221,.12), 0 28px 64px -26px rgba(134,116,179,.6);
}
html[data-theme="dark"] .area-card:hover {
  background: linear-gradient(180deg, #211a38 0%, #181227 100%);
  border-color: rgba(171,153,221,.30);
  box-shadow: 0 0 0 1px rgba(171,153,221,.12), 0 28px 64px -26px rgba(134,116,179,.6);
}
html[data-theme="dark"] .industry:hover {
  border-color: rgba(171,153,221,.5);
  box-shadow: 0 12px 30px -16px rgba(134,116,179,.6);
}
html[data-theme="dark"] .stat .num { color: var(--purple-deep); }
html[data-theme="dark"] .mission-card.alt { background: linear-gradient(160deg, #130f20 0%, #0a0810 100%); }
html[data-theme="dark"] .pillar ul li { border-top-color: var(--line); color: var(--ink-2); }
html[data-theme="dark"] .partner-cat h4 { border-bottom-color: rgba(180,168,220,.18); }

/* "Why DPC" items — subtle glass + glow on hover */
html[data-theme="dark"] .why-item { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .why-item:hover {
  background: rgba(171,153,221,.09); border-color: rgba(171,153,221,.4);
  box-shadow: 0 20px 48px -24px rgba(134,116,179,.65);
}

/* Chips, pills, wash boxes */
html[data-theme="dark"] .chip { background: rgba(180,168,220,.08); border-color: rgba(180,168,220,.16); color: var(--ink-2); }
html[data-theme="dark"] .value-pill { background: rgba(171,153,221,.10); color: var(--purple-deep); }

/* Brand bands — deep purple, integrated with the dark canvas + glow ring */
html[data-theme="dark"] .cta-band,
html[data-theme="dark"] .contact-wrap {
  background: linear-gradient(150deg, #5a4a8d 0%, #382e5b 50%, #1c1636 100%);
  box-shadow: 0 0 0 1px rgba(180,168,220,.14), 0 44px 96px -44px rgba(134,116,179,.5);
}
html[data-theme="dark"] .contact-item { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .contact-item:hover { background: rgba(171,153,221,.16); border-color: rgba(171,153,221,.4); }
html[data-theme="dark"] .contact-item .ic { background: rgba(255,255,255,.12); }

/* Mobile nav drawer */
@media (max-width: 860px) {
  html[data-theme="dark"] .nav.open .nav-links { background: #100d18; border-color: var(--line); box-shadow: var(--shadow); }
}

/* Footer */
html[data-theme="dark"] .site-footer { background: #07050c; }
html[data-theme="dark"] .footer-top { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .footer-col a:hover { color: var(--purple-deep); }