/* Tech demo pages (/showcase/, /halloween-games/): builds on devices.css */
.sc-hero{background:#0c0b14;color:#fff;overflow:hidden}
.sc-hero .dv-hero-p,.sc-hero .dv-kick{color:rgba(255,255,255,.78)}
.sc-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sc-art i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:scDrift 18s ease-in-out infinite alternate}
.sc-art i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-12vw;background:#7c5cff}
.sc-art i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:4vw;background:#ff6138;animation-duration:22s}
.sc-art i:nth-child(3){width:30vw;height:30vw;left:34vw;bottom:-14vw;background:#14b8a6;animation-duration:26s}
@keyframes scDrift{to{transform:translate(6vw,4vw) scale(1.15)}}
.sc-hero .dv-hero-in{position:relative;z-index:1}
.sc-hero .dv-hero-foot{position:relative;z-index:1;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}
.sc-hero .dv-hero-foot a{color:#fff}
.sc-seg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:56px;scroll-margin-top:100px}
.sc-seg:nth-of-type(even) .sc-vis{order:2}
.sc-vis{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px rgba(17,28,27,.18)}
.sc-txt h2{font:800 clamp(28px,3.6vw,44px)/1.02 Sora,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.03em;margin:8px 0 14px}
.sc-txt h2 em{font-style:italic;color:var(--dv-acc)}
.sc-txt p{color:var(--dv-muted);margin:0 0 14px;line-height:1.6}
.sc-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.sc-list li{display:flex;gap:10px;align-items:baseline}
.sc-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--dv-acc);transform:translateY(-1px)}
.sc-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.sc-tags span{font:700 11px Inter,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:100px;background:var(--dv-soft);color:var(--dv-ink)}
/* visual 1: client showcase */
.v-show{background:#101918;display:grid;place-items:center}
.v-show .ph{position:relative;width:46%;aspect-ratio:9/18;border-radius:28px;background:#05080a;border:3px solid #2b3533;box-shadow:0 0 0 6px #0b1110,0 30px 60px rgba(0,0,0,.5);overflow:hidden}
.v-show .ph i{position:absolute;border-radius:50%;filter:blur(14px);mix-blend-mode:screen;animation:scBlob 7s ease-in-out infinite alternate}
.v-show .ph i:nth-child(1){width:70%;height:40%;left:-10%;top:10%;background:#7c5cff}
.v-show .ph i:nth-child(2){width:60%;height:35%;right:-15%;top:35%;background:#ff6138;animation-delay:-2s}
.v-show .ph i:nth-child(3){width:65%;height:38%;left:10%;bottom:-5%;background:#14b8a6;animation-delay:-4s}
.v-show .ph b{position:absolute;left:0;right:0;bottom:14%;text-align:center;font:800 15px Sora,Arial,sans-serif;color:#fff;letter-spacing:.04em}
@keyframes scBlob{to{transform:translate(18%,-12%) scale(1.25)}}
.v-show .chip{position:absolute;font:700 12px Inter,Arial,sans-serif;color:#fff;padding:8px 12px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.v-show .c1{left:7%;top:14%}.v-show .c2{right:6%;top:30%}.v-show .c3{left:5%;bottom:22%}.v-show .c4{right:8%;bottom:12%}
/* visual 2: halloween */
.v-hal{background:radial-gradient(circle at 70% 22%,#3b2a6b 0,#140c26 45%,#07040f 100%)}
.v-hal svg{position:absolute;inset:0;width:100%;height:100%}
.v-hal .gh{animation:scFloat 4s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes scFloat{to{transform:translateY(-14px) rotate(-2deg)}}
.v-hal .bat{animation:scBat 6s linear infinite}
@keyframes scBat{from{transform:translate(-80px,0)}to{transform:translate(520px,-40px)}}
.v-hal .flash{animation:scFlash 7s infinite}
@keyframes scFlash{0%,90%,100%{opacity:0}91%,93%{opacity:.55}92%{opacity:.1}}
/* visual 3: world clock */
.v-clock{background:#06131f;display:grid;place-items:center}
.v-clock svg{width:72%;height:auto}
.v-clock .spin{animation:scSpin 24s linear infinite;transform-origin:150px 150px}
@keyframes scSpin{to{transform:rotate(360deg)}}
.v-clock .tm{position:absolute;font:700 12px Inter,Arial,sans-serif;color:#cfe8ff;padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.v-clock .t1{left:6%;top:12%}.v-clock .t2{right:6%;top:20%}.v-clock .t3{left:8%;bottom:14%}
/* halloween page */
.hg-hero{background:radial-gradient(circle at 75% 20%,#3b2a6b 0,#140c26 45%,#07040f 100%);color:#fff;overflow:hidden}
.hg-hero .dv-hero-p,.hg-hero .dv-kick{color:rgba(255,255,255,.8)}
.hg-hero .dv-hero-in{position:relative;z-index:1}
.hg-hero .dv-hero-foot{position:relative;z-index:1;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}.hg-hero .dv-hero-foot a{color:#fff}
.hg-hero .sc-art svg{position:absolute;right:-2%;bottom:0;width:min(560px,60vw);height:auto;opacity:.9}
.hg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:24px}
.hg-g{position:relative;padding:20px 18px 18px;border-radius:16px;background:#fff;border:1px solid var(--dv-line);transition:transform .2s,box-shadow .2s,border-color .2s}
.hg-g:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(17,28,27,.1);border-color:var(--dv-acc)}
.hg-g .n{font:800 13px Sora,Arial,sans-serif;color:var(--dv-acc)}
.hg-g h3{font:800 20px Sora,Arial,sans-serif;margin:6px 0 4px}
.hg-g .k{display:inline-block;font:700 11px Inter,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--dv-muted);margin-bottom:8px}
.hg-g p{margin:0;color:var(--dv-muted);line-height:1.55}
.hg-how{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:22px;counter-reset:hs}
.hg-how div{padding:18px;border-radius:14px;background:var(--dv-soft)}
.hg-how div::before{counter-increment:hs;content:counter(hs);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--dv-dark);color:#fff;font:800 14px Sora,Arial,sans-serif;margin-bottom:10px}
.hg-how b{display:block;margin-bottom:4px}.hg-how span{color:var(--dv-muted)}
.hg-cta{margin-top:56px;padding:40px 32px;border-radius:22px;background:#140c26;color:#fff;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.hg-cta h2{font:800 clamp(24px,3vw,34px) Sora,Arial,sans-serif;margin:0;text-transform:uppercase}.hg-cta p{margin:6px 0 0;color:rgba(255,255,255,.75)}
.sc-back{display:inline-flex;margin-top:18px;color:var(--dv-ink);font-weight:700;text-decoration:none}
@media (max-width:860px){.sc-seg{grid-template-columns:1fr;gap:22px}.sc-seg:nth-of-type(even) .sc-vis{order:0}}
@media (prefers-reduced-motion:reduce){.sc-art i,.v-show .ph i,.v-hal .gh,.v-hal .bat,.v-hal .flash,.v-clock .spin{animation:none}}
.hg-hero svg.v-hal{background:none}
.v-show .ph{width:auto;height:84%}
.hg-hero .sc-art{z-index:1}
@media (max-width:700px){.hg-hero .sc-art svg{opacity:.45}}