.portfolio-container{color:var(--text-primary);padding-bottom:120rem}.portfolio-hero{border-bottom:1rem solid var(--border-primary);background:var(--bg-primary);justify-content:center;align-items:center;min-height:480rem;margin-bottom:60rem;padding:80rem 0;display:flex;position:relative;overflow:hidden}.portfolio-hero-bg{z-index:1;position:absolute;inset:0}.portfolio-hero-overlay{background:radial-gradient(circle at 50% 50%, #020d1900 30%, #020d19d9 100%), linear-gradient(to bottom, transparent 60%, var(--bg-primary) 100%);pointer-events:none;z-index:2;position:absolute;inset:0}.portfolio-hero-content{z-index:3;text-align:center;width:100%;position:relative}.portfolio-title{letter-spacing:-2rem;color:#fff;margin-bottom:16rem;font-size:56rem;font-weight:800}.portfolio-desc{color:var(--text-secondary);max-width:600rem;margin:0 auto;font-size:18rem;line-height:1.6}.fade-in{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transform:translateY(20rem)}.fade-in.active{opacity:1;transform:translateY(0)}.portfolio-section{margin-top:80rem}.portfolio-sec-header{text-align:center;max-width:700rem;margin:0 auto 48rem}.portfolio-sec-subtitle{text-transform:uppercase;color:var(--accent-purple);letter-spacing:2rem;align-items:center;gap:8rem;margin-bottom:12rem;font-size:14rem;font-weight:700;display:inline-flex}.portfolio-sec-title{color:#fff;letter-spacing:-1rem;margin-bottom:16rem;font-size:38rem;font-weight:800}.portfolio-sec-intro{color:var(--text-secondary);font-size:16rem;line-height:1.6}.portfolio-web-grid{grid-template-columns:repeat(2,1fr);gap:32rem;display:grid}.portfolio-web-card{border:1rem solid var(--border-primary);border-top:3rem solid var(--card-accent);-webkit-backdrop-filter:blur(10rem);backdrop-filter:blur(10rem);background:#0b111e66;border-radius:24rem;flex-direction:column;padding:36rem;transition:transform .3s,border-color .3s;display:flex;box-shadow:0 20rem 40rem -10rem #00000080,inset 0 1rem 1rem #ffffff0d}.portfolio-web-card:hover{border-color:var(--card-accent);transform:translateY(-8rem)}.portfolio-web-shot{border-bottom:1rem solid var(--border-primary);aspect-ratio:16/9;background:var(--bg-secondary);border-radius:21rem 21rem 0 0;margin:-36rem -36rem 24rem;display:block;overflow:hidden}.portfolio-web-shot img{object-fit:cover;object-position:top;width:100%;height:100%;transition:transform .5s;display:block}.portfolio-web-card:hover .portfolio-web-shot img{transform:scale(1.04)}.portfolio-web-top{justify-content:space-between;align-items:center;gap:12rem;margin-bottom:20rem;display:flex}.portfolio-badge{color:#a855f7;text-transform:uppercase;letter-spacing:1rem;background:#863bff1a;border-radius:100rem;padding:4rem 12rem;font-size:11rem;font-weight:700;display:inline-block}.portfolio-domain{font-size:13rem;font-family:var(--font-mono);color:var(--text-secondary);align-items:center;gap:6rem;text-decoration:none;transition:color .2s;display:inline-flex}.portfolio-domain:hover{color:var(--card-accent)}.portfolio-web-name{color:#fff;letter-spacing:-.5rem;margin-bottom:6rem;font-size:28rem;font-weight:800}.portfolio-web-tagline{color:var(--card-accent);margin-bottom:16rem;font-size:15rem;font-weight:600}.portfolio-web-text{color:var(--text-secondary);flex-grow:1;margin-bottom:20rem;font-size:14.5rem;line-height:1.7}.portfolio-chips{flex-wrap:wrap;gap:8rem;margin:0 0 24rem;padding:0;list-style:none;display:flex}.portfolio-chip{color:var(--text-secondary);border:1rem solid var(--border-primary);background:#ffffff0a;border-radius:100rem;padding:5rem 12rem;font-size:12rem;font-weight:600}.portfolio-visit-btn{color:#fff;background:linear-gradient(135deg, var(--card-accent,var(--accent-purple)), #863bffb3);border-radius:100rem;justify-content:center;align-self:flex-start;align-items:center;gap:8rem;padding:12rem 24rem;font-size:14rem;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex}.portfolio-visit-btn:hover{transform:translateY(-2rem);box-shadow:0 10rem 24rem #863bff59}.portfolio-game-grid{grid-template-columns:repeat(auto-fill,minmax(220rem,1fr));gap:24rem;display:grid}.portfolio-game-card{border:1rem solid var(--border-primary);color:var(--text-primary);background:#0b111e66;border-radius:20rem;flex-direction:column;gap:12rem;padding:28rem 24rem;text-decoration:none;transition:transform .3s,border-color .3s;display:flex}.portfolio-game-card:hover{border-color:var(--card-accent);transform:translateY(-6rem)}.portfolio-game-shot{border-bottom:1rem solid var(--border-primary);aspect-ratio:4/5;background:var(--bg-secondary);border-radius:19rem 19rem 0 0;margin:-28rem -24rem 4rem;display:block;overflow:hidden}.portfolio-game-shot img{object-fit:cover;object-position:50% 22%;width:100%;height:100%;transition:transform .5s;display:block}.portfolio-game-card:hover .portfolio-game-shot img{transform:scale(1.05)}.portfolio-game-head{align-items:center;gap:12rem;display:flex}.portfolio-game-tile{object-fit:cover;border:1rem solid color-mix(in srgb, var(--card-accent) 40%, transparent);width:44rem;height:44rem;box-shadow:0 8rem 20rem -6rem color-mix(in srgb, var(--card-accent) 50%, transparent);border-radius:12rem}.portfolio-game-name{color:#fff;font-size:18rem;font-weight:700}.portfolio-game-text{color:var(--text-secondary);flex-grow:1;font-size:13.5rem;line-height:1.6}.portfolio-game-store{text-transform:uppercase;letter-spacing:1rem;color:var(--card-accent);align-items:center;gap:6rem;font-size:12rem;font-weight:700;display:inline-flex}.portfolio-cta{text-align:center;max-width:640rem;margin-top:100rem}.portfolio-cta-title{color:#fff;letter-spacing:-1rem;margin-bottom:14rem;font-size:32rem;font-weight:800}.portfolio-cta-text{color:var(--text-secondary);margin-bottom:28rem;font-size:16rem;line-height:1.7}.portfolio-cta-text a{color:var(--accent-cyan);text-decoration:none}.portfolio-cta-btn{--card-accent:var(--accent-purple);align-self:center}@media (max-width:1024px){.portfolio-game-grid{grid-template-columns:repeat(auto-fill,minmax(200rem,1fr))}}@media (max-width:768px){.portfolio-title{font-size:42rem}.portfolio-desc{padding:0 16rem;font-size:16rem}.portfolio-section{margin-top:60rem}.portfolio-sec-title{font-size:28rem}.portfolio-web-grid{grid-template-columns:1fr;gap:24rem}.portfolio-web-card{padding:28rem 24rem}.portfolio-web-shot{margin:-28rem -24rem 20rem}.portfolio-web-top{flex-direction:column;align-items:flex-start;gap:8rem}.portfolio-cta-title{font-size:26rem}}
