/* /work page (services hub). Tokens, fonts, .bar, .btn and the whole hero scene come from hero.css; js/hero.js drives the hero,
   js/work.js everything below it. Same language as the homepage: dark ground, the faint LED dot grid, gold only where it means
   something, dot-mask reveals, and the wand (the 8-LED stick) as the recurring gesture. */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}

/* ================= hero ================= */
.bar .avl{min-height:0;display:inline-flex}
.hero.work .title .t1{font-weight:400;font-size:clamp(16px,4.5vw,21px);line-height:1.75;color:var(--txt);max-width:24em;text-wrap:balance}
.hero.work .title{margin-top:14px}
.hero.work .divider{margin:20px auto 14px}
.hero.work .note{font-size:14px;line-height:1.5;color:rgba(227,227,227,.72)}
html[lang=ar] .hero.work .title .t1{font-family:'P','EB',system-ui,sans-serif;font-weight:400}
/* what the painted 99+ means, shown under it while it glows */
.wcap{position:absolute;z-index:3;top:0;left:50%;transform:translate(-50%,6px);padding:5px 14px;border-radius:45px;background:rgba(25,25,35,.78);color:var(--acc);font-size:13.5px;line-height:1.4;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.wcap.on{opacity:1;transform:translate(-50%,0)}

/* ================= shared ================= */
.svc,.proof,.race,.proc,.price,.voices,.faq,.ai{position:relative;padding:96px var(--m) 44px;background-image:radial-gradient(rgba(255,193,7,.1) 1.2px,transparent 1.5px);background-size:20px 20px;background-position:10px 10px} /* taste-skill-ignore: dot pattern, not a gradient fill */
.wtitle{--r:0px;font-size:clamp(44px,13vw,84px);line-height:1.15;color:var(--pri);-webkit-mask-image:radial-gradient(circle at center,#000 var(--r),transparent calc(var(--r) + .6px));mask-image:radial-gradient(circle at center,#000 var(--r),transparent calc(var(--r) + .6px));-webkit-mask-size:8px 8px;mask-size:8px 8px;transition:--r 1.2s var(--ease)} /* taste-skill-ignore: dot mask reveal */
.wtitle.in{--r:6px}
html:not(.js) .wtitle{-webkit-mask-image:none;mask-image:none}
/* the hero's gold line turns downward and ends in a live node, as on the homepage */
.vline{position:absolute;top:0;inset-inline-start:var(--m);width:2px;height:62px;background:var(--acc);display:block}
.vnode{position:absolute;bottom:-7px;inset-inline-start:-6px;width:14px;height:14px;border-radius:50%;background:var(--acc);display:block}
.vnode::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--acc);opacity:0;animation:live 2.2s var(--ease) 1s 3}
@keyframes live{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.4);opacity:0}}
/* 8x8 LED icons */
.led{width:54px;height:54px;flex:none;overflow:visible}
.led circle{fill:var(--acc);opacity:.1;transform-box:fill-box;transform-origin:center;transition:fill .3s}
.led .on{opacity:.92}
.led.no circle{fill:var(--txt)}
.led.no .on{opacity:.5}
/* a screenshot in a slim browser frame */
.frame{margin:0;overflow:hidden;border-radius:14px;border:2px solid rgba(255,193,7,.3);background:var(--bg3)}
.fbar{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;direction:ltr;font:500 13px/1 'U',sans-serif;color:rgba(227,227,227,.75);white-space:nowrap;overflow:hidden}
.fbar i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.fimg{display:block;aspect-ratio:16/10;overflow:hidden;background:#fff}
.fimg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.frame.contain .fimg img{object-fit:contain;padding:6%}
/* client logos, drawn in gold from their own shapes */
.lg{display:block;height:30px;max-width:100%;background:var(--acc);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;transition:background .3s}
/* outline numbers that fill with gold from the baseline as they count */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;margin:24px 0 8px}
.stats.odd .st:last-child{grid-column:1/-1}
.st{min-width:0}
.cnt{display:grid;width:max-content;max-width:100%;direction:ltr;font:700 clamp(44px,13vw,62px)/1 'U',sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cnt i{grid-area:1/1;font-style:normal;text-align:start}
.cnt .g{color:var(--acc)}
.js .cnt .g{visibility:hidden}
.cnt .o{color:transparent;-webkit-text-stroke:2px var(--acc)}
.cnt .f{color:var(--acc);clip-path:inset(100% 0 0 0)}
.st>span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--txt)}
/* running text */
.svc-text,.svc-pts li,.svc-fit,.race-sub,.fact,.facts dd,.step p,.from>p,.incl li,.mode p,.fit-blk li,.vq blockquote p,.vwho span,.qa p,.cta-sub,.cta-note,.also,.mid p{font-family:'P','EB',system-ui,sans-serif;font-weight:400}
html:not([lang=ar]) .svc-text,html:not([lang=ar]) .svc-pts li,html:not([lang=ar]) .svc-fit,html:not([lang=ar]) .race-sub,html:not([lang=ar]) .fact,html:not([lang=ar]) .facts dd,html:not([lang=ar]) .step p,html:not([lang=ar]) .from>p,html:not([lang=ar]) .incl li,html:not([lang=ar]) .mode p,html:not([lang=ar]) .fit-blk li,html:not([lang=ar]) .vq blockquote p,html:not([lang=ar]) .vwho span,html:not([lang=ar]) .qa p,html:not([lang=ar]) .cta-sub,html:not([lang=ar]) .cta-note,html:not([lang=ar]) .also,html:not([lang=ar]) .ai-lead,html:not([lang=ar]) .ai-pts li,html:not([lang=ar]) .ai-result{font-family:'U',system-ui,sans-serif}

/* ================= logos ================= */
.logos{padding:40px var(--m);background:var(--bg2)}
.lgs{list-style:none;padding:0;margin:0 auto;max-width:1120px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 22px;align-items:center;justify-items:center}
.lgs li{display:flex;justify-content:center;width:100%}
.lgs li:hover .lg{background:var(--pri)}

/* ================= the speed race ================= */
.race-sub{margin-top:16px;max-width:34em;font-size:17.5px;line-height:1.95;color:#cfcfd8}
.race-stage{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;max-width:640px}
.rph{margin:0;display:grid;gap:12px}
.scr{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:22px;border:5px solid var(--bg3);background:#fff;transition:border-color .5s var(--ease)}
.scr .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .15s linear}
.spin{position:absolute;left:50%;top:44%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:3px solid #e1e2e6;border-top-color:#9a9ba3;opacity:0;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sk{position:absolute;inset:0;padding:12% 9%;display:grid;align-content:start;gap:5%;opacity:0}
.sk i{display:block;border-radius:6px;background:#eceef2}
.sk .s1{height:5vw;max-height:22px}.sk .s2{height:26vw;max-height:120px}.sk .s3,.sk .s4{height:3vw;max-height:14px}.sk .s4{width:70%}.sk .s5{height:22vw;max-height:100px}
.rph.p-spin .spin,.rph.p-sk .sk{opacity:1}
.js .rph .shot{opacity:0}
.js .rph.p-img .shot{opacity:1}
.rph figcaption{display:flex;flex-direction:column;gap:2px}
.rph figcaption b{font-size:15px;line-height:1.4;color:var(--txt)}
.rph .tm{font:700 26px/1.1 'U',sans-serif;color:rgba(227,227,227,.55);font-variant-numeric:tabular-nums;transition:color .4s}
.rph.done .tm{color:var(--txt)}
.rph.fast.done .tm{color:var(--acc)}
.rph.fast.done .scr{border-color:var(--acc)}
.race-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:26px;max-width:640px}
.fact{flex:1 1 16em;font-size:15.5px;line-height:1.8;color:var(--pri)}
.fact cite{font:500 13px/1 'U',sans-serif;font-style:normal;color:rgba(227,227,227,.7)}
.rnote{width:100%;font-size:13px;color:rgba(227,227,227,.6)}

/* ================= services: tabs + panels ================= */
.sw{margin-top:34px}
.sw-tabs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--m) * -1);padding:4px var(--m) 16px;scrollbar-width:none}
.sw-tabs::-webkit-scrollbar{display:none}
.sw-tab{position:relative;flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px 8px 14px;overflow:hidden;border-radius:45px;border:2px solid rgba(227,227,227,.18);background:var(--bg);color:rgba(227,227,227,.8);font:inherit;font-size:15px;line-height:1.3;cursor:pointer;transition:border-color .3s,color .3s}
.sw-tab .led{width:26px;height:26px}
.sw-tab:hover{color:var(--pri)}
.sw-tab.on{border-color:var(--acc);color:var(--pri)}
.sw-tab .prog{position:absolute;inset:auto 14px 3px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:100% 50%}
html[dir=ltr] .sw-tab .prog{transform-origin:0 50%}
.sw-tab.on.run .prog{transform:scaleX(1);transition:transform var(--dur,7s) linear}
.sw-panels{margin-top:16px}
.sw-panel{display:grid;gap:24px}
.js .sw-panel:not(.on){display:none}
html:not(.js) .sw-tabs{display:none}
html:not(.js) .sw-panel+.sw-panel{margin-top:64px}
.sw-panel.on .frame{animation:sw-frame .7s var(--ease)}
.sw-panel.on .sw-txt>*{animation:sw-txt .7s var(--ease) backwards}
.sw-panel.on .sw-txt>:nth-child(2){animation-delay:.08s}.sw-panel.on .sw-txt>:nth-child(3){animation-delay:.16s}.sw-panel.on .sw-txt>:nth-child(4){animation-delay:.24s}
@keyframes sw-frame{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes sw-txt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sw-txt h3{font-size:clamp(27px,7.6vw,38px);line-height:1.35;color:var(--pri)}
.sw-txt h3 a{display:inline;transition:color .3s}
.sw-txt h3 a:hover{color:var(--acc)}
.sw-txt .go{display:inline-block;vertical-align:middle;margin-inline-start:12px;color:var(--acc)}
.sw-txt .go svg{width:.62em;height:.62em}
html[dir=ltr] .sw-txt .go svg{transform:scaleX(-1)}
.svc-text{margin-top:10px;font-size:16.5px;line-height:1.95;color:#cfcfd8}
.svc-pts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.svc-pts li{position:relative;padding-inline-start:20px;font-size:16px;line-height:1.85;color:#cfcfd8}
.svc-pts li::before{content:"";position:absolute;inset-inline-start:0;top:.95em;width:6px;height:6px;border-radius:50%;background:rgba(255,193,7,.55)}
.svc-fit{margin-top:16px;font-size:14.5px;line-height:1.85;color:rgba(227,227,227,.8)}
.svc-fit b{font-family:'EB','P',sans-serif;font-weight:700;color:var(--acc)}

/* ================= proof ================= */
.case{display:grid;gap:34px;margin-top:44px}
.case+.case{margin-top:84px}
.cvis{position:relative}
.majarra .cvis{padding-bottom:calc(17% + 18px)}
.frame.mini{position:absolute;bottom:0;width:47%;z-index:2;border-color:rgba(255,193,7,.45)}
.frame.mini .fbar{height:26px;font-size:12px}
.frame.m0{right:3%;transform:rotate(2.5deg)}
.frame.m1{left:3%;transform:rotate(-2.5deg)}
.tile{position:absolute;overflow:hidden;background:var(--bg2);border:5px solid var(--bg);transition:transform .5s var(--ease)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.tile.team{top:-20px;right:-4px;width:30%;aspect-ratio:1;border-radius:14px;transform:rotate(4deg);z-index:3} /* right: the frame bar shows the domain on the left */
.cvis .human{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:top;display:block;background:var(--bg2)}
.phone{bottom:-16px;right:12px;width:32%;aspect-ratio:390/844;border-radius:20px;transform:rotate(3deg)}
.phone:hover{transform:rotate(0) translateY(-4px)}
.ctxt h3{font-size:clamp(34px,10vw,52px);line-height:1.25;color:var(--pri)}
.meta{margin-top:4px;color:var(--acc);font-size:15px;line-height:1.5}
.facts{display:grid;gap:14px;margin:22px 0 4px}
.facts div{display:grid;grid-template-columns:4.6em 1fr;gap:12px;align-items:baseline}
.facts dt{font-size:15px;color:var(--acc)}
.facts dd{margin:0;font-size:16.5px;line-height:1.9;color:#cfcfd8}
.majarra .stats.three{grid-template-columns:repeat(3,1fr)}
.majarra .stats.three .st:last-child{grid-column:auto}
.cnote{margin-top:2px;font-size:13px;color:rgba(227,227,227,.72)}
.sites{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sites a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border:2px solid rgba(255,193,7,.6);border-radius:45px;font:500 13.5px/1 'U',sans-serif;direction:ltr;color:var(--pri);transition:background .3s,color .3s,border-color .3s}
.sites a:hover,.sites a:focus-visible{background:var(--acc);color:var(--bg);border-color:var(--acc)}
.also{margin-top:16px;font-size:14px;line-height:1.8;color:rgba(227,227,227,.75)}
.case .btn{margin-top:22px}
.case .btn svg{width:18px;height:18px}
html[dir=ltr] .case .btn svg{transform:scaleX(-1)}
/* one line and a button, for the visitor who is convinced here */
.mid{margin-top:76px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:30px;border-top:2px solid rgba(255,193,7,.3)}
.mid p{font-family:'EB','P',sans-serif;font-weight:700;font-size:clamp(24px,6.8vw,34px);line-height:1.4;color:var(--pri)}

/* ================= AI ================= */
.ai{background-color:var(--bg2);padding-bottom:90px}
.ai-grid{display:grid;gap:36px;margin-top:20px}
.ai-lead,.ai-pts li,.ai-result{font-family:'P','EB',system-ui,sans-serif;font-weight:400}
.ai-lead{font-size:18px;line-height:1.95;color:var(--pri)}
.ai-pts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.ai-pts li{position:relative;padding-inline-start:20px;font-size:16.5px;line-height:1.9;color:#cfcfd8}
.ai-pts li::before{content:"";position:absolute;inset-inline-start:0;top:.95em;width:6px;height:6px;border-radius:50%;background:rgba(255,193,7,.55)}
.ai-result{margin-top:26px;font-size:19px;line-height:1.8;font-weight:500;color:var(--pri)}
.ai-result mark{background:rgba(255,193,7,.17);color:var(--pri);padding:0 .22em;margin:0 -.1em;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the code panel: every line starts dim and is "reviewed" in turn */
.ai-demo{position:relative;direction:ltr;overflow:hidden;border:2px solid rgba(255,193,7,.35);border-radius:16px;background:var(--bg)}
.ai-bar{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:rgba(227,227,227,.05);font:12.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:rgba(227,227,227,.6)} /* taste-skill-ignore: literal code panel */
.ai-bar i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.ai-code{position:relative;padding:14px 0;overflow-x:auto;font:12.5px/2.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* taste-skill-ignore: literal code panel */
.cl{position:relative;padding-left:calc(40px + var(--i) * 1.3em);padding-right:14px;color:rgba(227,227,227,.5);white-space:pre;transition:color .4s}
.cl .g{position:absolute;left:18px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:rgba(227,227,227,.22);transition:background .4s}
.cl.ok{color:var(--txt)}
.cl.ok .g{background:var(--acc)}
.cl.ok .k{color:var(--acc)}
.cl.ok .f{color:var(--pri)}
.cl.ok .s{color:#ffecaa}
.scanY{position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc);opacity:0;pointer-events:none;transition:transform .34s linear,opacity .3s}
.scanY::before{content:"";position:absolute;inset:auto 0 100%;height:26px;background:rgba(255,193,7,.1)}
.ai-demo.run .scanY{opacity:1}
.ai-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(227,227,227,.05);font-size:14px;color:rgba(227,227,227,.88)}
html[dir=rtl] .ai-foot{direction:rtl}
.ai-foot .av{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--acc)}
.ai-foot .n{min-width:1ch;color:var(--acc);font:700 17px/1 'U',sans-serif;font-variant-numeric:tabular-nums}

/* ================= process: the wand runs the rail ================= */
.steps-w{position:relative;margin-top:44px}
.rail{position:absolute;inset-inline-start:6px;top:8px;bottom:8px;width:2px;background:rgba(255,193,7,.22)}
.rail .fill{position:absolute;inset:0;background:var(--acc);transform:scaleY(var(--p,0));transform-origin:50% 0}
.rail .head{position:absolute;inset-inline-start:-4px;top:calc(var(--p,0) * 100%);display:grid;gap:3px;transform:translateY(-50%)}
.rail .head b{display:block;width:10px;height:4px;border-radius:2px;background:#ffecaa}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:46px}
.step{position:relative;padding-inline-start:46px}
.node{position:absolute;inset-inline-start:0;top:8px;width:14px;height:14px;border-radius:50%;background:var(--bg3);box-shadow:inset 0 0 0 2px rgba(255,193,7,.5);transition:background .5s var(--ease)} /* taste-skill-ignore: a ring, not a drop shadow */
.node::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--acc);opacity:0}
.step.lit .node{background:var(--acc)}
.step.lit .node::after{animation:live 2.2s var(--ease) 2}
.sn{display:block;font:700 clamp(54px,16vw,72px)/1 'U',sans-serif;color:transparent;-webkit-text-stroke:2px var(--acc);direction:ltr;text-align:start;transition:color .9s var(--ease)}
html[dir=rtl] .sn{text-align:right}
.step.lit .sn{color:var(--acc)}
.step h3{margin-top:8px;font-size:clamp(26px,7.4vw,34px);line-height:1.35;color:var(--pri)}
.step p{margin-top:6px;font-size:16.5px;line-height:1.9;color:#cfcfd8}
.step .out{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:6px 16px;border-radius:45px;background:rgba(255,193,7,.1);font-size:14.5px;line-height:1.6;color:var(--acc)}
.step .out::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc)}

/* ================= pricing + who it is for ================= */
.price-grid{display:grid;gap:44px;margin-top:36px}
.from .cnt{font-size:clamp(84px,26vw,140px)}
.from .cnt .o{-webkit-text-stroke-width:3px}
.from>p{margin-top:14px;max-width:26em;font-size:16.5px;line-height:1.9;color:#cfcfd8}
.from>p b{font-weight:500;color:var(--pri)}
.incl-h{margin-top:28px;font-size:21px;line-height:1.4;color:var(--pri)}
.incl{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.incl li{position:relative;padding-inline-start:22px;font-size:16px;line-height:1.85;color:#cfcfd8}
.incl li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:9px;height:5px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)} /* physical sides: a check mark is the same in both directions */
.modes{list-style:none;padding:0;margin:0}
.mode{position:relative;padding:24px 0 26px}
.mode::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:rgba(255,193,7,.3)}
.mode h3{font-size:clamp(24px,6.6vw,30px);line-height:1.35;color:var(--pri)}
.mode p{margin-top:4px;font-size:16.5px;line-height:1.85;color:#cfcfd8}
.fitrow{display:grid;margin-top:40px}
.fit-blk{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 16px;padding:28px 0 30px}
.fit-blk::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:rgba(255,193,7,.3)}
.fit-blk .led{width:48px;height:48px;grid-area:1/1}
.fit-blk h3{grid-area:1/2;font-size:clamp(24px,6.8vw,32px);line-height:1.3}
.fit-blk.yes h3{color:var(--acc)}
.fit-blk.no h3{color:rgba(227,227,227,.82)}
.fit-blk ul{grid-area:2/1/3/3;list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.fit-blk li{position:relative;padding-inline-start:22px;font-size:16.5px;line-height:1.85;color:#cfcfd8}
.fit-blk li::before{content:"";position:absolute;inset-inline-start:0;top:.9em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.fit-blk.no li::before{background:none;border:2px solid rgba(227,227,227,.5)}

/* ================= voices ================= */
.voices{background-color:var(--bg2);padding-bottom:90px}
.vgrid{display:grid;gap:50px;margin-top:40px}
.vq{margin:0;display:grid;gap:20px;align-content:start}
.stick{display:flex;gap:8px}
.stick b{width:9px;height:9px;border-radius:50%;background:var(--acc);opacity:.95}
.vq blockquote{margin:0}
.vq blockquote p{font-weight:500;font-size:18.5px;line-height:1.95;color:var(--pri)}
.vq figcaption{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.vph{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--acc)}
.vph.ini{display:grid;place-items:center;font-size:20px;color:var(--acc);background:var(--bg)}
.vwho{display:grid;gap:2px;justify-items:start}
.vwho b{font-size:19px;line-height:1.4;color:var(--acc)}
.vwho span{font-size:14px;line-height:1.6;color:rgba(227,227,227,.82)}
.vwho a{margin-top:4px;font:500 13px/1 'U',sans-serif;color:var(--acc);text-decoration:underline;text-underline-offset:5px;direction:ltr}
.vwho a:hover{color:var(--pri)}
.vq .lg{height:24px;opacity:.75}

/* ================= FAQ ================= */
.faq-list{margin-top:36px;max-width:56em}
.qa{border-top:2px solid rgba(255,193,7,.3)}
.qa:last-child{border-bottom:2px solid rgba(255,193,7,.3)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:22px 0;cursor:pointer;font-size:clamp(19px,5.4vw,24px);line-height:1.55;color:var(--pri);transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover,.qa[open] summary{color:var(--acc)}
.qa summary i{position:relative;flex:none;width:22px;height:22px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;inset-inline:3px;top:10px;height:2px;border-radius:2px;background:var(--acc);transition:transform .35s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{padding:0 0 26px;max-width:42em;font-size:16.5px;line-height:1.95;color:#cfcfd8}
.qa[open] p{animation:qa-in .5s var(--ease)}
@keyframes qa-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ================= closing call ================= */
.cta{position:relative;overflow:hidden;background-color:var(--bg2);padding:96px var(--m) 0;background-image:radial-gradient(rgba(255,193,7,.1) 1.2px,transparent 1.5px);background-size:20px 20px;background-position:10px 10px} /* taste-skill-ignore: dot pattern, not a gradient fill */
.cta-in{display:grid;max-width:1240px;margin-inline:auto}
.cta .wtitle{font-size:clamp(46px,13.5vw,96px)}
.cta-sub{margin-top:16px;font-weight:500;font-size:20px;line-height:1.8;color:var(--pri)}
.cta-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:30px}
.btn.big{padding:16px 34px;font-size:18px}
.cta-mail{color:var(--acc);font-size:16px;text-decoration:underline;text-underline-offset:6px;min-height:44px;display:inline-flex;align-items:center}
.cta-mail:hover{color:var(--pri)}
.cta-note{margin-top:20px;font-size:14.5px;line-height:1.8;color:rgba(227,227,227,.78)}
.cta-fig{margin-top:30px;height:min(82vw,340px);display:flex;justify-content:center;overflow:hidden;pointer-events:none}
.cta-fig img{width:min(300px,76vw);height:100%;object-fit:cover;object-position:50% 0}

/* ================= footer ================= */
.mwand{display:none}
.js .mwand{display:inline-block;cursor:pointer}
.foot{padding:56px var(--m) 36px;overflow:hidden;text-align:center;background:var(--bg)}
.js .mwand.ft{display:block;margin:0 auto 18px}
.fname{font-size:clamp(22px,6.6vw,56px);line-height:1.4;color:var(--acc)}
.fname .nw{white-space:nowrap}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin-top:14px}
.flinks a{min-height:44px;display:inline-flex;align-items:center;font-size:14.5px;color:rgba(227,227,227,.82);text-decoration:underline;text-underline-offset:5px}
.flinks a:hover{color:var(--acc)}
/* phone-only WhatsApp pill: out of the way while you read (shown when you scroll back up), hidden at the closing call */
.wa-pill{position:fixed;inset-inline:0;margin-inline:auto;bottom:max(16px,env(safe-area-inset-bottom));z-index:20;width:max-content;display:inline-flex;align-items:center;gap:9px;border-radius:45px;border:2px solid var(--acc);background:var(--bg);color:var(--pri);padding:11px 22px;font-size:15px;line-height:1.2;transform:translateY(190%);transition:transform .5s var(--ease),background .3s,color .3s}
.wa-pill.on{transform:none}
.wa-pill svg{width:18px;height:18px}
.wa-pill:hover,.wa-pill:focus-visible{background:var(--acc);color:var(--bg)}

/* ================= entrance (JS on) ================= */
.js .lgs li{opacity:.1;transition:opacity .6s var(--ease) calc(var(--k,0) * .12s + .1s)}
.js .lgs.seen li{opacity:1}
.js .sw{transform:translateY(14px);transition:transform .8s var(--ease) .2s}
.js .sw.seen{transform:none}
.js .race-sub,.js .race-stage,.js .race-foot,.js .mid{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s}
.js .race-sub.seen,.js .race-stage.seen,.js .race-foot.seen,.js .mid.seen{opacity:1;transform:none}
.js .led .on{opacity:.1;transform:scale(.3);transition:opacity .5s var(--ease) calc(var(--c) * .07s + .35s),transform .6s var(--ease) calc(var(--c) * .07s + .35s),fill .3s}
.js .seen .led .on{opacity:.92;transform:none}
.js .seen .led.no .on{opacity:.5}
.js .seen .sw-tab:not(.on) .led .on{opacity:.45}
.js .case .human,.js .case .tile,.js .case .frame{--r:0px;-webkit-mask-image:radial-gradient(circle at center,#000 var(--r),transparent calc(var(--r) + .6px));mask-image:radial-gradient(circle at center,#000 var(--r),transparent calc(var(--r) + .6px));-webkit-mask-size:10px 10px;mask-size:10px 10px;filter:blur(5px) brightness(.55);transition:--r 1s var(--ease),filter 1.1s var(--ease)} /* taste-skill-ignore: dot mask reveal */
.js .case .frame.mini,.js .case .tile{transition:--r 1s var(--ease) .35s,filter 1.1s var(--ease) .35s,transform .5s var(--ease)}
.js .case .frame.m1{transition-delay:.5s}
.js .case.seen .human,.js .case.seen .tile,.js .case.seen .frame{--r:8px;filter:none}
.js .case h3,.js .case .meta,.js .case .stats,.js .case .cnote,.js .case .sites,.js .case .also,.js .case .btn{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
.js .case .meta{transition-delay:.4s}.js .case .stats{transition-delay:.75s}.js .case .cnote{transition-delay:.85s}.js .case .sites{transition-delay:.9s}.js .case .also{transition-delay:1s}.js .case .btn{transition-delay:.9s}
.js .case.seen h3,.js .case.seen .meta,.js .case.seen .stats,.js .case.seen .cnote,.js .case.seen .sites,.js .case.seen .also,.js .case.seen .btn{opacity:1;transform:none}
.js .facts div{clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path 1s var(--ease) calc(var(--k,0) * .12s + .45s),opacity .35s linear calc(var(--k,0) * .12s + .45s)}
html[dir=rtl].js .facts div{clip-path:inset(0 0 0 100%)}
html[dir].js .case.seen .facts div{clip-path:inset(0);opacity:1}
.js .step .sn,.js .step h3,.js .step p{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .15s,transform .7s var(--ease) .15s,color .9s var(--ease)}
.js .step h3{transition-delay:.25s}.js .step p{transition-delay:.35s}.js .step .out{transition-delay:.5s}
.js .step.seen .sn,.js .step.seen h3,.js .step.seen p{opacity:1;transform:none}
.js .mode::before,.js .fit-blk::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease)}
html[dir=rtl].js .mode::before,html[dir=rtl].js .fit-blk::before{transform-origin:100% 50%}
.js .mode.seen::before,.js .fit-blk.seen::before{transform:none}
.js .mode h3,.js .mode p,.js .from>*,.js .fit-blk h3,.js .fit-blk li{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
.js .mode p{transition-delay:.45s}
.js .from>.st{transition-delay:.1s}.js .from>p{transition-delay:.4s}.js .from>.incl-h{transition-delay:.55s}.js .from>.incl{transition-delay:.65s}
.js .fit-blk li{transition-delay:calc(var(--p,0) * .12s + .5s)}
.js .mode.seen h3,.js .mode.seen p,.js .from.seen>*,.js .fit-blk.seen h3,.js .fit-blk.seen li{opacity:1;transform:none}
.js .vq blockquote,.js .vq figcaption{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .55s,transform .8s var(--ease) .55s}
.js .vq figcaption{transition-delay:.85s}
.js .vq.seen blockquote,.js .vq.seen figcaption{opacity:1;transform:none}
.js .stick b{opacity:.12;transition:opacity .45s var(--ease)}
.js .stick b:nth-child(1){transition-delay:.15s}.js .stick b:nth-child(2){transition-delay:.22s}.js .stick b:nth-child(3){transition-delay:.29s}.js .stick b:nth-child(4){transition-delay:.36s}.js .stick b:nth-child(5){transition-delay:.43s}.js .stick b:nth-child(6){transition-delay:.5s}.js .stick b:nth-child(7){transition-delay:.57s}.js .stick b:nth-child(8){transition-delay:.64s}
.js .vq.seen .stick b{opacity:.95}
.js .ai-lead,.js .ai-result{clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path 1s var(--ease) .3s,opacity .35s linear .3s}
html[dir=rtl].js .ai-lead,html[dir=rtl].js .ai-result{clip-path:inset(0 0 0 100%)}
html[dir].js .ai-lead.seen,html[dir].js .ai-result.seen{clip-path:inset(0);opacity:1}
.js .ai-result{transition-delay:.9s}
.js .ai-pts li{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) calc(var(--p, 0) * .12s + .6s),transform .7s var(--ease) calc(var(--p, 0) * .12s + .6s)}
.js .ai-pts.seen li{opacity:1;transform:none}
.js .ai-demo{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s}
.js .ai-demo.seen{opacity:1;transform:none}
.js .cta-sub,.js .cta-act,.js .cta-note{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s}
.js .cta-act{transition-delay:.5s}.js .cta-note{transition-delay:.7s}
.js .cta-sub.seen,.js .cta-act.seen,.js .cta-note.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.vnode::after,.node::after,.qa[open] p,.spin,.sw-panel.on .frame,.sw-panel.on .sw-txt>*{animation:none}
.wtitle,.wcap,.wa-pill,.scr,.scr .shot,.sw-tab .prog,.js .lgs li,.js .race-sub,.js .race-stage,.js .race-foot,.js .sw,.js .mid,.js .led .on,.js .case .human,.js .case .tile,.js .case .frame,.js .case h3,.js .case .meta,.js .case .stats,.js .case .cnote,.js .case .sites,.js .case .also,.js .case .btn,.js .facts div,.js .step .sn,.js .step h3,.js .step p,.js .mode::before,.js .fit-blk::before,.js .mode h3,.js .mode p,.js .from>*,.js .fit-blk h3,.js .fit-blk li,.js .vq blockquote,.js .vq figcaption,.js .stick b,.js .qa,.js .ai-lead,.js .ai-result,.js .ai-pts li,.js .ai-demo,.js .cta-sub,.js .cta-act,.js .cta-note,.cl,.cl .g,.scanY{transition:none}
}

/* ================= tablet ================= */
@media (min-width:600px){
/* the service tabs fit on two lines here: no sideways strip */
.sw-tabs{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0 0 16px}
}
@media (min-width:700px){
.lgs{grid-template-columns:repeat(6,1fr)}
.price-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.fitrow{grid-template-columns:1fr 1fr;gap:0 48px}
.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================= desktop ================= */
@media (min-width:900px){
/* hero: the words on the reading side, you on the other, the number painted over you */
.hero.work .portrait{justify-content:flex-end;padding-inline-end:7%}
.hero.work .content{inset:auto auto 0 auto;inset-inline-start:0;width:min(56%,800px);max-width:none;margin-inline:0;align-items:flex-start;text-align:start;padding:0 calc(var(--m) * 2) 56px}
.hero.work .title,.hero.work .actions{align-items:flex-start;justify-content:flex-start}
.hero.work .divider{margin-inline:0}
.hero.work .title .t1{font-size:22px}
.svc,.proof,.race,.proc,.price,.faq{padding:150px var(--m) 70px;max-width:1240px;margin-inline:auto}
.ai,.voices{padding:150px max(var(--m),calc((100% - 1240px) / 2)) 120px}
.logos{padding:48px var(--m)}
.lg{height:38px}
/* race: words on the reading side, the two phones on the other */
.race{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;column-gap:80px;align-items:start}
.race .wtitle{grid-area:1/1}
.race-sub{grid-area:2/1;font-size:19px}
.race-foot{grid-area:3/1;align-self:start}
.race-stage{grid-area:1/2/4/3;margin-top:0;gap:24px}
/* services: tabs as a list on the reading side, the panel beside it */
.sw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start;margin-top:56px}
.sw-tabs{flex-direction:column;overflow:visible;margin:0;padding:0;gap:8px}
.sw-tab{min-height:60px;border-radius:16px;font-size:17px;padding:10px 18px}
.sw-tab .led{width:30px;height:30px}
.sw-panels{margin-top:0}
.sw-txt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6px 40px;align-items:start}
.sw-txt h3,.sw-txt .svc-text{grid-column:1}
.sw-txt .svc-pts,.sw-txt .svc-fit{grid-column:2}
.sw-txt .svc-pts{grid-row:1/3;margin-top:10px}
.sw-txt .svc-fit{grid-row:3}
.svc-text{font-size:17.5px}
/* proof */
.case{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center;margin-top:64px}
.case+.case{margin-top:120px}
.case.koki{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.case.koki .cvis{order:2}
.ctxt h3{font-size:56px}
.facts dd{font-size:17.5px}
.mid{flex-direction:row;align-items:center;justify-content:space-between;margin-top:110px}
.ai-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center;margin-top:48px}
.ai-lead{font-size:19.5px}
.ai-result{font-size:21px}
.ai-code{font-size:15px}
.cl{padding-left:calc(44px + var(--i) * 1.8em)}
/* process: a row, the rail across the top */
.steps-w{margin-top:64px}
.rail{inset-inline:0;top:7px;bottom:auto;width:auto;height:2px}
.rail .fill{transform:scaleX(var(--p,0));transform-origin:100% 50%}
html[dir=ltr] .rail .fill{transform-origin:0 50%}
.rail .head{top:-4px;inset-inline-start:calc(var(--p,0) * 100%);grid-auto-flow:column;transform:translateX(50%)}
html[dir=ltr] .rail .head{transform:translateX(-50%)}
.rail .head b{width:4px;height:10px}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.step{padding-inline-start:0;padding-top:40px}
.node{top:0}
.price-grid{gap:96px;margin-top:56px}
.vgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:56px}
.vq blockquote p{font-size:18px}
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.faq .wtitle{position:sticky;top:120px}
.faq-list{margin-top:0}
.cta{padding-top:150px}
.cta-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:48px}
.cta-txt{padding-bottom:110px}
.cta-fig{margin-top:0;height:500px}
.cta-fig img{width:min(380px,100%)}
.wa-pill{display:none}
}