.hs-portfolio{padding:40px 0}
.hs-portfolio h3{margin:0 0 16px 0;text-align:center;font-size:clamp(22px,3.2vw,34px)}
.hs-wrap{max-width:1140px;margin:0 auto;padding:0 10px}
.hs-carousel{position:relative;overflow:hidden}
.hs-track{--gap:10px;display:grid;grid-auto-flow:column;grid-auto-columns:calc(100%/4 - var(--gap));gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;width:100%;box-sizing:border-box}
.hs-track::-webkit-scrollbar{display:none}
.hs-carousel .card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;height:100%;box-shadow:0 6px 18px rgba(17,24,39,.04);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;scroll-snap-align:start}
.hs-carousel .card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(17,24,39,.12);border-color:#d1d5db}
.hs-carousel .card:focus-within{outline:2px solid var(--brand-turq);outline-offset:2px}
.hs-carousel .card a.card-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.hs-carousel .card-media{position:relative;background:#f3f4f6;overflow:hidden}
.hs-carousel .card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.hs-carousel .card:hover .card-media::after{opacity:1}
.hs-carousel .card-img{width:100%;height:auto;display:block;transform:scale(1);transition:transform .6s cubic-bezier(.2,.65,.18,.98)}
.hs-carousel .card:hover .card-img{transform:scale(1.03)}
.hs-carousel .card-media--placeholder{width:100%;height:100%;background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}
.hs-carousel .card-badges{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;z-index:2}
.hs-carousel .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:700;backdrop-filter:saturate(140%) blur(8px);border:1px solid rgba(0,0,0,.5)}
.hs-carousel .badge--neutral{color:#fff;background:rgba(0,0,0,.55)}
.hs-carousel .badge--price{color:#0B1429;background:rgba(57,199,206,.9)}
.hs-carousel .price-ribbon{position:absolute;top:12px;right:-36px;width:140px;height:30px;background:var(--brand-pink);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;transform:rotate(45deg);border-radius:5px;box-shadow:0 12px 24px rgba(213,0,105,.25);z-index:4;pointer-events:none;letter-spacing:.15px;font-size:.9rem}
.hs-carousel .price-ribbon span{white-space:nowrap;line-height:1}
.hs-carousel .card-body{padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px}
.hs-carousel .card-body h2{font-size:.95rem;margin:0}
.hs-carousel .card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-carousel .card-excerpt{color:#4b5563;font-size:.92rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hs-carousel .card-footer{margin-top:auto;padding-top:4px}
.hs-carousel .card-cta{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--brand-blue);font-size:.92rem}
.hs-carousel .card:hover .card-cta{color:var(--brand-pink)}
.hs-carousel .card-cta::after{content:"→";transition:transform .18s ease}
.hs-carousel .card:hover .card-cta::after{transform:translateX(4px)}
.hs-nav{position:absolute;inset:0;pointer-events:none}
.hs-nav .btn-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#111;box-shadow:0 6px 16px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}
.hs-nav .btn-nav[disabled]{opacity:.4;cursor:default}
.hs-nav .btn-prev{left:2px}
.hs-nav .btn-next{right:2px}
@media (max-width:1024px){.hs-track{grid-auto-columns:calc(100%/3 - var(--gap))}}
@media (max-width:768px){.hs-nav .btn-prev{left:2px}.hs-nav .btn-next{right:2px}}
@media (max-width:640px){.hs-track{grid-auto-columns:100%}}
@media (max-width:480px){.hs-carousel .price-ribbon{top:10px;right:-30px;width:120px;height:26px;font-size:.84rem}}
@media (prefers-reduced-motion:reduce){.hs-carousel .card{transition:none}.hs-carousel .card-img{transition:none}}