/* ==========================================================================
   Homepage dark mode (charcoal). Light is the default; dark only when the visitor picks it.
   ========================================================================== */
.header-actions{ display:flex; align-items:center; gap:12px; }
@media (max-width: 960px){
  .header-actions .nav-toggle{ margin-left:0; }
  .header-actions .theme-toggle{ width:36px; height:36px; }
}

html[data-theme="dark"]{
  --bg:#111315; --bg2:#16191C; --bg3:#1D2125; --bg4:#252A2F;
  --border:#2C3238; --border2:#3B434B;
  --accent2:#E2B354; --accent-dim:rgba(232,178,58,.16);
  --text:#F5F1E8; --muted:#A9B1C2; --light:#CDD3DE; --white:#FFFFFF; --gold:#E2B354;
  color-scheme:dark;
}
html[data-theme="dark"] body{ background:var(--bg); color:var(--text); }
html[data-theme="dark"] .proof-strip,
html[data-theme="dark"] .process,
html[data-theme="dark"] .site-footer{ --bg:#181B1F; --bg2:#16191C; --bg3:#1D2125; --border:#2C3238; --border2:#3B434B; }
html[data-theme="dark"] .site-header{ background:rgba(17,19,21,.8); }
html[data-theme="dark"] .site-header.is-scrolled{ background:rgba(17,19,21,.95); }
html[data-theme="dark"] .progress-rail{ background:rgba(255,255,255,.06); }
html[data-theme="dark"] .hero-glow-b{ background:#E3AA35; opacity:.06; }
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .upwork-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .skill-group,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .sample-card,
html[data-theme="dark"] .cv-window,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .intro-video,
html[data-theme="dark"] .call-card{
  background:var(--bg3);
  box-shadow:0 1px 2px rgba(0,0,0,.25), 0 16px 36px -14px rgba(0,0,0,.55);
}
html[data-theme="dark"] .hero-photo img{ border-color:var(--bg3); }
html[data-theme="dark"] .hero-portrait-ring{ border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .cv-window-scrim{ background:linear-gradient(to bottom, transparent 55%, var(--bg3) 100%); }
html[data-theme="dark"] .process-num{ background:var(--bg4); }
html[data-theme="dark"] .close-band{
  --border:#2C3238;
  background:radial-gradient(ellipse 60% 90% at 85% 100%, rgba(226,179,84,.22), transparent 70%), linear-gradient(120deg, #181B1F 0%, #252A2F 100%);
  box-shadow:0 0 0 1px #2C3238;
}
@media (max-width: 960px){
  html[data-theme="dark"] .main-nav{ background:rgba(17,19,21,.98); }
}