/* =============================================
   ADVENNO SITE-WIDE FIXES — site-fixes.css
   ============================================= */

/* 1. HERO text visibility & alignment */
.hero-description,
.hero-description-enhanced {
    color: rgba(255, 255, 255, 0.85) !important;
}
.hero-title,
.hero-title-enhanced {
    color: rgba(255, 255, 255, 0.97) !important;
}
.hero-cta-enhanced {
    justify-content: center !important;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.trust-bar, .trust-bar-enhanced {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}
.trust-text {
    text-align: center !important;
    color: rgba(255,255,255,0.65) !important;
    width: 100%;
}

/* 2. Hero stats bright & centered */
.hero-stat-number,
.hero-stat-number.adv-counter {
    color: #22d3ee !important;
    text-shadow: 0 0 20px rgba(34,211,238,0.3);
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 700 !important;
}
.hero-stats-enhanced {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-top: 40px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 20px 8px !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.hero-stat-item {
    flex: 1 1 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
}
.hero-stat-label {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.5) !important;
    margin-top: 4px !important;
    text-align: center !important;
}
.hero-stat-separator {
    width: 1px !important;
    height: 40px !important;
    background: rgba(255,255,255,0.08) !important;
    align-self: center !important;
}
@media (max-width: 540px) {
    .hero-stat-separator { display: none !important; }
    .hero-stat-item { flex: 1 1 45% !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* 3. Tech stack badges — no word split */
.adv-tech-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center;
}
.adv-tech-badge {
    white-space: nowrap !important;
    padding: 8px 18px !important;
    font-size: 0.83rem !important;
    border-radius: 999px !important;
    background: rgba(34,211,238,0.06) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    color: rgba(255,255,255,0.7) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: background 0.2s, border-color 0.2s !important;
}
.adv-tech-badge:hover {
    background: rgba(34,211,238,0.12) !important;
    border-color: rgba(34,211,238,0.25) !important;
    color: rgba(255,255,255,0.9) !important;
}

/* 4. Impact charts — single column on mobile */
@media (max-width: 768px) {
    #impact-chart .grid.grid-2,
    #impact-chart .grid-2 { grid-template-columns: 1fr !important; }
}

/* 5. PROCESS STEPS — card-based redesign (step-number/step-content pattern) */
.process-timeline {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 20px !important;
    padding-left: 0 !important;
    margin-top: 40px;
}
/* Finance uses a grid-2 wrapper with two process-timeline children — keep each as a column */
.grid.grid-2 > .process-timeline,
.grid-2 > .process-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.process-step {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    padding: 28px 24px 24px !important;
    position: relative !important;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
    display: flex !important;
    flex-direction: column !important;
}
.process-step::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.process-step:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(34,211,238,0.22) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.28), 0 0 28px rgba(34,211,238,0.06) !important;
}
.process-step:hover::after { opacity: 1; }

/* step-number/step-content variant (service pages) */
.step-number {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--accent-cyan) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(139, 92, 246, 0.12)) !important;
    border: 1px solid rgba(34, 211, 238, 0.25) !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
}
.step-content h3 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: rgba(255,255,255,0.92) !important;
}
.step-content p {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
}

/* process-number/process-title/process-text variant (finance/solutions pages) */
.process-number {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--accent-cyan) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(139, 92, 246, 0.12)) !important;
    border: 1px solid rgba(34, 211, 238, 0.25) !important;
    border-radius: 12px !important;
}
.process-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: rgba(255,255,255,0.92) !important;
}
.process-text {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
}

/* 6. ENGAGEMENT MODELS — visual enhancement */
section#pricing .card,
#pricing .card {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}
section#pricing .card::before,
#pricing .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #22d3ee, #3b82f6, #8b5cf6) !important;
    opacity: 0.45 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}
section#pricing .card:hover,
#pricing .card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 36px rgba(34,211,238,0.08) !important;
    border-color: rgba(34,211,238,0.22) !important;
}
section#pricing .card:hover::before,
#pricing .card:hover::before { opacity: 1 !important; }
/* Popular card always glows */
section#pricing .card[style*="border-color:var(--accent-cyan)"]::before,
#pricing .card[style*="border-color:var(--accent-cyan)"]::before,
section#pricing .card[style*="border: 2px solid"]::before,
#pricing .card[style*="border: 2px solid"]::before {
    opacity: 1 !important;
    height: 4px !important;
}

/* 7. Engagement models — solution pages use .card inside #engagement or similar */
#engagement .card,
.engagement-section .card {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}
#engagement .card::before,
.engagement-section .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #22d3ee, #3b82f6, #8b5cf6) !important;
    opacity: 0.45 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}
#engagement .card:hover,
.engagement-section .card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 36px rgba(34,211,238,0.08) !important;
    border-color: rgba(34,211,238,0.22) !important;
}
#engagement .card:hover::before,
.engagement-section .card:hover::before { opacity: 1 !important; }

/* 8. Finance FAQ — button-based accordion */
.faq-accordion .faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.faq-accordion .faq-item button.faq-question {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 22px 0 !important;
    cursor: pointer !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    gap: 14px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    transition: color 0.2s ease !important;
}
.faq-accordion .faq-item button.faq-question:hover {
    color: #22d3ee !important;
}
.faq-accordion .faq-item button.faq-question i {
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.82rem !important;
}
.faq-accordion .faq-item.active button.faq-question {
    color: #22d3ee !important;
}
.faq-accordion .faq-item.active button.faq-question i {
    transform: rotate(180deg) !important;
    color: #22d3ee !important;
}
.faq-accordion .faq-item .faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease !important;
    padding-bottom: 0 !important;
}
.faq-accordion .faq-item.active .faq-answer {
    max-height: 800px !important;
    padding-bottom: 20px !important;
}
.faq-accordion .faq-item .faq-answer p {
    color: rgba(255,255,255,0.6) !important;
    line-height: 1.8 !important;
    font-size: 0.93rem !important;
    margin: 0 !important;
}

/* 9. Finance tech stack — consistent pill/card styling */
.fin-tech-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 40px !important;
}
.fin-tech-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    transition: border-color 0.3s ease, transform 0.3s ease !important;
}
.fin-tech-card:hover {
    border-color: rgba(34,211,238,0.2) !important;
    transform: translateY(-3px) !important;
}
.fin-tech-card h4 {
    font-size: 0.78rem !important;
    color: #22d3ee !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 14px !important;
    font-weight: 600 !important;
}
.fin-tech-card .tech-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.fin-tech-card .tech-tag {
    padding: 5px 13px !important;
    background: rgba(34,211,238,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    font-size: 0.79rem !important;
    color: rgba(255,255,255,0.65) !important;
    white-space: nowrap;
}

/* 10. tech-group/tech-grid/tech-item from old finance tech stack rendering */
.tech-group { margin-bottom: 32px !important; }
.tech-group h3 {
    font-size: 0.78rem !important;
    color: #22d3ee !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 14px !important;
    font-weight: 600 !important;
}
.tech-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.tech-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: rgba(34,211,238,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    color: rgba(255,255,255,0.7) !important;
    transition: background 0.2s, border-color 0.2s !important;
    white-space: nowrap !important;
}
.tech-item:hover {
    background: rgba(34,211,238,0.1) !important;
    border-color: rgba(34,211,238,0.22) !important;
    color: rgba(255,255,255,0.9) !important;
}
.tech-icon { color: #22d3ee; font-size: 0.9rem; }
.tech-name { font-weight: 500; }

/* 11. Problem cards — icon always visible */
.problem-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.problem-card > i,
.problem-card > div > i {
    font-size: 1.6rem !important;
    color: #22d3ee !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.problem-quote {
    color: rgba(255,255,255,0.78) !important;
    font-style: italic;
    line-height: 1.65 !important;
    font-size: 0.95rem !important;
}

/* 12. Case study images fill properly */
.hp-cs-icon-wrap { overflow: hidden !important; }
.hp-cs-icon-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* 13. Performance chart canvas visibility */
.card.card-glass { min-height: 200px; }
.card canvas, .card.card-glass canvas {
    display: block !important;
    max-width: 100% !important;
}
/* Ensure chart containers have minimum height so canvas renders */
.card canvas[id],
.card-glass canvas[id] {
    min-height: 240px;
}
/* Wrapper div pattern: position:relative + height for Chart.js maintainAspectRatio:false */
.card > div[style*="position:relative"] canvas,
.card-glass > div[style*="position:relative"] canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 14. Bright section labels and gradient text */
.section-label {
    color: #22d3ee !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}
.text-gradient {
    background: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 15. Progress bars smooth animation */
.adv-progress-bar {
    transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 99px !important;
}

/* 16. Section subtitle polish */
.section-subtitle {
    color: rgba(255,255,255,0.55) !important;
    font-size: 1rem !important;
    margin-top: 8px !important;
    line-height: 1.6 !important;
}

/* 17. MOBILE: single-column grids */
@media (max-width: 768px) {
    .grid.grid-2 { grid-template-columns: 1fr !important; }
    .process-timeline { grid-template-columns: 1fr !important; }
    section#pricing .grid.grid-3,
    #pricing .grid.grid-3,
    section#pricing .grid-3,
    #pricing .grid-3 { grid-template-columns: 1fr !important; }
    /* Charts: each in own row */
    #impact-chart .grid.grid-2 { grid-template-columns: 1fr !important; }
}

/* 18. Responsive: process steps on small screens */
@media (max-width: 640px) {
    .process-timeline {
        grid-template-columns: 1fr !important;
    }
    .grid.grid-2 > .process-timeline {
        flex-direction: column !important;
    }
}

/* 19. Fix any remaining unrealistic % text labels in spans */
/* (Values fixed in PHP files; this rule is a safeguard for any cached renders) */

/* 20. Hero stats counter — ensure visibility even before JS runs */
.hero-stat-number[data-counter]:empty::before {
    content: '0';
    color: #22d3ee;
}

/* 21. Process step hover glow on step-number */
.process-step:hover .step-number {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35) !important;
    transform: scale(1.05) !important;
    border-color: rgba(34, 211, 238, 0.4) !important;
}

/* 22. Process step connecting line (desktop only) */
@media (min-width: 1025px) {
    .process-timeline::before {
        content: '' !important;
        position: absolute !important;
        top: 48px !important;
        left: 40px !important;
        right: 40px !important;
        height: 2px !important;
        background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet), var(--accent-blue), var(--accent-cyan)) !important;
        opacity: 0.2 !important;
        z-index: 0 !important;
    }
}

/* 21. Empty chart/component container fallback */
/* When Chart.js or JS components fail to render, show a subtle loading placeholder */
canvas:not([width]):not([data-rendered]) {
    background: rgba(255,255,255,.02);
    border-radius: 12px;
}

/* Empty JS-rendered containers: hide if they remain empty after render */
div[id$="-visual"]:empty,
div[id$="-stack"]:empty,
div[id$="-grid"]:empty:not(.adv-tech-grid):not(.adv-metrics-grid) {
    min-height: 60px;
    background: rgba(255,255,255,.02);
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,.06);
}

/* Once rendered, remove placeholder styles */
div[id$="-visual"]:not(:empty),
div[id$="-stack"]:not(:empty),
div[id$="-grid"]:not(:empty) {
    background: none;
    border: none;
    min-height: auto;
}

/* =============================================
   22. MEGA MENU — desktop: background fix + shrink ~10%
   ============================================= */
@media (min-width: 992px) {
    /* Fix: background covers all columns/rows */
    .mega-menu {
        padding: 12px !important;
    }

    .mega-menu-inner {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        padding: 14px !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    /* Shrink heading */
    .mega-heading {
        font-size: 0.62rem !important;
        margin-bottom: 6px !important;
    }

    /* Shrink link items — reduce gap, padding, font sizes */
    .mega-links {
        gap: 1px !important;
    }

    .mega-links li a {
        font-size: 0.78rem !important;
        padding: 4px 6px !important;
        border-radius: 6px !important;
        gap: 6px !important;
    }

    .mega-icon {
        font-size: 0.82rem !important;
        min-width: 16px !important;
        width: 16px !important;
    }

    .mega-link-title {
        font-size: 0.72rem !important;
        margin-right: 5px !important;
    }

    .mega-link-desc {
        font-size: 0.62rem !important;
    }

    /* Shrink featured card & CTA */
    .mega-featured-card {
        padding-top: 10px !important;
    }

    .mega-featured-badge {
        padding: 3px 10px !important;
        font-size: 0.65rem !important;
        margin-bottom: 8px !important;
    }

    .mega-featured-card h4 {
        font-size: 0.82rem !important;
    }

    .mega-featured-card p {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
    }

    .mega-featured-link {
        font-size: 0.78rem !important;
    }

    .mega-cta {
        margin-top: 12px !important;
        padding: 10px 12px !important;
    }

    .mega-cta p {
        font-size: 0.78rem !important;
        margin-bottom: 8px !important;
    }

    /* View All link */
    .mega-view-all {
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

    .mega-view-all a {
        font-size: 0.78rem !important;
    }

    /* Prevent mega menu from overflowing viewport */
    .mega-menu {
        max-height: 85vh !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(34,211,238,.2) transparent;
    }

    .mega-menu::-webkit-scrollbar { width: 4px; }
    .mega-menu::-webkit-scrollbar-track { background: transparent; }
    .mega-menu::-webkit-scrollbar-thumb {
        background: rgba(34,211,238,.2);
        border-radius: 4px;
    }
}

/* Light theme mega menu background fix */
@media (min-width: 992px) {
    [data-theme="light"] .mega-menu-inner {
        background: rgba(0, 0, 0, 0.03) !important;
    }
}


/* =============================================
   LIGHT THEME OVERRIDES
   Fixes all hardcoded dark rgba(255,255,255,...)
   colors and dark backgrounds for light mode
   ============================================= */

/* -- Process Steps -- */
[data-theme="light"] .process-step {
    background: rgba(0, 0, 0, 0.025) !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
}
[data-theme="light"] .process-step:hover {
    border-color: rgba(9, 145, 178, 0.3) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.10), 0 0 28px rgba(9,145,178,0.08) !important;
}
[data-theme="light"] .step-content h3,
[data-theme="light"] .process-title {
    color: #0F172A !important;
}
[data-theme="light"] .step-content p,
[data-theme="light"] .process-text {
    color: #475569 !important;
}

/* -- Tech Badges & Tech Items -- */
[data-theme="light"] .adv-tech-badge {
    background: rgba(9, 145, 178, 0.07) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #334155 !important;
}
[data-theme="light"] .adv-tech-badge:hover {
    background: rgba(9, 145, 178, 0.14) !important;
    border-color: rgba(9, 145, 178, 0.35) !important;
    color: #0F172A !important;
}
[data-theme="light"] .tech-item {
    background: rgba(9, 145, 178, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #334155 !important;
}
[data-theme="light"] .tech-item:hover {
    background: rgba(9, 145, 178, 0.12) !important;
    border-color: rgba(9, 145, 178, 0.3) !important;
    color: #0F172A !important;
}

/* -- FAQ Accordion -- */
[data-theme="light"] .faq-accordion .faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .faq-accordion .faq-item button.faq-question {
    color: #1E293B !important;
}
[data-theme="light"] .faq-accordion .faq-item button.faq-question:hover {
    color: #0891B2 !important;
}
[data-theme="light"] .faq-accordion .faq-item.active button.faq-question {
    color: #0891B2 !important;
}
[data-theme="light"] .faq-accordion .faq-item button.faq-question i {
    color: #64748B !important;
}
[data-theme="light"] .faq-accordion .faq-item.active button.faq-question i {
    color: #0891B2 !important;
}
[data-theme="light"] .faq-accordion .faq-item .faq-answer p {
    color: #475569 !important;
}

/* -- Finance Tech Cards -- */
[data-theme="light"] .fin-tech-card {
    background: rgba(0, 0, 0, 0.025) !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
}
[data-theme="light"] .fin-tech-card:hover {
    border-color: rgba(9, 145, 178, 0.25) !important;
}
[data-theme="light"] .fin-tech-card .tech-tag {
    background: rgba(9, 145, 178, 0.07) !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #334155 !important;
}

/* -- Problem Cards -- */
[data-theme="light"] .problem-quote {
    color: #334155 !important;
}

/* -- Section Subtitle -- */
[data-theme="light"] .section-subtitle {
    color: #475569 !important;
}

/* -- Hero Stats Bar (inside hero which keeps dark bg, so leave white text) -- */
/* Only override stats bar when it appears outside the hero (e.g. about page) */
[data-theme="light"] .adv-stats-banner {
    background: linear-gradient(135deg, #F0F4FF, #F5F7FB) !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .adv-stats-banner::before {
    background: linear-gradient(90deg, transparent, rgba(9,145,178,0.04), transparent) !important;
}

/* -- Stats Banner trust badges -- */
[data-theme="light"] .adv-stats-banner .adv-tech-badge {
    background: rgba(255,255,255,0.8) !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
}

/* -- Comparison Columns -- */
[data-theme="light"] .adv-comparison-col--before {
    background: rgba(239, 68, 68, 0.04) !important;
}
[data-theme="light"] .adv-comparison-col--after {
    background: rgba(9, 145, 178, 0.04) !important;
}
[data-theme="light"] .adv-comparison-item {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .adv-comparison-metric-label {
    color: #475569 !important;
}

/* -- Table headers -- */
[data-theme="light"] .adv-table th {
    background: rgba(0,0,0,0.02) !important;
    color: #64748B !important;
}
[data-theme="light"] .adv-table td {
    color: #475569 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .adv-table tr:hover td {
    background: rgba(9,145,178,0.03) !important;
}

/* -- Callout boxes -- */
[data-theme="light"] .adv-callout--info {
    background: rgba(59, 130, 246, 0.05) !important;
}
[data-theme="light"] .adv-callout--success {
    background: rgba(9, 145, 178, 0.05) !important;
}
[data-theme="light"] .adv-callout--warning {
    background: rgba(245, 158, 11, 0.05) !important;
}
[data-theme="light"] .adv-callout--tip {
    background: rgba(124, 58, 237, 0.05) !important;
}
[data-theme="light"] .adv-callout-content {
    color: #475569 !important;
}

/* -- Timeline Steps -- */
[data-theme="light"] .adv-timeline-body {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .adv-timeline-body p {
    color: #475569 !important;
}
[data-theme="light"] .adv-timeline-step:hover .adv-timeline-body {
    border-color: rgba(9,145,178,0.3) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* -- Feature Cards -- */
[data-theme="light"] .adv-feature-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .adv-feature-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.10) !important;
    border-color: #CBD5E1 !important;
}
[data-theme="light"] .adv-feature-card p {
    color: #475569 !important;
}
[data-theme="light"] .adv-feature-card-icon {
    background: rgba(9,145,178,0.10) !important;
}
[data-theme="light"] .adv-feature-card:hover .adv-feature-card-icon {
    background: rgba(9,145,178,0.18) !important;
    box-shadow: 0 0 20px rgba(9,145,178,0.15) !important;
}

/* -- Hero stats strip (standalone, not inside dark hero) -- */
[data-theme="light"] .hero-stats-enhanced {
    background: rgba(0,0,0,0.03) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .hero-stat-label {
    color: #64748B !important;
}

/* -- Trust bar text -- */
[data-theme="light"] .trust-text {
    color: #64748B !important;
}

/* -- Section header description -- */
[data-theme="light"] .section-description {
    color: #475569 !important;
}

/* -- Pricing engagement cards in light mode -- */
[data-theme="light"] section#pricing .card:hover,
[data-theme="light"] #pricing .card:hover,
[data-theme="light"] #engagement .card:hover,
[data-theme="light"] .engagement-section .card:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 36px rgba(9,145,178,0.08) !important;
    border-color: rgba(9,145,178,0.25) !important;
}

/* -- Empty container fallback borders -- */
[data-theme="light"] div[id$="-visual"]:empty,
[data-theme="light"] div[id$="-stack"]:empty,
[data-theme="light"] div[id$="-grid"]:empty:not(.adv-tech-grid):not(.adv-metrics-grid) {
    background: rgba(0,0,0,0.02) !important;
    border: 1px dashed rgba(0,0,0,0.10) !important;
}

/* -- Canvas placeholder -- */
[data-theme="light"] canvas:not([width]):not([data-rendered]) {
    background: rgba(0,0,0,0.02) !important;
}

/* -- Back-to-top & scrollbar -- */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #F5F7FB !important;
}

/* -- Insight capsule (about page) -- */
[data-theme="light"] .insight-capsule {
    background: rgba(9, 145, 178, 0.05) !important;
}

/* -- Header light fix: ensure nav text is readable -- */
[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] .nav-link {
    color: #475569 !important;
}
[data-theme="light"] .nav-link:hover {
    color: #0F172A !important;
    background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .mega-menu {
    background: rgba(255,255,255,0.98) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .mega-menu-inner {
    background: rgba(0,0,0,0.02) !important;
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .mega-links li a {
    color: #475569 !important;
}
[data-theme="light"] .mega-links li a:hover {
    background: rgba(9,145,178,0.08) !important;
    color: #0F172A !important;
}
[data-theme="light"] .mega-link-title {
    color: #0F172A !important;
}
[data-theme="light"] .mega-link-desc {
    color: #64748B !important;
}
[data-theme="light"] .dropdown {
    background: rgba(255,255,255,0.98) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .dropdown li a {
    color: #475569 !important;
}
[data-theme="light"] .dropdown li a:hover {
    background: rgba(0,0,0,0.04) !important;
    color: #0F172A !important;
}

/* -- Mobile nav drawer in light mode -- */
[data-theme="light"] .main-nav {
    background: linear-gradient(160deg, #FFFFFF 0%, #F5F7FB 50%, #EEF2FF 100%) !important;
    border-left: 1px solid #E2E8F0 !important;
    box-shadow: -20px 0 60px rgba(0,0,0,0.10) !important;
}
[data-theme="light"] .main-nav::before {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(9,145,178,0.4) 25%,
        rgba(124,58,237,0.3) 65%,
        transparent 100%) !important;
}
[data-theme="light"] .nav-item.active > .nav-link {
    color: #0891B2 !important;
    background: rgba(9,145,178,0.06) !important;
}
[data-theme="light"] .nav-item.active {
    background: rgba(9,145,178,0.04) !important;
}

/* -- Footer in light mode -- */
[data-theme="light"] .footer-social a {
    background: #F5F7FB !important;
}

/* -- Text gradient stays visible in light mode -- */
[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, #0891B2 0%, #6366F1 50%, #7C3AED 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* -- Section label stays cyan (slightly darker for light bg) -- */
[data-theme="light"] .section-label {
    color: #0891B2 !important;
}

/* -- Card text in light -- */
[data-theme="light"] .card-text {
    color: #475569 !important;
}
[data-theme="light"] .card-title {
    color: #0F172A !important;
}

/* =============================================
   LIGHT THEME — ADDITIONAL OVERRIDES
   Fixes remaining hardcoded dark rgba() values
   ============================================= */

/* ── Hero title & description (hardcoded white in dark rules above) ── */
[data-theme="light"] .hero-description,
[data-theme="light"] .hero-description-enhanced {
    color: #334155 !important;
}
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-title-enhanced {
    color: #0F172A !important;
}

/* ── Hero stat number & separator ── */
[data-theme="light"] .hero-stat-number,
[data-theme="light"] .hero-stat-number.adv-counter {
    color: #0891B2 !important;
    text-shadow: none !important;
}
[data-theme="light"] .hero-stat-separator {
    background: rgba(0,0,0,0.10) !important;
}

/* ── Stats bar numbers & labels (generic) ── */
[data-theme="light"] .stat-number {
    color: #0891B2 !important;
}
[data-theme="light"] .stat-label {
    color: #475569 !important;
}

/* ── Problem cards ── */
[data-theme="light"] .problem-card {
    background: rgba(239,68,68,.03) !important;
    border-color: rgba(239,68,68,.1) !important;
}

/* ── Process step (hardcoded dark gradient bg) ── */
[data-theme="light"] .process-step {
    background: rgba(0,0,0,.025) !important;
    border-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] .process-step::after {
    background: radial-gradient(circle, rgba(9,145,178,.08), transparent 70%) !important;
}
[data-theme="light"] .process-step:hover {
    border-color: rgba(9,145,178,.25) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 0 24px rgba(9,145,178,.06) !important;
}

/* ── HP Bundle price panels (rgba(8,12,28,.75) hardcoded) ── */
[data-theme="light"] .hpbs-pp {
    background: #F8FAFC !important;
    border-left-color: #E2E8F0 !important;
}
[data-theme="light"] .hpbs-pp-orig  { color: #94A3B8 !important; }
[data-theme="light"] .hpbs-pp-sym   { color: #64748B !important; }
[data-theme="light"] .hpbs-pp-period { color: #94A3B8 !important; }
[data-theme="light"] .hpbs-pp-note  { color: #94A3B8 !important; }
[data-theme="light"] .hpbs-pp-note-em { color: #475569 !important; }
[data-theme="light"] .hpbs-pp-div   { background: #E2E8F0 !important; }
[data-theme="light"] .hpbs-pp-link-c { color: #0891B2 !important; }
[data-theme="light"] .hpbs-pp-link-a { color: #B45309 !important; }
[data-theme="light"] .hpbs-pp-custom {
    background: linear-gradient(135deg,#B45309,#DC2626) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}

/* ── HP Bundle card internals ── */
[data-theme="light"] .hpbs-card {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .hpbs-card-feat { border-color: rgba(8,145,178,.25) !important; }
[data-theme="light"] .hpbs-card-ent  { border-color: rgba(180,83,9,.2) !important; }
[data-theme="light"] .hpbs-card-desc,
[data-theme="light"] .hpbs-card-desc-sm { color: #475569 !important; }
[data-theme="light"] .hpbs-chk        { color: #334155 !important; }
[data-theme="light"] .hpbs-mini-chk   { color: #475569 !important; }
[data-theme="light"] .hpbs-stats {
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .hpbs-stat { border-right-color: #E2E8F0 !important; }
[data-theme="light"] .hpbs-stat-lbl { color: #64748B !important; }
[data-theme="light"] .hpbs-ent-feat {
    background: rgba(0,0,0,.02) !important;
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .hpbs-ent-fsub { color: #64748B !important; }
[data-theme="light"] .hpbs-mc-foot { border-top-color: #E2E8F0 !important; }
[data-theme="light"] .hpbs-mc-orig { color: #94A3B8 !important; }
[data-theme="light"] .hpbs-btn-ghost {
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}
[data-theme="light"] .hpbs-btn-ghost:hover {
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
[data-theme="light"] .hpbs-btn-sm {
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}
[data-theme="light"] .hpbs-btn-sm:hover {
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
[data-theme="light"] .hpbs-nudge {
    background: rgba(0,0,0,.02) !important;
    border-color: #E2E8F0 !important;
}

/* ── HP Bundle skeletons ── */
[data-theme="light"] .hpbs-skel {
    background: linear-gradient(90deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.04) 100%) !important;
    border-color: #E2E8F0 !important;
}

/* ── Bundle section (pricing page) adv-bc / adv-bs ── */
[data-theme="light"] .adv-bc {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .adv-bc:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,.08) !important;
}
[data-theme="light"] .adv-bc-feat  { color: #334155 !important; }
[data-theme="light"] .adv-bc-feat-count { color: #64748B !important; }
[data-theme="light"] .adv-bc-bar-wrap { background: #E2E8F0 !important; }
[data-theme="light"] .adv-bc-footer { border-top-color: #E2E8F0 !important; }
[data-theme="light"] .adv-bc-tag   { color: #64748B !important; }
[data-theme="light"] .adv-bc-cta {
    border-color: #E2E8F0 !important;
    color: #334155 !important;
    background: rgba(0,0,0,.02) !important;
}
[data-theme="light"] .adv-bc-cta:hover { background: #E2E8F0 !important; color: #0F172A !important; }

/* Bundle toggle (pricing page) */
[data-theme="light"] .adv-bs-tlbl { color: #64748B !important; }
[data-theme="light"] .adv-bs-tlbl.adv-bs-tlbl-on { color: #0F172A !important; }
[data-theme="light"] .adv-bs-track {
    background: rgba(8,145,178,.08) !important;
    border-color: rgba(8,145,178,.22) !important;
}
[data-theme="light"] .adv-bs-track.adv-on { background: #0891B2 !important; border-color: #0891B2 !important; }
[data-theme="light"] .adv-bs-thumb { background: #0891B2 !important; }
[data-theme="light"] .adv-bs-track.adv-on .adv-bs-thumb { background: #fff !important; }

/* Bundle skeletons (pricing page) */
[data-theme="light"] .adv-bs-skel,
[data-theme="light"] .adv-ps-skel {
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .adv-bs-skel-h,
[data-theme="light"] .adv-ps-skel-head {
    background: rgba(0,0,0,.04) !important;
    animation: none !important;
}
[data-theme="light"] .adv-bs-skel-l,
[data-theme="light"] .adv-skel-l,
[data-theme="light"] .adv-bs-skel-btn,
[data-theme="light"] .adv-skel-btn {
    background: rgba(0,0,0,.06) !important;
    animation: none !important;
}

/* Pricing-section (adv-pc) cards — extra overrides */
[data-theme="light"] .adv-pc {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .adv-pc:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,.08) !important;
}
[data-theme="light"] .adv-pc-feat { color: #334155 !important; }
[data-theme="light"] .adv-cta-ghost {
    color: #475569 !important;
    border-color: #E2E8F0 !important;
    background: rgba(0,0,0,.02) !important;
}
[data-theme="light"] .adv-cta-ghost:hover {
    color: #0891B2 !important;
    border-color: rgba(8,145,178,.3) !important;
}

/* ── HP Bundle toggle ── */
[data-theme="light"] .hpbs-tlbl { color: #64748B !important; }
[data-theme="light"] .hpbs-tlbl.hpbs-tlbl-on { color: #0F172A !important; }
[data-theme="light"] .hpbs-track {
    background: rgba(8,145,178,.08) !important;
    border-color: rgba(8,145,178,.22) !important;
}
[data-theme="light"] .hpbs-track.hpbs-on { background: #0891B2 !important; border-color: #0891B2 !important; }
[data-theme="light"] .hpbs-thumb { background: #0891B2 !important; }
[data-theme="light"] .hpbs-track.hpbs-on .hpbs-thumb { background: #fff !important; }
[data-theme="light"] .hpbs-save-pill {
    background: rgba(22,163,74,.08) !important;
    color: #15803D !important;
    border-color: rgba(22,163,74,.2) !important;
}
[data-theme="light"] .hpbs-billing-badge {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #475569 !important;
}

/* ── Progress bar track (adv-progress-track hardcoded dark) ── */
[data-theme="light"] .adv-progress-track {
    background: rgba(0,0,0,.07) !important;
}

/* ── Skeleton shimmer (generic, any remaining dark shimmer) ── */
[data-theme="light"] .pricing-skeleton-bar,
[data-theme="light"] .adv-ps-skel-body {
    background: linear-gradient(90deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.04) 100%) !important;
    background-size: 200% 100% !important;
}
[data-theme="light"] .adv-ps-skel-body {
    background: rgba(0,0,0,.02) !important;
}

/* ── Blog / case study card hover ── */
[data-theme="light"] .adv-blog-card:hover,
[data-theme="light"] .adv-case-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.08) !important;
    border-color: #CBD5E1 !important;
}

/* ── Testimonial card ── */
[data-theme="light"] .adv-testimonial,
[data-theme="light"] .testimonial-card-enhanced {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

/* ── Section-alt background ── */
[data-theme="light"] .section-alt {
    background: #F5F7FB !important;
}

/* ── Backdrop glass panels (used in some cards) ── */
[data-theme="light"] .glass-panel {
    background: rgba(255,255,255,.85) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
}

/* ── Persona selector ── */
[data-theme="light"] .persona-selector {
    background: rgba(0,0,0,.03) !important;
    border-color: #E2E8F0 !important;
}

/* ── Bot chat bubble ── */
[data-theme="light"] .bot-bubble {
    background: #F5F7FB !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

/* ── Hero badge typing cursor ── */
[data-theme="light"] .hero-badge-typing {
    color: #0891B2 !important;
    border-right-color: #0891B2 !important;
}

/* ── Service hero breadcrumb ── */
[data-theme="light"] .hero-breadcrumb a,
[data-theme="light"] .hero-breadcrumb {
    color: #64748B !important;
}
[data-theme="light"] .hero-breadcrumb span { color: #0891B2 !important; }

/* ── hero-subtitle (service pages) ── */
[data-theme="light"] .hero-subtitle {
    color: #334155 !important;
}


/* ============================================================
   MOBILE FIXES — appended
   Loaded last so these rules win over all earlier declarations.
   Covers: blog/case-study card grids, nav drawer, hero padding,
           inline-style overrides, typography, forms, footer.
   ============================================================ */

/* 1. GLOBAL */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, svg { max-width: 100%; height: auto; }

/* 2. BLOG GRID */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .blog-card { min-height: 0 !important; }
    .card-img-wrap { aspect-ratio: 16 / 9 !important; }
    .topic-pills {
        flex-wrap: nowrap !important; overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
        justify-content: flex-start !important; padding: 0 4px 8px !important;
    }
    .topic-pills::-webkit-scrollbar { display: none; }
    .topic-pill { flex-shrink: 0 !important; font-size: 0.78rem !important; padding: 7px 14px !important; }
    .blog-filters { flex-wrap: wrap !important; padding: 12px !important; gap: 10px !important; }
    .search-box { flex: 1 1 100% !important; order: 1 !important; }
    .filter-toggle-btn { order: 2 !important; }
    .filter-panel-row { flex-direction: column !important; }
    .page-btn.prev-btn span, .page-btn.next-btn span { display: none !important; }
}

/* 3. CASE STUDIES GRID */
@media (max-width: 900px) {
    .cs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 640px) {
    .cs-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .cs-card { max-width: 100% !important; width: 100% !important; }
    .cs-card-visual { height: 160px !important; }
    .cs-card-body { padding: 18px !important; }
    .cs-card-body h3 { font-size: 1rem !important; }
    .cs-card-metric-val { font-size: 1.2rem !important; }
    .cs-filter-bar {
        justify-content: flex-start !important; flex-wrap: nowrap !important;
        overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
        padding: 8px 0 12px !important; margin-bottom: 28px !important; scrollbar-width: none !important;
    }
    .cs-filter-bar::-webkit-scrollbar { display: none; }
    .cs-filter-btn { flex-shrink: 0 !important; }
}

/* 4. PORTFOLIO GRID */
@media (max-width: 640px) {
    .portfolio-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .portfolio-card { aspect-ratio: 16 / 10 !important; }
}

/* 5. ALIGN-ITEMS FIX — prevent Y-axis card stretching */
@media (max-width: 767px) {
    .blog-grid, .cs-grid, .portfolio-grid,
    .features-grid, .benefits-grid, .related-grid, .adv-feature-grid {
        align-items: start !important;
    }
    .trust-logos { gap: 10px !important; flex-wrap: wrap !important; }
    .adv-tech-badge { font-size: 0.75rem !important; padding: 6px 12px !important; }
}

/* 6. TINY PHONE 2-COL OVERRIDE */
@media (max-width: 400px) {
    .grid-2, .related-grid, .selector-grid,
    section .grid-3, section .features-grid, section .benefits-grid {
        grid-template-columns: 1fr !important; gap: 14px !important;
    }
}

/* 7. CARD PADDING */
@media (max-width: 480px) {
    .card, .feature-card, .adv-feature-card, .benefit-item,
    .related-card, .val-card, .usecase-card { padding: 18px !important; }
}

/* 8. NAVIGATION DRAWER */
@media (max-width: 991px) {
    .main-nav {
        position: fixed !important; top: 0 !important; right: 0 !important;
        height: 100vh !important; height: 100dvh !important;
        width: min(320px, 88vw) !important; z-index: 999 !important;
        transform: translateX(110%) !important;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
        background: linear-gradient(160deg, #0d1117 0%, #111827 50%, #0f172a 100%) !important;
        border-left: 1px solid rgba(34,211,238,0.12) !important;
        flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important;
        padding: 0 !important; gap: 0 !important; box-shadow: -8px 0 40px rgba(0,0,0,0.5) !important;
    }
    .main-nav.active { transform: translateX(0) !important; }
    .nav-list {
        flex-direction: column !important; gap: 0 !important; overflow: visible !important;
        padding: 8px 12px 0 !important; flex: 1 1 auto !important; align-items: stretch !important;
    }
    .nav-item { width: 100% !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
    .nav-item:last-child { border-bottom: none !important; }
    .nav-link {
        width: 100% !important; padding: 14px 12px !important; font-size: 1rem !important;
        gap: 8px !important; justify-content: space-between !important; border-radius: 10px !important;
    }
    .header-contact-btn { display: none !important; }
    .header-wa-btn { display: none !important; }
    .mobile-nav-overlay {
        position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.6) !important;
        backdrop-filter: blur(4px) !important; z-index: 998 !important;
        opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important;
    }
    .mobile-nav-overlay.active { opacity: 1 !important; pointer-events: all !important; }
    .mobile-toggle {
        display: flex !important; flex-direction: column !important;
        justify-content: center !important; align-items: center !important;
        width: 44px !important; height: 44px !important; gap: 5px !important;
        cursor: pointer !important; background: none !important; border: none !important;
        padding: 4px !important; border-radius: 8px !important; transition: background 0.2s ease !important;
    }
    .mobile-toggle:hover { background: rgba(255,255,255,0.06) !important; }
    .hamburger-lines span, .mobile-toggle > span {
        display: block !important; width: 22px !important; height: 2px !important;
        background: var(--text-primary) !important; border-radius: 2px !important; transition: all 0.3s ease !important;
    }
    .mobile-toggle.active .hamburger-lines span:nth-child(1),
    .mobile-toggle.active > span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) !important; }
    .mobile-toggle.active .hamburger-lines span:nth-child(2),
    .mobile-toggle.active > span:nth-child(2) { opacity: 0 !important; }
    .mobile-toggle.active .hamburger-lines span:nth-child(3),
    .mobile-toggle.active > span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px) !important; }
    .dropdown {
        position: static !important; transform: none !important;
        opacity: 1 !important; visibility: visible !important; pointer-events: all !important;
        max-height: 0 !important; overflow: hidden !important;
        background: transparent !important; border: none !important; box-shadow: none !important;
        padding: 0 0 0 16px !important; width: 100% !important; transition: max-height 0.35s ease !important;
    }
    .nav-item.has-dropdown.active .dropdown { max-height: 500px !important; padding: 4px 0 8px 16px !important; }
    .dropdown li a {
        min-height: 42px !important; padding: 10px 12px !important;
        font-size: 0.88rem !important; border-radius: 8px !important; color: var(--text-secondary) !important;
    }
    .mega-menu {
        position: static !important; opacity: 1 !important; visibility: visible !important;
        pointer-events: all !important; max-height: 0 !important; overflow: hidden !important;
        background: transparent !important; border: none !important; box-shadow: none !important;
        padding: 0 !important; transform: none !important; transition: max-height 0.4s ease !important; width: 100% !important;
    }
    .nav-item.has-mega-menu.active .mega-menu { max-height: 800px !important; padding: 0 0 8px 8px !important; }
    .mega-menu-inner {
        display: flex !important; flex-direction: column !important; gap: 8px !important;
        background: transparent !important; border: none !important; padding: 0 !important;
    }
    .mega-col { width: 100% !important; }
    .mega-col.mega-featured { display: none !important; }
    .mega-heading { font-size: 0.62rem !important; padding: 8px 4px 4px !important; }
    .mega-links li a { font-size: 0.85rem !important; padding: 8px 10px !important; min-height: 36px !important; border-radius: 8px !important; }
    .mobile-nav-scroll { flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 16px !important; }
    .mobile-nav-header {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        padding: 18px 14px 12px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        margin-bottom: 4px !important; flex-shrink: 0 !important;
    }
    .mobile-nav-brand { display: flex !important; align-items: center !important; gap: 8px !important; }
    .mobile-nav-brand-dot {
        width: 8px !important; height: 8px !important; border-radius: 50% !important;
        background: var(--accent-cyan) !important; box-shadow: 0 0 8px var(--accent-cyan) !important;
    }
    .mobile-nav-brand-label {
        font-size: 0.75rem !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--text-muted) !important;
    }
    .mobile-nav-close-hint { font-size: 0.7rem !important; color: var(--text-muted) !important; opacity: 0.6 !important; }
}
@media (min-width: 992px) {
    .mobile-nav-header { display: none !important; }
    .mobile-nav-scroll { display: contents !important; }
    .mobile-toggle { display: none !important; }
    .mobile-nav-overlay { display: none !important; }
}

/* 9. HEADER BUTTONS */
@media (max-width: 991px) {
    .header-cta-secondary, .header-cta { display: none !important; }
    .header-container { padding: 0 16px !important; gap: 8px !important; }
    .logo img { height: 32px !important; }
    .logo { font-size: 1.4rem !important; }
}

/* 10. HERO SECTIONS */
@media (max-width: 767px) {
    .hero[style*="padding-top"], .hero-enhanced[style*="padding-top"], .service-hero {
        padding-top: 100px !important; min-height: auto !important;
    }
    .hero-content { max-width: 100% !important; }
    .hero-subtitle { font-size: 0.95rem !important; max-width: 100% !important; }
    .breadcrumb, .hero-breadcrumb { font-size: 0.78rem !important; flex-wrap: wrap !important; gap: 4px !important; }
    .hero-badge, .hero-badge-enhanced { font-size: 0.78rem !important; margin-bottom: 12px !important; }
    .hero-glow-orb { display: none !important; }
}
@media (max-width: 575px) {
    .hero { padding-top: 90px !important; min-height: auto !important; }
    .hero-title-enhanced, .hero-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; line-height: 1.2 !important; }
    .hero-description-enhanced, .hero-description { font-size: 0.95rem !important; line-height: 1.65 !important; }
    .hero-cta-enhanced, .hero-cta, .hero-actions { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
    .hero-cta-enhanced .btn, .hero-cta .btn, .hero-actions .btn { width: 100% !important; justify-content: center !important; }
    .hero-stats-enhanced { flex-direction: row !important; flex-wrap: wrap !important; max-width: 100% !important; padding: 12px 4px !important; }
    .hero-stat-item { flex: 1 1 calc(50% - 1px) !important; padding: 10px 8px !important; }
    .hero-stat-separator { display: none !important; }
    .hero-stat-number { font-size: 1.4rem !important; }
    .hero-stat-label { font-size: 0.68rem !important; }
    .hero-badge-enhanced, .hero-badge { font-size: 0.78rem !important; padding: 6px 14px !important; }
}

/* 11. SECTION PADDING */
@media (max-width: 767px) {
    .section, section.section { padding: 48px 0 !important; }
    .section-header { margin-bottom: 32px !important; }
    .section-header h2, .section-title { font-size: clamp(1.4rem, 5vw, 1.9rem) !important; }
    .section-description, .section-subtitle { font-size: 0.9rem !important; }
}
@media (max-width: 480px) {
    .section, section.section { padding: 36px 0 !important; }
}

/* 12. INLINE STYLE OVERRIDES */
@media (max-width: 767px) {
    [style*="gap:40px"], [style*="gap: 40px"],
    [style*="gap:48px"], [style*="gap: 48px"],
    [style*="gap:60px"], [style*="gap: 60px"],
    [style*="gap:80px"], [style*="gap: 80px"] { gap: 20px !important; }
    [style*="padding:48px"], [style*="padding: 48px"],
    [style*="padding:60px"], [style*="padding: 60px"],
    [style*="padding:80px"], [style*="padding: 80px"] { padding: 24px !important; }
    [style*="max-width:700px"], [style*="max-width: 700px"],
    [style*="max-width:800px"], [style*="max-width: 800px"],
    [style*="max-width:900px"], [style*="max-width: 900px"] { max-width: 100% !important; }
    [style*="min-height:60vh"], [style*="min-height: 60vh"],
    [style*="min-height:70vh"], [style*="min-height: 70vh"],
    [style*="min-height:80vh"], [style*="min-height: 80vh"] { min-height: auto !important; }
    [style*="display:flex"][style*="gap"],
    [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
    [style*="padding:24px"], [style*="padding: 24px"],
    [style*="padding:32px"], [style*="padding: 32px"] { padding: 16px !important; }
}

/* 13. FORMS */
@media (max-width: 767px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="search"],
    select, textarea {
        font-size: 16px !important; min-height: 48px !important;
        width: 100% !important; box-sizing: border-box !important;
    }
    textarea { min-height: 120px !important; }
    .blog-search-input { min-height: 44px !important; font-size: 16px !important; }
}

/* 14. BUTTONS */
@media (max-width: 480px) {
    .btn { min-height: 48px !important; }
    .btn-lg { min-height: 52px !important; padding: 14px 24px !important; font-size: 1rem !important; }
    .btn-sm { min-height: 40px !important; }
}

/* 15. TYPOGRAPHY */
@media (max-width: 767px) {
    h1 { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.3rem, 4vw, 1.9rem) !important; line-height: 1.25 !important; }
    h3 { font-size: clamp(1.1rem, 3vw, 1.4rem) !important; }
    h4 { font-size: clamp(0.95rem, 2.5vw, 1.15rem) !important; }
    p  { font-size: clamp(0.88rem, 2vw, 1rem) !important; line-height: 1.7 !important; }
}

/* 16. FOOTER */
@media (max-width: 767px) {
    .footer { padding: 48px 0 24px !important; }
    .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 24px !important; text-align: left !important; }
    .footer-brand { grid-column: 1 / -1 !important; max-width: 100% !important; text-align: left !important; }
    .footer-social { justify-content: flex-start !important; }
    .footer-links { text-align: left !important; }
    .footer-links a { min-height: auto !important; font-size: 0.88rem !important; }
    .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; align-items: center !important; }
}
@media (max-width: 400px) {
    .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* 17. PROCESS TIMELINE */
@media (max-width: 767px) {
    .process-timeline { grid-template-columns: 1fr !important; gap: 16px !important; }
    .process-timeline::before { display: none !important; }
}

/* 18. COMPARISON & FEATURE GRIDS */
@media (max-width: 640px) {
    .adv-comparison { grid-template-columns: 1fr !important; }
    .adv-comparison-col--before { border-right: none !important; border-bottom: 1px solid var(--border-color) !important; }
    .adv-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .adv-metric-card { padding: 18px 14px !important; }
    .adv-feature-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .adv-feature-card { padding: 20px 18px !important; }
}
@media (max-width: 400px) {
    .adv-metrics-grid { grid-template-columns: 1fr !important; }
}

/* 19. SAFE AREA INSETS */
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .site-header { padding-top: max(var(--space-lg, 1rem), env(safe-area-inset-top)); }
}

/* 20. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .main-nav, .dropdown, .mega-menu { transition: none !important; animation: none !important; }
}