/* === Capabilities Grid === */
.capabilities-grid { display: grid; grid-template-columns: 3.5fr 6.5fr; gap: 0 50px; align-items: stretch; }
.skills-col { display: flex; flex-direction: column; gap: 3px; padding-top: 0; height: 100%; }
.skill-modern-item { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; justify-content: center; }
.skill-head { display: flex; justify-content: space-between; align-items: flex-end; }
.skill-name { font-size: 1.1rem; font-weight: 400; color: #111; letter-spacing: -0.01em; line-height: 1.2; font-family: var(--normal-font); }
.skill-level-num { font-family: monospace; font-size: 1rem; font-weight: 500; color: #9ca3af; letter-spacing: 0.05em; }

.skill-battery-track { position: relative; width: 100%; height: 8px; background-color: #e5e7eb; border-radius: 4px; border: 1px solid #d1d5db; overflow: hidden; }
.skill-battery-track::before { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 4px; height: 6px; background-color: #d1d5db; border-radius: 0 2px 2px 0; border: 1px solid #d1d5db; border-left: none; }
.skill-battery-bar { height: 100%; background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, white)); border-radius: 3px; transition: width 0.3s ease; }

.projects-col { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; background: #ffffff !important; }
.project-card { background: #ffffff !important; padding: 1rem; border-radius: 4px; border: 1px solid #f3f4f6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; flex: 1; }
.proj-name { font-size: 1rem; font-weight: var(--bold-weight, 700); color: #111; display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; letter-spacing: -0.01em; font-family: var(--bold-font); }
.proj-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--trophy-color, #A5B4FC); }
.proj-badge svg { width: 18px; height: 18px; stroke: currentColor; }
.proj-name span:first-child { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proj-name svg { width: 20px; height: 20px; opacity: 0.9; flex-shrink: 0; display: block; }
.proj-desc { font-size: 0.95rem; color: #4b5563; line-height: 1.5; white-space: pre-line; opacity: 0.9; font-family: var(--normal-font); }