/* Showcase carousel (home) + lightbox (shell). Self-contained, token driven. */
.showcase{--sc-ink:#eaf6fb;--sc-muted:rgba(214,234,243,.7);--sc-line:rgba(160,225,245,.16);--sc-accent:#18c3e6;
  position:relative;padding:clamp(56px,8vw,110px) 0 clamp(48px,6vw,90px);background:#010508;color:var(--sc-ink);overflow:hidden}
.showcase::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 52%,rgba(40,210,238,.42) 0%,rgba(24,195,230,.26) 22%,rgba(24,195,230,.12) 44%,rgba(24,195,230,.04) 62%,rgba(24,195,230,0) 80%)}
.showcase__head,.showcase__viewport{position:relative;z-index:1}
.showcase__head{max-width:1180px;margin:0 auto 36px;padding:0 24px;text-align:center}
.showcase__eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sc-accent)}
.showcase__title{margin:0 0 12px;font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.showcase__lead{margin:0 auto;max-width:700px;text-wrap:pretty;color:var(--sc-muted);font-size:clamp(15px,1.3vw,18px);line-height:1.65}

.showcase__viewport{position:relative}
.showcase__track{display:flex;gap:clamp(16px,3vw,48px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:20px max(24px,calc((100% - 960px)/2)) 56px;scroll-padding-inline:max(24px,calc((100% - 960px)/2));-webkit-overflow-scrolling:touch}
.showcase__track::-webkit-scrollbar{display:none}
.showcase__slide{flex:0 0 min(960px,100%);scroll-snap-align:center;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:center;cursor:pointer;
  opacity:.55;transform:scale(.92);filter:blur(3px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),filter .45s cubic-bezier(.2,.7,.2,1)}
.showcase__slide.is-active{opacity:1;transform:none;filter:none}
.showcase__slide:focus-visible{outline:2px solid var(--sc-accent);outline-offset:6px;border-radius:16px}

.sc-stage{position:relative;z-index:2;width:min(100%,760px);margin:0 auto;padding-bottom:0}
/* MacBook */
.sc-mac__lid{position:relative;background:#0b0f14;border:1px solid #2a3340;border-radius:16px 16px 6px 6px;padding:2.2% 2.2% 2.6%;box-shadow:0 40px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04) inset}
.sc-mac__lid::before{content:"";position:absolute;top:.9%;left:50%;width:1.6%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#1a2230;box-shadow:0 0 0 2px #0f151e}
.sc-mac__screen{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#0e1a28}
.sc-mac__base{position:relative;height:clamp(8px,1.6vw,16px);margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#c9d1da,#8b95a1 70%,#6d7782);box-shadow:0 18px 30px -14px rgba(0,0,0,.8)}
.sc-mac__base::after{content:"";position:absolute;top:0;left:50%;width:16%;height:55%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#7c8691,#a5aeb8)}
/* iPhone */
.sc-phone{position:absolute;right:-3%;bottom:0;width:21%;background:#0b0f14;border:1px solid #333d4b;border-radius:clamp(14px,2.6vw,30px);padding:clamp(3px,.6vw,7px);
  box-shadow:0 30px 50px -18px rgba(0,0,0,.9),0 0 0 2px #1a212b}
.sc-phone__screen{position:relative;aspect-ratio:9/19.5;border-radius:clamp(11px,2.1vw,24px);overflow:hidden;background:#0e1a28}
.sc-phone__screen::after{content:"";position:absolute;top:2.4%;left:50%;width:32%;height:2.8%;transform:translateX(-50%);border-radius:99px;background:#05080c;z-index:2}
.sc-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.sc-fallback{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;letter-spacing:-.02em;font-size:clamp(14px,2.4vw,28px);color:#fff;
  background:linear-gradient(135deg,var(--sc-a,#0f3a52),var(--sc-b,#061426));text-transform:capitalize}

.showcase__meta{margin-top:26px}
.showcase__name{margin:0 0 4px;font-size:clamp(18px,1.9vw,24px);font-weight:700}
.showcase__tag{margin:0 auto;max-width:52ch;color:var(--sc-muted);font-size:15px;line-height:1.6;text-wrap:pretty}
.showcase__cta{display:inline-flex;margin-top:12px;padding:8px 18px;border-radius:99px;border:1px solid var(--sc-line);background:rgba(24,195,230,.08);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.showcase__slide:hover .showcase__cta{background:rgba(24,195,230,.2)}

.showcase__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:-8px}
.showcase__btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--sc-line);background:rgba(10,30,46,.7);color:var(--sc-ink);cursor:pointer;display:grid;place-items:center;transition:background .25s,transform .25s}
.showcase__btn:hover{background:rgba(24,195,230,.2);transform:scale(1.06)}
.showcase__btn:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px}
.showcase__btn svg{width:18px;height:18px}
.showcase__dots{display:flex;gap:8px}
.showcase__dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(214,234,243,.3);cursor:pointer;transition:width .3s,background .3s}
.showcase__dot.is-active{width:26px;background:var(--sc-accent)}

@media (max-width:700px){
  .showcase__slide{flex-basis:92%}
  .showcase__track{padding-inline:4%;scroll-padding-inline:4%}
  .sc-phone{right:-1%;width:26%}
}

/* ---------- Lightbox (lives in the top document) ---------- */
.sc-lb{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:0;
  background:rgba(2,8,14,.55);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.sc-lb.is-open{opacity:1;visibility:visible}
.sc-lb__dialog{position:relative;display:flex;flex-direction:column;width:70vw;height:70vh;background:#07111c;border:1px solid rgba(160,225,245,.2);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 120px -20px rgba(0,0,0,.9);transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sc-lb.is-open .sc-lb__dialog{transform:none}
.sc-lb__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(160,225,245,.14);color:#eaf6fb;font-family:Cairo,system-ui,sans-serif}
.sc-lb__title{margin:0;font-size:16px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-lb__tabs{display:flex;gap:4px;padding:3px;border-radius:99px;background:rgba(255,255,255,.06)}
.sc-lb__tab{border:0;border-radius:99px;padding:6px 14px;background:none;color:#cfe6f0;font:600 13px Cairo,system-ui,sans-serif;cursor:pointer}
.sc-lb__tab[aria-pressed="true"]{background:#18c3e6;color:#03212b}
.sc-lb__open{color:#9fe3f3;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.sc-lb__open:hover{text-decoration:underline}
.sc-lb__close{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.sc-lb__close:hover{background:rgba(255,255,255,.18)}
.sc-lb__body{position:relative;flex:1;min-height:0;display:grid;place-items:stretch;background:#0b1622}
.sc-lb__frame{width:100%;height:100%;border:0;background:#fff;transition:width .3s ease}
.sc-lb[data-device="mobile"] .sc-lb__body{place-items:center}
.sc-lb[data-device="mobile"] .sc-lb__frame{width:390px;max-width:100%;border-radius:22px;border:6px solid #05080c;box-shadow:0 0 0 1px #2c3644}
.sc-lb__loading{position:absolute;inset:0;display:grid;place-items:center;color:#9fb8c6;font:600 14px Cairo,system-ui,sans-serif;pointer-events:none}
.sc-lb__frame.is-loaded + .sc-lb__loading{display:none}
@media (max-width:1024px){.sc-lb__dialog{width:80vw;height:80vh}}
@media (max-width:640px){.sc-lb__dialog{width:100vw;height:100dvh;height:100vh;border-radius:0;border:0}
  .sc-lb__open{display:none}.sc-lb__tabs{display:none}}
body.sc-lb-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.sc-lb,.sc-lb__dialog,.showcase__slide{transition:none}}

/* ---------- Glass-surface reflection ---------- */
.sc-reflect{position:relative;z-index:1;width:calc(min(100%,760px) * 1.1);margin-top:0;height:calc(var(--sc-h,420px) * .5);margin-left:auto;margin-right:auto;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,0) 100%)}
.sc-reflect .sc-stage{z-index:auto;position:absolute;left:4.545%;top:0;width:90.909%;margin:0;transform:scaleY(-1);filter:blur(2.5px);padding-bottom:0}
.sc-reflect::before{content:"";position:absolute;left:4%;right:4%;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(190,240,255,.55),rgba(255,255,255,0))}
.showcase__meta{position:relative;z-index:2;margin-top:calc(var(--sc-h,420px) * -.12)}

/* Page backdrop: same near-black as the carousel so the sections below blend with it. */
body.shell-page{background:#010508 !important}