* { box-sizing: border-box; }
body { background: var(--color1201); margin: 0; }

.bento-wrapper { max-width: 900px; margin: 50px auto; padding: 0 20px; }
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(130px, auto);
    gap: 14px;
}

.cell {
    border-radius: 20px; text-decoration: none; color: var(--color1203);
    background: color-mix(in srgb, var(--color1203) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--color1203) 10%, transparent);
    transition: all 0.3s;
}

.cell-profile {
    grid-column: span 4; grid-row: span 1;
    display: flex; align-items: center; gap: 18px;
    padding: 0 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color1202) 15%, transparent), transparent);
}
.logo-box {
    width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
    background: var(--color1202); display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
}
.logo-box img { width: 65%; border-radius: 10px; }
.cell-profile h1 { font-family: Sahel-Bold; font-size: 20px; margin: 0 0 2px; }
.cell-profile p { font-size: 12px; color: color-mix(in srgb, var(--color1203) 55%, transparent); margin: 0 0 8px; }
.site-btn { font-size: 12px; color: var(--color1202); text-decoration: none; font-weight: 600; }
.cell-profile > a { margin-right: auto; }

.cell-social {
    grid-column: span 1; grid-row: span 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px; padding: 10px;
}
.cell-social:hover { border-color: var(--acc, var(--color1202)); transform: translateY(-4px); }
.cell-social i { font-size: 26px; color: var(--acc, var(--color1202)); }
.cell-social img { width: 26px; }
.cell-social b { font-size: 13px; }
.cell-social span { font-size: 11px; color: color-mix(in srgb, var(--color1203) 50%, transparent); }

.cell-contact {
    grid-column: span 2; grid-row: span 1;
    display: flex; align-items: center; gap: 14px; padding: 0 20px;
}
.cell-wide { grid-column: span 4; }
.cell-contact i { font-size: 22px; color: var(--color1202); }
.cell-contact b { display: block; font-size: 13px; }
.cell-contact span { display: block; font-size: 12px; color: color-mix(in srgb, var(--color1203) 55%, transparent); }

@media (max-width: 700px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(90px, auto);
    }
    .cell-profile {
        grid-column: span 2;
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
        min-height: 200px;
        gap: 4px;
    }
    .cell-profile h1 {
        padding-top: 8px;
    }
    .cell-profile > a {
        margin-right: unset;
    }
    .cell-social {
        min-height: 100px;
    }
    .cell-contact,
    .cell-wide {
        grid-column: span 2;
        min-height: 70px;
    }
}