/* ═══════════════════════════════════════════════════════════
   LIGHT MODE v3 — COMPLETE NUCLEAR REWRITE
   Apple-inspired professional light theme
   Uses content:url() for bulletproof image replacement
   Covers ALL 14 pages: index, svc-*, plan-*, story, timeline,
   certifications, service
   ═══════════════════════════════════════════════════════════ */

/* ═══ GLOBAL BODY/HTML ═══ */
html.light-mode,
html.light-mode body {
    background-color: #99bbf0 !important;
    background-image:
        radial-gradient(ellipse 120% 90% at 0% 0%, rgba(37, 99, 235, 0.55) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 100% 100%, rgba(79, 70, 229, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 20% 80%, rgba(2, 132, 199, 0.40) 0%, transparent 60%) !important;
    color: #1e3a5f !important;
    animation: lightBgPulse 8s ease-in-out infinite alternate !important;
}

@keyframes lightBgPulse {
    0% {
        background-color: #99bbf0;
    }

    25% {
        background-color: #a5c5f8;
    }

    50% {
        background-color: #90b8ef;
    }

    75% {
        background-color: #aac8fa;
    }

    100% {
        background-color: #95bcf2;
    }
}

/* ═══ LIGHT MODE ANIMATED MESH BLOBS ═══ */
html.light-mode .blob-1 {
    background: #2563eb !important;
    opacity: 0.80 !important;
    width: 900px !important;
    height: 900px !important;
    animation-duration: 20s !important;
}

html.light-mode .blob-2 {
    background: #4f46e5 !important;
    opacity: 0.70 !important;
    width: 700px !important;
    height: 700px !important;
    animation-duration: 16s !important;
}

html.light-mode .blob-3 {
    background: #0284c7 !important;
    opacity: 0.65 !important;
    width: 800px !important;
    height: 800px !important;
    animation-duration: 22s !important;
}

html.light-mode .blob-4 {
    background: #3b82f6 !important;
    opacity: 0.75 !important;
    width: 600px !important;
    height: 600px !important;
    animation-duration: 14s !important;
}

html.light-mode .mesh-blob {
    filter: blur(28px) !important;
    opacity: 0.80 !important;
}


/* ═══ ALL TEXT — FORCE DARK ═══ */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    background: none !important;
}

html.light-mode p,
html.light-mode li,
html.light-mode span,
html.light-mode label,
html.light-mode td,
html.light-mode th,
html.light-mode blockquote,
html.light-mode figcaption,
html.light-mode em,
html.light-mode dd,
html.light-mode dt,
html.light-mode .text,
html.light-mode time {
    color: #424245 !important;
}

html.light-mode strong,
html.light-mode b {
    color: #1d1d1f !important;
}

/* ═══ STAT CARDS — fully invisible, seamless, no box ═══ */
html.light-mode .stat-card,
html.light-mode .hero-stat,
html.light-mode .hero-stats-card {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ═══ CONTENT CARDS — subtle blue-tinted glass ═══ */
html.light-mode .card,
html.light-mode .blog-card,
html.light-mode .feature-card,
html.light-mode .service-card,
html.light-mode .tech-card,
html.light-mode .price-card,
html.light-mode .pricing-card,
html.light-mode .sv-card,
html.light-mode .sv-stat,
html.light-mode .sv-layer,
html.light-mode .sv-layer-item,
html.light-mode .sv-pain-item,
html.light-mode .sv-final-cta,
html.light-mode .plan-feature-item,
html.light-mode .compare-table,
html.light-mode .price-features,
html.light-mode .card-svc,
html.light-mode .pricing-card-inner {
    background-color: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}


html.light-mode .nav,
html.light-mode nav,
html.light-mode .nav-scrolled,
html.light-mode header {
    background: rgba(200, 219, 248, 0.88) !important;
    border-bottom-color: rgba(96, 165, 250, 0.20) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

html.light-mode a:not(.btn-primary):not(.nav-cta):not(.sv-btn-p):not(.btn-plan-primary):not([class*="btn"]) {
    color: #0071e3 !important;
}

/* ═══ INLINE ELEMENTS — never get background boxes ═══ */
html.light-mode span,
html.light-mode a,
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6,
html.light-mode p,
html.light-mode b,
html.light-mode strong,
html.light-mode em,
html.light-mode i,
html.light-mode .stat-plus,
html.light-mode .stat-num,
html.light-mode .stat-label {
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}



/* ═══ NAVBAR LOGO — CSS content:url() BULLETPROOF SWAP ═══ */
html.light-mode .nav-logo img,
html.light-mode .nav-logo-img,
html.light-mode img.nav-logo-img {
    content: url('images/day/navbar-logo.png') !important;
    filter: none !important;
}

/* Footer logo stays white (footer is dark) */
html.light-mode footer .nav-logo img,
html.light-mode footer .nav-logo-img,
html.light-mode footer img.nav-logo-img {
    content: none !important;
    filter: none !important;
}

/* ═══ HERO HAND ═══ */
html.light-mode .hero-hand {
    content: url('images/day/hero-hand-transparent.png') !important;
    filter: none !important;
}

/* hero-apple rule moved to end of file for specificity */

/* ═══ SUBPAGE NAVBAR LAYOUT ═══ */
html.light-mode .nav,
html.light-mode .nav.scrolled {
    background: rgba(245, 245, 247, 0.92) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .nav .nav-link {
    color: #424245 !important;
}

html.light-mode .nav .nav-link:hover {
    color: #1d1d1f !important;
}

html.light-mode .nav .nav-phone {
    color: #424245 !important;
}

/* ═══ INDEX NAVBAR (.navbar) ═══ */
html.light-mode .navbar,
html.light-mode .navbar.scrolled {
    background: rgba(245, 245, 247, 0.92) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}

html.light-mode .nav-link {
    color: #424245 !important;
}

html.light-mode .nav-link:hover,
html.light-mode .nav-link.active {
    color: #1d1d1f !important;
}

html.light-mode .nav-phone {
    color: #424245 !important;
}

/* ═══ THEME TOGGLE ═══ */
html.light-mode .theme-toggle {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #424245 !important;
}

html.light-mode .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* ═══ SCROLL PROGRESS ═══ */
html.light-mode .scroll-progress {
    background: #0071e3 !important;
}

/* ═══ ALL BUTTONS — Apple Blue ═══ */
html.light-mode .btn-primary,
html.light-mode .nav-cta,
html.light-mode .sv-btn-p,
html.light-mode .btn-plan-primary,
html.light-mode a.btn-primary,
html.light-mode button.btn-primary {
    background: #0071e3 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 980px !important;
    box-shadow: none !important;
    background-image: none !important;
}

html.light-mode .btn-primary span,
html.light-mode .nav-cta span,
html.light-mode .sv-btn-p span,
html.light-mode .btn-plan-primary span {
    color: #fff !important;
}

html.light-mode .btn-primary:hover,
html.light-mode .nav-cta:hover,
html.light-mode .sv-btn-p:hover {
    background: #0077ED !important;
    color: #fff !important;
}

html.light-mode .btn-secondary,
html.light-mode .btn-glass,
html.light-mode .sv-btn-g {
    background: transparent !important;
    border: 1px solid #0071e3 !important;
    color: #0071e3 !important;
    border-radius: 980px !important;
    background-image: none !important;
}

html.light-mode .btn-secondary span,
html.light-mode .btn-glass span,
html.light-mode .sv-btn-g span {
    color: #0071e3 !important;
}

html.light-mode .btn-plan-text {
    color: #0071e3 !important;
}

/* ═══ HERO SECTION ═══ */
html.light-mode .hero {
    background: linear-gradient(180deg, #3896ff 0%, #2b7de9 50%, #1a6ad4 100%) !important;
}

html.light-mode .hero-gradient-text,
html.light-mode [class*="gradient-text"] {
    background: linear-gradient(135deg, #0071e3, #5856d6) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.light-mode .hero-desc {
    color: #6e6e73 !important;
}

/* ═══ BADGES / PILLS — Apple blue ═══ */
html.light-mode .badge,
html.light-mode .hero-badge,
html.light-mode .section-tag,
html.light-mode .sv-pill,
html.light-mode .plan-pill {
    background: rgba(0, 113, 227, 0.08) !important;
    border: 1px solid rgba(0, 113, 227, 0.2) !important;
    color: #0071e3 !important;
}

html.light-mode .featured-badge {
    background: #0071e3 !important;
    color: #fff !important;
}

/* ═══ ALL SECTIONS — light background ═══ */
html.light-mode section:not(.hero),
html.light-mode .sv-body,
html.light-mode .sv-body>div,
html.light-mode .sv-body>section,
html.light-mode .plan-body,
html.light-mode .sv-process,
html.light-mode .sv-plans-proof,
html.light-mode .plan-usp,
html.light-mode .cert-grid {
    background: #e8f0fc !important;
    background-color: #e8f0fc !important;
}

/* ═══ HERO — blue background, overrides everything ═══ */
html.light-mode .hero {
    background: linear-gradient(180deg, #3896ff 0%, #2b7de9 50%, #1a6ad4 100%) !important;
    background-color: #3896ff !important;
}

/* Override any inline background: var(--dark) or background: #05030f */
html.light-mode [style*="background: var(--dark)"],
html.light-mode [style*="background:var(--dark)"],
html.light-mode [style*="background: #05030f"],
html.light-mode [style*="background:#05030f"],
html.light-mode [style*="background: rgb(5"],
html.light-mode [style*="background:rgb(5"] {
    background: #e8f0fc !important;
}

/* ═══ STAT CARDS ═══ */
html.light-mode .stat-card,
html.light-mode .sv-stat,
html.light-mode .about-stat-chip,
html.light-mode .trust-item {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    border-radius: 18px !important;
}

html.light-mode .stat-number,
html.light-mode .sv-stat-num,
html.light-mode .about-stat-number {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    background: none !important;
}

html.light-mode .about-stat-label,
html.light-mode .sv-stat-label {
    color: #6e6e73 !important;
}

html.light-mode .sv-stat-source {
    color: #86868b !important;
}

/* Stat dots — professional small blue circles */
html.light-mode .about-stat-pixel {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #0071e3 !important;
}

html.light-mode .sv-stat-bar {
    background: linear-gradient(90deg, #0071e3, #5856d6) !important;
    opacity: 0.15 !important;
}

/* ═══ HIDE DECORATIVE ELEMENTS ═══ */
html.light-mode .progress-dots,
html.light-mode .tag-dot,
html.light-mode .about-pixel-corner,
html.light-mode .about-pixel-dot,
html.light-mode [class*="sparkle"],
html.light-mode [class*="pixel-corner"],
html.light-mode [class*="pixel-dot"],
html.light-mode .mesh-container {
    display: none !important;
}

/* ═══ SERVICE & PRICING CARDS ═══ */
html.light-mode .glass-card,
html.light-mode .service-card,
html.light-mode .pricing-card,
html.light-mode .testimonial-card,
html.light-mode .cert-card,
html.light-mode .plan-feature-item,
html.light-mode .plan-usp-card,
html.light-mode .sv-step,
html.light-mode .sv-plan-proof-card,
html.light-mode .sv-sib,
html.light-mode .tl-card,
html.light-mode .timeline-item,
html.light-mode .milestone {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    border-radius: 18px !important;
}

html.light-mode .service-card:hover,
html.light-mode .pricing-card:hover,
html.light-mode .sv-sib:hover {
    border-color: rgba(0, 113, 227, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-plan-featured {
    border: 2px solid rgba(0, 113, 227, 0.3) !important;
}

html.light-mode .price-amount {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Checkmarks in lists */
html.light-mode .pricing-card li::before,
html.light-mode .sv-plan-proof-feats li::before,
html.light-mode .plan-feature-item li::before {
    color: #34c759 !important;
}

/* ═══ SERVICE PAGE HEROES (sv-hero) ═══ */
html.light-mode .sv-hero {
    background: #101010 !important;
}

html.light-mode .sv-hero-bg {
    filter: brightness(0.6) saturate(0.85) !important;
    opacity: 1 !important;
}

html.light-mode .sv-hero-grad {
    background: linear-gradient(to bottom,
            rgba(10, 10, 20, 0.35) 0%,
            rgba(10, 10, 20, 0.55) 55%,
            rgba(10, 10, 20, 0.75) 100%) !important;
}

html.light-mode .sv-back {
    color: #6e6e73 !important;
}

html.light-mode .sv-back:hover {
    color: #1d1d1f !important;
}

/* ═══ SERVICE PROCESS STEPS ═══ */
html.light-mode .sv-step-num {
    color: #0071e3 !important;
    background: rgba(0, 113, 227, 0.06) !important;
}

/* ═══ BEFORE/AFTER COMPARISON ═══ */
html.light-mode .sv-ba-col,
html.light-mode .sv-ba-before {
    background: rgba(255, 45, 85, 0.04) !important;
    border: 1px solid rgba(255, 45, 85, 0.12) !important;
}

html.light-mode .sv-ba-after {
    background: rgba(0, 113, 227, 0.04) !important;
    border: 1px solid rgba(0, 113, 227, 0.12) !important;
}

/* ═══ SERVICE LAYER TAGS ═══ */
html.light-mode .sv-layer {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-layer-tag {
    color: #0071e3 !important;
}

/* ═══ SERVICE FINAL CTA ═══ */
html.light-mode .sv-final-cta,
html.light-mode .plan-cta {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
}

/* ═══ PLAN PAGE HEROES — show image with dark overlay ═══ */
html.light-mode .plan-hero {
    background: #101010 !important;
}

html.light-mode .plan-hero-photo {
    filter: brightness(0.6) saturate(0.85) !important;
    opacity: 1 !important;
}

html.light-mode .plan-hero-gradient {
    background: linear-gradient(to bottom,
            rgba(10, 10, 20, 0.35) 0%,
            rgba(10, 10, 20, 0.55) 55%,
            rgba(10, 10, 20, 0.78) 100%) !important;
}

html.light-mode .plan-hero-price {
    color: #6e6e73 !important;
}

html.light-mode .plan-hero-price strong {
    color: #1d1d1f !important;
}

html.light-mode .plan-back {
    color: #6e6e73 !important;
}

html.light-mode .plan-features-title,
html.light-mode .plan-usp-label,
html.light-mode .sv-layer-tag {
    color: #0071e3 !important;
}

html.light-mode .plan-usp-quote {
    color: #424245 !important;
    border-left-color: rgba(0, 113, 227, 0.3) !important;
}

html.light-mode .plan-usp-icon {
    background: rgba(0, 113, 227, 0.06) !important;
}

/* Plan intro photos — natural look, no brightness boost */
html.light-mode .plan-intro-photo img {
    filter: none !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* ═══ LOGO CAROUSEL — dark strip ═══ */
html.light-mode .logo-track,
html.light-mode .logo-carousel {
    background: #1d1d1f !important;
    border-radius: 18px !important;
}

/* ═══ TEAM SECTION — fix dark overlay naturally ═══ */
html.light-mode .about-team-row {
    background: #e8f0fc !important;
}

html.light-mode .about-team-photo {
    filter: none !important;
}

html.light-mode .about-team-overlay {
    background: linear-gradient(to right,
            rgba(245, 245, 247, 0.92) 0%,
            rgba(245, 245, 247, 0.7) 45%,
            transparent 80%) !important;
}

html.light-mode .about-team-tag {
    color: #0071e3 !important;
}

html.light-mode .about-team-headline {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .about-team-sub {
    color: #424245 !important;
}

/* ═══ ABOUT SECTION ═══ */
html.light-mode .about-text,
html.light-mode .about-bio {
    color: #424245 !important;
}

/* ═══ TIMELINE PAGE ═══ */
html.light-mode .tl-year,
html.light-mode .milestone-year {
    color: #0071e3 !important;
}

html.light-mode .tl-desc {
    color: #424245 !important;
}

/* Timeline dots — small professional circles */
html.light-mode .milestone-dot,
html.light-mode .timeline-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #0071e3 !important;
}

/* Timeline filter/category buttons */
html.light-mode .tl-filter-btn,
html.light-mode .timeline-filter,
html.light-mode [class*="filter-btn"],
html.light-mode [class*="category-btn"] {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #424245 !important;
}

html.light-mode .tl-filter-btn:hover,
html.light-mode .tl-filter-btn.active,
html.light-mode [class*="filter-btn"]:hover,
html.light-mode [class*="filter-btn"].active {
    background: #0071e3 !important;
    color: #fff !important;
    border-color: #0071e3 !important;
}

/* Timeline ticker/bar */
html.light-mode .timeline-progress-bar,
html.light-mode .tl-progress {
    background: rgba(0, 113, 227, 0.15) !important;
}

/* ═══ CERTIFICATIONS PAGE ═══ */
/* Cert filter buttons — readable on dark hero background */
html.light-mode .cert-filter-btn,
html.light-mode .cert-tab,
html.light-mode [class*="cert-filter"],
html.light-mode [class*="cert-tab"] {
    background: rgba(0, 0, 0, .04) !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    color: #424245 !important;
    -webkit-text-fill-color: #424245 !important;
}

html.light-mode .cert-filter-btn:hover,
html.light-mode .cert-filter-btn.active,
html.light-mode .cert-tab.active,
html.light-mode [class*="cert-filter"]:hover,
html.light-mode [class*="cert-filter"].active {
    background: rgba(0, 113, 227, .1) !important;
    border-color: rgba(0, 113, 227, .3) !important;
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .cert-filter-btn.active,
html.light-mode [class*="cert-filter"].active {
    background: #0071e3 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
    border-color: #0071e3 !important;
}

/* Cert modal — FORCE LIGHT ═══ */
html.light-mode .cert-modal,
html.light-mode .cert-detail,
html.light-mode .cert-overlay,
html.light-mode .modal-backdrop,
html.light-mode .tl-modal-backdrop {
    background: rgba(0, 0, 0, 0.4) !important;
}

html.light-mode .cert-modal-content,
html.light-mode .cert-detail-content,
html.light-mode [class*="modal-content"],
html.light-mode [class*="detail-panel"],
html.light-mode [class*="detail-card"] {
    background: #dbeafe !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important;
}

html.light-mode .cert-modal-content *,
html.light-mode .cert-detail-content *,
html.light-mode [class*="modal-content"] p,
html.light-mode [class*="modal-content"] span,
html.light-mode [class*="modal-content"] li,
html.light-mode [class*="detail-panel"] p,
html.light-mode [class*="detail-panel"] span,
html.light-mode [class*="detail-panel"] li {
    color: #424245 !important;
}

html.light-mode .cert-modal-content h2,
html.light-mode .cert-modal-content h3,
html.light-mode .cert-modal-content h4,
html.light-mode [class*="modal-content"] h2,
html.light-mode [class*="modal-content"] h3,
html.light-mode [class*="detail-panel"] h2,
html.light-mode [class*="detail-panel"] h3 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Cert tags/pills inside modal */
html.light-mode .cert-tag,
html.light-mode [class*="cert-tag"],
html.light-mode [class*="skill-tag"],
html.light-mode [class*="tool-tag"] {
    background: rgba(0, 113, 227, 0.08) !important;
    border: 1px solid rgba(0, 113, 227, 0.15) !important;
    color: #0071e3 !important;
}

/* Close button on modal */
html.light-mode [class*="close-btn"],
html.light-mode [class*="modal-close"] {
    color: #6e6e73 !important;
}

html.light-mode [class*="close-btn"]:hover,
html.light-mode [class*="modal-close"]:hover {
    color: #1d1d1f !important;
}

/* ═══ SERVICE.HTML — fix dark top ═══ */
html.light-mode .services-hero,
html.light-mode .service-hero,
html.light-mode [class*="services-grid"],
html.light-mode [class*="service-grid"] {
    background: #e8f0fc !important;
}

/* ═══ STORY PAGE ═══ */
html.light-mode .story-section,
html.light-mode .story-block {
    background: #e8f0fc !important;
}

html.light-mode .story-quote,
html.light-mode blockquote {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 3px solid #0071e3 !important;
}

/* ═══ HR / DIVIDERS ═══ */
html.light-mode hr {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ═══ MOBILE MENU ═══ */
html.light-mode .mobile-menu,
html.light-mode .drawer {
    background: rgba(245, 245, 247, 0.98) !important;
}

html.light-mode .mobile-menu .nav-link,
html.light-mode .drawer .nav-link {
    color: #1d1d1f !important;
}

/* ═══ CONTACT SECTION — STAYS DARK ═══ */
html.light-mode section#contact {
    background: #1d1d1f !important;
}

html.light-mode section#contact *:not(.btn-primary):not(.btn-glass) {
    color: #f5f5f7 !important;
}

html.light-mode section#contact h2 {
    -webkit-text-fill-color: #f5f5f7 !important;
}

html.light-mode section#contact .btn-primary {
    background: #0071e3 !important;
    color: #fff !important;
}

/* ═══ FOOTER — STAYS DARK ═══ */
html.light-mode footer {
    background: #1d1d1f !important;
}

html.light-mode footer * {
    color: #86868b !important;
}

html.light-mode footer h3,
html.light-mode footer h4 {
    color: #f5f5f7 !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}

html.light-mode footer a:hover {
    color: #f5f5f7 !important;
}

/* ═══ IMAGES — smooth transitions ═══ */
html.light-mode img {
    transition: opacity 0.4s ease, filter 0.4s ease !important;
}

/* ═══ INLINE STYLE OVERRIDES ═══ */
/* Cards/elements with inline dark backgrounds */
html.light-mode .service-card,
html.light-mode .pricing-card {
    background: #dbeafe !important;
    background-color: #dbeafe !important;
}

/* Any gradient text that shows purple */
html.light-mode [style*="background: linear-gradient"][style*="-webkit-background-clip: text"] {
    background: linear-gradient(135deg, #0071e3, #147ce5) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ═══ TOOLTIP / POPOVER ═══ */
html.light-mode [class*="tooltip"],
html.light-mode [class*="popover"] {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ═══ INPUT / FORM ELEMENTS ═══ */
html.light-mode input,
html.light-mode textarea,
html.light-mode select {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1d1d1f !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
    color: #86868b !important;
}

/* ═══ FINAL CATCHALL — any remaining dark bgs ═══ */
html.light-mode [style*="background-color: rgba(5"],
html.light-mode [style*="background-color:rgba(5"],
html.light-mode [style*="background: rgba(5"],
html.light-mode [style*="background:rgba(5"] {
    background: #e8f0fc !important;
    background-color: #e8f0fc !important;
}

/* ═══════════════════════════════════════════════════════════
   CRITICAL FIX — mix-blend-mode: screen makes dark logos
   invisible on light backgrounds. Override to normal.
   ═══════════════════════════════════════════════════════════ */
html.light-mode .nav-logo img,
html.light-mode .nav-logo-img,
html.light-mode img.nav-logo-img,
html.light-mode .footer-logo img {
    mix-blend-mode: normal !important;
}

/* ═══ SMOOTH THEME TRANSITIONS — no black flash ═══ */
html.light-mode,
html.light-mode body,
html.light-mode section,
html.light-mode nav,
html.light-mode .navbar,
html.light-mode .nav,
html.light-mode .hero,
html.light-mode .sv-hero,
html.light-mode .plan-hero,
html.light-mode .tl-hero {
    transition: background-color 0.5s ease, color 0.5s ease, background 0.5s ease !important;
}

html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode p,
html.light-mode span,
html.light-mode a,
html.light-mode li {
    transition: color 0.5s ease !important;
}

/* Page transition veil — must be light in light mode */
html.light-mode #pageTransitionVeil {
    background: #e8f0fc !important;
}

/* Cursor glow hidden in light mode */
html.light-mode #cursorGlow,
html.light-mode .cursor-glow {
    display: none !important;
}

/* ═══ TIMELINE PAGE — COMPLETE FIX ═══ */
/* Hero ALWAYS dark — graphic + glow only work on dark bg */
html.light-mode .tl-hero {
    background:
        radial-gradient(ellipse 55% 60% at 15% 55%, rgba(20, 184, 166, .55) 0%, transparent 65%),
        radial-gradient(ellipse 75% 85% at 50% 35%, rgba(124, 58, 237, .50) 0%, transparent 65%),
        radial-gradient(ellipse 55% 60% at 85% 55%, rgba(245, 158, 11, .45) 0%, transparent 65%),
        #06040f !important;
}

html.light-mode body {
    background: #e8f0fc !important;
}

html.light-mode .tl-hero h1,
html.light-mode .tl-hero h2,
html.light-mode .tl-hero h3,
html.light-mode .tl-hero p,
html.light-mode .tl-hero span,
html.light-mode .tl-hero a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .tl-hero-bloom {
    display: block !important;
    background:
        radial-gradient(ellipse 65% 85% at 18% 50%, rgba(20, 184, 166, .85) 0%, transparent 60%),
        radial-gradient(ellipse 85% 100% at 50% 50%, rgba(124, 58, 237, .75) 0%, transparent 65%),
        radial-gradient(ellipse 65% 85% at 82% 50%, rgba(245, 158, 11, .70) 0%, transparent 60%) !important;
    filter: blur(24px) !important;
    opacity: 1 !important;
    inset: -25% -12% !important;
}

html.light-mode .tl-back {
    color: rgba(255, 255, 255, 0.5) !important;
}

html.light-mode .tl-back:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

html.light-mode .tl-sub {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

html.light-mode .tl-main {
    background: #e8f0fc !important;
}

/* Timeline ticker bar */
html.light-mode .tl-ticker {
    background: #dbeafe !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .ticker-track {
    color: #424245 !important;
}

html.light-mode .ticker-item {
    color: #424245 !important;
}

html.light-mode .ticker-sep {
    color: #86868b !important;
}

html.light-mode .ticker-popup {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    color: #1d1d1f !important;
}

html.light-mode .tp-date {
    color: #6e6e73 !important;
}

html.light-mode .tp-headline {
    color: #1d1d1f !important;
}

html.light-mode .tp-body {
    color: #424245 !important;
}

/* Timeline legend and filter buttons */
html.light-mode .tl-legend {
    background: #e8f0fc !important;
}

html.light-mode .legend-title {
    color: #1d1d1f !important;
}

html.light-mode .leg-btn {
    background: rgba(var(--btn-color), 0.08) !important;
    border: 1px solid rgba(var(--btn-color), 0.2) !important;
    color: rgb(var(--btn-color)) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .leg-btn:hover {
    background: rgba(var(--btn-color), 0.15) !important;
    border-color: rgba(var(--btn-color), 0.35) !important;
    color: rgb(var(--btn-color)) !important;
}

html.light-mode .leg-btn.active {
    background: rgb(var(--btn-color)) !important;
    color: #fff !important;
    border-color: rgb(var(--btn-color)) !important;
}

/* Timeline cards/entries */
html.light-mode .tl-entry,
html.light-mode .tl-card,
html.light-mode .timeline-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .tl-year,
html.light-mode .entry-year {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .tl-line,
html.light-mode .timeline-line {
    background: rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .tl-dot {
    background: #0071e3 !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
}

/* Hero graphic — restore fully in light mode (hero is kept dark above) */
html.light-mode .tl-hero-graphic {
    filter: drop-shadow(0 0 60px rgba(124, 58, 237, .7)) drop-shadow(0 0 120px rgba(99, 102, 241, .35)) brightness(1.1) !important;
}

/* ── Year Accordion rows ── */
html.light-mode .yr-row {
    border-color: rgba(0, 0, 0, 0.09) !important;
    background: #dbeafe !important;
}

html.light-mode .yr-row.open {
    border-color: rgba(124, 58, 237, 0.3) !important;
}

html.light-mode .yr-header {
    background: rgba(255, 255, 255, 0.8) !important;
}

html.light-mode .yr-header:hover {
    background: rgba(124, 58, 237, 0.05) !important;
}

html.light-mode .yr-label {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .yr-label span {
    color: #6e6e73 !important;
}

html.light-mode .yr-chevron {
    color: #6e6e73 !important;
}

/* ── Dispatch / story panel ── */
html.light-mode .tl-dispatch {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .dispatch-headline {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .dispatch-body {
    color: #424245 !important;
}

html.light-mode .dispatch-body p {
    color: #424245 !important;
}

html.light-mode .dispatch-byline {
    color: #6e6e73 !important;
}

html.light-mode .dispatch-quiet {
    color: #6e6e73 !important;
}

/* ── Category story feed cards — color-coded by category ── */
html.light-mode .story-card {
    background: rgba(var(--card-color), 0.06) !important;
    border-color: rgba(var(--card-color), 0.2) !important;
    box-shadow: 0 2px 12px rgba(var(--card-color), 0.08) !important;
}

html.light-mode .story-card:hover {
    border-color: rgba(var(--card-color), 0.45) !important;
    box-shadow: 0 12px 32px rgba(var(--card-color), 0.15) !important;
}

html.light-mode .story-card-date {
    color: rgb(var(--card-color)) !important;
}

html.light-mode .story-card-headline {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .story-card-excerpt {
    color: #424245 !important;
}

html.light-mode .story-card-arrow {
    color: rgb(var(--card-color)) !important;
}

html.light-mode .cat-feed-title {
    -webkit-text-fill-color: unset !important;
}



html.light-mode .month-grid-cell {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    color: #1d1d1f !important;
}

html.light-mode .mo-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.09) !important;
    color: #424245 !important;
}

html.light-mode .mo-btn:hover {
    border-color: rgba(124, 58, 237, 0.5) !important;
    color: #1d1d1f !important;
}

html.light-mode .mo-btn.active {
    background: rgba(124, 58, 237, 0.15) !important;
    border-color: rgba(124, 58, 237, 0.7) !important;
    color: #5b21b6 !important;
}

/* ═══ CERTIFICATIONS PAGE — COMPLETE FIX ═══ */
html.light-mode .cert-page-hero {
    background: #e8f0fc !important;
}

html.light-mode .cert-back {
    color: #6e6e73 !important;
}

html.light-mode .cert-count {
    color: #6e6e73 !important;
}

html.light-mode .cert-filters {
    background: #e8f0fc !important;
}

/* Filter buttons */
html.light-mode .cert-filter-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #424245 !important;
}

html.light-mode .cert-filter-btn:hover {
    background: rgba(0, 113, 227, 0.08) !important;
    border-color: rgba(0, 113, 227, 0.2) !important;
    color: #0071e3 !important;
}

html.light-mode .cert-filter-btn.active {
    background: #0071e3 !important;
    color: #fff !important;
    border-color: #0071e3 !important;
}

html.light-mode .cert-main {
    background: #e8f0fc !important;
}

html.light-mode .cert-row-page {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.light-mode .cert-name {
    color: #1d1d1f !important;
}

html.light-mode .cert-desc {
    color: #6e6e73 !important;
}

html.light-mode .cert-expand-hint {
    color: #0071e3 !important;
}

html.light-mode .pill,
html.light-mode .cert-pill {
    background: rgba(0, 113, 227, 0.08) !important;
    color: #0071e3 !important;
    border: 1px solid rgba(0, 113, 227, 0.15) !important;
}

/* Cert detail panel (expandable) */
html.light-mode .cert-detail-row,
html.light-mode .cert-expanded,
html.light-mode .cert-skills {
    background: #f9f9fb !important;
    border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .cert-detail-row h4,
html.light-mode .cert-expanded h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .cert-detail-row p,
html.light-mode .cert-expanded p,
html.light-mode .cert-detail-row li,
html.light-mode .cert-expanded li {
    color: #424245 !important;
}

html.light-mode .cert-tag,
html.light-mode .skill-tag,
html.light-mode .tool-tag {
    background: rgba(0, 113, 227, 0.06) !important;
    border: 1px solid rgba(0, 113, 227, 0.12) !important;
    color: #0071e3 !important;
}

/* ═══ SERVICE.HTML — fix dark sections ═══ */
html.light-mode .services-hero,
html.light-mode .service-hero,
html.light-mode .services-grid,
html.light-mode .service-grid,
html.light-mode .service-list {
    background: #e8f0fc !important;
}

/* ═══ STRAWBERRYFROG LOGO — invert on light backgrounds ═══ */
/* The logo carousel stays dark, so SVG should be visible.
   But if carousel bg override fails, this catches it. */
html.light-mode img[src*="strawberryfrog"] {
    filter: none !important;
}

/* Extra safety: if carousel bg is somehow light, darken the logo */
html.light-mode .logo-item img {
    filter: none !important;
}

/* ═══ STORY PAGE extras ═══ */
html.light-mode .story-hero {
    background: #e8f0fc !important;
}

html.light-mode .story-hero-bg {
    filter: brightness(1.3) saturate(0.6) !important;
    opacity: 0.5 !important;
}

/* ═══ ACCENT COLORS — override all purple to Apple blue ═══ */
html.light-mode [style*="color: #a78bfa"],
html.light-mode [style*="color:#a78bfa"],
html.light-mode [style*="color: #8b5cf6"],
html.light-mode [style*="color:#8b5cf6"] {
    color: #0071e3 !important;
}

html.light-mode [style*="background: #8b5cf6"],
html.light-mode [style*="background:#8b5cf6"],
html.light-mode [style*="background: #a78bfa"],
html.light-mode [style*="background:#a78bfa"] {
    background: #0071e3 !important;
}

html.light-mode [style*="border-color: #8b5cf6"],
html.light-mode [style*="border-color:#8b5cf6"] {
    border-color: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════
   TIMELINE — Override CSS variables & inline white text
   ═══════════════════════════════════════════════════════════ */
html.light-mode {
    --tl-accent: #0071e3 !important;
    --tl-blue: #147ce5 !important;
    --tl-gold: #ff9500 !important;
    --tl-red: #ff3b30 !important;
    --tl-green: #34c759 !important;
    --text-secondary: #6e6e73 !important;
    --text-primary: #1d1d1f !important;
}

/* Timeline — force ALL text dark */
html.light-mode .tl-hero *,
html.light-mode .tl-main *,
html.light-mode .tl-legend * {
    color: inherit;
}

html.light-mode .tl-hero h1,
html.light-mode .tl-hero h2 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Timeline entry rows — JS-generated */
html.light-mode .tl-row,
html.light-mode .tl-entry,
html.light-mode .tl-group {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .tl-row *,
html.light-mode .tl-entry * {
    color: #424245 !important;
}

html.light-mode .tl-row h3,
html.light-mode .tl-row h4,
html.light-mode .tl-entry h3,
html.light-mode .tl-entry h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Timeline month buttons */
html.light-mode .mo-btn {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #424245 !important;
}

html.light-mode .mo-btn:hover,
html.light-mode .mo-btn.active {
    background: #0071e3 !important;
    color: #fff !important;
    border-color: #0071e3 !important;
}

/* Year labels in timeline */
html.light-mode .yr-label,
html.light-mode .yr-divider {
    color: #0071e3 !important;
    border-color: rgba(0, 113, 227, 0.15) !important;
}

/* Dispatch panel */
html.light-mode .dispatch,
html.light-mode .dispatch-inner {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #424245 !important;
}

html.light-mode .dispatch-inner * {
    color: #424245 !important;
}

/* Floating particles hidden in light mode */
html.light-mode .particle,
html.light-mode .tl-particle {
    display: none !important;
}

/* Hero veil */
html.light-mode .hero-veil,
html.light-mode .tl-hero-veil {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE.HTML — uses .svc- prefix (not .sv-)
   ═══════════════════════════════════════════════════════════ */
html.light-mode .svc-hero {
    background: #e8f0fc !important;
}

html.light-mode .svc-hero-bg {
    background: #e8f0fc !important;
}

html.light-mode .svc-hero-bg img {
    filter: brightness(1.3) saturate(0.6) !important;
    opacity: 0.5 !important;
}

html.light-mode .svc-hero-gradient {
    background: linear-gradient(to bottom,
            rgba(245, 245, 247, 0) 0%,
            rgba(245, 245, 247, 0.8) 50%,
            #f5f5f7 100%) !important;
}

html.light-mode .svc-hero-content * {
    color: #1d1d1f !important;
}

html.light-mode .svc-hero-content p {
    color: #6e6e73 !important;
}

html.light-mode .svc-details {
    background: #e8f0fc !important;
}

html.light-mode .svc-details * {
    color: #424245 !important;
}

html.light-mode .svc-details h2,
html.light-mode .svc-details h3,
html.light-mode .svc-details h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Service tabs/buttons on service.html */
html.light-mode .svc-tab,
html.light-mode .svc-btn {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #424245 !important;
}

html.light-mode .svc-tab:hover,
html.light-mode .svc-tab.active,
html.light-mode .svc-btn:hover {
    background: #0071e3 !important;
    color: #fff !important;
    border-color: #0071e3 !important;
}

/* Service feature cards */
html.light-mode .svc-feature,
html.light-mode .svc-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .svc-feature *,
html.light-mode .svc-card * {
    color: #424245 !important;
}

html.light-mode .svc-feature h3,
html.light-mode .svc-feature h4,
html.light-mode .svc-card h3,
html.light-mode .svc-card h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* ═══ TEAM PHOTO — swap to daytime version ═══ */
/* about-team-photo light mode: src is swapped via script.js or stays same — object-fit handles display */
html.light-mode .about-team-photo {
    object-fit: cover !important;
    object-position: center 30% !important;
    filter: none !important;
}

/* hero-apple rule moved to end of file for specificity */

/* ═══ ALL BUTTONS — override purple gradients to Apple blue ═══ */
html.light-mode [style*="background: linear-gradient"],
html.light-mode [style*="background:linear-gradient"] {
    background: #0071e3 !important;
    background-image: none !important;
}

html.light-mode .btn-primary,
html.light-mode .nav-cta,
html.light-mode .sv-btn-p,
html.light-mode .btn-plan-primary,
html.light-mode a.btn-primary,
html.light-mode button.btn-primary,
html.light-mode [class*="btn-primary"],
html.light-mode .hero-actions .btn-primary {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
}

/* Override inline gradient backgrounds on buttons */
html.light-mode .btn-primary[style],
html.light-mode [class*="btn"][style*="gradient"] {
    background: #0071e3 !important;
    background-image: none !important;
}

/* ═══ COLORED DOTS — uniform Apple blue ═══ */
html.light-mode .dot,
html.light-mode [class*="-dot"] {
    background: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE FIX — ALL 50 AUDIT ISSUES
   ═══════════════════════════════════════════════════════════ */

/* ── GLOBAL CSS VARIABLE OVERRIDES ── */
html.light-mode {
    --dark: #e8f0fc !important;
    --bg: #e8f0fc !important;
    --bg-glass: rgba(224, 236, 255, 0.85) !important;
    --bg-card: rgba(232, 240, 252, 0.90) !important;
    --border: rgba(96, 165, 250, 0.18) !important;
    --border-hover: rgba(59, 130, 246, 0.30) !important;
    --text: #1d1d1f !important;
    --text-secondary: #374151 !important;
    --text-primary: #1d1d1f !important;
    --text-muted: #6b7280 !important;
    --text-dim: #6b7280 !important;
    --white: #1d1d1f !important;
    --purple: #0071e3 !important;
    --purple-glow: rgba(0, 113, 227, 0.08) !important;
    --pink: #0071e3 !important;
    --pink-dim: rgba(0, 113, 227, 0.7) !important;
    --pink-glow: rgba(0, 113, 227, 0.08) !important;
    --accent: #0071e3 !important;
    --tl-accent: #0071e3 !important;
    --tl-blue: #147ce5 !important;
    --tl-gold: #d4880a !important;
    --tl-red: #d63031 !important;
    --tl-green: #00875a !important;
}

/* ── HERO GRADIENT BUTTONS (inline styles) ── */
html.light-mode .hero-actions a:not(.btn-glass),
html.light-mode .hero-actions button:not(.btn-glass),
html.light-mode a[style*="linear-gradient"],
html.light-mode button[style*="linear-gradient"] {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 980px !important;
}

/* Hero badges — solid Apple style */
html.light-mode .hero-badge,
html.light-mode .hero-badge span,
html.light-mode [class*="hero-badge"] {
    background: rgba(0, 113, 227, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(0, 113, 227, 0.15) !important;
    color: #0071e3 !important;
}

/* ── SERVICE PAGE PROCESS SECTIONS ── */
html.light-mode .sv-process {
    background: #e8f0fc !important;
}

html.light-mode .sv-process::before {
    background: rgba(0, 113, 227, 0.08) !important;
}

html.light-mode .sv-step {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-step-num {
    color: #0071e3 !important;
    background: rgba(0, 113, 227, 0.06) !important;
}

html.light-mode .sv-step-title {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .sv-step-body {
    color: #424245 !important;
}

/* Before/After comparison */
html.light-mode .sv-ba-grid {
    background: #e8f0fc !important;
}

html.light-mode .sv-ba-col {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-ba-col.sv-ba-before {
    background: rgba(255, 59, 48, 0.03) !important;
    border: 1px solid rgba(255, 59, 48, 0.12) !important;
}

html.light-mode .sv-ba-col.sv-ba-after {
    background: rgba(0, 113, 227, 0.03) !important;
    border: 1px solid rgba(0, 113, 227, 0.12) !important;
}

html.light-mode .sv-ba-header {
    color: #1d1d1f !important;
}

html.light-mode .sv-ba-icon {
    color: inherit !important;
}

html.light-mode .sv-ba-heading {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .sv-ba-before .sv-ba-heading {
    color: #ff3b30 !important;
    -webkit-text-fill-color: #ff3b30 !important;
}

html.light-mode .sv-ba-after .sv-ba-heading {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .sv-ba-col li,
html.light-mode .sv-ba-col p {
    color: #424245 !important;
}

/* Service stat boxes */
html.light-mode .sv-stat {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-stat-num {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    background: none !important;
}

html.light-mode .sv-stat-label {
    color: #6e6e73 !important;
}

html.light-mode .sv-stat-source {
    color: #86868b !important;
}

/* Service layers */
html.light-mode .sv-layer {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-layer-tag {
    color: #0071e3 !important;
}

/* Service sibling cards */
html.light-mode .sv-sib {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-sib * {
    color: #424245 !important;
}

html.light-mode .sv-sib h3,
html.light-mode .sv-sib h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Service CTA final */
html.light-mode .sv-final-cta {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .sv-final-cta * {
    color: #424245 !important;
}

html.light-mode .sv-final-cta h2,
html.light-mode .sv-final-cta h3 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Service plan proof cards */
html.light-mode .sv-plan-proof-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-plan-proof-card * {
    color: #424245 !important;
}

html.light-mode .sv-plan-featured {
    border: 2px solid #0071e3 !important;
}

/* ── CERTIFICATIONS MODAL — FORCE LIGHT ── */
html.light-mode .cert-modal-backdrop {
    background: rgba(0, 0, 0, 0.35) !important;
}

html.light-mode .cert-modal-backdrop.open {
    background: rgba(0, 0, 0, 0.35) !important;
}

html.light-mode .cert-modal {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18) !important;
    color: #1d1d1f !important;
}

html.light-mode .cert-modal * {
    color: #424245 !important;
}

html.light-mode .cert-modal h2,
html.light-mode .cert-modal h3,
html.light-mode .cert-modal h4,
html.light-mode .cert-modal-title {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .cert-modal-subtitle {
    color: #6e6e73 !important;
}

html.light-mode .cert-modal-block h4 {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .cert-modal-block p,
html.light-mode .cert-modal-block li {
    color: #424245 !important;
}

html.light-mode .cert-modal-close {
    color: #86868b !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .cert-modal-close:hover {
    color: #1d1d1f !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .cert-modal-cta {
    background: #0071e3 !important;
    color: #fff !important;
    background-image: none !important;
}

html.light-mode .cert-modal-cta * {
    color: #fff !important;
}

html.light-mode .cert-modal-header .pill {
    background: #0071e3 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
}

/* ALL pill badges site-wide — high contrast */
html.light-mode .pill,
html.light-mode .cert-pill {
    background: #0071e3 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
}

/* ── STORY PAGE — pink/purple → Apple blue ── */
html.light-mode .gradient-text-story {
    background: linear-gradient(135deg, #0071e3 0%, #147ce5 60%, #5856d6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.light-mode .story-hero {
    background: #e8f0fc !important;
}

html.light-mode .story-hero::before {
    display: none !important;
}

html.light-mode .sp-pink,
html.light-mode [class*="sp-pink"] {
    color: #0071e3 !important;
}

html.light-mode .story-year {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .story-timeline-line {
    background: linear-gradient(to bottom, transparent, rgba(0, 113, 227, 0.3), transparent) !important;
}

html.light-mode .story-pulse {
    background: #0071e3 !important;
    box-shadow: 0 0 12px rgba(0, 113, 227, 0.3) !important;
}

html.light-mode .story-entry,
html.light-mode .story-block {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #424245 !important;
}

html.light-mode .story-entry h2,
html.light-mode .story-entry h3,
html.light-mode .story-block h2,
html.light-mode .story-block h3 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .story-quote,
html.light-mode .story-blockquote {
    background: rgba(0, 113, 227, 0.03) !important;
    border-left: 3px solid #0071e3 !important;
    color: #424245 !important;
}

html.light-mode .story-hero-bloom {
    display: none !important;
}

html.light-mode .story-pill,
html.light-mode .story-badge {
    background: rgba(0, 113, 227, 0.06) !important;
    color: #0071e3 !important;
    border: 1px solid rgba(0, 113, 227, 0.15) !important;
    background-image: none !important;
}

html.light-mode .story-cta {
    background: #0071e3 !important;
    color: #fff !important;
    background-image: none !important;
}

/* ── STORY PAGE — missing chapter & body overrides ── */
html.light-mode .story-chapter-title {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .story-chapter-text {
    color: #424245 !important;
}

html.light-mode .story-hero-sub {
    color: #6e6e73 !important;
}

html.light-mode .story-eyebrow {
    color: #0071e3 !important;
}

html.light-mode .story-cta-eyebrow {
    color: #86868b !important;
}

html.light-mode .story-cta-heading {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .story-back {
    color: #6e6e73 !important;
}

html.light-mode .story-back:hover {
    color: #1d1d1f !important;
}

html.light-mode .story-stat-num {
    background: linear-gradient(135deg, #0071e3, #147ce5) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.light-mode .story-stat-label {
    color: #86868b !important;
}

html.light-mode .story-year-badge {
    border-color: rgba(0, 113, 227, 0.3) !important;
    background: rgba(0, 113, 227, 0.07) !important;
    color: #0071e3 !important;
}

html.light-mode .story-year-badge span {
    color: #0071e3 !important;
}

html.light-mode .story-cta-section {
    border-top-color: rgba(0, 0, 0, 0.07) !important;
}

html.light-mode .story-cta-primary {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
}

html.light-mode .story-cta-secondary {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #424245 !important;
}

html.light-mode .story-cta-secondary:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
}

html.light-mode .sp-pink {
    background: rgba(0, 113, 227, 0.08) !important;
    border-color: rgba(0, 113, 227, 0.2) !important;
    color: #0071e3 !important;
}

html.light-mode .sp-purple {
    background: rgba(0, 113, 227, 0.05) !important;
    border-color: rgba(0, 113, 227, 0.15) !important;
    color: #147ce5 !important;
}

html.light-mode .sp-white {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #6e6e73 !important;
}

html.light-mode .story-divider {
    background: linear-gradient(to bottom, transparent, rgba(0, 113, 227, 0.3), transparent) !important;
}

html.light-mode .story-main {
    background: transparent !important;
}

/* ── INDEX PAGE — pricing section ── */
html.light-mode .pricing-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .pricing-card * {
    color: #424245 !important;
}

html.light-mode .pricing-card h3,
html.light-mode .pricing-card h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .pricing-card .price-amount {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Featured pricing card */
html.light-mode .pricing-card.featured,
html.light-mode .pricing-card[class*="featured"] {
    border: 2px solid #0071e3 !important;
}

/* Featured badge */
html.light-mode .featured-badge {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
}

html.light-mode .featured-badge * {
    color: #fff !important;
}

/* Pricing checkmarks */
html.light-mode .pricing-card li::before {
    color: #34c759 !important;
}

/* ── REVIEWS SECTION ── */
html.light-mode .testimonial-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .testimonial-card * {
    color: #424245 !important;
}

html.light-mode .testimonial-card strong {
    color: #1d1d1f !important;
}

/* "flawless" gradient text */
html.light-mode .review-highlight,
html.light-mode [class*="gradient-text"] {
    background: linear-gradient(135deg, #0071e3, #5856d6) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── BOTTOM HERO / READY TO START ── */
html.light-mode .bottom-hero,
html.light-mode .cta-section,
html.light-mode [class*="bottom-cta"],
html.light-mode [class*="ready-section"] {
    background: #e8f0fc !important;
}

/* ── FOOTER LOGO — ensure visible against dark footer bg ── */
html.light-mode footer .nav-logo img,
html.light-mode footer .nav-logo-img,
html.light-mode footer img.nav-logo-img,
html.light-mode .footer-logo img {
    content: none !important;
    filter: none !important;
    mix-blend-mode: screen !important;
}

/* ── PLAN PAGES — feature grids ── */
html.light-mode .plan-feature-item {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .plan-feature-item * {
    color: #424245 !important;
}

html.light-mode .plan-feature-item h3,
html.light-mode .plan-feature-item h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .plan-usp-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .plan-usp-card * {
    color: #424245 !important;
}

html.light-mode .plan-usp-card h3,
html.light-mode .plan-usp-card h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Plan icons — Apple blue backgrounds */
html.light-mode .plan-usp-icon {
    background: rgba(0, 113, 227, 0.06) !important;
}

/* ── ALL INLINE rgba(5,3,15) backgrounds ── */
html.light-mode [style*="background: var(--dark)"],
html.light-mode [style*="background:var(--dark)"],
html.light-mode [style*="#05030f"],
html.light-mode [style*="rgb(5, 3, 15)"],
html.light-mode [style*="rgba(5, 3, 15"] {
    background: #e8f0fc !important;
    background-color: #e8f0fc !important;
}

/* ── ALL REMAINING PURPLE #8b5cf6 ── */
html.light-mode [style*="#8b5cf6"] {
    background: #0071e3 !important;
}

html.light-mode [style*="rgba(139, 92, 246"] {
    background-color: rgba(0, 113, 227, 0.08) !important;
}

/* ── INLINE white color text → dark ── */
html.light-mode [style*="color: #fff"],
html.light-mode [style*="color:#fff"],
html.light-mode [style*="color: white"],
html.light-mode [style*="color:white"],
html.light-mode [style*="color: rgb(255, 255, 255)"],
html.light-mode [style*="color:rgb(255,255,255)"] {
    color: #1d1d1f !important;
}

/* ── SERVICE IMAGE CARDS on index ── natural, no filter ── */
html.light-mode .service-card img,
html.light-mode .pricing-card img {
    filter: none !important;
}

/* ── GLOW / DECORATION CLEANUP ── */
html.light-mode [class*="glow"],
html.light-mode [class*="bloom"],
html.light-mode [class*="sparkle"],
html.light-mode [class*="mesh"] {
    display: none !important;
}

/* ── CURSOR GLOW ── */
html.light-mode #cursorGlow {
    display: none !important;
}

/* ── SCROLL PROGRESS BAR ── */
html.light-mode .scroll-progress-bar,
html.light-mode #scrollProgress {
    background: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════
   FINAL FIXES — exact class names that were still failing
   ═══════════════════════════════════════════════════════════ */

/* .btn-gradient — the ACTUAL class on pricing & contact buttons */
html.light-mode .btn-gradient,
html.light-mode a.btn-gradient,
html.light-mode .engage-now-btn {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 980px !important;
    box-shadow: none !important;
}

html.light-mode .btn-gradient:hover {
    background: #0077ED !important;
}

/* .featured-tag — "Most Retained" badge on pricing */
html.light-mode .featured-tag {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
}

/* Before/After list items — force dark text */
html.light-mode .sv-ba-item {
    color: #424245 !important;
}

html.light-mode .sv-ba-dot {
    flex-shrink: 0 !important;
}

html.light-mode .sv-ba-before .sv-ba-dot {
    background: #ff3b30 !important;
}

html.light-mode .sv-ba-after .sv-ba-dot {
    background: #0071e3 !important;
}

/* Force ALL text inside ba columns visible */
html.light-mode .sv-ba-col * {
    color: #424245 !important;
}

html.light-mode .sv-ba-col h3,
html.light-mode .sv-ba-col h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Cert modal — higher specificity override */
html.light-mode .cert-modal-backdrop .cert-modal {
    background: #dbeafe !important;
    color: #1d1d1f !important;
}

html.light-mode .cert-modal-backdrop .cert-modal p,
html.light-mode .cert-modal-backdrop .cert-modal li,
html.light-mode .cert-modal-backdrop .cert-modal span,
html.light-mode .cert-modal-backdrop .cert-modal div {
    color: #424245 !important;
}

html.light-mode .cert-modal-backdrop .cert-modal h2,
html.light-mode .cert-modal-backdrop .cert-modal h3,
html.light-mode .cert-modal-backdrop .cert-modal .cert-modal-title {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    background: none !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-modal-subtitle {
    color: #6e6e73 !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-modal-block h4 {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-modal-cta {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-modal-cta:hover {
    background: #0077ED !important;
    color: #fff !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-skill-tag {
    background: rgba(0, 113, 227, 0.06) !important;
    border: 1px solid rgba(0, 113, 227, 0.12) !important;
    color: #0071e3 !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-can-do li {
    color: #424245 !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .cert-can-do li::before {
    color: #0071e3 !important;
}

html.light-mode .cert-modal-backdrop .cert-modal .pill {
    background: rgba(0, 113, 227, 0.08) !important;
    color: #0071e3 !important;
    border: 1px solid rgba(0, 113, 227, 0.15) !important;
}

/* Team section text — add text-shadow for readability over photo */
html.light-mode .about-team-headline {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important;
}

html.light-mode .about-team-sub {
    color: #424245 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7) !important;
}

html.light-mode .about-team-tag {
    color: #0071e3 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Make team overlay stronger for text readability */
html.light-mode .about-team-overlay {
    background: linear-gradient(to right,
            rgba(245, 245, 247, 0.95) 0%,
            rgba(245, 245, 247, 0.85) 40%,
            rgba(245, 245, 247, 0.4) 70%,
            transparent 90%) !important;
}

/* hero-apple rule moved to end of file for specificity */

/* Contact section — it IS the footer, keep dark but ensure buttons are blue */
html.light-mode footer .btn-gradient,
html.light-mode footer a.btn-gradient,
html.light-mode .contact-form .btn-gradient {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
}

/* Form inputs in footer */
html.light-mode footer .form-input,
html.light-mode .contact-form input,
html.light-mode .contact-form textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f5f5f7 !important;
}

/* Pricing section tags */
html.light-mode .plan-tag,
html.light-mode .pricing-tier {
    color: #0071e3 !important;
}

/* Service page pill/tag within hero */
html.light-mode .sv-pill {
    background: rgba(0, 113, 227, 0.08) !important;
    border: 1px solid rgba(0, 113, 227, 0.2) !important;
    color: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════
   FINAL REMAINING FIXES — stat nums, timeline, btn-glass,
   est badge, team overlay
   ═══════════════════════════════════════════════════════════ */

/* ── ALL STAT NUMBERS — force blue, override gradient text ── */
html.light-mode .stat-card .stat-num,
html.light-mode .stat-card:nth-child(1) .stat-num,
html.light-mode .stat-card:nth-child(2) .stat-num,
html.light-mode .stat-card:nth-child(3) .stat-num,
html.light-mode .stat-card:nth-child(4) .stat-num {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #0071e3 !important;
    color: #0071e3 !important;
}

html.light-mode .stat-plus {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .stat-label {
    color: #6e6e73 !important;
}

html.light-mode .stat-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Override gradient CSS variables */
html.light-mode {
    --grad-blue: #0071e3 !important;
    --grad-purple: #0071e3 !important;
    --grad-pink: #0071e3 !important;
    --grad-teal: #0071e3 !important;
}

/* ── COMPANY TIMELINE (abt-year, abt-dot, abt-desc, abt-line) ── */
html.light-mode .abt-year {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .abt-desc {
    color: #6e6e73 !important;
}

html.light-mode .abt-dot,
html.light-mode .abt-dot[style] {
    background: #0071e3 !important;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.3) !important;
}

html.light-mode .abt-line {
    background: rgba(0, 113, 227, 0.15) !important;
}

/* ── BTN-GLASS — "Call Direct" button ── */
html.light-mode .btn-glass {
    background: rgba(0, 113, 227, 0.08) !important;
    background-image: none !important;
    border: 1.5px solid #0071e3 !important;
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
    backdrop-filter: none !important;
    padding: 0.8rem 1.7rem !important;
    /* Fix squished padding */
}

html.light-mode .btn-glass * {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .btn-glass:hover {
    background: #0071e3 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html.light-mode .btn-glass:hover * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Footer btn-glass keeps light style since footer is dark */
html.light-mode footer .btn-glass {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #f5f5f7 !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}

html.light-mode footer .btn-glass * {
    color: #f5f5f7 !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}

/* ── ABOUT EST BADGE — "2007 EST." on founder photo ── */
html.light-mode .about-est-badge {
    background: rgba(0, 113, 227, 0.9) !important;
    background-image: none !important;
    border: none !important;
}

html.light-mode .about-est-year {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html.light-mode .about-est-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ── ABOUT STAT PIXELS — inline #ec4899 override ── */
html.light-mode .about-stat-pixel,
html.light-mode .about-stat-pixel[style] {
    background: #0071e3 !important;
}

html.light-mode .about-stat-number {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .about-stat-number span {
    color: #6e6e73 !important;
    -webkit-text-fill-color: #6e6e73 !important;
}

/* ── TEAM SECTION — STRONG OVERLAY for text readability ── */
html.light-mode .about-team-photo {
    filter: none !important;
}

html.light-mode .about-team-overlay {
    background: linear-gradient(to right,
            #f5f5f7 0%,
            #f5f5f7 40%,
            rgba(245, 245, 247, 0.95) 55%,
            rgba(245, 245, 247, 0.75) 70%,
            rgba(245, 245, 247, 0.3) 90%,
            transparent 100%) !important;
}

html.light-mode .about-team-headline {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    text-shadow: 0 1px 4px rgba(245, 245, 247, 0.9),
        0 0 20px rgba(245, 245, 247, 0.8) !important;
}

html.light-mode .about-team-sub {
    color: #424245 !important;
    text-shadow: 0 1px 4px rgba(245, 245, 247, 0.9),
        0 0 20px rgba(245, 245, 247, 0.8) !important;
}

html.light-mode .about-team-tag {
    color: #0071e3 !important;
    text-shadow: none !important;
}

/* Add frosted white glass directly on text container */
html.light-mode .about-team-caption {
    background: rgba(245, 245, 247, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 1.8rem 2.2rem !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Team Est badge */
html.light-mode .team-est-badge,
html.light-mode [class*="team-est"],
html.light-mode .about-team-row .about-est-badge {
    background: rgba(0, 113, 227, 0.9) !important;
    background-image: none !important;
}

/* ── ABOUT SECTION STAT ROW (below founder) ── */
html.light-mode .about-stat-row .about-stat-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ── INLINE STYLE OVERRIDES for ALL colored dots/pixels ── */
html.light-mode [style*="background:#ec4899"],
html.light-mode [style*="background: #ec4899"] {
    background: #0071e3 !important;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.3) !important;
}

html.light-mode [style*="background:#06b6d4"],
html.light-mode [style*="background: #06b6d4"] {
    background: #0071e3 !important;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.3) !important;
}

html.light-mode [style*="background:#10b981"],
html.light-mode [style*="background: #10b981"] {
    background: #0071e3 !important;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.3) !important;
}

html.light-mode [style*="background:#f59e0b"],
html.light-mode [style*="background: #f59e0b"] {
    background: #0071e3 !important;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.3) !important;
}

html.light-mode [style*="background:#7c3aed"],
html.light-mode [style*="background: #7c3aed"] {
    background: #0071e3 !important;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.3) !important;
}

/* ── REVIEW AVATARS — override gradient backgrounds ── */
html.light-mode .review-avatar,
html.light-mode [class*="review-avatar"] {
    background: #0071e3 !important;
    background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════
   DAYTIME IMAGE SWAPS — replace night photos with day versions
   ═══════════════════════════════════════════════════════════ */

/* Service card images */
html.light-mode img[src="img/svc-remote.jpg"] {
    content: url('img/day/svc-remote.jpg') !important;
}

html.light-mode img[src="img/svc-health.jpg"] {
    content: url('img/day/svc-health.jpg') !important;
}

html.light-mode img[src="img/svc-backup.jpg"] {
    content: url('img/day/svc-backup.jpg') !important;
}

html.light-mode img[src="img/svc-network.jpg"] {
    content: url('img/day/svc-network.jpg') !important;
}

html.light-mode img[src="img/svc-hardware.jpg"] {
    content: url('img/day/svc-hardware.jpg') !important;
}

html.light-mode img[src="img/svc-concierge.jpg"] {
    content: url('img/day/svc-concierge.jpg') !important;
}

/* Pricing card images */
html.light-mode img[src="img/pricing-reserve.jpg"] {
    content: url('img/day/pricing-reserve.jpg') !important;
}

html.light-mode img[src="img/pricing-principal.jpg"] {
    content: url('img/day/pricing-principal.jpg') !important;
}

html.light-mode img[src="img/pricing-estate.jpg"] {
    content: url('img/day/pricing-estate.jpg') !important;
}

/* Founder photo */
html.light-mode img[src="img/about-founder.jpg"] {
    content: url('img/day/about-founder.jpg') !important;
}

/* Team photo */
/* Removed: content: url() breaks object-fit: cover and causes stretching.
   The wide-format about-team.jpg is already the correct light image. */

/* ═══════════════════════════════════════════════════════════
   SERVICE PAGE HERO BACKGROUNDS — swap to daytime
   ═══════════════════════════════════════════════════════════ */
html.light-mode .sv-hero-bg {
    filter: brightness(0.6) saturate(0.85) !important;
    opacity: 1 !important;
}

/* Each service page — override inline background url to daytime */
html.light-mode [style*="svc-remote"] .sv-hero-bg,
html.light-mode .sv-hero-bg[style*="svc-remote"] {
    background-image: url('img/day/svc-remote.jpg') !important;
}

html.light-mode [style*="svc-health"] .sv-hero-bg,
html.light-mode .sv-hero-bg[style*="svc-health"] {
    background-image: url('img/day/svc-health.jpg') !important;
}

html.light-mode [style*="svc-backup"] .sv-hero-bg,
html.light-mode .sv-hero-bg[style*="svc-backup"] {
    background-image: url('img/day/svc-backup.jpg') !important;
}

html.light-mode [style*="svc-network"] .sv-hero-bg,
html.light-mode .sv-hero-bg[style*="svc-network"] {
    background-image: url('img/day/svc-network.jpg') !important;
}

html.light-mode [style*="svc-hardware"] .sv-hero-bg,
html.light-mode .sv-hero-bg[style*="svc-hardware"] {
    background-image: url('img/day/svc-hardware.jpg') !important;
}

html.light-mode [style*="svc-concierge"] .sv-hero-bg,
html.light-mode .sv-hero-bg[style*="svc-concierge"] {
    background-image: url('img/day/svc-concierge.jpg') !important;
}

/* ═══════════════════════════════════════════════════════════
   APPLE LOGO — same pose as dark mode, lighter color filter
   ═══════════════════════════════════════════════════════════ */
html.light-mode .hero-apple,
html.light-mode img.hero-apple {
    filter: brightness(0.35) contrast(1.1) !important;
    opacity: 0.9;
    /* NO !important — JS needs to set opacity:0 when logos cycle */
}

/* ═══════════════════════════════════════════════════════════
   TIMELINE PAGE — full text contrast fix
   ═══════════════════════════════════════════════════════════ */
/* Hero kept dark with vivid color — graphic fully visible */
html.light-mode .tl-hero {
    background:
        radial-gradient(ellipse 55% 60% at 15% 55%, rgba(20, 184, 166, .55) 0%, transparent 65%),
        radial-gradient(ellipse 75% 85% at 50% 35%, rgba(124, 58, 237, .50) 0%, transparent 65%),
        radial-gradient(ellipse 55% 60% at 85% 55%, rgba(245, 158, 11, .45) 0%, transparent 65%),
        #06040f !important;
}

html.light-mode .tl-hero-graphic {
    filter:
        drop-shadow(0 0 30px rgba(20, 184, 166, 1)) drop-shadow(0 0 80px rgba(124, 58, 237, .9)) drop-shadow(0 0 160px rgba(245, 158, 11, .6)) brightness(1.35) saturate(1.4) !important;
    opacity: 1 !important;
}

html.light-mode .tl-hero-bloom {
    display: block !important;
    background:
        radial-gradient(ellipse 65% 85% at 18% 50%, rgba(20, 184, 166, .85) 0%, transparent 60%),
        radial-gradient(ellipse 85% 100% at 50% 50%, rgba(124, 58, 237, .75) 0%, transparent 65%),
        radial-gradient(ellipse 65% 85% at 82% 50%, rgba(245, 158, 11, .70) 0%, transparent 60%) !important;
    filter: blur(24px) !important;
    opacity: 1 !important;
    inset: -25% -12% !important;
}

/* Timeline category filter pills */
html.light-mode .tl-cat-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #6e6e73 !important;
}

html.light-mode .tl-cat-btn.active {
    background: #0071e3 !important;
    border-color: #0071e3 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN PAGES — full text contrast fix
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-hero {
    background: #101010 !important;
}

html.light-mode .plan-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .plan-hero-sub {
    color: rgba(255, 255, 255, 0.72) !important;
}

html.light-mode .plan-hero-price {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .plan-hero-price span {
    color: rgba(255, 255, 255, 0.6) !important;
}

html.light-mode .plan-usp-text h3 {
    color: #1d1d1f !important;
}

html.light-mode .plan-usp-text p {
    color: #424245 !important;
}

html.light-mode .plan-section-title {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .plan-section-sub {
    color: #6e6e73 !important;
}

html.light-mode .plan-feature-item {
    color: #424245 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .plan-feature-item strong {
    color: #1d1d1f !important;
}

html.light-mode .plan-intro-section {
    background: #dbeafe !important;
}

/* plan-hero-gradient dark overlay preserved — see inline style block in each plan-*.html */


/* ═══════════════════════════════════════════════════════════
   CERT MODAL — macOS Finder-style redesign
   ═══════════════════════════════════════════════════════════ */

/* Backdrop */
html.light-mode .cert-modal-backdrop {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal window — Finder-style */
html.light-mode .cert-modal {
    background: #f6f6f6 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
        0 0 0 0.5px rgba(0, 0, 0, 0.12) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Finder toolbar */
html.light-mode .cert-modal-header {
    background: linear-gradient(to bottom, #e8e6e8, #d4d2d4) !important;
    border-bottom: 1px solid #b6b6b6 !important;
    padding: 14px 20px !important;
    margin-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    position: relative !important;
}

/* Traffic light dots — removed, using standard close button instead */
html.light-mode .cert-modal-header::before {
    display: none !important;
}

html.light-mode .cert-modal-title {
    color: #4a4a4a !important;
    -webkit-text-fill-color: #4a4a4a !important;
    background: none !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

html.light-mode .cert-modal-subtitle {
    color: #8e8e93 !important;
    font-size: 0.72rem !important;
}

/* Close button — light themed X */
html.light-mode .cert-modal-close {
    display: flex !important;
    position: absolute !important;
    top: 1.2rem !important;
    right: 1.2rem !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    background: rgba(0, 0, 0, .06) !important;
    color: rgba(0, 0, 0, .45) !important;
    font-size: 1.1rem !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all .2s !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    line-height: 1 !important;
}

html.light-mode .cert-modal-close:hover {
    background: rgba(0, 0, 0, .12) !important;
    color: #333 !important;
}

/* Header pill badge */
html.light-mode .cert-modal-header .pill {
    background: #0071e3 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: none !important;
}

/* Content area */
html.light-mode .cert-modal-cta {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    margin: 16px 20px !important;
    width: calc(100% - 40px) !important;
    font-size: 0.82rem !important;
    padding: 10px !important;
}

html.light-mode .cert-modal-cta:hover {
    background: #0077ED !important;
}

/* Section blocks — no boxes, flowing */
html.light-mode .cert-modal-block {
    padding: 0 20px !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.light-mode .cert-modal-block h4 {
    color: #8e8e93 !important;
    -webkit-text-fill-color: #8e8e93 !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .cert-modal-block p {
    color: #3c3c43 !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

html.light-mode .cert-modal-block li {
    color: #3c3c43 !important;
}

/* Skill tags — Finder label style */
html.light-mode .cert-skill-tag {
    background: #e8e8ed !important;
    border: none !important;
    color: #3c3c43 !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
}

/* Can-do list arrows */
html.light-mode .cert-can-do li {
    color: #3c3c43 !important;
    font-size: 0.82rem !important;
}

html.light-mode .cert-can-do li::before {
    color: #0071e3 !important;
}

/* Bottom padding */
html.light-mode .cert-modal-block:last-child {
    padding-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   CERTIFICATIONS PAGE — full text contrast
   ═══════════════════════════════════════════════════════════ */
html.light-mode .cert-page-hero {
    background: #e8f0fc !important;
}

html.light-mode .cert-page-hero::before {
    display: none !important;
}

html.light-mode .cert-page-hero h1 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .cert-page-hero>p {
    color: #6e6e73 !important;
}

html.light-mode .cert-count {
    color: #0071e3 !important;
}

html.light-mode .cert-back {
    color: #0071e3 !important;
}

html.light-mode .cert-filter-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #6e6e73 !important;
}

html.light-mode .cert-filter-btn.active {
    background: #0071e3 !important;
    border-color: #0071e3 !important;
    color: #fff !important;
}

html.light-mode .cert-row-page {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .cert-name {
    color: #1d1d1f !important;
}

html.light-mode .cert-desc {
    color: #6e6e73 !important;
}

html.light-mode .cert-expand-hint {
    color: #0071e3 !important;
}

html.light-mode .certs-footer {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .certs-footer p {
    color: #6e6e73 !important;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE PAGES — full text contrast
   ═══════════════════════════════════════════════════════════ */
html.light-mode .sv-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .sv-hero-sub {
    color: rgba(255, 255, 255, 0.72) !important;
}

html.light-mode .sv-section-title {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .sv-section-sub {
    color: #6e6e73 !important;
}

html.light-mode .sv-pain-title {
    color: #1d1d1f !important;
}

html.light-mode .sv-pain-desc {
    color: #424245 !important;
}

html.light-mode .sv-step-title {
    color: #1d1d1f !important;
}

html.light-mode .sv-step-desc {
    color: #424245 !important;
}

html.light-mode .sv-layer-title {
    color: #1d1d1f !important;
}

html.light-mode .sv-layer-desc {
    color: #424245 !important;
}

html.light-mode .sv-stat-num {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

html.light-mode .sv-stat-label {
    color: #6e6e73 !important;
}

html.light-mode .sv-sibling-name {
    color: #1d1d1f !important;
}

html.light-mode .sv-sibling-desc {
    color: #6e6e73 !important;
}

/* ═══════════════════════════════════════════════════════════
   CERT MODAL — remove ALL grey boxes everywhere
   ═══════════════════════════════════════════════════════════ */
html.light-mode .cert-skill-tags {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html.light-mode .cert-modal-block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Kill ALL grey backgrounds inside the modal */
html.light-mode .cert-modal div,
html.light-mode .cert-modal span:not(.pill):not(.cert-pill),
html.light-mode .cert-modal-subtitle {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   CTA "READY TO START" SECTION — full light mode fix
   ═══════════════════════════════════════════════════════════ */
html.light-mode .cta,
html.light-mode section.cta {
    background: transparent !important;
    position: relative;
}

/* Show the cityscape image at full strength */
html.light-mode .cta-bg {
    opacity: 1 !important;
}

html.light-mode .cta-bg img {
    filter: saturate(0.75) brightness(0.55) !important;
}

/* Gradient overlay: dark at edges, semi-transparent in center so image shows */
html.light-mode .cta-gradient {
    background: linear-gradient(to bottom,
            rgba(15, 20, 40, 0.72) 0%,
            rgba(15, 20, 40, 0.45) 40%,
            rgba(15, 20, 40, 0.55) 100%) !important;
}

/* Text must be white over the dark overlay */
html.light-mode .cta-pill,
html.light-mode .cta [class*="pill"] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

html.light-mode .cta-title,
html.light-mode .cta h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .cta-title .gradient-text-rainbow,
html.light-mode .cta .gradient-text-rainbow {
    color: #60c8ff !important;
    -webkit-text-fill-color: #60c8ff !important;
    background: none !important;
}

html.light-mode .cta-content p,
html.light-mode .cta p {
    color: rgba(255, 255, 255, 0.75) !important;
}

html.light-mode .cta-actions .btn-gradient,
html.light-mode .cta .btn-gradient {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
}

html.light-mode .cta-actions .btn-glass,
html.light-mode .cta .btn-glass {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — full light mode fix
   ═══════════════════════════════════════════════════════════ */
html.light-mode .footer,
html.light-mode footer {
    background: #dbeafe !important;
}

html.light-mode .footer-brand p,
html.light-mode .footer p {
    color: #6e6e73 !important;
}

html.light-mode .footer h3,
html.light-mode .footer h4 {
    color: #1d1d1f !important;
}

html.light-mode .footer a {
    color: #0071e3 !important;
}

html.light-mode .footer-bottom {
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #86868b !important;
}

html.light-mode .footer-bottom a {
    color: #0071e3 !important;
}

html.light-mode .footer-bottom span {
    color: #86868b !important;
}

/* Form inputs */
html.light-mode .footer input,
html.light-mode .footer textarea {
    background: #e8f0fc !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1d1d1f !important;
}

html.light-mode .footer input::placeholder,
html.light-mode .footer textarea::placeholder {
    color: #86868b !important;
}

html.light-mode .footer .btn-gradient,
html.light-mode .footer button[type="submit"] {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
}

/* Social icons */
html.light-mode .footer-social a,
html.light-mode .social-link {
    background: rgba(0, 113, 227, 0.08) !important;
    color: #0071e3 !important;
    border: 1px solid rgba(0, 113, 227, 0.15) !important;
}

/* Footer logo */
html.light-mode .footer-logo img {
    filter: brightness(0) !important;
    opacity: 0.7 !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN USP CARDS — white text on blue background
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-usp-card {
    background: #0071e3 !important;
    border: none !important;
}

html.light-mode .plan-usp-card h4 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html.light-mode .plan-usp-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

html.light-mode .plan-usp-card:hover {
    background: #0077ED !important;
}

html.light-mode .plan-usp-icon {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

html.light-mode .plan-usp-label {
    color: #0071e3 !important;
}

html.light-mode .plan-usp-quote {
    color: #6e6e73 !important;
}

html.light-mode .plan-features-title {
    color: #1d1d1f !important;
}

html.light-mode .plan-feature-item h4 {
    color: #1d1d1f !important;
}

html.light-mode .plan-feature-item p {
    color: #424245 !important;
}

/* ═══════════════════════════════════════════════════════════
   NUCLEAR CONTRAST SWEEP — catch ALL remaining faded text
   ═══════════════════════════════════════════════════════════ */

/* Force ALL white/faded text to dark on light backgrounds */
html.light-mode section:not(.cta) h1,
html.light-mode section:not(.cta) h2,
html.light-mode section:not(.cta) h3 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Service page card text */
html.light-mode .sv-card h3,
html.light-mode .sv-card-title {
    color: #1d1d1f !important;
}

html.light-mode .sv-card p,
html.light-mode .sv-card-desc {
    color: #424245 !important;
}

/* Any remaining section descriptions */
html.light-mode [class*="-desc"],
html.light-mode [class*="-sub"],
html.light-mode [class*="-caption"] p {
    color: #424245 !important;
}

/* Override any inline rgba white text styles on plan pages */
html.light-mode .plan-usp-card h4,
html.light-mode .plan-usp-card p,
html.light-mode .plan-usp-card span {
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE PAGES — PHOTO-REALISTIC STEP CARDS
   ═══════════════════════════════════════════════════════════ */

/* Process section – clean container */
html.light-mode .sv-process {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    gap: 1rem !important;
}

/* Step cards – blue-tinted frosted glass card layout */
html.light-mode .sv-step {
    background-color: rgba(235, 245, 255, 0.92) !important;
    background-image: linear-gradient(180deg, rgba(219, 234, 254, 0.5) 0%, rgba(235, 245, 255, 0.95) 30%, rgba(240, 248, 255, 1) 100%) !important;
    border-radius: 20px !important;
    padding: 160px 24px 24px 24px !important;
    box-shadow: 0 4px 24px rgba(59, 130, 246, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(147, 197, 253, 0.35) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

/* The top image area */
html.light-mode .sv-step::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 155px !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0 !important;
    background-color: #e8f0fc !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%) !important;
}

html.light-mode .sv-step>* {
    position: relative !important;
    z-index: 1 !important;
}

html.light-mode .sv-step:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(0, 113, 227, 0.12) !important;
}

/* Hide emoji icons completely */
html.light-mode .sv-step-num {
    display: none !important;
}

html.light-mode .sv-step-title {
    color: #1d1d1f !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-bottom: 14px !important;
    margin-top: 0 !important;
    position: relative !important;
    display: block !important;
    border-bottom: none !important;
    text-decoration: none !important;
    padding-bottom: 10px !important;
}

/* Light blue gradient underline — uniform width across all cards */
html.light-mode .sv-step-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 48px !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #60a5fa, #3b82f6, #93c5fd) !important;
    border-radius: 2px !important;
    opacity: 0.7 !important;
}

/* Remove any stray dark bottom lines / borders from step cards */
html.light-mode .sv-step {
    border-bottom: none !important;
    box-shadow: 0 4px 24px rgba(59, 130, 246, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .sv-process {
    border-bottom: none !important;
    border: none !important;
}

html.light-mode .sv-step-body {
    color: #424245 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

/* ══ HEALTH PAGE — per-card photos (light mode two-layer) ══ */
html.light-mode [data-svc="health"] .sv-step:nth-child(1) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #e8f5f2 155px),
        url('images/steps/day/health-1.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="health"] .sv-step:nth-child(2) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #e6f0f0 155px),
        url('images/steps/day/health-2.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="health"] .sv-step:nth-child(3) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eef0f8 155px),
        url('images/steps/day/health-3.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="health"] .sv-step:nth-child(4) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f5f2ea 155px),
        url('images/steps/day/health-4.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

/* ══ HARDWARE PAGE — per-card photos ══ */
html.light-mode [data-svc="hardware"] .sv-step:nth-child(1) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eaf3ec 155px),
        url('images/steps/day/hardware-1.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="hardware"] .sv-step:nth-child(2) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eef2ff 155px),
        url('images/steps/day/hardware-2.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="hardware"] .sv-step:nth-child(3) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f0eef8 155px),
        url('images/steps/day/hardware-3.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="hardware"] .sv-step:nth-child(4) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f5f0e8 155px),
        url('images/steps/day/hardware-4.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

/* ══ BACKUP PAGE — per-card photos (light mode two-layer) ══ */
html.light-mode [data-svc="backup"] .sv-step:nth-child(1) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eef2fc 155px),
        url('images/steps/light/backup-1.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="backup"] .sv-step:nth-child(2) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #e8eeff 155px),
        url('images/steps/light/backup-2.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="backup"] .sv-step:nth-child(3) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eaf2ec 155px),
        url('images/steps/light/backup-3.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="backup"] .sv-step:nth-child(4) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eef0f8 155px),
        url('images/steps/light/backup-4.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

/* ══ NETWORK PAGE — per-card photos ══ */
html.light-mode [data-svc="network"] .sv-step:nth-child(1) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #e8f0fa 155px),
        url('images/steps/day/network-1.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="network"] .sv-step:nth-child(2) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #e5eef8 155px),
        url('images/steps/day/network-2.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="network"] .sv-step:nth-child(3) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eaf2f8 155px),
        url('images/steps/day/network-3.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="network"] .sv-step:nth-child(4) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eaf0ff 155px),
        url('images/steps/day/network-4.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

/* ══ REMOTE PAGE — per-card photos ══ */
html.light-mode [data-svc="remote"] .sv-step:nth-child(1) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #eeeeff 155px),
        url('images/steps/day/remote-1.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="remote"] .sv-step:nth-child(2) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #e8eeff 155px),
        url('images/steps/day/remote-2.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="remote"] .sv-step:nth-child(3) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #ecf0ff 155px),
        url('images/steps/day/remote-3.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="remote"] .sv-step:nth-child(4) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f0eeff 155px),
        url('images/steps/day/remote-4.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

/* ══ CONCIERGE PAGE — per-card photos ══ */
html.light-mode [data-svc="concierge"] .sv-step:nth-child(1) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f5f0ea 155px),
        url('images/steps/day/concierge-1.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="concierge"] .sv-step:nth-child(2) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f2eeea 155px),
        url('images/steps/day/concierge-2.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="concierge"] .sv-step:nth-child(3) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f0eef5 155px),
        url('images/steps/day/concierge-3.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

html.light-mode [data-svc="concierge"] .sv-step:nth-child(4) {
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 100px, #f5eee8 155px),
        url('images/steps/day/concierge-4.jpg') !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
}

/* Process connector line — hidden in light mode */
html.light-mode .sv-process::before {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ALL BLUE BUTTONS — WHITE TEXT, NO BLUE-ON-BLUE
   ═══════════════════════════════════════════════════════════ */

/* Service page primary CTA button */
html.light-mode .sv-btn-p,
html.light-mode a.sv-btn-p {
    background: #0071e3 !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
}

html.light-mode .sv-btn-p:hover {
    background: #0077ED !important;
}

/* Service page ghost/outline button */
html.light-mode .sv-btn-g,
html.light-mode a.sv-btn-g {
    background: transparent !important;
    border: 1.5px solid #0071e3 !important;
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

/* Service final CTA section */
html.light-mode .sv-final-cta {
    background: #e8f0fc !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-final-cta h3 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .sv-final-cta p {
    color: #6e6e73 !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN PROOF CARDS IN SERVICE PAGES
   ═══════════════════════════════════════════════════════════ */

html.light-mode .sv-plan-proof-card {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .sv-plan-proof-card:hover {
    border-color: rgba(0, 113, 227, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.08) !important;
}

html.light-mode .sv-plan-proof-card.sv-plan-featured {
    border-color: #0071e3 !important;
    background: rgba(0, 113, 227, 0.02) !important;
}

html.light-mode .sv-plan-name {
    color: #1d1d1f !important;
}

html.light-mode .sv-plan-price-line {
    color: #86868b !important;
}

html.light-mode .sv-plan-proof-feats li {
    color: #424245 !important;
    border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .sv-plan-proof-feats li::before {
    color: #34c759 !important;
}

/* Plan badges — override inline colors */
html.light-mode .sv-plan-badge {
    background: #0071e3 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   STAT CARDS IN SERVICE PAGES
   ═══════════════════════════════════════════════════════════ */

html.light-mode .sv-stat {
    background: #dbeafe !important;
}

html.light-mode .sv-stat:hover {
    background: rgba(0, 113, 227, 0.02) !important;
}

html.light-mode .sv-stat-num {
    background: linear-gradient(135deg, #0071e3, #007AFF) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.light-mode .sv-stat-label {
    color: #424245 !important;
}

html.light-mode .sv-stat-source {
    color: #86868b !important;
}

html.light-mode .sv-stat-bar {
    background: linear-gradient(to right, transparent, rgba(0, 113, 227, 0.2), transparent) !important;
}

html.light-mode .sv-stats {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════
   BEFORE/AFTER GRID IN SERVICE PAGES
   ═══════════════════════════════════════════════════════════ */

html.light-mode .sv-ba-grid {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .sv-ba-col.sv-ba-before {
    background: rgba(239, 68, 68, 0.03) !important;
}

html.light-mode .sv-ba-col.sv-ba-after {
    background: rgba(0, 113, 227, 0.03) !important;
}

html.light-mode .sv-ba-text {
    color: #424245 !important;
}

html.light-mode .sv-ba-heading {
    color: #1d1d1f !important;
}

/* ═══════════════════════════════════════════════════════════
   LAYER TAGS AND HEADINGS IN SERVICE PAGES
   ═══════════════════════════════════════════════════════════ */

html.light-mode .sv-layer {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-layer-tag {
    color: #0071e3 !important;
}

html.light-mode .sv-layer-tag::before {
    background: #0071e3 !important;
}

html.light-mode .sv-layer h2 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .sv-layer-lead {
    color: #6e6e73 !important;
}

/* Service page pill */
html.light-mode .sv-pill {
    background: rgba(0, 113, 227, 0.08) !important;
    border: 1px solid rgba(0, 113, 227, 0.2) !important;
    color: #0071e3 !important;
}

/* Service page hero text */
html.light-mode .sv-hero-sub {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Any button with blue bg — ensure WHITE text everywhere */
html.light-mode [class*="btn-gradient"],
html.light-mode [class*="btn-primary"],
html.light-mode .sv-btn-p,
html.light-mode .cert-modal-cta,
html.light-mode .sv-plan-badge {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Sibling nav */
html.light-mode .sv-sibling-nav {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .sv-sib {
    color: #0071e3 !important;
}

/* sv-back link */
html.light-mode .sv-back {
    color: #0071e3 !important;
}

/* ── About-Team Banner — Light Mode ── */
html.light-mode .about-team-photo {
    filter: brightness(1.05) saturate(1.0) !important;
    object-fit: cover !important;
    object-position: center 30% !important;
}

html.light-mode .about-team-overlay {
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 36%,
            rgba(255, 255, 255, 0.45) 60%,
            transparent 80%) !important;
    align-items: center !important;
}

html.light-mode .about-team-tag {
    color: #0071e3 !important;
}

html.light-mode .about-team-headline {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

html.light-mode .about-team-sub {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* ── Step card text: dark colors on light text area background ── */
html.light-mode [data-svc="backup"] .sv-step-title,
html.light-mode [data-svc="health"] .sv-step-title {
    color: #111 !important;
}

html.light-mode [data-svc="backup"] .sv-step-body,
html.light-mode [data-svc="health"] .sv-step-body {
    color: rgba(0, 0, 0, 0.65) !important;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — SUBTLE FLOATING BLOB BACKGROUND ANIMATION
   Mirror of dark mode mesh blobs, but ultra-soft pastel tones
   ═══════════════════════════════════════════════════════════ */

html.light-mode .mesh-container {
    display: block !important;
}

html.light-mode .blob-1 {
    background: rgba(0, 113, 227, 0.12) !important;
    opacity: 0.5 !important;
    filter: blur(140px) !important;
}

html.light-mode .blob-2 {
    background: rgba(100, 60, 200, 0.08) !important;
    opacity: 0.4 !important;
    filter: blur(150px) !important;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — STAT CARDS & ABOUT STATS CONTRAST FIX
   These were near-invisible (white text on white bg) — asked MANY times
   ═══════════════════════════════════════════════════════════ */

/* About section mini-stats: "18yr In Practice", "500+ Clients Retained" */
html.light-mode .about-stat-number {
    color: #1d1d1f !important;
}

html.light-mode .about-stat-number span {
    color: rgba(0, 0, 0, 0.5) !important;
}

html.light-mode .about-stat-label {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Hero stat cards: "18+ Years", "500+ Clients", "99% Satisfaction", "15min Response" */
html.light-mode .stat-card {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .stat-num {
    color: #1d1d1f !important;
}

html.light-mode .stat-plus {
    color: #0071e3 !important;
}

html.light-mode .stat-label {
    color: rgba(0, 0, 0, 0.55) !important;
}

/* ── ALL PILLS — dark+saturated backgrounds with white text for real contrast ── */
html.light-mode .pill-blue {
    background: #0055cc !important;
    color: #ffffff !important;
    border-color: #0055cc !important;
    text-shadow: none !important;
}

html.light-mode .pill-teal {
    background: #0d7a5f !important;
    color: #ffffff !important;
    border-color: #0d7a5f !important;
    text-shadow: none !important;
}

html.light-mode .pill-purple {
    background: #6d28d9 !important;
    color: #ffffff !important;
    border-color: #6d28d9 !important;
    text-shadow: none !important;
}

html.light-mode .pill-orange {
    background: #c2410c !important;
    color: #ffffff !important;
    border-color: #c2410c !important;
    text-shadow: none !important;
}

html.light-mode .pill-pink {
    background: #be185d !important;
    color: #ffffff !important;
    border-color: #be185d !important;
    text-shadow: none !important;
}

html.light-mode .pill-green {
    background: #15803d !important;
    color: #ffffff !important;
    border-color: #15803d !important;
    text-shadow: none !important;
}

/* Cert page row text */
html.light-mode .cert-name {
    color: #1d1d1f !important;
}

html.light-mode .cert-desc {
    color: rgba(0, 0, 0, 0.55) !important;
}

html.light-mode .cert-expand-hint {
    color: #0071e3 !important;
}

html.light-mode .cert-row-page:hover {
    background: rgba(0, 113, 227, 0.04) !important;
}

/* Section tags (the small pill labels like "OUR SERVICES") */
html.light-mode .section-tag {
    color: #0071e3 !important;
    background: rgba(0, 113, 227, 0.08) !important;
    border-color: rgba(0, 113, 227, 0.2) !important;
}

html.light-mode .tag-dot {
    background: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — CERT MODAL FIXES
   The modal pill badge was showing pale/grey — needed explicit override
   ═══════════════════════════════════════════════════════════ */

/* Modal backdrop — light, soft overlay instead of near-black */
html.light-mode .cert-modal-backdrop {
    background: rgba(200, 210, 240, 0.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Modal card — white background, crisp shadow */
html.light-mode .cert-modal {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
}

/* Modal close button */
html.light-mode .cert-modal-close {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

html.light-mode .cert-modal-close:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #1d1d1f !important;
}

/* Header bottom line */
html.light-mode .cert-modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Modal title and subtitle */
html.light-mode .cert-modal-title {
    color: #1d1d1f !important;
}

html.light-mode .cert-modal-subtitle {
    color: rgba(0, 0, 0, 0.45) !important;
}

/* Section headings inside modal (WHAT THIS MEANS FOR YOU, etc.) */
html.light-mode .cert-modal-block h4 {
    color: #0055cc !important;
}

/* Body text inside modal */
html.light-mode .cert-modal-block p {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Skill tags */
html.light-mode .cert-skill-tag {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Can-do list items */
html.light-mode .cert-can-do li {
    color: rgba(0, 0, 0, 0.65) !important;
}

html.light-mode .cert-can-do li::before {
    color: #0055cc !important;
}

/* CTA button inside modal */
html.light-mode .cert-modal-cta {
    background: linear-gradient(135deg, #0055cc, #6d28d9) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

html.light-mode .cert-modal-cta:hover {
    opacity: 0.88 !important;
    color: #ffffff !important;
}

/* ── The pill IN the modal header — most important fix ── */
/* These need extremely high specificity to beat the modal's own styles */
html.light-mode #modalPill.pill-teal,
html.light-mode .cert-modal .pill-teal {
    background: #0d7a5f !important;
    color: #ffffff !important;
    border-color: #0d7a5f !important;
}

html.light-mode #modalPill.pill-blue,
html.light-mode .cert-modal .pill-blue {
    background: #0055cc !important;
    color: #ffffff !important;
    border-color: #0055cc !important;
}

html.light-mode #modalPill.pill-purple,
html.light-mode .cert-modal .pill-purple {
    background: #6d28d9 !important;
    color: #ffffff !important;
    border-color: #6d28d9 !important;
}

html.light-mode #modalPill.pill-orange,
html.light-mode .cert-modal .pill-orange {
    background: #c2410c !important;
    color: #ffffff !important;
    border-color: #c2410c !important;
}

html.light-mode #modalPill.pill-pink,
html.light-mode .cert-modal .pill-pink {
    background: #be185d !important;
    color: #ffffff !important;
    border-color: #be185d !important;
}

html.light-mode #modalPill.pill-green,
html.light-mode .cert-modal .pill-green {
    background: #15803d !important;
    color: #ffffff !important;
    border-color: #15803d !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO TEXT WHITE — maximum specificity, must be LAST in file
   Overrides all global h1/h2/p dark-color rules for hero sections
   ═══════════════════════════════════════════════════════════ */
html.light-mode .sv-hero h1,
html.light-mode .sv-hero h1 *,
html.light-mode .sv-hero-content h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .sv-hero-sub,
html.light-mode .sv-hero .sv-hero-sub {
    color: rgba(255, 255, 255, 0.75) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}

html.light-mode .sv-back,
html.light-mode .sv-hero .sv-back {
    color: rgba(255, 255, 255, 0.5) !important;
}

html.light-mode .plan-hero h1,
html.light-mode .plan-hero h1 *,
html.light-mode .plan-hero-content h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .plan-hero-price,
html.light-mode .plan-hero-content .plan-hero-price {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

html.light-mode .plan-hero-price strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .plan-hero-price span {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

html.light-mode .plan-back,
html.light-mode .plan-hero .plan-back {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

html.light-mode .plan-hero-sub,
html.light-mode .plan-hero-content .plan-hero-sub {
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN USP QUOTE — dark readable text in light mode
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-usp-quote {
    color: #1d1d1f !important;
    border-left-color: rgba(139, 92, 246, 0.4) !important;
    background: rgba(139, 92, 246, 0.06) !important;
    padding: .8rem 1.2rem !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN USP CARDS — ensure dark text on light mode
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-usp-card h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .plan-usp-card p {
    color: rgba(255, 255, 255, 0.85) !important;
}

html.light-mode .plan-usp-label {
    color: #6e6e73 !important;
}

/* ═══════════════════════════════════════════════════════════
   STORY PAGE — light mode text contrast
   ═══════════════════════════════════════════════════════════ */
html.light-mode .story-chapter-title {
    color: #1d1d1f !important;
}

html.light-mode .story-chapter-text {
    color: #3d3d3f !important;
}

html.light-mode .story-quote p {
    color: #1d1d1f !important;
}

html.light-mode .story-year-label {
    color: #0071e3 !important;
}

html.light-mode .story-hero-sub {
    color: #6e6e73 !important;
    -webkit-text-fill-color: #6e6e73 !important;
}

html.light-mode .story-cta-heading {
    color: #1d1d1f !important;
}

html.light-mode .story-cta-section {
    background: #e8f0fc !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}


/* ═══════════════════════════════════════════════════════════
   GRADIENT BACKGROUND — replace flat whites site-wide
   ═══════════════════════════════════════════════════════════ */
html.light-mode body {
    background: linear-gradient(160deg, #e8edf7 0%, #eef2fb 40%, #eff3ff 100%) fixed !important;
}

/* Page-level containers — transparent so gradient shows */
html.light-mode .sv-body,
html.light-mode .sv-layer,
html.light-mode .plan-body,
html.light-mode .plan-intro-section,
html.light-mode .plan-usp,
html.light-mode .plan-cta,
html.light-mode section:not(.sv-hero):not(.plan-hero):not(.cta):not([class*="modal"]),
html.light-mode main {
    background: transparent !important;
    background-color: transparent !important;
}

/* Story page backgrounds */
html.light-mode .story-main,
html.light-mode .story-chapter,
html.light-mode .story-body {
    background: transparent !important;
}

html.light-mode .story-quote {
    background: rgba(99, 102, 241, 0.06) !important;
    border-left-color: rgba(99, 102, 241, 0.4) !important;
}

html.light-mode .story-cta-section {
    background: rgba(232, 237, 247, 0.7) !important;
    border-top: 1px solid rgba(99, 102, 241, 0.12) !important;
}

/* Cards keep subtle white so they stand out from gradient */
html.light-mode .sv-plan-proof-card,
html.light-mode .sv-stat,
html.light-mode .sv-final-cta,
html.light-mode .plan-feature-card,
html.light-mode .card {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN NAV BADGES — readable in light mode
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-nav-badge {
    background: rgba(0, 0, 0, 0.07) !important;
    color: #3d3d3f !important;
}

html.light-mode .plan-nav-current .plan-nav-badge {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #4338ca !important;
}

html.light-mode .plan-nav-cta {
    color: #0071e3 !important;
}

html.light-mode .plan-nav-current .plan-nav-cta::before {
    color: #6e6e73 !important;
}

/* ═══════════════════════════════════════════════════════════
   STORY CTA BUTTON — readable in light mode
   ═══════════════════════════════════════════════════════════ */
html.light-mode .story-cta-primary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, #ec4899, #a855f7) !important;
    opacity: 1 !important;
}

html.light-mode .story-cta-secondary {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════
   NAV THEME TOGGLE BUTTON — visible in both modes
   ═══════════════════════════════════════════════════════════ */
html.light-mode .theme-toggle {
    color: #1d1d1f !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE PAGE LAYER TAGS — readable in light mode
   ═══════════════════════════════════════════════════════════ */
html.light-mode .sv-layer-tag {
    color: #0071e3 !important;
    opacity: 1 !important;
}

html.light-mode .sv-layer-tag::before {
    background: #0071e3 !important;
}

html.light-mode .sv-ba-heading {
    color: #1d1d1f !important;
}

html.light-mode .sv-ba-text {
    color: #3d3d3f !important;
}

html.light-mode .sv-ba-dot {
    background: #6e6e73 !important;
}

html.light-mode .sv-stat-label {
    color: #3d3d3f !important;
}

html.light-mode .sv-stat-source {
    color: #6e6e73 !important;
}

html.light-mode .sv-layer-lead {
    color: #3d3d3f !important;
}

html.light-mode .sv-step-body {
    color: #3d3d3f !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN USP CARDS — white text on solid blue background  
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-usp-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

html.light-mode .plan-usp-card h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode .plan-usp-icon {
    color: #0071e3 !important;
}

html.light-mode .plan-usp-label {
    color: #0071e3 !important;
}

html.light-mode .plan-usp-quote {
    color: #0071e3 !important;
    border-left-color: rgba(0, 113, 227, 0.3) !important;
}

/* Plan intro text */
html.light-mode .plan-intro h2 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .plan-intro p {
    color: #424245 !important;
}

/* Plan feature items */
html.light-mode .plan-feature-item h4 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .plan-feature-item p {
    color: #424245 !important;
}

html.light-mode .plan-features-title {
    color: #0071e3 !important;
}

/* Compare table */
html.light-mode .compare-header {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #6e6e73 !important;
}

html.light-mode .compare-label {
    color: #1d1d1f !important;
}

html.light-mode .compare-this,
html.light-mode .check {
    color: #0071e3 !important;
}

html.light-mode .compare-other,
html.light-mode .dash {
    color: #86868b !important;
}

html.light-mode .compare-table {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .compare-row {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .plan-compare h3 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Plan CTA */
html.light-mode .plan-cta p {
    color: #6e6e73 !important;
}

html.light-mode .plan-cta h3 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

/* Plan body general */
html.light-mode .plan-body h2 {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}

html.light-mode .plan-body p {
    color: #424245 !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAN HERO OVERLAY — stronger gradient for day image
   so hero text is always readable in LIGHT mode too
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-hero-grad,
html.light-mode [class*="plan-hero"]>[class*="grad"],
html.light-mode .plan-hero::after {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.45) 50%,
            rgba(0, 0, 0, 0.75) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE HERO OVERLAY — stronger for light mode day image
   ═══════════════════════════════════════════════════════════ */
html.light-mode .sv-hero-grad {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.50) 55%,
            rgba(0, 0, 0, 0.82) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO H1 — ABSOLUTE OVERRIDE (must be last in file)
   Both dark and light mode: hero always has a dark overlay
   so h1/sub text must always be white regardless of mode.
   These beat the global "html.light-mode h1 { dark }" rule
   because they appear later in the cascade.
   ═══════════════════════════════════════════════════════════ */
html.light-mode .plan-hero h1,
html.light-mode .plan-hero .plan-hero-h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 1), 0 1px 10px rgba(0, 0, 0, 0.9) !important;
}

html.light-mode .plan-hero .plan-hero-sub,
html.light-mode .plan-hero .plan-price-line {
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
}

html.light-mode .sv-hero h1,
html.light-mode .sv-hero .sv-hero-h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 1), 0 1px 10px rgba(0, 0, 0, 0.9) !important;
}

html.light-mode .sv-hero .sv-hero-sub {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
}


/* ══ TIMELINE MODAL — clean white cert-card in light mode ══ */
html.light-mode .tl-modal-backdrop {
    background: rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

/* White card — same as cert-modal light */
html.light-mode .tl-modal {
    background: #dbeafe !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .18) !important;
    overflow: visible !important;
}

/* Header: clean, no toolbar chrome */
html.light-mode .tl-modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
    border-radius: 0 !important;
    padding: 1.8rem 2rem 1.4rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .3rem !important;
}

/* No traffic light dots */
html.light-mode .tl-modal-header::before {
    display: none !important;
}

/* Date: teal pill label like cert subtitle */
html.light-mode .tl-modal-dateline {
    font-size: .62rem !important;
    letter-spacing: .18em !important;
    color: #0071e3 !important;
    font-weight: 700 !important;
    display: block !important;
    text-transform: uppercase !important;
}

/* Title: dark large text */
html.light-mode .tl-modal-headline {
    display: block !important;
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    font-size: clamp(1.1rem, 2.5vw, 1.45rem) !important;
}

/* Byline: muted grey italic */
html.light-mode .tl-modal-byline {
    display: block !important;
    color: #6e6e73 !important;
    font-size: .74rem !important;
}

html.light-mode .tl-modal-byline strong {
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

/* Close button visible */
html.light-mode .tl-modal-close {
    display: flex !important;
    border-color: rgba(0, 0, 0, .12) !important;
    background: rgba(0, 0, 0, .04) !important;
    color: #86868b !important;
}

html.light-mode .tl-modal-close:hover {
    background: rgba(0, 0, 0, .08) !important;
    color: #1d1d1f !important;
}

/* Blue CTA exactly like cert page */
html.light-mode .tl-modal-cta {
    display: block !important;
    background: #0071e3 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    margin: 1rem 1.5rem !important;
    width: calc(100% - 3rem) !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: .75rem !important;
    box-sizing: border-box !important;
    letter-spacing: .01em !important;
}

html.light-mode .tl-modal-cta:hover {
    background: #0077ed !important;
}

/* White body area */
html.light-mode .tl-modal-inner {
    padding: 0 1.5rem 1.5rem !important;
    background: #dbeafe !important;
}

/* Section label — like "WHAT THIS MEANS FOR YOU" */
html.light-mode .tl-modal-section {
    color: #0071e3 !important;
    font-size: .58rem !important;
    letter-spacing: .14em !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #0071e3 !important;
}

/* Body text dark on white */
html.light-mode .tl-modal-body {
    color: #424245 !important;
    -webkit-text-fill-color: #424245 !important;
}

html.light-mode .tl-modal-body * {
    color: #424245 !important;
    -webkit-text-fill-color: #424245 !important;
}

html.light-mode .tl-modal-quiet {
    color: #6e6e73 !important;
    -webkit-text-fill-color: #6e6e73 !important;
    font-style: italic !important;
}

/* Tags: light blue like cert skill tags */
html.light-mode .tl-modal .dispatch-tag {
    background: rgba(0, 113, 227, .07) !important;
    color: #0071e3 !important;
    -webkit-text-fill-color: #0071e3 !important;
    border-color: rgba(0, 113, 227, .2) !important;
}

/* ══ SERVICE PAGE STEP CARDS — full brightness in light mode ══ */
html.light-mode [data-svc] .sv-step::before {
    filter: brightness(1.05) saturate(1.05) !important;
    background-color: transparent !important;
}

/* Step card hover — reinforce blue glow */
html.light-mode .sv-step:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIAL CARDS — blue-tinted glass in light mode
   ═══════════════════════════════════════════════════════════ */
html.light-mode .test-card {
    background-color: rgba(255, 255, 255, 0.70) !important;
    background-image: linear-gradient(145deg, rgba(219, 234, 254, 0.55) 0%, rgba(255, 255, 255, 0.90) 100%) !important;
    border: 1px solid rgba(147, 197, 253, 0.40) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

html.light-mode .test-card:hover {
    box-shadow: 0 12px 36px rgba(59, 130, 246, 0.14) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
}

html.light-mode .test-card p {
    color: #374151 !important;
}

html.light-mode .test-author strong {
    color: #1d1d1f !important;
}

html.light-mode .test-author span {
    color: #6b7280 !important;
}

html.light-mode .test-author {
    border-top-color: rgba(147, 197, 253, 0.3) !important;
}

/* Make blobs vivid but NOT overpowering */
html.light-mode .mesh-blob {
    opacity: 0.35 !important;
    filter: blur(110px) !important;
}

html.light-mode .blob-1 {
    background: #60a5fa !important;
    opacity: 0.35 !important;
    width: 700px !important;
    height: 700px !important;
}

html.light-mode .blob-2 {
    background: #818cf8 !important;
    opacity: 0.28 !important;
    width: 550px !important;
    height: 550px !important;
}

html.light-mode .blob-3 {
    background: #38bdf8 !important;
    opacity: 0.25 !important;
    width: 600px !important;
    height: 600px !important;
}

html.light-mode .blob-4 {
    background: #93c5fd !important;
    opacity: 0.30 !important;
    width: 450px !important;
    height: 450px !important;
}

/* Sections that can be transparent for blob show-through
   EXCLUDES: hero, sv-hero, plan-hero, contact/footer, pricing */
html.light-mode .about,
html.light-mode .services,
html.light-mode .testimonials,
html.light-mode .certs,
html.light-mode .stat-section,
html.light-mode .sv-body,
html.light-mode .sv-process,
html.light-mode .plan-body,
html.light-mode .plan-nav-section,
html.light-mode .about-section {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero keeps its own background — NOT transparent */
html.light-mode .hero,
html.light-mode .hero-inner,
html.light-mode .hero-content {
    background-color: rgba(245, 245, 247, 0.85) !important;
}

/* Pricing section needs subtle background so cards are readable */
html.light-mode .pricing {
    background: rgba(245, 245, 247, 0.6) !important;
}

/* Cards get translucent blue-tinted glass so blobs show through */
html.light-mode .card:not(.pricing-card):not(.stat-card),
html.light-mode [class*="-chip"]:not(.about-stat-chip),
html.light-mode [class*="-stat"]:not([class*="stat-num"]):not([class*="stat-label"]):not([class*="stat-source"]):not([class*="stat-bar"]):not([class*="stat-plus"]):not([class*="stat-number"]):not(.stat-card):not(.hero-stats):not(.about-stat-chip):not(.about-stats-row),
html.light-mode .test-card,
html.light-mode .sv-stat,
html.light-mode .sv-card,
html.light-mode .sv-pain-item,
html.light-mode .sv-layer-item {
    background-color: rgba(219, 234, 254, 0.60) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
    border-color: rgba(147, 197, 253, 0.40) !important;
}

/* About stat chips — clean white, no color bleed */
html.light-mode .about-stat-chip {
    background: rgba(255, 255, 255, 0.80) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

html.light-mode .about-stat-pixel {
    background: #0071e3 !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    opacity: 0.5 !important;
}

html.light-mode .about-stat-number {
    color: #1d1d1f !important;
}

html.light-mode .about-stat-number span {
    color: #0071e3 !important;
}

html.light-mode .about-stat-label {
    color: #6e6e73 !important;
}

/* Pricing cards — keep their own styling, don't nuke images */
html.light-mode .pricing-card {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Stat cards in hero — keep clean white, not washed blue */
html.light-mode .stat-card {
    background: rgba(255, 255, 255, 0.80) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

/* Plan feature items */
html.light-mode .plan-feature-item {
    background: rgba(219, 234, 254, 0.50) !important;
    border: 1px solid rgba(147, 197, 253, 0.30) !important;
}

/* ── RESTORE gradient text that wildcards above would nuke ── */
html.light-mode .sv-stat-num {
    background: linear-gradient(135deg, #0071e3, #007AFF) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(135deg, #0071e3, #007AFF) !important;
}

/* Stat card containers need their background back */
html.light-mode .sv-stats {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .sv-stat {
    background-color: rgba(219, 234, 254, 0.70) !important;
}

/* Restore gradient-text utility classes */
html.light-mode .gradient-text-blue,
html.light-mode .gradient-text-purple,
html.light-mode .gradient-text-pink,
html.light-mode .gradient-text-teal {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #0071e3 !important;
    color: #0071e3 !important;
}

/* Stat labels and sources */
html.light-mode .sv-stat-label {
    color: #424245 !important;
}

html.light-mode .sv-stat-source {
    color: #86868b !important;
}

html.light-mode .sv-stat-bar {
    background: linear-gradient(to right, transparent, rgba(0, 113, 227, 0.2), transparent) !important;
}

/* Fix pricing card links to behave like normal div containers */
a.price-card {
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
}

/* Ensure the CTA button inside the anchor tag retains its block-level formatting */
a.price-card .engage-now-btn {
    display: inline-flex;
    margin-top: auto;
}

/* Prevent default text highlighting when clicking on entire card */
a.price-card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Booking submit button — keep white text in light mode */
html.light-mode .booking-submit-btn {
    background: #000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html.light-mode .booking-submit-btn:hover {
    background: #222 !important;
}