.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); padding: 2rem; position: relative; max-width: 1400px; margin: 0 auto; }
.bento-grid::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0, 217, 255, 0.03) 39px, rgba(0, 217, 255, 0.03) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0, 217, 255, 0.03) 39px, rgba(0, 217, 255, 0.03) 40px), repeating-linear-gradient(45deg, transparent, transparent 55px, rgba(255, 215, 0, 0.02) 55px, rgba(255, 215, 0, 0.02) 56px); pointer-events: none; opacity: 0; animation: gridFadeIn 2s ease-out forwards; }
@keyframes gridFadeIn { to { opacity: 1; } }

.bento-item { background: rgba(255,255,255,0.03); backdrop-filter: blur(var(--blur-amount)); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 2rem; position: relative; overflow: hidden; transition: transform .4s var(--transition-smooth), box-shadow .4s var(--transition-smooth), background .4s var(--transition-smooth); transform-style: preserve-3d; perspective: 1000px; }
.bento-item:hover { transform: rotateX(5deg) rotateY(5deg) scale(1.05); background: rgba(255,255,255,0.05); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0,217,255,0.1), inset 0 0 60px rgba(0,217,255,0.05); }
.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 3; }
.bento-tall { grid-row: span 2; }

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-large, .bento-wide, .bento-tall { grid-column: span 1; grid-row: span 1; }
}