/* Voxiyo Studio: shared styles for every page */
@font-face{font-family:"Gloock";src:url("fonts/gloock-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Schibsted";font-weight:400;src:url("fonts/schibsted-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Schibsted";font-weight:500;src:url("fonts/schibsted-500.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Schibsted";font-weight:700;src:url("fonts/schibsted-700.woff2") format("woff2");font-display:swap}

/* Palette = the Voxiyo logo: electric blue, white, black (+ tints of the blue) */
:root{
  --blue:#0000F8; --blue-2:#3B3BFF; --blue-t:#E8E8FF; --blue-t2:#C9C9FF;
  --serif:"Gloock",Georgia,serif; --sans:"Schibsted","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(18px,4.4vw,64px); --max:1400px;
  box-sizing:border-box;
}
:root,[data-theme="light"]{--bg:#FAFAFA; --ink:#000000; --paper:#FFFFFF; --soft:#F0F0F7; --muted:#55556E; --line:#000000; --shadow:#0000F8; --grid:rgba(0,0,248,.07)}
[data-theme="dark"]{--bg:#000000; --ink:#FFFFFF; --paper:#0B0B14; --soft:#12121F; --muted:#A3A3C2; --line:#FFFFFF; --shadow:#0000F8; --grid:rgba(120,120,255,.10)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s,color .5s;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- mock homepages ---------- */
.mock{position:relative;width:100%;container-type:inline-size;background:#fff;color:#16162a;overflow:hidden;display:flex;flex-direction:column;font-family:"Schibsted",Arial,sans-serif;text-align:left}
.mock *{box-sizing:border-box;margin:0}
.mock.d{aspect-ratio:1280/2400}
.mock.m{aspect-ratio:390/844}
.mock h1,.mock h2{font-weight:700;letter-spacing:-.02em;color:var(--d)}
.mock.serif h1,.mock.serif h2{font-family:"Gloock",Georgia,serif;font-weight:400}
.mock em{font-style:normal;display:inline-block;background:var(--a);color:#fff;border-radius:99cqw;white-space:nowrap}
.mock em.o{background:transparent;color:var(--a);box-shadow:inset 0 0 0 .15cqw var(--a)}
.mock .ln{display:grid;gap:.9cqw}
.mock .ln i{display:block;height:.9cqw;border-radius:1cqw;background:#e4e4ee}
.mock .ph{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 30%,var(--b) 0 11%,transparent 11.5%),linear-gradient(160deg,var(--a),var(--c))}
.mock .ph::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-35%;height:70%;border-radius:50%;background:var(--c);opacity:.75}
.mock .ph.p1{background:radial-gradient(circle at 25% 35%,rgba(255,255,255,.55) 0 9%,transparent 9.5%),linear-gradient(200deg,var(--b),var(--a))}
.mock .ph.p1::after{background:var(--d);opacity:.55;left:30%;right:-30%}
.mock .ph.p2{background:linear-gradient(120deg,var(--c),var(--a) 60%,var(--b))}
.mock .ph.p2::after{background:var(--b);opacity:.35;bottom:-45%}
/* desktop */
.d .mn{display:flex;align-items:center;gap:2.6cqw;padding:2cqw 5cqw;font-size:1.15cqw;color:#55556a}
.d .mn b{font-size:1.9cqw;color:var(--a);margin-right:auto;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.d.serif .mn b{font-family:"Gloock",Georgia,serif;font-weight:400}
.d .mn em{padding:.9cqw 1.8cqw;font-size:1.1cqw}
.d .mn.inv{color:rgba(255,255,255,.85);position:relative;z-index:2}
.d .mn.inv b{color:#fff}.d .mn.inv em{background:#fff;color:var(--a)}
.d .mh h1{font-size:5.6cqw;line-height:1}
.d .mh p{font-size:1.5cqw;line-height:1.45;color:#5b5b70;margin-top:1.6cqw;max-width:42cqw}
.d .mb{display:flex;gap:1.2cqw;margin-top:2.4cqw}
.d .mb em{padding:1.2cqw 2.4cqw;font-size:1.25cqw}
.d .mh.split{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center;padding:4cqw 5cqw 5cqw}
.d .mh.split .ph{aspect-ratio:1/1.05;border-radius:2cqw}
.d .mh.center{text-align:center;padding:7cqw 10cqw 4cqw;display:flex;flex-direction:column;align-items:center}
.d .mh.center p{margin-left:auto;margin-right:auto}
.d .ph.band{height:34cqw;margin:0 5cqw;border-radius:2cqw}
.d .mh.full{height:58cqw;display:flex;flex-direction:column;justify-content:space-between}
.d .mh.full .fx{position:relative;z-index:2;padding:0 5cqw 6cqw}
.d .mh.full h1{color:#fff;font-size:6.4cqw}.d .mh.full p{color:rgba(255,255,255,.88)}
.d .mh.full .mb em{background:#fff;color:var(--a)}.d .mh.full .mb em.o{background:transparent;color:#fff;box-shadow:inset 0 0 0 .15cqw #fff}
.d .ms{display:flex;justify-content:space-between;gap:3cqw;padding:4cqw 8cqw}
.d .ms i{flex:1;height:2.2cqw;border-radius:1cqw;background:#ececf3}
.d .sec{background:var(--t);padding:6cqw 5cqw}
.d h2{font-size:3cqw;line-height:1.1;margin-bottom:1.6cqw}
.d .mc{display:grid;gap:2.4cqw;margin-top:3.4cqw}
.d .mc3{grid-template-columns:repeat(3,1fr)}.d .mc4{grid-template-columns:repeat(4,1fr)}
.d .mc>div{background:#fff;border-radius:1.4cqw;padding:1.4cqw 1.4cqw 2cqw}
.d .mc .ph{aspect-ratio:4/3;border-radius:1cqw;margin-bottom:1.6cqw}
.d .sp{display:grid;grid-template-columns:1fr 1fr;gap:5cqw;align-items:center;padding:7cqw 5cqw}
.d .sp.rev>.ph{order:2}
.d .sp .ph{aspect-ratio:5/4;border-radius:2cqw}
.d .bd{display:flex;align-items:center;justify-content:space-between;margin:0 5cqw;padding:5cqw;border-radius:2cqw;background:var(--a)}
.d .bd h2{color:#fff;margin:0}.d .bd em{background:#fff;color:var(--a);padding:1.2cqw 2.4cqw;font-size:1.25cqw}
.d .ft{flex:1;margin-top:6cqw;background:var(--d);display:grid;grid-template-columns:repeat(3,1fr);gap:5cqw;padding:5cqw}
.d .ft .ln i{background:rgba(255,255,255,.16)}
/* phone */
.m .mn{display:flex;align-items:center;justify-content:space-between;padding:5cqw 6cqw}
.m .mn b{font-size:5.4cqw;color:var(--a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.m.serif .mn b{font-family:"Gloock",Georgia,serif;font-weight:400}
.m .bg{display:grid;gap:1.2cqw}.m .bg i{display:block;width:6cqw;height:.8cqw;background:var(--d);border-radius:1cqw}
.m .mi{height:62cqw;margin:0 4cqw;border-radius:4cqw}
.m .mt{padding:6cqw}
.m h1{font-size:10cqw;line-height:1}
.m .mt p{font-size:3.9cqw;line-height:1.4;color:#5b5b70;margin-top:3cqw}
.m .mb{margin-top:5cqw}.m .mb em{padding:3.2cqw 6cqw;font-size:3.6cqw}
.m .mc1{margin:0 4cqw;flex:1;background:var(--t);border-radius:4cqw 4cqw 0 0;padding:4cqw}
.m .mc1 .ph{height:34cqw;border-radius:3cqw;margin-bottom:4cqw}
.m .ln{gap:2.4cqw}.m .ln i{height:2.4cqw}


/* chunky buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 24px;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:500 15px var(--sans);cursor:pointer;box-shadow:4px 4px 0 var(--line);transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.btn.blue{background:var(--blue);color:#fff}
.btn svg{width:20px;height:20px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.logo{display:block;width:140px;color:var(--blue)}
[data-theme="dark"] .logo{color:#fff}
.logo svg{width:100%;height:auto;display:block}
.nav{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.nav a.t:hover{color:var(--blue)}
[data-theme="dark"] .nav a.t:hover{color:var(--blue-t2)}
@media (max-width:760px){.nav a.t{display:none}.logo{width:112px}}
.mode{position:relative;width:74px;height:38px;border-radius:999px;border:2px solid var(--line);background:var(--paper);cursor:pointer;padding:0;box-shadow:3px 3px 0 var(--line)}
.mode i{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--blue);transition:transform .45s var(--spring);display:grid;place-items:center}
.mode i svg{width:16px;height:16px;color:#fff}
[data-theme="dark"] .mode i{transform:translateX(36px)}
.mode .sun{display:block}.mode .moon{display:none}
[data-theme="dark"] .mode .sun{display:none}[data-theme="dark"] .mode .moon{display:block}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(40px,7vw,90px) 0 clamp(60px,8vw,110px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr}}
.pill{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:999px;padding:7px 16px 7px 8px;background:var(--paper);font-weight:500;font-size:14px;box-shadow:3px 3px 0 var(--line)}
.pill b{white-space:nowrap;background:var(--blue);color:#fff;border-radius:999px;padding:3px 10px;font-weight:500;font-size:12.5px}
.hero h1{font:400 clamp(3.2rem,8vw,8rem)/.9 var(--serif);letter-spacing:-.03em;margin:26px 0 0}
.hero h1 .w{display:inline-block}
.hero h1 .hl{position:relative;display:inline-block;color:#fff;padding:0 .12em;margin:0 -.04em;z-index:0}
.hero h1 .hl::before{content:"";position:absolute;inset:.08em -.02em .02em;background:var(--blue);border-radius:.14em;z-index:-1;transform:rotate(-2deg) scaleX(0);transform-origin:left;animation:swipe .9s .5s var(--ease) forwards}
@keyframes swipe{to{transform:rotate(-2deg) scaleX(1)}}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:32em;margin:24px 0 0}
.lede b{color:var(--ink);font-weight:500}

/* quest HUD (countdown) */
.hud{margin-top:34px;border:2px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:8px 8px 0 var(--shadow);overflow:hidden;max-width:620px}
.hud-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:2px solid var(--line);font-size:14px;font-weight:500}
.hud-top .q{display:flex;align-items:center;gap:10px}
.hud-top .q i{width:10px;height:10px;border-radius:50%;background:var(--blue);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.hud-top .lv{background:var(--ink);color:var(--bg);border-radius:8px;padding:3px 10px;font-size:13px}
.clock{display:grid;grid-template-columns:repeat(4,1fr)}
.cell{padding:16px 16px 14px;border-right:2px solid var(--line);position:relative}
.cell:last-child{border-right:0}
.digits{display:flex;gap:4px;height:1em;font:400 clamp(2.4rem,5vw,4.4rem)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.digits span{display:block;overflow:hidden;height:1em}
.digits span b{display:block;font-weight:400}
.digits span b.in{animation:drop .5s var(--spring)}
@keyframes drop{from{transform:translateY(-100%)}}
.cell small{display:block;margin-top:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.pips{display:flex;gap:5px;padding:14px 18px;border-top:2px solid var(--line);align-items:center}
.pips span{flex:1;height:14px;border-radius:4px;border:2px solid var(--line);background:var(--paper)}
.pips span.on{background:var(--blue);border-color:var(--blue)}
.pips span.now{background:repeating-linear-gradient(-45deg,var(--blue) 0 5px,var(--blue-t2) 5px 10px);animation:march 1s linear infinite;background-size:200% 100%}
@keyframes march{to{background-position:-28px 0}}
.xp{display:flex;justify-content:space-between;padding:0 18px 14px;font-size:13px;color:var(--muted);font-weight:500}
.xp b{color:var(--ink)}
@media (max-width:560px){.cell{padding:12px 10px}.cell small{font-size:11.5px}}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* card fan */
.fan{position:relative;height:min(600px,62vw);min-height:420px}
.fan .card{position:absolute;left:50%;top:50%;width:min(300px,46%);margin:0;transition:transform .7s var(--spring)}
.fan .card:nth-of-type(1){transform:translate(-50%,-50%) translate(-62%,6%) rotate(-16deg)}
.fan .card:nth-of-type(2){transform:translate(-50%,-50%) translate(-30%,-3%) rotate(-8deg)}
.fan .card:nth-of-type(3){transform:translate(-50%,-50%) translate(0,-8%) rotate(0deg);z-index:3}
.fan .card:nth-of-type(4){transform:translate(-50%,-50%) translate(30%,-3%) rotate(8deg);z-index:2}
.fan .card:nth-of-type(5){transform:translate(-50%,-50%) translate(62%,6%) rotate(16deg);z-index:1}
.fan:hover .card:nth-child(1){transform:translate(-50%,-50%) translate(-95%,10%) rotate(-20deg)}
.fan:hover .card:nth-child(2){transform:translate(-50%,-50%) translate(-48%,-4%) rotate(-10deg)}
.fan:hover .card:nth-child(3){transform:translate(-50%,-50%) translate(0,-14%) rotate(0deg) scale(1.04)}
.fan:hover .card:nth-child(4){transform:translate(-50%,-50%) translate(48%,-4%) rotate(10deg)}
.fan:hover .card:nth-child(5){transform:translate(-50%,-50%) translate(95%,10%) rotate(20deg)}
@media (prefers-reduced-motion:no-preference){.fan .card{animation:deal .9s var(--spring) both}.fan .card:nth-of-type(2){animation-delay:.08s}.fan .card:nth-of-type(3){animation-delay:.16s}.fan .card:nth-of-type(4){animation-delay:.24s}.fan .card:nth-of-type(5){animation-delay:.32s}
  @keyframes deal{from{opacity:0;translate:0 120px;rotate:0deg}}}
.badge{position:absolute;z-index:6;right:2%;top:-2%;width:clamp(110px,12vw,150px);aspect-ratio:1;border-radius:50%;background:var(--blue);color:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);display:grid;place-items:center}
.badge svg.ring{position:absolute;inset:6%;width:88%;height:88%;animation:spin 18s linear infinite}
.badge svg.ring text{font:500 8.6px var(--sans);fill:#fff}
.badge .bm{width:44%;color:#fff}
.badge .bm svg{width:100%;height:auto;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:980px){.fan{height:460px;margin-top:10px}}
@media (max-width:560px){.fan{height:540px;min-height:0;zoom:.62;margin:30px -12% 0}.deck .card{aspect-ratio:4/5}.fan .card{width:270px}.pill{font-size:13px}}

/* ---------- marquee ---------- */
.band{background:var(--blue);color:#fff;border-block:2px solid var(--line);overflow:hidden;transform:rotate(-1.4deg);margin:0 -2vw}
.band-in{display:flex;width:max-content;animation:slide 40s linear infinite}
.band span{display:inline-flex;align-items:center;gap:28px;padding:18px 28px 18px 0;font:400 clamp(24px,3vw,38px)/1 var(--serif);white-space:nowrap}
.band span::after{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
section{position:relative}
.sec{padding:clamp(80px,10vw,140px) 0 0}
.shead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:40px}
.shead h2{font:400 clamp(2.6rem,6vw,5.6rem)/.92 var(--serif);letter-spacing:-.03em;margin:0;max-width:11em}
.shead p{margin:0;max-width:30em;color:var(--muted)}
.tagline{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--blue);margin-bottom:14px}
[data-theme="dark"] .tagline{color:var(--blue-t2)}
.tagline i{width:18px;height:18px;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}
.stat{border:2px solid var(--line);border-radius:20px;background:var(--paper);padding:22px;box-shadow:6px 6px 0 var(--line);transition:transform .2s}
.stat:hover{transform:translate(-3px,-3px) rotate(-1deg)}
.stat .ic{width:46px;height:46px;border-radius:12px;background:var(--blue);display:grid;place-items:center;border:2px solid var(--line)}
.stat .ic svg{width:24px;height:24px;color:#fff}
.stat b{display:block;font:400 clamp(3rem,5vw,4.6rem)/1 var(--serif);letter-spacing:-.03em;margin-top:18px}
.stat span{display:block;font-weight:500;margin-top:6px}
.stat em{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:4px}
.meter{display:flex;gap:4px;margin-top:16px}
.meter i{flex:1;height:10px;border-radius:3px;background:var(--soft);border:1.5px solid var(--line)}
.meter i.on{background:var(--blue);border-color:var(--blue)}

/* ---------- collection (portfolio) ---------- */
.bar{position:sticky;top:74px;z-index:30;padding:12px 0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar .wrap{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.chips{display:flex;gap:8px;flex:1 1 560px;overflow-x:auto;scrollbar-width:none;padding:3px 6px 6px 3px}
.chips::-webkit-scrollbar{display:none}
@media (min-width:1200px){.chips{flex-wrap:wrap;overflow:visible}}
.chip{flex:none;height:40px;padding:0 15px;border-radius:12px;border:2px solid var(--line);background:var(--paper);font-weight:500;font-size:14px;cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .12s,box-shadow .12s}
.chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.chip[aria-pressed="true"]{background:var(--blue);color:#fff}
.chip sup{font-size:11px;margin-left:4px;opacity:.7}
.find{display:flex;gap:10px;align-items:center;flex:none}
.find input{height:40px;width:220px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink);padding:0 14px;font:500 14px var(--sans);box-shadow:3px 3px 0 var(--line)}
.find input:focus{outline:none;box-shadow:3px 3px 0 var(--blue)}
.count{font-weight:500;font-size:14px;white-space:nowrap}
.count b{color:var(--blue)}
[data-theme="dark"] .count b{color:var(--blue-t2)}
@media (max-width:640px){.find{flex:1 1 100%}.find input{flex:1;width:auto;min-width:0}}

.deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(22px,2.6vw,36px);margin-top:28px;perspective:1600px}
.hint{margin-top:18px;font-size:14px;color:var(--muted)}

/* the collectible card */
.card{position:relative;aspect-ratio:5/7;cursor:pointer;transform-style:preserve-3d;transition:transform .25s var(--ease)}
.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--spring)}
.card.flipped .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:20px;border:2px solid var(--line);background:var(--paper);box-shadow:6px 6px 0 var(--shadow);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}
.face.back{transform:rotateY(180deg);background:var(--blue);color:#fff;padding:20px}
.ctop{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:12.5px;font-weight:500}
.ctop .no{font:400 15px var(--serif)}
.ctop .cls{border:1.5px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65%}
.thumb{position:relative;margin:0 12px;border:2px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:16/12;container-type:size;background:var(--soft)}
.thumb .page{position:absolute;left:0;top:0;width:100%;transition:transform 1s var(--ease)}
.thumb .shot{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .5s}
.thumb .shot.ok{opacity:1}
.card:hover .thumb .page{transform:translateY(calc(-100% + 100cqh));transition:transform 6s cubic-bezier(.45,0,.3,1)}
.thumb .dots{position:absolute;z-index:2;top:6px;left:8px;display:flex;gap:4px}
.thumb .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.35)}
.cbody{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;min-height:0}
.cbody h3{font:400 clamp(21px,1.8vw,25px)/1.05 var(--serif);letter-spacing:-.02em;margin:0}
.cbody .loc{font-size:12.5px;color:var(--muted);margin-top:3px}
.abil{margin-top:auto;display:flex;flex-wrap:wrap;gap:5px;max-height:24px;overflow:hidden}
.abil span{font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:6px;background:var(--blue-t);color:var(--blue)}
[data-theme="dark"] .abil span{background:#1b1b44;color:#C9C9FF}
.abil span:first-child{background:var(--blue);color:#fff}
.cfoot{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--line);padding:9px 14px;font-size:12px;font-weight:500}
.cfoot .flip{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.rar{display:flex;gap:3px}.rar i{width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--line);background:var(--paper)}.rar i.on{background:var(--blue);border-color:var(--blue)}
.glare{position:absolute;inset:0;border-radius:20px;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light;z-index:5}
.card:hover .glare{opacity:1}
/* back */
.back .bt{display:flex;justify-content:space-between;font-size:12.5px;font-weight:500;opacity:.85}
.back h3{font:400 28px/1 var(--serif);letter-spacing:-.02em;margin:14px 0 0}
.back p{font-size:14.5px;line-height:1.5;margin:12px 0 0;opacity:.92}
.back dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;font-size:13px}
.back dt{opacity:.7}.back dd{margin:0;font-weight:500}
.back .tl{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.back .tl span{font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.16)}
.back .go{margin-top:auto;display:flex;gap:8px}
.back .go a{flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:12px;background:#fff;color:#000;font-weight:500;font-size:14px;border:2px solid #000;box-shadow:3px 3px 0 #000}
.back .go a.o{background:transparent;color:#fff;border-color:#fff;box-shadow:3px 3px 0 #000}
.back .bm{position:absolute;right:-30%;bottom:-18%;width:90%;opacity:.12;pointer-events:none}
.back .bm svg{width:100%;height:auto;display:block}
.empty{padding:60px 0;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.card .inner{transition:none}.card:hover .thumb .page{transform:none}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;border:2px solid var(--line);border-radius:20px;background:var(--paper);padding:22px;box-shadow:6px 6px 0 var(--line);position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--blue);color:#fff;border:2px solid var(--line);font:400 28px/1 var(--serif)}
.steps li:not(:last-child)::after{content:"";position:absolute;top:47px;right:-20px;width:22px;height:2px;background:var(--line)}
@media (max-width:900px){.steps li::after{display:none}}
.steps h3{font:400 26px/1.1 var(--serif);margin:18px 0 6px}
.steps p{margin:0;color:var(--muted);font-size:15.5px}
.steps em{display:inline-block;margin-top:14px;font-style:normal;font-size:12.5px;font-weight:500;border:1.5px solid var(--line);border-radius:999px;padding:2px 10px}

/* ---------- contact ---------- */
.boss{margin:clamp(80px,10vw,140px) 0 0;background:var(--blue);color:#fff;border-block:2px solid var(--line);overflow:hidden;position:relative}
.boss .wrap{position:relative;z-index:1;padding-top:clamp(70px,9vw,120px);padding-bottom:40px}
.boss .big{position:absolute;right:-12vw;top:50%;transform:translateY(-50%);width:min(64vw,900px);color:#fff;opacity:.1;pointer-events:none}
.boss .big svg{width:100%;height:auto;display:block}
.boss .tagline{color:#fff}
.boss h2{font:400 clamp(3rem,8vw,8rem)/.9 var(--serif);letter-spacing:-.03em;margin:0;max-width:9em}
.boss p.lede{color:rgba(255,255,255,.85)}
.mail{display:inline-block;margin-top:40px;font:400 clamp(1.7rem,4.4vw,4rem)/1.1 var(--serif);border-bottom:3px solid rgba(255,255,255,.5);word-break:break-word}
.mail:hover{border-color:#fff}
.boss .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.boss .btn{border-color:#000;box-shadow:4px 4px 0 #000}
.boss .btn.white{background:#fff;color:#000}
.boss .btn.dark{background:#000;color:#fff}
.boss .btn.wa svg{color:#1FA855}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;margin-top:clamp(70px,9vw,110px);padding:22px 0 calc(26px + env(safe-area-inset-bottom,0px));border-top:2px solid rgba(255,255,255,.35);font-size:14px}
footer .logo{width:130px;color:#fff}

/* =====================================================================
   MOTION LAYER v2
   loader + voxel shatter entrance, reveals, parallax, 3D service icons,
   power-up dialog, quest dock, memory mini-game, hover + micro-interactions
   ===================================================================== */

/* ---------- loader: extruded 3D Voxiyo mark + flipping progress pips ---------- */
.vx-loader{position:fixed;inset:0;z-index:200;display:none;place-items:center;background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;
  color:var(--ink);overflow:hidden;cursor:pointer}
html.vx-load .vx-loader{display:grid}
html.vx-load{overflow:hidden}
.ld{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(470px,88vw);text-align:center}
.vox{position:relative;width:min(190px,46vw);aspect-ratio:1050/690;perspective:800px;margin-bottom:40px;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.vox.grab{cursor:grabbing}
.vox::after{content:"";position:absolute;left:18%;right:18%;bottom:-34px;height:14px;border-radius:50%;background:var(--blue);filter:blur(7px);transform:scaleX(var(--sh,1));opacity:calc(.06 + .16 * var(--sh,1))}
.rot{position:absolute;inset:0;transform-style:preserve-3d}
.lay{position:absolute;inset:0}
.lay svg{display:block;width:100%;height:100%}
.ld-t{font:400 clamp(34px,6.4vw,50px)/1.02 var(--serif);letter-spacing:-.025em;margin:0}
.ld-t .lw{display:inline-block;white-space:nowrap;perspective:400px}
.ld-t .lc{display:inline-block;animation:lcIn .75s var(--spring) both;animation-delay:calc(var(--i) * 32ms + .15s)}
@keyframes lcIn{from{opacity:0;transform:translateY(.55em) rotateX(-100deg)}}
.vx-loader.ready .ld-t .lc{animation:lcWave .8s var(--spring) both;animation-delay:calc(var(--i) * 24ms)}
@keyframes lcWave{40%{transform:translateY(-.22em) rotate(-4deg)}}
/* the brand tagline lights up phrase by phrase as loading progresses */
.ld-tag{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:16px 0 0;font:400 clamp(18px,2.6vw,23px)/1.2 var(--serif)}
.ld-tag .lp{position:relative;isolation:isolate;padding:2px 9px 4px;color:var(--muted);transition:color .35s .1s}
.ld-tag .lp::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;background:var(--blue);transform:scaleX(0) rotate(-2deg);transform-origin:0 50%;transition:transform .55s var(--ease)}
.ld-tag .lp.on{color:#fff}
.ld-tag .lp.on::before{transform:scaleX(1) rotate(-2deg)}
.ld-bar{display:flex;gap:5px;width:100%;margin-top:22px;padding:6px;border:2px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:5px 5px 0 var(--shadow)}
.ld-bar span{flex:1;height:16px;border-radius:4px;background:var(--soft)}
.ld-bar span.on{background:var(--blue);animation:pipflip .45s var(--spring) both}
.ld-bar span.now{background:repeating-linear-gradient(-45deg,var(--blue) 0 5px,var(--blue-t2) 5px 10px);background-size:200% 100%;animation:march 1s linear infinite}
@keyframes pipflip{from{transform:perspective(80px) rotateX(-110deg)}}
.ld-row{display:flex;justify-content:space-between;width:100%;margin-top:12px;font-weight:500;font-size:14px;color:var(--muted)}
.ld-row b{color:var(--ink);font-variant-numeric:tabular-nums}
.ld-tip{margin:24px 0 0;font-size:14px;color:var(--muted)}
.ld-bar span{--k:0}
.vx-loader.ready .ld-bar span{animation:pipWave .6s var(--spring) both;animation-delay:calc(var(--k) * 45ms)}
@keyframes pipWave{40%{transform:translateY(-7px) scaleY(1.3)}}
/* enter button with an auto-start countdown ring */
.ld-go{display:inline-flex;align-items:center;gap:12px;height:56px;margin-top:22px;padding:0 24px 0 14px;border-radius:14px;border:2px solid var(--line);background:var(--blue);color:#fff;
  font:500 16px var(--sans);cursor:pointer;box-shadow:4px 4px 0 var(--line);animation:goIn .6s var(--spring) both;transition:transform .15s,box-shadow .15s}
.ld-go:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.ld-go:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.ld-go .rg{width:28px;height:28px;transform:rotate(-90deg)}
.ld-go .rg circle{fill:none;stroke-width:3.5}
.ld-go .rg .bg{stroke:rgba(255,255,255,.3)}
.ld-go .rg .fg{stroke:#fff;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;animation:ringFill var(--auto,2.4s) linear forwards}
@keyframes goIn{from{opacity:0;transform:scale(.6) translateY(12px)}}
@keyframes ringFill{to{stroke-dashoffset:0}}
.vx-wave{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.vx-loader.out .ld{animation:vxfade .4s var(--ease) forwards}
@keyframes vxfade{to{opacity:0;transform:translateY(-26px) scale(.94)}}
/* exit: the screen fills with voxels, then they shatter toward you and fall away */
.vx-tiles{position:absolute;inset:0;z-index:2;perspective:1000px;transform-style:preserve-3d;pointer-events:none}
.vt{position:absolute;width:calc(var(--s) + 1px);height:calc(var(--s) + 1px);background:var(--blue);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:0}
.vt.lt{background:#1C1CFF}.vt.dk{background:#0000D2}
.vx-mk{position:absolute;left:50%;top:50%;z-index:3;width:min(130px,28vw);translate:-50% -50%;color:#fff;opacity:0;pointer-events:none}
.vx-mk svg{display:block;width:100%;height:auto}
.vx-loader.clear{background:transparent;pointer-events:none}

/* hero pieces wait under the loader; the fan deal + highlight swipe hold until hand-off */
.vx-wait .hero .pill,.vx-wait .hero .lede,.vx-wait .hud,.vx-wait .hero .cta .btn,.vx-wait .badge,.vx-wait .floaters .fl,.vx-wait .hero h1 .ch{opacity:0}
.vx-hold .fan .card,.vx-hold .hero h1 .hl::before{animation-play-state:paused}
/* failsafe: if scripts stop, show everything */
.vx-fail .rv{opacity:1!important}.vx-fail .vxm-hide{color:inherit!important}

/* ---------- entrance reveals ---------- */
.rv{opacity:0}
.hero .wrap{position:relative;z-index:1}
/* the hero fan bleeds past the screen edge on phones; clip it so mobile browsers do not zoom the page out */
main{overflow-x:clip}
.hero h1 .hl::before{bottom:-.17em} /* keeps the white descender of "g" inside the highlight */
.hero h1 .wd{display:inline-block;white-space:nowrap;perspective:420px}
.hero h1 .ch{display:inline-block;transform-origin:50% 100%;cursor:pointer}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(520px circle at var(--hx,50%) var(--hy,40%),color-mix(in srgb,var(--blue) 10%,transparent),transparent 65%)}
.hero:hover::before{opacity:1}
/* headings materialise out of voxels (canvas drawn by script) */
.vxm-host{position:relative}
.vxm-hide{color:transparent!important}
.vxm{position:absolute;left:0;top:0;pointer-events:none;z-index:2}

/* ---------- parallax floaters (stars, ring, spinning 3D voxel cubes) ---------- */
.floaters{position:absolute;inset:0;pointer-events:none;z-index:0}
.fl{position:absolute;display:block;perspective:500px}
.fl.f1{top:5%;left:47%}.fl.f2{bottom:7%;left:2%}.fl.f3{top:4%;left:30%}.fl.f4{bottom:6%;right:7%}.fl.f5{bottom:4%;left:51%}
.fl .star{display:block;width:34px;height:34px;background:var(--blue);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
[data-theme="dark"] .fl .star{background:var(--blue-2)}
.fl .star.sm{width:20px;height:20px}
.fl .ringo{display:block;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);box-shadow:3px 3px 0 var(--blue)}
.cube{position:relative;display:block;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(38deg)}
.cube b{position:absolute;inset:0;border:2px solid var(--line);background:var(--paper)}
.cube b:nth-child(1){transform:translateZ(calc(var(--s) / 2));background:var(--blue)}
.cube b:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s) / 2));background:var(--blue)}
.cube b:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.cube b:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.cube b:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s) / 2));background:var(--blue-t2)}
.cube b:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s) / 2));background:var(--blue-t2)}
@media (prefers-reduced-motion:no-preference){
  .fl .star{animation:bob 6s ease-in-out infinite}.fl .star.sm{animation-duration:4.6s;animation-delay:-2s}
  .fl .ringo{animation:bob 7.5s ease-in-out infinite reverse}
  .cube{animation:cubespin 11s linear infinite}.f4 .cube{animation-duration:8s;animation-direction:reverse}
}
@keyframes bob{50%{transform:translateY(-14px) rotate(28deg)}}
@keyframes cubespin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(336deg) rotateY(720deg)}}
@media (max-width:980px){.fl.f1,.fl.f5,.fl.f4{display:none}.fl.f3{left:auto;right:6%}}
@media (max-width:560px){.fl.f3{display:none}}

/* contact section: the big background mark is an extruded 3D voxel that turns as you scroll */
.boss .big.v3d{aspect-ratio:1050/690;perspective:1800px;opacity:.14}
/* marquee leans with scroll speed, pauses on hover */
.band span{transform:skewX(var(--sk,0deg))}
.band:hover .band-in{animation-play-state:paused}

/* ---------- original 3D service icons (extruded layers) ---------- */
.ico3d{position:relative;display:block;width:var(--isz,100px);aspect-ratio:1;flex:none;perspective:620px;
  --ic-face:var(--blue);--ic-edge:#000094;--ic-det:#fff;--ic-det2:#A9A9FF;--dur:6s}
.ico3d::after{content:"";position:absolute;left:22%;right:22%;bottom:-12%;height:8%;border-radius:50%;background:var(--blue);opacity:.18;filter:blur(5px);animation:icoShadow var(--dur) ease-in-out infinite;animation-delay:var(--dly,0s)}
.ico3d .flt,.ico3d .spn,.ico3d .ir{position:absolute;inset:0;transform-style:preserve-3d}
.ico3d .flt{animation:icoFloat var(--dur) ease-in-out infinite;animation-delay:var(--dly,0s)}
.ico3d .ir{transition:transform .6s var(--spring)}
.ico3d.zz .flt,.ico3d.zz::after{animation-play-state:paused}
.il{position:absolute;inset:0;color:var(--ic-edge)}
.il.f{color:var(--ic-face)}
.il svg{display:block;width:100%;height:100%;overflow:visible}
.dt .w{fill:var(--ic-det)}.dt .l{fill:var(--ic-det2)}
.dt .ws{fill:none;stroke:var(--ic-det);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.dt .ws.thin{stroke-width:3.5}
.dt .ring{stroke:var(--ic-det)}
.dt *{transform-box:fill-box;transform-origin:50% 50%}
@keyframes icoFloat{0%,100%{transform:translateY(0) rotateY(-24deg) rotateX(10deg)}50%{transform:translateY(-7%) rotateY(24deg) rotateX(-2deg)}}
@keyframes icoShadow{50%{transform:scaleX(.7);opacity:.07}}
/* each icon has its own little trick when it is active */
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="web"] .code{animation:codeBlink 1.1s steps(2) infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="hosting"] .led circle{animation:ledBlink .9s steps(2) infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="hosting"] .led circle:nth-child(2){animation-delay:.3s}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="hosting"] .led circle:nth-child(3){animation-delay:.6s}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="hosting"] .led2 circle{animation-duration:1.3s}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="mobile"] .apps rect{animation:appPop 1.6s var(--spring) infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="mobile"] .apps rect:nth-child(2){animation-delay:.15s}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="mobile"] .apps rect:nth-child(3){animation-delay:.3s}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="mobile"] .apps rect:nth-child(4){animation-delay:.45s}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="mobile"] .apps rect:nth-child(5){animation-delay:.6s}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="social"] .heart{animation:beat 1s ease-in-out infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="marketing"] .arrow .ws{stroke-dasharray:120;animation:draw 1.8s ease-in-out infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="content"] .play{animation:beat 1.1s ease-in-out infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="ai"] .spark{animation:twinkle 1.4s ease-in-out infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="ai"] .spark2{animation:twinkle 1.4s .5s ease-in-out infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="brand"] .slit{stroke-dasharray:30;animation:draw2 1.5s ease-in-out infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage,.mg-card.up) [data-ico="ecom"] .plus{animation:spinPlus 1.6s var(--spring) infinite}
:is(.pw:hover,.pw:focus-within,.pwd-stage) [data-ico="extra"] .spn{animation:gear 4s linear infinite}
@keyframes codeBlink{50%{opacity:.35}}
@keyframes ledBlink{50%{opacity:.2}}
@keyframes appPop{0%,40%,100%{transform:scale(1)}20%{transform:scale(.6)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
@keyframes draw{0%{stroke-dashoffset:120}60%,100%{stroke-dashoffset:0}}
@keyframes draw2{0%{stroke-dashoffset:30}60%,100%{stroke-dashoffset:0}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.55) rotate(45deg)}}
@keyframes spinPlus{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(180deg)}}
@keyframes gear{to{transform:rotateZ(360deg)}}

/* ---------- services: power-up tiles ---------- */
.pws{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.pws.more{grid-template-columns:repeat(4,1fr);margin-top:clamp(18px,2vw,28px)}
@media (max-width:980px){.pws,.pws.more{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pws,.pws.more{gap:14px}}
.pw{position:relative;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:6px 6px 0 var(--line);
  padding:18px 18px 16px;isolation:isolate;overflow:hidden;transition:transform .45s var(--ease),box-shadow .3s var(--ease);--mx:50%;--my:30%}
.pw::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--blue) 15%,transparent),transparent 58%);opacity:0;transition:opacity .35s}
.pw:hover::before,.pw:focus-within::before{opacity:1}
.pw:hover,.pw:focus-within{box-shadow:10px 10px 0 var(--blue)}
.pw-top{display:flex;align-items:center;min-height:26px}
.pw-flag{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;border-radius:999px;padding:3px 10px 3px 8px;font-size:12px;font-weight:500}
.pw-flag::before{content:"";width:11px;height:11px;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.pw .ico3d{--isz:clamp(84px,9vw,118px);margin:10px auto 26px}
.pws.more .ico3d{--isz:clamp(62px,6vw,82px);margin:6px auto 20px}
.pw h3{font:400 clamp(22px,2vw,28px)/1.05 var(--serif);letter-spacing:-.02em;margin:0}
.pws.more h3{font-size:clamp(19px,1.6vw,22px)}
.pw-open{all:unset;cursor:pointer}
.pw-open::after{content:"";position:absolute;inset:0;z-index:1}
.pw-open:focus-visible::after{outline:3px solid var(--blue);outline-offset:-6px;border-radius:20px}
.pw p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.pw-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:16px}
.pw-n{font-size:13px;font-weight:500;color:var(--muted)}
.pw-n b{color:var(--ink);font-weight:500}
.pw-add{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px 0 9px;border-radius:12px;border:2px solid var(--line);
  background:var(--paper);color:var(--ink);font:500 13.5px var(--sans);cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .15s,box-shadow .15s,background .2s,color .2s}
.pw-add:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.pw-add:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.pw-add svg{width:18px;height:18px;transition:transform .5s var(--spring)}
.pw-add[aria-pressed="true"]{background:var(--blue);color:#fff}
.pw-add[aria-pressed="true"] svg{transform:rotate(360deg)}
@media (max-width:520px){.pw{padding:14px 12px 12px;border-radius:20px}.pw p{font-size:13.5px}.pw-n{font-size:12px}.pw-add .al{display:none}.pw-add{padding:0 8px}}

/* ---------- power-up dialog ---------- */
.pwd{padding:0;border:0;background:transparent;color:var(--ink);width:min(1060px,94vw);max-width:none;max-height:none;overflow:visible}
.pwd::backdrop{background:color-mix(in srgb,var(--bg) 84%,transparent)}
@media (hover:hover) and (pointer:fine){.pwd::backdrop{background:color-mix(in srgb,var(--bg) 66%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
/* while the dialog is open, everything behind it holds still (keeps the blur cheap) */
.dlg-open main .ico3d .flt,.dlg-open main .ico3d::after,.dlg-open .floaters *,.dlg-open .band-in,.dlg-open .badge svg.ring{animation-play-state:paused!important}
.pwd[open]::backdrop{animation:bdIn .4s ease both}
@keyframes bdIn{from{opacity:0}}
.pwd-in{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr);max-height:min(88vh,780px);border:2px solid var(--line);border-radius:26px;
  background:var(--paper);box-shadow:10px 10px 0 var(--shadow);overflow:hidden}
.pwd-stage{position:relative;display:grid;place-items:center;min-height:340px;background-color:var(--blue);color:#fff;cursor:grab;touch-action:none;overflow:hidden;outline:none;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:32px 32px}
.pwd-stage:focus-visible{box-shadow:inset 0 0 0 4px #fff}
.pwd-stage.grab{cursor:grabbing}
#pwdIco{width:min(250px,58%);aspect-ratio:1}
.pwd-stage .ico3d{--isz:100%;--ic-face:#fff;--ic-edge:#B4B4FF;--ic-det:var(--blue);--ic-det2:#5C5CFF}
.pwd-stage .ico3d::after{background:#000;opacity:.3}
.pwd-hint{position:absolute;left:0;right:0;top:18px;text-align:center;font-size:13px;font-weight:500;opacity:.8}
.pwd-nav{position:absolute;left:18px;right:18px;bottom:18px;display:flex;justify-content:space-between;align-items:center;font:400 19px var(--serif)}
.pwd-nav button{width:46px;height:46px;border-radius:14px;border:2px solid #000;background:#fff;color:#000;display:grid;place-items:center;cursor:pointer;box-shadow:3px 3px 0 #000;transition:transform .15s,box-shadow .15s}
.pwd-nav button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000}
.pwd-nav button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.pwd-nav svg{width:20px;height:20px}
.pwd-body{padding:clamp(22px,3vw,38px);overflow:auto;overscroll-behavior:contain}
.pwd-x{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .35s var(--spring)}
.pwd-x:hover{transform:rotate(90deg)}
.pwd-x svg{width:18px;height:18px}
.pwd h3{font:400 clamp(30px,3.4vw,46px)/1 var(--serif);letter-spacing:-.025em;margin:12px 52px 0 0}
.pwd-head{font:400 clamp(19px,1.7vw,23px)/1.25 var(--serif);margin:14px 0 0;color:var(--blue)}
[data-theme="dark"] .pwd-head{color:var(--blue-t2)}
.pwd-p{margin:10px 0 0;color:var(--muted);font-size:15.5px;max-width:52ch}
.pwd-g h4{font:500 13px var(--sans);color:var(--muted);margin:22px 0 10px}
.pwd-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.pwd-g .pwd-list{margin-top:0}
.pwd-list li{position:relative;padding-left:20px;font-size:14.5px;font-weight:500;line-height:1.35}
.pwd-list li::before{content:"";position:absolute;left:0;top:.3em;width:10px;height:10px;border-radius:2px;background:var(--blue);box-shadow:2px 2px 0 var(--line)}
.pwd-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:22px}
.pwd-flow span{font-size:12.5px;font-weight:500;border:1.5px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--paper)}
.pwd-flow i{width:12px;height:2px;background:var(--line)}
.pwd-goal{margin:20px 0 0;font:400 19px/1.3 var(--serif)}
.pwd-goal b{font:500 12px var(--sans);background:var(--blue);color:#fff;border-radius:6px;padding:3px 8px;margin-right:8px;vertical-align:3px}
.pwd-tech{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.pwd-tech span{font-size:12px;font-weight:500;padding:4px 9px;border-radius:7px;background:var(--blue-t);color:var(--blue)}
[data-theme="dark"] .pwd-tech span{background:#1b1b44;color:#C9C9FF}
.pwd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pwd-cta .btn[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.pwd-cta .btn svg{width:18px;height:18px}
@media (max-width:760px){
  .pwd{width:100vw;margin:auto 0 0;max-height:94vh}
  .pwd-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:94vh;border-radius:24px 24px 0 0;box-shadow:none;border-bottom:0}
  .pwd-stage{min-height:250px}#pwdIco{width:140px}
  .pwd-body{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .pwd-list{grid-template-columns:1fr}
}

/* ---------- quest dock ---------- */
.qd{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;
  border:2px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:5px 5px 0 var(--blue);translate:-50% 0;max-width:calc(100vw - 24px);
  transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden;transition:transform .55s var(--spring),opacity .3s,visibility 0s .55s}
.qd.on{transform:none;opacity:1;visibility:visible;transition:transform .55s var(--spring),opacity .3s,visibility 0s}
.qd-ic{display:flex;align-items:center}
.qd-ic span{width:36px;height:36px;margin-left:-10px;display:grid;place-items:center;border:2px solid var(--line);border-radius:10px;background:var(--blue);box-shadow:2px 2px 0 var(--line)}
.qd-ic span:first-child{margin-left:0}
.qd-ic svg{width:24px;height:24px;color:#fff;--ic-det:var(--blue);--ic-det2:#7C7CFF}
.qd-ic svg .w{fill:var(--blue)}.qd-ic svg .l{fill:#7C7CFF}.qd-ic svg .ws,.qd-ic svg .ring{stroke:var(--blue)}
.qd-t{font-size:14px;font-weight:500;white-space:nowrap}
.qd-t b{font:400 22px/1 var(--serif);margin-right:4px}
.qd .btn{height:44px;padding:0 16px;font-size:14px;box-shadow:3px 3px 0 var(--line)}
.qd-x{width:38px;height:38px;flex:none;border-radius:11px;border:2px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--spring)}
.qd-x:hover{transform:rotate(90deg)}
.qd-x svg{width:16px;height:16px}
@media (max-width:620px){.qd{left:12px;right:12px;translate:none;justify-content:space-between;gap:8px}.qd-t .tx{display:none}.qd .btn{padding:0 12px}}
html.has-quest .boss footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.fly{position:fixed;left:0;top:0;z-index:165;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none;color:var(--blue);filter:drop-shadow(3px 3px 0 rgba(0,0,0,.85))}
.fly svg{display:block;width:100%;height:100%}

/* ---------- mini-game: match the power-ups ---------- */
.mg-hud{display:grid;grid-template-columns:repeat(4,1fr) auto;border:2px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:6px 6px 0 var(--line);overflow:hidden;margin-bottom:clamp(20px,2.4vw,30px)}
.mg-hud .c{padding:12px 18px;border-right:2px solid var(--line);min-width:0}
.mg-hud .c small{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}
.mg-hud .c b{display:block;font:400 clamp(26px,3vw,38px)/1.1 var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.mg-hud .rs{display:flex;align-items:center;padding:0 14px}
@media (max-width:700px){.mg-hud{grid-template-columns:repeat(4,1fr)}.mg-hud .c{padding:10px 10px}.mg-hud .c:nth-child(4){border-right:0}.mg-hud .rs{grid-column:1/-1;border-top:2px solid var(--line);padding:10px}.mg-hud .rs .btn{width:100%;justify-content:center}}
.mg-stage{position:relative}
.mg-board{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,22px);perspective:1400px}
@media (max-width:1100px){.mg-board{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.mg-board{grid-template-columns:repeat(3,1fr);gap:10px}}
.mg-card{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
.mg-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s var(--spring)}
.mg-card.up .mg-in{transform:rotateY(180deg)}
.mg-card:not(.up):hover .mg-in{transform:translateY(-6px) rotateY(-10deg)}
.mg-f{position:absolute;inset:0;border-radius:18px;border:2px solid var(--line);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;display:grid;place-items:center}
.mg-back{background-color:var(--blue);color:#fff;box-shadow:5px 5px 0 var(--line);
  background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:14px 14px}
.mg-back::after{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(255,255,255,.4);border-radius:12px}
.mg-back .bm{width:46%;color:#fff}.mg-back .bm svg{display:block;width:100%;height:auto}
.mg-front{transform:rotateY(180deg);background:var(--paper);box-shadow:5px 5px 0 var(--shadow);grid-template-rows:1fr auto;padding:10% 8% 11%}
.mg-front .ico3d{--isz:min(100%,98px);align-self:center}
.mg-front .lbl{font:500 clamp(11px,1vw,13.5px)/1.2 var(--sans);text-align:center}
.mg-card.done .mg-front{border-color:var(--blue);box-shadow:5px 5px 0 var(--blue)}
.mg-card.done .mg-front::after{content:"";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.mg-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:18px}
.mg-card:not(.up) .flt,.mg-card:not(.up) .ico3d::after{animation-play-state:paused}
.mg-win{position:absolute;inset:-8px;z-index:5;display:grid;place-items:center;padding:16px;border-radius:24px;background:color-mix(in srgb,var(--bg) 58%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mg-win[hidden]{display:none}
.mg-win-in{width:min(520px,100%);border:2px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:10px 10px 0 var(--blue);padding:clamp(22px,3vw,32px);text-align:center}
.mg-rank{width:96px;height:96px;margin:0 auto;display:grid;place-items:center;border:2px solid var(--line);border-radius:22px;background:var(--blue);color:#fff;font:400 62px/1 var(--serif);box-shadow:5px 5px 0 var(--line);rotate:-6deg}
.mg-win h3{font:400 clamp(34px,4vw,50px)/1 var(--serif);letter-spacing:-.02em;margin:20px 0 0}
.mg-win p{color:var(--muted);margin:10px 0 0}
.mg-win .xp{display:inline-block;margin-top:14px;font:400 22px var(--serif);border:2px solid var(--line);border-radius:12px;padding:4px 14px;box-shadow:3px 3px 0 var(--line)}
.mg-win .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.cft{position:fixed;inset:0;z-index:170;pointer-events:none;width:100%;height:100%}

/* process: five stages from the company profile */
.steps{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){.steps{grid-template-columns:repeat(3,1fr)}.steps li::after{display:none}}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
/* nav */
.nav a.t.pl{display:inline-flex;align-items:center;gap:7px}
.nav a.t.pl svg{width:20px;height:20px;color:var(--blue);transition:transform .5s var(--spring)}
[data-theme="dark"] .nav a.t.pl svg{color:var(--blue-t2)}
.nav a.t.pl:hover svg{transform:rotate(-14deg) scale(1.15)}
@media (max-width:1000px){.nav a.t.hide-md{display:none}}

/* ---------- hover effects ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s,box-shadow .15s,background .2s,translate .45s var(--spring)}
.btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--blue) 22%,transparent),transparent);transform:translateX(-170%) skewX(-18deg)}
.btn.blue::after,.btn.dark::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent)}
.btn:hover::after{transform:translateX(330%) skewX(-18deg);transition:transform .8s var(--ease)}
.btn svg{transition:transform .45s var(--spring)}
.btn:hover svg{transform:rotate(-14deg) scale(1.18)}
.mode{transition:translate .45s var(--spring)}
.nav a.t{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .35s var(--ease),color .2s}
.nav a.t:hover{background-size:100% 2px}
.logo svg path:first-child{transform-box:fill-box;transform-origin:50% 50%}
.logo:hover svg path:first-child{animation:wig .7s var(--spring)}
@keyframes wig{30%{transform:rotate(-14deg) scale(1.08)}60%{transform:rotate(9deg)}}
.pill:hover b{animation:wig .6s var(--spring)}
.cell{transition:background .25s}
.cell:hover{background:color-mix(in srgb,var(--blue) 9%,transparent)}
.stat .ic{transition:transform .7s var(--spring)}
.stat:hover .ic{transform:perspective(200px) rotateY(360deg)}
.stat:hover .meter i.on{animation:mpop .5s var(--spring) calc(var(--k,0) * 45ms) both}
@keyframes mpop{from{transform:scaleY(.15)}}
.face{transition:box-shadow .3s var(--ease)}
.deck .card:hover .face.front{box-shadow:11px 11px 0 var(--shadow)}
.chip:active{transform:translate(2px,2px) scale(.95);box-shadow:1px 1px 0 var(--line)}
.count b{display:inline-block}
.steps li{transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.steps li:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--blue)}
.steps li::before{transition:transform .5s var(--spring)}
.steps li:hover::before{transform:rotate(-10deg) scale(1.1)}
.mail{position:relative}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:#fff;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--ease)}
.mail:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- micro-interactions ---------- */
.xpbar{position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
[data-theme="dark"] .xpbar{background:var(--blue-2)}
.spk{position:fixed;z-index:160;width:12px;height:12px;pointer-events:none;background:var(--spk,var(--blue));-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
[data-theme="dark"] .spk{--spk:#7A7AFF}
.xpf{position:fixed;z-index:160;pointer-events:none;translate:-50% -50%;font:400 24px/1 var(--serif);color:#fff;background:var(--blue);border:2px solid #000;border-radius:10px;padding:7px 12px;box-shadow:3px 3px 0 #000;white-space:nowrap}
.cur{position:fixed;left:0;top:0;z-index:150;pointer-events:none;display:none;--c:var(--blue);transition:opacity .2s}
[data-theme="dark"] .cur{--c:#6E6EFF}
html.has-cur .cur{display:block}
html.dlg-open .cur{opacity:0!important}
.cur .dot,.cur .ring{position:absolute;left:0;top:0;border-radius:50%}
.cur .dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--c)}
.cur .ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid var(--c);display:grid;place-items:center;
  transition:width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring),background .25s,border-color .25s,scale .2s}
.cur .ring span{font:500 12px var(--sans);color:#fff;opacity:0;transition:opacity .2s;white-space:nowrap}
.cur.link .ring{width:54px;height:54px;margin:-27px 0 0 -27px;background:color-mix(in srgb,var(--c) 14%,transparent)}
.cur.big .ring{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--c)}
.cur.big .ring span{opacity:1}
.cur.big .dot,.cur.hide{opacity:0}
.cur.inv{--c:#fff}.cur.inv.big .ring span{color:var(--blue)}
.cur.down .ring{scale:.82}
html.vt *,html.vt *::before,html.vt *::after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

@media (prefers-reduced-motion:reduce){
  .vx-loader{display:none!important}
  .btn::after{display:none}
  .stat:hover .ic,.logo:hover svg path:first-child,.pill:hover b{transform:none;animation:none}
  .ico3d .flt,.ico3d::after,.dt *,.ico3d .spn{animation:none!important}
  .mg-in,.ico3d .ir{transition-duration:.01s}
}
.pwd-stage .ico3d .ir{transition:none}
.pw-add{transition:transform .15s,box-shadow .15s,background .2s,color .2s,translate .45s var(--spring)}
.pw-add .ck{display:none}.pw-add[aria-pressed="true"] .pl{display:none}.pw-add[aria-pressed="true"] .ck{display:block}
.pwd-cta .ck{display:none}.pwd-cta [aria-pressed="true"] .pl{display:none}.pwd-cta [aria-pressed="true"] .ck{display:block}

/* ---------- voxel page transitions between Voxiyo pages ---------- */
.vxt{position:fixed;inset:0;z-index:400;pointer-events:none;perspective:1000px;transform-style:preserve-3d}
html.vx-trans body::before{content:"";position:fixed;inset:0;z-index:399;background:var(--blue)}
.qa .ck{display:none}.qa[aria-pressed="true"] .pl{display:none}.qa[aria-pressed="true"] .ck{display:block}

/* =====================================================================
   SERVICE PAGES
   ===================================================================== */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 26px;padding:0;list-style:none;font-size:14px;font-weight:500;color:var(--muted)}
.crumb li{display:inline-flex;align-items:center;gap:8px}
.crumb li+li::before{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.55}
.crumb a:hover{color:var(--blue)}
[data-theme="dark"] .crumb a:hover{color:var(--blue-t2)}
.crumb [aria-current]{color:var(--ink)}

/* hero */
.sv-hero{position:relative;padding:clamp(26px,4vw,52px) 0 clamp(70px,8vw,110px)}
.sv-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(520px circle at var(--hx,70%) var(--hy,40%),color-mix(in srgb,var(--blue) 10%,transparent),transparent 65%)}
.sv-hero:hover::before{opacity:1}
.sv-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:980px){.sv-hero .wrap{grid-template-columns:1fr}}
.sv-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.sv-top .tagline{margin:0}
.sv-hero h1{font:400 clamp(3rem,6.4vw,6.2rem)/.94 var(--serif);letter-spacing:-.03em;margin:18px 0 0}
.sv-hero h1 .wd{display:inline-block;white-space:nowrap;perspective:420px}
.sv-hero h1 .ch{display:inline-block;transform-origin:50% 100%;cursor:pointer}
.sv-head{font:400 clamp(22px,2.3vw,30px)/1.2 var(--serif);color:var(--blue);margin:22px 0 0;max-width:22em}
[data-theme="dark"] .sv-head{color:var(--blue-t2)}
.sv-hero .lede{margin-top:14px}
.sv-hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn.qa[aria-pressed="true"]{background:var(--blue-t);color:var(--blue)}
[data-theme="dark"] .btn.qa[aria-pressed="true"]{background:#1b1b44;color:#C9C9FF}
.sv-tech{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:28px}
.sv-tech small{font-size:13px;font-weight:500;color:var(--muted);margin-right:6px}
.sv-tech span{font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:8px;background:var(--blue-t);color:var(--blue)}
[data-theme="dark"] .sv-tech span{background:#1b1b44;color:#C9C9FF}

/* the big drag-to-spin icon stage */
.stage{position:relative;width:100%;max-width:540px;aspect-ratio:1;justify-self:center;display:grid;place-items:center;border:2px solid var(--line);border-radius:30px;
  background-color:var(--blue);color:#fff;box-shadow:10px 10px 0 var(--line);overflow:hidden;cursor:grab;touch-action:pan-y;outline:none;user-select:none;-webkit-user-select:none;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:36px 36px}
.stage.grab{cursor:grabbing}
.stage:focus-visible{box-shadow:10px 10px 0 var(--line),inset 0 0 0 4px #fff}
.stage-ico{width:min(300px,56%);aspect-ratio:1;position:relative;z-index:2}
.stage-ico>svg{width:100%;height:100%;color:#fff}
.stage-ico>svg .w{fill:var(--blue)}.stage-ico>svg .l{fill:#5C5CFF}.stage-ico>svg .ws,.stage-ico>svg .ring{stroke:var(--blue)}
.stage .ico3d{--isz:100%;--ic-face:#fff;--ic-edge:#B4B4FF;--ic-det:var(--blue);--ic-det2:#5C5CFF}
.stage .ico3d .ir{transition:none}
.stage .ico3d::after{background:#000;opacity:.3}
.stage-hint{position:absolute;top:18px;left:0;right:0;z-index:3;text-align:center;font-size:13px;font-weight:500;opacity:.85}
.stage-meta{position:absolute;left:18px;right:18px;bottom:18px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.stage-meta b{display:block;font:400 clamp(34px,4vw,46px)/1 var(--serif)}
.stage-meta small{display:block;font-size:12.5px;font-weight:500;opacity:.85}
.stage-meta .lv{border:2px solid #000;background:#fff;color:#000;border-radius:12px;padding:7px 12px;font:400 18px/1 var(--serif);box-shadow:3px 3px 0 #000;white-space:nowrap}
.stage .sfl{position:absolute;z-index:1;display:block;perspective:400px;pointer-events:none}
.stage .sfl.a{top:16%;left:12%}.stage .sfl.b{top:22%;right:13%}.stage .sfl.c{bottom:24%;left:16%}.stage .sfl.d{bottom:30%;right:12%}
.stage .sfl .star{display:block;width:22px;height:22px;background:#fff;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;opacity:.9}
.stage .sfl .cube{--s:22px}
.stage .sfl .cube b{border-color:#000;background:#fff}
.stage .sfl .cube b:nth-child(1),.stage .sfl .cube b:nth-child(2){background:#C9C9FF}
@media (prefers-reduced-motion:no-preference){.stage .sfl .star{animation:bob 5s ease-in-out infinite}.stage .sfl.c .star{animation-delay:-2s}.stage .sfl .cube{animation:cubespin 9s linear infinite}}
@media (max-width:560px){.stage{border-radius:24px}.stage-meta b{font-size:30px}}

/* hero pieces wait for the entrance */
.vx-wait .crumb,.vx-wait .sv-top,.vx-wait .sv-hero h1,.vx-wait .sv-head,.vx-wait .sv-hero .lede,.vx-wait .sv-hero .cta .btn,.vx-wait .sv-tech,.vx-wait .stage{opacity:0}

/* marquee of what is inside */
.sv-band{margin-top:0}

/* what's included */
.its{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
@media (max-width:980px){.its{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.its{grid-template-columns:1fr}}
.it{position:relative;border:2px solid var(--line);border-radius:22px;background:var(--paper);padding:22px 22px 24px;box-shadow:6px 6px 0 var(--line);isolation:isolate;overflow:hidden;
  transition:transform .35s var(--spring),box-shadow .3s var(--ease);--mx:50%;--my:0%}
.it::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--blue) 13%,transparent),transparent 60%);opacity:0;transition:opacity .35s}
.it:hover::before{opacity:1}
.it:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--blue)}
.it::after{content:"";position:absolute;top:22px;right:22px;width:13px;height:13px;background:var(--blue-t2);border:2px solid var(--line);transform:rotate(45deg);transition:transform .6s var(--spring),background .3s}
.it:hover::after{transform:rotate(225deg) scale(1.25);background:var(--blue)}
.it-n{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 8px;border-radius:12px;background:var(--blue);color:#fff;border:2px solid var(--line);font:400 22px/1 var(--serif);transition:transform .5s var(--spring)}
.it:hover .it-n{transform:rotate(-8deg) scale(1.08)}
.it h3{font:400 clamp(21px,1.7vw,25px)/1.12 var(--serif);letter-spacing:-.015em;margin:18px 0 8px}
.it p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.grp-h{display:flex;align-items:center;gap:12px;margin:44px 0 18px;font:500 14px var(--sans);color:var(--muted)}
.grp-h:first-of-type{margin-top:0}
.grp-h::after{content:"";flex:1;height:2px;background:var(--line);opacity:.15}
.stmt{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(28px,3vw,40px);padding:clamp(24px,3vw,40px);border:2px solid var(--line);border-radius:24px;background:var(--blue);color:#fff;box-shadow:8px 8px 0 var(--line)}
.stmt b{font:500 13px var(--sans);background:#fff;color:var(--blue);border:2px solid #000;border-radius:8px;padding:4px 10px}
.stmt p{margin:0;font:400 clamp(26px,3.4vw,44px)/1.05 var(--serif);letter-spacing:-.02em}

/* how it flows */
.flow{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none;counter-reset:f}
.flow li{counter-increment:f;position:relative;flex:1 1 150px;border:2px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:5px 5px 0 var(--line);padding:16px 16px 18px;transition:transform .3s var(--spring)}
.flow li:hover{transform:translateY(-4px) rotate(-1deg)}
.flow li::before{content:counter(f,decimal-leading-zero);display:block;font:400 15px var(--serif);color:var(--blue)}
[data-theme="dark"] .flow li::before{color:var(--blue-t2)}
.flow li b{display:block;font:400 clamp(20px,1.8vw,24px)/1.1 var(--serif);margin-top:8px;font-weight:400}
.flow li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-20px;width:20px;height:2px;background:var(--line)}
.flow li:last-child{background:var(--blue);color:#fff}
.flow li:last-child::before{color:#fff}

/* where it fits: the digital ecosystem from the company profile */
.eco{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:0;padding:0;list-style:none}
@media (max-width:1100px){.eco{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.eco{grid-template-columns:1fr}}
.eco li{position:relative;display:flex;flex-direction:column;gap:8px;border:2px solid var(--line);border-radius:20px;background:var(--paper);padding:20px 18px;box-shadow:5px 5px 0 var(--line)}
.eco li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-20px;width:20px;height:2px;background:var(--line)}
@media (max-width:1100px){.eco li::after{display:none}}
.eco .st{font:400 15px var(--serif);color:var(--blue)}
[data-theme="dark"] .eco .st{color:var(--blue-t2)}
.eco h3{font:400 23px/1.08 var(--serif);margin:0 0 4px}
.eco a{font-size:14px;font-weight:500;color:var(--muted);width:fit-content}
.eco a:hover{color:var(--blue)}
.eco li.here{background:var(--blue);color:#fff;box-shadow:8px 8px 0 var(--line);transform:translateY(-8px)}
.eco li.here .st{color:#fff}
.eco li.here a{color:rgba(255,255,255,.82)}
.eco li.here a:hover{color:#fff}
.eco li.here a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:3px}
.eco .you{position:absolute;top:-15px;right:14px;background:#fff;color:#000;border:2px solid #000;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;box-shadow:2px 2px 0 #000}
@media (prefers-reduced-motion:no-preference){.eco .you{animation:youBob 1.8s ease-in-out infinite}}
@keyframes youBob{50%{transform:translateY(-4px)}}
.eco-note{margin:22px 0 0;color:var(--muted)}

/* why voxiyo */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why{grid-template-columns:1fr}}
.why article{border:2px solid var(--line);border-radius:20px;background:var(--paper);padding:22px;box-shadow:6px 6px 0 var(--line);transition:transform .3s var(--spring)}
.why article:hover{transform:translate(-3px,-3px) rotate(-1deg)}
.why .wi{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:var(--blue);border:2px solid var(--line);transition:transform .7s var(--spring)}
.why article:hover .wi{transform:rotate(180deg)}
.why .wi i{width:22px;height:22px;background:#fff;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.why h3{font:400 24px/1.1 var(--serif);margin:16px 0 6px}
.why p{margin:0;color:var(--muted);font-size:15.5px}

/* selected work uses the collection cards */
.work-more{margin-top:28px}

/* related power-ups + previous / next */
.pws.rel{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.pws.rel{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pws.rel{grid-template-columns:1fr}}
.pw a.pw-open{all:unset;cursor:pointer}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(40px,5vw,64px)}
@media (max-width:700px){.pn{grid-template-columns:1fr}}
.pn a{display:flex;align-items:center;gap:16px;border:2px solid var(--line);border-radius:22px;background:var(--paper);padding:18px 20px;box-shadow:6px 6px 0 var(--line);transition:transform .2s,box-shadow .2s}
.pn a:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--blue)}
.pn a.nx{flex-direction:row-reverse;text-align:right}
.pn .pi{width:58px;height:58px;flex:none;display:grid;place-items:center;border:2px solid var(--line);border-radius:14px;background:var(--blue);transition:transform .5s var(--spring)}
.pn a:hover .pi{transform:rotate(-10deg) scale(1.08)}
.pn .pi svg{width:38px;height:38px;color:#fff}
.pn .pi svg .w{fill:var(--blue)}.pn .pi svg .l{fill:#6A6AFF}.pn .pi svg .ws,.pn .pi svg .ring{stroke:var(--blue)}
.pn small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.pn b{display:block;font:400 clamp(21px,2vw,26px)/1.1 var(--serif);margin-top:4px;font-weight:400}

/* contact: links to every service */
.fsv{display:flex;flex-wrap:wrap;gap:8px 20px;margin:clamp(50px,6vw,80px) 0 0;padding:0;list-style:none;font-size:14.5px}
.fsv a{opacity:.82}
.fsv a:hover,.fsv a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.boss .fsv+footer{margin-top:28px}
.nw{white-space:nowrap}

/* =====================================================================
   SHARED SITE CHROME: header menu, mobile menu, footer, page intros
   ===================================================================== */
.btn.sm{height:42px;padding:0 16px;font-size:14px;border-radius:12px;box-shadow:3px 3px 0 var(--line)}
.nav a.t[aria-current="page"],.nav .dd.on>.t{color:var(--blue);background-size:100% 2px}
[data-theme="dark"] .nav a.t[aria-current="page"],[data-theme="dark"] .nav .dd.on>.t{color:var(--blue-t2)}
/* services dropdown */
.dd{position:relative}
.dd>.t{display:inline-flex;align-items:center;gap:5px}
.dd>.t svg{width:14px;height:14px;transition:transform .35s var(--spring)}
.dd:hover>.t svg,.dd:focus-within>.t svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 16px);left:50%;z-index:60;width:min(680px,86vw);display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px;
  border:2px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:8px 8px 0 var(--blue);translate:-50% 0;
  opacity:0;visibility:hidden;transform:translateY(12px) perspective(900px) rotateX(-14deg);transform-origin:50% 0;
  transition:opacity .25s,transform .4s var(--spring),visibility 0s .4s}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .4s var(--spring),visibility 0s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd-panel a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;transition:background .2s}
.dd-panel a:hover,.dd-panel a:focus-visible,.dd-panel a[aria-current]{background:var(--blue-t)}
[data-theme="dark"] .dd-panel a:hover,[data-theme="dark"] .dd-panel a:focus-visible,[data-theme="dark"] .dd-panel a[aria-current]{background:#1b1b44}
.dd-ic{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--blue);border:2px solid var(--line);transition:transform .45s var(--spring)}
.dd-panel a:hover .dd-ic{transform:rotate(-10deg) scale(1.08)}
.dd-ic svg,.ri svg,.qsvc .qi svg,.pn .pi svg{color:#fff}
.dd-ic svg{width:30px;height:30px}
:is(.dd-ic,.ri,.qi,.mi-ic) svg .w{fill:var(--blue)}:is(.dd-ic,.ri,.qi,.mi-ic) svg .l{fill:#6A6AFF}:is(.dd-ic,.ri,.qi,.mi-ic) svg :is(.ws,.ring){stroke:var(--blue)}
.dd-panel b{display:block;font:500 14px/1.25 var(--sans)}
.dd-panel small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.dd-panel a.dd-all{grid-column:1/-1;justify-content:center;font-weight:500;font-size:14px;border:2px dashed color-mix(in srgb,var(--line) 35%,transparent);margin-top:4px}
/* burger */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:42px;padding:0;border-radius:12px;border:2px solid var(--line);background:var(--paper);box-shadow:3px 3px 0 var(--line);cursor:pointer}
.burger i{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .35s var(--spring),opacity .2s}
.burger:hover i:nth-child(1){transform:translateX(-3px)}.burger:hover i:nth-child(3){transform:translateX(3px)}
@media (max-width:1080px){.nav a.t,.nav .dd,.nav a.t.pl{display:none}.burger{display:inline-flex}}
@media (max-width:560px){.nav-cta{display:none}}
/* full-screen mobile menu */
.mnav{position:fixed;inset:0;z-index:120;overflow-y:auto;overscroll-behavior:contain;background-color:var(--blue);color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:44px 44px;
  clip-path:circle(0px at var(--ox,92%) var(--oy,36px));visibility:hidden;transition:clip-path .65s cubic-bezier(.7,0,.2,1),visibility 0s .65s}
.mnav.on{clip-path:circle(160% at var(--ox,92%) var(--oy,36px));visibility:visible;transition:clip-path .65s cubic-bezier(.7,0,.2,1),visibility 0s}
html.menu-open{overflow:hidden}
.mn-top{display:flex;align-items:center;justify-content:space-between;height:72px;padding:env(safe-area-inset-top,0px) var(--pad) 0}
.mn-top .logo{color:#fff}
.mn-x{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;transition:transform .4s var(--spring)}
.mn-x:hover{transform:rotate(90deg)}
.mn-x svg{width:18px;height:18px}
.mn-body{display:grid;gap:34px;padding:16px var(--pad) calc(40px + env(safe-area-inset-bottom,0px))}
.ml{list-style:none;margin:0;padding:0;counter-reset:m}
.ml li{counter-increment:m;border-bottom:2px solid rgba(255,255,255,.18)}
.ml a{display:flex;align-items:baseline;gap:14px;padding:10px 0;font:400 clamp(34px,8.5vw,58px)/1.08 var(--serif);letter-spacing:-.02em;opacity:0;transform:translateY(34px);transition:opacity .35s,transform .6s var(--spring)}
.ml a::before{content:counter(m,decimal-leading-zero);font:500 13px var(--sans);opacity:.7}
.mnav.on .ml a{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + .22s)}
.ml a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.ms h2{font:500 13px var(--sans);opacity:.75;margin:0 0 12px}
.ms ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media (max-width:420px){.ms ul{grid-template-columns:1fr}}
.ms a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.mi-ic{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#fff;border:2px solid #000}
.mi-ic svg{width:22px;height:22px;color:var(--blue)}
.mi-ic svg .w{fill:#fff}.mi-ic svg .l{fill:#9D9DFF}.mi-ic svg :is(.ws,.ring){stroke:#fff}
.mn-cta{display:flex;flex-wrap:wrap;gap:12px}
.mnav .btn{border-color:#000;box-shadow:4px 4px 0 #000}
.mnav .btn.white{background:#fff;color:#000}

/* site footer */
.sfoot{position:relative;overflow:hidden;background:#000;color:#fff;border-top:2px solid var(--line)}
[data-theme="dark"] .sfoot{background:#05050C}
.sfoot .wrap{position:relative;z-index:1;padding-top:clamp(56px,7vw,90px);padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.sf-top{display:grid;grid-template-columns:1.5fr 1.1fr .8fr 1fr;gap:40px 32px}
@media (max-width:1000px){.sf-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sf-top{grid-template-columns:1fr}}
.sfoot .logo{width:160px;color:#fff}
.sf-tag{margin:18px 0 0;font:400 26px/1.15 var(--serif)}
.sf-about{margin:10px 0 0;max-width:30em;font-size:15px;color:rgba(255,255,255,.7)}
.sf-loc{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 14px 6px 10px;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;font-size:14px;font-weight:500}
.sf-loc svg{width:16px;height:16px}
.sf-h{margin:0 0 14px;font:500 13px var(--sans);color:rgba(255,255,255,.6)}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sf-col a{font-size:15px;color:rgba(255,255,255,.88);padding-bottom:2px;background:linear-gradient(#fff,#fff) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease),color .2s}
.sf-col a:hover,.sf-col a[aria-current]{color:#fff;background-size:100% 1.5px}
.sfoot .btn{margin-top:20px;background:#fff;color:#000;border-color:#fff;box-shadow:4px 4px 0 var(--blue)}
.sf-big{margin-top:clamp(40px,6vw,80px);color:#fff;opacity:.12;pointer-events:none}
.sf-big svg{display:block;width:100%;height:auto}
.sf-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1.5px solid rgba(255,255,255,.2);font-size:14px;color:rgba(255,255,255,.75)}
.sf-up{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:500}
.sf-up svg{width:16px;height:16px;transition:transform .4s var(--spring)}
.sf-up:hover svg{transform:translateY(-4px)}
html.has-quest .sfoot .wrap{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.boss+.sfoot,.boss~.sfoot{border-top:0}

/* level card shown on top of the voxels when moving between pages */
.vxt-card{position:absolute;left:50%;top:50%;z-index:3;width:min(92vw,1100px);translate:-50% -50%;text-align:center;color:#fff;pointer-events:none}
.vxt-card .k{display:inline-block;padding:5px 14px;border:2px solid #000;border-radius:999px;background:#fff;color:var(--blue);font:500 13px var(--sans);box-shadow:3px 3px 0 #000}
.vxt-card b{display:block;margin-top:18px;font:400 clamp(40px,8vw,104px)/.98 var(--serif);letter-spacing:-.03em}
.vxt-card .wd{display:inline-block;white-space:nowrap;perspective:400px}
.vxt-card .c{display:inline-block}

/* generic page bits */
.sv-hero .lede b{color:var(--ink);font-weight:500}
.hero-vis{position:relative;width:100%;justify-self:center}
.sec-more{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.faq{display:grid;gap:12px;max-width:920px}
.faq details{border:2px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:5px 5px 0 var(--line);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.faq details:hover{transform:translate(-2px,-2px)}
.faq details[open]{box-shadow:7px 7px 0 var(--blue)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font:400 clamp(19px,1.7vw,23px)/1.2 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:34px;height:34px;border-radius:10px;background:var(--blue);border:2px solid var(--line);transition:transform .45s var(--spring)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2.5px;border-radius:2px;background:#fff;translate:-50% -50%}
.faq summary i::after{rotate:90deg;transition:rotate .35s var(--ease)}
.faq details[open] summary i{transform:rotate(180deg)}
.faq details[open] summary i::after{rotate:0deg}
.faq .a{padding:0 20px 20px;color:var(--muted);max-width:60em}
.faq .a p{margin:0}
.local{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,60px);align-items:center}
@media (max-width:900px){.local{grid-template-columns:1fr}}
.local h2{font:400 clamp(2.2rem,4.6vw,4.2rem)/.98 var(--serif);letter-spacing:-.03em;margin:0}
.local p{color:var(--muted);margin:18px 0 0;max-width:40em}
.local .clients{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.local .clients li{font-size:13px;font-weight:500;padding:5px 11px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper)}
.pin-card{position:relative;display:grid;place-items:center;aspect-ratio:1.25;border:2px solid var(--line);border-radius:28px;background-color:var(--blue);color:#fff;box-shadow:10px 10px 0 var(--line);overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:30px 30px}
.pin-card .pin{width:84px;height:84px;margin-top:-30px;background:#fff;border:3px solid #000;border-radius:50% 50% 50% 0;rotate:-45deg;box-shadow:4px 4px 0 #000;display:grid;place-items:center}
.pin-card .pin::after{content:"";width:28px;height:28px;border-radius:50%;background:var(--blue);border:3px solid #000}
.pin-card .ring{position:absolute;left:50%;top:58%;width:120px;height:44px;margin:-22px 0 0 -60px;border:2px solid #fff;border-radius:50%;opacity:.6}
@media (prefers-reduced-motion:no-preference){.pin-card .pin{animation:pinBob 2.2s ease-in-out infinite}.pin-card .ring{animation:pinRing 2.2s ease-out infinite}}
@keyframes pinBob{50%{translate:0 -14px}}
@keyframes pinRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.pin-card .cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.pin-card .cap b{font:400 clamp(24px,2.6vw,32px)/1 var(--serif)}
.pin-card .cap small{font-size:12.5px;font-weight:500;opacity:.85}

/* =====================================================================
   ABOUT
   ===================================================================== */
.amap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0;padding:0;list-style:none}
.amap::before{content:"";position:absolute;left:6%;right:6%;top:42px;height:3px;background:repeating-linear-gradient(90deg,var(--line) 0 12px,transparent 12px 22px);transform-origin:0 50%;transform:scaleX(var(--draw,0));transition:transform 1.6s var(--ease)}
.amap.drawn{--draw:1}
@media (max-width:820px){.amap{grid-template-columns:1fr 1fr}.amap::before{display:none}}
.amap li{position:relative;text-align:center}
.amap .nd{position:relative;z-index:1;display:grid;place-items:center;width:86px;height:86px;margin:0 auto;border:2px solid var(--line);border-radius:50%;background:var(--blue);color:#fff;font:400 34px/1 var(--serif);box-shadow:5px 5px 0 var(--line);transition:transform .5s var(--spring)}
.amap li:hover .nd{transform:scale(1.1) rotate(-8deg)}
.amap h3{margin:18px 0 6px;font:400 30px/1 var(--serif)}
.amap p{margin:0 auto;max-width:16em;color:var(--muted);font-size:15.5px}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.vm{grid-template-columns:1fr}}
.vm article{position:relative;overflow:hidden;padding:clamp(24px,3vw,40px);border:2px solid var(--line);border-radius:26px;background:var(--paper);box-shadow:8px 8px 0 var(--line)}
.vm article.v{background:var(--blue);color:#fff}
.vm .k{font:500 13px var(--sans);opacity:.75}
.vm p{margin:14px 0 0;font:400 clamp(24px,2.6vw,34px)/1.18 var(--serif);letter-spacing:-.01em}
.vm .q{position:absolute;right:18px;top:-24px;font:400 180px/1 var(--serif);opacity:.12;pointer-events:none}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.vals{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.vals{grid-template-columns:1fr}}
.vals article{display:flex;align-items:center;gap:16px;padding:20px;border:2px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--line);transition:transform .35s var(--spring),box-shadow .3s}
.vals article:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--blue)}
.vals .cw{flex:none;display:grid;place-items:center;width:52px;height:52px;perspective:300px}
.vals .cube{--s:30px}
.vals h3{margin:0;font:400 24px/1.1 var(--serif)}
.vs{display:grid;gap:10px;max-width:1000px}
.vs-row{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:12px}
.vs-row.head{font:500 13px var(--sans);color:var(--muted)}
.vs-row.head span:last-child{color:var(--blue)}
[data-theme="dark"] .vs-row.head span:last-child{color:var(--blue-t2)}
.vs-old,.vs-new{position:relative;padding:14px 18px;border:2px solid var(--line);border-radius:16px;font:400 clamp(18px,1.8vw,22px)/1.2 var(--serif)}
.vs-old{color:var(--muted);background:var(--soft)}
.vs-old::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--strike,0));transition:transform .6s var(--ease) .2s}
.vs-row.on .vs-old{--strike:1}
.vs-new{background:var(--blue);color:#fff;box-shadow:5px 5px 0 var(--line);display:flex;align-items:center;gap:10px}
.vs-new svg{flex:none;width:20px;height:20px}
.vs-x{display:grid;place-items:center;width:44px;height:44px;margin:auto;border:2px solid var(--line);border-radius:12px;background:var(--paper);font:400 18px/1 var(--serif);rotate:-6deg;box-shadow:3px 3px 0 var(--line)}
@media (max-width:600px){.vs-row{grid-template-columns:1fr 1fr}.vs-x{display:none}}
.vs-note{margin:26px 0 0;font:400 clamp(22px,2.4vw,30px)/1.2 var(--serif);max-width:30em}
.cmt{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.cmt{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cmt{grid-template-columns:1fr}}
.cmt article{padding:22px;border:2px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--line)}
.cmt b{display:block;font:400 26px/1.1 var(--serif)}
.cmt p{margin:8px 0 0;color:var(--muted);font-size:15.5px}
.inds{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.inds li{padding:10px 16px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font-weight:500;box-shadow:3px 3px 0 var(--line);transition:transform .3s var(--spring),background .2s,color .2s}
.inds li:hover{transform:translateY(-4px) rotate(-2deg);background:var(--blue);color:#fff}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:820px){.nums{grid-template-columns:1fr 1fr}}
.nums div{padding:20px 22px;border:2px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--line)}
.nums b{display:block;font:400 clamp(44px,5vw,64px)/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nums span{display:block;margin-top:6px;font-weight:500}
.mark-stage .vx3{position:relative;width:min(340px,70%);aspect-ratio:1050/690;perspective:900px;z-index:2}

/* =====================================================================
   SERVICES OVERVIEW
   ===================================================================== */
.ring-wrap{position:relative;display:grid;place-items:center;width:100%;max-width:560px;aspect-ratio:1;justify-self:center;perspective:1300px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.ring-wrap.grab{cursor:grabbing}
.ring{position:relative;width:164px;height:204px;transform-style:preserve-3d}
.ring a{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;border:2px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--blue);text-align:center;font:500 13.5px/1.25 var(--sans);transition:box-shadow .3s}
.ring a.front{box-shadow:8px 8px 0 var(--blue);outline:3px solid var(--blue);outline-offset:3px}
.ri{display:grid;place-items:center;width:70px;height:70px;border-radius:18px;background:var(--blue);border:2px solid var(--line)}
.ri svg{width:50px;height:50px}
.ring-floor{position:absolute;left:50%;bottom:9%;width:70%;height:12%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 30%,transparent),transparent);pointer-events:none}
.ring-hint{position:absolute;left:0;right:0;bottom:2%;text-align:center;font-size:13px;font-weight:500;color:var(--muted)}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.caps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.caps{grid-template-columns:1fr}}
.caps article{padding:22px;border:2px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--line)}
.caps h3{margin:0 0 14px;font:400 26px/1 var(--serif)}
.caps ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.caps li{font-size:13px;font-weight:500;padding:5px 10px;border-radius:8px;background:var(--blue-t);color:var(--blue)}
[data-theme="dark"] .caps li{background:#1b1b44;color:#C9C9FF}

/* =====================================================================
   PORTFOLIO
   ===================================================================== */
.pf-stack{position:relative;width:100%;max-width:580px;aspect-ratio:1.05;justify-self:center;perspective:1400px}
.pf-stack .pfm{position:absolute;left:18%;top:14%;width:64%;transform-style:preserve-3d;transition:transform .9s var(--spring)}
.pf-mini{display:block;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:8px 8px 0 var(--blue)}
.pf-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pf-stats span{padding:8px 14px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px;font-weight:500;box-shadow:3px 3px 0 var(--line)}
.pf-stats b{font:400 20px/1 var(--serif);margin-right:6px}
.pf-bar{position:sticky;top:74px;z-index:30;padding:12px 0;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pf-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pf-tools{display:flex;flex:none;gap:10px}
.pf-tools select,.pf-tools input{height:40px;padding:0 12px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:500 14px var(--sans);box-shadow:3px 3px 0 var(--line)}
.pf-tools input{width:200px}
.pf-tools select:focus,.pf-tools input:focus{outline:none;box-shadow:3px 3px 0 var(--blue)}
@media (max-width:700px){.pf-tools{flex:1 1 100%}.pf-tools select,.pf-tools input{flex:1;min-width:0;width:auto}}
.pf-status{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:26px 0 22px;font-size:14px;font-weight:500;color:var(--muted)}
.pf-status button{padding:0;border:0;background:none;color:var(--blue);font:500 14px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,36px);perspective:1600px}
@media (max-width:1040px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}}
.pf-card{min-width:0}
.pf-card.wide{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.pf-card.wide .pf-frame{flex:1;display:flex;flex-direction:column}
.pf-card.wide .pf-screen{flex:1;aspect-ratio:auto;min-height:320px}
@media (max-width:640px){.pf-card.wide{grid-column:auto;grid-row:auto}.pf-card.wide .pf-screen{aspect-ratio:16/10;min-height:0}}
.pf-frame{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;overflow:hidden;cursor:zoom-in;border:2px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:8px 8px 0 var(--blue);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pf-frame:hover{box-shadow:12px 12px 0 var(--blue)}
.pf-frame:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.pf-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:2px solid var(--line);background:var(--paper)}
.pf-chrome i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line)}
.pf-chrome i:first-child{background:var(--blue);border-color:var(--blue)}
.pf-addr{flex:1;min-width:0;height:20px;margin-left:10px;padding:0 10px;border-radius:999px;background:var(--soft);color:var(--muted);font:500 12px/20px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-screen{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;container-type:size;background:var(--soft)}
.pf-poster{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,6cqw,34px);overflow:hidden}
.pf-poster .pn{position:relative;z-index:1;max-width:85%;font:400 clamp(26px,11cqw,84px)/.92 var(--serif);letter-spacing:-.02em}
.pf-poster .pd{position:relative;z-index:1;font:500 13px var(--sans);opacity:.75}
.pf-poster svg{position:absolute;right:-14%;bottom:-38%;width:78%;opacity:.16}
.pf-poster.p0{background:var(--blue);color:#fff}.pf-poster.p1{background:#000;color:#fff}.pf-poster.p2{background:var(--blue-t);color:var(--blue)}
.pf-shot{position:absolute;z-index:2;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .5s,transform 6s cubic-bezier(.45,0,.3,1)}
.pf-shot.ok{opacity:1}
.pf-frame:hover .pf-shot.ok,.pf-frame:focus-visible .pf-shot.ok{transform:translateY(calc(-100% + 100cqh));transition:opacity .5s,transform 7s cubic-bezier(.45,0,.3,1)}
.pf-peek{position:absolute;right:12px;bottom:12px;z-index:3;padding:7px 13px;border:2px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:500 13px/1 var(--sans);opacity:0;transform:translateY(8px);transition:.25s}
.pf-frame:hover .pf-peek,.pf-frame:focus-visible .pf-peek{opacity:1;transform:none}
.pf-glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.4),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
.pf-frame:hover .pf-glare{opacity:1}
.pf-meta{padding:20px 2px 0}
.pf-mt{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pf-meta h3{margin:0;font:400 clamp(22px,2vw,28px)/1.1 var(--serif);letter-spacing:-.01em}
.pf-meta .loc{font-size:13px;color:var(--muted);white-space:nowrap}
.pf-meta p{margin:8px 0 14px;font-size:15.5px;color:var(--muted);max-width:42em}
.pf-tech{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pf-tech button{padding:6px 9px;border:1.5px solid transparent;border-radius:7px;background:var(--blue-t);color:var(--blue);font:500 12.5px/1 var(--sans);cursor:pointer;transition:border-color .2s,transform .2s}
.pf-tech button:hover{border-color:var(--blue);transform:translateY(-2px)}
.pf-tech .lead{background:var(--blue);color:#fff}
[data-theme="dark"] .pf-tech button:not(.lead){background:#1b1b44;color:#C9C9FF}
.pf-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font:500 14px var(--sans)}
.pf-links a,.pf-links button{padding:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px}
.pf-links a:hover,.pf-links button:hover{color:var(--blue)}
.pf-empty{padding:60px 0;text-align:center;color:var(--muted)}
.pf-rows{display:grid;gap:4px}
.pf-row{display:grid;grid-template-columns:280px 56px 1fr;align-items:center;gap:18px;padding:14px 0;border-bottom:2px solid color-mix(in srgb,var(--line) 15%,transparent)}
.pf-row h3{margin:0;font:500 16px/1.3 var(--sans)}
.pf-row .n{font:400 34px/1 var(--serif);color:var(--blue)}
[data-theme="dark"] .pf-row .n{color:var(--blue-t2)}
@media (max-width:720px){.pf-row{grid-template-columns:1fr auto}.pf-row .tiles{grid-column:1/-1}}
.pf-row .tiles{display:flex;flex-wrap:wrap;gap:6px}
.pf-tile{position:relative;width:36px;height:36px;padding:0;border:2px solid var(--line);border-radius:9px;background:var(--blue);color:#fff;font:700 11px/32px var(--sans);text-align:center;cursor:pointer;transition:transform .3s var(--spring),background .2s}
.pf-tile:hover,.pf-tile:focus-visible{transform:translateY(-4px) rotate(-6deg);background:#000}
.pf-tile[data-tip]:hover::after,.pf-tile[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:3;translate:-50% 0;padding:7px 9px;border-radius:7px;background:#000;color:#fff;font:500 12px/1 var(--sans);white-space:nowrap;pointer-events:none}
.pf-box{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pf-box button{padding:8px 12px;border:1.5px solid transparent;border-radius:8px;background:var(--blue-t);color:var(--blue);font:500 14px/1 var(--sans);cursor:pointer;transition:transform .2s,border-color .2s}
.pf-box button:hover{transform:translateY(-2px);border-color:var(--blue)}
.pf-box sup{margin-left:5px;font-size:11px;opacity:.7}
[data-theme="dark"] .pf-box button{background:#1b1b44;color:#C9C9FF}
.pf-countries{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pf-countries li{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font-weight:500;box-shadow:3px 3px 0 var(--line)}
.pf-countries b{display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;font:400 18px/1 var(--serif)}
/* live preview viewer */
.pfv{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#05051f;color:#fff}
.pfv::backdrop{background:rgba(0,0,40,.6)}
.pfv[open]{animation:pfvIn .45s var(--ease)}
@keyframes pfvIn{from{opacity:0;transform:scale(.96)}}
.pfv-in{display:flex;flex-direction:column;height:100%;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.pfv-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:14px var(--pad);border-bottom:1px solid rgba(255,255,255,.14)}
.pfv-title{flex:1 1 240px;min-width:0}
.pfv-title h2{margin:0;font:400 26px/1.1 var(--serif)}
.pfv-title span{font-size:13px;opacity:.7}
.seg{display:inline-flex;padding:3px;border:1.5px solid rgba(255,255,255,.4);border-radius:999px}
.seg button{padding:8px 14px;border:0;border-radius:999px;background:none;color:#fff;font:500 13px/1 var(--sans);cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:var(--blue)}
.pfv-act{display:flex;align-items:center;gap:10px}
.pfv .btn{height:44px;padding:0 16px;font-size:14px;border-color:#000;box-shadow:3px 3px 0 #000}
.pfv .btn.white{background:#fff;color:#000}
.icb{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:none;color:#fff;cursor:pointer;transition:background .2s,color .2s}
.icb:hover{background:#fff;color:#000}
.icb svg{width:18px;height:18px}
.pfv-stage{position:relative;flex:1;overflow:hidden}
.pfv-device{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);transform-origin:center;transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s,transform .5s var(--ease)}
.pfv-device .pf-chrome{height:40px;border-bottom:1px solid #ccc;background:#fff}
.pfv-device .pf-addr{background:#eef;color:#556}
.pfv-device.phone{border:14px solid #111;border-radius:44px}
.pfv-device.tablet{border:16px solid #111;border-radius:30px}
.pfv-device.phone .pf-chrome,.pfv-device.tablet .pf-chrome{display:none}
.pfv-device iframe{flex:1;width:100%;border:0;background:#fff}
.pfv-nav{position:absolute;top:50%;z-index:3;translate:0 -50%}
.pfv-nav.prev{left:14px}.pfv-nav.next{right:14px}
.pfv-note{margin:0;padding:10px var(--pad) 16px;text-align:center;font-size:13px;opacity:.7}
.pfv-note a{color:#fff}

/* =====================================================================
   PLAY: the arcade
   ===================================================================== */
.cab{position:relative;width:100%;max-width:540px;aspect-ratio:1;justify-self:center;display:grid;place-items:center}
.cab-body{position:relative;width:78%;aspect-ratio:.82;border:3px solid var(--line);border-radius:30px 30px 18px 18px;background:var(--blue);box-shadow:12px 12px 0 var(--line);transform:perspective(1200px) rotateY(-14deg) rotateX(6deg);transition:transform .8s var(--spring)}
.cab:hover .cab-body{transform:perspective(1200px) rotateY(6deg) rotateX(2deg)}
.cab-scr{position:absolute;left:9%;right:9%;top:9%;height:52%;border:3px solid #000;border-radius:16px;background:#05051f;overflow:hidden}
.cab-scr canvas{width:100%;height:100%;display:block}
.cab-scr::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px);pointer-events:none}
.cab-pad{position:absolute;left:9%;right:9%;bottom:10%;height:22%;display:flex;align-items:center;justify-content:space-around;border:3px solid #000;border-radius:14px;background:#fff}
.cab-pad .stick{width:18%;aspect-ratio:1;border-radius:50%;background:#000;box-shadow:inset -4px -4px 0 #333}
.cab-pad .bt{width:14%;aspect-ratio:1;border-radius:50%;border:3px solid #000;background:var(--blue)}
.cab-pad .bt:nth-child(3){background:#fff}
.cab-mq{position:absolute;left:9%;right:9%;top:-9%;padding:8px 0;border:3px solid #000;border-radius:12px;background:#fff;color:var(--blue);text-align:center;font:400 clamp(16px,2vw,22px)/1 var(--serif)}
.game{display:grid;gap:18px}
.cc-hud{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cc-hud span{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border:2px solid var(--line);border-radius:12px;background:var(--paper);font-size:13px;font-weight:500;box-shadow:3px 3px 0 var(--line)}
.cc-hud b{font:400 24px/1 var(--serif);font-variant-numeric:tabular-nums}
.cc-hud .lives b{letter-spacing:2px;color:var(--blue)}
[data-theme="dark"] .cc-hud .lives b{color:var(--blue-t2)}
.cc-hud .sp{flex:1}
.cc-wrap{position:relative;width:100%;aspect-ratio:16/10;max-height:72vh;border:3px solid var(--line);border-radius:24px;background:#05051f;box-shadow:10px 10px 0 var(--blue);overflow:hidden;touch-action:none}
.cc-wrap canvas{display:block;width:100%;height:100%}
.cc-wrap::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px);pointer-events:none}
.cc-ov{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;background:rgba(5,5,31,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cc-ov[hidden]{display:none}
.cc-panel{width:min(460px,100%);padding:clamp(20px,3vw,30px);border:3px solid #000;border-radius:22px;background:#fff;color:#000;text-align:center;box-shadow:8px 8px 0 var(--blue)}
.cc-panel h3{margin:0;font:400 clamp(30px,4vw,44px)/1 var(--serif);letter-spacing:-.02em}
.cc-panel p{margin:10px 0 0;color:#55556E;font-size:15px}
.cc-panel .keys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;font-size:13px;font-weight:500}
.cc-panel .keys span{padding:5px 10px;border:2px solid #000;border-radius:8px;background:#E8E8FF}
.cc-panel .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.cc-panel .btn{border-color:#000;box-shadow:4px 4px 0 #000;color:#000;background:#fff}
.cc-panel .btn.blue{background:var(--blue);color:#fff}
.cc-panel .big{display:block;margin-top:12px;font:400 clamp(48px,7vw,72px)/1 var(--serif);color:var(--blue)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:800px){.board{grid-template-columns:1fr}}
.board article{padding:22px;border:2px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--line)}
.board small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.board b{display:block;margin-top:8px;font:400 clamp(40px,4vw,54px)/1 var(--serif);font-variant-numeric:tabular-nums}
.board p{margin:8px 0 0;font-size:14.5px;color:var(--muted)}

/* =====================================================================
   QUOTE
   ===================================================================== */
.qwrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
@media (max-width:980px){.qwrap{grid-template-columns:1fr}}
.qf{padding:clamp(20px,3vw,34px);border:2px solid var(--line);border-radius:26px;background:var(--paper);box-shadow:10px 10px 0 var(--blue)}
.qprog{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 26px;padding:0;list-style:none}
.qprog li{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.qprog li::before{content:"";height:10px;border-radius:5px;border:2px solid var(--line);background:var(--soft);transition:background .4s}
.qprog li.on{color:var(--ink)}
.qprog li.on::before{background:var(--blue)}
.qprog li.now::before{background:repeating-linear-gradient(-45deg,var(--blue) 0 5px,var(--blue-t2) 5px 10px);background-size:200% 100%;animation:march 1s linear infinite}
.qstep{margin:0;padding:0;border:0;min-width:0}
.qstep[hidden]{display:none}
.qstep legend{padding:0;font:400 clamp(28px,3.2vw,40px)/1.05 var(--serif);letter-spacing:-.02em}
.qstep .sub{margin:8px 0 20px;color:var(--muted)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.qgrid{grid-template-columns:1fr}}
.qgrid .full{grid-column:1/-1}
.fld{display:grid;gap:7px}
.fld label,.fld .lb{font-size:14px;font-weight:500}
.fld label i{font-style:normal;color:var(--blue)}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:500 15px var(--sans);box-shadow:3px 3px 0 var(--line);transition:box-shadow .2s,transform .2s}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;box-shadow:4px 4px 0 var(--blue);transform:translate(-1px,-1px)}
.fld .hint{font-size:12.5px;color:var(--muted)}
.fld.bad input,.fld.bad select{box-shadow:3px 3px 0 #D7263D;border-color:#D7263D}
.qerr{margin:14px 0 0;color:#D7263D;font-size:14px;font-weight:500}
.qerr:empty{display:none}
.qsvc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:620px){.qsvc{grid-template-columns:1fr}}
.qsvc label{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer;font-weight:500;font-size:14.5px;box-shadow:3px 3px 0 var(--line);transition:transform .25s var(--spring),background .2s,color .2s,box-shadow .2s}
.qsvc label:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--line)}
.qsvc input{position:absolute;opacity:0;pointer-events:none}
.qsvc .qi{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--blue);border:2px solid var(--line)}
.qsvc .qi svg{width:28px;height:28px}
.qsvc .ck{margin-left:auto;width:22px;height:22px;border:2px solid var(--line);border-radius:6px;display:grid;place-items:center;transition:background .2s}
.qsvc .ck svg{width:14px;height:14px;opacity:0}
.qsvc input:checked+label,.qsvc label:has(input:checked){background:var(--blue);color:#fff;box-shadow:5px 5px 0 var(--line)}
.qsvc label:has(input:checked) .ck{background:#fff;border-color:#000}
.qsvc label:has(input:checked) .ck svg{opacity:1;color:var(--blue)}
.qsvc label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchips label{position:relative;padding:10px 14px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px;font-weight:500;cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .2s,background .2s,color .2s}
.qchips label:hover{transform:translateY(-2px)}
.qchips input{position:absolute;opacity:0;pointer-events:none}
.qchips label:has(input:checked){background:var(--blue);color:#fff}
.qchips label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.qnav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:28px}
.qnav .btn[hidden]{display:none}
.qsum{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;padding:18px;border:2px dashed color-mix(in srgb,var(--line) 40%,transparent);border-radius:16px}
.qsum dt{font-size:13px;font-weight:500;color:var(--muted)}
.qsum dd{margin:0;font-weight:500;word-break:break-word}
.qsend{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.qdone{margin-top:22px;padding:18px;border:2px solid var(--line);border-radius:16px;background:var(--blue);color:#fff}
.qdone b{display:block;font:400 26px/1.1 var(--serif)}
.qside{position:sticky;top:96px;display:grid;gap:16px}
.qcard{padding:22px;border:2px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:6px 6px 0 var(--line)}
.qcard.blue{background:var(--blue);color:#fff}
.qcard h2{margin:0 0 12px;font:400 26px/1.1 var(--serif)}
.qcard ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:12px}
.qcard ol li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.qcard ol li::before{content:counter(n);display:grid;place-items:center;width:34px;height:34px;border:2px solid #000;border-radius:10px;background:#fff;color:var(--blue);font:400 18px/1 var(--serif)}
.qcard ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.qcard ul a{font-weight:500;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px}
.qcard ul small{display:block;color:var(--muted);font-size:13px}

/* =====================================================================
   404
   ===================================================================== */
.e404{display:grid;place-items:center;min-height:calc(100vh - 140px);padding:60px 0;text-align:center}
.e404 .big{display:flex;justify-content:center;gap:2vw;font:400 clamp(120px,28vw,300px)/.85 var(--serif);letter-spacing:-.04em;color:var(--blue)}
[data-theme="dark"] .e404 .big{color:var(--blue-t2)}
.e404 .big span{display:inline-block}
@media (prefers-reduced-motion:no-preference){.e404 .big span{animation:wob 2.4s ease-in-out infinite}.e404 .big span:nth-child(2){animation-delay:.2s}.e404 .big span:nth-child(3){animation-delay:.4s}}
@keyframes wob{50%{transform:translateY(-14px) rotate(-4deg)}}
.e404 h1{margin:18px 0 0;font:400 clamp(32px,4vw,52px)/1 var(--serif)}
.e404 p{margin:14px auto 0;max-width:34em;color:var(--muted)}
.e404 .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

@media (prefers-reduced-motion:reduce){
  .mnav,.mnav .ml a{transition:none}
  .amap::before,.vs-old::after{transition:none}
}
/* extras */
.vx-wait .sv-hero .hero-vis,.vx-wait .sv-hero .pf-stats{opacity:0}
.pf-stack-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(12deg);transition:transform .6s var(--ease)}
.cab-scr .fall{position:absolute;top:-24%;width:17%;aspect-ratio:1;display:grid;place-items:center;border:2px solid #fff;border-radius:22%;background:var(--blue)}
.cab-scr .fall svg{width:72%;height:72%;color:#fff}
.cab-scr .fall svg .w{fill:var(--blue)}.cab-scr .fall svg .l{fill:#6A6AFF}.cab-scr .fall svg :is(.ws,.ring){stroke:var(--blue)}
.cab-paddle{position:absolute;left:36%;bottom:8%;width:28%;height:9%;border:2px solid var(--blue);border-radius:6px;background:#fff}
@media (prefers-reduced-motion:no-preference){.cab-scr .fall{animation:cabFall 2.8s linear infinite}.cab-paddle{animation:cabPad 2.8s ease-in-out infinite alternate}}
@keyframes cabFall{to{top:108%}}
@keyframes cabPad{from{left:6%}to{left:66%}}
.qsvc-i{position:relative}
.qsvc-i input:checked+label{background:var(--blue);color:#fff;box-shadow:5px 5px 0 var(--line)}
.qsvc-i input:checked+label .ck{background:#fff;border-color:#000}
.qsvc-i input:checked+label .ck svg{opacity:1;color:var(--blue)}
.qsvc-i input:focus-visible+label{outline:3px solid var(--blue);outline-offset:3px}
.qcard p{margin:0;color:var(--muted)}
.qcard p a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px}
.qcard ul li>span{font-weight:500}
.local-cta{margin-top:24px}
.sv-hero h1{text-wrap:balance}
#pf-work .wrap>.shead{margin-bottom:24px}