.vsw-showcase{
    --vsw-bg-base:#1f1f1f;
    --vsw-bg-deep:#141413;
    --vsw-surface:#2a2926;
    --vsw-card-shadow:0 30px 70px -20px rgba(0,0,0,.75);
    --vsw-card-shadow-active:0 45px 100px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
    --vsw-gold:#c9a876;
    --vsw-gold-soft:rgba(201,168,118,.45);
    --vsw-gold-glow:rgba(201,168,118,.28);
    --vsw-blue:#5b8dff;
    --vsw-blue-glow:rgba(91,141,255,.45);
    --vsw-text:#f4f2ec;
    --vsw-text-dim:#9c9a93;
    --vsw-text-faint:#6c6a64;
    --vsw-radius:22px;
    --vsw-ease:cubic-bezier(.22,.61,.36,1);
    --vsw-dur:520ms;
    --vsw-gap:210px;
    --vsw-scale-active:1.26;
    --vsw-scale-side:0.86;
    --vsw-card-w:560px;
    --vsw-card-h:340px;

    position:relative;
    padding:0px 70px 0px;
    overflow:hidden;
    isolation:isolate;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
    color:var(--vsw-text);
    -webkit-font-smoothing:antialiased;
    box-sizing:border-box;
}
.vsw-showcase *{box-sizing:border-box;}

.vsw-showcase-head{
    position:relative;
    z-index:2;
    max-width:1500px;
    margin:0 auto 64px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}

.vsw-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--vsw-gold);
    margin:0;
}
.vsw-eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:var(--vsw-gold);
    opacity:.7;
}

.vsw-title{
    margin:14px 0 0;
    font-size:clamp(30px,4vw,46px);
    font-weight:600;
    letter-spacing:-.02em;
    line-height:1.05;
    color:var(--vsw-text);
}

.vsw-sub{
    max-width:360px;
    font-size:14px;
    line-height:1.6;
    color:var(--vsw-text-dim);
    text-align:right;
    margin:0;
}

.vsw-stage-wrap{
    position:relative;
    z-index:2;
    max-width:1600px;
    margin:0 auto;
}

.vsw-stage{
    position:relative;
    height:460px;
    perspective:1800px;
    overflow:hidden;
    touch-action:pan-y;
    cursor:grab;
}
.vsw-stage.is-dragging{cursor:grabbing;}
.vsw-stage:focus-visible{
    outline:2px solid var(--vsw-gold);
    outline-offset:8px;
    border-radius:28px;
}

.vsw-track{
    position:absolute;
    inset:0;
}

.vsw-card{
    position:absolute;
    top:50%;
    left:50%;
    width:var(--vsw-card-w);
    height:var(--vsw-card-h);
    border-radius:var(--vsw-radius);
    overflow:hidden;
    background:var(--vsw-surface);
    box-shadow:var(--vsw-card-shadow);
    transform-style:preserve-3d;
    will-change:transform,opacity,filter;
    transition:
      transform var(--vsw-dur) var(--vsw-ease),
      opacity var(--vsw-dur) var(--vsw-ease),
      filter var(--vsw-dur) var(--vsw-ease),
      box-shadow var(--vsw-dur) var(--vsw-ease);
    backface-visibility:hidden;
    margin:0;
    list-style:none;
}

.vsw-card video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#111;
    max-width:none;
}

.vsw-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65) 100%);
    opacity:0;
    transition:opacity var(--vsw-dur) var(--vsw-ease);
}
.vsw-card.is-active::after{opacity:1;}

.vsw-card[data-diff="0"]{
    transform:translate(-50%,-50%) translateZ(0) scale(var(--vsw-scale-active));
    z-index:5;
    box-shadow:var(--vsw-card-shadow-active);
    filter:none;
}
.vsw-card[data-diff="-1"]{
    transform:translate(calc(-50% - var(--vsw-gap)),-50%) rotateY(6deg) scale(var(--vsw-scale-side));
    z-index:3;
    opacity:.65;
    filter:blur(2.5px);
}
.vsw-card[data-diff="1"]{
    transform:translate(calc(-50% + var(--vsw-gap)),-50%) rotateY(-6deg) scale(var(--vsw-scale-side));
    z-index:3;
    opacity:.65;
    filter:blur(2.5px);
}
.vsw-card[data-diff="-2"]{
    transform:translate(calc(-50% - var(--vsw-gap) * 1.85),-50%) rotateY(8deg) scale(.68);
    z-index:1;
    opacity:0;
    filter:blur(4px);
    pointer-events:none;
}
.vsw-card[data-diff="2"]{
    transform:translate(calc(-50% + var(--vsw-gap) * 1.85),-50%) rotateY(-8deg) scale(.68);
    z-index:1;
    opacity:0;
    filter:blur(4px);
    pointer-events:none;
}
.vsw-card[data-hidden="true"]{
    opacity:0 !important;
    pointer-events:none;
}

.vsw-card:focus-visible{
    outline:2px solid var(--vsw-gold);
    outline-offset:4px;
}

.vsw-play-badge{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 220ms var(--vsw-ease);
    pointer-events:none;
}
.vsw-card:not(.is-active) .vsw-play-badge{opacity:.85;}
.vsw-play-badge svg{width:34px;height:34px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));}

.vsw-info{
    position:relative;
    z-index:2;
    max-width:640px;
    margin:44px auto 0;
    text-align:center;
}
.vsw-info-cat{
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--vsw-gold);
    opacity:0;
    transform:translateY(8px);
    transition:opacity 460ms var(--vsw-ease) 60ms, transform 460ms var(--vsw-ease) 60ms;
    margin:0;
}
.vsw-info-title{
    margin:12px 0 8px;
    font-size:clamp(22px,3vw,32px);
    font-weight:600;
    letter-spacing:-.01em;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 460ms var(--vsw-ease) 120ms, transform 460ms var(--vsw-ease) 120ms;
    color:var(--vsw-text);
}
.vsw-info-code{
    font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
    font-size:12px;
    letter-spacing:.14em;
    color:var(--vsw-text-faint);
    opacity:0;
    transition:opacity 460ms var(--vsw-ease) 180ms;
    margin:0;
}
.vsw-info.is-in .vsw-info-cat,
.vsw-info.is-in .vsw-info-title,
.vsw-info.is-in .vsw-info-code{
    opacity:1;
    transform:translateY(0);
}

.vsw-nav-btn{
    position:absolute;
    top:50%;
    translate:0 -50%;
    width:52px;
    height:52px;
    border-radius:50%;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14);
    color:var(--vsw-text);
    cursor:pointer;
    transition:border-color 260ms var(--vsw-ease), box-shadow 260ms var(--vsw-ease), background 260ms var(--vsw-ease), transform 160ms var(--vsw-ease);
    padding:0;
}
.vsw-nav-btn:hover{
    border-color:var(--vsw-gold-soft);
    box-shadow:0 0 0 6px var(--vsw-gold-glow), 0 8px 24px rgba(0,0,0,.4);
    background:rgba(255,255,255,.09);
}
.vsw-nav-btn:active{
    border-color:var(--vsw-blue);
    box-shadow:0 0 0 6px var(--vsw-blue-glow);
    transform:translateY(-50%) scale(.94);
}
.vsw-nav-btn:focus-visible{
    outline:2px solid var(--vsw-gold);
    outline-offset:3px;
}
.vsw-nav-btn.vsw-prev{left:2%;}
.vsw-nav-btn.vsw-next{right:2%;}
.vsw-nav-btn svg{width:18px;height:18px;}

.vsw-controls-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:46px;
    position:relative;
    z-index:2;
}

.vsw-play-toggle{
    flex:0 0 auto;
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    color:var(--vsw-text);
    cursor:pointer;
    padding:0;
    transition:border-color 220ms var(--vsw-ease), box-shadow 220ms var(--vsw-ease), background 220ms var(--vsw-ease);
}
.vsw-play-toggle:hover{
    border-color:var(--vsw-gold-soft);
    box-shadow:0 0 0 5px var(--vsw-gold-glow);
    background:rgba(255,255,255,.09);
}
.vsw-play-toggle:focus-visible{
    outline:2px solid var(--vsw-gold);
    outline-offset:3px;
}
.vsw-play-toggle svg{width:14px;height:14px;}
.vsw-play-toggle .vsw-icon-play{display:none;}
.vsw-play-toggle[aria-pressed="true"] .vsw-icon-play{display:block;}
.vsw-play-toggle[aria-pressed="true"] .vsw-icon-pause{display:none;}

.vsw-progress-rail{
    position:relative;
    z-index:2;
    max-width:250px;
    height:2px;
    border-radius:2px;
    background:rgba(255,255,255,.1);
    overflow:hidden;
    flex:1 1 auto;
}
.vsw-progress-fill{
    position:absolute;
    inset:0 100% 0 0;
    background:linear-gradient(90deg, var(--vsw-gold), #e7cf9e);
    border-radius:2px;
    transform-origin:left center;
}

.vsw-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    position:relative;
    z-index:2;
    padding:0;
    list-style:none;
}
.vsw-dot{
    width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,.22);
    border:none;
    padding:0;
    cursor:pointer;
    transition:background 260ms var(--vsw-ease), transform 260ms var(--vsw-ease), width 260ms var(--vsw-ease);
}
.vsw-dot.is-active{
    background:var(--vsw-gold);
    width:18px;
    border-radius:3px;
}
.vsw-dot:focus-visible{outline:2px solid var(--vsw-gold); outline-offset:3px;}

.vsw-sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:1024px){
    .vsw-showcase{
      --vsw-gap:50px;
      --vsw-card-w:440px;
      --vsw-card-h:280px;
      --vsw-scale-active:1.18;
    }
    .vsw-stage{height:380px;}
    .vsw-showcase-head{flex-direction:column;align-items:flex-start;}
    .vsw-sub{text-align:left;}
    .vsw-card[data-diff="-2"],.vsw-card[data-diff="2"]{opacity:0;}
}

@media (max-width:680px){
    .vsw-showcase{
      --vsw-card-w:300px;
      --vsw-card-h:210px;
      --vsw-gap:0px;
      --vsw-scale-active:1;
      --vsw-scale-side:.8;
      padding:80px 16px 60px;
    }
    .vsw-stage{height:280px;}
    .vsw-nav-btn{width:42px;height:42px;}
    .vsw-nav-btn.vsw-prev{left:6px;}
    .vsw-nav-btn.vsw-next{right:6px;}
    .vsw-card[data-diff="-1"],.vsw-card[data-diff="1"],
    .vsw-card[data-diff="-2"],.vsw-card[data-diff="2"]{
      opacity:0 !important;
      pointer-events:none;
    }
}

@media (prefers-reduced-motion:reduce){
    .vsw-card,.vsw-info-cat,.vsw-info-title,.vsw-info-code,.vsw-progress-fill,.vsw-dot,.vsw-nav-btn{
      transition:none !important;
    }
}
.vsw-progress-thumb{
    position:absolute;
    top:50%;
    left:0%;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--vsw-gold);
    box-shadow:0 0 0 3px rgba(201,168,118,.25), 0 2px 6px rgba(0,0,0,.5);
    transform:translate(-50%,-50%);
    pointer-events:none;
}