/* ==========================================================================
   Case Studies — Premium Enterprise Redesign
   Stripe × McKinsey Design Language
   ========================================================================== */

/* --- CSS Variables (Scoped to this page) --- */
:root {
    --cs-surface: rgba(255, 255, 255, 0.025);
    --cs-border: rgba(255, 255, 255, 0.07);
    --cs-border-hover: rgba(59, 130, 246, 0.35);
    --cs-blue: #3b82f6;
    --cs-green: #10b981;
    --cs-purple: #8b5cf6;
    --cs-red: #ef4444;
    --cs-bg-deep: #060608;
    --cs-bg-panel: #0b0b0f;
    --cs-radius: 14px;
}

/* ==========================================================================
   1. HERO — Live Analytics Environment
   ========================================================================== */
.cs-hero {
    position: relative;
    padding: 200px 0 100px;
    overflow: hidden;
}

/* Animated Grid Background */
.cs-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
    animation: gridDrift 25s linear infinite;
}

@keyframes gridDrift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(80px);
    }
}

/* Glow Orb */
.cs-hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.cs-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-hero-text {
    max-width: 560px;
}

.cs-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(59, 130, 246, 0.08); /* wait, maybe remove background */
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #7f63f6;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
}

.cs-hero-tag .pulse-dot {
    width: 7px;
    height: 7px;
    background: var(--cs-blue);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.cs-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    background: linear-gradient(130deg, #fff 0%, #c4b5ff 50%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 1.5rem;
}



.cs-hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Floating Metric Cards (Right Side of Hero) */
.cs-hero-visual {
    position: relative;
    height: 400px;
}

.cs-float-card {
    position: absolute;
    background: rgba(15, 15, 20, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    min-width: 180px;
    animation: float 6s ease-in-out infinite;
}

.cs-float-card:nth-child(1) {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.cs-float-card:nth-child(2) {
    top: 45%;
    right: 5%;
    animation-delay: 1s;
}

.cs-float-card:nth-child(3) {
    bottom: 10%;
    left: 25%;
    animation-delay: 2s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.cs-float-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.4rem;
}

.cs-float-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.cs-float-spark {
    margin-top: 0.5rem;
}

/* Animated SVG Graph in Hero */
.cs-hero-graph {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    opacity: 0.15;
}

.cs-hero-graph path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: drawLine 3s ease forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}


/* ==========================================================================
   2. FILTER BAR — Horizontal Segmented Control
   ========================================================================== */
.cs-filter-section {
    position: sticky;
    top: 75px;
    z-index: 50;
    padding: 0.75rem 0;
    background: rgba(6, 6, 8, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--cs-border);
}

.cs-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-filter-group {
    display: flex;
    gap: 2px;
    background: var(--cs-surface);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--cs-border);
}

.cs-filter-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cs-filter-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.cs-filter-btn.active {
    background: rgba(59, 130, 246, 0.12);
    color: var(--cs-blue);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}

.cs-search-wrap {
    position: relative;
    width: 220px;
}

.cs-search-wrap svg {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #64748b);
    width: 16px;
    height: 16px;
}

.cs-search-input {
    width: 100%;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    padding: 0.55rem 1rem 0.55rem 2.4rem;
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.cs-search-input::placeholder {
    color: var(--text-muted, #64748b);
}

.cs-search-input:focus {
    outline: none;
    border-color: var(--cs-blue);
    background: rgba(59, 130, 246, 0.04);
}


/* ==========================================================================
   3. CASE STUDY CARDS — Clean, Breathing, Premium
   ========================================================================== */
.cs-grid-section {
    padding: 5rem 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* ---- Card ---- */
.cs-card {
    background: var(--cs-bg-panel);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        opacity 0.5s ease;
}

.cs-card:hover {
    transform: translateY(-6px);
    border-color: var(--cs-border-hover);
    box-shadow:
        0 12px 40px -8px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(59, 130, 246, 0.12);
}

.cs-card:focus-visible {
    outline: 2px solid rgba(127, 99, 246, 0.72);
    outline-offset: 4px;
    border-color: var(--cs-border-hover);
    box-shadow:
        0 12px 40px -8px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(127, 99, 246, 0.22);
}

/* Card Header — Abstract SVG Pattern */
.cs-card-header {
    height: 140px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--cs-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-card-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.cs-card-icon {
    position: relative;
    z-index: 2;
    font-size: 1.8rem;
    opacity: 0.35;
}

/* Card Body */
.cs-card-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cs-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.cs-client-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.cs-industry-pill {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #64748b);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--cs-border);
    padding: 0.2rem 0.65rem;
    border-radius: 99px;
    white-space: nowrap;
}

.cs-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

/* Card Metrics Strip */
.cs-card-strip {
    display: flex;
    gap: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cs-border);
    margin-bottom: 1.25rem;
}

.cs-strip-item {
    flex: 1;
}

.cs-strip-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.cs-strip-label {
    font-size: 0.65rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* Card CTA */
.cs-card-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cs-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.2s ease;
}

.cs-card:hover .cs-card-cta {
    gap: 0.7rem;
}


/* ==========================================================================
   4. SECTIONS — Impact, Architecture, Why Us
   ========================================================================== */
.cs-section {
    padding: 6rem 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.cs-section-full {
    padding: 6rem 0;
    border-top: 1px solid var(--cs-border);
}

.cs-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.cs-section-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cs-blue);
    margin-bottom: 0.75rem;
    display: block;
}

.cs-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.cs-section-sub {
    font-size: 1.05rem;
    color: var(--text-secondary, #94a3b8);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Section A: Impact by Industry --- */
.cs-impact-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-impact-card {
    background: var(--cs-bg-panel);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.cs-impact-card:hover {
    border-color: var(--cs-border-hover);
    transform: translateY(-3px);
}

.cs-impact-icon {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.7;
}

.cs-impact-industry {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
}

.cs-impact-stat {
    margin-bottom: 0.5rem;
}

.cs-impact-num {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cs-blue);
}

.cs-impact-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}

/* --- Section B: Why Teams Brought Us In --- */
.cs-trigger-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-trigger-card {
    background: var(--cs-bg-panel);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 2rem 1.5rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.cs-trigger-card:hover {
    border-color: var(--cs-border-hover);
    transform: translateY(-3px);
}

.cs-trigger-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 1.1rem;
}

.cs-trigger-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.7rem;
    line-height: 1.4;
}

.cs-trigger-copy {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}

/* --- Section B: Architecture Pattern --- */
.cs-arch-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-arch-step {
    flex: 1;
    background: var(--cs-bg-panel);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: border-color 0.3s ease;
}

.cs-arch-step:hover {
    border-color: var(--cs-border-hover);
}

.cs-arch-num {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.75rem;
}

.cs-arch-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.cs-arch-step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.cs-arch-step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

.cs-arch-arrow {
    color: var(--text-muted, #64748b);
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(4px);
    }
}

/* --- Section C: Why Leaders Choose Us --- */
.cs-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-why-card {
    background: var(--cs-bg-panel);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 2rem 1.5rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.cs-why-card:hover {
    border-color: var(--cs-border-hover);
    transform: translateY(-3px);
}

.cs-why-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.cs-why-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
}

.cs-why-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.6;
}

/* --- Section C: What Changed for Leadership --- */
.cs-shift-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-shift-card {
    background: var(--cs-bg-panel);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 2rem 1.5rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.cs-shift-card:hover {
    border-color: var(--cs-border-hover);
    transform: translateY(-3px);
}

.cs-shift-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    color: #fff;
}

.cs-shift-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.cs-shift-state {
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cs-shift-state + .cs-shift-state {
    margin-top: 0.8rem;
}

.cs-shift-label {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.65rem;
}

.cs-shift-label.before {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.18);
}

.cs-shift-label.after {
    color: #86efac;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.18);
}

.cs-shift-copy {
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}


/* ==========================================================================
   5. FAQ — Premium Enterprise Accordion
   ========================================================================== */
.cs-faq-section {
    padding: 6rem 0;
    max-width: 850px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.cs-faq-item {
    background: rgba(15, 15, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
}

.cs-faq-item:hover {
    border-color: rgba(139, 92, 246, 0.2);
}

.cs-faq-item.is-open {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.08);
    transform: translateY(-2px);
}

.cs-faq-q {
    width: 100%;
    padding: 1.5rem 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.cs-faq-q:hover {
    background: rgba(255, 255, 255, 0.02);
}

.cs-faq-q-text {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    flex: 1;
}

/* Toggle Icon */
.cs-faq-toggle {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}

.cs-faq-toggle-icon {
    width: 14px;
    height: 14px;
    position: relative;
}

.cs-faq-toggle-icon::before,
.cs-faq-toggle-icon::after {
    content: '';
    position: absolute;
    background: #8b5cf6;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal line */
.cs-faq-toggle-icon::before {
    width: 14px;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Vertical line */
.cs-faq-toggle-icon::after {
    width: 2px;
    height: 14px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* Open state - rotate */
.cs-faq-item.is-open .cs-faq-toggle {
    background: rgba(139, 92, 246, 0.2);
}

.cs-faq-item.is-open .cs-faq-toggle-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/* Answer Container */
.cs-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-faq-item.is-open .cs-faq-a {
    max-height: 500px;
}

.cs-faq-a-content {
    padding: 0 1.75rem 1.5rem 1.75rem;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.cs-faq-a-content p {
    margin: 0;
}


/* ==========================================================================
   6. MODAL — Executive Brief Experience
   ========================================================================== */
.cs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.cs-modal-container {
    width: 92vw;
    max-width: 900px;
    height: 90vh;
    background: #08080c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.06),
        0 24px 80px -12px rgba(0, 0, 0, 0.9),
        0 0 120px -40px rgba(59, 130, 246, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.94) translateY(24px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease;
}

.cs-modal-overlay.active .cs-modal-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.cs-modal-topbar {
    flex-shrink: 0;
    height: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    background: rgba(8, 8, 12, 0.98);
}

.cs-modal-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cs-modal-close {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #94a3b8);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.cs-modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.cs-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 3rem 3.5rem 4rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.cs-modal-body::-webkit-scrollbar {
    width: 5px;
}

.cs-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.cs-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* --- Modal Section: Hero Header --- */
.m-hero-header {
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.m-tag {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cs-blue);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 0.3rem 0.85rem;
    border-radius: 99px;
    margin-bottom: 1.25rem;
    font-weight: 600;
}

.m-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.85rem;
}

.m-subtitle {
    font-size: 1rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.7;
    max-width: 620px;
}

/* --- Modal Section: KPI Row --- */
.m-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 3.5rem;
}

.m-kpi {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.m-kpi::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, var(--kpi-glow, rgba(59, 130, 246, 0.06)) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.m-kpi::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
}

.m-kpi:hover::before {
    opacity: 1;
}

.m-kpi:hover::after {
    animation: kpiShimmer 0.8s ease forwards;
}

.m-kpi:hover {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 8px 32px -8px rgba(59, 130, 246, 0.15), 0 0 20px -4px rgba(59, 130, 246, 0.08);
    transform: scale(1.03);
}

@keyframes kpiShimmer {
    to {
        left: 125%;
    }
}

.m-kpi-val {
    position: relative;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--m-kpi-value, #fff);
}

.m-kpi-label {
    position: relative;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #64748b);
    margin-top: 0.5rem;
}

/* --- Modal Section: Generic Section Block --- */
.m-section {
    margin-bottom: 3.5rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.m-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

.m-section-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted, #64748b);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.m-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.m-story-block {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 2rem 1.9rem;
}

.m-story-intro {
    max-width: none;
    margin-bottom: 1.2rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.7;
}

.m-story-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.95rem;
}

.m-story-list li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.65;
}

.m-story-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-blue);
    opacity: 0.7;
}

.m-impact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.4rem;
}

.m-impact-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.82rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.08);
    color: #dbeafe;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

/* --- Modal Section: Before & After --- */
.m-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.m-panel {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    position: relative;
}

.m-panel.before {
    border-top: 3px solid var(--cs-red);
}

.m-panel.after {
    border-top: 3px solid var(--cs-green);
}

.m-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding: 0.25rem 0.7rem;
    border-radius: 6px;
}

.m-panel.before .m-panel-badge {
    color: var(--cs-red);
    background: rgba(239, 68, 68, 0.08);
}

.m-panel.after .m-panel-badge {
    color: var(--cs-green);
    background: rgba(16, 185, 129, 0.08);
}

.m-panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.m-panel-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.65;
}

.m-panel-list li:last-child {
    margin-bottom: 0;
}

.m-panel.before .m-panel-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-red);
    opacity: 0.5;
}

.m-panel.after .m-panel-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-green);
    opacity: 0.5;
}

/* --- Modal Section: Quantified Impact Bars --- */
.m-bars-wrap {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 2rem 2rem;
}

.m-bar-group {
    margin-bottom: 2rem;
}

.m-bar-group:last-child {
    margin-bottom: 0;
}

.m-bar-group-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.m-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.m-bar-row:last-child {
    margin-bottom: 0;
}

.m-bar-label {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    width: 54px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.m-bar-track {
    flex: 1;
    height: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.m-bar-fill {
    height: 100%;
    border-radius: 6px;
    width: 0%;
    transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.m-bar-fill.red {
    background: linear-gradient(90deg, var(--cs-red) 0%, rgba(239, 68, 68, 0.6) 100%);
}

.m-bar-fill.green {
    background: linear-gradient(90deg, var(--cs-green) 0%, rgba(16, 185, 129, 0.6) 100%);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

.m-bar-fill.green.pulse {
    animation: barPulseGlow 2s ease-in-out 1;
}

@keyframes barPulseGlow {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
    }

    50% {
        box-shadow: 0 0 18px rgba(16, 185, 129, 0.45);
    }
}

.m-bar-value {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    width: 70px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    transition: text-shadow 0.3s ease, opacity 0.4s ease;
}

.m-bar-value.glow {
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* --- Modal Section: Testimonial --- */
.m-quote {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    padding: 2.5rem 2.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.m-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 8rem;
    color: rgba(59, 130, 246, 0.06);
    line-height: 1;
    pointer-events: none;
}

.m-quote-text {
    position: relative;
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 1.25rem;
    max-width: 560px;
}

.m-quote-author {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m-quote-author::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--cs-blue);
}

.m-quote-author span {
    font-size: 0.82rem;
    color: var(--cs-blue);
    font-weight: 600;
}

/* --- Modal Section: Dashboard Preview --- */
.m-dash {
    background: #060610;
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 40px -10px rgba(59, 130, 246, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.m-dash::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    opacity: 0.5;
}

.m-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.m-dash-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.m-dash-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    animation: dashPulse 2s ease infinite;
}

@keyframes dashPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.m-dash-tabs {
    display: flex;
    gap: 0.25rem;
    position: relative;
    z-index: 1;
}

.m-dash-tab {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.2s ease;
    cursor: default;
}

.m-dash-tab.active {
    background: rgba(59, 130, 246, 0.12);
    color: var(--cs-blue);
}

.m-dash-body {
    padding: 1.25rem;
    position: relative;
    z-index: 1;
}

/* Dashboard KPI Row */
.m-dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.m-dash-kpi {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.85rem 0.75rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
}

.m-dash-kpi.revealed {
    opacity: 1;
    transform: translateY(0);
}

.m-dash-kpi:hover {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.03);
}

.m-dash-kpi::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--kpi-accent, var(--cs-blue));
    opacity: 0.4;
}

.m-dash-kpi-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.4rem;
}

.m-dash-kpi-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.m-dash-kpi-trend {
    font-size: 0.55rem;
    font-weight: 600;
    color: #10b981;
}

/* Dashboard Charts Grid */
.m-dash-charts {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.m-dash-chart-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.m-dash-chart-card:hover {
    border-color: rgba(59, 130, 246, 0.15);
}

.m-dash-chart-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.75rem;
}

/* SVG Line Chart */
.m-dash-line-chart {
    width: 100%;
    height: 80px;
}

.m-dash-line-chart .line-path {
    fill: none;
    stroke: var(--cs-blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 2s ease;
}

.m-dash-line-chart.animated .line-path {
    stroke-dashoffset: 0;
}

.m-dash-line-chart .line-area {
    opacity: 0;
    transition: opacity 1.5s ease 0.5s;
}

.m-dash-line-chart.animated .line-area {
    opacity: 1;
}

.m-dash-line-chart .line-dot {
    fill: var(--cs-blue);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.m-dash-line-chart.animated .line-dot {
    opacity: 1;
}

/* Bar Chart */
.m-dash-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.m-dash-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m-dash-bar-name {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    width: 50px;
    flex-shrink: 0;
    text-align: right;
}

.m-dash-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    overflow: hidden;
}

.m-dash-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.m-dash-bar-pct {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    flex-shrink: 0;
}

/* Bottom Row: Donut + Table */
.m-dash-bottom {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.75rem;
}

/* Donut Chart */
.m-dash-donut-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.m-dash-donut-card:hover {
    border-color: rgba(59, 130, 246, 0.15);
}

.m-dash-donut {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.m-dash-donut-val {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
}

.m-dash-donut-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

/* Table Preview */
.m-dash-table-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    overflow: hidden;
}

.m-dash-table-card:hover {
    border-color: rgba(59, 130, 246, 0.15);
}

.m-dash-table {
    width: 100%;
    border-collapse: collapse;
}

.m-dash-table th {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-weight: 600;
}

.m-dash-table td {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.m-dash-table tr:last-child td {
    border-bottom: none;
}

.m-dash-table tbody tr {
    transition: background 0.2s ease;
}

.m-dash-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.04);
}

.m-dash-table .status-ok {
    color: #10b981;
}

.m-dash-table .status-warn {
    color: #f59e0b;
}

/* Dashboard KPI breathing animation */
.m-dash-kpi.revealed {
    animation: dashKpiBreathe 4s ease-in-out infinite;
    animation-delay: var(--breath-delay, 0s);
}

@keyframes dashKpiBreathe {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

/* --- Modal Section: Premium Desktop Mockup --- */
.m-mockup-wrap {
    position: relative;
    max-width: 1000px;
    margin: 3rem auto;
    padding: 4rem 2rem;
    perspective: 1200px;

    /* Cinematic background with glow */
    background:
        radial-gradient(ellipse 800px 400px at center 40%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 600px 300px at center 50%, rgba(139, 92, 246, 0.1) 0%, transparent 70%);

    /* Subtle grid pattern */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px;
    background-position: -1px -1px, -1px -1px;

    border-radius: 24px;
    animation: ambientPulse 8s ease-in-out infinite;
}

@keyframes ambientPulse {

    0%,
    100% {
        background-size: 50px 50px, 50px 50px;
        filter: brightness(1);
    }

    50% {
        background-size: 52px 52px, 52px 52px;
        filter: brightness(1.05);
    }
}

.m-monitor {
    position: relative;
    width: 100%;
    background: linear-gradient(145deg, #1a1a1f, #0d0d10);
    border-radius: 20px 20px 8px 8px;
    padding: 14px 14px 24px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* Premium depth shadows */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5) inset,
        0 50px 100px -20px rgba(0, 0, 0, 0.8),
        0 20px 60px -10px rgba(59, 130, 246, 0.2),
        0 0 80px rgba(59, 130, 246, 0.1);

    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
    animation: floatMonitor 6s ease-in-out infinite;
}

@keyframes floatMonitor {

    0%,
    100% {
        transform: translateY(0) rotateX(0deg);
    }

    50% {
        transform: translateY(-8px) rotateX(1deg);
    }
}

.m-monitor:hover {
    transform: translateY(-12px) scale(1.01) rotateX(2deg);
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.3) inset,
        0 60px 120px -20px rgba(0, 0, 0, 0.9),
        0 30px 80px -10px rgba(59, 130, 246, 0.4),
        0 0 120px rgba(59, 130, 246, 0.2);
}

/* Camera dot at top center */
.m-monitor::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(100, 100, 120, 0.8), rgba(50, 50, 60, 0.9));
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6) inset;
    z-index: 10;
}

.m-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8) inset,
        0 4px 12px rgba(0, 0, 0, 0.5) inset;
}

.m-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.m-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.96) translateX(30px);
}

.m-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(0);
    z-index: 2;
}

.m-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Premium Slider Controls */
.m-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    font-size: 1.4rem;
    font-weight: 300;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.5) inset;
}

.m-mockup-wrap:hover .m-slider-btn {
    opacity: 1;
}

.m-slider-btn:hover {
    background: linear-gradient(135deg, var(--cs-blue), #2563eb);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
    box-shadow:
        0 12px 32px rgba(59, 130, 246, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.m-slider-btn.prev {
    left: -28px;
}

.m-slider-btn.next {
    right: -28px;
}

/* Desktop Stand & Base */
.m-monitor-stand {
    width: 140px;
    height: 60px;
    background: linear-gradient(145deg, #2a2a32, #1a1a20);
    margin: -2px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.4) inset;
    position: relative;
}

.m-monitor-stand::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.m-monitor-base {
    width: 280px;
    height: 8px;
    background: linear-gradient(145deg, #2a2a32, #18181f);
    margin: 0 auto;
    border-radius: 8px 8px 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(0, 0, 0, 0.5) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    position: relative;
}

.m-monitor-base::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4), transparent);
    filter: blur(8px);
}

/* Slide Indicators */
.m-slide-indicators {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 2rem;
}

.m-slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.m-slide-dot:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.2);
}

.m-slide-dot.active {
    background: var(--cs-blue);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        0 0 16px rgba(59, 130, 246, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.4);
    width: 24px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .m-mockup-wrap {
        padding: 2rem 1rem;
    }

    .m-slider-btn {
        width: 44px;
        height: 44px;
        opacity: 0.9;
        font-size: 1.2rem;
    }

    .m-slider-btn.prev {
        left: 8px;
    }

    .m-slider-btn.next {
        right: 8px;
    }

    .m-monitor-stand {
        width: 100px;
        height: 45px;
    }

    .m-monitor-base {
        width: 200px;
    }
}

/* --- Modal Section: Architecture Snapshot --- */
.m-arch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 0;
    position: relative;
}

.m-arch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.m-arch-node.lit {
    opacity: 1;
    transform: scale(1);
}

.m-arch-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.m-arch-icon:hover {
    transform: scale(1.15) translateY(-4px);
}

.m-arch-node-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.m-arch-node.lit .m-arch-node-label {
    color: rgba(255, 255, 255, 0.65);
}

.m-arch-connector {
    width: 56px;
    height: 2px;
    position: relative;
    margin: 0 -2px;
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.m-arch-connector::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.m-arch-connector.drawn::before {
    transform: scaleX(1);
}

.m-arch-connector::after {
    content: '';
    position: absolute;
    right: -3px;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: opacity 0.3s ease 0.4s;
}

.m-arch-connector.drawn::after {
    opacity: 1;
}

/* Glow pulse traveling across connector */
.m-arch-connector .arch-pulse {
    position: absolute;
    top: -2px;
    left: -8px;
    width: 8px;
    height: 6px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0;
}

.m-arch-connector.drawn .arch-pulse {
    animation: archPulseTravel 2.5s ease-in-out infinite;
    animation-delay: var(--pulse-delay, 0s);
}

@keyframes archPulseTravel {
    0% {
        left: -8px;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        left: calc(100% + 8px);
        opacity: 0;
    }
}

.m-arch-connector.c1::before {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.5), rgba(59, 130, 246, 0.5));
}

.m-arch-connector.c1::after {
    border-left-color: rgba(59, 130, 246, 0.5);
}

.m-arch-connector.c1 .arch-pulse {
    background: rgba(59, 130, 246, 0.7);
}

.m-arch-connector.c2::before {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.5));
}

.m-arch-connector.c2::after {
    border-left-color: rgba(139, 92, 246, 0.5);
}

.m-arch-connector.c2 .arch-pulse {
    background: rgba(139, 92, 246, 0.7);
}

.m-arch-connector.c3::before {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.5), rgba(16, 185, 129, 0.5));
}

.m-arch-connector.c3::after {
    border-left-color: rgba(16, 185, 129, 0.5);
}

.m-arch-connector.c3 .arch-pulse {
    background: rgba(16, 185, 129, 0.7);
}

/* --- Animations --- */
@keyframes dashFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   7. TESTIMONIALS MARQUEE — Auto-Scrolling Social Proof
   ========================================================================== */
.cs-testimonials-track {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 0 2rem;
}

.cs-testimonials-track::before,
.cs-testimonials-track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.cs-testimonials-track::before {
    left: 0;
    background: linear-gradient(90deg, var(--cs-bg-deep, #060608) 0%, transparent 100%);
}

.cs-testimonials-track::after {
    right: 0;
    background: linear-gradient(270deg, var(--cs-bg-deep, #060608) 0%, transparent 100%);
}

.cs-testimonials-slide {
    display: flex;
    gap: 1.5rem;
    animation: marqueeScroll 35s linear infinite;
    width: max-content;
}

.cs-testimonials-slide:hover {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.cs-testimonial {
    flex-shrink: 0;
    width: 380px;
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 2rem 2rem 1.5rem;
    transition: border-color 0.3s ease;
}

.cs-testimonial:hover {
    border-color: var(--cs-border-hover);
}

.cs-test-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.cs-test-author {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
}

.cs-test-author strong {
    color: var(--cs-blue);
    font-weight: 600;
}


/* ==========================================================================
   8. TECH STACK — Platform Grid
   ========================================================================== */
.cs-tech-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-tech-item {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--cs-bg-panel);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    transition: border-color 0.3s ease, transform 0.35s ease;
}

.cs-tech-item:hover {
    border-color: var(--cs-border-hover);
    transform: translateY(-4px);
}

.cs-tech-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.4rem;
}

.cs-tech-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

.cs-tech-sub {
    font-size: 0.65rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ==========================================================================
   9. STATS COUNTER BAR — Animated Numbers
   ========================================================================== */
.cs-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cs-stat-val {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.cs-stat-num {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.03em;
}

.cs-stat-suffix {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-blue);
    margin-left: 2px;
}

.cs-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #64748b);
    margin-top: 0.5rem;
}

.cs-stat-divider {
    width: 1px;
    height: 50px;
    background: var(--cs-border);
}


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .cs-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cs-hero-text {
        max-width: none;
    }

    .cs-hero-visual {
        display: none;
    }

    .cs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-impact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cs-trigger-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-shift-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-modal-body {
        padding: 2rem 1.5rem;
    }

    .m-split {
        grid-template-columns: 1fr;
    }

    .m-kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .cs-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cs-stats-bar {
        gap: 2rem;
    }

    .cs-stat-num {
        font-size: 2.2rem;
    }

    .m-dash-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .m-dash-charts {
        grid-template-columns: 1fr;
    }

    .m-dash-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cs-hero {
        padding: 140px 0 60px;
    }

    .cs-hero-title {
        font-size: 2.2rem;
    }

    .cs-filter-bar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cs-filter-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cs-search-wrap {
        width: 100%;
    }

    .cs-grid {
        grid-template-columns: 1fr;
    }

    .cs-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-trigger-grid {
        grid-template-columns: 1fr;
    }

    .cs-arch-flow {
        flex-direction: column;
    }

    .cs-arch-arrow {
        transform: rotate(90deg);
    }

    .cs-why-grid {
        grid-template-columns: 1fr;
    }

    .cs-shift-grid {
        grid-template-columns: 1fr;
    }

    .cs-modal-container {
        width: 98vw;
        height: 95vh;
        border-radius: 14px;
    }

    .m-title {
        font-size: 1.5rem;
    }

    .m-kpi-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .m-kpi {
        padding: 1.25rem;
    }

    .m-kpi-val {
        font-size: 1.4rem;
    }

    .m-story-block {
        padding: 1.5rem 1.25rem;
    }

    .m-split {
        grid-template-columns: 1fr;
    }

    .m-bar-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .m-bar-label {
        width: 100%;
    }

    .m-bar-value {
        width: auto;
    }

    .cs-modal-body {
        padding: 1.5rem 1.25rem 2rem;
    }

    .cs-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-stats-bar {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .cs-stat-divider {
        display: none;
    }

    .cs-stat-item {
        min-width: 40%;
    }

    .cs-stat-num {
        font-size: 2rem;
    }

    .cs-testimonial {
        width: 300px;
    }

    .m-dash-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .m-dash-charts {
        grid-template-columns: 1fr;
    }

    .m-dash-bottom {
        grid-template-columns: 1fr;
    }

    .m-dash-donut-card {
        flex-direction: row;
        gap: 1rem;
        justify-content: flex-start;
    }

    .m-dash-tabs {
        flex-wrap: wrap;
    }

    .m-arch {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .m-arch-connector {
        width: 28px;
    }

    .m-arch-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* =============================================
   CASE STUDY PAGE — 3D DEPTH & SHADOW ENHANCEMENTS
   ============================================= */

/* --- Hero floating stats cards --- */
.cs-float-card {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7),
        inset 0 1px 2px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cs-float-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 50px -12px rgba(59, 130, 246, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* --- Filter buttons --- */
.cs-filter-btn {
    box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cs-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.1);
}

.cs-filter-btn.active {
    box-shadow: 0 10px 22px -5px rgba(59, 130, 246, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* --- Search bar --- */
.cs-search-wrap {
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cs-search-input:focus {
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.08);
}

/* --- Case study cards --- */
.cs-card {
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

.cs-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(59, 130, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* --- Card icon badge --- */
.cs-card-icon {
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-card:hover .cs-card-icon {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px -6px rgba(59, 130, 246, 0.4),
        inset 0 2px 5px rgba(255, 255, 255, 0.3);
}

/* --- Impact cards --- */
.cs-impact-card {
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cs-impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px -10px rgba(59, 130, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.12);
}

/* --- Architecture flow steps --- */
.cs-arch-step {
    box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cs-arch-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -8px rgba(59, 130, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.12);
}

/* .cs-arch-num — plain text label, no box effect */
.cs-arch-icon-wrap {
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-arch-step:hover .cs-arch-icon-wrap {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -6px rgba(59, 130, 246, 0.4),
        inset 0 2px 5px rgba(255, 255, 255, 0.25);
}

/* --- Why cards --- */
.cs-why-card {
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cs-why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.12);
}

.cs-why-icon {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

/* --- FAQ items --- */
.cs-faq-item {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cs-faq-item:hover,
.cs-faq-item.active {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -6px rgba(59, 130, 246, 0.25),
        inset 0 1px 3px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(59, 130, 246, 0.12);
}

/* --- Case study modal --- */
.cs-modal-container {
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.95),
        inset 0 1px 3px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --- Modal KPI boxes --- */
.m-kpi {
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.m-kpi:hover {
    box-shadow: 0 16px 32px -8px rgba(59, 130, 246, 0.3),
        inset 0 2px 5px rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* --- Modal monitor & screen --- */
.m-monitor {
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 2px rgba(255, 255, 255, 0.08);
}

.m-monitor:hover {
    transform: perspective(1200px) rotateX(2deg) translateY(-4px);
    box-shadow: 0 40px 70px -15px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 2px 3px rgba(255, 255, 255, 0.12);
}

/* --- Modal dashboard KPI chips --- */
.m-dash-kpi {
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.m-dash-kpi:hover {
    box-shadow: 0 14px 30px -7px rgba(59, 130, 246, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

/* --- Dashboard chart cards --- */
.m-dash-chart-card {
    box-shadow: 0 10px 25px -6px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.m-dash-chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -8px rgba(59, 130, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* --- Donut + table cards in dashboard --- */
.m-dash-donut-card,
.m-dash-table-card {
    box-shadow: 0 10px 25px -6px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.m-dash-donut-card:hover,
.m-dash-table-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -8px rgba(59, 130, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* --- Architecture node icons in modal --- */
.m-arch-icon {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.m-arch-icon:hover {
    box-shadow: 0 12px 26px -6px rgba(59, 130, 246, 0.4),
        inset 0 2px 5px rgba(255, 255, 255, 0.25),
        0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* --- Testimonial cards --- */
.cs-testimonial {
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* --- Tech stack tiles --- */
.cs-tech-item {
    box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cs-tech-item:hover {
    box-shadow: 0 16px 32px -8px rgba(59, 130, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.12);
}

.cs-tech-icon-wrap {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-tech-item:hover .cs-tech-icon-wrap {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 24px -6px rgba(59, 130, 246, 0.35),
        inset 0 2px 5px rgba(255, 255, 255, 0.25);
}

/* --- Bar fills (graphs) --- */
.m-bar-fill,
.m-dash-bar-fill {
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2),
        0 4px 10px -3px rgba(0, 0, 0, 0.4);
    border-radius: 0 4px 4px 0;
}

/* --- Stat counter numbers glow --- */
.cs-stat-num {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.cs-stat-suffix {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* --- Hero graph SVG depth --- */
.cs-hero-graph {
    filter: drop-shadow(0 10px 25px rgba(59, 130, 246, 0.3)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* ==========================================================================
   TECH STACK MARQUEE — Scrolling Tool Strip
   ========================================================================== */
.cs-tech-marquee-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.cs-tech-marquee-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: techMarqueeScroll 28s linear infinite;
}

.cs-tech-marquee-track:hover {
    animation-play-state: paused;
}

.cs-tech-marquee-wrap .cs-tech-item {
    flex-shrink: 0;
    width: 160px;
    text-align: center;
    padding: 1.5rem 1rem;
}

@keyframes techMarqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .cs-tech-marquee-wrap .cs-tech-item {
        width: 130px;
        padding: 1.25rem 0.75rem;
    }
}

/* ==========================================================================
   Light Theme — Case Studies Page Refinement
   ========================================================================== */
html[data-theme="light"] .cs-filter-section,
body.light-theme .cs-filter-section {
    background: rgba(248, 250, 252, 0.92) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .cs-filter-group,
body.light-theme .cs-filter-group {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .cs-filter-btn,
body.light-theme .cs-filter-btn {
    color: #475569 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] .cs-filter-btn:hover,
body.light-theme .cs-filter-btn:hover {
    color: #0f172a !important;
    background: rgba(37, 99, 235, 0.06) !important;
    box-shadow: none !important;
}

html[data-theme="light"] .cs-filter-btn.active,
body.light-theme .cs-filter-btn.active {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.1) !important;
    box-shadow: 0 10px 24px -20px rgba(37, 99, 235, 0.35) !important;
}

html[data-theme="light"] .cs-search-wrap,
body.light-theme .cs-search-wrap {
    box-shadow: none !important;
}

html[data-theme="light"] .cs-search-input,
body.light-theme .cs-search-input {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .cs-search-input::placeholder,
body.light-theme .cs-search-input::placeholder {
    color: #64748b !important;
}

html[data-theme="light"] .cs-search-wrap svg,
body.light-theme .cs-search-wrap svg {
    color: #64748b !important;
}

html[data-theme="light"] .cs-grid-section,
html[data-theme="light"] .cs-section-full,
body.light-theme .cs-grid-section,
body.light-theme .cs-section-full {
    background: #f8fafc !important;
}

html[data-theme="light"] .cs-section-full,
body.light-theme .cs-section-full {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .cs-section-title,
html[data-theme="light"] .cs-impact-industry,
html[data-theme="light"] .cs-trigger-title,
html[data-theme="light"] .cs-arch-step-title,
html[data-theme="light"] .cs-why-title,
html[data-theme="light"] .cs-shift-title,
html[data-theme="light"] .cs-tech-name,
body.light-theme .cs-section-title,
body.light-theme .cs-impact-industry,
body.light-theme .cs-trigger-title,
body.light-theme .cs-arch-step-title,
body.light-theme .cs-why-title,
body.light-theme .cs-shift-title,
body.light-theme .cs-tech-name {
    color: #111827 !important;
}

html[data-theme="light"] .cs-section-sub,
html[data-theme="light"] .cs-trigger-copy,
html[data-theme="light"] .cs-arch-step-desc,
html[data-theme="light"] .cs-why-desc,
html[data-theme="light"] .cs-shift-copy,
html[data-theme="light"] .cs-test-author,
html[data-theme="light"] .cs-tech-sub,
body.light-theme .cs-section-sub,
body.light-theme .cs-trigger-copy,
body.light-theme .cs-arch-step-desc,
body.light-theme .cs-why-desc,
body.light-theme .cs-shift-copy,
body.light-theme .cs-test-author,
body.light-theme .cs-tech-sub {
    color: #475569 !important;
}

html[data-theme="light"] .cs-card,
html[data-theme="light"] .cs-impact-card,
html[data-theme="light"] .cs-trigger-card,
html[data-theme="light"] .cs-arch-step,
html[data-theme="light"] .cs-why-card,
html[data-theme="light"] .cs-shift-card,
html[data-theme="light"] .cs-testimonial,
html[data-theme="light"] .cs-tech-item,
html[data-theme="light"] .cs-faq-item,
body.light-theme .cs-card,
body.light-theme .cs-impact-card,
body.light-theme .cs-trigger-card,
body.light-theme .cs-arch-step,
body.light-theme .cs-why-card,
body.light-theme .cs-shift-card,
body.light-theme .cs-testimonial,
body.light-theme .cs-tech-item,
body.light-theme .cs-faq-item {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: none !important;
}

html[data-theme="light"] .cs-card:hover,
html[data-theme="light"] .cs-impact-card:hover,
html[data-theme="light"] .cs-trigger-card:hover,
html[data-theme="light"] .cs-arch-step:hover,
html[data-theme="light"] .cs-why-card:hover,
html[data-theme="light"] .cs-shift-card:hover,
html[data-theme="light"] .cs-testimonial:hover,
html[data-theme="light"] .cs-tech-item:hover,
html[data-theme="light"] .cs-faq-item:hover,
html[data-theme="light"] .cs-faq-item.is-open,
body.light-theme .cs-card:hover,
body.light-theme .cs-impact-card:hover,
body.light-theme .cs-trigger-card:hover,
body.light-theme .cs-arch-step:hover,
body.light-theme .cs-why-card:hover,
body.light-theme .cs-shift-card:hover,
body.light-theme .cs-testimonial:hover,
body.light-theme .cs-tech-item:hover,
body.light-theme .cs-faq-item:hover,
body.light-theme .cs-faq-item.is-open {
    border-color: rgba(37, 99, 235, 0.16) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1) !important;
}

html[data-theme="light"] .cs-card,
html[data-theme="light"] .cs-card *,
body.light-theme .cs-card,
body.light-theme .cs-card * {
    background-color: unset;
}

html[data-theme="light"] .cs-card,
body.light-theme .cs-card {
    background: #ffffff !important;
}

html[data-theme="light"] .cs-card-header,
body.light-theme .cs-card-header {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
    position: relative;
}

html[data-theme="light"] .cs-card-header::after,
body.light-theme .cs-card-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    pointer-events: none;
}

html[data-theme="light"] .cs-card[data-category="construction"] .cs-card-header,
body.light-theme .cs-card[data-category="construction"] .cs-card-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

html[data-theme="light"] .cs-card[data-category="government"] .cs-card-header,
body.light-theme .cs-card[data-category="government"] .cs-card-header {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
}

html[data-theme="light"] .cs-card[data-category="healthcare"] .cs-card-header,
body.light-theme .cs-card[data-category="healthcare"] .cs-card-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #dcfce7 100%) !important;
}

html[data-theme="light"] .cs-card[data-category="utilities"] .cs-card-header,
body.light-theme .cs-card[data-category="utilities"] .cs-card-header {
    background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%) !important;
}

html[data-theme="light"] .cs-card[data-category="manufacturing"] .cs-card-header,
body.light-theme .cs-card[data-category="manufacturing"] .cs-card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

html[data-theme="light"] .cs-card[data-category="ngo"] .cs-card-header,
body.light-theme .cs-card[data-category="ngo"] .cs-card-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

html[data-theme="light"] .cs-card[data-category="insurance"] .cs-card-header,
html[data-theme="light"] .cs-card[data-category="insurance finance"] .cs-card-header,
body.light-theme .cs-card[data-category="insurance"] .cs-card-header,
body.light-theme .cs-card[data-category="insurance finance"] .cs-card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%) !important;
}

html[data-theme="light"] .cs-card[data-category="consumer tech"] .cs-card-header,
body.light-theme .cs-card[data-category="consumer tech"] .cs-card-header {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
}

html[data-theme="light"] .cs-card-pattern,
body.light-theme .cs-card-pattern {
    opacity: 0.38 !important;
}

html[data-theme="light"] .cs-card-icon,
body.light-theme .cs-card-icon {
    color: #0f172a !important;
    opacity: 0.28 !important;
    box-shadow: none !important;
}

html[data-theme="light"] .cs-card-body,
html[data-theme="light"] .cs-card-meta,
html[data-theme="light"] .cs-card-desc,
html[data-theme="light"] .cs-card-strip,
html[data-theme="light"] .cs-strip-item,
html[data-theme="light"] .cs-card-cta,
body.light-theme .cs-card-body,
body.light-theme .cs-card-meta,
body.light-theme .cs-card-desc,
body.light-theme .cs-card-strip,
body.light-theme .cs-strip-item,
body.light-theme .cs-card-cta {
    background: transparent !important;
}

html[data-theme="light"] .cs-client-name,
body.light-theme .cs-client-name {
    color: #111827 !important;
}

html[data-theme="light"] .cs-industry-pill,
body.light-theme .cs-industry-pill {
    color: #64748b !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .cs-card-desc,
body.light-theme .cs-card-desc {
    color: #374151 !important;
}

html[data-theme="light"] .cs-card-strip,
body.light-theme .cs-card-strip {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .cs-strip-val,
body.light-theme .cs-strip-val {
    color: #111827 !important;
}

html[data-theme="light"] .cs-strip-label,
body.light-theme .cs-strip-label {
    color: #6b7280 !important;
}

html[data-theme="light"] .cs-card-cta,
body.light-theme .cs-card-cta {
    color: #2563eb !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .cs-impact-num,
html[data-theme="light"] .cs-test-author strong,
html[data-theme="light"] .cs-stat-suffix,
body.light-theme .cs-impact-num,
body.light-theme .cs-test-author strong,
body.light-theme .cs-stat-suffix {
    color: #2563eb !important;
}

html[data-theme="light"] .cs-impact-label,
html[data-theme="light"] .cs-arch-num,
body.light-theme .cs-impact-label,
body.light-theme .cs-arch-num {
    color: #64748b !important;
}

html[data-theme="light"] .cs-trigger-icon,
body.light-theme .cs-trigger-icon {
    box-shadow: none !important;
    color: #111827 !important;
}

html[data-theme="light"] .cs-arch-arrow,
body.light-theme .cs-arch-arrow {
    color: #475569 !important;
}

html[data-theme="light"] .cs-why-icon,
html[data-theme="light"] .cs-tech-icon-wrap,
body.light-theme .cs-why-icon,
body.light-theme .cs-tech-icon-wrap {
    box-shadow: none !important;
}

html[data-theme="light"] .cs-shift-state,
body.light-theme .cs-shift-state {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .cs-shift-icon,
body.light-theme .cs-shift-icon {
    box-shadow: none !important;
    color: #111827 !important;
}

html[data-theme="light"] .cs-shift-label.before,
body.light-theme .cs-shift-label.before {
    color: #b91c1c !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.16) !important;
}

html[data-theme="light"] .cs-shift-label.after,
body.light-theme .cs-shift-label.after {
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.16) !important;
}

html[data-theme="light"] .cs-testimonials-track::before,
body.light-theme .cs-testimonials-track::before {
    background: linear-gradient(90deg, #f8fafc 0%, transparent 100%) !important;
}

html[data-theme="light"] .cs-testimonials-track::after,
body.light-theme .cs-testimonials-track::after {
    background: linear-gradient(270deg, #f8fafc 0%, transparent 100%) !important;
}

html[data-theme="light"] .cs-test-text,
body.light-theme .cs-test-text {
    color: #374151 !important;
}

html[data-theme="light"] .cs-stats-bar,
body.light-theme .cs-stats-bar {
    background: transparent !important;
}

html[data-theme="light"] .cs-stat-num,
body.light-theme .cs-stat-num {
    color: #111827 !important;
    text-shadow: none !important;
}

html[data-theme="light"] .cs-stat-label,
body.light-theme .cs-stat-label {
    color: #475569 !important;
}

html[data-theme="light"] .cs-stat-divider,
body.light-theme .cs-stat-divider {
    background: rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .cs-faq-q:hover,
body.light-theme .cs-faq-q:hover {
    background: rgba(37, 99, 235, 0.03) !important;
}

html[data-theme="light"] .cs-faq-q-text,
body.light-theme .cs-faq-q-text {
    color: #111827 !important;
}

html[data-theme="light"] .cs-faq-toggle,
body.light-theme .cs-faq-toggle {
    background: rgba(139, 92, 246, 0.08) !important;
}

html[data-theme="light"] .cs-faq-toggle-icon::before,
html[data-theme="light"] .cs-faq-toggle-icon::after,
body.light-theme .cs-faq-toggle-icon::before,
body.light-theme .cs-faq-toggle-icon::after {
    background: #8b5cf6 !important;
}

html[data-theme="light"] .cs-faq-a-content,
body.light-theme .cs-faq-a-content {
    color: #374151 !important;
}

html[data-theme="light"] .cs-float-card,
body.light-theme .cs-float-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.25) !important;
    backdrop-filter: blur(14px) !important;
}

html[data-theme="light"] .cs-float-label,
body.light-theme .cs-float-label {
    color: #64748b !important;
}

html[data-theme="light"] .cs-float-value,
body.light-theme .cs-float-value {
    color: #111827 !important;
}

html[data-theme="light"] .cs-hero-graph,
body.light-theme .cs-hero-graph {
    filter: none !important;
    opacity: 0.22 !important;
}

html[data-theme="light"] .cs-modal-container,
body.light-theme .cs-modal-container {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 40px 80px -34px rgba(15, 23, 42, 0.35) !important;
}

html[data-theme="light"] .cs-modal-topbar,
body.light-theme .cs-modal-topbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .cs-modal-label,
body.light-theme .cs-modal-label {
    color: #64748b !important;
}

html[data-theme="light"] .cs-modal-close,
body.light-theme .cs-modal-close {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
}

html[data-theme="light"] .cs-modal-body,
body.light-theme .cs-modal-body {
    scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
}

html[data-theme="light"] .cs-modal-body::-webkit-scrollbar-thumb,
body.light-theme .cs-modal-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .m-hero-header,
body.light-theme .m-hero-header {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .m-title,
html[data-theme="light"] .m-bar-value,
html[data-theme="light"] .m-quote-text,
html[data-theme="light"] .m-dash-title,
html[data-theme="light"] .m-dash-kpi-val,
html[data-theme="light"] .m-dash-donut-val,
html[data-theme="light"] .m-arch-node-label,
body.light-theme .m-title,
body.light-theme .m-bar-value,
body.light-theme .m-quote-text,
body.light-theme .m-dash-title,
body.light-theme .m-dash-kpi-val,
body.light-theme .m-dash-donut-val,
body.light-theme .m-arch-node-label {
    color: #111827 !important;
}

html[data-theme="light"] .m-subtitle,
html[data-theme="light"] .m-kpi-label,
html[data-theme="light"] .m-section-label,
html[data-theme="light"] .m-panel-list li,
html[data-theme="light"] .m-bar-label,
html[data-theme="light"] .m-dash-tab,
html[data-theme="light"] .m-dash-kpi-label,
html[data-theme="light"] .m-dash-chart-label,
html[data-theme="light"] .m-dash-bar-name,
html[data-theme="light"] .m-dash-bar-pct,
html[data-theme="light"] .m-dash-donut-label,
html[data-theme="light"] .m-dash-table th,
body.light-theme .m-subtitle,
body.light-theme .m-kpi-label,
body.light-theme .m-section-label,
body.light-theme .m-panel-list li,
body.light-theme .m-bar-label,
body.light-theme .m-dash-tab,
body.light-theme .m-dash-kpi-label,
body.light-theme .m-dash-chart-label,
body.light-theme .m-dash-bar-name,
body.light-theme .m-dash-bar-pct,
body.light-theme .m-dash-donut-label,
body.light-theme .m-dash-table th {
    color: #64748b !important;
}

html[data-theme="light"] .m-section-label::after,
body.light-theme .m-section-label::after {
    background: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .m-kpi,
html[data-theme="light"] .m-story-block,
html[data-theme="light"] .m-panel,
html[data-theme="light"] .m-bars-wrap,
html[data-theme="light"] .m-dash-kpi,
html[data-theme="light"] .m-dash-chart-card,
html[data-theme="light"] .m-dash-donut-card,
html[data-theme="light"] .m-dash-table-card,
html[data-theme="light"] .m-monitor,
body.light-theme .m-kpi,
body.light-theme .m-story-block,
body.light-theme .m-panel,
body.light-theme .m-bars-wrap,
body.light-theme .m-dash-kpi,
body.light-theme .m-dash-chart-card,
body.light-theme .m-dash-donut-card,
body.light-theme .m-dash-table-card,
body.light-theme .m-monitor {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .m-kpi::after,
body.light-theme .m-kpi::after {
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.08), transparent) !important;
}

html[data-theme="light"] .m-kpi.is-neutral .m-kpi-val,
body.light-theme .m-kpi.is-neutral .m-kpi-val {
    color: #111827 !important;
}

html[data-theme="light"] .m-story-intro,
html[data-theme="light"] .m-story-list li,
body.light-theme .m-story-intro,
body.light-theme .m-story-list li {
    color: #475569 !important;
}

html[data-theme="light"] .m-bar-group-label,
body.light-theme .m-bar-group-label {
    color: #334155 !important;
}

html[data-theme="light"] .m-bar-track,
html[data-theme="light"] .m-dash-bar-track,
body.light-theme .m-bar-track,
body.light-theme .m-dash-bar-track {
    background: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .m-quote,
body.light-theme .m-quote {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border-color: rgba(59, 130, 246, 0.14) !important;
}

html[data-theme="light"] .m-quote::before,
body.light-theme .m-quote::before {
    color: rgba(59, 130, 246, 0.12) !important;
}

html[data-theme="light"] .m-impact-chip,
body.light-theme .m-impact-chip {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.14) !important;
    color: #1d4ed8 !important;
}

html[data-theme="light"] .m-dash,
body.light-theme .m-dash {
    background: #f8fafc !important;
    border-color: rgba(59, 130, 246, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] .m-dash::before,
body.light-theme .m-dash::before {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px) !important;
    opacity: 0.4 !important;
}

html[data-theme="light"] .m-dash-header,
body.light-theme .m-dash-header {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .m-dash-tab.active,
body.light-theme .m-dash-tab.active {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #2563eb !important;
}

html[data-theme="light"] .m-dash-kpi:hover,
body.light-theme .m-dash-kpi:hover {
    background: rgba(37, 99, 235, 0.04) !important;
}

html[data-theme="light"] .m-dash-line-chart .line-area,
body.light-theme .m-dash-line-chart .line-area {
    opacity: 0.8 !important;
}

html[data-theme="light"] .m-dash-table td,
body.light-theme .m-dash-table td {
    color: #334155 !important;
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .m-dash-table tbody tr:hover,
body.light-theme .m-dash-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04) !important;
}

html[data-theme="light"] .m-screen,
body.light-theme .m-screen {
    background: #e2e8f0 !important;
}

html[data-theme="light"] .m-slider-btn,
body.light-theme .m-slider-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .m-slide-dot,
body.light-theme .m-slide-dot {
    background: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] .m-slide-dot.active,
body.light-theme .m-slide-dot.active {
    background: #2563eb !important;
}

html[data-theme="light"] .m-monitor-stand,
html[data-theme="light"] .m-monitor-base,
body.light-theme .m-monitor-stand,
body.light-theme .m-monitor-base {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%) !important;
}

/* =============================================
   CASE STUDIES MOBILE EXPERIENCE UPGRADE
   ============================================= */

@media (max-width: 768px) {
    .cs-hero {
        padding: calc(var(--nav-height, 72px) + 2.25rem) 0 3.5rem !important;
    }

    .cs-hero-inner {
        text-align: left !important;
        gap: 2rem !important;
    }

    .cs-hero-title {
        font-size: clamp(2.15rem, 10vw, 3rem) !important;
        line-height: 1.06 !important;
        letter-spacing: 0 !important;
    }

    .cs-hero-subtitle {
        max-width: 100% !important;
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }

    .cs-filter-bar {
        align-items: stretch !important;
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    .cs-filter-group {
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    .cs-filter-group::-webkit-scrollbar {
        display: none;
    }

    .cs-filter-btn {
        flex: 0 0 auto;
        min-height: 38px !important;
        padding: 0.58rem 0.85rem !important;
        font-size: 0.78rem !important;
    }

    .cs-search-wrap {
        min-height: 44px !important;
    }

    .cs-card,
    .cs-impact-card,
    .cs-trigger-card,
    .cs-why-card,
    .cs-shift-card,
    .cs-faq-item {
        border-radius: 16px !important;
    }

    .cs-card-body,
    .cs-impact-card,
    .cs-trigger-card,
    .cs-why-card,
    .cs-shift-card {
        padding: 1.25rem !important;
    }

    .cs-impact-grid,
    .cs-tech-grid,
    .m-dash-kpis {
        grid-template-columns: 1fr !important;
    }

    .cs-stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .cs-stat-item {
        min-width: 0 !important;
        padding: 1rem !important;
        border: 1px solid var(--cs-border, rgba(255, 255, 255, 0.08));
        border-radius: 14px;
    }

    .cs-modal-container {
        width: calc(100vw - 16px) !important;
        height: calc(100vh - 20px) !important;
        border-radius: 16px !important;
    }

    .cs-modal-topbar {
        height: 50px !important;
        padding: 0 1rem !important;
    }

    .cs-modal-label {
        max-width: calc(100vw - 92px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cs-modal-body {
        padding: 1.25rem 1rem 1.75rem !important;
    }

    .m-hero-header,
    .m-story-block,
    .m-panel,
    .m-bars-wrap,
    .m-dash {
        border-radius: 16px !important;
    }

    .m-title {
        font-size: clamp(1.55rem, 8vw, 2rem) !important;
        line-height: 1.15 !important;
    }

    .m-subtitle {
        font-size: 0.94rem !important;
        line-height: 1.6 !important;
    }

    .m-impact-row,
    .m-dash-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }

    .m-impact-row::-webkit-scrollbar,
    .m-dash-tabs::-webkit-scrollbar {
        display: none;
    }

    .m-impact-chip,
    .m-dash-tab {
        flex: 0 0 auto;
    }

    .m-dash {
        padding: 1rem !important;
    }
}

@media (max-width: 420px) {
    .cs-hero-title {
        font-size: clamp(2rem, 10vw, 2.55rem) !important;
    }

    .cs-stats-bar {
        grid-template-columns: 1fr !important;
    }
}