.portfolio-page{min-height:100vh}.portfolio{max-width:1200px;margin:0 auto;padding:var(--space-xl)}.portfolio__header{text-align:center;padding:var(--space-xl) 0 var(--space-3xl)}.portfolio__header-label{display:inline-block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--color-accent);margin-bottom:var(--space-md);padding:4px 16px;border:1px solid var(--color-accent);border-radius:20px}.portfolio__title{font-family:var(--font-heading);font-size:var(--text-5xl);font-weight:700;letter-spacing:-.04em;margin-bottom:var(--space-md);background:linear-gradient(135deg,var(--color-text) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.portfolio__subtitle{font-size:var(--text-lg);color:var(--color-text-muted);max-width:600px;margin:0 auto;line-height:1.6}.portfolio__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}.portfolio__card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;overflow:hidden;transition:all .4s cubic-bezier(.23,1,.32,1);animation:portfolio-card-in .6s ease forwards;opacity:0;display:flex;flex-direction:column}.portfolio__card:hover{border-color:var(--card-color);transform:translateY(-6px);box-shadow:0 20px 40px #00000014,0 0 0 1px var(--card-color)}@keyframes portfolio-card-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.portfolio__card-visual{position:relative;height:200px;overflow:hidden;background:linear-gradient(135deg,var(--card-color),var(--card-alt))}.portfolio__card-hero{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.portfolio__card:hover .portfolio__card-hero{transform:scale(1.05)}.portfolio__card-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--card-color),var(--card-alt));display:flex;align-items:center;justify-content:center}.portfolio__card-placeholder-text{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:700;color:#fff;opacity:.25;letter-spacing:-.02em;text-transform:uppercase}.portfolio__card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.6) 100%);pointer-events:none}.portfolio__card-field{position:absolute;top:var(--space-md);right:var(--space-md);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 10px;border-radius:4px}.portfolio__card-body{padding:var(--space-xl);display:flex;flex-direction:column;flex:1}.portfolio__card-top{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.portfolio__card-logo{width:32px;height:32px;border-radius:6px;object-fit:contain}.portfolio__card-name{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;color:var(--color-text)}.portfolio__card-tagline{font-size:var(--text-sm);color:var(--card-color);font-weight:500;margin-bottom:var(--space-sm)}.portfolio__card-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-md);flex:1}.portfolio__card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-md)}.portfolio__card-tag{font-family:var(--font-mono);font-size:10px;padding:3px 10px;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-muted);transition:all .2s}.portfolio__card:hover .portfolio__card-tag{border-color:var(--card-color);color:var(--card-color)}.portfolio__card-cta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-size:var(--text-sm);font-weight:600;color:var(--card-color);transition:gap .3s ease}.portfolio__card:hover .portfolio__card-cta{gap:12px}@media(max-width:900px){.portfolio__grid{grid-template-columns:1fr;gap:var(--space-lg)}.portfolio__title{font-size:var(--text-4xl)}}@media(max-width:640px){.portfolio{padding:var(--space-sm)}.portfolio__title{font-size:var(--text-3xl)}.portfolio__subtitle{font-size:var(--text-base)}.portfolio__card-visual{height:160px}.portfolio__card-body{padding:var(--space-md)}.portfolio__card-name{font-size:var(--text-lg)}}@media(max-width:400px){.portfolio__header{padding:var(--space-md) 0 var(--space-xl)}.portfolio__title{font-size:var(--text-2xl)}.portfolio__card-visual{height:130px}}
