:root{
    --bento-gap: 24px;
    --card-pad: 24px;
    --card-radius: 12px;
}

.bento-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2.2fr;
    grid-template-rows: auto auto;
    gap: var(--bento-gap);
    margin-top: 12px;
    width: 100%;
    padding: var(--bento-gap);
    box-sizing: border-box;
}

.bento-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border: 1px solid rgba(16, 40, 80, 0.04);
    box-shadow: 0 8px 22px rgba(16, 40, 80, 0.06);
    border-radius: var(--card-radius);
    position: relative;
    overflow: hidden;
    padding: var(--card-pad);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card-content {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
}

.card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-wrap img{
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.card-text { font-size: 14px; line-height: 1.6; color: #475569; max-width: 100%; margin: 0; }

.card-large { grid-column: 1 / 3; grid-row: 1 / 2; }
.card-vertical { grid-column: 3 / 4; grid-row: 1 / 2; }
.card-compact-a { grid-column: 1 / 2; grid-row: 2 / 3; }
.card-compact-b { grid-column: 2 / 4; grid-row: 2 / 3; }

.bg-blue .icon-wrap { background: linear-gradient(180deg,#e6f2ff,#dbeeff); }
.bg-purple .icon-wrap { background: linear-gradient(180deg,#f3eaff,#efe6ff); }
.bg-neutral .icon-wrap { background: linear-gradient(180deg,#f6f7fb,#f2f4f8); }
.bg-orange .icon-wrap { background: linear-gradient(180deg,#fff4e6,#ffe9cc); }

@media (max-width: 991px) {
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: none; padding: 12px; }
    .card-large, .card-vertical, .card-compact-a, .card-compact-b { grid-column: 1 / -1; grid-row: auto; }
    .card-illustration { position: relative; width: 100%; height: 140px; right: auto; top: auto; bottom: auto; margin-top: 12px; }
}