body.dark {
  --canvas: #000000;
  --surface: #0E1116;
  --surface-2: #080A0F;
  --text: #F4F6FA;
  --text-muted: #98A2B3;
  --border: #232A35;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow: 0 14px 34px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7);
}

body.dark .navbar {
  background: rgba(10, 14, 22, .97);
  border-bottom-color: rgba(255, 255, 255, .06)
}

body.dark .dropdown-menu {
  background: #10141B;
  border-color: #232A35
}

body.dark .dropdown-menu::before {
  background: #10141B;
  border-color: #232A35
}

body.dark .hero {
  background: linear-gradient(155deg, #10161F 0%, #0A0E16 45%, #050810 100%)
}

body.dark .shot-sm {
  border-color: #0A0E16
}

body.dark .cmp-before {
  filter: brightness(.82) saturate(.7)
}

body.dark .cmp-tag.tag-before {
  background: rgba(0, 0, 0, .82)
}

body.dark .cmp-handle::after {
  background: #10141B
}

body.dark .am-main {
  background: radial-gradient(circle at 78% 20%, rgba(255, 87, 34, .3), transparent 48%), linear-gradient(155deg, #141B29, #0A0E16)
}

body.dark .am-card,
.t-card {
  background: var(--surface)
}

body.dark .t-nav {
  background: var(--surface)
}

body.dark .t-dot {
  background: #20262E;
  border-color: #20262E
}

body.dark .service-card,
body.dark .price-card,
body.dark .process,
body.dark .quote-form,
body.dark .calc-card,
body.dark .calc-summary,
body.dark .faq-item,
body.dark .value-card,
body.dark .team-card,
body.dark .auth-modal-dialog,
body.dark .form-card {
  background: var(--surface);
  border-color: var(--border);
}

body.dark .process {
  background: #0B0E14
}

body.dark .proc-num {
  background: #0B0E14
}

body.dark .price-card.featured {
  background: linear-gradient(165deg, #141B29, #0A0E16)
}

body.dark .price-card.featured:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, .7)
}

body.dark .filter-btn {
  background: var(--surface)
}

body.dark .filter-btn:not(.active):hover {
  background: var(--orange-soft)
}

body.dark .art-3 {
  background: radial-gradient(rgba(255, 255, 255, .06) 3px, transparent 3.5px) 0 0/22px 22px, linear-gradient(140deg, #141A24, #0B0F16)
}

body.dark .art-3 i {
  color: #98A2B3
}

body.dark .art-6 {
  background: linear-gradient(135deg, #10141B 0 45%, #FF5722 45% 100%)
}

body.dark .art-6 i {
  color: #10141B
}

body.dark .contact-info {
  background: linear-gradient(160deg, #141B29, #0A0E16)
}

body.dark .footer {
  background: linear-gradient(180deg, #080C12, #050810)
}

body.dark ::selection {
  background: var(--orange);
  color: #fff
}

body.dark ::placeholder {
  color: #6B7686
}

body.dark .quote-form .form-success {
  background: rgba(46, 196, 120, .1)
}

body.dark .faq-item.active {
  border-color: var(--orange)
}

body.dark .calc-res-box {
  background: #131922;
  border-color: #242D3C
}

body.dark .auth-tab-btn:not(.active) {
  color: var(--text-muted)
}

body.dark .auth-role-btn.active {
  background: rgba(255, 87, 34, .16);
  border-color: var(--orange);
  color: var(--orange)
}

/* HOME 2 — dark mode refinements */
body.dark .h2-feat-num {
  color: #2A3342
}

body.dark .h2-logo:hover {
  border-color: var(--orange)
}

body.dark .h2-bento-item {
  border-color: #232A35
}

body.dark .h2-member {
  background: linear-gradient(165deg, #141B29, #0A0E16)
}

body.dark .h2-member:hover {
  border-color: rgba(255, 87, 34, .5)
}

body.dark .h2-milestone-dot {
  background: #10141B
}

body.dark .h2-cta-info {
  background: linear-gradient(155deg, #141B29, #0A0E16)
}

body.dark .h2-quick-contact a {
  background: var(--surface-2);
  border-color: #232A35
}

body.dark .h2-quick-contact a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff
}

/* ABOUT PAGE — dark mode refinements */
body.dark .ab-p-num {
  color: #2A3342
}

body.dark .ab-badge {
  background: var(--surface);
  border-color: #232A35
}

body.dark .ab-member {
  background: var(--surface);
  border-color: #232A35
}

body.dark .ab-member:hover {
  border-color: rgba(255, 87, 34, .5)
}

body.dark .ab-member-tags span {
  background: #171E2B;
  border-color: #232A35
}

body.dark .ab-member-social a {
  background: #171E2B;
  border-color: #232A35
}

body.dark .tml-dot {
  background: var(--surface);
  box-shadow: 0 0 0 9px rgba(255, 87, 34, .16)
}

body.dark .ab-cta-banner {
  background: linear-gradient(150deg, #141B29, #0A0E16)
}

/* SERVICES PAGE — dark mode refinements */
body.dark .sv-line-card {
  background: var(--surface);
  border-color: var(--border)
}

body.dark .sv-line-num {
  color: rgba(255, 255, 255, .05);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .2)
}

body.dark .sv-line-card:hover .sv-line-num {
  color: rgba(255, 87, 34, .7);
  -webkit-text-stroke-color: #FF8A50
}

body.dark .sv-step-card {
  background: rgba(20, 27, 41, .7);
  border-color: #232A35
}

body.dark .sv-step-card:hover {
  background: rgba(26, 35, 53, .85);
  border-color: rgba(255, 87, 34, .5)
}

body.dark .sv-spec {
  background: var(--surface);
  border-color: var(--border)
}

body.dark .sys-filter-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text)
}

body.dark .sys-filter-btn.active {
  background: linear-gradient(135deg, #FF5722, #FF8A50);
  color: #fff
}

body.dark .sub-pill {
  background: #141B29;
  border-color: #232A35;
  color: #98A2B3
}

body.dark .sys-specs-strip {
  background: #101520;
  border-color: #232A35
}

body.dark .sv-meter-track {
  background: #101520;
  border-color: #232A35
}

body.dark .sv-meter label span {
  color: var(--text)
}

body.dark .sv-float-badge {
  background: #141B29;
  color: #fff;
  border: 1px solid #232A35;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6)
}

body.dark .sv-why-badge {
  background: #141B29;
  color: #fff;
  border: 1px solid #232A35;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6)
}

body.dark .sv-why-item {
  background: var(--surface);
  border-color: var(--border)
}

body.dark .sv-addon {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text)
}

body.dark .sv-cta-banner {
  background: linear-gradient(150deg, #141B29, #0D131F 55%, #070B12);
  border-color: rgba(255, 87, 34, .35)
}

/* Drawer Auth Buttons Dark Mode */
body.dark .drawer-auth .btn-auth-login {
  background: rgba(255, 87, 34, .08);
  border-color: var(--orange);
  color: #FF8A50
}

body.dark .drawer-auth .btn-auth-login i {
  color: #FF8A50 !important
}

body.dark .drawer-auth .btn-auth-login:hover,
body.dark .drawer-auth .btn-auth-login:active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff
}

body.dark .drawer-auth .btn-auth-login:hover i,
body.dark .drawer-auth .btn-auth-login:active i {
  color: #fff !important
}

body.dark .drawer-auth .btn-auth-signup {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff
}

body.dark .drawer-auth .btn-auth-signup i {
  color: #fff !important
}

body.dark .drawer-auth .btn-auth-signup:hover,
body.dark .drawer-auth .btn-auth-signup:active {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff
}

body.dark .drawer-auth .btn-auth-signup:hover i,
body.dark .drawer-auth .btn-auth-signup:active i {
  color: #fff !important
}