.value-card {
            border-radius: 20px;
            border: 1px solid var(--outline-variant);
            background: var(--surface-container);
            padding: 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            height: 100%;
        }
        .value-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 16px 32px rgba(0,0,0,0.15);
            border-color: rgba(var(--bitoze-primary-rgb), 0.4);
        }
        .value-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, rgba(72,221,189,0.15), rgba(59,130,246,0.1));
            color: var(--bitoze-primary);
        }

        /* Filter chips */
        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 1rem;
            border-radius: 50rem;
            border: 1px solid var(--outline-variant);
            background: var(--surface-container);
            font-size: 0.84rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.22s ease;
            user-select: none;
        }
        .filter-chip:hover { border-color: var(--bitoze-primary); color: var(--bitoze-primary); }
        .filter-chip.active { background: var(--bitoze-primary); border-color: var(--bitoze-primary); color: #000; }

        /* Job listing card */
        .job-card {
            border-radius: 16px;
            border: 1px solid var(--outline-variant);
            background: var(--glass-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 1.75rem 2rem;
            transition: all 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            cursor: pointer;
            text-decoration: none !important;
        }
        .job-card:hover {
            transform: translateX(6px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
            border-color: rgba(var(--bitoze-primary-rgb), 0.5);
            background: var(--surface-container-highest);
        }
        .job-card:hover .job-title {
            color: var(--bitoze-primary);
        }
        .job-card:hover .job-arrow {
            transform: translateX(4px);
            color: var(--bitoze-primary);
        }
        .job-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--on-surface);
            margin-bottom: 0.4rem;
            transition: color 0.2s ease;
        }
        .job-meta-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.85rem;
            color: var(--on-surface-variant);
            background: rgba(var(--bs-surface-variant-rgb), 0.3);
            padding: 0.25rem 0.6rem;
            border-radius: 6px;
        }
        .job-arrow {
            color: var(--on-surface-variant);
            transition: transform 0.2s ease, color 0.2s ease;
        }

        @media (max-width: 767.98px) {
            .job-card {
                flex-direction: column;
                align-items: flex-start;
                padding: 1.5rem;
            }
            .job-card .d-flex.align-items-center {
                width: 100%;
                justify-content: space-between;
            }
        }