.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 360px;
gap: 14px;
max-width: 1020px;
margin: 0 auto;
}
.bento-card {
position: relative;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.07);
border-radius: 20px;
padding: 28px 26px 28px;
display: flex;
flex-direction: column;
text-decoration: none;
color: #800020;
overflow: hidden;
cursor: pointer;
height: 100%;
box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
transition:
background 0.38s ease,
border-color 0.38s ease,
color 0.38s ease,
transform 0.38s ease,
box-shadow 0.38s ease;
}
.bento-card:hover {
background: #161618;
border-color: rgba(201,169,110,0.25);
color: #f2ede6;
transform: translateY(-4px) scale(1.01);
box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,169,110,0.15);
z-index: 2;
}
.bento-card::before {
content: '';
position: absolute;
top: -55px; right: -55px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(201,169,110,0.18) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
.bento-card:hover::before { opacity: 1; }
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
flex-shrink: 0;
}
.card-icon {
width: 52px;
height: 52px;
border-radius: 13px;
border: 1px solid rgba(168,120,46,0.18);
background: rgba(168,120,46,0.05);
overflow: hidden;
flex-shrink: 0;
transition: border-color 0.38s, background 0.38s;
}
.bento-card:hover .card-icon {
border-color: rgba(201,169,110,0.35);
background: rgba(201,169,110,0.08);
}
.card-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(0.55) brightness(0.95);
transition: filter 0.38s;
}
.bento-card:hover .card-icon img { filter: saturate(1) brightness(1.05); }
.card-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #a8782e;
background: rgba(168,120,46,0.08);
border: 1px solid rgba(168,120,46,0.18);
padding: 3px 9px;
border-radius: 99px;
transition: background 0.38s, border-color 0.38s, color 0.38s;
white-space: nowrap;
}
.bento-card:hover .card-tag {
color: #e0b05a;
background: rgba(201,169,110,0.12);
border-color: rgba(201,169,110,0.28);
}
.card-tag::before {
content: '';
width: 4px; height: 4px;
background: currentColor;
border-radius: 50%;
flex-shrink: 0;
}
.card-divider {
width: 36px;
height: 1px;
background: linear-gradient(90deg, #c9a96e, transparent);
margin-bottom: 13px;
flex-shrink: 0;
transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.38s;
}
@keyframes dividerPulse {
0%   { box-shadow: 0 0 0px 0px rgba(224,176,90,0); }
45%  { box-shadow: 0 0 7px 2px rgba(224,176,90,0.6); }
100% { box-shadow: 0 0 0px 0px rgba(224,176,90,0); }
}
.bento-card:hover .card-divider {
width: 80%;
background: linear-gradient(90deg, #e0b05a, rgba(201,169,110,0.3), transparent);
animation: dividerPulse 1.3s ease-in-out infinite;
}
.card-title {
font-family: 'Roboto Slab', Georgia, serif;
font-size: clamp(18px, 1.8vw, 23px);
font-weight: 600;
line-height: 1.2;
color: inherit;
letter-spacing: -0.01em;
margin-bottom: 10px;
flex-shrink: 0;
}
.card-desc {
font-family: 'Roboto Condensed', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.7;
color: rgba(26,22,16,0.48);
flex: 1;
transition: color 0.38s;
}
.bento-card:hover .card-desc { color: rgba(242,237,230,0.52); }
.card-desc strong {
color: rgba(26,22,16,0.72);
font-weight: 500;
transition: color 0.38s;
}
.bento-card:hover .card-desc strong { color: rgba(242,237,230,0.82); }
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18px;
padding-top: 15px;
border-top: 1px solid rgba(0,0,0,0.06);
flex-shrink: 0;
transition: border-color 0.38s;
}
.bento-card:hover .card-footer { border-color: rgba(255,255,255,0.07); }
.card-logo img {
height: 25px;
width: auto;
opacity: 0.3;
transition: opacity 0.38s, filter 0.38s;
}
.bento-card:hover .card-logo img {
opacity: 0.65;
filter: brightness(0) invert(1);
}
.card-arrow {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid rgba(168,120,46,0.28);
display: flex; align-items: center; justify-content: center;
color: #a8782e;
font-size: 14px;
flex-shrink: 0;
transition: background 0.3s, border-color 0.3s, transform 0.3s, color 0.3s;
}
.bento-card:hover .card-arrow {
background: #c9a96e;
border-color: #c9a96e;
color: #800020;
transform: rotate(45deg);
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
}
.bento-card { animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bento-card:nth-child(1) { animation-delay: 0.04s; }
.bento-card:nth-child(2) { animation-delay: 0.10s; }
.bento-card:nth-child(3) { animation-delay: 0.16s; }
.bento-card:nth-child(4) { animation-delay: 0.20s; }
.bento-card:nth-child(5) { animation-delay: 0.25s; }
.bento-card:nth-child(6) { animation-delay: 0.29s; } @media (max-width: 720px) {
.bento-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
gap: 12px;
}
.bento-card:nth-child(n) {
grid-column: auto !important;
grid-row: auto !important;
min-height: 230px;
background: rgba(255,255,255,0.28) !important;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255,255,255,0.45) !important;
box-shadow:
0 4px 24px rgba(0,0,0,0.12),
0 1px 0px rgba(255,255,255,0.6) inset !important;
color: #1a1610 !important;
}
.bento-card:nth-child(n) .card-title { color: #1a1610 !important; }
.bento-card:nth-child(n) .card-desc  { color: rgba(26,22,16,0.55) !important; }
.bento-card:nth-child(n) .card-desc strong { color: rgba(26,22,16,0.78) !important; }
.bento-card:nth-child(n) .card-footer { border-color: rgba(255,255,255,0.35) !important; }
.bento-card:nth-child(n) .card-logo img { opacity: 0.35 !important; filter: none !important; }
.bento-card:nth-child(n):hover {
background: rgba(22,22,24,0.72) !important;
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border-color: rgba(201,169,110,0.35) !important;
color: #f2ede6 !important;
transform: translateY(-3px) scale(1.01) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,169,110,0.18) !important;
}
.bento-card:nth-child(n):hover .card-title { color: #f2ede6 !important; }
.bento-card:nth-child(n):hover .card-desc  { color: rgba(242,237,230,0.52) !important; }
.bento-card:nth-child(n):hover .card-desc strong { color: rgba(242,237,230,0.82) !important; }
.bento-card:nth-child(n):hover .card-footer { border-color: rgba(255,255,255,0.08) !important; }
.bento-card:nth-child(n):hover .card-logo img {
opacity: 0.65 !important;
filter: brightness(0) invert(1) !important;
}
}
@media (max-width: 480px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-card:nth-child(n) { min-height: 210px; }
}