/* Portfolio showcase v2 — polished cards, real screenshots, filtering and accessible motion */
:root{--show-accent:#9ab8ff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio-section{padding-top:118px;padding-bottom:120px}
.work-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px}
.work-heading h2{font-size:clamp(2.65rem,5vw,5.1rem);line-height:1.08;letter-spacing:-.07em;margin:0}
.work-heading h2 em{font-style:normal;color:var(--accent)}
.work-heading>p{max-width:345px;margin:0 0 7px;line-height:1.85}
.work-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.filter-list{display:flex;gap:8px;flex-wrap:wrap}
.filter-chip{appearance:none;border:1px solid #354763;background:#121d2d;color:#c6d2e6;border-radius:100px;padding:11px 17px;cursor:pointer;font-weight:700;font-size:.84rem;transition:background .25s,border-color .25s,color .25s,transform .25s}
.filter-chip span{font-size:.67rem;opacity:.7;margin-left:5px;font-variant-numeric:tabular-nums}
.filter-chip:hover{border-color:#9ab8ff;transform:translateY(-2px)}
.filter-chip.active{background:#9ab8ff;color:#081120;border-color:#9ab8ff}
.project-search{display:flex;align-items:center;gap:9px;border:1px solid #354763;background:#111c2d;border-radius:9px;padding:0 13px;min-width:220px;color:#91a9c8}
.project-search>span{font-size:1.6rem;line-height:1}
.project-search input{background:transparent;border:0;outline:0;padding:12px 0;color:white;font:inherit;width:100%;min-width:0}
.project-search:focus-within{outline:2px solid #9ab8ff;outline-offset:2px}
.project-search input::placeholder{color:#9baac0}
.portfolio-meta{display:flex;justify-content:space-between;gap:12px;margin:26px 0 19px;font-size:.73rem;letter-spacing:.12em;font-weight:800;color:#94a8c8}
.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.showcase-card{background:#121c2c;border:1px solid #2c3b53;border-radius:16px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;min-width:0}
.showcase-card:hover{transform:translateY(-7px);border-color:#7b9fe9;box-shadow:0 25px 55px #0006}
.showcase-card[hidden]{display:none!important}
.preview-link{display:block;overflow:hidden;position:relative;background:#0c1422}
.browser-frame{position:relative;overflow:hidden}
.browser-top{height:37px;background:#1c2b40;display:flex;align-items:center;gap:15px;padding:0 15px;border-bottom:1px solid #394a65}
.browser-dots{display:flex;gap:5px}
.browser-dots i{width:7px;height:7px;border-radius:50%;background:#6b7f9b}
.browser-dots i:first-child{background:#f18883}.browser-dots i:nth-child(2){background:#efc66d}.browser-dots i:nth-child(3){background:#7bcaa7}
.browser-address{color:#9bb0cc;font-size:.67rem;letter-spacing:.05em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.browser-arrow{margin-left:auto;color:#bed1ee}
.browser-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s;background:#17273a}
.showcase-card:hover .browser-frame img{transform:scale(1.055);filter:brightness(.75)}
.preview-overlay{position:absolute;left:50%;top:55%;transform:translate(-50%,-40%);opacity:0;background:#f2f6ff;color:#0c1524;border-radius:50px;padding:13px 18px;font-weight:800;font-size:.75rem;letter-spacing:.08em;white-space:nowrap;transition:opacity .3s,transform .3s;pointer-events:none}
.showcase-card:hover .preview-overlay,.preview-link:focus-visible .preview-overlay{opacity:1;transform:translate(-50%,-50%)}
.showcase-info{padding:27px 27px 23px}
.showcase-top,.showcase-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.project-category{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#9bb5e6}
.tier-label{font-size:.69rem;font-weight:800;border-radius:100px;padding:5px 11px;background:#27364c;color:#c4d3eb}
.tier-business{background:#223954;color:#a8ceff}.tier-premium{background:#4b3729;color:#f0c994}
.showcase-info h3{font-size:1.48rem;margin:14px 0 9px;letter-spacing:-.035em}
.showcase-info p{font-size:.9rem;line-height:1.7;margin-bottom:22px;min-height:52px}
.showcase-bottom{border-top:1px solid #314056;padding-top:16px;font-size:.76rem;color:#8ea3be}
.showcase-bottom>a{color:#b4caff;font-size:.82rem;font-weight:800;white-space:nowrap}
.showcase-bottom>a:hover{text-decoration:underline}
.empty-projects{border:1px dashed #465b7a;padding:45px;text-align:center;border-radius:14px;color:#c1cce0}
.empty-projects button{border:0;background:none;color:#a8c2ff;font:inherit;font-weight:800;cursor:pointer}
.portfolio-disclaimer{font-size:.79rem;color:#93a5bd;line-height:1.8;margin-top:26px}
.reveal-on-scroll{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:850px){.work-heading{display:block}.work-heading>p{max-width:600px;margin-top:20px}.showcase-grid{gap:16px}.showcase-info{padding:20px}.showcase-info p{min-height:74px}}
@media(max-width:620px){.portfolio-section{padding-top:75px;padding-bottom:75px}.work-controls{align-items:stretch}.filter-list{gap:7px}.filter-chip{padding:10px 12px;font-size:.78rem}.project-search{width:100%}.portfolio-meta>span:last-child{display:none}.showcase-grid{grid-template-columns:1fr}.showcase-info p{min-height:0}.showcase-info h3{font-size:1.35rem}.showcase-bottom{flex-wrap:wrap}.work-heading h2{font-size:2.5rem}}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1;transform:none;transition:none}.showcase-card,.browser-frame img,.preview-overlay,.filter-chip{transition:none!important}}