.section-portfolio-bg{background:#F8F9FF;padding:120px 0}.section-portfolio-container{max-width:1280px;margin:0 auto;padding:0 24px}.portfolio-title{font-size:clamp(2rem,4vw,3.75rem);font-weight:300;color:#060317;text-align:center;margin-bottom:64px}.portfolio-layout{display:flex;justify-content:space-between;align-items:center;gap:60px}.portfolio-list{flex-shrink:0}.portfolio-preview-wrapper{flex:1;max-width:700px}.portfolio-list,.portfolio-preview{position:relative}.portfolio-list{display:flex;flex-direction:column}.portfolio-list-slider{position:absolute;left:0;width:3px;background:#7C3AED;border-radius:2px;transition:top .35s ease,height .35s ease;z-index:1}.portfolio-list-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid #e8e4ff;padding:28px 0 28px 20px;cursor:pointer}.portfolio-list-item:first-child{border-top:1px solid #e8e4ff}.portfolio-list-name{font-size:2.2rem;font-weight:400;color:#0F0B2D;margin:0;transition:color .35s ease}.portfolio-list-item-active .portfolio-list-name{color:#7C3AED}.portfolio-list-meta{color:#6B7280;margin:6px 0 0}.portfolio-list-meta,.portfolio-list-stat{font-size:15px;font-family:var(--font-plus-jakarta),sans-serif}.portfolio-list-stat{display:inline-flex;align-items:center;gap:6px;font-weight:800;margin:10px 0 0;padding:5px 14px;border-radius:20px;background:linear-gradient(90deg,#7C3AED,#06B6D4,#7C3AED);background-size:200% 100%;animation:statGradientShift 4s ease infinite;color:#fff;-webkit-text-fill-color:#fff;letter-spacing:.02em}.portfolio-list-item:nth-child(2) .portfolio-list-stat{animation-delay:-1.3s}.portfolio-list-item:nth-child(3) .portfolio-list-stat{animation-delay:-2.6s}.portfolio-list-link{display:block;font-size:14px;font-weight:600;color:#7C3AED;text-decoration:none;margin:10px 0 0;font-family:var(--font-plus-jakarta),sans-serif;opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease,color .2s ease}.portfolio-list-item-active .portfolio-list-link{opacity:1;transform:translateX(0)}.portfolio-list-link:hover{color:#06B6D4}@keyframes statGradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.portfolio-browser{border-radius:12px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.1)}.portfolio-browser-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#1E1E2E}.portfolio-dots{display:flex;align-items:center;gap:6px;flex-shrink:0}.portfolio-dot{width:10px;height:10px;border-radius:50%}.portfolio-dot-red{background:#EF4444}.portfolio-dot-yellow{background:#F59E0B}.portfolio-dot-green{background:#22C55E}.portfolio-url{font-size:12px;color:#9CA3AF;font-family:var(--font-plus-jakarta),monospace;background:rgba(255,255,255,.08);padding:4px 14px;border-radius:6px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease}.portfolio-viewport{position:relative;overflow:hidden;aspect-ratio:16/10;background:#F3F4F6}.portfolio-screenshot{width:100%;height:auto;display:block;position:absolute;top:0;left:0;opacity:0;transition:opacity .4s ease}.portfolio-screenshot-active{opacity:1;transition:opacity .4s ease,transform var(--scroll-duration,3s) ease}.portfolio-preview:hover .portfolio-screenshot-active{transform:translateY(var(--scroll-offset,0))}.portfolio-hint{display:flex;align-items:center;gap:8px;position:absolute;bottom:16px;right:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#FFFFFF;font-size:13px;font-family:var(--font-plus-jakarta),sans-serif;padding:8px 14px;border-radius:20px;animation:portfolioHintIn .5s ease 1s both}@keyframes portfolioHintIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes portfolioHintScroll{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.portfolio-hint-dot{animation:portfolioHintScroll 1.5s ease-in-out infinite}@media (max-width:768px){.section-portfolio-bg{padding:60px 0}.section-portfolio-container{padding:0 16px}.portfolio-title{margin-bottom:24px}.portfolio-layout{flex-direction:column;gap:24px}.portfolio-list{width:100%;flex-direction:row;overflow-x:auto;gap:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}.portfolio-list::-webkit-scrollbar{display:none}.portfolio-list-slider{display:none}.portfolio-list-item{min-width:fit-content;padding:12px 20px;border:1px solid #e8e4ff;border-radius:12px;text-align:center;flex-shrink:0}.portfolio-list-item:first-child{border-top:none}.portfolio-list-item-active{background:#F0EBFF;border-color:#7C3AED}.portfolio-list-name{font-size:.95rem;font-weight:600;white-space:nowrap}.portfolio-list-link,.portfolio-list-meta,.portfolio-list-stat{display:none}.portfolio-preview-wrapper{max-width:100%;width:100%}.portfolio-hint{display:none}}.portfolio-mobile{display:none}@media (max-width:768px){.portfolio-desktop{display:none}.portfolio-mobile{display:flex;flex-direction:column;gap:40px}}@media (max-width:480px){.section-portfolio-bg{padding:40px 0}.portfolio-layout{gap:24px}}@media (max-width:768px){.portfolio-mobile-item{display:flex;flex-direction:column;gap:16px}.portfolio-mobile-info{text-align:center}.portfolio-mobile-name{font-size:1.2rem;font-weight:700;color:#0F0B2D;margin:0 0 4px}.portfolio-mobile-meta{color:#6B7280;margin:0 0 8px}.portfolio-mobile-link,.portfolio-mobile-meta{font-size:14px;font-family:var(--font-plus-jakarta),sans-serif}.portfolio-mobile-link{display:inline-block;font-weight:600;color:#7C3AED;text-decoration:none;margin-top:8px}.portfolio-mobile-link:hover{color:#06B6D4}}