/* ============================================================
   EPIK Studios V2-B: Website Design live-site showcases
   Loaded only by services/website-design.html (Device Theater),
   website-design-2.html (Gallery Wall) and website-design-3.html
   (Scroll Film), after v2b.css. Generated markup: _qa/web_showcases.py
   Motion: transform/opacity only, loops pause off-screen, calm
   static versions under prefers-reduced-motion.
   ============================================================ */

/* ---------- shared ---------- */
.sc-sec{position:relative;padding:clamp(72px,8vw,112px) 0 clamp(84px,9vw,132px);overflow-x:clip}
.sc-work{padding-bottom:clamp(40px,5vw,72px)}
.sc-head{margin-bottom:clamp(26px,3.2vw,44px)}
.sc-dots{display:inline-flex;align-items:center;flex:none}
.sc-dots i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px rgba(14,14,14,.9),inset 0 0 0 1px rgba(255,255,255,.28)}
.sc-dots i + i{margin-left:-3px}
.sc-swatches{display:inline-flex;align-items:center;flex:none}
.sc-swatches i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #111114,inset 0 0 0 1px rgba(255,255,255,.22)}
.sc-swatches i + i{margin-left:-8px}
.sc-swatches--sm i{width:18px;height:18px;box-shadow:0 0 0 2px #17171a,inset 0 0 0 1px rgba(255,255,255,.22)}
.sc-swatches--sm i + i{margin-left:-5px}
.sc-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:7px 14px;border-radius:999px;background:rgba(22,22,26,.72);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);font:500 .875rem/1.15 var(--font-body);color:#f2f2f4;white-space:nowrap}
.sc-chip .icon{width:14px;height:14px;color:var(--accent-soft)}
.sc-pulse{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-soft)}
.sc-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--accent-soft);opacity:0;animation:scPulse 2.4s cubic-bezier(.16,1,.3,1) infinite;animation-play-state:paused}
.is-live .sc-pulse::after{animation-play-state:running}
@keyframes scPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.sc-arrow{flex:none;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#f5f5f6;transition:background .3s ease,border-color .3s ease,transform .35s var(--vb-out)}
.sc-arrow .icon{width:18px;height:18px}
.sc-arrow:active{transform:scale(.94)}
@media (hover:hover){ .sc-arrow:hover{background:var(--accent);border-color:var(--accent)} }
.vb-preview{margin-bottom:clamp(26px,3vw,40px)}

/* =========================================================
   Showcase 1: Device Theater
   ========================================================= */
.sct{position:relative;isolation:isolate}
.sct-aurora{position:absolute;inset:-14% 0 -10%;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.sct-au{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.16,1,.3,1)}
.sct-au.is-on{opacity:1}
.sct-au i{position:absolute;display:block;border-radius:50%;will-change:transform;animation:sctBlobA 24s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused}
.sct-au i:nth-child(1){left:40%;top:0;width:min(980px,70vw);aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--g1) 54%,transparent),transparent 72%)}
.sct-au i:nth-child(2){left:62%;top:34%;width:min(720px,52vw);aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--g2) 40%,transparent),transparent 72%);animation-name:sctBlobB;animation-duration:30s}
.sct-au i:nth-child(3){left:-8%;top:28%;width:min(760px,56vw);aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--g1) 22%,transparent),transparent 72%);animation-name:sctBlobC;animation-duration:36s}
.sct.is-live .sct-au i{animation-play-state:running}
@keyframes sctBlobA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-8%,6%,0) scale(1.12)}}
@keyframes sctBlobB{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-14%,-10%,0) scale(.92)}}
@keyframes sctBlobC{0%{transform:translate3d(0,0,0) scale(.95)}100%{transform:translate3d(10%,-6%,0) scale(1.1)}}

.sct-grid{display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr);grid-template-rows:auto auto;column-gap:clamp(20px,2.4vw,40px);align-items:center}
.sct-info{grid-column:1;grid-row:1;align-self:end;position:relative;z-index:2}
.sct-act{grid-column:1;grid-row:2;align-self:start;position:relative;z-index:2}
.sct-stage{grid-column:2;grid-row:1 / span 2;position:relative;height:clamp(440px,41vw,600px);margin-right:calc(-1 * (max(0px,(100vw - var(--container,1240px)) / 2) + 32px));perspective:2100px;perspective-origin:40% 34%;container-type:inline-size;touch-action:pan-y;user-select:none;-webkit-user-select:none}

.sct-kick{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.sct-kick .vb-tc:first-child{color:var(--accent-soft)}
.sct-count{color:var(--vb-faint)}
.sct-name{margin:0;font-size:clamp(2.35rem,1.05rem + 2.75vw,4.15rem);line-height:1;letter-spacing:-.035em;overflow:hidden;padding-bottom:.06em}
.sct-name__in{display:block;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}
.sct-name__in.is-out{transform:translate3d(0,-36%,0);opacity:0;transition-duration:.32s,.26s}
.sct-name__in.is-pre{transform:translate3d(0,46%,0);opacity:0;transition:none}
.sct-host{display:inline-flex;align-items:center;gap:12px;margin:18px 0 0;font:500 clamp(1rem,.95rem + .2vw,1.12rem)/1.2 var(--font-body);color:var(--vb-dim)}
.sct-pal{display:flex;align-items:center;gap:16px;margin-top:30px}
.sct-pal__hex{font:500 .84rem/1.4 var(--font-body);letter-spacing:.06em;color:var(--vb-faint);font-variant-numeric:tabular-nums}
.sct-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sct-actions .btn .icon{width:15px;height:15px}
.sct-fade{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.sct-fade.is-swap{opacity:0;transition-duration:.2s}

/* stage + devices (sized in container units of the stage) */
.sct-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-15deg);will-change:transform}
.sct-dev{position:absolute;transform-style:preserve-3d}
.sct-float{transform-style:preserve-3d;animation:sctFloat 7s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused}
.sct.is-live .sct-float{animation-play-state:running}
.sct-tablet .sct-float{animation-duration:8.4s;animation-delay:-3s}
.sct-phone .sct-float{animation-duration:6.2s;animation-delay:-1.4s}
@keyframes sctFloat{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-1.6cqw,0)}}
.sct-screen{position:relative;overflow:hidden;background:#0b0b0d;isolation:isolate}
.sct-screen img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.sct-screen--tab img, .sct-screen--ph img{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1)}
.sct-screen--tab img.is-on, .sct-screen--ph img.is-on{opacity:1}
.sct-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 34%)}

.sct-laptop{left:3cqw;top:13%;width:69cqw;transform:translateZ(0)}
.sct-laptop__lid{position:relative;padding:1.25cqw 1.25cqw 2.1cqw;border-radius:2.1cqw 2.1cqw .7cqw .7cqw;background:linear-gradient(180deg,#232327,#121215 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.24),0 70px 110px -50px rgba(0,0,0,.95)}
.sct-laptop__lid::before{content:"";position:absolute;top:.45cqw;left:50%;width:.55cqw;height:.55cqw;border-radius:50%;background:#2b2b31;transform:translateX(-50%)}
.sct-screen--lap{aspect-ratio:16/10;border-radius:.55cqw}
.sct-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none}
.sct-gl.is-on{opacity:1}
.sct-lapimg{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.sct-lapimg.is-dim{opacity:0}
.sct-laptop__base{position:relative;height:1.7cqw;margin:0 -6.6cqw;border-radius:.3cqw .3cqw 2.6cqw 2.6cqw;background:linear-gradient(180deg,#5b5c63 0%,#33343a 30%,#1d1d21 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 26px 40px -16px rgba(0,0,0,.95)}
.sct-laptop__base::before{content:"";position:absolute;left:50%;top:0;width:13cqw;height:.6cqw;transform:translateX(-50%);border-radius:0 0 .9cqw .9cqw;background:rgba(0,0,0,.42)}

.sct-tablet{right:4cqw;top:-1%;width:39cqw;transform:translateZ(-220px) rotateY(-6deg)}
.sct-tablet__shell{padding:1cqw;border-radius:2.1cqw;background:linear-gradient(150deg,#2d2e33,#141417 55%,#222327);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.2),0 50px 90px -40px rgba(0,0,0,.9)}
.sct-screen--tab{aspect-ratio:4/3;border-radius:1.15cqw}
.sct-tablet .sct-screen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(10,10,12,.18)}

.sct-phone{right:9cqw;bottom:0;width:17.5cqw;transform:translateZ(150px)}
.sct-phone__shell{position:relative;padding:.7cqw;border-radius:3.5cqw;background:linear-gradient(150deg,#45464c,#18181b 40%,#2c2d32 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.3),0 50px 80px -30px rgba(0,0,0,.95)}
.sct-screen--ph{aspect-ratio:390/844;border-radius:2.85cqw}
.sct-island{position:absolute;z-index:4;top:1.55cqw;left:50%;width:5.6cqw;height:1.55cqw;border-radius:99px;background:#050506;transform:translateX(-50%)}

.sct-floor{position:absolute;left:0;right:8%;bottom:-6%;height:20%;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(0)}

.sct-chips{list-style:none;margin:0;padding:0;position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.sct-chip{position:absolute;transform:translate3d(0,0,var(--z,170px));opacity:1;transition:opacity .5s cubic-bezier(.16,1,.3,1) calc(var(--k) * 70ms + 120ms),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--k) * 70ms + 120ms)}
.sct-chips.is-swap .sct-chip{opacity:0;transform:translate3d(0,14px,var(--z,170px));transition-duration:.22s;transition-delay:0s}
.sct-chips.is-pre .sct-chip{opacity:0;transform:translate3d(0,22px,var(--z,170px));transition:none}
.sct-chip--1{left:-1cqw;top:6%;--z:200px}
.sct-chip--2{left:-4cqw;top:60%;--z:150px}
.sct-chip--3{left:46cqw;top:0;--z:120px}
.sct-chip--4{left:8cqw;bottom:12%;--z:210px}
.sct-chip--5{left:36cqw;bottom:2%;--z:240px}

/* dock */
.sct-dockwrap{position:relative;z-index:3;display:flex;align-items:center;gap:8px;margin-top:clamp(22px,3vw,44px);padding:8px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 40px 70px -40px rgba(0,0,0,.95)}
@media (min-width:900px){ .sct-dockwrap{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)} }
.sct-dock{position:relative;flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.sct-dock::-webkit-scrollbar{display:none}
.sct-tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--vb-dim);font:600 .92rem/1 var(--font-body);letter-spacing:-.005em;cursor:pointer;scroll-snap-align:center;transition:background .35s ease,color .35s ease,border-color .35s ease}
.sct-tab[aria-selected="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.17);color:#fff}
@media (hover:hover){ .sct-tab[aria-selected="false"]:hover{background:rgba(255,255,255,.05);color:#fff} }
.sct-tab__bar{position:absolute;left:18px;right:18px;bottom:6px;height:2px;border-radius:2px;background:var(--accent-soft);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.sct-tab[aria-selected="true"] .sct-tab__bar{opacity:1}

/* Device Theater: laptop widths */
@media (max-width:1279px){
  .sct-grid{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr)}
  .sct-name{font-size:clamp(2.2rem,1rem + 2.6vw,3.4rem)}
}
/* Device Theater: tablets */
@media (max-width:1023px){
  .sct-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;min-height:0;row-gap:8px}
  .sct-info{grid-column:1 / -1;grid-row:1}
  .sct-stage{grid-column:1 / -1;grid-row:2;height:clamp(420px,62vw,560px);margin:8px 0 0}
  .sct-act{grid-column:1 / -1;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px}
  .sct-pal, .sct-actions{margin-top:0}
  .sct-name{min-height:0}
  .sct-stage{margin-right:0}
  .sct-chip--1{left:4cqw;top:4%;--z:120px}
  .sct-chip--2{left:2cqw;top:62%;--z:100px}
  .sct-chip--3{left:44cqw;top:-2%;--z:100px}
  .sct-laptop{left:6cqw;width:68cqw}
  .sct-tablet{right:2cqw;width:38cqw}
  .sct-phone{right:8cqw;width:18cqw}
}
/* Device Theater: phones: touch-first composition (phone in front, swipe the stage) */
@media (max-width:767px){
  .sct-stage{height:clamp(360px,108vw,460px);margin:14px -20px 0;perspective:1200px}
  .sct-scene{transform:rotateX(5deg) rotateY(-9deg)}
  .sct-tablet{display:none}
  .sct-laptop{left:7cqw;top:6%;width:76cqw}
  .sct-phone{right:6cqw;bottom:2%;width:33cqw;transform:translateZ(80px)}
  .sct-phone__shell{border-radius:6cqw;padding:1.1cqw}
  .sct-screen--ph{border-radius:5cqw}
  .sct-island{top:2.6cqw;width:9cqw;height:2.6cqw}
  .sct-chip--2, .sct-chip--4, .sct-chip--5{display:none}
  .sct-chip--1{left:8cqw;top:auto;bottom:21%;--z:40px}
  .sct-chip--3{left:8cqw;top:auto;bottom:7%;--z:50px}
  .sct-act{flex-direction:column;align-items:stretch;gap:18px}
  .sct-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .sct-actions .btn{justify-content:center;padding-left:12px;padding-right:12px}
  .sct-dockwrap{margin:22px -20px 0;border-radius:0;border-left:0;border-right:0;padding:8px 0}
  .sct-dockwrap .sc-arrow{display:none}
  .sct-dock{padding:0 16px;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;scroll-padding:0 16px}
  .sct-tab{height:46px;padding:0 16px;scroll-snap-align:start}
  .sct-pal{gap:12px}
}

/* =========================================================
   Showcase 2: Gallery Wall
   ========================================================= */
.scw-tools{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.scw-filters{display:flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.scw-filters button{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--vb-dim);font:600 .92rem/1 var(--font-body);cursor:pointer;transition:background .3s ease,color .3s ease}
.scw-filters button b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--vb-faint);transition:color .3s ease}
.scw-filters button[aria-pressed="true"]{background:var(--accent);color:#fff}
.scw-filters button[aria-pressed="true"] b{color:rgba(255,255,255,.78)}
@media (hover:hover){ .scw-filters button[aria-pressed="false"]:hover{background:rgba(255,255,255,.07);color:#fff} }
.scw-nav{display:flex;align-items:center;gap:10px}
.scw-hint{margin-right:6px;font:500 .9rem/1.2 var(--font-body);color:var(--vb-faint)}

.scw{position:relative;margin-top:6px;isolation:isolate}
.scw-glow{position:absolute;inset:-6% 0 -14%;z-index:-1;pointer-events:none}
.scw-glow i{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.16,1,.3,1);background:radial-gradient(34% 42% at 50% 46%,color-mix(in srgb,var(--g1,#bf00b2) 30%,transparent),transparent 70%),radial-gradient(26% 30% at 62% 62%,color-mix(in srgb,var(--g2,#e619d1) 22%,transparent),transparent 70%)}
.scw-glow i.is-on{opacity:1}
.scw-view{position:relative;height:var(--wall-h,680px);overflow:hidden;perspective:1000px;perspective-origin:50% 40%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.scw-view.is-drag{cursor:grabbing}
.scw-wall{position:absolute;left:50%;top:var(--wall-top,50%);width:0;height:0;transform-style:preserve-3d;transform:rotateX(4deg);transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.scw-wall.is-swap{opacity:0}
.scw-tile{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform,opacity}
.scw-card{position:relative;display:block;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);padding:0;border:0;background:none;color:#fff;text-align:left;cursor:inherit;transform-style:preserve-3d;
  transform:translate3d(0,0,var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .55s cubic-bezier(.16,1,.3,1)}
.scw-card.is-enter{animation:scwIn .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes scwIn{0%{opacity:0;transform:translate3d(0,40px,-120px)}100%{opacity:1;transform:none}}
.scw-card__in{position:absolute;inset:0;display:block;border-radius:12px;overflow:hidden;background:#141416;border:1px solid rgba(255,255,255,.13);box-shadow:0 50px 70px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.scw-card--m .scw-card__in{border-radius:26px;padding:6px;background:linear-gradient(150deg,#3c3d43,#151518 45%,#28292e);border-color:rgba(255,255,255,.18)}
.scw-bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:#1b1b1f;border-bottom:1px solid rgba(255,255,255,.06)}
.scw-bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.scw-bar span{margin-left:6px;font:500 10.5px/1 var(--font-body);color:#8b919b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scw-shot{position:relative;display:block;overflow:hidden;height:calc(100% - 24px)}
.scw-card--m .scw-shot{height:100%;border-radius:20px}
.scw-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;pointer-events:none;-webkit-user-drag:none}
.scw-island{position:absolute;top:13px;left:50%;width:30%;height:13px;border-radius:99px;background:#050506;transform:translateX(-50%);z-index:2}
.scw-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:34px 14px 12px;background:linear-gradient(180deg,rgba(8,8,10,0),rgba(8,8,10,.86));pointer-events:none}
.scw-card--m .scw-cap{left:6px;right:6px;bottom:6px;border-radius:0 0 20px 20px;padding:64px 12px 12px;flex-direction:column;align-items:flex-start;gap:4px;background:linear-gradient(180deg,rgba(8,8,10,0),rgba(8,8,10,.94) 58%)}
.scw-cap b{font:600 .95rem/1.15 var(--font-head);letter-spacing:-.01em}
.scw-cap span{font:500 .72rem/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#c9ccd2;white-space:nowrap}
.scw-dim{position:absolute;inset:0;z-index:3;border-radius:inherit;background:#08080a;opacity:var(--dim,0);pointer-events:none}
.scw-card:focus-visible{outline:none}
.scw-card:focus-visible .scw-card__in{outline:2px solid var(--accent-soft);outline-offset:4px}
@media (hover:hover){
  .scw-card:hover{--lift:46px}
  .scw-card:hover .scw-card__in{border-color:rgba(255,77,227,.5)}
}
.scw-dof{position:absolute;top:0;bottom:0;width:20%;z-index:2;pointer-events:none}
.scw-dof--l{left:0;background:linear-gradient(90deg,rgba(14,14,14,.9),rgba(14,14,14,0))}
.scw-dof--r{right:0;background:linear-gradient(270deg,rgba(14,14,14,.9),rgba(14,14,14,0))}
@media (min-width:1024px){
  .scw-dof{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  .scw-dof--l{-webkit-mask-image:linear-gradient(90deg,#000 10%,transparent);mask-image:linear-gradient(90deg,#000 10%,transparent)}
  .scw-dof--r{-webkit-mask-image:linear-gradient(270deg,#000 10%,transparent);mask-image:linear-gradient(270deg,#000 10%,transparent)}
}
.scw-focus{display:flex;align-items:center;justify-content:center;gap:12px 14px;flex-wrap:wrap;width:max-content;max-width:100%;margin:6px auto 0;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.scw-focus .vb-tc{color:var(--accent-soft)}
.scw-focus b{font:600 1.08rem/1.2 var(--font-head);letter-spacing:-.01em}
.scw-focus__meta{color:var(--vb-dim);font-size:.95rem}
.scw-focus .btn .icon{width:12px;height:12px}

/* no JS: a plain grid of the sites (JS hides it and builds the wall) */
.scw-fallback{list-style:none;margin:0;padding:0 32px;max-width:var(--container,1240px);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.scw-fallback a{display:block;color:inherit;text-decoration:none}
.scw-fallback img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
.scw-fallback b{display:block;margin-top:10px;font:600 1rem/1.2 var(--font-head)}
.scw-fallback span{display:block;margin-top:4px;color:var(--vb-faint);font-size:.88rem}
.scw.is-armed .scw-fallback{display:none}
.scw:not(.is-armed) .scw-view, .scw:not(.is-armed) .scw-dof{display:none}
.scw:not(.is-armed) ~ .container .scw-focus{display:none}

/* reduced motion: a calm, flat strip that scrolls natively */
.scw.is-flat .scw-view{height:auto;overflow-x:auto;overflow-y:hidden;perspective:none;cursor:auto;scroll-snap-type:x mandatory;padding:24px 32px 120px;margin-bottom:-90px;scrollbar-width:thin}
.scw.is-flat .scw-wall{position:static;width:auto;height:auto;transform:none;display:grid;grid-auto-flow:column;grid-template-rows:auto auto;gap:18px;width:max-content}
.scw.is-flat .scw-tile{position:static;transform:none!important;opacity:1!important}
.scw.is-flat .scw-tile--m{grid-row:span 2}
.scw.is-flat .scw-card{margin:0;scroll-snap-align:center}
.scw.is-flat .scw-dof{display:none}

@media (max-width:767px){
  .scw-tools{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .scw-filters{min-width:0;max-width:100%}
  .scw-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:999px;margin:0 -4px}
  .scw-filters::-webkit-scrollbar{display:none}
  .scw-filters button{flex:none;height:40px;padding:0 15px;font-size:.88rem}
  .scw-nav{justify-content:flex-end}
  .scw-hint{display:none}
  .scw-filters{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}
  .scw-cap{padding:26px 10px 9px}
  .scw-cap b{font-size:.82rem}
  .scw-cap span{font-size:.6rem}
  .scw-card--m .scw-cap{padding:30px 9px 10px}
  .scw-bar{height:20px}
  .scw-bar span{font-size:9.5px}
  .scw-focus{width:auto;border-radius:20px;justify-content:flex-start;padding:14px 16px}
  .scw-focus .btn{margin-left:auto}
  .scw.is-flat .scw-view{padding:18px 20px 110px}
}

/* =========================================================
   Showcase 3: Scroll Film
   ========================================================= */
.scf{position:relative}
.scf-scene{position:relative;overflow:hidden;isolation:isolate}
.scf-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.scf-tint{position:absolute;inset:0;background:radial-gradient(52% 58% at 72% 62%,color-mix(in srgb,var(--g1) 30%,transparent),transparent 72%),radial-gradient(40% 46% at 12% 18%,color-mix(in srgb,var(--g2) 20%,transparent),transparent 72%),#0e0e0e}
.scf-sweep{position:absolute;top:-30%;bottom:-30%;left:-10%;width:120%;opacity:0;background:linear-gradient(100deg,transparent 34%,var(--p1) 42%,var(--p2) 50%,var(--p3) 58%,transparent 66%);transform:translate3d(110%,0,0) skewX(-14deg);will-change:transform,opacity}
.scf-kick{display:flex;align-items:center;gap:16px;margin:0 0 12px}
.scf-kick .vb-tc:first-child{color:var(--accent-soft)}
.scf-idx{color:var(--vb-faint)}
.scf-name{margin:0;font-size:clamp(2.5rem,.6rem + 5.4vw,6.2rem);line-height:.98;letter-spacing:-.045em;font-weight:600}
.scf-letters{display:block}
.scf-w{display:inline-block;overflow:hidden;padding:0 .02em .17em 0;margin-bottom:-.17em;vertical-align:top}
.scf-l{display:inline-block;transform-origin:0 100%}
.scf-media{position:relative}
.scf-browser{position:relative;border-radius:12px;overflow:hidden;background:#0b0b0d;border:1px solid rgba(255,255,255,.15);box-shadow:0 70px 120px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);transform-origin:50% 60%}
.scf-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;background:#1b1b1f;border-bottom:1px solid rgba(255,255,255,.06)}
.scf-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.scf-bar span{display:inline-flex;align-items:center;gap:6px;margin:0 auto;padding:4px 14px;border-radius:999px;background:rgba(255,255,255,.06);font:500 .78rem/1 var(--font-body);color:#a6abb4;white-space:nowrap}
.scf-bar svg{width:11px;height:11px}
.scf-view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111114}
.scf-view img, .scf-pview img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;will-change:transform}
.scf-phone{position:absolute;right:-6%;bottom:-12%;width:23%;padding:.55%;border-radius:clamp(18px,2.4vw,34px);background:linear-gradient(150deg,#45464c,#18181b 40%,#2c2d32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 50px 80px -30px rgba(0,0,0,.95);will-change:transform}
.scf-pview{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:clamp(14px,2vw,28px);background:#111114}
.scf-island{position:absolute;top:5.4%;left:50%;width:28%;height:2.6%;border-radius:99px;background:#050506;transform:translateX(-50%)}
.scf-meta{position:relative}
.scf-host{display:inline-flex;align-items:center;gap:12px;margin:0;font:500 1.06rem/1.2 var(--font-body);color:var(--vb-dim)}
.scf-chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.scf-pal{display:flex;align-items:center;gap:14px;margin-top:22px}
.scf-hex{font:500 .8rem/1.4 var(--font-body);letter-spacing:.06em;color:var(--vb-faint);font-variant-numeric:tabular-nums}
.scf-meta .btn{margin-top:24px}
.scf-rail, .scf-mbar{display:none}

/* static version (no JS, or reduced motion): scenes stacked as a calm list */
.scf:not(.is-film) .scf-scene{padding:clamp(48px,6vw,80px) 0}
.scf:not(.is-film) .scf-in{max-width:var(--container,1240px);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"top top" "media meta";gap:28px 56px;align-items:end}
.scf:not(.is-film) .scf-top{grid-area:top}
.scf:not(.is-film) .scf-media{grid-area:media;margin-bottom:6%}
.scf:not(.is-film) .scf-meta{grid-area:meta;padding-bottom:6%}
.scf:not(.is-film) .scf-name{font-size:clamp(2.2rem,1rem + 3.4vw,4.4rem)}
.scf:not(.is-film) .scf-sweep{display:none}
.scf:not(.is-film) .scf-bg{-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.scf:not(.is-film) .scf-tint{background:radial-gradient(46% 50% at 30% 60%,color-mix(in srgb,var(--g1) 20%,transparent),transparent 72%)}

/* film mode (JS): pinned stage, one scene per site, scrubbed by scroll */
.scf.is-film{height:var(--film-h,800vh)}
.scf.is-film .scf-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scf.is-film .scf-scene{position:absolute;inset:0;visibility:hidden}
.scf.is-film .scf-scene.is-vis{visibility:visible}
.scf.is-film .scf-bg{opacity:0;will-change:opacity}
.scf.is-film .scf-in{position:absolute;inset:0;--side:max(32px,calc((100vw - var(--container,1240px)) / 2 + 32px));
  padding:clamp(92px,11vh,120px) var(--side) clamp(28px,5vh,56px) calc(var(--side) + 210px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" "media meta";gap:clamp(18px,3vh,30px) clamp(32px,4vw,64px)}
.scf.is-film .scf-top{grid-area:top}
.scf.is-film .scf-media{grid-area:media;align-self:start;width:min(100%,calc((100svh - 330px) * 1.5));will-change:transform}
.scf.is-film .scf-meta{grid-area:meta;align-self:end;padding-bottom:clamp(20px,6vh,64px);will-change:transform,opacity}
.scf.is-film .scf-browser{will-change:transform,opacity}
.scf.is-film .scf-l{transform:translate3d(0,calc((1 - clamp(0,(var(--e,1) - .26 - var(--li) * .024) * 2.6,1)) * 108% - clamp(0,(var(--x,0) - var(--li) * .012) * 3.2,1) * 108%),0) rotate(calc((1 - clamp(0,(var(--e,1) - .26 - var(--li) * .024) * 2.6,1)) * 9deg))}
.scf.is-film .scf-rail{display:block;position:absolute;z-index:5;left:max(32px,calc((100vw - var(--container,1240px)) / 2 + 32px));top:50%;width:180px;transform:translateY(-44%)}
.scf-rail ol{position:relative;list-style:none;margin:0;padding:0 0 0 18px}
.scf-rail ol::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.scf-rail__fill{position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent-soft);transform-origin:50% 0;transform:scaleY(var(--rp,0))}
.scf-rail button{display:flex;align-items:baseline;gap:10px;width:100%;min-height:30px;padding:5px 0;border:0;background:none;color:var(--vb-faint);font:500 .88rem/1.2 var(--font-body);text-align:left;cursor:pointer;transition:color .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.scf-rail button .vb-tc{font-size:.7rem;color:inherit;opacity:.8}
.scf-rail li.is-on button{color:#fff;transform:translateX(6px)}
.scf-rail li.is-on button .vb-tc{color:var(--accent-soft);opacity:1}
@media (hover:hover){ .scf-rail button:hover{color:#fff} }
.scf-mbar{position:absolute;z-index:5;left:20px;right:20px;top:calc(72px + 10px);align-items:center;gap:12px}
.scf-mbar__track{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.scf-mbar__track i{position:absolute;inset:0;background:var(--accent-soft);transform-origin:0 50%;transform:scaleX(var(--rp,0))}
.scf-mbar__n{color:var(--vb-dim)}

@media (max-width:1279px){
  .scf.is-film .scf-in{padding-left:calc(var(--side) + 190px);grid-template-columns:minmax(0,1fr) minmax(230px,260px)}
  .scf.is-film .scf-rail{width:165px}
  .scf.is-film .scf-media, .scf.is-film .scf-meta{align-self:center}
  .scf.is-film .scf-meta{padding-bottom:0}
  .scf.is-film .scf-name{font-size:clamp(2.4rem,.4rem + 5vw,5rem)}
}
@media (max-width:1023px){
  .scf.is-film .scf-rail{display:none}
  .scf.is-film .scf-mbar{display:flex;top:84px;left:32px;right:32px}
  .scf.is-film .scf-in{padding:128px 32px 32px;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"top" "media" "meta";align-content:center;gap:22px}
  .scf.is-film .scf-media{width:min(90%,calc((100svh - 440px) * 1.5))}
  .scf.is-film .scf-meta{align-self:start;padding-bottom:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px 20px;margin-top:6%}
  .scf.is-film .scf-meta .scf-chips{grid-column:1 / -1;grid-row:2;margin:0}
  .scf.is-film .scf-meta .scf-pal{display:none}
  .scf.is-film .scf-meta .btn{margin:0;grid-column:2;grid-row:1}
  .scf:not(.is-film) .scf-in{grid-template-columns:1fr;grid-template-areas:"top" "media" "meta"}
  .scf:not(.is-film) .scf-media{max-width:640px;margin-bottom:12%}
}
@media (max-width:767px){
  .scf.is-film .scf-mbar{top:76px;left:20px;right:20px}
  .scf.is-film .scf-in{padding:104px 20px 28px;gap:16px}
  .scf-name{font-size:clamp(2.3rem,1rem + 6.2vw,3rem)}
  .scf.is-film .scf-name{font-size:clamp(2.3rem,1rem + 6.2vw,3rem)}
  .scf.is-film .scf-media{width:min(92%,calc((100svh - 430px) * 1.5))}
  .scf-bar{height:24px;padding:0 10px}
  .scf-bar i{width:7px;height:7px}
  .scf-bar span{font-size:.7rem;padding:3px 10px}
  .scf-phone{right:-9%;bottom:-16%;width:30%;border-radius:18px;padding:1%}
  .scf-pview{border-radius:14px}
  .scf.is-film .scf-meta{margin-top:12%;grid-template-columns:1fr}
  .scf.is-film .scf-meta .btn{grid-column:1;grid-row:3;justify-content:center}
  .scf.is-film .scf-meta .scf-chips{grid-row:2;flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .scf.is-film .scf-host{font-size:.98rem}
  .scf.is-film .scf-idx{display:none}
  .scf:not(.is-film) .scf-in{padding:0 20px}
  .scf-chips .sc-chip{min-height:32px;padding:6px 12px;font-size:.84rem}
}

/* contact sheet: the reel ends on every site at once */
.scf-end{padding-top:clamp(56px,7vw,104px)}
.scf-end__head{display:flex;align-items:end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,34px)}
.scf-end__head h3{margin:0;font-size:clamp(1.6rem,1rem + 1.6vw,2.5rem);letter-spacing:-.03em;line-height:1.04}
.scf-end__head p{margin:0;color:var(--vb-dim);font-size:1.02rem}
.scf-sheet{list-style:none;margin:0;padding:clamp(14px,1.6vw,22px);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:22px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09)}
.scf-frame{display:block;color:inherit;text-decoration:none}
.scf-frame__img{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#141416;border:1px solid rgba(255,255,255,.12);transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .55s cubic-bezier(.16,1,.3,1)}
.scf-frame__img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.scf-frame__meta{display:block;margin-top:10px}
.scf-frame__meta .vb-tc{display:block;margin-bottom:6px;font-size:.7rem;color:var(--accent-soft)}
.scf-frame__meta b{display:block;font:600 .98rem/1.18 var(--font-head);letter-spacing:-.01em}
.scf-frame__meta > span:not(.vb-tc){display:block;margin-top:4px;font-size:.82rem;line-height:1.3;color:var(--vb-dim)}
.scf-frame__meta > .scf-frame__host{margin-top:2px;color:var(--vb-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scf-frame:active .scf-frame__img{transform:scale(.98)}
@media (hover:hover){ .scf-frame:hover .scf-frame__img{transform:translateY(-4px);border-color:rgba(255,77,227,.5);box-shadow:0 30px 50px -30px rgba(0,0,0,.95)} }
@media (max-width:1199px){ .scf-sheet{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:640px){ .scf-sheet{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;padding:12px} }

/* =========================================================
   Pop-up (Showcases 1 + 2): screenshots first, one live iframe on request
   ========================================================= */
.scm{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:clamp(10px,2.2vw,28px);visibility:hidden;opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s}
.scm.is-open{visibility:visible;opacity:1;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.scm-veil{position:absolute;inset:0;background:rgba(6,6,8,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.scm-panel{position:relative;width:min(1360px,100%);height:min(880px,100%);display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(30,30,34,.94),rgba(17,17,20,.96));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 70px 160px -50px rgba(0,0,0,.95);
  transform:translate3d(0,22px,0) scale(.975);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.scm.is-open .scm-panel{transform:none}
.scm-top{display:flex;align-items:center;gap:16px;padding:12px 14px 12px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.scm-id{display:flex;align-items:center;gap:14px;min-width:0;margin-right:auto}
.scm-id h3{margin:0;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scm-id .vb-tc{margin:5px 0 0;color:var(--accent-soft);font-size:.72rem}
.scm-seg{display:none;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.scm[data-mode="live"] .scm-seg{display:inline-flex}
.scm-seg button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--vb-dim);font:600 .86rem/1 var(--font-body);cursor:pointer;transition:background .3s ease,color .3s ease}
.scm-seg button .icon{width:16px;height:16px}
.scm-seg button[aria-pressed="true"]{background:#fff;color:#0e0e0e}
@media (hover:hover){ .scm-seg button[aria-pressed="false"]:hover{color:#fff} }
.scm-x{flex:none;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.scm-x .icon{width:16px;height:16px}
.scm-x:active{transform:scale(.94)}
@media (hover:hover){ .scm-x:hover{background:var(--accent);border-color:var(--accent)} }
.scm-main{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:0}
.scm-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,36px);padding:clamp(18px,2.4vw,32px);overflow:hidden;isolation:isolate}
.scm-stage::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(42% 46% at 40% 45%,color-mix(in srgb,var(--g1,#bf00b2) 26%,transparent),transparent 70%),radial-gradient(36% 40% at 78% 60%,color-mix(in srgb,var(--g2,#e619d1) 18%,transparent),transparent 70%)}
.scm-browser{flex:1 1 auto;min-width:0;max-width:960px;height:100%;max-height:calc((100% ) );display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#0b0b0d;border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 90px -40px rgba(0,0,0,.95)}
.scm-bar{flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#1c1c20;border-bottom:1px solid rgba(255,255,255,.06)}
.scm-bar > i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.scm-url{display:inline-flex;align-items:center;gap:7px;margin:0 auto;padding:5px 16px;border-radius:999px;background:rgba(255,255,255,.06);font:500 .8rem/1 var(--font-body);color:#b6bac2;white-space:nowrap;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.scm-url svg{width:11px;height:11px;flex:none}
.scm-view{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:#111114;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.scm-view img{display:block;width:100%;height:auto}
.scm-view:focus-visible{outline:2px solid var(--accent-soft);outline-offset:-2px}
.scm-phone{position:relative;flex:none;height:min(100%,700px);aspect-ratio:404/858;padding:7px;border-radius:40px;background:linear-gradient(150deg,#45464c,#18181b 40%,#2c2d32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 50px 90px -30px rgba(0,0,0,.95);display:flex}
.scm-phone .scm-view{border-radius:33px;scrollbar-width:none}
.scm-phone .scm-view::-webkit-scrollbar{display:none}
.scm-island{position:absolute;top:17px;left:50%;width:30%;height:22px;border-radius:99px;background:#050506;transform:translateX(-50%);z-index:2;pointer-events:none}
.scm-view iframe{position:absolute;left:0;top:0;border:0;background:#fff;transform-origin:0 0}
.scm[data-mode="live"] .scm-view{overflow:hidden}
.scm[data-mode="live"][data-scm-dev="d"] .scm-phone{display:none}
.scm[data-mode="live"][data-scm-dev="m"] .scm-browser{display:none}
.scm[data-mode="live"][data-scm-dev="d"] .scm-browser{max-width:none}
.scm[data-mode="live"] .scm-view img{visibility:hidden}
.scm-loading{position:absolute;left:50%;bottom:clamp(26px,3vw,40px);z-index:3;display:none;align-items:center;gap:10px;margin:0;padding:10px 16px;border-radius:999px;transform:translateX(-50%);background:rgba(14,14,16,.82);border:1px solid rgba(255,255,255,.14);font:500 .86rem/1 var(--font-body);color:#fff;white-space:nowrap}
.scm-loading span{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent-soft);animation:scSpin .8s linear infinite}
.scm.is-loading .scm-loading{display:inline-flex}
@keyframes scSpin{to{transform:rotate(360deg)}}
.scm-info{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:26px 24px;border-left:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:24px}
.scm-dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.scm-dl div{min-width:0}
.scm-dl div:nth-child(2){grid-column:1 / -1;grid-row:1}
.scm-dl div:nth-child(1){grid-row:2}
.scm-dl dt{font:600 .72rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--vb-faint)}
.scm-dl dd{margin:6px 0 0;font:500 .98rem/1.3 var(--font-body);color:#fff;overflow-wrap:anywhere}
.scm-k{margin:0 0 10px;font:600 .72rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--vb-faint)}
.scm-feats ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.scm-feats[hidden]{display:none}
.scm-pal > div{display:flex;flex-direction:column;gap:8px}
.scm-pal span.scm-sw{display:flex;align-items:center;gap:12px;font:500 .86rem/1 var(--font-body);color:var(--vb-dim);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.scm-pal span.scm-sw i{width:26px;height:26px;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.scm-acts{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.scm-acts .btn{justify-content:center}
.scm-acts .btn .icon{width:14px;height:14px}
.scm-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.scm-nav .vb-tc{color:var(--vb-dim)}
.scm-arrow{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.scm-arrow .icon{width:18px;height:18px}
.scm-arrow:active{transform:scale(.94)}
@media (hover:hover){ .scm-arrow:hover{background:var(--accent);border-color:var(--accent)} }

@media (max-width:1023px){
  .scm-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
  .scm-info{border-left:0;border-top:1px solid rgba(255,255,255,.08);flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:16px 28px;padding:16px 20px;max-height:42%}
  .scm-dl{grid-template-columns:repeat(4,auto);gap:10px 22px}
  .scm-feats, .scm-pal{display:none}
  .scm-acts{flex-direction:row;margin:0 0 0 auto}
  .scm-nav{padding:0}
}
/* phones: a full-screen sheet; phone frame first, details scroll underneath */
@media (max-width:767px){
  .scm{padding:0;place-items:end stretch}
  .scm-panel{width:100%;height:100%;border-radius:0;border:0}
  .scm-top{padding:10px 10px 10px 16px;gap:10px;flex-wrap:wrap}
  .scm-id{flex:1 1 60%}
  .scm-seg{order:3;flex:1 1 100%;justify-content:center}
  .scm-seg button{flex:1;justify-content:center}
  .scm-main{display:block;overflow-y:auto;overscroll-behavior:contain}
  .scm-stage{flex-direction:column;gap:18px;padding:18px 16px 22px;height:auto;overflow:visible}
  .scm-phone{order:-1;height:auto;width:min(68vw,300px)}
  .scm-phone .scm-view{height:auto;aspect-ratio:390/844;flex:none;width:100%}
  .scm-browser{height:auto;width:100%;flex:none}
  .scm-browser .scm-view{flex:none;aspect-ratio:16/10;overflow:hidden}
  .scm[data-mode="live"] .scm-stage{height:calc(100svh - 132px);min-height:420px}
  .scm[data-mode="live"][data-scm-dev="m"] .scm-phone{height:100%;width:auto}
  .scm[data-mode="live"][data-scm-dev="m"] .scm-phone .scm-view{height:100%}
  .scm[data-mode="live"][data-scm-dev="d"] .scm-browser{height:auto}
  .scm[data-mode="live"][data-scm-dev="d"] .scm-browser .scm-view{aspect-ratio:auto;height:calc(100svh - 220px);flex:none}
  .scm-info{max-height:none;flex-direction:column;padding:20px 16px calc(28px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08)}
  .scm-dl{grid-template-columns:1fr 1fr}
  .scm-feats, .scm-pal{display:block}
  .scm-acts{flex-direction:column;margin:0}
}

/* =========================================================
   Reduced motion: calm, static versions of all three
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .sct-au, .sct-au i, .sct-float, .sc-pulse::after, .sct-chip, .sct-name__in, .sct-screen img, .sct-lapimg, .sct-fade, .scw-card, .scw-wall, .scf-frame__img, .scm, .scm-panel, .sct-tab, .scm-loading span{animation:none!important;transition:none!important}
  .sct-scene{transform:rotateX(4deg) rotateY(-8deg)!important}
  .scw-card.is-enter{animation:none!important}
}

/* pop-up open: page behind stops scrolling */
html.sc-lock body{overflow:hidden}