/* ===== DARK MODE ===== */
[data-theme="dark"] {
    --bg: #0b1714;
    --alt: #142a23;
    --surface: #10201b;
    --text: #e8f2ee;
    --muted: #b3c7bf;
    --link: #4fd1a1;
    --band: #0f4a39;
    --line: #2a443d;
    --err: #ff6b6b;
    --foot: #06100d;
    color-scheme: dark
}

/* header */
[data-theme="dark"] .header.scrolled {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .logo i {
    background: var(--link);
    color: #06100d
}

[data-theme="dark"] .nav a.active {
    background: var(--link);
    color: #06100d
}

[data-theme="dark"] .icon-btn:hover {
    background: var(--line)
}

@media(max-width:1024px) {
    [data-theme="dark"] .nav a.active {
        color: #06100d
    }
}


/* ===== HERO (dark) ===== */
[data-theme="dark"] {
    --grid: rgba(79, 209, 161, .09)
}

[data-theme="dark"] .report {
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7)
}

[data-theme="dark"] .chip {
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7)
}

[data-theme="dark"] .status {
    color: #06100d
}

[data-theme="dark"] .orb-1 {
    opacity: .2
}

[data-theme="dark"] .orb-2 {
    opacity: .12
}

[data-theme="dark"] .report-wrap::before {
    opacity: .2
}

[data-theme="dark"] {
    --ov1: rgba(11, 23, 20, .88);
    --ov2: rgba(11, 23, 20, .76);
    --ov3: rgba(11, 23, 20, .58)
}


/* ===== HOW IT WORKS (dark) ===== */
[data-theme="dark"] .step-no {
    -webkit-text-stroke-color: #35544b
}

[data-theme="dark"] .step-node {
    background: var(--surface)
}

[data-theme="dark"] .time {
    background: var(--surface)
}


/* ===== SERVICES (dark) ===== */
[data-theme="dark"] .svc-panel {
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8)
}

[data-theme="dark"] .svc-ic {
    color: #06100d
}

[data-theme="dark"] .svc-bg {
    opacity: .1
}

@media(max-width:1024px) {
    [data-theme="dark"] .svc-tab[aria-selected="true"] {
        color: #06100d
    }
}


/* ===== WHY US (dark) ===== */
[data-theme="dark"] .why-img-1,
[data-theme="dark"] .why-img-2,
[data-theme="dark"] .why-badge {
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .8)
}

[data-theme="dark"] .why-frame {
    opacity: .55
}


/* ===== BOOKING CTA (DARK MODE) ===== */

[data-theme="dark"] .booking-cta-inner {
    border-color: var(--line);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(79, 209, 161, .10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .035),
            rgba(255, 255, 255, .01)
        );
}

[data-theme="dark"] .booking-cta-float {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

[data-theme="dark"] .booking-cta-float > i {
    background: var(--alt);
    color: var(--link);
}

[data-theme="dark"] .booking-cta-float small {
    color: var(--muted);
}

[data-theme="dark"] .booking-cta-icon {
    background: rgba(255, 255, 255, .045);
    border-color: var(--line);
}

/* =========================================
   BOOKING CTA — EYEBROW COLOR ONLY
========================================= */

/* Light mode color is maintained in style.css:
   #0f6b4f
*/

/* Dark mode — change only eyebrow text and icon */
[data-theme="dark"] .booking-cta .eyebrow,
[data-theme="dark"] .booking-cta .eyebrow i {
    color: #4fd1a1;
}



/* ===== INSPECTION PROCESS — DARK MODE ===== */

[data-theme="dark"] .inspection-heading .eyebrow,
[data-theme="dark"] .inspection-tag {
    color: #4fd1a1;
}

[data-theme="dark"] .inspection-card {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .inspection-card:hover {
    border-color: var(--link);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

[data-theme="dark"] .inspection-number {
    background: var(--link);
    color: #06100d;
    border-color: rgba(79, 209, 161, .35);
}

[data-theme="dark"] .inspection-bottom {
    background: var(--alt);
    border-color: var(--line);
}

[data-theme="dark"] .inspection-bottom-icon {
    background: var(--surface);
    color: var(--link);
}



[data-theme="dark"] .emissions-content > .eyebrow {
    color: #4fd1a1;
}