body { 
    background-color: #f8fafc; 
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; 
    color: #334155; 
    margin: 0; 
    padding: 2rem 1rem; 
    -webkit-font-smoothing: antialiased; 
}
.portfolio-card { 
    max-width: 56rem; 
    margin: 2rem auto; 
    background: #ffffff; 
    border-radius: 0.75rem; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.04); 
    overflow: hidden; 
}
.gradient-bar { 
    height: 0.5rem; 
    background: linear-gradient(to right, #2563eb, #4f46e5); 
}
.header-block { 
    padding: 2.5rem; 
    background-color: #f8fafc; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    border-bottom: 1px solid #e2e8f0; 
}
.meta-flex { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}
@media (min-width: 768px) { 
    .meta-flex { flex-direction: row; justify-content: space-between; align-items: center; } 
    .contact-right { text-align: right; } 
}
.name-title { font-size: 1.875rem; font-weight: 800; color: #0f172a; margin: 0; tracking: -0.025em; }
.role-sub { font-size: 1.125rem; font-weight: 500; color: #2563eb; margin: 0.25rem 0 0 0; }
.contact-text { font-size: 0.875rem; color: #475569; margin: 0; line-height: 1.5; }
.badge-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.badge-tag { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 0.375rem; text-transform: uppercase; tracking: 0.05em; }
.body-space { padding: 2.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
.section-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; border-bottom: 2px solid #2563eb; padding-bottom: 0.25rem; margin: 0 0 1rem 0; text-transform: uppercase; tracking: 0.05em; }
.section-desc { font-size: 0.95rem; color: #475569; line-height: 1.625; margin: 0; text-align: justify; }
.skills-grid { display: grid; grid-template-cols: 1fr; gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 768px) { .skills-grid { grid-template-cols: 1fr 1fr; } }
.skill-cat { font-size: 0.875rem; font-weight: 700; color: #475569; text-transform: uppercase; tracking: 0.05em; margin: 0 0 0.25rem 0; }
.skill-text { font-size: 0.875rem; color: #64748b; line-height: 1.5; margin: 0; }
.job-block { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; }
.job-row { display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 640px) { .job-row { flex-direction: row; align-items: center; } }
.job-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0; }
.job-date { font-size: 0.875rem; font-weight: 600; color: #64748b; background-color: #f1f5f9; padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.job-company { font-size: 0.875rem; font-weight: 500; color: #475569; margin: 0; }
.job-list { margin: 0.5rem 0 0 0; padding-left: 1.25rem; font-size: 0.875rem; color: #475569; display: flex; flex-direction: column; gap: 0.5rem; }
.edu-item { font-size: 0.875rem; color: #475569; line-height: 1.5; margin-bottom: 0.75rem; }
.footer-text { text-align: center; margin-top: 2rem; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; tracking: 0.1em; }
@media (min-width: 768px) { .footer-grid { display: grid; grid-template-cols: 1fr 1fr; gap: 2rem; } }