/* ===== Projects ===== */
      .projects {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
      .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
      }
      .thumb {
        aspect-ratio: 16/9;
        background: linear-gradient(135deg, #18202b, #10151c);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        font-weight: 600;
        overflow: hidden;
      }

      .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .card-body {
        padding: 1rem;
      }
      .card h3 {
        margin: 0.2rem 0 0.35rem;
        font-size: 1.1rem;
      }
      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-top: 0.5rem;
      }
      .tag {
        font-size: 0.85rem;
        padding: 0.35rem 0.65rem;
        border-radius: 999px;
        font-weight: 700;
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .tag.angular {
        background: color-mix(in oklab, var(--angular) 26%, #0f1319);
        color: #fff;
      }
      .tag.vue {
        background: color-mix(in oklab, var(--vue) 28%, #0f1319);
        color: #0b1f17;
      }
      .tag.nestjs {
        background: color-mix(in oklab, var(--nestjs) 26%, #0f1319);
        color: #fff;
      }
      .tag.node {
        background: color-mix(in oklab, var(--node) 26%, #0f1319);
        color: #fff;
      }
      .tag.docker {
        background: color-mix(in oklab, var(--docker) 28%, #0f1319);
        color: #fff;
      }
      .tag.elastic {
        background: color-mix(in oklab, var(--elastic) 26%, #0f1319);
        color: #e6f7ff;
      }
      .tag.symfony {
        background: color-mix(in oklab, var(--symfony) 32%, #0f1319);
        color: #fff;
      }
      .tag.js {
        background: color-mix(in oklab, var(--js) 22%, #0f1319);
        color: #0e0e0e;
      }
      .tag.tailwind {
        background: color-mix(in oklab, var(--tailwind) 28%, #0f1319);
        color: #fff;
      }

      .card-actions {
        display: flex;
        gap: 0.6rem;
        margin-top: 1rem;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.8rem;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--chip);
      }
      .btn.primary {
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        border-color: transparent;
        color: white;
      }