.portfolio{max-width:none;background:#07152f;color:#f8fbff}
.portfolio-head{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,8vw,8rem);align-items:end}
.portfolio-head h2{max-width:760px;margin-bottom:0}
.portfolio-head>p{color:#b8c9e7;max-width:520px;margin-bottom:.35rem}
.portfolio-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);margin:2.7rem 0 2rem;overflow:hidden}
.portfolio-stats div{padding:1.4rem 1.5rem;border-right:1px solid rgba(255,255,255,.14)}
.portfolio-stats div:last-child{border:0}
.portfolio-stats strong,.portfolio-stats span{display:block}
.portfolio-stats strong{font-size:1.3rem;color:var(--cyan)}
.portfolio-stats span{font-size:.78rem;color:#aabddd}
.portfolio-filters{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.5rem}
.portfolio-filter{border:1px solid #36547d;background:transparent;color:#c7d7ef;border-radius:999px;padding:.58rem .9rem;font:700 .78rem Manrope;cursor:pointer}
.portfolio-filter:hover,.portfolio-filter:focus-visible,.portfolio-filter.active{background:var(--cyan);border-color:var(--cyan);color:#06152f}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.work-card{background:#fff;color:var(--ink);border-radius:var(--radius);overflow:hidden;min-width:0}
.work-card[hidden]{display:none}
.work-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#10294f}
.work-visual{height:155px;display:flex;align-items:flex-end;justify-content:space-between;padding:1.15rem;color:#fff;background:linear-gradient(135deg,#0d4078,#1e9de7);position:relative;overflow:hidden}
.work-visual:after{content:"";position:absolute;width:145px;height:145px;border:1px solid rgba(255,255,255,.35);border-radius:50%;right:-35px;top:-35px}
.board-visual{background:linear-gradient(135deg,#0b5a62,#16a9af)}
.computer-visual{background:linear-gradient(135deg,#3d286f,#765ed4)}
.work-visual span{font:500 .75rem "DM Mono";position:relative;z-index:1}
.work-visual b{font:500 .72rem "DM Mono";letter-spacing:.12em;position:relative;z-index:1}
.work-body{padding:1.35rem}
.work-tag{font:700 .68rem "DM Mono";color:#147ed5;text-transform:uppercase;letter-spacing:.06em}
.work-body h3{font-size:1.18rem;line-height:1.25;margin:.65rem 0}
.work-body>p{color:var(--muted);font-size:.83rem}
.inventory-project{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.inventory-visual{min-height:360px;padding:clamp(1.4rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem;background:radial-gradient(circle at 80% 5%,rgba(73,236,197,.24),transparent 30%),linear-gradient(145deg,#051a2b,#073b46 70%,#07585b);color:#fff}
.inventory-window{border:1px solid rgba(255,255,255,.25);border-radius:18px;background:rgba(5,18,36,.72);box-shadow:0 24px 55px rgba(0,0,0,.3);overflow:hidden}
.inventory-window-bar{display:flex;align-items:center;gap:.42rem;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.12);font:600 .7rem "DM Mono";color:#b9d9dc}
.inventory-window-bar span{width:9px;height:9px;border-radius:50%;background:#4de3c2}
.inventory-window-bar span:nth-child(2){opacity:.65}.inventory-window-bar span:nth-child(3){opacity:.35}
.inventory-window-bar b{margin-left:auto;font-weight:600}
.inventory-window-body{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;padding:1rem}
.inventory-metric{padding:.85rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.06)}
.inventory-metric small,.inventory-metric strong{display:block}.inventory-metric small{font:500 .58rem "DM Mono";letter-spacing:.1em;color:#9ec3c7}.inventory-metric strong{margin-top:.35rem;color:#5af0cd;font-size:1.15rem}
.inventory-bars{grid-column:1/-1;height:105px;display:flex;align-items:flex-end;gap:.55rem;padding:1rem;border-radius:12px;background:rgba(255,255,255,.04)}
.inventory-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(#57f0cf,#138e94)}
.inventory-bars i:nth-child(1){height:34%}.inventory-bars i:nth-child(2){height:58%}.inventory-bars i:nth-child(3){height:45%}.inventory-bars i:nth-child(4){height:78%}.inventory-bars i:nth-child(5){height:92%}
.privacy-badge{align-self:flex-start;border:1px solid rgba(90,240,205,.45);border-radius:999px;padding:.5rem .75rem;background:rgba(3,25,35,.6);font:600 .65rem "DM Mono";color:#8ff5df}
.inventory-project .work-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.6rem,4vw,3rem)}
.inventory-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .9rem;margin:1rem 0 1.15rem;padding:0;list-style:none}
.inventory-features li{font-size:.75rem;font-weight:700;color:#173858}.inventory-features li:before{content:"✓";margin-right:.45rem;color:#0a9e82}
.work-body .privacy-copy{padding:.75rem;border-left:3px solid #16b99b;background:#eefbf8;color:#315c59;font-size:.72rem}
.before-after{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem;gap:.8rem}
.before-after small,.before-after strong{display:block}
.before-after small{font:500 .62rem "DM Mono";color:var(--muted);margin-bottom:.2rem}
.before-after strong{font-size:.72rem}
.portfolio-note{margin:1.1rem 0 0;color:#91a8ca;font-size:.72rem}
.credentials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
.credentials-grid article{border-top:1px solid #36547d;padding-top:1.3rem}
.credentials-grid article>span{font:500 .68rem "DM Mono";color:var(--cyan)}
.credentials-grid h3{font-size:1rem;margin:.7rem 0}
.credentials-grid p,.credentials-grid li{color:#afc0db;font-size:.8rem}
.credentials-grid ul{padding-left:1.1rem}
.portfolio .text-link{color:var(--cyan)}
@media(max-width:760px){
  .portfolio-head,.portfolio-grid,.credentials-grid{grid-template-columns:1fr}
  .inventory-project{grid-column:auto;grid-template-columns:1fr}
  .inventory-visual{min-height:290px;padding:1rem}
  .inventory-features{grid-template-columns:1fr}
  .portfolio-stats{grid-template-columns:1fr}
  .portfolio-stats div{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .portfolio-stats div:last-child{border-bottom:0}
}