* { font-family: 'DM Sans', sans-serif; }
        h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Space Grotesk', sans-serif; }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0d0d12; }
        ::-webkit-scrollbar-thumb { background: #454551; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #6b6b79; }

        /* Grain texture overlay */
        .grain::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 1;
        }

        /* Animated gradient border */
        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
        .gradient-border {
            --angle: 0deg;
            border-image: conic-gradient(from var(--angle), #313097, #10b981, #313097) 1;
            animation: rotate-border 4s linear infinite;
        }
        @keyframes rotate-border { to { --angle: 360deg; } }

        /* Reveal animations */
        .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-left.active { opacity: 1; transform: translateX(0); }
        .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-right.active { opacity: 1; transform: translateX(0); }
        .reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        /* `transform: none`, not `scale(1)` — see the matching note in index.html. Ending on a
           transform keeps the element composited and its text rasterised through the scale,
           which clipped edge glyphs until a repaint. Kept in step with the homepage rule. */
        .reveal-scale.active { opacity: 1; transform: none; }
        /* Site-wide reduced-motion safety net (in addition to per-element handlers) */
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto !important; }
            .reveal, .reveal-left, .reveal-right, .reveal-scale {
                transition: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        /* Stagger children */
        .stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
        .stagger-children.active > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
        .stagger-children.active > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
        .stagger-children.active > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
        .stagger-children.active > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
        .stagger-children.active > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
        .stagger-children.active > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
        .stagger-children.active > *:nth-child(7) { transition-delay: 600ms; opacity: 1; transform: translateY(0); }

        /* Marquee */
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .marquee-track { animation: marquee 30s linear infinite; }
        .marquee-track:hover { animation-play-state: paused; }

        /* Glow effects */
        .glow-blue { box-shadow: 0 0 60px rgba(49, 48, 151, 0.15), 0 0 120px rgba(49, 48, 151, 0.05); }
        .glow-mint { box-shadow: 0 0 60px rgba(16, 185, 129, 0.15), 0 0 120px rgba(16, 185, 129, 0.05); }

        /* Horizontal scroll for services */
        .services-scroll { scrollbar-width: none; -ms-overflow-style: none; }
        .services-scroll::-webkit-scrollbar { display: none; }

        /* Nav */
        .nav-glass { background: rgba(13,13,18,0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
        .nav-solid { background: rgba(13,13,18,0.97); backdrop-filter: blur(20px); }

        /* Two-stage navbar: transparent at top → frosted capsule when scrolled */
        #navbar > div { transition: max-width 0.45s ease, margin 0.45s ease, padding 0.45s ease, background 0.45s ease, border-color 0.45s ease, border-radius 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease; border: 1px solid transparent; }
        #navbar.nav-capsule > div {
            max-width: min(64rem, calc(100% - 32px));
            margin: 8px auto;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            background: rgba(14, 18, 30, 0.6);
            -webkit-backdrop-filter: blur(16px) saturate(130%);
                    backdrop-filter: blur(16px) saturate(130%);
            border-color: rgba(255, 255, 255, 0.08);
            border-radius: 9999px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
        }
        [data-theme="light"] #navbar.nav-capsule > div {
            background: rgba(255, 255, 255, 0.65);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }
        @media (prefers-reduced-motion: reduce) {
            #navbar > div { transition: none; }
        }

        /* FAQ */
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease; padding-top: 0; padding-bottom: 0; }
        .faq-answer.open { max-height: 400px; padding-top: 0; padding-bottom: 1.5rem; }
        .faq-chevron { transition: transform 0.3s ease; }
        .faq-chevron.open { transform: rotate(180deg); }

        /* Pulse */
        @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
        .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

        /* Progress bar */
        .scroll-progress { transform-origin: left; transform: scaleX(0); will-change: transform; }

        /* Card tilt on hover */
        .tilt-card { transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
        /* Override stagger's slower 0.5s transition once entrance animation is done */
        .stagger-children.active > .tilt-card { transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease; }
        .stagger-children.active > .tilt-card:hover,
        .tilt-card:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 24px 56px rgba(0,0,0,0.45); }
        /* Service cards — flex layout for button alignment */
        #services-grid .tilt-card { display: flex; flex-direction: column; }
        #services-grid .tilt-card > .relative { display: flex; flex-direction: column; flex: 1; }
        #services-grid .tilt-card > .relative > ul { flex: 1; }
        /* Service card hover border — odd (blue) / even (mint) */
        #services-grid .tilt-card:nth-child(odd):hover { border-color: rgba(96,165,250,0.35); }
        #services-grid .tilt-card:nth-child(even):hover { border-color: rgba(16,185,129,0.35); }
        /* Service card CTA buttons — alternating colour */
        #services-grid .tilt-card:nth-child(odd) .service-card-cta { background: rgb(96,165,250); color: #0D0D12; }
        #services-grid .tilt-card:nth-child(even) .service-card-cta { background: rgb(16,185,129); color: #0D0D12; }
        #services-grid .tilt-card:nth-child(odd):hover .service-card-cta { background: rgb(147,197,253); }
        #services-grid .tilt-card:nth-child(even):hover .service-card-cta { background: rgb(52,211,153); }

        /* Text gradient */
        .text-gradient-gold { background: linear-gradient(135deg, #313097, #313097, #313097); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .text-gradient-mint { background: linear-gradient(135deg, #34d399, #10b981, #059669); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

        /* Comparison table */
        .comparison-row { transition: background 0.2s ease; }
        .comparison-row:hover { background: rgba(49, 48, 151, 0.03); }

        /* Form focus */
        input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 2px rgba(49, 48, 151, 0.3); border-color: #313097; }

        /* Counter animation */
        @keyframes count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Horizontal line decoration */
        .line-accent { position: relative; }
        .line-accent::before { content: ''; position: absolute; left: 0; top: 50%; width: 40px; height: 2px; background: #313097; }

        /* Page transitions */
        .page-section { transition: opacity 0.3s ease, transform 0.3s ease; }
        .page-section.hiding { opacity: 0; transform: translateY(-20px); pointer-events: none; }
        .page-section.showing { opacity: 1; transform: translateY(0); }
        .content-page { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; }
        .content-page.visible { display: block; opacity: 1; transform: translateY(0); }

        /* Back-to-top button */
        #back-to-top { opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
        #back-to-top.visible { opacity: 1; pointer-events: auto; }
        #back-to-top:hover { transform: translateY(-3px); }

        /* Section dividers */
        .section-divider { height: 2px; background: linear-gradient(90deg, transparent, #313097, #10b981, #313097, transparent); opacity: 0.3; }

        /* Filter tabs */
        .filter-tab { transition: all 0.3s ease; }
        .filter-tab.active { background: #313097; color: #fff; }
        .filter-tab:not(.active):hover { background: rgba(49,48,151,0.15); }

        /* Service filter transitions */
        .service-card-wrapper { transition: opacity 0.3s ease, transform 0.3s ease; }
        .service-card-wrapper.filtered-out { opacity: 0; transform: scale(0.95); position: absolute; pointer-events: none; }

        /* Service detail views */
        .service-detail-view { display: none; }
        .service-detail-view.active { display: block; padding-top: 24px; }
        .service-detail-back {
            display: inline-flex; align-items: center; gap: 8px;
            color: rgb(138,138,150); font-size: 13px; font-weight: 500;
            cursor: pointer; margin-bottom: 48px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(42,42,51,0.60);
            border-radius: 9999px; padding: 8px 18px; transition: all 0.25s ease;
            position: sticky; top: 80px; z-index: 20;
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .service-detail-back:hover { color: #fff; border-color: rgba(96,165,250,0.40); background: rgba(96,165,250,0.07); }
        .service-detail-header { margin-bottom: 36px; }
        .service-detail-header h3 {
            font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 700;
            color: #fff; line-height: 1.15; margin-bottom: 18px; letter-spacing: -0.3px;
        }
        .service-detail-header .intro { font-size: 16px; color: rgb(176,176,186); max-width: 820px; line-height: 1.75; margin-bottom: 10px; }
        .service-highlight-box {
            background: rgba(96,165,250,0.06); border: 1px solid rgba(96,165,250,0.20);
            border-left: 3px solid rgb(96,165,250); padding: 16px 20px; margin: 28px 0;
            font-size: 15px; line-height: 1.65; border-radius: 8px; color: rgb(176,176,186);
        }
        .service-highlight-box strong { color: rgb(96,165,250); }
        .service-sub-group { margin-bottom: 48px; }
        .service-sub-group-label {
            font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 2px; color: rgb(96,165,250);
            margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(42,42,51,0.60);
            display: flex; align-items: center; gap: 10px;
        }
        .service-sub-group-label::before { content: ''; display: block; width: 14px; height: 1.5px; background: rgb(96,165,250); flex-shrink: 0; }
        .service-sub-item {
            background: rgba(26,26,33,0.55); border: 1px solid rgba(42,42,51,0.60);
            border-left: 3px solid rgb(96,165,250); border-radius: 8px;
            padding: 20px 24px; margin-bottom: 12px; transition: border-color 0.2s;
        }
        .service-sub-item:hover { border-color: rgba(96,165,250,0.30); border-left-color: rgb(96,165,250); }
        .service-sub-item h4 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 10px; }
        .service-sub-item p { font-size: 15px; color: rgb(176,176,186); line-height: 1.68; margin-bottom: 8px; }
        .service-sub-item p strong { color: rgb(96,165,250); font-weight: 600; }
        .service-sub-item ul { list-style: none; padding: 0; margin-top: 8px; }
        .service-sub-item ul li { font-size: 15px; color: rgb(176,176,186); line-height: 1.6; margin-bottom: 6px; padding-left: 18px; position: relative; }
        .service-sub-item ul li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgb(16,185,129); }
        .service-cta-block {
            background: rgba(49,48,151,0.15); border: 1px solid rgba(49,48,151,0.30);
            border-left: 3px solid rgb(49,48,151); border-radius: 8px;
            padding: 22px 28px; margin: 40px 0;
            display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
        }
        .service-cta-block p { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: #fff; margin: 0; }
        .service-cta-block a {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgb(49,48,151); color: white;
            font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
            padding: 10px 22px; border-radius: 9999px; text-decoration: none; white-space: nowrap; transition: all 0.25s ease;
        }
        .service-cta-block a:hover { background: rgb(69,68,185); transform: translateX(2px); }

        /* Light theme overrides for service detail views */
        [data-theme="light"] .service-detail-back { background: rgba(240,240,245,0.85); border-color: rgba(49,48,151,0.1); color: #5a5a75; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        [data-theme="light"] .service-detail-back:hover { background: rgba(49,48,151,0.08); color: #313097; }
        [data-theme="light"] .service-detail-header h3 { color: #1a1a2e; }
        [data-theme="light"] .service-detail-header .intro { color: #5a5a75; }
        [data-theme="light"] .service-highlight-box { background: rgba(49,48,151,0.05); border-color: rgba(49,48,151,0.15); border-left-color: #313097; color: #5a5a75; }
        [data-theme="light"] .service-highlight-box strong { color: #313097; }
        [data-theme="light"] .service-sub-group-label { color: #313097; border-bottom-color: #e5e5ed; }
        [data-theme="light"] .service-sub-group-label::before { background: #313097; }
        [data-theme="light"] .service-sub-item { background: #f8f8fb; border-color: #e5e5ed; border-left-color: #313097; }
        [data-theme="light"] .service-sub-item:hover { border-color: rgba(49,48,151,0.3); }
        [data-theme="light"] .service-sub-item h4 { color: #1a1a2e; }
        [data-theme="light"] .service-sub-item p { color: #5a5a75; }
        [data-theme="light"] .service-sub-item p strong { color: #313097; }
        [data-theme="light"] .service-sub-item ul li { color: #5a5a75; }
        [data-theme="light"] .service-cta-block { background: rgba(49,48,151,0.05); border-color: rgba(49,48,151,0.15); }
        [data-theme="light"] .service-cta-block p { color: #1a1a2e; }

        /* Article tabs */
        .article-tab { transition: all 0.2s ease; white-space: nowrap; }
        .article-tab.active { color: #313097; border-bottom: 2px solid #313097; }
        .article-tab-bar { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
        .article-tab-bar::-webkit-scrollbar { display: none; }
        .article-panel { display: none; }
        .article-panel.active { display: block; }

        /* Article content styles */
        .article-content h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 1rem; margin-top: 2rem; }
        .article-content h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: 0.75rem; margin-top: 1.5rem; }
        .article-content p { color: #b0b0ba; font-size: 0.95rem; line-height: 1.75; margin-bottom: 1rem; }
        .article-content strong { color: #fff; }
        .article-content table { width: 100%; font-size: 0.875rem; margin-bottom: 1.5rem; }
        .article-content thead tr { border-bottom: 1px solid rgba(69,69,81,0.6); }
        .article-content th { padding: 0.75rem 1rem; text-align: left; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #8a8a96; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }
        .article-content td { padding: 0.75rem 1rem; color: #b0b0ba; border-bottom: 1px solid rgba(69,69,81,0.3); }
        .article-content ul { list-style: none; padding: 0; margin-bottom: 1rem; }
        .article-content ul li { padding: 0.25rem 0 0.25rem 1.5rem; position: relative; color: #b0b0ba; font-size: 0.95rem; }
        .article-content ul li::before { content: ''; position: absolute; left: 0; top: 0.75rem; width: 6px; height: 6px; border-radius: 50%; background: #313097; }
        .article-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
        .article-content ol li { padding: 0.25rem 0; color: #b0b0ba; font-size: 0.95rem; }
        .article-content hr { border: none; height: 1px; background: rgba(69,69,81,0.4); margin: 2rem 0; }
        .article-content blockquote { border-left: 4px solid #313097; background: rgba(49,48,151,0.05); padding: 1rem 1.5rem; border-radius: 0 0.5rem 0.5rem 0; margin-bottom: 1.5rem; }
        .article-content blockquote p { margin-bottom: 0; }

        /* Case study cards */
        #cs-cards .cs-card { transition: border-color 0.3s ease; }
        #cs-cards .cs-card:hover { border-color: rgba(49,48,151,0.3); }

        /* Testimonial carousel */
        .testimonial-card { transition: opacity 0.5s ease, transform 0.5s ease; }
        .testimonial-dot { width: 8px; height: 8px; border-radius: 50%; background: #454551; transition: all 0.3s ease; cursor: pointer; }
        .testimonial-dot.active { background: #313097; transform: scale(1.3); }
        .testimonial-carousel { position: relative; overflow: hidden; }
        .testimonial-track { display: flex; will-change: transform; align-items: flex-start; }
        .testimonial-slide { flex: 0 0 100%; box-sizing: border-box; padding: 0 0.75rem; }
        @media (min-width: 768px) { .testimonial-slide { flex: 0 0 33.3333%; } }
        .testimonial-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; }
        .testimonial-nav:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
        .testimonial-nav.prev { left: 0; }
        .testimonial-nav.next { right: 0; }
        [data-theme="light"] .testimonial-nav { background: rgba(49,48,151,0.08); border-color: rgba(49,48,151,0.15); color: #323096; }
        [data-theme="light"] .testimonial-nav:hover { background: rgba(49,48,151,0.15); color: #323096; }

        /* Insights + Case Studies carousels (Swiper v11) */
        .insights-swiper, .cs-swiper { padding: 10px 0 30px; overflow: hidden; }
        .insights-swiper .swiper-slide, .cs-swiper .swiper-slide { width: 420px; height: auto; display: flex; }
        .insights-swiper .swiper-slide > .tilt-card, .cs-swiper .swiper-slide > .tilt-card { width: 100%; }
        @media (max-width: 768px) {
            .insights-swiper .swiper-slide, .cs-swiper .swiper-slide { width: 320px; }
        }
        .swiper-button-prev-insights, .swiper-button-next-insights,
        .swiper-button-prev-cs, .swiper-button-next-cs {
            position: absolute; top: 50%; z-index: 10; width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 9999px; background: rgba(15,15,17,0.6);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            color: white; transform: translateY(-50%); cursor: pointer; border: 0;
            transition: background-color .2s, opacity .2s;
        }
        .swiper-button-prev-insights, .swiper-button-prev-cs { left: -8px; }
        .swiper-button-next-insights, .swiper-button-next-cs { right: -8px; }
        .swiper-button-prev-insights:hover, .swiper-button-next-insights:hover,
        .swiper-button-prev-cs:hover, .swiper-button-next-cs:hover { background: rgba(49,48,151,0.8); }
        .insights-swiper-pagination, .cs-swiper-pagination { position: relative; text-align: center; margin-top: 16px; }
        .insights-swiper-pagination .swiper-pagination-bullet,
        .cs-swiper-pagination .swiper-pagination-bullet {
            width: 8px; height: 8px; background: rgba(255,255,255,0.25); opacity: 1;
            transition: background-color .2s, width .2s;
        }
        .insights-swiper-pagination .swiper-pagination-bullet-active,
        .cs-swiper-pagination .swiper-pagination-bullet-active {
            background: rgb(49,48,151); width: 24px; border-radius: 4px;
        }

        /* Animated checkmark for case studies */
        @keyframes checkmark-draw { 0% { stroke-dashoffset: 24; } 100% { stroke-dashoffset: 0; } }
        .checkmark-icon svg { stroke-dasharray: 24; stroke-dashoffset: 24; }
        .checkmark-icon.animated svg { animation: checkmark-draw 0.6s ease forwards; }

        /* Mobile responsive overrides */
        @media (max-width: 768px) {
            .hero-stats { grid-template-columns: 1fr; }
        }

        /* ===== THEME TOGGLE ===== */
        .theme-toggle {
            position: relative;
            width: 64px;
            height: 30px;
            border-radius: 15px;
            border: none;
            cursor: pointer;
            overflow: hidden;
            padding: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            outline: none;
            flex-shrink: 0;
        }
        .theme-toggle:focus-visible { outline: 2px solid #7b9ce0; outline-offset: 2px; }

        /* Track background — night: black-to-grey bands */
        .theme-toggle-track {
            position: absolute;
            inset: 0;
            border-radius: 15px;
            background: linear-gradient(90deg, #000 0%, #0a0a0a 18%, #1a1a1a 30%, #333 48%, #555 65%, #777 82%, #999 100%);
            transition: background 0.5s ease;
        }
        /* Light: purple-blue gradient bands */
        [data-theme="light"] .theme-toggle-track {
            background: linear-gradient(90deg, #7b8fd4 0%, #7f8dd8 20%, #8390dc 40%, #8e96e4 55%, #9ba0ea 70%, #a8aaf0 85%, #b5b8f5 100%);
        }

        /* Curved gradient band overlays for depth */
        .theme-toggle-bands {
            position: absolute;
            inset: 0;
            border-radius: 15px;
            pointer-events: none;
            overflow: hidden;
        }
        .theme-toggle-band {
            position: absolute;
            top: -10px;
            bottom: -10px;
            border-radius: 50%;
            transition: background 0.5s ease, opacity 0.5s ease;
        }
        .band-1 { left: 20%; width: 28px; background: rgba(40,40,40,0.5); }
        .band-2 { left: 38%; width: 24px; background: rgba(80,80,80,0.45); }
        .band-3 { left: 52%; width: 22px; background: rgba(120,120,120,0.35); }
        .band-4 { left: 66%; width: 20px; background: rgba(160,160,160,0.25); }
        [data-theme="light"] .band-1 { background: rgba(120,120,200,0.25); }
        [data-theme="light"] .band-2 { background: rgba(130,130,210,0.2); }
        [data-theme="light"] .band-3 { background: rgba(140,140,220,0.18); }
        [data-theme="light"] .band-4 { background: rgba(150,150,230,0.12); }

        /* Stars — scattered across the full track */
        .theme-toggle-stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .theme-toggle-stars svg {
            position: absolute;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        /* Large stars */
        .tts-1 { left: 2px; top: 3px; }
        .tts-2 { left: 6px; top: 16px; }
        .tts-3 { left: 16px; top: 10px; }
        /* Medium stars */
        .tts-4 { left: 11px; top: 2px; }
        .tts-5 { left: 24px; top: 18px; }
        .tts-6 { left: 20px; top: 4px; }
        .tts-7 { left: 30px; top: 12px; }
        /* Small stars */
        .tts-8 { left: 5px; top: 10px; }
        .tts-9 { left: 14px; top: 21px; }
        .tts-10 { left: 27px; top: 5px; }
        .tts-11 { left: 34px; top: 20px; }
        .tts-12 { left: 22px; top: 22px; }
        /* Tiny dot stars */
        .tts-13 { left: 9px; top: 7px; }
        .tts-14 { left: 18px; top: 16px; }
        .tts-15 { left: 28px; top: 9px; }
        .tts-16 { left: 33px; top: 3px; }
        [data-theme="light"] .theme-toggle-stars svg { opacity: 0; transform: scale(0); }

        /* Clouds — large, layered, spanning bottom-right */
        .theme-toggle-clouds {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            border-radius: 15px;
        }
        /* Back cloud layer — light lavender */
        .cloud-back {
            position: absolute;
            right: -2px;
            bottom: -4px;
            width: 46px;
            height: 26px;
            transition: opacity 0.45s ease, transform 0.45s ease;
            opacity: 0;
            transform: translateX(12px);
        }
        .cloud-back-shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(180,185,220,0.75);
        }
        .cbs-1 { width: 20px; height: 20px; bottom: 0; right: 4px; }
        .cbs-2 { width: 24px; height: 18px; bottom: 0; right: 16px; }
        .cbs-3 { width: 16px; height: 14px; bottom: 2px; right: 32px; }
        .cbs-4 { width: 46px; height: 12px; bottom: -2px; right: 0; border-radius: 20px; }

        /* Mid cloud layer — pale blue */
        .cloud-mid {
            position: absolute;
            right: -2px;
            bottom: -3px;
            width: 40px;
            height: 24px;
            transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
            opacity: 0;
            transform: translateX(10px);
        }
        .cloud-mid-shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(200,210,240,0.85);
        }
        .cms-1 { width: 18px; height: 18px; bottom: 0; right: 2px; }
        .cms-2 { width: 20px; height: 16px; bottom: 0; right: 14px; }
        .cms-3 { width: 14px; height: 12px; bottom: 2px; right: 28px; }
        .cms-4 { width: 40px; height: 10px; bottom: -2px; right: 0; border-radius: 20px; }

        /* Front cloud layer — bright white */
        .cloud-front {
            position: absolute;
            right: -2px;
            bottom: -4px;
            width: 36px;
            height: 22px;
            transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
            opacity: 0;
            transform: translateX(8px);
        }
        .cloud-front-shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.95);
        }
        .cfs-1 { width: 18px; height: 18px; bottom: -1px; right: 0; }
        .cfs-2 { width: 16px; height: 14px; bottom: 0; right: 12px; }
        .cfs-3 { width: 36px; height: 10px; bottom: -4px; right: -2px; border-radius: 20px; }

        [data-theme="light"] .cloud-back,
        [data-theme="light"] .cloud-mid,
        [data-theme="light"] .cloud-front { opacity: 1; transform: translateX(0); }

        /* Knob (sun/moon) */
        .theme-toggle-knob {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: radial-gradient(circle at 38% 35%, #e0e0e0 0%, #c8c8c8 30%, #aaa 65%, #909090 100%);
            box-shadow: 0 2px 5px rgba(0,0,0,0.35), inset 0 -1px 3px rgba(0,0,0,0.15);
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), background 0.5s ease, box-shadow 0.5s ease;
            z-index: 5;
            overflow: hidden;
        }
        [data-theme="light"] .theme-toggle-knob {
            transform: translateX(34px);
            background: radial-gradient(circle at 40% 38%, #f0c850 0%, #e5b530 40%, #d4a020 100%);
            box-shadow: 0 2px 8px rgba(230,180,40,0.5), inset 0 -1px 3px rgba(0,0,0,0.08);
        }

        /* Moon craters — 3 craters */
        .crater {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, #999 0%, #aaa 100%);
            box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
            transition: opacity 0.4s ease;
        }
        .crater-1 { width: 9px; height: 9px; top: 4px; left: 6px; }
        .crater-2 { width: 7px; height: 7px; top: 10px; right: 3px; }
        .crater-3 { width: 6px; height: 6px; bottom: 3px; left: 5px; }
        [data-theme="light"] .crater { opacity: 0; }

        /* ===== LIGHT THEME ===== */
        [data-theme="light"] body { background: #f5f6fa; color: #3a3a4a; }

        /* Scrollbar */
        [data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f5; }
        [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c0d0; }
        [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #9090a0; }

        /* Nav */
        [data-theme="light"] .nav-glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom-color: rgba(49,48,151,0.08); }
        [data-theme="light"] .nav-solid { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); border-bottom-color: rgba(49,48,151,0.08); }
        [data-theme="light"] #navbar a.text-carbon-400 { color: #555570; }
        [data-theme="light"] #navbar a.text-carbon-400:hover { color: #323096; }

        /* Scroll progress */
        [data-theme="light"] #scroll-progress { background: linear-gradient(to right, #323096, #10b981, #323096); }

        /* Hero video */
        #hero-video { background: #0a0a0a; }

        /* Hero — always dark (video background demands it) */
        [data-theme="light"] #hero { background: transparent !important; }
        [data-theme="light"] #hero .text-white { color: #ffffff !important; }
        [data-theme="light"] #hero .text-carbon-400 { color: #9d9db5 !important; }
        [data-theme="light"] #hero .text-carbon-500 { color: #7a7a95 !important; }
        [data-theme="light"] #hero .text-carbon-600 { color: #6b6b79 !important; }
        [data-theme="light"] #hero h1 { color: #ffffff !important; }
        [data-theme="light"] #hero .text-gradient-gold { -webkit-text-fill-color: initial; background: none; color: inherit; }
        [data-theme="light"] #hero .bg-carbon-900\/60 { background: rgba(13,13,18,0.6) !important; box-shadow: none !important; }
        [data-theme="light"] #hero .bg-gradient-to-br.from-carbon-900 { background: linear-gradient(to bottom right, rgba(13,13,18,0.8), rgba(13,13,18,0.6)) !important; box-shadow: none !important; }
        [data-theme="light"] #hero .border-carbon-800\/60 { border-color: rgba(255,255,255,0.08) !important; }
        [data-theme="light"] #hero .border-blue-400\/10 { border-color: rgba(49,48,151,0.1) !important; }
        [data-theme="light"] #hero .text-gradient-mint { -webkit-text-fill-color: initial; }
        [data-theme="light"] #hero .border-carbon-700 { border-color: rgba(255,255,255,0.15) !important; }
        [data-theme="light"] #hero strong { color: #ffffff !important; }

        /* Hero stat strip — reduce opacity in both modes */
        #hero-stats .bg-carbon-900\/60 { background: rgba(13,13,18,0.4) !important; }
        /* Hero stat strip — theme-aware light mode */
        [data-theme="light"] #hero-stats .bg-carbon-900\/60 { background: rgba(255,255,255,0.6) !important; box-shadow: 0 1px 3px rgba(49,48,151,0.06); }
        [data-theme="light"] #hero-stats .border-carbon-800\/60 { border-color: rgba(49,48,151,0.1) !important; }
        [data-theme="light"] #hero-stats .text-white { color: #0f0f2e !important; }
        [data-theme="light"] #hero-stats .text-carbon-500 { color: #5a5a75 !important; }
        /* Hero stat labels — dark-mode tint (light-mode override above wins by specificity) */
        #hero-stats .text-carbon-500 { color: rgba(255, 255, 255, 0.75) !important; }
        /* Preserve accent colors in stat strip for both modes */
        #hero-stats .text-gradient-mint { background: linear-gradient(135deg, #34d399, #10b981, #059669) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
        #hero-stats .text-gradient-gold { background: linear-gradient(135deg, #313097, #313097, #313097) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }

        /* "Malaysia" headline — Malaysian flag gradient with one-time sheen sweep on entry */
        .malaysia-shimmer {
            background:
                linear-gradient(115deg,
                    transparent 0%,
                    transparent 35%,
                    rgba(255, 255, 255, 0.30) 47%,
                    rgba(255, 255, 255, 0.45) 50%,
                    rgba(255, 255, 255, 0.30) 53%,
                    transparent 65%,
                    transparent 100%),
                linear-gradient(135deg,
                    #FFCC00 0%,
                    #FFCC00 22%,
                    #FFFFFF 42%,
                    #CC0000 60%,
                    #1d4ed8 78%,
                    #1d4ed8 100%);
            background-size: 160% 100%, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-position: 110% 0, 0 0;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            animation: malaysia-sheen 10s linear 800ms forwards;
        }
        @keyframes malaysia-sheen {
            0%   { background-position: 110% 0, 0 0; }
            50%  { background-position: -160% 0, 0 0; }
            100% { background-position: 110% 0, 0 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .malaysia-shimmer { animation: none; }
        }

        /* Hero dark overlay — three-tier responsive treatment matching the layout regimes:
           - Mobile (<640px): text is full-width → vertical gradient protects the headline/sub-copy band
           - Tablet (640–1023px): text sits left, cityscape on right → horizontal gradient dark-left, light-right
           - Desktop (≥1024px): text sits right (w-[40%]) → horizontal gradient dark-right, light-left */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.15) 0%,
                rgba(0, 0, 0, 0.30) 22%,
                rgba(0, 0, 0, 0.65) 42%,
                rgba(0, 0, 0, 0.78) 60%,
                rgba(0, 0, 0, 0.78) 100%);
        }
        @media (min-width: 640px) {
            .hero-overlay {
                background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.82) 0%,
                    rgba(0, 0, 0, 0.78) 40%,
                    rgba(0, 0, 0, 0.35) 70%,
                    rgba(0, 0, 0, 0.10) 100%);
            }
        }
        @media (min-width: 1024px) {
            .hero-overlay {
                background: linear-gradient(to left,
                    rgba(0, 0, 0, 0.80) 0%,
                    rgba(0, 0, 0, 0.75) 40%,
                    rgba(0, 0, 0, 0.35) 70%,
                    rgba(0, 0, 0, 0.10) 100%);
            }
        }

        /* Hero stat cards — frosted glass + under-glass animated shader */
        @keyframes orbit { to { --angle: 360deg; } }
        .hero-stat-card {
            --angle: 0deg;
            --hsc-bg: rgba(14, 18, 30, 0.48);
            --hsc-border: rgba(160, 176, 255, 0.22);
            --hsc-edge-blue: rgba(83, 111, 255, 0.32);
            --hsc-edge-mint: rgba(62, 216, 158, 0.28);
            --hsc-edge-gold: rgba(246, 197, 63, 0.20);
            --hsc-inner-glow: rgba(79, 123, 255, 0.14);
            --hsc-wash: transparent;
            --hsc-noise-opacity: 0.16;
            --hsc-sheen: 0.5;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background: var(--hsc-bg);
            border: 1px solid var(--hsc-border);
            backdrop-filter: blur(16px) saturate(132%);
            -webkit-backdrop-filter: blur(16px) saturate(132%);
            box-shadow:
                0 18px 48px rgba(0, 0, 0, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                inset 0 -1px 0 rgba(255, 255, 255, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        [data-theme="light"] .hero-stat-card {
            --hsc-bg: rgba(255, 255, 255, 0.5);
            --hsc-border: rgba(49, 48, 151, 0.26);
            --hsc-edge-blue: rgba(49, 48, 151, 0.42);
            --hsc-edge-mint: rgba(16, 185, 129, 0.34);
            --hsc-edge-gold: rgba(226, 173, 36, 0.34);
            --hsc-inner-glow: rgba(91, 121, 232, 0.12);
            --hsc-wash:
                radial-gradient(circle at 12% 0%, rgba(49, 48, 151, 0.13), transparent 30%),
                radial-gradient(circle at 84% 4%, rgba(226, 173, 36, 0.16), transparent 28%),
                radial-gradient(circle at 30% 100%, rgba(16, 185, 129, 0.10), transparent 35%);
            --hsc-noise-opacity: 0.10;
            --hsc-sheen: 0.34;
            box-shadow:
                0 16px 36px rgba(49, 59, 96, 0.16),
                0 0 0 1px rgba(49, 48, 151, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.82),
                inset 0 -1px 0 rgba(49, 48, 151, 0.12),
                inset 0 0 28px rgba(91, 121, 232, 0.08);
        }
        .hero-stat-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            z-index: -2;
            background: conic-gradient(
                from var(--angle),
                transparent 0deg,
                transparent 50deg,
                var(--hsc-edge-blue) 70deg,
                transparent 90deg,
                transparent 170deg,
                var(--hsc-edge-mint) 190deg,
                transparent 210deg,
                transparent 290deg,
                var(--hsc-edge-gold) 310deg,
                transparent 330deg,
                transparent 360deg
            );
            animation: orbit 32s linear infinite;
            opacity: 0.55;
            pointer-events: none;
        }
        [data-theme="light"] .hero-stat-card::before {
            opacity: 0.7;
            filter: saturate(1.1);
        }
        .hero-stat-card::after {
            content: "";
            position: absolute;
            inset: 1px;
            z-index: -1;
            border-radius: inherit;
            background:
                linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, var(--hsc-sheen)) 45%, transparent 57%),
                radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.28), transparent 24%),
                radial-gradient(circle at 72% 100%, var(--hsc-inner-glow), transparent 35%),
                var(--hsc-wash),
                var(--hsc-bg);
            background-size:
                260% 100%,
                100% 100%,
                100% 100%,
                100% 100%,
                100% 100%;
            background-position:
                190% 0,
                0 0,
                0 0,
                0 0,
                0 0;
            transition: background-position 700ms ease, transform 260ms ease;
            pointer-events: none;
        }
        .hero-stat-card:hover::after {
            background-position:
                -60% 0,
                0 0,
                0 0,
                0 0,
                0 0;
        }
        .hero-stat-card > *:not(.stat-noise) { position: relative; z-index: 1; }
        .stat-noise {
            position: absolute;
            inset: 0;
            z-index: 2;
            opacity: var(--hsc-noise-opacity);
            mix-blend-mode: overlay;
            pointer-events: none;
            background-image:
                radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
                radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.5px);
            background-size: 17px 19px, 23px 21px, 29px 31px;
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-stat-card::before { animation: none; }
            .hero-stat-card,
            .hero-stat-card::after { transition: none; }
        }

        /* Hero — light mode grain stays subtle */
        [data-theme="light"] #hero.grain::after { opacity: 0.04; }

        /* Other sections — light mode */
        [data-theme="light"] .grain:not(#hero)::after { opacity: 0.015; }
        [data-theme="light"] section.grain:not(#hero), [data-theme="light"] section.relative.min-h-screen:not(#hero) { background: #f5f6fa; }
        [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: #0f0f2e; }
        [data-theme="light"] .text-white { color: #0f0f2e !important; }
        [data-theme="light"] .text-carbon-300 { color: #4a4a60 !important; }
        [data-theme="light"] .text-carbon-400 { color: #5a5a75 !important; }
        [data-theme="light"] .text-carbon-500 { color: #7a7a95 !important; }
        [data-theme="light"] .text-carbon-600 { color: #9a9ab0 !important; }
        [data-theme="light"] .text-carbon-700 { color: #b0b0c5 !important; }

        /* Cards & containers */
        [data-theme="light"] .bg-carbon-900\/70,
        [data-theme="light"] .bg-carbon-900\/60,
        [data-theme="light"] .bg-carbon-900\/50,
        [data-theme="light"] .bg-carbon-900\/30,
        [data-theme="light"] .bg-carbon-950\/80,
        [data-theme="light"] .bg-gradient-to-br.from-carbon-900 {
            background: #ffffff !important;
            box-shadow: 0 1px 3px rgba(49,48,151,0.06), 0 4px 16px rgba(49,48,151,0.04);
        }
        [data-theme="light"] .border-carbon-800\/60,
        [data-theme="light"] .border-carbon-800\/50,
        [data-theme="light"] .border-carbon-800\/30 {
            border-color: rgba(49,48,151,0.1) !important;
        }
        [data-theme="light"] .border-white\/\\[0\\.04\\],
        [data-theme="light"] .border-white\/\\[0\\.06\\] {
            border-color: rgba(49,48,151,0.06) !important;
        }

        /* Section backgrounds */
        [data-theme="light"] .bg-carbon-950 { background: #f5f6fa !important; }
        [data-theme="light"] .bg-carbon-900\/30 { background: #edeef5 !important; }
        [data-theme="light"] section.py-20.bg-carbon-950,
        [data-theme="light"] section.py-20.bg-carbon-900\/30 {
            background: #f5f6fa;
        }

        /* Stat cards */
        [data-theme="light"] .bg-carbon-900\/60.border { background: #ffffff !important; border-color: rgba(49,48,151,0.1) !important; }

        /* Buttons */
        [data-theme="light"] .bg-blue-400 { background: #323096 !important; }
        [data-theme="light"] .bg-blue-400:hover, [data-theme="light"] .hover\\:bg-blue-300:hover { background: #3d3aaf !important; }
        [data-theme="light"] a.bg-blue-400, [data-theme="light"] button.bg-blue-400 { color: #ffffff !important; }
        [data-theme="light"] .bg-carbon-800 { background: #edeef5 !important; }
        [data-theme="light"] .bg-carbon-800:hover, [data-theme="light"] .hover\\:bg-carbon-700:hover { background: #dddee8 !important; }
        [data-theme="light"] a.bg-carbon-800, [data-theme="light"] button.bg-carbon-800 { border-color: rgba(49,48,151,0.15) !important; }

        /* Ghost button */
        [data-theme="light"] .border-carbon-700 { border-color: rgba(49,48,151,0.2) !important; }
        [data-theme="light"] a.border.border-carbon-700 { color: #323096 !important; }

        /* Glow effects in light */
        [data-theme="light"] .glow-blue { box-shadow: 0 4px 24px rgba(49,48,151,0.08), 0 8px 48px rgba(49,48,151,0.04); }
        [data-theme="light"] .glow-mint { box-shadow: 0 4px 24px rgba(16,185,129,0.08), 0 8px 48px rgba(16,185,129,0.04); }

        /* Tilt cards in light */
        [data-theme="light"] .tilt-card:hover { box-shadow: 0 20px 40px -10px rgba(49,48,151,0.1); }

        /* Social proof marquee / client logos */
        [data-theme="light"] .border-y.border-carbon-800\/50 { border-color: rgba(49,48,151,0.08); background: #edeef5 !important; }

        /* Table */
        [data-theme="light"] .comparison-row:hover { background: rgba(49,48,151,0.03); }
        [data-theme="light"] table thead tr { border-color: rgba(49,48,151,0.1); }

        /* Form */
        [data-theme="light"] .bg-carbon-900 { background: #f0f1f8 !important; }
        [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
            background: #f0f1f8 !important;
            border-color: rgba(49,48,151,0.15) !important;
            color: #0f0f2e !important;
        }
        [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #9a9ab0 !important; }
        [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus {
            box-shadow: 0 0 0 2px rgba(49,48,151,0.2);
            border-color: #323096 !important;
        }

        /* Footer */
        [data-theme="light"] footer { background: #0f0f2e !important; border-color: rgba(255,255,255,0.08) !important; }
        [data-theme="light"] footer .text-white { color: #1a1a2e !important; }
        [data-theme="light"] footer .text-carbon-500 { color: #9a9ab0 !important; }
        [data-theme="light"] footer .text-carbon-600 { color: #7a7a95 !important; }
        [data-theme="light"] footer .text-mint-400 { color: #34d399 !important; }
        [data-theme="light"] footer .bg-blue-400 { background: #323096 !important; }
        [data-theme="light"] footer span.text-blue-400 { color: #7c7af5 !important; }
        [data-theme="light"] footer .border-carbon-800\/30 { border-color: rgba(255,255,255,0.08) !important; }

        /* Badges & accents */
        [data-theme="light"] .bg-blue-400\/10 { background: rgba(49,48,151,0.08) !important; }
        [data-theme="light"] .bg-mint-500\/10 { background: rgba(16,185,129,0.08) !important; }
        [data-theme="light"] .bg-white\/5 { background: rgba(49,48,151,0.05) !important; }

        /* FAQ */
        [data-theme="light"] .faq-answer p { color: #5a5a75; }

        /* Mobile menu */
        [data-theme="light"] #mobile-menu .bg-carbon-950\/98 { background: rgba(255,255,255,0.98) !important; }
        [data-theme="light"] #mobile-menu a { color: #3a3a4a !important; }
        [data-theme="light"] #mobile-menu a:hover { color: #323096 !important; }
        /* ...but the blue "Message Us" CTA inside the mobile menu keeps white text
           (the #mobile-menu a rule above otherwise wins on ID specificity). */
        [data-theme="light"] #mobile-menu a.bg-blue-400, [data-theme="light"] #mobile-menu a.bg-blue-400:hover { color: #ffffff !important; }
        [data-theme="light"] #mobile-menu .border-b { border-color: rgba(49,48,151,0.08) !important; }

        /* Hamburger bars */
        [data-theme="light"] #hamburger span { background: #0f0f2e !important; }

        /* Trust badges in contact */
        [data-theme="light"] .bg-carbon-800\/50.border { background: #f0f1f8 !important; border-color: rgba(49,48,151,0.1) !important; }

        /* Contact form container */
        [data-theme="light"] .bg-carbon-950.border.border-carbon-800\/60.rounded-2xl { background: #ffffff !important; box-shadow: 0 4px 24px rgba(49,48,151,0.06); }

        /* Case study card */
        [data-theme="light"] .border-blue-400\/15, [data-theme="light"] .border-blue-400\/10 { border-color: rgba(49,48,151,0.12) !important; }

        /* Timeline dots */
        [data-theme="light"] .bg-carbon-950.border-2 { background: #ffffff !important; }
        [data-theme="light"] .border-carbon-600.rounded-full { border-color: #b0b0c5 !important; }

        /* Gradient blobs - make them more subtle in light */
        [data-theme="light"] .bg-blue-400\/\\[0\\.03\\] { background: rgba(49,48,151,0.04) !important; }
        [data-theme="light"] .bg-mint-500\/\\[0\\.03\\] { background: rgba(16,185,129,0.04) !important; }
        [data-theme="light"] .bg-blue-400\/\\[0\\.02\\] { background: rgba(49,48,151,0.03) !important; }

        /* Client logo grid */
        .client-logo-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem 1.5rem;
        }
        @media (max-width: 768px) {
            .client-logo-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 480px) {
            .client-logo-grid { grid-template-columns: repeat(2, 1fr); }
        }
        .client-logo-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            transition: all 0.3s ease;
        }
        .client-logo-item img {
            max-height: 2.5rem;
            max-width: 100%;
            width: auto;
            opacity: 0.85;
            filter: none;
            transition: all 0.3s ease;
        }
        .client-logo-item:hover img {
            opacity: 1;
        }
        [data-theme="light"] .client-logo-item img {
            filter: none;
            opacity: 0.85;
        }
        [data-theme="light"] .client-logo-item:hover img {
            filter: none;
            opacity: 1;
        }

        /* Auto-scrolling logo marquee */
        .logo-marquee {
            overflow: hidden;
            position: relative;
            --logo-fade: 80px;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent 100%);
                    mask-image: linear-gradient(to right, transparent 0, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent 100%);
        }
        .logo-marquee__track {
            display: flex;
            width: max-content;
            align-items: center;
            gap: 3rem;
            animation: logo-marquee-scroll 60s linear infinite;
            will-change: transform;
        }
        .logo-marquee:hover .logo-marquee__track,
        .logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }
        .logo-marquee__item {
            flex: 0 0 auto;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.75rem;
        }
        .logo-marquee__item img {
            max-height: 4rem;
            width: auto;
            opacity: 0.85;
            transition: opacity 0.3s ease;
        }
        .logo-marquee__item:hover img { opacity: 1; }
        [data-theme="light"] .logo-marquee__item img { opacity: 0.78; }
        [data-theme="light"] .logo-marquee__item:hover img { opacity: 1; }
        @keyframes logo-marquee-scroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .logo-marquee {
                -webkit-mask-image: none;
                        mask-image: none;
            }
            .logo-marquee__track {
                animation: none;
                flex-wrap: wrap;
                justify-content: center;
                width: 100%;
                row-gap: 1.25rem;
            }
        }



        /* ===== Knowledge Center Carousel ===== */
        .carousel-wrapper {
            position: relative;
            overflow: hidden;
            min-height: 280px;
            transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .carousel-track {
            display: flex;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            align-items: flex-start;
        }
        .carousel-slide {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            flex-shrink: 0;
            padding: 0 0.5rem;
            box-sizing: border-box;
        }
        .carousel-slide > div {
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        .carousel-slide table {
            width: 100%;
        }
        .carousel-slide th,
        .carousel-slide td {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        .carousel-btn-title {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 50%;
            background: rgba(49, 48, 151, 0.15);
            border: 1px solid rgba(49, 48, 151, 0.3);
            color: #818cf8;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .carousel-btn-title:hover {
            background: rgba(49, 48, 151, 0.3);
            color: #a5b4fc;
        }
        @media (max-width: 768px) {
            .carousel-btn-title { width: 32px; height: 32px; min-width: 32px; }
        }
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }
        .carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0;
        }
        .carousel-dot.active {
            background: #818cf8;
            width: 24px;
            border-radius: 4px;
        }
        .carousel-card-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: rgba(255,255,255,0.4);
            text-align: center;
            margin-top: 0.5rem;
            min-height: 1.2em;
        }
        /* Sentiment colors */
        .sentiment-positive { color: #34d399; }
        .sentiment-negative { color: #f87171; }
        .sentiment-warning { color: #fbbf24; }
        .sentiment-neutral { color: #9ca3af; }
        .sentiment-icon { margin-right: 0.375rem; font-size: 0.75rem; }

        /* Light mode carousel overrides */
        [data-theme="light"] .carousel-btn-title { background: rgba(49,48,151,0.08); border-color: rgba(49,48,151,0.15); color: #323096; }
        [data-theme="light"] .carousel-btn-title:hover { background: rgba(49,48,151,0.15); color: #323096; }
        [data-theme="light"] .carousel-dot { background: rgba(49,48,151,0.15); }
        [data-theme="light"] .carousel-dot.active { background: #323096; }
        [data-theme="light"] .carousel-card-title { color: rgba(15,15,46,0.4); }
        [data-theme="light"] .sentiment-positive { color: #059669; }
        [data-theme="light"] .sentiment-negative { color: #dc2626; }
        [data-theme="light"] .sentiment-warning { color: #d97706; }
        [data-theme="light"] .sentiment-neutral { color: #6b7280; }

        /* Swipe support */
        .carousel-wrapper { touch-action: pan-y; }

        /* Pulse dot - keep green in both themes */
        [data-theme="light"] .pulse-dot { background: #10b981 !important; }
        [data-theme="light"] .text-mint-400 { color: #059669 !important; }
        [data-theme="light"] .text-mint-500 { color: #059669 !important; }
        [data-theme="light"] .text-blue-400:not(footer .text-blue-400) { color: #323096 !important; }

        /* Red colors for comparison table */
        [data-theme="light"] .text-red-400\/80 { color: #dc2626 !important; }

        /* Light mode: new sections */
        [data-theme="light"] .filter-tab { background: #edeef5; color: #5a5a75; border-color: rgba(49,48,151,0.1); }
        [data-theme="light"] .filter-tab.active { background: #323096; color: #fff !important; }
        [data-theme="light"] .filter-tab:not(.active):hover { background: rgba(49,48,151,0.08); }
        [data-theme="light"] .article-tab { color: #5a5a75; }
        [data-theme="light"] .article-tab.active { color: #323096; border-bottom-color: #323096; }
        [data-theme="light"] .article-content h2, [data-theme="light"] .article-content h3 { color: #0f0f2e; }
        [data-theme="light"] .article-content p { color: #4a4a60; }
        [data-theme="light"] .article-content strong { color: #0f0f2e; }
        [data-theme="light"] .article-content th { color: #7a7a95; }
        [data-theme="light"] .article-content td { color: #4a4a60; border-bottom-color: rgba(49,48,151,0.08); }
        [data-theme="light"] .article-content thead tr { border-bottom-color: rgba(49,48,151,0.1); }
        [data-theme="light"] .article-content ul li { color: #4a4a60; }
        [data-theme="light"] .article-content ol li { color: #4a4a60; }
        [data-theme="light"] .article-content hr { background: rgba(49,48,151,0.1); }
        [data-theme="light"] .article-content blockquote { background: rgba(49,48,151,0.04); border-left-color: #323096; }
        [data-theme="light"] #cs-cards .cs-card { background: #ffffff; border-color: rgba(49,48,151,0.1); }
        [data-theme="light"] #cs-cards .cs-card:hover { border-color: rgba(49,48,151,0.2); }
        [data-theme="light"] .testimonial-dot { background: #c0c0d0; }
        [data-theme="light"] .testimonial-dot.active { background: #323096; }
        [data-theme="light"] #back-to-top { background: #ffffff; color: #323096; box-shadow: 0 2px 12px rgba(49,48,151,0.12); border: 1px solid rgba(49,48,151,0.1); }
        [data-theme="light"] .section-divider { background: linear-gradient(90deg, transparent, #323096, #059669, #323096, transparent); }

        /* Gradient texts stay */
        [data-theme="light"] .text-gradient-gold { background: linear-gradient(135deg, #323096, #4a48c9, #323096); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        [data-theme="light"] .text-gradient-mint { background: linear-gradient(135deg, #059669, #10b981, #059669); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* Theme transition on body */
        body { transition: background-color 0.4s ease, color 0.4s ease; }

/* ---- shared page-behaviour styles (was the 2nd inline block) ---- */
/* Wide markdown tables: let them scroll horizontally inside the prose container.
       Scoped to .prose so it can't affect layout/flex tables elsewhere on the site. */
    .prose :where(table) { display: block; overflow-x: auto; }

    /* Tighten prose vertical rhythm. Default Tailwind Typography spacing assumes
       long-form essays; our articles and case studies have short 1-2 sentence
       sections where the default h2 top-margin reads as a huge gap. */
    .prose :where(h2):not(:first-child) { margin-top: 1.25em; }
    .prose :where(h2) { margin-bottom: 0.4em; }
    .prose :where(h3) { margin-top: 1em; margin-bottom: 0.3em; }
    .prose :where(p, ul, ol) { margin-top: 0.6em; margin-bottom: 0.6em; }
    .prose :where(li) { margin-top: 0.2em; margin-bottom: 0.2em; }

    /* Listing filter tabs — base + active state */
    .filter-tab {
      padding: 0.5rem 1rem; border-radius: 9999px;
      font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
      font-weight: 600; transition: all 0.2s ease;
      border: 1px solid rgba(255,255,255,0.08); color: #b0b0ba;
      background: transparent; cursor: pointer;
    }
    .filter-tab:hover { color: #fff; border-color: rgba(255,255,255,0.16); }
    .filter-tab.filter-active {
      color: #0d0d12; background: #34d399; border-color: #34d399;
    }
    [data-theme="light"] .filter-tab { color: #555562; border-color: rgba(49,48,151,0.16); }
    [data-theme="light"] .filter-tab.filter-active { color: #fff; background: #313097; border-color: #313097; }