.portfolio-showcase { padding-bottom:64px; }
.portfolio-intro { padding:clamp(28px,5vw,72px) 0 52px; }
.portfolio-intro h1 { max-width:none; margin:20px 0 32px; font-size:clamp(3rem,6.5vw,6.8rem); font-weight:650; line-height:1.02; letter-spacing:-.055em; }
.portfolio-intro h1 em { font-style:normal; color:#d3a5ff; background:linear-gradient(120deg,#e9d8ff,#b45cff); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.portfolio-intro__bottom { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.portfolio-intro__bottom p { margin:0; color:var(--muted); line-height:1.7; font-size:1.12rem; }
.portfolio-intro__bottom a { flex-shrink:0; }
.portfolio-section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:24px; }
.portfolio-section-heading h2 { margin:0; font-size:1.35rem; font-weight:550; letter-spacing:-.02em; }
.portfolio-section-heading > span { color:var(--muted); font-size:.9rem; }
.portfolio-app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.portfolio-feature { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #ffffff1c; border-radius:24px; background:#12121b; }
.portfolio-feature__copy { display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:28px 32px 32px; }
.portfolio-feature__copy .eyebrow { margin:0; font-size:.65rem; color:#c5ace5; }
.portfolio-feature__copy h3 { margin:12px 0; font-size:clamp(1.65rem,2.6vw,2.2rem); line-height:1.15; letter-spacing:-.035em; color:var(--ink); }
.portfolio-feature__copy > p:not(.eyebrow) { margin:0 0 20px; max-width:360px; color:var(--muted); line-height:1.6; }
.portfolio-feature__link { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:auto; color:#d3b7f5; font-weight:550; text-decoration:none; transition:color .18s ease; }
.portfolio-feature__link:hover { color:#fff; }
.portfolio-feature a:focus-visible { outline:2px solid #d3b7f5; outline-offset:-4px; border-radius:8px; }
.portfolio-feature__visual { order:-1; display:flex; align-items:center; justify-content:center; height:360px; padding:28px; background:#181820; }
.portfolio-feature__visual img { display:block; object-fit:contain; width:auto; height:100%; max-width:100%; transform:none; filter:none; }
.portfolio-feature--moji .portfolio-feature__visual img { height:86%; }
.portfolio-gallery { padding-top:64px; scroll-margin-top:110px; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.portfolio-filters[hidden],.portfolio-project[hidden] { display:none; }
.portfolio-filters button { font:inherit; font-size:.85rem; min-height:44px; padding:10px 18px; border:1px solid #ffffff26; border-radius:99px; background:linear-gradient(135deg,#ffffff0e,#ffffff03); color:var(--muted); cursor:pointer; box-shadow:inset 0 1px 0 #ffffff12; }
.portfolio-filters button[aria-pressed="true"] { color:#fff; border-color:#cc9bff70; background:#a44fe52b; }
.portfolio-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.portfolio-project { min-width:0; border:1px solid #dbc4ff30; border-radius:28px; overflow:hidden; background:linear-gradient(135deg,#ffffff09,#ffffff02); box-shadow:inset 0 1px 0 #ffffff1c; }
.portfolio-project > a { display:block; height:100%; color:inherit; text-decoration:none; }
.portfolio-project figure { position:relative; aspect-ratio:16/10; overflow:hidden; margin:0; background:#1b1627; }
.portfolio-project figure img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.portfolio-project__open { position:absolute; bottom:18px; right:18px; padding:10px 16px; border:1px solid #ffffff50; border-radius:99px; background:#171222bb; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 #ffffff30; font-size:.8rem; color:white; }
.portfolio-project__copy { padding:24px 26px 28px; }
.portfolio-project__copy .eyebrow { font-size:.65rem; min-height:1.6em; line-height:1.6; }
.portfolio-project h3 { margin:10px 0 0; font-size:clamp(1.3rem,2.2vw,2rem); letter-spacing:-.025em; line-height:1.2; overflow-wrap:anywhere; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .portfolio-project a:hover img { transform:scale(1.035); } }
@media(max-width:700px) { .portfolio-intro { padding-top:26px; } .portfolio-intro__bottom { align-items:start; flex-direction:column; } .portfolio-intro h1 { font-size:clamp(2.8rem,10vw,4rem); } .portfolio-section-heading { align-items:start; flex-direction:column; gap:6px; } .portfolio-app-grid { grid-template-columns:1fr; } .portfolio-feature { border-radius:22px; } .portfolio-feature__copy { padding:24px; } .portfolio-feature__visual { height:310px; padding:24px; } .portfolio-project-grid { grid-template-columns:1fr; gap:22px; } .portfolio-gallery { padding-top:36px; } .portfolio-project__copy { padding:22px; } .portfolio-intro__bottom p { font-size:1rem; } }
@media(prefers-reduced-motion:reduce) { .portfolio-showcase img { transition:none; } }

.portfolio-showcase .secondary-button { display:inline-flex; align-items:center; gap:14px; min-height:44px; padding:12px 22px; }