{"id":20,"date":"2026-10-25T17:07:05","date_gmt":"2026-10-25T14:07:05","guid":{"rendered":"https:\/\/qcoders.com\/services\/"},"modified":"2026-11-02T09:00:52","modified_gmt":"2026-11-02T07:00:52","slug":"services","status":"publish","type":"page","link":"https:\/\/qcoders.com\/ar\/services\/","title":{"rendered":"\u0627\u0644\u062e\u062f\u0645\u0627\u062a"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20\" class=\"elementor elementor-20\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f359b6 e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-parent\" data-id=\"4f359b6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-456e3fdb elementor-widget elementor-widget-html\" data-id=\"456e3fdb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n.qcm{--ink:#0A0E17;--step:#131A27;--line:#232C3D;--paper:#F6F5F0;--mute:#A9AEB8;--volt:#C8F53B;--pad:20px;--sec:88px;\n  --sans:\"Readex Pro\",system-ui,sans-serif;--mono:\"JetBrains Mono\",ui-monospace,monospace}\n.qcm *{box-sizing:border-box;margin:0;padding:0}\n.qcm{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:400;line-height:1.45;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}\n.qcm img{display:block;max-width:100%;height:auto}\n.qcm a{color:inherit;text-decoration:none}\n.qcm ul,.qcm ol{list-style:none}\n.qcm section[id]{scroll-margin-top:72px}\n.qcm .label{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--volt);font-weight:500;line-height:1.4}\n.qcm .label.dim{color:var(--mute)}\n.qcm .label[data-l]::before{content:attr(data-l)}\n.qcm .dtag[data-tag]::after{content:attr(data-tag)}\n.qcm .hero{padding:28px var(--pad) 0;position:relative}\n.qcm h1{font-weight:700;font-size:clamp(44px,13.4vw,56px);line-height:.95;letter-spacing:-.035em;margin-top:12px;text-wrap:balance}\n.qcm h1 em,.qcm h2 em,.qcm .big em{font-style:normal;color:var(--volt)}\n.qcm .lead{font-size:17px;line-height:1.45;color:var(--mute);margin-top:16px;max-width:350px}\n.qcm .btns{display:flex;gap:10px;margin-top:22px}\n.qcm .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:12px;font-weight:600;font-size:16px;padding:0 16px}\n.qcm .btn svg{width:20px;height:20px}\n.qcm .btn.volt-b{background:var(--volt);color:var(--ink)}\n.qcm .btn.ink{background:var(--ink);color:var(--paper);margin-top:22px;width:100%}\n.qcm .btn.line{border:1.5px solid var(--line);color:var(--paper);flex:0 0 auto}\n.qcm .sh{padding:var(--sec) var(--pad) 22px}\n.qcm .sh-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}\n.qcm .sh h2{font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700;margin-top:10px;text-wrap:balance}\n.qcm .sh .count{font-family:var(--mono);font-size:12px;color:var(--mute);white-space:nowrap;}\n.qcm .sh .intro{font-size:16px;color:var(--mute);margin-top:14px;max-width:350px}\n.qcm .volt{background:var(--volt);color:var(--ink);margin-top:var(--sec);padding:40px var(--pad) 40px}\n.qcm .volt .label{color:var(--ink);opacity:.75}\n.qcm .volt .big{font-size:36px;line-height:1.02;letter-spacing:-.035em;font-weight:700;margin-top:12px;text-wrap:balance}\n.qcm .volt p{font-size:17px;line-height:1.4;margin-top:14px;max-width:340px}\n.qcm .rows{border-top:1px solid var(--line)}\n.qcm .rows>li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:22px var(--pad) 24px;border-bottom:1px solid var(--line)}\n.qcm .rows .n{font-family:var(--mono);font-size:12px;color:var(--volt);padding-top:9px}\n.qcm .rows h3{font-size:28px;line-height:1.05;letter-spacing:-.025em;font-weight:600;text-wrap:balance}\n.qcm .rows.xl h3{font-size:34px;letter-spacing:-.03em}\n.qcm .rows p{font-size:15px;color:var(--mute);margin-top:8px;line-height:1.45}\n.qcm .rows .you{color:var(--paper);font-size:17px;line-height:1.35;font-weight:500}\n.qcm :is(.rows,.qcm .steps) .proof{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--volt);min-height:24px}\n.qcm :is(.rows,.qcm .steps) .proof svg{width:16px;height:16px}\n.qcm .rows .links{margin-top:12px;font-size:15px;color:var(--mute)}\n.qcm .rows .links a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--volt)}\n.qcm .form-note{padding:18px var(--pad) 0;font-size:14px;line-height:1.45;color:var(--mute)}\n.qcm .form-note a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--volt)}\n.qcm .rows .crop,.qcm .rows .dk,.qcm .rows .ph{margin-top:18px}\n.qcm .dk{position:relative;border-radius:12px;overflow:hidden;background:var(--step);box-shadow:0 24px 50px -24px rgba(0,0,0,.8),0 0 0 1px rgba(246,245,240,.09)}\n.qcm .dk img{width:100%}\n.qcm .ph{position:relative;border-radius:24px;overflow:hidden;border:5px solid #1c2433;background:var(--step);aspect-ratio:390\/844;box-shadow:0 24px 50px -20px rgba(0,0,0,.8),0 0 0 1px rgba(246,245,240,.08)}\n.qcm .ph img{width:100%;height:100%;object-fit:cover;object-position:top}\n.qcm .crop{position:relative;overflow:hidden;border-radius:12px;background:var(--step);box-shadow:0 0 0 1px rgba(246,245,240,.09);min-height:0}\n.qcm .crop img{position:absolute;max-width:none;width:var(--zw);height:auto;left:var(--zx);top:var(--zy)}\n.qcm .cap{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:12px;line-height:1.45}\n.qcm .cap a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,245,240,.35)}\n.qcm .duo{position:relative;margin:28px 0 0;aspect-ratio:390\/318}\n.qcm .hero .duo,.qcm .steps .duo{margin:28px calc(var(--pad) * -1) 0}\n.qcm .duo .dk{position:absolute;left:0;top:0;width:80%;border-radius:0 12px 12px 0}\n.qcm .duo .ph{position:absolute;right:5%;top:14%;width:33%}\n.qcm .fig{padding:0 var(--pad)}\n.qcm .dtag{position:absolute;left:var(--pad);bottom:10%;font-family:var(--mono);font-size:11px;background:var(--ink);border:1px solid rgba(200,245,59,.5);color:var(--volt);padding:5px 9px;border-radius:6px}\n.qcm .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 var(--pad)}\n.qcm .pair>figure:last-child{margin-top:44px}\n.qcm .facts{display:grid;grid-template-columns:1fr 1fr 1fr;margin:24px var(--pad) 0;border-top:1.5px solid var(--line)}\n.qcm .facts div{padding:12px 0 0;font-size:13px;line-height:1.3;color:var(--mute)}\n.qcm .facts div+div{padding-left:12px;border-left:1px solid var(--line)}\n.qcm .facts b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--paper)}\n.qcm .points{margin:22px var(--pad) 0;border-top:1px solid var(--line)}\n.qcm .points li{padding:14px 0;border-bottom:1px solid var(--line)}\n.qcm .points b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}\n.qcm .points span{display:block;font-size:15px;color:var(--mute);margin-top:4px}\n.qcm .dl{margin:24px var(--pad) 0;border-top:1px solid var(--line)}\n.qcm .dl div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}\n.qcm .dl dt{font-family:var(--mono);font-size:12px;color:var(--volt);padding-top:3px}\n.qcm .dl dd{font-size:16px;line-height:1.4}\n.qcm .idx{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}\n.qcm .idx a{display:flex;flex-direction:column;justify-content:space-between;min-height:84px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--step)}\n.qcm .idx b{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.1}\n.qcm .idx small{font-family:var(--mono);font-size:11px;color:var(--mute)}\n.qcm .idx small i{font-style:normal;color:var(--volt)}\n.qcm .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}\n.qcm .chips li,.qcm .chips a{font-size:14px;padding:7px 12px;border:1px solid var(--line);border-radius:99px;color:var(--paper);line-height:1.3}\n.qcm .chips a{display:inline-flex;align-items:center;min-height:40px}\n.qcm .tiles{display:flex;flex-direction:column;gap:14px}\n.qcm .tile{display:block;position:relative;background:var(--step);overflow:hidden}\n.qcm .tile .pic{position:relative;aspect-ratio:16\/10;overflow:hidden}\n.qcm .tile .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}\n.qcm .tile .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px var(--pad) 20px}\n.qcm .tile .tt{font-size:24px;line-height:1.1;letter-spacing:-.02em;font-weight:600;margin-top:6px;color:var(--paper)}\n.qcm .tile .tl{display:block;font-size:15px;color:var(--mute);margin-top:8px;line-height:1.4}\n.qcm .go{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--volt);color:var(--ink);display:grid;place-items:center;margin-top:4px}\n.qcm .go svg{width:20px;height:20px}\n.qcm .tile .num{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:11px;background:rgba(10,14,23,.82);color:var(--paper);padding:5px 8px;border-radius:6px}\n.qcm .tile.flip .meta{flex-direction:row-reverse}\n.qcm .tile.flip .meta>div{text-align:right}\n.qcm .tile.flip .go{background:transparent;border:1.5px solid var(--volt);color:var(--volt)}\n.qcm .tile:active .pic img{transform:scale(1.03)}\n.qcm .tile[hidden]{display:none}\n.qcm .flt{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}\n.qcm .flt button{font:500 14px\/1 var(--sans);color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:99px;height:40px;padding:0 13px;cursor:pointer}\n.qcm .flt button[aria-pressed=true]{background:var(--volt);border-color:var(--volt);color:var(--ink)}\n.qcm .flt button:focus-visible,.qcm .qa summary:focus-visible,.qcm a:focus-visible{outline:2px solid var(--volt);outline-offset:2px}\n.qcm .steps{border-top:1px solid var(--line)}\n.qcm .steps>li{padding:24px var(--pad) 26px;border-bottom:1px solid var(--line)}\n.qcm .steps .top{display:flex;align-items:baseline;gap:12px}\n.qcm .steps .n{font-family:var(--mono);font-size:12px;color:var(--volt)}\n.qcm .steps h3{font-size:30px;line-height:1.05;letter-spacing:-.025em;font-weight:600;text-wrap:balance}\n.qcm .steps p{font-size:15px;color:var(--mute);margin-top:10px}\n.qcm .steps .side{display:grid;grid-template-columns:1fr 128px;gap:16px;align-items:start}\n.qcm .steps .side .ph,.qcm .steps .side .crop{margin-top:4px}\n.qcm .steps .wide{margin-top:18px}\n.qcm .steps.giant h3{font-size:clamp(52px,16vw,64px);line-height:.95;letter-spacing:-.04em;font-weight:700}\n.qcm .steps.giant .you{font-size:18px;color:var(--paper);font-weight:500;line-height:1.35;margin-top:12px}\n.qcm .nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}\n.qcm .nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:99px;font-size:14px}\n.qcm .qa{border-top:1px solid var(--line)}\n.qcm .qa details{border-bottom:1px solid var(--line)}\n.qcm .qa summary{list-style:none;display:grid;grid-template-columns:1fr 28px;gap:14px;align-items:start;padding:18px var(--pad);cursor:pointer}\n.qcm .qa summary::-webkit-details-marker{display:none}\n.qcm .qa summary h3{font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.01em}\n.qcm .qa summary svg{width:22px;height:22px;color:var(--volt);margin-top:1px;transition:transform .25s ease}\n.qcm .qa details[open] summary svg{transform:rotate(45deg)}\n.qcm .qa details[open] summary h3{color:var(--volt)}\n.qcm .qa .ans{padding:0 var(--pad) 22px;font-size:16px;color:var(--mute);line-height:1.5}\n.qcm .qa .ans a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--volt)}\n.qcm .ind{border-top:1px solid var(--line)}\n.qcm .ind li a,.qcm .ind li>div{display:block;padding:20px var(--pad);border-bottom:1px solid var(--line)}\n.qcm .ind h3{font-size:26px;line-height:1.08;letter-spacing:-.025em;font-weight:600}\n.qcm .ind p{font-size:15px;color:var(--mute);margin-top:8px}\n.qcm .ind .ex{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--volt)}\n.qcm .ind .ex svg{width:16px;height:16px}\n.qcm .tech{border-top:1px solid var(--line)}\n.qcm .tech>li{padding:22px var(--pad);border-bottom:1px solid var(--line)}\n.qcm .tech h3{font-size:26px;line-height:1.08;letter-spacing:-.025em;font-weight:600}\n.qcm .tech p{font-size:15px;color:var(--mute);margin-top:8px}\n.qcm .stackl{padding:0 var(--pad)}\n.qcm .more{display:flex;align-items:center;justify-content:space-between;margin:14px var(--pad) 0;height:56px;padding:0 18px;border:1px solid var(--line);border-radius:12px;font-weight:500}\n.qcm .more svg{width:20px;height:20px;color:var(--volt)}\n.qcm .more.on-volt{margin:22px 0 0;border-color:rgba(10,14,23,.35);color:var(--ink)}\n.qcm .more.on-volt svg{color:var(--ink)}\n.qcm .cta{position:relative;padding:var(--sec) var(--pad) 48px}\n.qcm .cta h2,.qcm .cta h1{font-size:clamp(40px,12vw,48px);line-height:.94;letter-spacing:-.04em;font-weight:700;margin-top:12px;text-wrap:balance}\n.qcm .cta .sub{font-size:17px;color:var(--mute);margin-top:16px;max-width:340px}\n.qcm .needs-q{margin-top:24px}\n.qcm .needs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}\n.qcm .needs a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border:1px solid rgba(200,245,59,.45);border-radius:99px;font-size:15px;font-weight:500}\n.qcm .needs a:active{background:var(--volt);color:var(--ink)}\n.qcm .wa{display:flex;align-items:center;gap:14px;margin-top:22px;background:var(--volt);color:var(--ink);border-radius:18px;padding:18px}\n.qcm .wa .ic{flex:0 0 52px;height:52px;border-radius:14px;background:var(--ink);color:var(--volt);display:grid;place-items:center}\n.qcm .wa .ic svg{width:28px;height:28px}\n.qcm .wa b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.1}\n.qcm .wa span span{display:block;font-size:15px;font-weight:500;margin-top:3px}\n.qcm .wa .arr{margin-left:auto;width:22px;height:22px;flex:0 0 22px}\n.qcm .alt{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:16px 18px;border:1px solid var(--line);border-radius:14px}\n.qcm .alt b{font-weight:500}\n.qcm .alt>svg{width:22px;height:22px;color:var(--volt)}\n.qcm .langs{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}\n.qcm .langs span{font-size:14px;padding:7px 12px;border:1px solid var(--line);border-radius:99px}\n.qcm .form-head{padding:var(--sec) var(--pad) 28px}\n.qcm .form-head h2{font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700;margin-top:10px}\n.qcm .form-head p.intro{font-size:16px;color:var(--mute);margin-top:14px}\n.qcm .reach{margin-top:12px;border-top:1px solid var(--line)}\n.qcm .reach a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}\n.qcm .reach b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em}\n.qcm .reach small{display:block;font-size:14px;color:var(--mute);margin-top:2px}\n.qcm .reach svg{width:22px;height:22px;color:var(--volt);flex:0 0 22px}\n.qcm .end{height:8px}\n@media (prefers-reduced-motion:no-preference){\n.qcm.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}\n.qcm.js .rv.in{opacity:1;transform:none}\n.qcm.js .scan>img{clip-path:inset(0 0 100% 0)}\n.qcm.js .scan.in>img{animation:qcmscan 1.05s cubic-bezier(.65,.05,.3,1) both}\n.qcm.js .scan::after{content:\"\";position:absolute;left:0;right:0;top:0;height:2px;background:var(--volt);box-shadow:0 0 14px 2px rgba(200,245,59,.55);transform:translateY(-100%);opacity:0;pointer-events:none;z-index:4}\n.qcm.js .scan.in::after{animation:qcmline 1.05s cubic-bezier(.65,.05,.3,1) both}\n.qcm.js .rv .scan.in>img,.qcm.js .rv .scan.in::after{animation-delay:.15s}\n.qcm.js .scan.done>img{animation:none;clip-path:none}\n.qcm.js .scan.done::after{animation:none;opacity:0}\n.qcm .hero h1{animation:qcmrise .8s cubic-bezier(.2,.7,.2,1) both}\n}\n.qcm .tag{color:var(--paper);font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.01em;max-width:340px}\n.qcm .summary{padding:28px var(--pad) 0;font-size:16px;color:var(--mute);line-height:1.5}\n.qcm .crop.narrow{width:62%}\n.qcm .places{display:block}\n.qcm .places .say{display:block;padding:0 var(--pad) 22px;margin-top:-12px;font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700}\n.qcm .places .pl{display:block;padding:14px var(--pad);border-bottom:1px solid var(--line);font-size:clamp(40px,12vw,48px);line-height:1;letter-spacing:-.04em;font-weight:700}\n.qcm .places .say+.pl{border-top:1px solid var(--line)}\n.qcm .places .pl:last-child{color:var(--volt)}\n.qcm .intro.pad{padding:20px var(--pad) 0;font-size:16px;color:var(--mute)}\n.qcm .side-shot{margin-top:18px}\n.qcm .volt .first{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin-top:18px}\n.qcm .volt h2.big{color:var(--ink)}\n.qcm .side-shot .crop{width:70%}\n@keyframes qcmscan{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}\n@keyframes qcmline{0%{top:0;opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}\n@keyframes qcmrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}\n<\/style>\n<div class=\"qcm\">\n<svg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\">\n<symbol id=\"qcm-arr\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/symbol>\n<symbol id=\"qcm-up\" viewBox=\"0 0 24 24\"><path d=\"M7 17 17 7M8 7h9v9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/symbol>\n<symbol id=\"qcm-wa\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12.04 2a9.9 9.9 0 0 0-8.5 15l-1.4 5 5.2-1.36A9.9 9.9 0 1 0 12.04 2Zm0 18.1a8.2 8.2 0 0 1-4.2-1.15l-.3-.18-3.08.8.82-3-.2-.31a8.2 8.2 0 1 1 6.96 3.84Zm4.5-6.14c-.25-.12-1.46-.72-1.69-.8-.23-.08-.39-.12-.55.12-.17.25-.64.8-.78.97-.14.16-.29.18-.53.06a6.7 6.7 0 0 1-3.37-2.94c-.25-.44.25-.41.72-1.36.08-.16.04-.3-.02-.43l-.76-1.83c-.2-.48-.4-.41-.55-.42h-.47a.9.9 0 0 0-.65.3 2.74 2.74 0 0 0-.85 2.04c0 1.2.87 2.37 1 2.53.12.16 1.72 2.63 4.17 3.69 1.55.67 2.16.73 2.93.61.47-.07 1.46-.6 1.66-1.17.2-.58.2-1.07.15-1.17-.07-.1-.23-.16-.47-.28Z\"\/><\/symbol>\n<symbol id=\"qcm-plus\" viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/symbol>\n<\/svg>\n<section class=\"hero\">\n  <p class=\"label\" data-l=\"\/\/ Services\"><\/p>\n  <h1>12 services, <em>one partner.<\/em><\/h1>\n  <p class=\"lead\">Our software development services cover everything from a simple website to the system that runs your whole company. Then we stay, with the support that keeps it running.<\/p>\n<\/section>\n<section id=\"m-what-we-build\">\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>At a glance<\/p><\/div><h2>Our services at a glance<\/h2><p class=\"intro\">Twelve software development services in six groups. Pick the one that sounds like your week.<\/p><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">01<\/span><div><h3>Websites<\/h3><p>Web development and clear design (UX\/UI), so people understand what you do and contact you.<\/p> <a class=\"proof\" href=\"#m-web\">See the 2 services <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">02<\/span><div><h3>Online stores<\/h3><p>Products, payments, shipping and orders in one place.<\/p> <a class=\"proof\" href=\"#m-stores\">See the service <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">03<\/span><div><h3>Mobile apps<\/h3><p>Android and iPhone apps, when your project really needs one.<\/p> <a class=\"proof\" href=\"#m-apps\">See the service <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">04<\/span><div><h3>Business systems<\/h3><p>One system for customers, stock, staff and bookings, plus custom software, automation and dashboards.<\/p> <a class=\"proof\" href=\"#m-systems\">See the 4 services <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">05<\/span><div><h3>AI solutions<\/h3><p>Assistants that answer customers and search your own files.<\/p> <a class=\"proof\" href=\"#m-ai\">See the service <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">06<\/span><div><h3>Support after launch<\/h3><p>Hosting and updates, security, and honest advice before you spend.<\/p> <a class=\"proof\" href=\"#m-support\">See the 3 services <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><\/ol>\n<\/section>\n<section id=\"m-web\">\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Websites<\/p><span class=\"count\">02 services<\/span><\/div><h2>Websites that say what you do<\/h2><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">01<\/span><div><h3>Web development<\/h3><p>A website that explains what you do and makes it easy to contact you. For example, company sites, profile sites and campaign landing pages.<\/p><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">02<\/span><div><h3>UX\/UI design<\/h3><p>Website and app design so clear that your customers find what they need without getting lost.<\/p> <a class=\"proof\" href=\"\/work\/booking-system\/\">See the booking page we designed <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><div class=\"dk scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Online booking page: pick a service, a date and a free time, then pay a small deposit to hold it\"><\/div><\/div><\/li><\/ol>\n<\/section>\n<section id=\"m-stores\">\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Online stores<\/p><span class=\"count\">01 service<\/span><\/div><h2>Sell online, simply<\/h2><p class=\"intro\">Sell online without the stress: products, payments, shipping and orders in one place.<\/p><\/div>\n  <div class=\"duo\"><div class=\"dk scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-product-page.webp\" srcset=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-product-page-768x480.webp 768w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-product-page-1024x640.webp 1024w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-product-page.webp 1440w\" sizes=\"auto, 80vw\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Online store product page: a long trench coat in large photos, with its colors, the sizes in stock and the delivery options\"><\/div><div class=\"ph scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-mobile-checkout-payment.webp\" width=\"390\" height=\"844\" loading=\"lazy\" decoding=\"async\" alt=\"Mobile checkout, payment step: card, digital wallet, pay in 3 or bank transfer, then one button to pay\"><\/div><span class=\"dtag\" aria-hidden=\"true\" data-tag=\"\/\/ online-store\"><\/span><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">03<\/span><div><h3>Online stores<\/h3><p>Products, payments, shipping and orders in one place.<\/p> <a class=\"proof\" href=\"\/work\/online-store\/\">See the online store <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><\/ol>\n  <ul class=\"points\">\n    <li><b>A storefront led by photos<\/b> <span>Large pictures and clear categories. Shoppers can also tap a piece in a campaign photo to open it.<\/span><\/li>\n    <li><b>Sizes that show real stock<\/b> <span>Sold-out sizes are grayed out and the last few are marked, on every filter and product page.<\/span><\/li>\n    <li><b>One admin for every order<\/b> <span>Pack, print labels and handle returns from one screen.<\/span><\/li>\n  <\/ul>\n<\/section>\n<section id=\"m-apps\">\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Mobile apps<\/p><span class=\"count\">01 service<\/span><\/div><h2>Your service on their phone<\/h2><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">04<\/span><div><h3>Mobile apps<\/h3><p>Android and iPhone apps that put your service on your customer&#x27;s phone, or in your team&#x27;s hands on the road. Only when your project really needs one: if a good website is enough, we&#x27;ll tell you.<\/p><\/div><\/li><\/ol>\n  <div class=\"pair\" style=\"margin-top:24px\">\n    <figure class=\"rv\"><div class=\"ph scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-delivery-app-route-list.webp\" width=\"390\" height=\"844\" loading=\"lazy\" decoding=\"async\" alt=\"Driver app: today&#x27;s route with 9 of 18 stops done, the next stop on a map and the stops still to come\"><\/div><figcaption class=\"cap\"><a href=\"\/work\/delivery-app\/\">Delivery app<\/a>, the driver's route for today<\/figcaption><\/figure>\n    <figure class=\"rv\"><div class=\"ph scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-sales-crm-mobile-today.webp\" width=\"390\" height=\"844\" loading=\"lazy\" decoding=\"async\" alt=\"Sales app: one rep&#x27;s follow-ups for today, with a call to make and a quote to send\"><\/div><figcaption class=\"cap\"><a href=\"\/work\/sales-crm\/\">Sales CRM<\/a>, a rep's day<\/figcaption><\/figure>\n  <\/div>\n<\/section>\n<section id=\"m-systems\">\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Business systems<\/p><span class=\"count\">04 services<\/span><\/div><h2>Software for your whole company<\/h2><\/div>\n  <div class=\"fig rv\" style=\"margin-bottom:22px\"><div class=\"dk scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-inventory-sales-stock-overview.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Inventory system: stock for three stores and a warehouse in one table, with low-stock alerts\"><\/div><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">05<\/span><div><h3>Business systems<\/h3><p>Customers (CRM), sales, inventory, staff and bookings in one system instead of scattered spreadsheets.<\/p> <a class=\"proof\" href=\"\/work\/inventory-sales\/\">See the inventory system <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">06<\/span><div><h3>Custom software<\/h3><p>Software built around how you work, so it solves the problem ready-made tools can&#x27;t.<\/p> <a class=\"proof\" href=\"\/work\/delivery-app\/\">See the delivery app <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">07<\/span><div><h3>Automation &amp; integrations<\/h3><p>We connect your website, sales, WhatsApp and accounting, so data moves by itself and manual work drops.<\/p> <a class=\"proof\" href=\"\/work\/booking-system\/\">See the booking system <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">08<\/span><div><h3>Reports &amp; dashboards<\/h3><p>Sales, expenses and team performance on one screen, so you decide with the full picture.<\/p> <a class=\"proof\" href=\"\/work\/sales-crm\/\">See the sales CRM <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><\/ol>\n<\/section>\n<section id=\"m-ai\">\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>AI solutions<\/p><span class=\"count\">01 service<\/span><\/div><h2>An assistant that works with you<\/h2><\/div>\n  <div class=\"duo\"><div class=\"dk scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-chat.webp\" srcset=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-chat-768x480.webp 768w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-chat-1024x640.webp 1024w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-chat.webp 1440w\" sizes=\"auto, 80vw\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Document assistant on a desktop: an answer about a hotel limit, with its four sources and the policy page open beside it\"><\/div><div class=\"ph scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-mobile-answer.webp\" width=\"390\" height=\"844\" loading=\"lazy\" decoding=\"async\" alt=\"The assistant on a phone explains how to reset an error code step by step, with its sources\"><\/div><span class=\"dtag\" aria-hidden=\"true\" data-tag=\"\/\/ ai-document-assistant\"><\/span><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">09<\/span><div><h3>AI solutions<\/h3><p>Smart assistants that answer customers, search your company files and pull out what matters from documents.<\/p> <a class=\"proof\" href=\"\/work\/ai-document-assistant\/\">See the document assistant <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><\/ol>\n  <ul class=\"points\">\n    <li><b>Answers with their source<\/b> <span>Every answer shows the file and page it came from, so people can check it.<\/span><\/li>\n    <li><b>Only what each person may see<\/b> <span>It answers only from files the person asking is allowed to open.<\/span><\/li>\n    <li><b>A person for the hard cases<\/b> <span>If a question is above a policy limit, it goes to the right team.<\/span><\/li>\n  <\/ul>\n<\/section>\n<section id=\"m-support\">\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Support<\/p><\/div><h2>With you after launch<\/h2><p class=\"intro\">Launch isn&#x27;t the last line of code. Your system stays online, up to date and secure, and keeps getting better while you run the business.<\/p><\/div>\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>What&#x27;s included<\/p><span class=\"count\">03 services<\/span><\/div><h2>What staying looks like<\/h2><p class=\"intro\">Pick what you need. Each one can start at launch or later.<\/p><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">10<\/span><div><h3>Operations &amp; maintenance<\/h3><p>Hosting, deployment, backups, updates and fixes, so your system keeps running while you focus on the business.<\/p><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">11<\/span><div><h3>Security<\/h3><p>Everyone sees only what they should. We also help protect your data and your customers&#x27; data, and security testing is sized to your project.<\/p> <a class=\"proof\" href=\"\/work\/ai-document-assistant\/\">See access by team <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><div class=\"crop scan\" style=\"aspect-ratio:556\/410;--zw:258.993%;--zx:-50.719%;--zy:-41.951%\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-access.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Which teams can ask about each collection: Ask or Manage for each team, and a dash where a team has no access\"><\/div><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">12<\/span><div><h3>Tech consulting<\/h3><p>Before you spend money, you find out exactly what you need: a new build, or a ready-made tool that already does the job.<\/p> <a class=\"proof\" href=\"\/how-we-work\/\">See how a project starts <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/div><\/li><\/ol>\n<\/section>\n<section class=\"volt rv\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Where to start<\/p><p class=\"big\">You don't need the name of the service.<\/p><p>Describe your week in your own words. Then we&#x27;ll match it to one of our software development services, or tell you a ready-made tool will do.<\/p><a class=\"btn ink\" href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.\" target=\"_blank\" rel=\"noopener\"><svg aria-hidden=\"true\"><use href=\"#qcm-wa\"\/><\/svg>Message us on WhatsApp<\/a> <a class=\"more on-volt\" href=\"\/faq\/\">Common questions <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a><\/section>\n<section class=\"cta\">\n  <p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Contact<\/p>\n  <h2>Which service fits?<\/h2>\n  <p class=\"sub\">Pick what you need, then we&#x27;ll write the first message for you. No tech words needed.<\/p>\n  <p class=\"label dim needs-q\">What do you need?<\/p>\n  <ul class=\"needs\" aria-label=\"What do you need?\"><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20website.\" target=\"_blank\" rel=\"noopener\">Website<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20an%20online%20store.\" target=\"_blank\" rel=\"noopener\">Online store<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20mobile%20app.\" target=\"_blank\" rel=\"noopener\">App<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20business%20system.\" target=\"_blank\" rel=\"noopener\">Business system<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20an%20AI%20assistant.\" target=\"_blank\" rel=\"noopener\">AI<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20help%20deciding.\" target=\"_blank\" rel=\"noopener\">Not sure yet<\/a><\/li><\/ul>\n  <a class=\"wa\" href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"ic\"><svg aria-hidden=\"true\"><use href=\"#qcm-wa\"\/><\/svg><\/span>\n    <span><b>Chat on WhatsApp<\/b> <span>+966 50 760 0156<\/span><\/span>\n    <svg class=\"arr\" aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg>\n  <\/a>\n  <a class=\"alt\" href=\"mailto:info@qcoders.com\"><span><span class=\"label dim\">\/\/ Email<\/span><br><b>info@qcoders.com<\/b><\/span><svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a>\n  <div class=\"langs\"><span>English<\/span> <span lang=\"ar\" dir=\"rtl\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/span> <span lang=\"tr\">T\u00fcrk\u00e7e<\/span><\/div>\n<\/section>\n<\/div>\n<script>(function(){document.querySelectorAll('.qcm:not([data-qcm])').forEach(function(r){r.setAttribute('data-qcm','1');r.classList.add('js');\nvar els=r.querySelectorAll('.rv,.scan');\nif(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('in')});}else{\nvar io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){var t=e.target;t.classList.add('in');io.unobserve(t);if(t.classList.contains('scan'))setTimeout(function(){t.classList.add('done')},1400);}})},{rootMargin:'0px 0px -10% 0px',threshold:0.12});\nels.forEach(function(e){io.observe(e)});}\nvar f=r.querySelector('.flt');if(f){var bs=f.querySelectorAll('button'),ts=r.querySelectorAll('.tiles .tile'),c=r.querySelector('[data-count]');\nbs.forEach(function(b){b.addEventListener('click',function(){var k=b.getAttribute('data-f'),n=0;bs.forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false')});\nts.forEach(function(t){var on=k==='all'||t.getAttribute('data-cat')===k;t.hidden=!on;if(on){n++;t.classList.add('in');t.querySelectorAll('.scan').forEach(function(s){s.classList.add('in','done')});}});\nif(c)c.textContent=(n<10?'0':'')+n+(n===1?' project':' projects');});});}\n});})();<\/script><script>(function(){if(window.__qcmHash)return;window.__qcmHash=1;function go(){var h=decodeURIComponent(location.hash.slice(1));if(!h)return;\nvar t=document.getElementById(h);if(t&&t.getClientRects().length)return;var m=document.getElementById('m-'+h);if(!m||!m.getClientRects().length)return;\nif(m.tagName==='DETAILS')m.open=true;m.scrollIntoView();}window.addEventListener('hashchange',go);\nif(document.readyState==='complete')go();else window.addEventListener('load',go);})();<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3c123014 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"3c123014\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c02f467 elementor-widget elementor-widget-html\" data-id=\"4c02f467\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>@media(max-width:1024px){.qcui-d{display:none!important}}@media(min-width:1025px){.qcui-t{display:none!important}}<\/style>\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n\/* On a phone the plate's photo is already well inside the shared cut's range when the page loads, so it\n   would show part-cut under the header: below 64rem the opener's two pictures are simply there. *\/\n@container qc2 (max-width: 63.99rem) {\n  .qc2.svc-plate .qc2-cut { animation: none; -webkit-mask-image: none; mask-image: none; }\n}\n<\/style>\n<div class=\"qc2 qc2--paper qc2-plate qc2-svc svc-plate\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-plate__text qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Services<\/p>\n      <div class=\"qc2-display\" role=\"heading\" aria-level=\"1\">12 services, one partner.<\/div>\n      <p class=\"qc2-lead\">Our software development services cover everything from a simple website to the system that runs your whole company. Then we stay, with the support that keeps it running.<\/p>\n      <div class=\"qc2-actions\">\n        <a class=\"qc2-btn\" href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.\">Message us on WhatsApp<\/a>\n        <a class=\"qc2-link\" href=\"\/work\/\">See what we've built<\/a>\n      <\/div>\n    <\/div>\n    <figure class=\"qc2-pic qc2-plate__pic qc2-cut\" style=\"--qc2-focus: 50% 50%\">\n      \n      <img fetchpriority=\"high\" decoding=\"async\" class=\"qcui-t\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-baker-orders-tablet-r155.webp\" width=\"2400\" height=\"1548\" fetchpriority=\"high\"\n           alt=\"The online store's orders screen on a tablet and the delivery step of checkout on a phone\"><img fetchpriority=\"high\" decoding=\"async\" class=\"qcui-d\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-baker-orders-tablet-r70.webp\" width=\"1300\" height=\"1857\" fetchpriority=\"high\"\n           alt=\"The online store's orders screen on a tablet and the delivery step of checkout on a phone\">\n    <\/figure>\n    <figure class=\"qc2-pic qc2-phone qc2-plate__screen qc2-cut qc2-cut--late\">\n      <img decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-inventory-sales-mobile-stock-lookup.webp\" width=\"390\" height=\"844\"\n           alt=\"Inventory app on a phone: a scanned mug shows 3 left in this store and how many the warehouse and the other stores hold\">\n    <\/figure>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65af6369 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"65af6369\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56f88ca2 elementor-widget elementor-widget-html\" data-id=\"56f88ca2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n\/* Four previews are photos; two are our own phone or desktop screen standing on that product's colour\n   (the tile is the field, the screen is anchored as v2 anchors screens: a phone stands on the tile's\n   foot with its bottom cut, a desktop screen runs off the right and bottom from its top-left corner). *\/\n.qc2.svc-ledger .svc-prev { background: var(--qc2-bg); }\n.qc2.svc-ledger .svc-prev > img { position: absolute; max-width: none; margin: 0; object-fit: fill; }\n.qc2.svc-ledger .svc-prev__phone { left: 19%; top: 10%; width: 62%; height: auto; aspect-ratio: 390 \/ 844; border-radius: 7.2% \/ 3.33%; }\n.qc2.svc-ledger .svc-prev__desk  { left: 11%; top: 13%; width: 176%; height: auto; aspect-ratio: 16 \/ 10; }\n<\/style>\n<div class=\"qc2 qc2--stone qc2-ledger qc2-sec qc2-svc svc-ledger\" id=\"what-we-build\">\n  <div class=\"qc2-wrap\">\n    <div class=\"qc2-grid qc2-ends\">\n      <div class=\"qc2-head\">\n        <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>At a glance<\/p>\n        <h2 class=\"qc2-h\">Our services at a glance<\/h2>\n      <\/div>\n      <p class=\"qc2-lead qc2-muted\">Twelve software development services in six groups. Pick the one that sounds like your week.<\/p>\n    <\/div>\n    <ul class=\"qc2-ledger__list\">\n      <li class=\"qc2-ledger__row\"><a href=\"#web\">\n        <span class=\"qc2-ledger__name\">Websites<\/span>\n        <span class=\"qc2-ledger__line\">Web development and clear design (UX\/UI), so people understand what you do and contact you.<\/span>\n        <span class=\"qc2-pic qc2-ledger__pic\" style=\"--qc2-focus: 50% 50%\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-ceramics-shop-owner-tablet-r80.webp\" width=\"1300\" height=\"1625\" loading=\"lazy\" alt=\"Point of sale checkout on a laptop and a stock transfer request on a phone\"><\/span>\n      <\/a><\/li>\n      <li class=\"qc2-ledger__row\"><a href=\"#stores\">\n        <span class=\"qc2-ledger__name\">Online stores<\/span>\n        <span class=\"qc2-ledger__line\">Products, payments, shipping and orders in one place.<\/span>\n        <span class=\"qc2-pic qc2-ledger__pic\" style=\"--qc2-focus: 50% 50%\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-online-seller-packing-box-r80.webp\" width=\"1300\" height=\"1625\" loading=\"lazy\" alt=\"Online store orders on a laptop and the mobile checkout on a phone\"><\/span>\n      <\/a><\/li>\n      <li class=\"qc2-ledger__row\"><a href=\"#apps\">\n        <span class=\"qc2-ledger__name\">Mobile apps<\/span>\n        <span class=\"qc2-ledger__line\">Android and iPhone apps, when your project really needs one.<\/span>\n        <span class=\"qc2-pic qc2-ledger__pic svc-prev qc2--f-book\"><img loading=\"lazy\" decoding=\"async\" class=\"svc-prev__phone\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-04-mobile-confirmation.webp\" width=\"390\" height=\"844\" loading=\"lazy\" alt=\"Booking system: a booking confirmation on a phone\"><\/span>\n      <\/a><\/li>\n      <li class=\"qc2-ledger__row\"><a href=\"#systems\">\n        <span class=\"qc2-ledger__name\">Business systems<\/span>\n        <span class=\"qc2-ledger__line\">One system for customers, stock, staff and bookings, plus custom software, automation and dashboards.<\/span>\n        <span class=\"qc2-pic qc2-ledger__pic svc-prev qc2--f-stock\"><img loading=\"lazy\" decoding=\"async\" class=\"svc-prev__desk\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-inventory-sales-purchase-order.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Inventory system: a purchase order\"><\/span>\n      <\/a><\/li>\n      <li class=\"qc2-ledger__row\"><a href=\"#ai\">\n        <span class=\"qc2-ledger__name\">AI solutions<\/span>\n        <span class=\"qc2-ledger__line\">Assistants that answer customers and search your own files.<\/span>\n        <span class=\"qc2-pic qc2-ledger__pic svc-prev qc2--f-docs\"><img loading=\"lazy\" decoding=\"async\" class=\"svc-prev__phone\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-mobile-ask.webp\" width=\"390\" height=\"844\" loading=\"lazy\" alt=\"AI document assistant: asking a question on a phone\"><\/span>\n      <\/a><\/li>\n      <li class=\"qc2-ledger__row\"><a href=\"#support\">\n        <span class=\"qc2-ledger__name\">Support after launch<\/span>\n        <span class=\"qc2-ledger__line\">Hosting and updates, security, and honest advice before you spend.<\/span>\n        <span class=\"qc2-pic qc2-ledger__pic\" style=\"--qc2-focus: 50% 50%\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-three-colleagues-one-laptop-r80.webp\" width=\"1300\" height=\"1625\" loading=\"lazy\" alt=\"Sales CRM pipeline on a laptop and a call log on a phone\"><\/span>\n      <\/a><\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.svc-ledger .svc-prev > img:not(#qc2-guard) { margin: 0; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-55546556 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"55546556\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79aa0a2a elementor-widget elementor-widget-html\" data-id=\"79aa0a2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>@media(max-width:1024px){.qcui-d{display:none!important}}@media(min-width:1025px){.qcui-t{display:none!important}}<\/style>\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n\/* Scene & Screen: two services in four columns. The second service name sits closer to its own text\n   than to the paragraph above it, so the column reads as two pairs, not five blocks. *\/\n.qc2.svc-web .qc2-scene__text { --qc2-flow: var(--qc2-s3); }\n.qc2.svc-web .qc2-scene__text > .qc2-h + .qc2-title { margin-top: var(--qc2-s6); }\n.qc2.svc-web .qc2-scene__text > p + .qc2-title { margin-top: var(--qc2-s7); }\n.qc2.svc-web .qc2-scene__text > .qc2-actions { margin-top: var(--qc2-s6); }\n<\/style>\n<div class=\"qc2 qc2--paper qc2-scene qc2-svc svc-web\" id=\"web\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <figure class=\"qc2-pic qc2-scene__pic qc2-cut\" style=\"--qc2-focus: 45% 50%; --qc2-focus-m: 40% 50%\">\n      \n      <img loading=\"lazy\" decoding=\"async\" class=\"qcui-t\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-barbershop-front-desk-booking-r155.webp\" width=\"2400\" height=\"1548\" loading=\"lazy\"\n           alt=\"The booking system's staff calendar on a laptop and a booking confirmation on a phone\"><img loading=\"lazy\" decoding=\"async\" class=\"qcui-d\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-barbershop-front-desk-booking-r80.webp\" width=\"1300\" height=\"1625\" loading=\"lazy\"\n           alt=\"The booking system's staff calendar on a laptop and a booking confirmation on a phone\">\n    <\/figure>\n    <figure class=\"qc2-pic qc2-screen qc2-scene__screen qc2-cut qc2-cut--late\">\n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\"\n           alt=\"Online booking page: pick a service, a date and a free time, then pay a small deposit to hold it\">\n    <\/figure>\n    <div class=\"qc2-scene__text qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Websites<\/p>\n      <h2 class=\"qc2-h\">Websites that say what you do<\/h2>\n      <h3 class=\"qc2-title\">Web development<\/h3>\n      <p>A website that explains what you do and makes it easy to contact you. For example, company sites, profile sites and campaign landing pages.<\/p>\n      <h3 class=\"qc2-title\">UX\/UI design<\/h3>\n      <p>Website and app design so clear that your customers find what they need without getting lost.<\/p>\n      <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/booking-system\/\">See the booking page we designed<\/a><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.svc-web .qc2-scene__text > .qc2-h + .qc2-title:not(#qc2-guard) { margin-top: var(--qc2-s6); }\n.qc2.svc-web .qc2-scene__text > p + .qc2-title:not(#qc2-guard) { margin-top: var(--qc2-s7); }\n.qc2.svc-web .qc2-scene__text > .qc2-actions:not(#qc2-guard) { margin-top: var(--qc2-s6); }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5d27665f e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"5d27665f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38fedbb8 elementor-widget elementor-widget-html\" data-id=\"38fedbb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n.qc2.svc-stores .qc2-facts { gap: var(--qc2-s4); }\n<\/style>\n<div class=\"qc2 qc2--f-store qc2-stage qc2-svc svc-stores\" id=\"stores\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-stage__text qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Online stores<\/p>\n      <h2 class=\"qc2-h\">Sell online, simply<\/h2>\n      <p>Sell online without the stress: products, payments, shipping and orders in one place.<\/p>\n      <dl class=\"qc2-facts\">\n        <div><dt>A storefront led by photos<\/dt><dd>Large pictures and clear categories. Shoppers can also tap a piece in a campaign photo to open it.<\/dd><\/div>\n        <div><dt>Sizes that show real stock<\/dt><dd>Sold-out sizes are grayed out and the last few are marked, on every filter and product page.<\/dd><\/div>\n        <div><dt>One admin for every order<\/dt><dd>Pack, print labels and handle returns from one screen.<\/dd><\/div>\n      <\/dl>\n      <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/online-store\/\">See the online store<\/a><\/div>\n    <\/div>\n    <figure class=\"qc2-pic qc2-screen qc2-stage__screen qc2-cut\">\n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-product-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\"\n           alt=\"Online store product page: a long trench coat in large photos, with its colors, the sizes in stock and the delivery options\">\n    <\/figure>\n    <figure class=\"qc2-pic qc2-phone qc2-stage__phone qc2-cut qc2-cut--late\">\n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-mobile-checkout-payment.webp\" width=\"390\" height=\"844\" loading=\"lazy\"\n           alt=\"Mobile checkout, payment step: card, digital wallet, pay in 3 or bank transfer, then one button to pay\">\n    <\/figure>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a9c0ef4 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"6a9c0ef4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70cea7c5 elementor-widget elementor-widget-html\" data-id=\"70cea7c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>@media(max-width:1024px){.qcui-d{display:none!important}}@media(min-width:1025px){.qcui-t{display:none!important}}<\/style>\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n\/* Uneven mosaic, recomposed for this group as a zig-zag of place and screen:\n     row 1-2  words, top left, and under them his route app   | the rider, 4:5, running off the right edge\n     row 3    a customer's phone (our booking screen) on 3:2, running off the left edge | two phones\n   Phone: words; the rider full-bleed with his app landing on it; the customer's phone; two phones.\n   The route app is docked on the rider's photo only on a phone, so only there does it open on the cut. *\/\n.qc2.svc-apps .svc-apps__rider .qc2-pic { aspect-ratio: 4 \/ 5; }\n.qc2.svc-apps .svc-apps__hand .qc2-pic { aspect-ratio: 3 \/ 2; }\n.qc2.svc-apps .svc-apps__pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--qc2-gutter); align-items: start; }\n.qc2.svc-apps .svc-apps__pair > :last-child { margin-top: var(--qc2-s8); }\n.qc2.svc-apps .svc-apps__route { position: relative; z-index: 1; }\n@container qc2 (max-width: 63.99rem) {\n  .qc2.svc-apps .qc2-mosaic__grid { row-gap: 0; }\n  .qc2.svc-apps .qc2-mosaic__grid > * { margin-top: var(--qc2-s7); }\n  .qc2.svc-apps .qc2-mosaic__grid > :first-child { margin-top: 0; }\n  .qc2.svc-apps .svc-apps__rider,\n  .qc2.svc-apps .svc-apps__hand { margin-inline: calc(-1 * var(--qc2-margin)); }\n  .qc2.svc-apps .svc-apps__rider figcaption,\n  .qc2.svc-apps .svc-apps__hand figcaption { padding-inline: var(--qc2-margin); }\n  \/* the rider's app lands on the lower right of his photo, as in Scene & Screen *\/\n  .qc2.svc-apps .svc-apps__route { grid-column: 1 \/ -1; width: 46%; justify-self: end; margin-top: -40%; }\n  .qc2.svc-apps .svc-apps__hand .qc2-pic { aspect-ratio: 4 \/ 5; }\n}\n@container qc2 (min-width: 40rem) and (max-width: 63.99rem) {\n  .qc2.svc-apps .svc-apps__rider .qc2-pic { aspect-ratio: 3 \/ 2; }\n  .qc2.svc-apps .svc-apps__hand .qc2-pic { aspect-ratio: 3 \/ 2; }\n  .qc2.svc-apps .svc-apps__route { width: 30%; margin-top: -26%; }\n  .qc2.svc-apps .svc-apps__pair { width: 70%; justify-self: end; }\n}\n@container qc2 (min-width: 64rem) {\n  .qc2.svc-apps .qc2-mosaic__grid { row-gap: 0; align-items: start; }\n  .qc2.svc-apps .qc2-mosaic__grid > * { margin-top: 0; }\n  .qc2.svc-apps .svc-apps__head  { grid-column: 1 \/ span 5; grid-row: 1; padding-top: var(--qc2-s4); }\n  .qc2.svc-apps .svc-apps__rider { grid-column: 7 \/ -1; grid-row: 1 \/ span 2; margin-right: calc(-1 * var(--qc2-edge)); }\n  .qc2.svc-apps .svc-apps__route {\n    grid-column: 1 \/ span 4; grid-row: 2; justify-self: start; align-self: start;\n    width: min(100%, 19rem); margin-top: var(--qc2-s8);\n  }\n  .qc2.svc-apps .svc-apps__route .qc2-cut { animation: none; -webkit-mask-image: none; mask-image: none; }\n  .qc2.svc-apps .svc-apps__hand {\n    grid-column: 1 \/ span 7; grid-row: 3; margin-top: var(--qc2-s10);\n    margin-left: calc(-1 * var(--qc2-edge));\n  }\n  .qc2.svc-apps .svc-apps__hand figcaption { padding-left: var(--qc2-edge); }\n  .qc2.svc-apps .svc-apps__pair { grid-column: 8 \/ -1; grid-row: 3; margin-top: calc(var(--qc2-s10) + var(--qc2-s8)); }\n}\n<\/style>\n<div class=\"qc2 qc2--paper qc2-mosaic qc2-sec qc2-svc svc-apps\" id=\"apps\">\n  <div class=\"qc2-wrap\">\n    <div class=\"qc2-mosaic__grid\">\n      <div class=\"qc2-mosaic__head qc2-stack svc-apps__head\">\n        <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Mobile apps<\/p>\n        <h2 class=\"qc2-h\">Your service on their phone<\/h2>\n        <p>Android and iPhone apps that put your service on your customer's phone, or in your team's hands on the road. Only when your project really needs one: if a good website is enough, we'll tell you.<\/p>\n      <\/div>\n      <figure class=\"svc-apps__rider\">\n        <div class=\"qc2-pic qc2-cut\" style=\"--qc2-focus: 50% 50%\">\n          \n          <img loading=\"lazy\" decoding=\"async\" class=\"qcui-t\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-delivery-rider-next-stop-r155.webp\" width=\"2400\" height=\"1548\" loading=\"lazy\"\n               alt=\"The delivery app on two phones: today's route and the proof of delivery\"><img loading=\"lazy\" decoding=\"async\" class=\"qcui-d\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-delivery-rider-next-stop-r80.webp\" width=\"1300\" height=\"1625\" loading=\"lazy\"\n               alt=\"The delivery app on two phones: today's route and the proof of delivery\">\n        <\/div>\n      <\/figure>\n      <figure class=\"svc-apps__route\">\n        <div class=\"qc2-pic qc2-phone qc2-cut qc2-cut--late\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-delivery-app-route-list.webp\" width=\"390\" height=\"844\" loading=\"lazy\"\n               alt=\"Driver app: today's route with 9 of 18 stops done, the next stop on a map and the stops still to come\">\n        <\/div>\n        <figcaption class=\"qc2-cap svc-cap\"><a href=\"\/work\/delivery-app\/\">Delivery app<\/a>, the driver's route for today<\/figcaption>\n      <\/figure>\n      <figure class=\"svc-apps__hand\">\n        <div class=\"qc2-pic qc2-cut\" style=\"--qc2-focus: 50% 45%; --qc2-focus-m: 50% 40%\">\n          \n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-phone-held-booking-r155.webp\" width=\"2400\" height=\"1548\" loading=\"lazy\"\n               alt=\"A phone showing a booking confirmation from the booking system\">\n        <\/div>\n        <figcaption class=\"qc2-cap svc-cap\"><a href=\"\/work\/booking-system\/\">Booking system<\/a>, the client's next visit on their own phone<\/figcaption>\n      <\/figure>\n      <div class=\"svc-apps__pair\">\n        <figure>\n          <div class=\"qc2-pic qc2-phone\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-sales-crm-mobile-today.webp\" width=\"390\" height=\"844\" loading=\"lazy\"\n                 alt=\"Sales app: one rep's follow-ups for today, with a call to make and a quote to send\">\n          <\/div>\n          <figcaption class=\"qc2-cap svc-cap\"><a href=\"\/work\/sales-crm\/\">Sales CRM<\/a>, a rep's day<\/figcaption>\n        <\/figure>\n        <figure>\n          <div class=\"qc2-pic qc2-phone\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-inventory-sales-mobile-transfer-request.webp\" width=\"390\" height=\"844\" loading=\"lazy\"\n                 alt=\"Inventory app: a store asks the central warehouse for 12 mugs, with the quantity it suggests\">\n          <\/div>\n          <figcaption class=\"qc2-cap svc-cap\"><a href=\"\/work\/inventory-sales\/\">Inventory app<\/a>, stock asked from the warehouse<\/figcaption>\n        <\/figure>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.svc-apps .svc-apps__pair > :last-child:not(#qc2-guard) { margin-top: var(--qc2-s8); }\n@container qc2 (max-width: 63.99rem) { .qc2.svc-apps .qc2-mosaic__grid > *:not(#qc2-guard) { margin-top: var(--qc2-s7); } }\n@container qc2 (max-width: 63.99rem) { .qc2.svc-apps .qc2-mosaic__grid > :first-child:not(#qc2-guard) { margin-top: 0; } }\n@container qc2 (max-width: 63.99rem) { .qc2.svc-apps .svc-apps__rider:not(#qc2-guard), .qc2.svc-apps .svc-apps__hand:not(#qc2-guard) { margin-inline: calc(-1 * var(--qc2-margin)); } }\n@container qc2 (max-width: 63.99rem) { .qc2.svc-apps .svc-apps__route:not(#qc2-guard) { margin-top: -40%; } }\n@container qc2 (min-width: 40rem) and (max-width: 63.99rem) { .qc2.svc-apps .svc-apps__route:not(#qc2-guard) { margin-top: -26%; } }\n@container qc2 (min-width: 64rem) { .qc2.svc-apps .qc2-mosaic__grid > *:not(#qc2-guard) { margin-top: 0; } }\n@container qc2 (min-width: 64rem) { .qc2.svc-apps .svc-apps__rider:not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-edge)); } }\n@container qc2 (min-width: 64rem) { .qc2.svc-apps .svc-apps__route:not(#qc2-guard) { margin-top: var(--qc2-s8); } }\n@container qc2 (min-width: 64rem) { .qc2.svc-apps .svc-apps__hand:not(#qc2-guard) { margin-top: var(--qc2-s10); margin-left: calc(-1 * var(--qc2-edge)); } }\n@container qc2 (min-width: 64rem) { .qc2.svc-apps .svc-apps__pair:not(#qc2-guard) { margin-top: calc(var(--qc2-s10) + var(--qc2-s8)); } }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5f2135c1 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"5f2135c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-470c3e72 elementor-widget elementor-widget-html\" data-id=\"470c3e72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n\/* Process rail used as an index of the four Systems services, on Stone. Each service is shown on a\n   different product of ours, standing on a plate of that product's own colour that bleeds off the left\n   edge: as the held screen changes (the site's rail script marks it .is-on), the plate follows it,\n   green -> orange -> plum -> blue. Without the script the first screen and the green plate stay. The\n   words stay on Stone, so nothing reflows and no contrast changes. On a phone each service shows its\n   screen on its own plate, edge to edge, above its words (as the case pages' \"how it works\" rail). *\/\n.qc2.svc-sys .qc2-rail__step > .qc2-rail__get { max-width: 44ch; }\n.qc2.svc-sys .qc2-rail__step > .qc2-actions { margin-top: var(--qc2-s5); }\n@container qc2 (max-width: 63.99rem) {\n  .qc2.svc-sys .qc2-rail__step > .qc2-rail__inline {\n    margin: 0 calc(-1 * var(--qc2-margin)) var(--qc2-s6); padding: var(--qc2-s6) var(--qc2-margin);\n  }\n}\n@container qc2 (min-width: 64rem) {\n  \/* the plate takes seven columns and runs off the left edge; the screen stands on it, its left edge\n     on the page margin, 48px of colour above, below and to its right *\/\n  .qc2.svc-sys .qc2-rail__hold { grid-column: 1 \/ span 7; justify-content: center; gap: var(--qc2-s7); }\n  .qc2.svc-sys .qc2-rail__frame {\n    display: grid; aspect-ratio: auto; padding: var(--qc2-s7) var(--qc2-s7) var(--qc2-s7) var(--qc2-edge);\n    background: var(--qc2-f-stock); transition: background-color 500ms ease;\n  }\n  .qc2.svc-sys .qc2-rail__frame > .qc2-pic { grid-area: 1 \/ 1; position: relative; inset: auto; height: auto; aspect-ratio: 16 \/ 10; }\n  .qc2.svc-sys .qc2-rail__frame:has(> .svc-sys--route.is-on) { background: var(--qc2-f-route); }\n  .qc2.svc-sys .qc2-rail__frame:has(> .svc-sys--book.is-on)  { background: var(--qc2-f-book); }\n  .qc2.svc-sys .qc2-rail__frame:has(> .svc-sys--crm.is-on)   { background: var(--qc2-f-crm); }\n  \/* two services in view at a time, 96px apart, so the plate changes about every 40% of a screen;\n     the foot leaves room for the last one to cross the middle while the hold is still pinned *\/\n  .qc2.svc-sys .qc2-rail__steps { grid-column: 9 \/ -1; display: grid; row-gap: var(--qc2-s9); padding-block: 18svh 32svh; }\n  .qc2.svc-sys .qc2-rail__step { min-height: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .qc2.svc-sys .qc2-rail__frame { transition-duration: 120ms; }\n}\n<\/style>\n<div class=\"qc2 qc2--stone qc2-rail qc2-rail--screens qc2-sec qc2-svc svc-sys\" id=\"systems\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-rail__hold\">\n      <div class=\"qc2-head\">\n        <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Business systems<\/p>\n        <h2 class=\"qc2-h\">Software for your whole company<\/h2>\n      <\/div>\n      <div class=\"qc2-rail__frame\">\n        <figure class=\"qc2-pic qc2-screen svc-sys--stock is-on\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-inventory-sales-stock-overview.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Inventory system: stock for three stores and a warehouse in one table, with low-stock alerts\"><\/figure>\n        <figure class=\"qc2-pic qc2-screen svc-sys--route\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-delivery-app-dispatcher-dashboard.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Dispatch board: today's orders on one side and the drivers on a live map\"><\/figure>\n        <figure class=\"qc2-pic qc2-screen svc-sys--book\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-03-reminder-settings.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Reminder settings: the WhatsApp and SMS messages that go out before and after each visit\"><\/figure>\n        <figure class=\"qc2-pic qc2-screen svc-sys--crm\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-sales-crm-reports.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Team report: revenue against target, deals by stage and activity per rep\"><\/figure>\n      <\/div>\n    <\/div>\n    <ul class=\"qc2-rail__steps\">\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-stock\"><div class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-inventory-sales-stock-overview.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Inventory system: stock for three stores and a warehouse in one table\"><\/div><\/figure>\n        <h3 class=\"qc2-title\">Business systems<\/h3>\n        <p>Customers (CRM), sales, inventory, staff and bookings in one system instead of scattered spreadsheets.<\/p>\n        <p class=\"qc2-rail__get\">For example, the inventory system keeps every store and the warehouse in one live stock table.<\/p>\n        <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/inventory-sales\/\">See the inventory system<\/a><\/div>\n      <\/li>\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-route\"><div class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-delivery-app-dispatcher-dashboard.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Dispatch board with today's orders and the drivers on a live map\"><\/div><\/figure>\n        <h3 class=\"qc2-title\">Custom software<\/h3>\n        <p>Software built around how you work, so it solves the problem ready-made tools can't.<\/p>\n        <p class=\"qc2-rail__get\">The delivery app, for example, pairs a driver app with a live dispatch map for the office.<\/p>\n        <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/delivery-app\/\">See the delivery app<\/a><\/div>\n      <\/li>\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-book\"><div class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-03-reminder-settings.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Reminder settings for the WhatsApp and SMS messages sent before each visit\"><\/div><\/figure>\n        <h3 class=\"qc2-title\">Automation &amp; integrations<\/h3>\n        <p>We connect your website, sales, WhatsApp and accounting, so data moves by itself and manual work drops.<\/p>\n        <p class=\"qc2-rail__get\">For example, the booking system sends confirmations and reminders on WhatsApp and SMS on its own.<\/p>\n        <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/booking-system\/\">See the booking system<\/a><\/div>\n      <\/li>\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-crm\"><div class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-sales-crm-reports.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Team report with revenue against target and activity per rep\"><\/div><\/figure>\n        <h3 class=\"qc2-title\">Reports &amp; dashboards<\/h3>\n        <p>Sales, expenses and team performance on one screen, so you decide with the full picture.<\/p>\n        <p class=\"qc2-rail__get\">The sales CRM's team report, for example, shows revenue against target and the work behind it.<\/p>\n        <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/sales-crm\/\">See the sales CRM<\/a><\/div>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.svc-sys .qc2-rail__step > .qc2-actions:not(#qc2-guard) { margin-top: var(--qc2-s5); }\n@container qc2 (max-width: 63.99rem) { .qc2.svc-sys .qc2-rail__step > .qc2-rail__inline:not(#qc2-guard) { margin: 0 calc(-1 * var(--qc2-margin)) var(--qc2-s6); } }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d819fec e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"4d819fec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7627916b elementor-widget elementor-widget-html\" data-id=\"7627916b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n\/* Two fields: the words on Paper; on the assistant's teal field, the phone answer stands on the\n   section's foot at the left, and the desktop chat runs off the right edge, its lower-left corner\n   tucked behind the phone (one overlap, about 90px each way). *\/\n.qc2.svc-ai .qc2-two__b { min-height: 34rem; justify-content: flex-start; }\n.qc2.svc-ai .qc2-two__b > .svc-ai__desk { position: absolute; top: var(--qc2-s9); left: 40%; width: calc(60% + 8rem); margin: 0; }\n.qc2.svc-ai .qc2-two__b > .qc2-phone { position: relative; z-index: 1; align-self: flex-end; }\n.qc2.svc-ai .qc2-facts { gap: var(--qc2-s4); }\n@container qc2 (max-width: 63.99rem) {\n  \/* words first: the proof then closes the section on its teal field *\/\n  .qc2.svc-ai .qc2-two__a { order: 1; padding-top: var(--qc2-sec); padding-bottom: var(--qc2-s8); }\n  .qc2.svc-ai .qc2-two__b { order: 2; min-height: 0; padding-top: 34%; }\n  .qc2.svc-ai .qc2-two__b > .svc-ai__desk { top: var(--qc2-s7); left: 36%; width: calc(64% + 6rem); }\n  .qc2.svc-ai .qc2-two__b > .qc2-phone { width: min(46%, 17rem); }\n}\n@container qc2 (min-width: 64rem) {\n  .qc2.svc-ai .qc2-two__b { padding: 0 var(--qc2-s8); }\n  .qc2.svc-ai .qc2-two__b > .qc2-phone { width: min(44%, 19rem); }\n}\n<\/style>\n<div class=\"qc2 qc2--paper qc2-two qc2-svc svc-ai\" id=\"ai\">\n  <div class=\"qc2-two__split\">\n    <div class=\"qc2-two__a qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>AI solutions<\/p>\n      <h2 class=\"qc2-h\">An assistant that works with you<\/h2>\n      <p class=\"qc2-lead\">Smart assistants that answer customers, search your company files and pull out what matters from documents.<\/p>\n      <dl class=\"qc2-facts\">\n        <div><dt>Answers with their source<\/dt><dd>Every answer shows the file and page it came from, so people can check it.<\/dd><\/div>\n        <div><dt>Only what each person may see<\/dt><dd>It answers only from files the person asking is allowed to open.<\/dd><\/div>\n        <div><dt>A person for the hard cases<\/dt><dd>If a question is above a policy limit, it goes to the right team.<\/dd><\/div>\n      <\/dl>\n      <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/ai-document-assistant\/\">See the document assistant<\/a><\/div>\n    <\/div>\n    <div class=\"qc2-two__b qc2--f-docs\">\n      <figure class=\"qc2-pic qc2-screen svc-ai__desk qc2-cut\">\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-chat.webp\" width=\"1440\" height=\"900\" loading=\"lazy\"\n             alt=\"Document assistant on a desktop: an answer about a hotel limit, with its four sources and the policy page open beside it\">\n      <\/figure>\n      <figure class=\"qc2-pic qc2-phone qc2-cut qc2-cut--late\">\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-mobile-answer.webp\" width=\"390\" height=\"844\" loading=\"lazy\"\n             alt=\"The assistant on a phone explains how to reset an error code step by step, with its sources\">\n      <\/figure>\n    <\/div>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.svc-ai .qc2-two__b > .svc-ai__desk:not(#qc2-guard) { margin: 0; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4218aebe e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"4218aebe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ac9fbcc elementor-widget elementor-widget-html\" data-id=\"4ac9fbcc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n<\/style>\n<div class=\"qc2 qc2-band qc2-svc svc-band\" id=\"support\">\n  <figure class=\"qc2-pic qc2-band__pic qc2-cut\" style=\"--qc2-focus: 50% 55%; --qc2-focus-m: 58% 50%\">\n    \n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-hands-laptop-pipeline-r155.webp\" width=\"2400\" height=\"1548\" loading=\"lazy\"\n         alt=\"The sales CRM's team reports on a laptop\">\n  <\/figure>\n  <div class=\"qc2-band__plate\">\n    <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Support<\/p>\n    <h2 class=\"qc2-h\">With you after launch<\/h2>\n    <p>Launch isn't the last line of code. Your system stays online, up to date and secure, and keeps getting better while you run the business.<\/p>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-52e6e380 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"52e6e380\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-519ba54f elementor-widget elementor-widget-html\" data-id=\"519ba54f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n\/* Spec sheet: Operations with a photo, Security with a tight crop of a real screen, Tech consulting in\n   words only. The crops do not open on the cut: they are details, not places. *\/\n.qc2.svc-rows .qc2-rows__crop { aspect-ratio: 3 \/ 2; }\n.qc2.svc-rows .qc2-rows__row .qc2-actions { margin-top: var(--qc2-s4); }\n\/* a tight crop of a 1440 x 900 screen: --z is the image width against the frame, --x and --y the\n   crop's top-left corner as a share of the frame's width (Security: x 960 to 1412, y 160 to 461 of the\n   access screen, the Sales to Leadership columns with the access menu open; its sides sit on the\n   table's own column line and outer edge, so no column is cut through) *\/\n\/* flow-root keeps the image's negative margin inside the frame; min-height 0 holds the frame to 3:2 (an\n   aspect-ratio box otherwise grows to fit its content, and overflow: clip does not stop that) *\/\n.qc2.svc-rows .svc-zoom { display: flow-root; min-height: 0; }\n.qc2.svc-rows .svc-zoom > img {\n  width: var(--z); max-width: none; height: auto; aspect-ratio: 16 \/ 10;\n  margin-left: calc(-1 * var(--x)); margin-top: calc(-1 * var(--y));\n}\n@container qc2 (max-width: 63.99rem) {\n  .qc2.svc-rows .qc2-rows__crop { margin-inline: calc(-1 * var(--qc2-margin)); }\n}\n@container qc2 (min-width: 64rem) {\n  .qc2.svc-rows .qc2-rows__list { grid-column: 5 \/ -1; }\n  .qc2.svc-rows .qc2-rows__row:has(> .qc2-rows__crop) { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); column-gap: var(--qc2-s7); align-items: center; }\n  \/* the photo runs off the right edge; the screen crop stays inside the frame *\/\n  .qc2.svc-rows .qc2-rows__row > .svc-bleed:not(.svc-zoom) { margin-right: calc(-1 * var(--qc2-edge)); }\n  \/* the words-only row keeps to the words' column of the rows above *\/\n  .qc2.svc-rows .qc2-rows__row:not(:has(> .qc2-rows__crop)) { max-width: calc((100% - var(--qc2-s7)) * 3 \/ 7); }\n}\n<\/style>\n<div class=\"qc2 qc2--stone qc2-rows qc2-rows--hold qc2-sec qc2-svc svc-rows\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-rows__head qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>What's included<\/p>\n      <h2 class=\"qc2-h\">What staying looks like<\/h2>\n      <p>Pick what you need. Each one can start at launch or later.<\/p>\n    <\/div>\n    <div class=\"qc2-rows__list\">\n      <div class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Operations &amp; maintenance<\/h3>\n        <p>Hosting, deployment, backups, updates and fixes, so your system keeps running while you focus on the business.<\/p>\n        <figure class=\"qc2-pic qc2-rows__crop svc-bleed\" style=\"--qc2-focus: 50% 50%\">\n          \n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-warehouse-aisle-stock-scan-r155.webp\" width=\"2400\" height=\"1548\" loading=\"lazy\"\n               alt=\"The stock overview on a tablet and a stock lookup on a phone\">\n        <\/figure>\n      <\/div>\n      <div class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Security<\/h3>\n        <p>Everyone sees only what they should. We also help protect your data and your customers' data, and security testing is sized to your project.<\/p>\n        <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/work\/ai-document-assistant\/\">See access by team<\/a><\/div>\n        <figure class=\"qc2-pic qc2-rows__crop svc-bleed svc-zoom\" style=\"--z: 318.6%; --x: 212.4%; --y: 35.4%; background: var(--qc2-paper)\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-ai-document-assistant-access.webp\" width=\"1440\" height=\"900\" loading=\"lazy\"\n               alt=\"Access settings in the document assistant: for each collection, a team can manage it, ask about it, or has no access\">\n        <\/figure>\n      <\/div>\n      <div class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Tech consulting<\/h3>\n        <p>Before you spend money, you find out exactly what you need: a new build, or a ready-made tool that already does the job.<\/p>\n        <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/how-we-work\/\">See how a project starts<\/a><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.svc-rows .qc2-rows__row .qc2-actions:not(#qc2-guard) { margin-top: var(--qc2-s4); }\n.qc2.svc-rows .svc-zoom > img:not(#qc2-guard) { margin-left: calc(-1 * var(--x)); margin-top: calc(-1 * var(--y)); }\n@container qc2 (max-width: 63.99rem) { .qc2.svc-rows .qc2-rows__crop:not(#qc2-guard) { margin-inline: calc(-1 * var(--qc2-margin)); } }\n@container qc2 (min-width: 64rem) { .qc2.svc-rows .qc2-rows__row > .svc-bleed:not(.svc-zoom):not(#qc2-guard) { margin-right: calc(-1 * var(--qc2-edge)); } }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b379ebb e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"7b379ebb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-30ffbf87 elementor-widget elementor-widget-html\" data-id=\"30ffbf87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n<\/style>\n<div class=\"qc2 qc2--volt qc2-volt qc2-svc svc-volt\">\n  <div class=\"qc2-wrap\">\n    <div class=\"qc2-volt__frame\">\n      <svg class=\"qc2-volt__chev qc2-volt__chev--l\" viewBox=\"0 0 44 76\" aria-hidden=\"true\"><path d=\"M38 6 L6 38 L38 70\"\/><\/svg>\n      <div class=\"qc2-head\">\n        <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Where to start<\/p>\n        <p class=\"qc2-h qc2-volt__say\">You don't need the name of the service.<\/p>\n      <\/div>\n      <svg class=\"qc2-volt__chev qc2-volt__chev--r\" viewBox=\"0 0 44 76\" aria-hidden=\"true\"><path d=\"M6 6 L38 38 L6 70\"\/><\/svg>\n    <\/div>\n    <p class=\"qc2-lead qc2-volt__more\">Describe your week in your own words. Then we'll match it to one of our software development services, or tell you a ready-made tool will do.<\/p>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1a57fc71 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"1a57fc71\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f1f3e44 elementor-widget elementor-widget-html\" data-id=\"4f1f3e44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n\/* The site header (the light interior variant) is sticky: 76px tall, 64px on phones, so sticky parts\n   sit under it and section anchors land under it, not behind it. *\/\n.qc2.qc2-svc { --qc2-header: 76px; }\n@media (max-width: 767px) { .qc2.qc2-svc { --qc2-header: 64px; } }\n.qc2.qc2-svc[id] { scroll-margin-top: var(--qc2-header); }\n\/* A screen or photo whose caption carries a link to its case: the link is the caption's first words. *\/\n.qc2-svc .svc-cap a { color: inherit; text-decoration-thickness: 0.07em; }\n<\/style>\n<div class=\"qc2 qc2--ink qc2-line qc2-svc svc-line\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-line__text qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Contact<\/p>\n      <h2 class=\"qc2-h\">Which service fits?<\/h2>\n      <p class=\"qc2-lead qc2-muted\">Pick what you need, then we'll write the first message for you. No tech words needed.<\/p>\n      <fieldset class=\"qc2-pick\">\n        <legend>What do you need?<\/legend>\n        <div class=\"qc2-pick__opts\">\n          <label><input type=\"radio\" name=\"need\" value=\"a website\"><span>Website<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"an online store\"><span>Online store<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"a mobile app\"><span>App<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"a business system\"><span>Business system<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"an AI assistant\"><span>AI<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"help deciding\"><span>Not sure yet<\/span><\/label>\n        <\/div>\n      <\/fieldset>\n      <div class=\"qc2-actions\">\n        <a class=\"qc2-btn\" data-qc2-wa href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.\">Message us on WhatsApp<\/a>\n        <a class=\"qc2-link\" href=\"mailto:info@qcoders.com\">info@qcoders.com<\/a>\n        <a class=\"qc2-link\" href=\"\/faq\/\">Common questions<\/a>\n      <\/div>\n    <\/div>\n    <figure class=\"qc2-pic qc2-line__pic qc2-cut\">\n      \n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-phone-held-close.webp\" srcset=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-phone-held-close-640.webp 640w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-phone-held-close.webp 1000w\" sizes=\"auto, (min-width: 1024px) 42vw, 100vw\" width=\"1000\" height=\"1250\" loading=\"lazy\"\n           alt=\"A phone showing a WhatsApp message to Qcoders\">\n      <div class=\"qc2-line__screen\" data-ui aria-hidden=\"true\">\n        <div class=\"qc2-line__bar\">\n          <svg viewBox=\"7 16 115 97\"><g fill=\"none\" stroke-width=\"12\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M51 28 L19 60 L51 92\" stroke=\"#0A0E17\"\/><path d=\"M69 28 L101 60 L69 92\" stroke=\"#0A0E17\"\/><path d=\"M97 88 L110 101\" stroke=\"#6E9400\"\/><\/g><\/svg>\n          Qcoders\n        <\/div>\n        <div class=\"qc2-line__msgs\">\n          <p class=\"qc2-line__bubble\" data-qc2-wa-text>Hi Qcoders, I found you on your website.<\/p>\n        <\/div>\n        <div class=\"qc2-line__compose\">Message<\/div>\n      <\/div>\n    <\/figure>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>12 services, one partner. Our software development services cover everything from a simple website to the system that runs your whole company. Then we stay, with the support that keeps it running. \/\/ At a glance Our services at a glance Twelve software development services in six groups. Pick the one that sounds like your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Software development services | Qcoders<\/title>\n<meta name=\"description\" content=\"12 software development services in one place: websites, online stores, mobile apps, business systems, automation, AI, hosting and security.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/qcoders.com\/ar\/services\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Software development services | Qcoders\" \/>\n<meta property=\"og:description\" content=\"12 software development services in one place: websites, online stores, mobile apps, business systems, automation, AI, hosting and security.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/qcoders.com\/ar\/services\/\" \/>\n<meta property=\"og:site_name\" content=\"Qcoders\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-02T07:00:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"16 \u062f\u0642\u064a\u0642\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/services\\\/\",\"url\":\"https:\\\/\\\/qcoders.com\\\/services\\\/\",\"name\":\"Software development services | Qcoders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/services\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/services\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qc-work-booking-system-02-booking-page.webp\",\"datePublished\":\"2026-10-25T14:07:05+00:00\",\"dateModified\":\"2026-11-02T07:00:52+00:00\",\"description\":\"12 software development services in one place: websites, online stores, mobile apps, business systems, automation, AI, hosting and security.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/services\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/qcoders.com\\\/services\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/services\\\/#primaryimage\",\"url\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qc-work-booking-system-02-booking-page.webp\",\"contentUrl\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qc-work-booking-system-02-booking-page.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/services\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/qcoders.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Services\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/#website\",\"url\":\"https:\\\/\\\/qcoders.com\\\/\",\"name\":\"Qcoders\",\"description\":\"Code that runs your business.\",\"publisher\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/qcoders.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/#organization\",\"name\":\"Qcoders\",\"url\":\"https:\\\/\\\/qcoders.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qcoders-logo-qcoders-2026.png\",\"contentUrl\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qcoders-logo-qcoders-2026.png\",\"width\":2000,\"height\":398,\"caption\":\"Qcoders\"},\"image\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Software development services | Qcoders","description":"12 software development services in one place: websites, online stores, mobile apps, business systems, automation, AI, hosting and security.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/qcoders.com\/ar\/services\/","og_locale":"ar_AR","og_type":"article","og_title":"Software development services | Qcoders","og_description":"12 software development services in one place: websites, online stores, mobile apps, business systems, automation, AI, hosting and security.","og_url":"https:\/\/qcoders.com\/ar\/services\/","og_site_name":"Qcoders","article_modified_time":"2026-11-02T07:00:52+00:00","og_image":[{"url":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"16 \u062f\u0642\u064a\u0642\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/qcoders.com\/services\/","url":"https:\/\/qcoders.com\/services\/","name":"Software development services | Qcoders","isPartOf":{"@id":"https:\/\/qcoders.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/qcoders.com\/services\/#primaryimage"},"image":{"@id":"https:\/\/qcoders.com\/services\/#primaryimage"},"thumbnailUrl":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp","datePublished":"2026-10-25T14:07:05+00:00","dateModified":"2026-11-02T07:00:52+00:00","description":"12 software development services in one place: websites, online stores, mobile apps, business systems, automation, AI, hosting and security.","breadcrumb":{"@id":"https:\/\/qcoders.com\/services\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/qcoders.com\/services\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/qcoders.com\/services\/#primaryimage","url":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp","contentUrl":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/qcoders.com\/services\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/qcoders.com\/"},{"@type":"ListItem","position":2,"name":"Services"}]},{"@type":"WebSite","@id":"https:\/\/qcoders.com\/#website","url":"https:\/\/qcoders.com\/","name":"Qcoders","description":"\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062a\u0634\u063a\u0651\u0644 \u0623\u0639\u0645\u0627\u0644\u0643.","publisher":{"@id":"https:\/\/qcoders.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/qcoders.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/qcoders.com\/#organization","name":"Qcoders","url":"https:\/\/qcoders.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/qcoders.com\/#\/schema\/logo\/image\/","url":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qcoders-logo-qcoders-2026.png","contentUrl":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qcoders-logo-qcoders-2026.png","width":2000,"height":398,"caption":"Qcoders"},"image":{"@id":"https:\/\/qcoders.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":31,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":1098,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages\/20\/revisions\/1098"}],"wp:attachment":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}