.portfolio-hero {
    background: radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.28), transparent 34%),
                linear-gradient(132deg, #050816 0%, #0b1e3f 50%, #174ea6 100%);
}

.portfolio-badge {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #e2e8f0;
}

.portfolio-stat-card {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #f8fafc;
    backdrop-filter: blur(8px);
}

.portfolio-featured {
    border-radius: 1.1rem;
    background: linear-gradient(160deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbe7ff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.portfolio-pill {
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.portfolio-mini-preview {
    background: #0f172a;
    border-radius: 0.9rem;
    border: 1px solid #1e293b;
}

.portfolio-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.portfolio-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 36px rgba(79, 70, 229, 0.2);
}

.portfolio-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    margin-bottom: 0.8rem;
    color: #312e81;
    background: #eef2ff;
    font-size: 1.2rem;
}