.portfolio-intro { display:grid; grid-template-columns:1.25fr 1fr; align-items:end; gap:64px; padding-block:64px 80px; }
.portfolio-intro h1 { font-size:clamp(42px,5.7vw,78px); line-height:1.08; margin-bottom:0; }
.portfolio-intro-copy { max-width:440px; padding-bottom:6px; }
.portfolio-intro-copy p { color:var(--muted); font-size:17px; line-height:1.75; margin-bottom:26px; }
.portfolio-projects { padding-bottom:96px; scroll-margin-top:24px; }
.portfolio-section-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:22px; margin-bottom:24px; border-block:1px solid var(--line); }
.portfolio-section-heading h2 { font-size:18px; letter-spacing:-.02em; margin:0; }
.portfolio-section-heading > span { color:var(--muted); font-size:12px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.portfolio-card { overflow:hidden; min-width:0; display:flex; flex-direction:column; border:1px solid #34333d; border-radius:12px; background:#15151b; transition:border-color .2s ease; }
.portfolio-card:hover,.portfolio-card:focus-within { border-color:var(--violet); }
.portfolio-cover { position:relative; isolation:isolate; overflow:hidden; aspect-ratio:1.9; background:radial-gradient(ellipse at 85% 30%,#30224e,transparent 70%),linear-gradient(115deg,#10131b,#191321); border-bottom:1px solid var(--line); }
.portfolio-cover::before { content:''; position:absolute; z-index:-1; inset:0; opacity:.28; background-image:linear-gradient(#8d5cff33 1px,transparent 1px),linear-gradient(90deg,#8d5cff33 1px,transparent 1px); background-size:32px 32px; }
.portfolio-category { position:absolute; z-index:2; right:16px; top:16px; background:#090a0f; color:var(--lime); padding:7px 10px; border:1px solid #454330; border-radius:3px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-cover-copy { position:absolute; z-index:1; left:28px; top:24%; width:54%; display:flex; flex-direction:column; gap:18px; }
.portfolio-number { color:#bbb0d4; font-size:9px; letter-spacing:.14em; }
.portfolio-cover-name { max-width:260px; font-size:clamp(26px,3.2vw,46px); font-weight:800; line-height:1.05; letter-spacing:-.05em; text-wrap:balance; }
.portfolio-cover img { position:absolute; right:-6%; bottom:-18%; height:114%; width:60%; object-fit:contain; object-position:bottom; opacity:.72; mask-image:linear-gradient(90deg,transparent,#000 30%); }
.portfolio-card--shop .portfolio-cover { background:radial-gradient(ellipse at 80% 40%,#414521,transparent 70%),#13151a; }
.portfolio-card--shop .portfolio-cover:not(.portfolio-cover--screenshot) img { right:-12%; bottom:-28%; width:80%; height:120%; transform:rotate(-6deg); }
.portfolio-card--systems .portfolio-cover { background:radial-gradient(ellipse at 90% 50%,#124957,transparent 70%),#10141e; }
.portfolio-content { flex:1; display:flex; flex-direction:column; padding:28px; }
.portfolio-content h2 { margin:0 0 14px; font-size:22px; font-weight:800; line-height:1.25; letter-spacing:-.03em; }
.portfolio-content > p { margin:0 0 28px; color:#babac3; font-size:14px; line-height:1.8; }
.portfolio-card-footer { margin-top:auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.portfolio-technology { border:1px solid #383840; border-radius:3px; padding:5px 9px; color:#bbb7c8; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.portfolio-action { color:var(--lime); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding-block:8px; }
.portfolio-action span { margin-left:8px; }
.portfolio-action:hover { color:#fff; }
.portfolio-page .web-contact h2 { font-size:clamp(32px,4.3vw,58px); line-height:1.08; margin-bottom:0; }
.portfolio-cover--screenshot .portfolio-cover-copy { display:none; }
.portfolio-cover--screenshot img { inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:1; mask-image:none; transform:none; }
@media (max-width:800px) {
  .portfolio-intro { grid-template-columns:1fr; gap:28px; padding-block:40px 56px; }
  .portfolio-intro-copy { max-width:600px; }
  .portfolio-grid { gap:20px; }
  .portfolio-content { padding:22px; }
  .portfolio-cover-copy { left:20px; }
  .portfolio-cover-name { font-size:28px; }
  .portfolio-section-heading { align-items:flex-start; flex-direction:column; gap:10px; }
  .portfolio-projects { padding-bottom:64px; }
}
@media (max-width:600px) {
  .portfolio-grid { grid-template-columns:1fr; }
  .portfolio-cover-name { font-size:clamp(28px,7.5vw,42px); }
  .portfolio-category { top:12px; right:12px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .portfolio-card { transition:none; } }