.portfolio-section{position:relative;padding:var(--section-space-lg) 0 var(--section-space-xl);background:linear-gradient(180deg,#050505,#070807 44%,#030303);overflow:hidden}.portfolio-section:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(184,239,67,.08) 50%,transparent 100%) top 208px center / min(68vw,880px) 1px no-repeat,repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.025) 120px);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 82%,transparent);pointer-events:none}.portfolio-section:after{content:"";position:absolute;left:50%;bottom:56px;width:min(1080px,84vw);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:translate(-50%);pointer-events:none}.portfolio-header{position:relative;z-index:1;max-width:900px;margin:0 auto 80px;text-align:center}.portfolio-title{font-size:var(--heading-size);line-height:var(--heading-line);letter-spacing:var(--heading-spacing);color:#fff}.portfolio-slider{position:relative;display:flex;align-items:center;padding:0 10%;isolation:isolate}.portfolio-slider:before{content:"";position:absolute;inset:0 0% 28px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(5,5,5,.96),transparent 12%,transparent 88%,rgba(5,5,5,.96));pointer-events:none;z-index:2}.portfolio-track{display:flex;gap:50px;width:max-content;padding:42px 0 68px;position:relative;z-index:1;animation:portfolio-marquee 55s linear infinite}@keyframes portfolio-marquee{0%{transform:translate(0)}to{transform:translate(calc(-50% - 25px))}}.portfolio-slider:hover .portfolio-track{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.portfolio-track{animation:none}.portfolio-card,.portfolio-image,.portfolio-inner:after,.portfolio-overlay,.portfolio-overlay:before,.portfolio-card:before,.portfolio-card:after,.portfolio-arrow{transition:none}}.portfolio-card{position:relative;flex:0 0 clamp(240px,23vw,520px);aspect-ratio:16/9.2;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0b0b0b;cursor:pointer;transition:transform var(--transition-medium),border-color var(--transition-medium),box-shadow var(--transition-medium),opacity var(--transition-medium);box-shadow:0 18px 56px #00000057}.portfolio-inner{position:absolute;inset:0;overflow:hidden;border-radius:inherit}.portfolio-inner:after{content:"";position:absolute;inset:-40% -55%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.18) 49%,transparent 60%);opacity:0;transform:translate(-38%) rotate(8deg);transition:opacity .45s ease,transform .8s ease;z-index:1;pointer-events:none}.portfolio-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.72);transform:scale(1);transition:transform var(--transition-slow),filter var(--transition-slow)}.portfolio-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;z-index:2;background:linear-gradient(to top,#000000f0,#00000057 66%,#0000);transition:padding var(--transition-medium),background var(--transition-medium)}.portfolio-overlay:before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,rgba(184,239,67,.7),rgba(255,255,255,.2),transparent);opacity:0;transition:opacity var(--transition-medium)}.portfolio-overlay p{margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--primary)}.portfolio-overlay h3{font-size:22px;line-height:1;letter-spacing:-.04em;color:#fff}.portfolio-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0),rgba(255,255,255,.05),transparent 40%);opacity:0;z-index:1;pointer-events:none;transition:opacity .5s ease}.portfolio-card:hover:before{opacity:1}.portfolio-card:after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);transform:translate(-100%);transition:transform .6s ease;z-index:3}.portfolio-card:hover:after{transform:translate(100%)}.portfolio-card:hover{transform:translateY(-10px);border-color:#b8ef4359;box-shadow:0 20px 40px #00000073,0 0 30px #b8ef430f}.portfolio-card:hover .portfolio-image{transform:scale(1.08);filter:grayscale(0%) brightness(.95)}.portfolio-card:hover .portfolio-inner:after{opacity:1;transform:translate(38%) rotate(8deg)}.portfolio-card:hover .portfolio-overlay{background:linear-gradient(to top,#000000fa,#0000006b 68%,#0000)}.portfolio-card:hover .portfolio-overlay:before{opacity:1}.portfolio-arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:none;border-radius:50%;background:#0f100fd1;border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);color:#fff;font-size:24px;cursor:pointer;z-index:20;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;box-shadow:0 14px 42px #0000006b}.portfolio-arrow:hover{background:#b8ef432e;border-color:#b8ef4394;box-shadow:0 16px 44px #00000080,0 0 0 5px #b8ef4314;transform:translateY(-50%) scale(1.05)}.portfolio-arrow.prev{left:40px}.portfolio-arrow.next{right:40px}@media(max-width:1024px){.portfolio-slider{padding:0 6%}.portfolio-slider:before{inset:0 0 28px}}@media(max-width:900px){.portfolio-slider{padding:0 6%}.portfolio-slider:before{inset:0 0 28px}.portfolio-card{flex-basis:280px}.portfolio-overlay{padding:22px}.portfolio-overlay h3{font-size:18px}}@media(max-width:767px){.portfolio-slider{padding:0 24px}.portfolio-slider:before{inset:0 0 28px}}@media(max-width:600px){.portfolio-section{padding:var(--section-space-mobile-md) 0 var(--section-space-mobile-lg)}.portfolio-label{gap:12px}.portfolio-label:before,.portfolio-label:after{width:28px}.portfolio-card{flex-basis:min(74vw,248px)}.portfolio-arrow{width:46px;height:46px;font-size:20px}.portfolio-arrow.prev{left:10px}.portfolio-arrow.next{right:10px}.portfolio-slider:before{border-color:#ffffff0f}}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;width:100%}.portfolio-grid .portfolio-card{flex:unset;aspect-ratio:16/9}@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:30px}}@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr;gap:24px}}