/* ===================================================================
   WARUM-ICH/TECH-STACK.CSS - Tech Stack Section & Tags
   =================================================================== */

.tech-stack {
    padding: 100px 0;
    background: var(--bg-darker);
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.stack-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 32px;
    transition: all 0.3s ease;
}

.stack-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}

.stack-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.stack-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stack-icon svg {
    width: 24px;
    height: 24px;
}

.stack-icon.backend {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.stack-icon.frontend {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.stack-icon.infra {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.stack-icon.ai {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
}

.stack-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.stack-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ===== Tech Tags ===== */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.tech-tag:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.tag-icon {
    font-size: 1rem;
}

/* Tech Tag Color Variants */
.tech-tag.python { background: rgba(55, 118, 171, 0.2); border-color: #3776ab; color: #3776ab; }
.tech-tag.fastapi { background: rgba(0, 150, 136, 0.2); border-color: #009688; color: #009688; }
.tech-tag.js { background: rgba(247, 223, 30, 0.2); border-color: #f7df1e; color: #f7df1e; }
.tech-tag.react { background: rgba(97, 218, 251, 0.2); border-color: #61dafb; color: #61dafb; }
.tech-tag.css { background: rgba(38, 77, 228, 0.2); border-color: #264de4; color: #818cf8; }
.tech-tag.cloud { background: rgba(249, 115, 22, 0.2); border-color: #f97316; color: #f97316; }
.tech-tag.ai-tag { background: rgba(139, 92, 246, 0.2); border-color: #8b5cf6; color: #a78bfa; }
.tech-tag.ts { background: rgba(49, 120, 198, 0.2); border-color: #3178c6; color: #3178c6; }
.tech-tag.tailwind { background: rgba(56, 189, 248, 0.2); border-color: #38bdf8; color: #38bdf8; }
.tech-tag.docker { background: rgba(33, 150, 243, 0.2); border-color: #2196f3; color: #2196f3; }
.tech-tag.stripe { background: rgba(99, 91, 255, 0.2); border-color: #635bff; color: #635bff; }
.tech-tag.postgres { background: rgba(51, 103, 145, 0.2); border-color: #336791; color: #5d9ecf; }
.tech-tag.redis { background: rgba(220, 56, 45, 0.2); border-color: #dc382d; color: #ff6b6b; }
.tech-tag.celery { background: rgba(55, 178, 77, 0.2); border-color: #37b24d; color: #51cf66; }
.tech-tag.nextjs { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; color: #ffffff; }
.tech-tag.vercel { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; color: #ffffff; }
.tech-tag.github { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; color: #ffffff; }
.tech-tag.sendgrid { background: rgba(0, 178, 227, 0.2); border-color: #00b2e3; color: #00b2e3; }
.tech-tag.langchain { background: rgba(16, 185, 129, 0.2); border-color: #10b981; color: #34d399; }