/* ============================================================
           CUSTOM PROPERTIES
           ============================================================ */
        

        /* ============================================================
           BACKGROUND GRADIENT
           ============================================================ */
        .gradient-light {
            background: linear-gradient(145deg, #f8fafc 0%, #eff6ff 50%, #f0f9ff 100%);
            position: relative;
            overflow: hidden;
        }

        .gradient-light::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.03) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(37, 99, 235, 0.03) 0%, transparent 60%);
            pointer-events: none;
        }

        /* ============================================================
           SECTION HEADER (optional enhancement)
           ============================================================ */
        .section-badge {
            background: rgba(37, 99, 235, 0.08);
            border: 1px solid rgba(37, 99, 235, 0.12);
        }

        /* ============================================================
           CARD – Glass-morphism with Tailwind
           ============================================================ */
        .brand-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease,
                background 0.3s ease;
            will-change: transform;
            position: relative;
            overflow: hidden;
        }

        .brand-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg,
                    rgba(37, 99, 235, 0.04),
                    rgba(37, 99, 235, 0.01));
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .brand-card:hover::before {
            opacity: 1;
        }

        .brand-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 24px 48px -16px rgba(37, 99, 235, 0.18),
                0 8px 24px -6px rgba(37, 99, 235, 0.06);
            border-color: rgba(37, 99, 235, 0.15);
            background: rgba(255, 255, 255, 0.85);
        }

        /* ---- Glow ring on hover ---- */
        .brand-card::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(135deg,
                    rgba(37, 99, 235, 0),
                    rgba(37, 99, 235, 0.08),
                    rgba(37, 99, 235, 0));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
        }

        .brand-card:hover::after {
            opacity: 1;
        }

        /* ---- Image wrapper ---- */
        .brand-image-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 80px;
            padding: 0.5rem 0;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .brand-card:hover .brand-image-wrapper {
            transform: scale(1.04);
        }

        .brand-image-wrapper img {
            max-height: 72px;
            width: auto;
            filter: grayscale(0) brightness(1);
            transition: filter 0.4s ease, transform 0.4s ease;
        }

        .brand-card:hover .brand-image-wrapper img {
            filter: grayscale(0) brightness(1.02);
        }

        /* ---- Fallback for missing images ---- */
        .brand-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 72px;
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            border-radius: 0.75rem;
            color: #475569;
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.02em;
            transition: background 0.3s ease, color 0.3s ease;
        }

        .brand-card:hover .brand-fallback {
            background: linear-gradient(135deg, #dbeafe, #bfdbfe);
            color: #1e40af;
        }

        /* ============================================================
           SCROLL REVEAL – Intersection Observer
           ============================================================ */
        .card-item {
            opacity: 0;
            transform: translateY(40px) scale(0.94);
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .card-item.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 640px) {
            .brand-image-wrapper img {
                max-height: 56px;
            }
            .brand-card {
                padding: 1rem !important;
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .brand-image-wrapper img {
                max-height: 64px;
            }
        }