:root{--hu-blue:#64D0C2;--hu-navy:#22324A;--hu-coral:#F2A7A0;--hu-ink:#121212;--hu-paper:#F4F2ED;--hu-pale:#E8F9F7}
.web-showcase{background:var(--hu-paper);padding:clamp(76px,9vw,132px) 0;overflow:hidden;border-top:1px solid rgba(18,18,18,.08);border-bottom:1px solid rgba(18,18,18,.08)}
.web-showcase__head{max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.7fr);gap:42px;align-items:end}
.web-showcase__head .editorial-label{margin-bottom:18px}
.web-showcase__head h2{margin:0;font-size:clamp(2.7rem,6.5vw,6.7rem);line-height:.92;letter-spacing:-.065em;color:var(--hu-ink);font-weight:700}
.web-showcase__intro{max-width:560px;margin:0 0 4px auto;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.75;color:#4d5155}
.web-showcase__toolbar{max-width:1320px;margin:34px auto 18px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:18px}
.web-showcase__count{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#5e666c}
.web-showcase__all{display:inline-flex;align-items:center;gap:8px;color:var(--hu-navy);text-decoration:none;border-bottom:1px solid var(--hu-navy);padding-bottom:3px;font-size:.86rem;font-weight:650}
.web-showcase__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(310px,27vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(clamp(20px,5vw,72px),calc((100vw - 1320px)/2 + 24px)) 28px;scrollbar-width:none;overscroll-behavior-x:contain}
.web-showcase__track::-webkit-scrollbar{display:none}
.web-card{scroll-snap-align:start;background:#fff;border:1px solid rgba(18,18,18,.1);border-radius:20px;overflow:hidden;box-shadow:0 16px 44px rgba(18,18,18,.07);display:flex;flex-direction:column;min-height:490px;transition:transform .25s ease,box-shadow .25s ease}
.web-card:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(18,18,18,.11)}
.web-card__preview{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--preview-bg,#eee);color:var(--preview-ink,#111)}
.web-card__preview:before{content:"";position:absolute;inset:0;background:var(--preview-art,none)}
.web-card__chrome{position:absolute;left:14px;right:14px;top:14px;height:24px;border-radius:12px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);display:flex;align-items:center;padding:0 9px;gap:5px;z-index:2}
.web-card__chrome i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55}
.web-card__mini{position:absolute;inset:52px 24px 22px;z-index:2;display:flex;flex-direction:column;justify-content:space-between}
.web-card__brand{font-size:.66rem;font-weight:800;letter-spacing:.16em}
.web-card__mini h3{margin:0;white-space:pre-line;font-size:clamp(1.75rem,3vw,3rem);line-height:.88;letter-spacing:-.06em;max-width:88%}
.web-card__mini .mini-line{height:1px;background:currentColor;opacity:.35}
.web-card__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.web-card__meta{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#74797c;margin-bottom:8px}
.web-card__body h3{font-size:1.38rem;letter-spacing:-.025em;margin:0 0 8px;color:var(--hu-ink)}
.web-card__body p{font-size:.92rem;line-height:1.6;color:#62676b;margin:0 0 20px}
.web-card__button{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--hu-ink);background:var(--hu-blue);border:1px solid var(--hu-blue);border-radius:999px;padding:12px 16px;font-size:.83rem;font-weight:700;transition:transform .2s ease,background .2s ease}
.web-card__button:hover{background:#7ad9ce;transform:translateY(-1px);color:var(--hu-ink)}
.web-showcase__hint{max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,72px);font-size:.75rem;color:#777f84;display:flex;gap:8px;align-items:center}
.web-showcase__hint:before{content:"↔";color:var(--hu-navy)}
.preview-editorial{--preview-bg:#efeae2;--preview-ink:#17130f;--preview-art:linear-gradient(90deg,transparent 64%,rgba(138,28,45,.88) 64%)}
.preview-brutal{--preview-bg:#e7e5dc;--preview-ink:#111;--preview-art:linear-gradient(90deg,transparent 49%,#111 49%,#111 50%,transparent 50%),linear-gradient(0deg,transparent 68%,#ea4f2f 68%)}
.preview-lune{--preview-bg:#f7f3ed;--preview-ink:#28231e;--preview-art:radial-gradient(circle at 74% 60%,rgba(159,141,117,.45) 0 18%,transparent 19%),radial-gradient(circle at 80% 51%,rgba(255,255,255,.9) 0 10%,transparent 11%)}
.preview-nocte{--preview-bg:#0b0b0d;--preview-ink:#f4efe8;--preview-art:radial-gradient(circle at 76% 52%,rgba(182,139,90,.45),transparent 31%)}
.preview-orbit{--preview-bg:#07111a;--preview-ink:#f5fbff;--preview-art:radial-gradient(circle at 78% 55%,rgba(123,255,223,.4),transparent 28%),linear-gradient(135deg,transparent 55%,rgba(255,255,255,.08) 55%)}
.preview-fold{--preview-bg:#f4d64e;--preview-ink:#1e1a17;--preview-art:radial-gradient(circle at 77% 60%,#ff5e3a 0 20%,transparent 21%),linear-gradient(135deg,transparent 64%,rgba(30,26,23,.14) 64%)}
.preview-vera{--preview-bg:#f0e9de;--preview-ink:#2b3328;--preview-art:radial-gradient(ellipse at 80% 55%,rgba(111,132,104,.7) 0 23%,transparent 24%)}
.preview-rive{--preview-bg:#f6f5f1;--preview-ink:#1b1d1f;--preview-art:linear-gradient(90deg,transparent 67%,#324a5e 67%),linear-gradient(0deg,transparent 76%,rgba(27,29,31,.09) 76%)}
.preview-sonder{--preview-bg:#171717;--preview-ink:#f5f3ee;--preview-art:linear-gradient(16deg,transparent 60%,#c7ff3c 60%,#c7ff3c 72%,transparent 72%)}
.preview-aero{--preview-bg:#e8ebed;--preview-ink:#101418;--preview-art:linear-gradient(135deg,transparent 56%,#d7ff00 56%,#d7ff00 70%,transparent 70%),linear-gradient(90deg,transparent 75%,#101418 75%)}
@media(max-width:900px){
  .web-showcase__head{grid-template-columns:1fr;gap:22px}
  .web-showcase__intro{margin:0}
  .web-showcase__track{grid-auto-columns:minmax(280px,82vw)}
  .web-showcase__toolbar{margin-top:24px}
  .web-card{min-height:470px}
}
@media(prefers-reduced-motion:reduce){.web-card,.web-card__button{transition:none}}