html[data-theme="dark"] {
  --bg:       #0F172A;
  --bg-2:     #1E293B;
  --bg-3:     #334155;
  --bg-card:  #1E293B;
  --t1:       #F1F5F9;
  --t2:       #CBD5E1;
  --t3:       #94A3B8;
  --t4:       #64748B;
  --bd:       #334155;
  --bd-lt:    #1E293B;
  --sh:       rgba(0,0,0,0.45);
  --blue-xl:  rgba(74,139,255,.12);
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--t2);
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] footer,
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .cta {
  background: #020617 !important;
  color: rgba(255,255,255,.8);
}

html[data-theme="dark"] section.hero[style*="var(--t1)"],
html[data-theme="dark"] .hero[class*="hero"] {
  background: linear-gradient(180deg, #020617 0%, #0F172A 100%) !important;
}

html[data-theme="dark"] .cta,
html[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, #1E3A5F 0%, #1E4F91 100%) !important;
}

html[data-theme="dark"] footer {
  background: #020617 !important;
}
html[data-theme="dark"] footer .logo { color: #fff !important; }
html[data-theme="dark"] footer p,
html[data-theme="dark"] footer .fl a,
html[data-theme="dark"] footer .fc2,
html[data-theme="dark"] footer .fd3 { color: #94A3B8 !important; }
html[data-theme="dark"] footer .fh { color: #fff !important; }

html[data-theme="dark"] .stats-bar { background: #1E4F91 !important; }

html[data-theme="dark"] nav {
  background: rgba(15,23,42,.92) !important;
  border-color: var(--bd) !important;
}
html[data-theme="dark"] nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.4); }
html[data-theme="dark"] .logo { color: var(--t1) !important; }
html[data-theme="dark"] .nav-links a { color: var(--t2); }
html[data-theme="dark"] .nav-links a:hover { color: var(--blue-lt); }

html[data-theme="dark"] .sec-alt,
html[data-theme="dark"] .bg-2,
html[data-theme="dark"] .addon-pricing,
html[data-theme="dark"] .projects-header { background: var(--bg-2); }

html[data-theme="dark"] .p-card,
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .addon-card,
html[data-theme="dark"] .comparison-table,
html[data-theme="dark"] .apt,
html[data-theme="dark"] .cert-card,
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .tl-item,
html[data-theme="dark"] .fcard,
html[data-theme="dark"] .inst-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .cert-badge,
html[data-theme="dark"] .cert-details,
html[data-theme="dark"] .pcard {
  background: var(--bg-2) !important;
  border-color: var(--bd) !important;
  color: var(--t2);
}

html[data-theme="dark"] .sh2,
html[data-theme="dark"] .card-name,
html[data-theme="dark"] .apt-title,
html[data-theme="dark"] .cert-name,
html[data-theme="dark"] .skill-title,
html[data-theme="dark"] .tl-title,
html[data-theme="dark"] .svc-card h3,
html[data-theme="dark"] .fcard h3,
html[data-theme="dark"] .form-card h2,
html[data-theme="dark"] .info-card h3 { color: var(--t1); }

html[data-theme="dark"] .p-card.featured {
  background: #020617 !important;
  border-color: #0F172A !important;
}

html[data-theme="dark"] .cta-btn.enterprise-btn {
  background: #4A8BFF !important;
  border-color: #4A8BFF !important;
  color: #fff !important;
}
html[data-theme="dark"] .cta-btn.enterprise-btn:hover {
  background: #2E6FD8 !important;
  border-color: #2E6FD8 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--bg-3);
  color: var(--t1);
  border-color: var(--bd);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--t3); }

html[data-theme="dark"] .comp-row { border-color: var(--bd) !important; }
html[data-theme="dark"] .comp-row.header { background: var(--bg-3) !important; }
html[data-theme="dark"] .comp-label { color: var(--t2); }

html[data-theme="dark"] .divider,
html[data-theme="dark"] .divider-h { background: var(--bd); }

html[data-theme="dark"] .svc-tier { border-color: var(--bd); }
html[data-theme="dark"] .svc-tier-name { color: var(--t2); }
html[data-theme="dark"] .svc-tier-price { color: var(--t1); }
html[data-theme="dark"] .svc-note { background: var(--bg-3); color: var(--t3); }

html[data-theme="dark"] .feature-item { color: var(--t2); }

.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 7px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t1);
  padding: 0;
  margin-left: 8px;
  transition: all .2s;
}
.nav-hamburger:hover { background: var(--bg-2); border-color: var(--blue); }
.nav-hamburger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 768px) {
  .nav-hamburger { display: inline-flex; }
  .nav-links {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    background: var(--bg);
    border-bottom: 1px solid var(--bd);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    gap: 4px !important;
    max-height: 0;
    overflow: hidden;
    padding: 0 24px !important;
    transition: max-height .3s ease, padding .3s ease, border-color .3s;
    border-color: transparent;
  }
  html[data-theme="dark"] .nav-links { background: #0F172A; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
  #nav.nav-open .nav-links {
    max-height: 500px;
    padding: 14px 24px !important;
    border-color: var(--bd);
  }
  #nav.nav-open .nav-hamburger { background: var(--bg-2); border-color: var(--blue); }
  .nav-links > li {
    width: 100%;
  }
  .nav-links > li:not(:last-child) {
    display: list-item !important;
  }
  .nav-links > li > a:not(.btn-nav) {
    display: block;
    padding: 11px 0;
    font-size: .95rem;
    border-bottom: 1px solid var(--bd);
  }
  .nav-links .btn-nav {
    display: block !important;
    width: 100%;
    text-align: center;
    margin-top: 8px;
    padding: 12px 22px !important;
  }
  .nav-links .theme-toggle {
    margin: 8px 0;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px;
  }
  .nav-links .theme-toggle::after {
    content: 'Theme';
    font-size: .95rem;
    font-weight: 500;
    color: var(--t2);
  }
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 7px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t2);
  transition: all .2s;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--bg-2);
  color: var(--t1);
  border-color: var(--blue);
}
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

html.theme-ready body,
html.theme-ready body * {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero::after,
html[data-theme="dark"] .cta::before,
html[data-theme="dark"] .cta-section::before,
html[data-theme="dark"] .sp-header::before,
html[data-theme="dark"] .p-card.featured::before,
html[data-theme="dark"] .about-cta-card::before {
  background-image: none !important;
  background: transparent !important;
}

html[data-theme="dark"] .logo-icon img,
html[data-theme="dark"] .hv-logo-bg img,
html[data-theme="dark"] .pcard-img img[src*="logo"] {
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}
