/* =========================
   DARK MODE VARIABLES
========================= */

body.dark{
  --ink:#f8fafc;
  --text:#cbd5e1;
  --muted:#94a3b8;
  --line:#26364f;
  --soft:#0f172a;
  --white:#132238;
  --shadow:0 24px 70px rgba(0,0,0,.45);

  background:#08111f;
  color:var(--ink);
}

/* =========================
   GLOBAL ELEMENTS
========================= */

body.dark .header{
  background:rgba(8,17,31,.94);
}

body.dark .mobile{
  background:#08111f;
}

body.dark .section-soft{
  background:var(--soft);
}

/* =========================
   CARDS & SURFACES
========================= */

body.dark .btn-light,
body.dark .menu-btn,
body.dark .hero-card-inner,
body.dark .stat-grid,
body.dark .card,
body.dark .step,
body.dark .client-logo,
body.dark .form-wrap{
  background:#132238;
  color:var(--ink);
}

/* =========================
   TYPOGRAPHY
========================= */

body.dark .brand span,
body.dark .links,
body.dark .mobile a,
body.dark .copy,
body.dark .details,
body.dark .stat span,
body.dark .card p{
  color:var(--text);
}

/* =========================
   FORMS
========================= */

body.dark .form input,
body.dark .form select,
body.dark .form textarea{
  background:#0f172a;
  color:var(--ink);
  border-color:var(--line);
}

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

/* =========================
   CLIENT LOGOS
========================= */

body.dark .client-logo{
  border-color:var(--line);
}

body.dark .client-logo.filled{
  background:linear-gradient(180deg,#132238,#0f172a);
}

/* =========================
   FOOTER
========================= */

body.dark .topbar,
body.dark .footer{
  background:#020617;
}

/* =========================
   THEME TOGGLE BUTTON
========================= */

.theme-toggle{
  position:fixed;
  top:22px;
  right:22px;
  z-index:9999;

  width:48px;
  height:48px;

  border:none;
  border-radius:999px;

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);

  color:#0f172a;
  font-size:1.05rem;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:
    0 10px 30px rgba(0,0,0,.12);

  transition:.25s ease;
}

.theme-toggle:hover{
  transform:translateY(-2px) scale(1.05);
}

body.dark .theme-toggle{
  background:rgba(19,34,56,.92);
  color:#fff;
  box-shadow:
    0 10px 30px rgba(0,0,0,.45);
}

@media(max-width:640px){

  .theme-toggle{
    top:16px;
    right:16px;

    width:44px;
    height:44px;

    font-size:.95rem;
  }

}