/* v3: real work imagery, testimonials with faces/logos/numbers, process stage, no-handoff lanes, team, footer motion */

/* ---------- real screenshot frames ---------- */
.ms--img{background:var(--surface)}
.ms__img{flex:1;min-height:0;overflow:hidden;background:var(--raised)}
.ms__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* ledger gallery */
.gal{display:grid;gap:14px}
.gal__main{position:relative}
.gal__f{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.gal__f.is-on{opacity:1}
.gal__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.gal__thumbs{display:flex;gap:8px}
.gal__t{width:76px;aspect-ratio:16/10;border-radius:7px;overflow:hidden;padding:0;border:0;cursor:pointer;background:var(--raised);box-shadow:0 0 0 1px var(--line);opacity:.55;transition:opacity .2s var(--ease),box-shadow .2s var(--ease)}
.gal__t img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.gal__t:hover{opacity:.85}
.gal__t.is-on{opacity:1;box-shadow:0 0 0 2px var(--blue)}
.gal__live{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:550;transition:background-color .15s var(--ease)}
.gal__live i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.gal__live:hover{background:var(--blue)}
.gal__live:hover i{transform:translate(2px,-2px)}
.gal__live--off{background:none;color:var(--muted);box-shadow:0 0 0 1px var(--line) inset;font-size:11px}
.lrow__in .gal{grid-column:2;grid-row:1/3}
.lrow__in--solo .gal{grid-row:2}
.wpreview .mshot{aspect-ratio:16/10}

/* services: stacked real screens */
.rs{position:relative;margin-top:44px;padding:0 0 9% 0}
.rs__front{position:relative;z-index:2;width:86%}
.rs__back{position:absolute;right:0;top:9%;width:62%;z-index:1;opacity:.96;will-change:transform}
.rs__cap{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;width:86%}
.rs__cap a{color:var(--ink);background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 1px no-repeat;transition:background-size .25s var(--ease),color .15s}
.rs__cap a:hover{color:var(--blue);background-size:100% 1px}
.rs__cap em{font-style:normal;color:var(--steel)}

/* tool logos */
.tools{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tools li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 10px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;font-size:14px;font-weight:500;cursor:default;transition:opacity .2s var(--ease),box-shadow .2s var(--ease),transform .3s var(--ease)}
.tools img{width:16px;height:16px;opacity:.85}
.tools.has-hover li{opacity:.35}
.tools.has-hover li.is-on{opacity:1;box-shadow:0 0 0 1px var(--blue) inset;transform:translateY(-2px)}

/* client logos */
.clients{display:flex;align-items:center;gap:40px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.clients>.mono{flex:none;width:170px}
.clients__row{list-style:none;padding:0;margin:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.clients__row a{display:block;transition:transform .35s var(--ease)}
.clients__row img{display:block;width:auto;filter:brightness(0);opacity:.55;transition:opacity .2s var(--ease)}
.clients__row a:hover{transform:translateY(-3px)}
.clients__row a:hover img{opacity:1}
.clients__src{display:flex;align-items:center;gap:10px;padding-left:24px;border-left:1px solid var(--line)}
.clients__src img{opacity:.8}

/* ---------- faces ---------- */
.face{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center}
.face--ph{font:600 12px/1 var(--mono);letter-spacing:.04em;color:var(--muted);background:radial-gradient(120% 120% at 30% 20%,#fff 0,var(--raised) 60%,var(--line) 100%);box-shadow:0 0 0 1px var(--line) inset}
.face--lg{width:64px;height:64px;font-size:15px}

/* video */
.vcard__screen{display:grid;place-items:center}
.vcard__video{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:16px;background:#000;object-fit:cover}
.vcard.is-playing .vcard__play,.vcard.is-playing .vcard__time{opacity:0;pointer-events:none}
.vcard__play,.vcard__time{transition:opacity .25s var(--ease)}
.vcard__cap{margin-bottom:24px}
.vcard__who{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding:14px 0;border-top:1px solid var(--c700);border-bottom:1px solid var(--c700)}
.vcard__who .face{width:52px;height:52px}
.vcard__who b{display:block;font-weight:600}
.vcard__who em{display:block;font-style:normal;color:var(--steel3);font-size:14px}
.vcard__logo{margin-left:auto;filter:brightness(0) invert(1);opacity:.9}
.vcard__num{text-align:right;padding-left:16px;border-left:1px solid var(--c700)}
.vcard__num b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;color:#fff}
.vcard__num em{font-size:10px!important}

/* review slips */
.slip__who{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;padding-bottom:14px;margin-bottom:16px;border-bottom:1px dashed var(--line2)}
.slip__logo{grid-column:1/-1;grid-row:1;justify-self:start;height:22px;width:auto;margin-bottom:14px;filter:brightness(0);opacity:.75}
.slip__logo--txt{filter:none;opacity:1;font-weight:650;letter-spacing:-.02em;font-size:18px;height:auto;color:var(--ink)}
.slip__nm b{display:block;font-size:15px;font-weight:600}
.slip__nm em{display:block;font-style:normal;font:500 10px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.slip__num{display:flex;align-items:baseline;gap:8px;padding:14px 0;margin:0 0 12px;border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2)}
.slip__num b{font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--blue)}
.slip__num span{font-size:13px;color:var(--muted)}
.slip__src{display:flex;align-items:center;gap:8px;font-size:10px!important}
.slip__src img{width:auto;opacity:.75}

/* ---------- process stage ---------- */
.process .h2--md{font-size:38px}
.path__sticky{top:112px}
.pstage{margin-top:28px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh),0 0 0 1px var(--line);overflow:hidden}
.pstage__bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px!important;background:#FBFBFA}
.pstage__k{color:var(--blue);background:var(--blue-wash);padding:3px 6px;border-radius:4px}
.pstage__body{position:relative;height:286px}
.psc{--p:0;position:absolute;inset:0;padding:22px;opacity:0;will-change:opacity,transform}
.psc:first-child{opacity:1}
.psc li,.psc dl>div{--i:0;opacity:clamp(0,calc(var(--p)*10 - var(--i)*1.4),1);transform:translate3d(0,calc((1 - clamp(0,calc(var(--p)*10 - var(--i)*1.4),1))*8px),0)}
.psc li:nth-child(2),.psc dl>div:nth-child(2){--i:1}.psc li:nth-child(3),.psc dl>div:nth-child(3){--i:2}
.psc li:nth-child(4),.psc dl>div:nth-child(4){--i:3}.psc li:nth-child(5),.psc dl>div:nth-child(5){--i:4}.psc li:nth-child(6){--i:5}
/* call */
.pcall{display:flex;align-items:center;gap:14px}
.pcall__av{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--raised);font:600 12px/1 var(--mono);color:var(--muted)}
.pcall__av--bfs{background:var(--ink)}
.pcall__av--bfs svg{width:28px;height:28px;fill:#fff}.pcall__av--bfs .w{fill:var(--blue)}
.pcall__wave{flex:1;display:flex;align-items:center;gap:3px;height:40px}
.pcall__wave i{flex:1;border-radius:2px;background:var(--blue);height:calc(14% + 70% * var(--p) * var(--h,.5));opacity:.85}
.pcall__wave i:nth-child(3n){--h:.9}.pcall__wave i:nth-child(4n){--h:.35}.pcall__wave i:nth-child(5n){--h:1}.pcall__wave i:nth-child(7n){--h:.6}
.pcall__t{margin:14px 0 14px;font-size:11px!important}
.pcall__t b{color:var(--ink)}
.pnotes{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pnotes li{font-size:11px!important;padding:8px 10px;border-radius:8px;box-shadow:0 0 0 1px var(--line) inset}
.pnotes li.is-key{color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset;background:var(--blue-wash)}
/* plan */
.pdoc__h{font-size:11px!important;margin-bottom:14px}
.pdoc dl{margin:0;display:grid;gap:0}
.pdoc dl>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.pdoc dt{font:500 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pdoc dd{margin:0;font-weight:500}
.pdoc .is-key dd{color:var(--blue)}
.pdoc .is-key{border-bottom:0}
/* design */
.pwire{position:absolute;inset:22px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:14px 26px 14px 30px 1fr;gap:10px;opacity:calc(1 - var(--p))}
.pwire i{border-radius:5px;border:1px dashed var(--line2)}
.pw-nav{grid-column:1/-1}.pw-h{grid-column:1/2}.pw-h2{grid-column:1/2;width:70%}.pw-cta{width:45%}.pw-img{grid-column:1/-1}
.pdesign{position:absolute;inset:22px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line);clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0 round 10px)}
.pdesign img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pcursor{position:absolute;left:calc(22px + (100% - 44px) * var(--p));top:58%;display:flex;align-items:flex-start;gap:4px;opacity:calc(1 - clamp(0,(var(--p) - .9) * 10,1));pointer-events:none}
.pcursor svg{width:18px;height:18px;fill:var(--blue);stroke:#fff;stroke-width:1.5}
.pcursor em{font-style:normal;font-size:10px!important;color:#fff!important;background:var(--blue);padding:4px 6px;border-radius:4px;margin-top:12px}
/* build */
.psc--build{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcode{font-size:10.5px!important;line-height:1.5!important;text-transform:none!important;letter-spacing:0!important;background:var(--c950);color:var(--steel3)!important;border-radius:10px;padding:14px;display:grid;align-content:start;gap:8px}
.pcode p{opacity:clamp(0,calc(var(--p)*6 - var(--i,0)),1)}
.pcode p:nth-child(2){--i:1}.pcode p:nth-child(3){--i:2}.pcode p:nth-child(4){--i:3}.pcode p:nth-child(5){--i:4}
.pcode b{color:#fff;font-weight:500}.pcode s{text-decoration:none;color:var(--blue-dark)}
.pprev{border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column}
.pprev__bar{display:flex;align-items:center;gap:6px;font-size:9px!important;padding:6px 8px;border-bottom:1px solid var(--line);background:#FBFBFA}
.pprev__bar i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.pprev__img{flex:1;overflow:hidden;position:relative}
.pprev__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0)}
/* launch */
.pcheck{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pcheck li{display:flex;align-items:center;gap:10px;font-size:11px!important;color:var(--ink)!important;padding:10px 12px;border-radius:8px;box-shadow:0 0 0 1px var(--line) inset}
.pcheck li::before{content:"✓";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font-size:10px}
.plive{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--ink);color:#fff!important;font-size:11px!important;opacity:clamp(0,calc((var(--p) - .8) * 6),1);transform:scale(calc(.9 + .1 * clamp(0,calc((var(--p) - .8) * 6),1)))}
.plive i{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(0,88,246,.35)}
/* measure */
.pm__k{display:flex;justify-content:space-between;font-size:11px!important;margin-bottom:10px}
.pm__k span{color:var(--steel)}
.pm__chart{display:block;width:100%;height:180px;overflow:visible}
.pm__grid{stroke:var(--line);stroke-width:1;fill:none}
.pm__base{stroke:var(--line2);stroke-width:2;fill:none}
.pm__line{stroke:var(--blue);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.pm__launch{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 4}
.pm__l{display:flex;justify-content:space-between;font-size:10px!important;margin-top:8px}

/* ---------- no handoff ---------- */
.direct .sec__head--row{grid-template-columns:1fr 460px}
.lanes{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:stretch}
.lane{border-radius:var(--r-panel);padding:28px;position:relative}
.lane--old{background:var(--paper);box-shadow:0 0 0 1px var(--line) inset}
.lane--new{background:var(--surface);box-shadow:var(--sh),0 0 0 1px var(--line)}
.lane__h{display:flex;justify-content:space-between;align-items:center;font-size:11px!important;margin-bottom:22px}
.lane__stat b{color:var(--ink);font-weight:600}
.lane__stat--on b{color:var(--blue)}
.relay{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.relay li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;font-size:12px;color:var(--muted);transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.relay li.is-on{color:var(--ink);box-shadow:0 0 0 1px var(--line2) inset}
.relay img{width:16px;height:16px;opacity:.7}
.relay__ic{font-size:14px;line-height:16px;color:var(--steel)}
.drift{position:relative;height:150px;margin-bottom:18px}
.drift__card{--p:0;position:absolute;left:12%;top:8px;width:62%;height:120px;border-radius:12px;padding:16px;display:grid;align-content:start;gap:9px}
.drift__card span{position:absolute;right:10px;bottom:8px;font-size:9px!important}
.drift__card i{display:block;height:9px;border-radius:5px;background:var(--line2)}
.drift__card .dc-h{width:70%;height:13px}.drift__card .dc-p{width:90%}.drift__card .dc-b{width:34%;height:22px;border-radius:8px;background:var(--blue);margin-top:6px}
.drift__card--d{border:1.5px dashed var(--line2);background:transparent}
.drift__card--b{background:var(--surface);box-shadow:var(--sh-sm),0 0 0 1px var(--line);will-change:transform}
.drift__card--b .dc-h{width:calc(70% - 18% * var(--p));height:calc(13px - 3px * var(--p))}
.drift__card--b .dc-b{border-radius:calc(8px - 6px * var(--p));background:#1A5FE0;width:calc(34% + 8% * var(--p))}
.tix{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tix li{font-size:10px!important;padding:6px 8px;border-radius:6px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;color:var(--ink)!important;opacity:0;transform:translate3d(0,6px,0);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.tix li::before{content:"● ";color:#C2410C}
.tix li.is-on{opacity:1;transform:none}
.live{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.live__code{background:var(--c950);border-radius:14px;padding:18px 16px;font-size:12px!important;line-height:1.55!important;text-transform:none!important;letter-spacing:0!important;color:var(--steel3)!important;display:grid;align-content:start;gap:4px;white-space:pre}
.ln{padding:3px 8px 3px 4px;margin:0 -8px 0 -4px;border-radius:6px;transition:background-color .2s var(--ease);cursor:default}
.ln em{font-style:normal;color:var(--c700);display:inline-block;width:18px}
.ln b{color:#fff;font-weight:500}.ln s{text-decoration:none;color:var(--blue-dark)}
.ln.is-hl{background:rgba(255,255,255,.08)}
.ln.is-flash{animation:lnflash .9s var(--ease)}
@keyframes lnflash{0%{background:rgba(77,141,255,.35)}100%{background:transparent}}
.live__prev{border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--line) inset;padding:14px;display:flex;flex-direction:column;gap:14px}
.live__url{display:flex;align-items:center;gap:8px;font-size:10px!important}
.live__url i{width:7px;height:7px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.lcard{flex:1;background:var(--surface);border-radius:16px;padding:28px;box-shadow:var(--sh-sm),0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lcard h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.lcard p{color:var(--muted);font-size:14px}
.lcard [data-ln]{border-radius:6px;transition:box-shadow .2s var(--ease)}
.lcard [data-ln].is-hl{box-shadow:0 0 0 2px var(--blue-wash),0 0 0 1px var(--blue)}
.lbtn{margin-top:auto;display:inline-flex;height:38px;align-items:center;padding:0 16px;border-radius:10px!important;background:var(--blue);color:#fff;font-size:14px;font-weight:550;transition:background-color .3s var(--ease),box-shadow .2s var(--ease)}
.lcard.is-ink .lbtn{background:var(--ink)}
.lcard.is-flash{animation:cflash .9s var(--ease)}
@keyframes cflash{0%{box-shadow:var(--sh-sm),0 0 0 2px var(--blue)}100%{box-shadow:var(--sh-sm),0 0 0 1px var(--line)}}
.knobs{display:flex;align-items:center;gap:16px;margin-top:18px;font-size:10px!important;flex-wrap:wrap}
.knob{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:var(--raised)}
.knob button{border:0;background:none;font:500 11px/1 var(--mono);color:var(--muted);padding:7px 9px;border-radius:7px;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.knob button:hover{color:var(--ink)}
.knob button.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.knob em{font-style:normal;padding:0 8px 0 6px;color:var(--steel)}
.direct__facts{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.direct__facts li{padding:24px 24px 0 0;display:grid;gap:6px;align-content:start}
.direct__facts li+li{padding-left:24px;border-left:1px solid var(--line)}
.direct__facts b{font-weight:600;font-size:17px}
.direct__facts span{color:var(--muted);font-size:15px}

/* ---------- team ---------- */
.crew{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:20px;perspective:1200px}
.mate{position:relative;border-radius:var(--r-card);padding:24px;background:var(--surface);box-shadow:var(--sh-sm),0 0 0 1px var(--line);display:flex;flex-direction:column;will-change:transform;transition:box-shadow .3s var(--ease)}
.mate:hover{box-shadow:var(--sh),0 0 0 1px var(--line2)}
.mate--lead{background:var(--ink);color:#fff;box-shadow:var(--sh)}
.mate--lead .mate__role,.mate--lead p,.mate--lead .mate__cred li{color:var(--steel3)!important}
.mate--lead .face--ph{background:radial-gradient(120% 120% at 30% 20%,var(--c700) 0,var(--c800) 60%,var(--c850) 100%);color:#fff;box-shadow:0 0 0 1px var(--c700) inset}
.mate--lead .mate__cred li{box-shadow:0 0 0 1px var(--c700) inset}
.mate--lead .mate__cred img{filter:invert(1)}
.mate__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}
.mate__mk svg{width:44px;height:44px;overflow:visible}
.mate__mk path{will-change:transform}
.mate__role{font-size:11px!important;margin-bottom:8px}
.mate h3{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.mate>p:not(.mate__role){color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:22px}
.mate__cred{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px}
.mate__cred li{display:inline-flex;align-items:center;gap:6px;font-size:10px!important;padding:5px 7px;border-radius:6px;box-shadow:0 0 0 1px var(--line) inset}
.mate__cred img{width:auto}
.crew__note{margin-top:20px}

/* ---------- footer ---------- */
.foot__mark svg{overflow:visible}
.foot__mark [data-fp]{will-change:transform}
.foot__links a{display:inline-block;justify-self:start;will-change:transform;background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 1px no-repeat;transition:color .15s,background-size .3s var(--ease)}
.foot__links a:hover{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .tix li,.gal__t,.clients__row a{transition:none}
  .ln.is-flash,.lcard.is-flash{animation:none}
}

/* case pages */
.case__live{margin-top:28px}
.cquote__who{display:flex;align-items:center;gap:16px;margin-top:32px}
.cquote__who .face{width:52px;height:52px}
.cquote__who>.mono{margin:0}
.cquote__logo{width:auto;margin-left:24px;padding-left:24px;border-left:1px solid var(--line);filter:brightness(0);opacity:.7}
.cquote__num{margin-left:auto;display:flex;align-items:baseline;gap:10px}
.cquote__num b{font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--blue)}
.cquote blockquote{text-wrap:balance}

/* problem: 3D stage */
.p3d{position:relative;height:440px;border-radius:16px;background:radial-gradient(120% 90% at 50% 40%,#22262B 0,#16191C 70%);box-shadow:0 0 0 1px var(--c700) inset;overflow:hidden}
.p3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.p3d__cap{position:absolute;left:16px;right:16px;bottom:14px;display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.04em;pointer-events:none}
.p3d__cap span{padding:5px 8px;border-radius:6px;box-shadow:0 0 0 1px var(--c700) inset;color:var(--steel3)}
.p3d__cap em{font-style:normal;color:#EDEEEC;text-transform:none;letter-spacing:0;font-family:var(--f);font-size:14px}
.p3d__cap.is-in{animation:capIn .5s cubic-bezier(.22,1,.36,1)}
.p3d__cap.is-bfs span{color:#fff;background:var(--blue);box-shadow:none}
@keyframes capIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* stack: config + 3D tile board */
.stk{position:relative;height:calc(100vh + 7 * 42vh);margin-top:120px}
.stk__sticky{position:sticky;top:0;height:100vh;min-height:760px;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.stk__head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:36px}
.stk__head .lede{max-width:400px;margin:0}
.stk__grid{display:grid;grid-template-columns:540px 1fr;gap:48px;align-items:center}
.cfg{border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh),0 0 0 1px var(--line);overflow:hidden}
.cfg__body{margin:0;padding:16px 0;font:450 12.5px/26px var(--mono);color:var(--ink);white-space:pre;overflow:hidden}
.cfg__body code{display:block;white-space:normal}
.cfg .ln{display:block;white-space:pre;position:relative;padding:0 20px 0 52px;transition:background-color .35s var(--ease),opacity .35s var(--ease)}
.cfg .ln>i{position:absolute;left:0;width:36px;text-align:right;font-style:normal;color:var(--steel);opacity:.7}
.cfg .row{cursor:pointer}
.cfg .row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transition:transform .35s var(--ease)}
.cfg .row.is-on{background:var(--blue-wash)}
.cfg .row.is-on::before{transform:scaleY(1)}
.cfg .row.is-on>i{color:var(--blue);opacity:1}
.cfg.has-on .row:not(.is-on){opacity:.42}
.c-c{color:#7D8288}.c-k2{color:var(--muted)}
.cfg__ok{display:flex;justify-content:space-between;align-items:center;margin:0;padding:12px 20px;background:var(--blue);color:#fff!important;font-size:11px!important}
.cfg__ok span{display:inline-flex;align-items:center;gap:8px;color:#fff}
.cfg__ok i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.tboard{display:flex;flex-direction:column;align-items:center}
.tboard__cats{list-style:none;margin:0 0 4px;padding:4px;display:flex;gap:2px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:11px}
.tboard__cats button{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;height:30px;padding:0 11px;border-radius:999px;white-space:nowrap;color:var(--muted);transition:color .3s,background-color .3s}
.tboard__cats em{display:none}
.tboard__cats li.is-on button{color:var(--blue);background:var(--blue-wash)}
.tboard__cats button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tboard__stage{height:470px;width:100%;perspective:2200px;display:grid;place-items:center}
.tboard__plane{--t:84px;list-style:none;margin:0;padding:0;position:relative;width:calc(6 * var(--t));height:calc(6 * var(--t));transform-style:preserve-3d;transform:translate3d(0,-64px,0) rotateX(56deg) rotateZ(-42deg)}
.tboard__plane::before{content:"";position:absolute;inset:-14px;border-radius:22px;background:repeating-linear-gradient(0deg,transparent 0 83px,var(--line) 83px 84px),repeating-linear-gradient(90deg,transparent 0 83px,var(--line) 83px 84px);opacity:.55;-webkit-mask:radial-gradient(closest-side,#000 60%,transparent);mask:radial-gradient(closest-side,#000 60%,transparent)}
.tile{--a:0;position:absolute;left:calc(var(--c) * var(--t));top:calc(var(--r) * var(--t));width:var(--ts,72px);height:var(--ts,72px);transform-style:preserve-3d;transform:translate3d(0,0,calc(var(--a) * var(--td,26px)));cursor:pointer}
.tile::before{content:"";position:absolute;inset:6px;border-radius:12px;background:rgba(10,30,80,.5);filter:blur(10px);opacity:calc(var(--a) * .45);transform:translate3d(6px,6px,calc(var(--a) * var(--td,26px) * -1))}
.tile__face{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-weight:400}
.tile__face::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:0 0 0 1.5px var(--blue),0 0 24px rgba(0,88,246,.28);opacity:var(--a)}
.tile__face i{width:26px;height:26px;background:color-mix(in srgb,var(--blue) calc(var(--a) * 100%),#A4A8AD);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.tile__face span{font:500 8.5px/1 var(--mono);letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.tile s{position:absolute;display:block;text-decoration:none}
.tile__s1{left:2px;right:2px;top:100%;height:var(--td,26px);background:#0047CC;transform-origin:top;transform:rotateX(-90deg) scaleY(var(--a))}
.tile__s2{top:2px;bottom:2px;left:100%;width:var(--td,26px);background:#0036A0;transform-origin:left;transform:rotateY(90deg) scaleX(var(--a))}
@media (prefers-reduced-motion:reduce){.stk{height:auto}.stk__sticky{position:relative;height:auto}}

/* pricing: every card light; only the fit / hovered plan gets a blue border + faint tint */
.inv,.inv--ent{background:var(--surface);color:var(--ink)}
.inv.is-fit{background:linear-gradient(180deg,rgba(0,88,246,.035),rgba(0,88,246,0) 220px),var(--surface)}
.inv:hover,.inv:focus-within{box-shadow:var(--sh),0 0 0 1.5px var(--blue)}
.invoices.has-fit .inv:not(.is-fit):hover,.invoices.has-fit .inv:not(.is-fit):focus-within{opacity:1}
/* how it works: isometric build plate; tool tiles ring the plot, the site builds in the middle */
.pstage__body.iso{height:372px;overflow:hidden}
.iso__stage{position:absolute;inset:0 0 44px;perspective:1800px;display:grid;place-items:center}
.iso__plane{--t:62px;--ts:54px;--td:18px;--k:0;position:relative;width:calc(5 * var(--t));height:calc(5 * var(--t));transform-style:preserve-3d;transform:translate3d(0,-6px,0) rotateX(57deg) rotateZ(-45deg)}
.iso__plane::before{content:"";position:absolute;inset:-10px;border-radius:18px;background:repeating-linear-gradient(0deg,transparent 0 61px,var(--line) 61px 62px),repeating-linear-gradient(90deg,transparent 0 61px,var(--line) 61px 62px);opacity:.6;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent);mask:radial-gradient(closest-side,#000 62%,transparent)}
.iso__tiles{list-style:none;margin:0;padding:0;position:absolute;inset:0;transform-style:preserve-3d}
.iso .tile{margin:4px}
.iso .tile__face{border-radius:9px}
.iso .tile__face::after{border-radius:9px}
.iso .tile__face i{width:22px;height:22px}
.iso .tile__face span{display:none}
.iso__flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.iso__flow path{fill:none;stroke:var(--blue);stroke-width:.035;stroke-linecap:round;stroke-dasharray:.08 .1;opacity:0;animation:isoFlow 1.2s linear infinite;animation-play-state:paused}
.iso__flow path.is-on{animation-play-state:running}
@keyframes isoFlow{to{stroke-dashoffset:-.36}}
.iso__plot{position:absolute;left:calc(var(--t) + 6px);top:calc(var(--t) + 6px);width:calc(3 * var(--t) - 12px);height:calc(3 * var(--t) - 12px);transform-style:preserve-3d}
.iso__plot::before{content:"";position:absolute;inset:0;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--blue) 45%,var(--line2))}
/* step 0: the empty plot pulses while you talk */
.iso__ring{position:absolute;inset:-6px;border-radius:16px;box-shadow:0 0 0 1.5px var(--blue),0 0 34px rgba(0,88,246,.35);opacity:calc(clamp(0,1 - var(--k),1) * .7 + clamp(0,var(--k) - 3,1) * .9);transform:translate3d(0,0,1px)}
/* step 1: blueprint lines */
.iso__plan{position:absolute;inset:10px;opacity:calc(clamp(0,var(--k) * 1.6,1) * clamp(0,2.2 - var(--k),1));transform:translate3d(0,0,1px)}
.iso__plan i{position:absolute;left:0;height:1.5px;background:var(--blue);transform-origin:left;transform:scaleX(clamp(0,var(--k) * 1.3,1))}
.iso__plan i:nth-child(1){top:0;right:0;width:100%}
.iso__plan i:nth-child(2){top:24%;width:70%}
.iso__plan i:nth-child(3){top:44%;width:52%}
.iso__plan i:nth-child(4){top:70%;width:86%}
/* steps 2-5: design panel extrudes into page sections, ships, then measures */
.iso__site{position:absolute;inset:0;transform-style:preserve-3d;opacity:clamp(0,(var(--k) - 1) * 1.6,1);transform:translate3d(0,0,calc(clamp(0,var(--k) - 3,1) * 14px))}
.iso-l{--b:clamp(0,var(--k) - 2,1);position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,0,calc(var(--i) * 1px + var(--b) * (var(--i) * 22px + 12px)))}
.iso-l__f{position:absolute;inset:0;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--line);overflow:visible;transform-style:preserve-3d}
.iso-l:not([style*="--i:2"]) .iso-l__f{background:color-mix(in srgb,var(--blue) calc(var(--b) * 9%),#fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) calc(var(--b) * 50%),var(--line))}
.iso-l__f p{position:absolute;left:12px;top:12px;margin:0;font-size:9px!important;color:var(--blue);opacity:var(--b)}
.iso-l s{position:absolute;display:block;text-decoration:none}
.iso-l__s1{left:3px;right:3px;top:100%;height:12px;background:#0047CC;transform-origin:top;transform:rotateX(-90deg) scaleY(var(--b))}
.iso-l__s2{top:3px;bottom:3px;left:100%;width:12px;background:#0036A0;transform-origin:left;transform:rotateY(90deg) scaleX(var(--b))}
.iso-l[style*="--i:2"] .iso-l__f{box-shadow:0 0 0 calc(1px + clamp(0,var(--k) - 3,1) * .5px) color-mix(in srgb,var(--blue) calc(clamp(0,var(--k) - 3,1) * 100%),var(--line)),0 calc(var(--b) * 10px) 30px rgba(0,40,120,calc(var(--b) * .18))}
.iso-l__f>i{position:absolute;left:12px;border-radius:3px;background:var(--raised)}
.u-nav{top:10px;right:12px;height:6px;background:var(--line)!important}
.u-h{top:28px;width:62%;height:10px;background:var(--ink)!important;opacity:.85}
.u-h2{top:44px;width:44%;height:6px}
.u-cta{top:58px;width:30%;height:12px;background:var(--blue)!important;border-radius:4px!important}
.iso__bars{position:absolute;left:12px;right:12px;bottom:12px;height:34px;display:flex;align-items:flex-end;gap:8px;transform-style:preserve-3d}
.iso__bars b{flex:1;height:100%;background:linear-gradient(var(--blue),#4D8DFF);border-radius:3px 3px 0 0;transform-origin:bottom;transform:rotateX(-90deg) scaleY(calc(clamp(0,(var(--k) - 4) * 1.4,1) * var(--h) * 1.6));opacity:clamp(0,(var(--k) - 4) * 5,1)}
.iso__caps{list-style:none;margin:0;padding:0;position:absolute;left:18px;right:18px;bottom:16px;height:16px;font-size:11px!important;color:var(--ink)}
.iso__caps li{position:absolute;inset:0;opacity:0;transform:translate3d(0,6px,0);transition:opacity .35s var(--ease),transform .45s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iso__caps li.is-on{opacity:1;transform:none}
.iso__caps li.is-tool{color:var(--blue)}
/* perf: slips raster cheaply (baked ink logos, short-blur shadow) */
.slip{box-shadow:0 1px 2px rgba(17,19,22,.05),0 0 0 1px var(--line)}
.slip__logo[src$="-ink.png"]{filter:none}