/* Reset & base font */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Inter', Arial, sans-serif; background-color: #f9fafb; color: #111827; }

  /* Container */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem;
  }

  h1 {
    font-size: 2.25rem; /* 4xl */
    font-weight: 700;   /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    opacity: 1;
    transform: none;
  }

  /* Grid responsive */
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem; /* gap-6 */
  }
  @media(min-width: 640px) { /* sm:grid-cols-2 */
    .grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media(min-width: 1024px) { /* lg:grid-cols-3 */
    .grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* Card link */
  .card-link { text-decoration: none; color: inherit; }

  /* Card */
  .card {
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #e5e7eb; /* border */
    background-color: #ffffff; /* bg-card */
    color: #111827; /* text-card-foreground */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
    overflow: hidden;
    transition: transform 0.2s ease; /* transition-transform */
    cursor: pointer;
    opacity: 1;
    transform: none;
  }
  .card:hover { transform: translateY(-0.25rem); } /* hover:-translate-y-1 */

  /* Card header (icon background) */
  .card-header {
    height: 12rem; /* h-48 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6; /* bg-muted */
  }
  .card-header svg {
    width: 5rem; /* h-20/w-20 */
    height: 5rem;
    color: rgba(107,114,128,0.4); /* text-muted-foreground/40 */
  }

  /* Card body */
  .card-body { padding: 1.25rem; /* p-5 */ }
  .card-body h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
  }
  .role {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color:  #ef4444; /* text-primary */
    margin-top: 0.25rem;
  }
  .description {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-muted-foreground */
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* line-clamp-2 */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .experience {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-muted-foreground */
    margin-top: 0.5rem;
  }