/* showcase pages inside the site (header, menu, more projects, contact and footer come from the site).
   Everything here lives under .scx, coloured per site with --c1 / --c2. */
.scx{--ink:#fff;position:relative;color:#fff;overflow:clip;background:radial-gradient(90% 70% at 85% 0%,color-mix(in srgb,var(--c2) 45%,transparent),transparent 70%),radial-gradient(70% 60% at 0% 100%,color-mix(in srgb,var(--c2) 22%,transparent),transparent 70%),var(--c1);font-family:'Assistant',Arial,sans-serif;line-height:1.6}
.scx img{display:block;max-width:100%}
.scx .sc-kick{display:inline-block;padding:6px 16px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);font-weight:700;font-size:14px;margin-bottom:16px;color:#fff}
.scx .sc-crumbs{display:flex;gap:6px;align-items:center;font-size:14px;color:rgba(255,255,255,.78);margin-bottom:14px}
.scx .sc-crumbs a{color:inherit;text-decoration:none}.scx .sc-crumbs a:hover{color:#ff7ad9}
/* hero */
.scx .sc-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.scx .sc-bg{position:absolute;inset:-12% -6%;z-index:-2;background-size:cover;background-position:50% 0;filter:blur(26px) saturate(130%) brightness(.55);transform:scale(1.15);will-change:transform}
.scx .sc-bg-fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,var(--c1) 100%),radial-gradient(60% 70% at 70% 40%,transparent,rgba(0,0,0,.35))}
.scx .sc-hero-in{width:min(1300px,92vw);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,80px);align-items:center;padding:120px 0 60px}
.scx .sc-copy h1{font-family:'Rubik',sans-serif;font-size:clamp(2.6rem,5.4vw,5.4rem)!important;font-weight:900;line-height:1!important;letter-spacing:-1.5px;margin:0 0 18px;color:#fff;-webkit-text-fill-color:#fff;background:none}
.scx .sc-copy h1 .sc-ch{display:inline-block;opacity:0;transform:translateY(60%) rotate(6deg);animation:scCh .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*35ms + .15s)}
@keyframes scCh{to{opacity:1;transform:none}}
.scx .sc-lead{font-size:clamp(1.05rem,1.35vw,1.3rem);max-width:30em;color:rgba(255,255,255,.88);margin:0;opacity:0;animation:scUp .9s .55s cubic-bezier(.2,.8,.2,1) forwards}
.scx .sc-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 26px;padding:0;opacity:0;animation:scUp .9s .7s cubic-bezier(.2,.8,.2,1) forwards}
.scx .sc-tags li{padding:7px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.55);font-weight:600;font-size:15px;color:#fff}
.scx .sc-down{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:99px;background:#fff;color:#1a0c34;font-weight:800;text-decoration:none;opacity:0;animation:scUp .9s .85s cubic-bezier(.2,.8,.2,1) forwards}
.scx .sc-down i{font-style:normal;animation:scBob 1.6s ease-in-out infinite}
@keyframes scUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes scBob{50%{transform:translateY(4px)}}
.scx .sc-tilt{perspective:1400px}
.scx .sc-browser{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.18);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);opacity:0;animation:scIn 1.2s .3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes scIn{from{opacity:0;transform:translateY(60px) rotateX(18deg)}to{opacity:1}}
.scx .sc-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:linear-gradient(90deg,var(--c1),color-mix(in srgb,var(--c2) 70%,var(--c1)));direction:ltr}
.scx .sc-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55)}
.scx .sc-bar span{margin-inline-start:12px;padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.85)}
.scx .sc-shot{aspect-ratio:16/10.5;overflow:hidden}
.scx .sc-shot img{width:100%;height:auto;animation:scPeek 14s 1.5s ease-in-out infinite}
@keyframes scPeek{0%,12%,100%{transform:translateY(0)}50%,62%{transform:translateY(-22%)}}
/* the full page scrolling in a sticky browser */
.scx .sc-full{position:relative;height:340vh}
.scx .sc-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:center;width:min(1300px,92vw);margin:0 auto;padding-top:80px}
.scx .sc-full-txt h2,.scx .sc-h{font-family:'Rubik',sans-serif;font-size:clamp(2rem,4vw,3.6rem)!important;font-weight:900;line-height:1.05;margin:0 0 18px;color:#fff;-webkit-text-fill-color:#fff;background:none}
.scx .sc-steps{list-style:none;display:grid;gap:8px;counter-reset:s;margin:0;padding:0}
.scx .sc-steps li{counter-increment:s;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;color:rgba(255,255,255,.5);font-weight:600;font-size:clamp(1rem,1.2vw,1.15rem);transition:color .4s,background .4s,transform .4s}
.scx .sc-steps li::before{content:counter(s,decimal-leading-zero);font-family:'Rubik',sans-serif;font-size:13px;width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);transition:background .4s}
.scx .sc-steps li.on{color:#fff;background:rgba(255,255,255,.08);transform:translateX(-6px)}
.scx .sc-steps li.on::before{background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040}
.scx .sc-meter{height:4px;border-radius:4px;background:rgba(255,255,255,.12);margin-top:18px;overflow:hidden}
.scx .sc-meter i{display:block;height:100%;width:100%;transform-origin:100% 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#c9a6ff,#ff7ad9)}
.scx .sc-frame{justify-self:center;width:min(100%,calc(var(--nw) * 1.15),calc((100svh - 150px) * .9));border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.18)}
.scx .sc-view{height:calc(100svh - 200px);max-height:760px;overflow:hidden;position:relative}
.scx .sc-long{width:100%;height:auto;will-change:transform}
/* parallax collage */
.scx .sc-collage{position:relative;width:min(1300px,92vw);margin:0 auto;padding:clamp(60px,10vw,140px) 0}
.scx .sc-h{text-align:center}
.scx .sc-cards{position:relative;height:clamp(420px,46vw,640px);margin-top:30px}
.scx .sc-card{position:absolute;margin:0;border-radius:18px;overflow:hidden;box-shadow:0 40px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.2);will-change:transform;background:#fff}
.scx .sc-crop{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.scx .sc-card:hover .sc-crop{transform:scale(1.06)}
.scx .sc-card.k1{right:0;top:4%;width:44%;aspect-ratio:4/3;rotate:-3deg}
.scx .sc-card.k2{left:28%;top:18%;width:40%;aspect-ratio:4/3;rotate:2deg;z-index:2}
.scx .sc-card.k3{left:0;top:2%;width:34%;aspect-ratio:3/4;rotate:-2deg}
/* laptop */
.scx .sc-duo{position:relative;width:min(1100px,92vw);margin:0 auto;padding:40px 0 clamp(80px,10vw,140px);display:flex;justify-content:center}
.scx .sc-laptop{width:min(86%,980px)}
.scx .sc-lid{background:#111;border-radius:18px 18px 0 0;padding:14px 14px 18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.scx .sc-scr{aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#fff}
.scx .sc-scr img{width:100%;animation:scPeek 16s ease-in-out infinite}
.scx .sc-base{height:18px;margin:0 -6%;border-radius:0 0 22px 22px;background:linear-gradient(#cfcfd6,#9a9aa6)}
/* branding: the logo on a light panel */
.scx .sc-brandbox{width:min(1100px,92vw);margin:0 auto clamp(80px,10vw,140px);border-radius:32px;padding:clamp(40px,6vw,90px) clamp(24px,5vw,80px);background:radial-gradient(60% 80% at 80% 10%,#fff,transparent 70%),linear-gradient(135deg,#fff8f2,#f3ece6);color:#2a1a1a;display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,60px);align-items:center;box-shadow:0 50px 90px -50px rgba(0,0,0,.8)}
.scx .sc-brandbox h2{font-family:'Rubik',sans-serif;font-size:clamp(2rem,3.6vw,3.2rem)!important;font-weight:900;margin:0 0 10px;color:#2a1a1a;-webkit-text-fill-color:#2a1a1a;background:none}
.scx .sc-brandbox p{margin:0;font-size:1.1rem;color:rgba(42,26,26,.75)}
.scx .sc-brandbox .sc-kick{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);color:#2a1a1a}
.scx .sc-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.12))}
.scx .rv{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.scx .rv.in{opacity:1;transform:none}
@media(max-width:900px){
  .scx .sc-hero-in,.scx .sc-sticky,.scx .sc-brandbox{grid-template-columns:1fr}
  .scx .sc-hero-in{padding-top:110px}
  .scx .sc-full{height:260vh}
  .scx .sc-sticky{align-content:center;gap:18px;padding-top:90px}
  .scx .sc-steps{display:none}
  .scx .sc-view{height:calc(100svh - 300px)}
  .scx .sc-cards{height:auto;display:grid;gap:16px}
  .scx .sc-card{position:relative;inset:auto!important;width:100%!important;rotate:none!important;aspect-ratio:4/3!important}
  .scx .sc-laptop{width:96%}
}
@media(prefers-reduced-motion:reduce){.scx *{animation:none!important}.scx .sc-copy h1 .sc-ch,.scx .sc-lead,.scx .sc-tags,.scx .sc-down,.scx .sc-browser{opacity:1!important;transform:none!important}.scx .rv{opacity:1;transform:none}}
html:not(#a) .scx .sc-crumbs,html:not(#a) .scx .sc-crumbs a,html:not(#a) .scx .sc-crumbs span,html:not(#a) .scx .sc-crumbs i{font-size:14px!important;line-height:1.4!important;font-style:normal;font-weight:500}
.scx .sc-brandbox{position:relative;overflow:hidden;isolation:isolate;grid-template-columns:1fr 1.25fr}
.scx .sc-brandbox::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../%D7%A4%D7%A8%D7%95%D7%99%D7%99%D7%A7%D7%98%D7%99%D7%9D/rolan/pattern.svg') center/120% auto no-repeat;opacity:.1}
.scx .sc-brandbox h2{line-height:1.1!important}
.scx .sc-logo{filter:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.scx .sc-brandbox:hover .sc-logo{transform:scale(1.03) rotate(-1deg)}

/* the hero picture fades out into the page colour instead of ending on a hard edge */
.scx .sc-bg{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 55%,transparent 92%)}
.scx .sc-bg-fade{background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 100%),radial-gradient(60% 70% at 70% 40%,transparent,rgba(0,0,0,.35))}
/* branding right after the hero: the panel rises, the text comes in line by line, the cart drives in with a small bounce
   and the pluses around it drift */
.scx .sc-brandbox{margin-top:clamp(10px,3vw,40px)}
.scx .sc-brandbox.rv{transform:translateY(60px) scale(.97);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.scx .sc-brandbox.rv.in{transform:none}
.scx .sc-btxt>*{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.scx .sc-brandbox.in .sc-btxt>*{opacity:1;transform:none}
.scx .sc-brandbox.in .sc-btxt>:nth-child(1){transition-delay:.25s}
.scx .sc-brandbox.in .sc-btxt>:nth-child(2){transition-delay:.38s}
.scx .sc-brandbox.in .sc-btxt>:nth-child(3){transition-delay:.5s}
.scx .sc-lwrap{opacity:0;transform:translateX(-120px) rotate(-4deg);transition:opacity .6s ease .35s}
.scx .sc-brandbox.in .sc-lwrap{opacity:1;animation:scDrive 1.3s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes scDrive{0%{transform:translateX(-120px) rotate(-4deg)}60%{transform:translateX(14px) rotate(1.5deg)}80%{transform:translateX(-5px) rotate(-.5deg)}100%{transform:none}}
.scx .sc-brandbox.in .sc-logo{animation:scBob2 4.5s ease-in-out 1.8s infinite}
@keyframes scBob2{50%{transform:translateY(-8px)}}
.scx .sc-brandbox::before{animation:scDrift 18s ease-in-out infinite alternate}
@keyframes scDrift{to{background-position:46% 58%;transform:scale(1.06)}}
.scx .sc-brandbox:hover .sc-logo{transform:none}
@media(prefers-reduced-motion:reduce){.scx .sc-btxt>*,.scx .sc-lwrap{opacity:1!important;transform:none!important;animation:none!important}}
.scx .sc-bg-fade{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
/* hero buttons: scroll the full page, and for sites that are still live a link to the site itself */
.scx .sc-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.scx .sc-live{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:99px;border:1px solid rgba(255,255,255,.6);color:#fff;font-weight:700;text-decoration:none;opacity:0;animation:scUp .9s .95s cubic-bezier(.2,.8,.2,1) forwards;transition:background .3s,color .3s}
.scx .sc-live:hover{background:#fff;color:#1a0c34}
.scx .sc-live i{font-style:normal}