.zuplix-portfolio-section{padding:86px 0 94px;background:radial-gradient(circle at 50% -10%,#0b1e42 0,#06132c 35%,#020a18 82%);color:#fff;overflow:hidden}
.portfolio-container{max-width:1420px}
.portfolio-section-head{text-align:center;max-width:900px;margin:0 auto 32px}
.portfolio-section-head .eyebrow{color:#2d8cff;letter-spacing:.22em;font-weight:800}
.portfolio-section-head h2{font-size:clamp(2.6rem,5vw,4.7rem);line-height:1.02;letter-spacing:-.055em;margin:13px 0 16px;color:#fff}
.portfolio-section-head h2 em{font-style:normal;color:#1d72ff}
.portfolio-section-head p{max-width:760px;margin:0 auto;color:#9fb0cb;font-size:1.03rem;line-height:1.7}
.portfolio-real-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 22px}
.portfolio-real-card{min-width:0}
.portfolio-browser{border-radius:14px 14px 10px 10px;overflow:hidden;background:#09172a;border:1px solid rgba(151,177,220,.32);box-shadow:0 16px 30px rgba(0,0,0,.24)}
.portfolio-dots{height:22px;background:#071426;display:flex;align-items:center;gap:5px;padding:0 10px}.portfolio-dots i{width:5px;height:5px;border-radius:50%;background:#ffb629}.portfolio-dots i:nth-child(1){background:#ff5353}.portfolio-dots i:nth-child(2){background:#ffbf3c}.portfolio-dots i:nth-child(3){background:#42d36b}
.portfolio-viewport{height:138px;position:relative;overflow:hidden;background:#fff}.portfolio-viewport img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;display:block;transition:transform 8s cubic-bezier(.22,.61,.36,1);will-change:transform}.portfolio-real-card:hover .portfolio-viewport img{transform:translateY(calc(-100% + 138px))}
.portfolio-hover{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;padding:7px 18px;border-radius:4px;background:#176dff;color:#fff;font-size:.73rem;font-weight:900;letter-spacing:.02em;box-shadow:0 8px 18px rgba(23,109,255,.35);z-index:2}.portfolio-hover b{font-size:.9rem;margin-left:6px}
.portfolio-card-caption{padding:11px 12px 12px;background:linear-gradient(180deg,#0c1a2e,#081423);border:1px solid rgba(151,177,220,.25);border-top:0;border-radius:0 0 12px 12px}.portfolio-card-caption strong{display:block;font-size:.86rem;color:#fff;margin-bottom:3px}.portfolio-card-caption span{display:block;font-size:.72rem;color:#8fa2c1}
@media(max-width:1280px){.portfolio-real-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.portfolio-real-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.zuplix-portfolio-section{padding:58px 0 64px}.portfolio-section-head{text-align:left}.portfolio-section-head h2{font-size:2.35rem}.portfolio-real-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.portfolio-viewport{height:122px}.portfolio-real-card:hover .portfolio-viewport img{transform:none}.portfolio-hover{font-size:.64rem;padding:6px 10px}}
@media(max-width:480px){.portfolio-real-grid{grid-template-columns:1fr}.portfolio-viewport{height:188px}.portfolio-card-caption strong{font-size:.95rem}.portfolio-card-caption span{font-size:.78rem}}
@media(hover:none){.portfolio-viewport img{transition:none}.portfolio-hover{display:none}}