.hero{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));color:var(--color-surface);padding:var(--spacing-xxl);border-radius:var(--border-radius);text-align:center;margin-bottom:var(--spacing-xxl)}.hero h1{color:var(--color-surface);margin-bottom:var(--spacing-lg);font-size:2.5rem}.hero p{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md)}.hero .subtitle{color:#ecf0f1;font-style:italic}.portfolio{margin-bottom:var(--spacing-xxl);padding:var(--spacing-xl);border-radius:var(--border-radius)}.portfolio h2{text-align:center;margin-bottom:var(--spacing-md)}.project-date{color:var(--color-text-light);margin-bottom:var(--spacing-md);font-size:.9rem}.project-description{color:var(--color-text-light);margin-bottom:var(--spacing-md);line-height:1.6}.project-tags{gap:var(--spacing-xs);margin-bottom:var(--spacing-md);flex-wrap:wrap;display:flex}.tag{background-color:var(--color-background);color:var(--color-primary);font-size:.85rem;font-weight:var(--font-weight-bold);border-radius:4px;padding:4px 8px}.project-link{color:var(--color-secondary);font-weight:var(--font-weight-bold);transition:color var(--transition-base) ease;display:inline-block}.project-link:hover{color:var(--color-accent)}.tools{margin-bottom:var(--spacing-xxl);background-color:var(--color-surface);padding:var(--spacing-xl);border-radius:var(--border-radius)}.tools h2{text-align:center;margin-bottom:var(--spacing-md)}.card--tool h3{color:var(--color-primary)}.about,.contact{background-color:var(--color-surface);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);border-radius:var(--border-radius)}.about h2,.contact h2{color:var(--color-primary);margin-bottom:var(--spacing-lg)}.about-content{align-items:flex-start;gap:var(--spacing-xl);line-height:1.8;display:flex}.about-photo{object-fit:cover;width:200px;height:200px;box-shadow:var(--shadow-md);border-radius:50%;flex-shrink:0}.contact-content{line-height:1.8}.contact-links{margin-top:var(--spacing-md);list-style:none}.contact-links li{margin-bottom:var(--spacing-md)}section,.portfolio,.tools,.about,.contact{scroll-margin-top:120px}@media (width<=768px){.hero h1{font-size:2rem}}@media (width<=600px){.about-content{flex-direction:column;align-items:center}}@media (width<=480px){.hero{padding:var(--spacing-xl)}.hero h1{font-size:1.75rem}}@media (width<=400px){.contact-links li{word-break:break-all}}