.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.tech-item {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    color: white;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    text-align: center;
}

/* Flutter - Blue gradient matching Flutter's brand */
.tech-item[data-tech="flutter"] {
    background: linear-gradient(135deg, #54C5F8 0%, #0468D7 100%);
}

/* Dart - Teal to blue gradient matching Dart's colors */
.tech-item[data-tech="dart"] {
    background: linear-gradient(135deg, #00B4AB 0%, #456E9C 100%);
}

/* Firebase - Orange gradient matching Firebase's brand */
.tech-item[data-tech="firebase"] {
    background: linear-gradient(135deg, #FFA000 0%, #F57C00 100%);
}

/* Bloc - Purple gradient for state management */
.tech-item[data-tech="bloc"] {
    background: linear-gradient(135deg, #6B4FBB 0%, #533A99 100%);
}

/* Figma - Red-orange gradient matching Figma's brand */
.tech-item[data-tech="figma"] {
    background: linear-gradient(135deg, #FF7262 0%, #F24E1E 100%);
}

/* Git - Red gradient matching Git's brand */
.tech-item[data-tech="git"] {
    background: linear-gradient(135deg, #F05033 0%, #BD2C00 100%);
}

.tech-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    filter: brightness(1.1);
}