
/* SHIPSAK V9.9.4 — reference portfolio */
.ref-hero{position:relative;overflow:hidden;padding:86px 0 64px;background:radial-gradient(circle at 85% 20%,rgba(178,255,61,.16),transparent 28%),linear-gradient(135deg,#071426,#0b1d34 62%,#102a46);color:#fff}
.ref-hero:after{content:"";position:absolute;inset:auto -8% -48% 36%;height:390px;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:rotate(-8deg)}
.ref-hero .container{position:relative;z-index:1}.ref-hero .eyebrow{color:var(--lime)}
.ref-hero h1{max-width:900px;margin:12px 0 18px;font-size:clamp(46px,7vw,88px);line-height:.96;letter-spacing:-.05em}
.ref-hero p{max-width:760px;color:rgba(255,255,255,.76);font-size:18px;line-height:1.7}.ref-statline{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.ref-stat{padding:12px 16px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.045);backdrop-filter:blur(8px);font-size:13px}.ref-stat b{color:var(--lime);font-size:18px;margin-right:7px}
.ref-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:end}.ref-intro-note{padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm)}
.ref-filterbar{position:sticky;top:72px;z-index:12;padding:14px 0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ref-filters{display:flex;gap:8px;flex-wrap:wrap}.ref-filter{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.2s ease}
.ref-filter:hover,.ref-filter.is-active{background:var(--text);color:var(--surface);border-color:var(--text)}.ref-filter span{opacity:.6;margin-left:5px}
.ref-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.ref-card{min-height:148px;border:1px solid var(--line);border-radius:20px;background:var(--surface);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;overflow:hidden}
.ref-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--lime) 65%,var(--line));box-shadow:0 18px 44px rgba(3,13,28,.12)}.ref-logo-wrap{width:100%;height:76px;display:flex;align-items:center;justify-content:center;padding:6px;background:#fff;border-radius:14px}.ref-card img{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.82);transition:filter .2s ease,transform .2s ease}.ref-card:hover img{filter:saturate(1);transform:scale(1.025)}
.ref-card strong{margin-top:11px;font-size:12px;text-align:center;line-height:1.35;color:var(--text)}.ref-card small{margin-top:3px;font-size:10px;color:var(--muted);text-align:center}.ref-card[hidden]{display:none!important}
.ref-empty{display:none;padding:40px;text-align:center;border:1px dashed var(--line);border-radius:22px;color:var(--muted)}.ref-empty.is-visible{display:block}
.home-ref-section{overflow:hidden}.home-ref-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.home-ref-head p{max-width:620px;color:var(--muted)}
.home-ref-marquee{position:relative;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}.home-ref-track{display:flex;gap:14px;width:max-content;animation:refMarquee 38s linear infinite}.home-ref-marquee:hover .home-ref-track{animation-play-state:paused}.home-ref-logo{width:190px;height:106px;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:15px;display:flex;align-items:center;justify-content:center}.home-ref-logo span{width:100%;height:100%;background:#fff;border-radius:12px;padding:5px;display:flex;align-items:center;justify-content:center}.home-ref-logo img{width:100%;height:100%;object-fit:contain;filter:grayscale(.2) saturate(.85);opacity:.92}
@keyframes refMarquee{to{transform:translateX(calc(-50% - 7px))}}
@media(max-width:1100px){.ref-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.ref-hero{padding:62px 0 46px}.ref-intro{grid-template-columns:1fr}.ref-filterbar{top:64px}.ref-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-ref-head{align-items:flex-start;flex-direction:column}.home-ref-logo{width:165px;height:96px}}
@media(max-width:560px){.ref-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ref-card{min-height:130px;padding:12px}.ref-logo-wrap{height:66px}.ref-filterbar{position:relative;top:auto}.ref-filters{flex-wrap:nowrap;overflow:auto;padding-bottom:4px}.ref-filter{white-space:nowrap}.home-ref-logo{width:145px;height:88px}}
@media(prefers-reduced-motion:reduce){.home-ref-track{animation:none;flex-wrap:wrap;width:auto}.home-ref-marquee{mask-image:none;-webkit-mask-image:none}}

/* V9.9.4.2: skip link is invisible during normal pointer use; shown only to keyboard users. */
.skip-link{position:fixed!important;left:16px!important;top:16px!important;z-index:99999!important;transform:translateY(-220%)!important;opacity:0!important;pointer-events:none!important;background:var(--lime,#c7f51b)!important;color:#071426!important;padding:10px 14px!important;border-radius:10px!important;font-weight:900!important;text-decoration:none!important}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important}
