body{margin:0}
a{color:#0B5CD0}a:hover{color:#011738}
.a2b{--navy:#011738;--ink:#000E24;--blue:#0175FD;--pen:#0B5CD0;--sky:#6FB1FF;--slate:#37526F;--mist:#F2F5FA;--line:#D9E0EA;--paper:#F5F2EA;--rule:#D6CFBF;--red:#C23A22;--soft:#B4C2D6;font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--navy);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px;line-height:1.65}
.a2b *{box-sizing:border-box}
.a2b img{display:block;max-width:100%}
:where(.a2b) :where(h1,h2,h3,h4,p){margin:0}
.ar{font-family:'IBM Plex Sans Arabic',sans-serif}
.rq{font-family:'Aref Ruqaa',serif}
.hw{font-family:Caveat,cursive;font-weight:600;color:var(--pen);line-height:1.1}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.sec{padding:clamp(56px,7vw,100px) 0;position:relative}

/* pen strokes */
.pen{position:absolute;fill:none;stroke:var(--pen);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;overflow:visible;pointer-events:none;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.3,1) var(--d,.35s)}
.pen.red{stroke:var(--red)}
.pen.sky{stroke:var(--sky)}
.mk{position:relative;white-space:nowrap;display:inline-block}
.mk .circ{left:-7%;top:-10%;width:114%;height:124%}
.mk .ul{left:-2%;bottom:-.16em;width:104%;height:.3em}
.js .sx:not(.in) .pen{stroke-dashoffset:1;opacity:0}
.js .sx.in .pen{animation:penon .01s linear var(--d,.35s) both}
.js .sx.in .qb .pen,.js .sx.in .qb.on .pen{animation:none}
@keyframes penon{from{opacity:0}to{opacity:1}}
.js .sx .rv{transition:opacity .8s ease calc(var(--i,0)*90ms),transform .9s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*90ms)}
.js .sx:not(.in) .rv{opacity:0;transform:translateY(26px)}

/* type */
.kick{display:flex;align-items:baseline;gap:14px;font:700 13px/1 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.kick b{font:800 13px/1 Montserrat,sans-serif;color:var(--pen)}
.kick::after{content:"";flex:0 0 56px;height:1px;background:currentColor;opacity:.4;transform:translateY(-4px)}
.on-navy .kick{color:var(--soft)}.on-navy .kick b{color:var(--sky)}
.h2{font:800 clamp(30px,3.7vw,50px)/1.08 Montserrat,sans-serif;letter-spacing:-.035em;margin-top:18px;text-wrap:balance}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--slate);max-width:600px;margin-top:18px}
.on-navy{background:var(--navy);color:#fff}
.on-navy .lead{color:var(--soft)}
.on-navy .hw{color:var(--sky)}

/* buttons: round turns, square ends */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:14px 14px 14px 3px;font:700 16px Montserrat,sans-serif;text-decoration:none;white-space:nowrap;transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease}
.btn svg{transition:transform .3s ease}
.btn:hover svg{transform:translateX(5px)}
.btn-p{background:var(--navy);color:#fff;box-shadow:5px 5px 0 var(--blue)}
.btn-p:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue)}
.btn-w{background:#fff;color:var(--navy);box-shadow:5px 5px 0 var(--blue)}
.btn-w:hover{color:var(--navy);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue)}
.btn-o{border:1.5px solid var(--navy);color:var(--navy);background:transparent}
.btn-o:hover{background:var(--navy);color:#fff}
.btn-ol{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-ol:hover{background:#fff;color:var(--navy)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:48px;font:700 16px Montserrat,sans-serif;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:2px}
.tlink:hover{color:var(--pen)}
.tlink svg{transition:transform .3s ease}.tlink:hover svg{transform:translateX(5px)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.logo{width:196px;flex:none}
.nav{display:flex;gap:32px}
.nav a{position:relative;color:var(--navy);text-decoration:none;font:600 14.5px Montserrat,sans-serif;padding:12px 0}
.nav a::after{content:"";position:absolute;left:50%;bottom:4px;width:6px;height:6px;border-radius:50%;background:var(--blue);transform:translateX(-50%) scale(0);transition:transform .25s ease}
.nav a:hover::after{transform:translateX(-50%) scale(1)}
.hdr-r{display:flex;align-items:center;gap:18px}
.lang{font:500 16px 'IBM Plex Sans Arabic',sans-serif;color:var(--navy);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.lang:hover{color:var(--pen)}
.hdr .btn{min-height:44px;padding:0 20px;font-size:14.5px;box-shadow:3px 3px 0 var(--blue)}
.burger{display:none;width:46px;height:46px;border-radius:12px 12px 12px 3px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);align-items:center;justify-content:center;cursor:pointer;padding:0}
.mnav{display:flex;flex-direction:column;padding:6px clamp(20px,5vw,48px) 26px;border-top:1px solid var(--line);background:#fff;animation:drop .3s ease both}
.mnav a{display:flex;align-items:center;min-height:54px;font:700 20px Montserrat,sans-serif;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:20px;color:#fff;border:0;font-size:16px}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* hero */
.hero{position:relative;padding:clamp(40px,6vw,84px) 0 clamp(64px,8vw,110px)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.mast{display:flex;gap:14px;align-items:center;font:600 13px/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.mast i{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none}
.h1{font:800 clamp(38px,4.2vw,64px)/1.04 Montserrat,sans-serif;letter-spacing:-.045em;margin-top:26px}
.h1 .ln{white-space:nowrap}
.h1 .ln{display:block}
.h1 .ln>span{display:inline-block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(45%) rotate(1.5deg)}to{opacity:1;transform:none}}
.h1 .b{color:var(--blue)}
.h1 .pen{stroke-width:2;animation:ink 1s 1.2s cubic-bezier(.6,0,.3,1) both}
.h1 .pen.l2{animation-delay:1.7s}
@keyframes ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.fu{animation:fu .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-sub{font-size:clamp(17px,1.55vw,20.5px);color:var(--slate);max-width:540px;margin-top:34px}
.hero-cta{display:flex;gap:16px 30px;align-items:center;flex-wrap:wrap;margin-top:38px}
.hero-n{display:flex;align-items:flex-start;gap:8px;margin-top:18px;font-size:25px;transform:rotate(-2deg);transform-origin:left}
.hero-n svg{position:static;width:38px;height:30px;flex:none;animation:ink .7s 2.1s both}

/* hero art */
.art{position:relative;container-type:inline-size;aspect-ratio:1/.94;width:100%;max-width:620px;justify-self:end}
.sheet{position:absolute;left:0;top:7%;width:63%;padding:5cqw 4cqw 4cqw 9cqw;background:var(--paper);transform:rotate(-4deg);box-shadow:0 1px 1px rgba(1,23,56,.12),0 30px 50px -28px rgba(1,23,56,.5);font-family:Caveat,cursive;font-weight:600;font-size:clamp(17px,5.3cqw,33px);color:#1B2C4A;background-image:repeating-linear-gradient(transparent 0 calc(8.4cqw - 1px),var(--rule) calc(8.4cqw - 1px) 8.4cqw);background-position:0 4.6cqw;animation:sheetin 1.1s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheetin{from{opacity:0;transform:rotate(-9deg) translate(-20px,30px)}to{opacity:1;transform:rotate(-4deg)}}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:5.6cqw;width:3px;border-left:1px solid #DDA79B;border-right:1px solid #DDA79B}
.sheet-h{display:flex;justify-content:space-between;align-items:baseline;height:8.4cqw;font-weight:700}
.sheet-h small{font-size:.72em;font-weight:400;color:var(--slate)}
.srow{display:flex;justify-content:space-between;align-items:baseline;height:8.4cqw;line-height:8.4cqw;white-space:nowrap}
.srow .q{position:relative;color:var(--red);font-weight:700}
.srow .q .pen{left:-60%;top:8%;width:220%;height:84%;animation:ink .7s 1.9s both}
.srow s{text-decoration:none;position:relative}
.srow s .pen{left:-4%;top:40%;width:108%;height:26%;animation:ink .5s 2.3s both}
.ring{position:absolute;left:6%;bottom:-9%;width:26%;aspect-ratio:1;border-radius:50%;border:.9cqw solid rgba(140,96,48,.13);border-left-color:rgba(140,96,48,.05);transform:rotate(20deg)}
.sticky{position:absolute;left:3%;bottom:6%;width:36%;padding:3.4cqw 3.2cqw 4cqw;background:#DCE9FB;transform:rotate(5deg);box-shadow:0 14px 22px -14px rgba(1,23,56,.5);font-size:clamp(17px,4.5cqw,28px);animation:fu .8s 1s both}
.sticky::before{content:"";position:absolute;left:34%;top:-2.2cqw;width:32%;height:4cqw;background:rgba(255,255,255,.75);box-shadow:0 1px 2px rgba(1,23,56,.15);transform:rotate(-3deg)}
.board{position:absolute;right:0;bottom:1%;width:61%;background:#fff;border:1px solid var(--line);border-radius:3.4cqw 3.4cqw 3.4cqw .8cqw;padding:3.6cqw;transform:rotate(2.5deg);box-shadow:0 40px 70px -34px rgba(1,23,56,.6);font-size:clamp(11.5px,2.5cqw,15.5px);line-height:1.4;animation:boardin 1.1s .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes boardin{from{opacity:0;transform:rotate(7deg) translate(30px,40px)}to{opacity:1;transform:rotate(2.5deg)}}
.board-h{display:flex;justify-content:space-between;align-items:center;font:700 1em Montserrat,sans-serif}
.live{display:inline-flex;align-items:center;gap:6px;font:600 .85em 'IBM Plex Sans',sans-serif;color:var(--pen)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.big{display:flex;align-items:baseline;gap:8px;margin-top:2.4cqw}
.big strong{font:800 clamp(26px,7.4cqw,46px)/1 Montserrat,sans-serif;letter-spacing:-.03em}
.big span{color:var(--slate)}
.spark{display:block;width:100%;height:12cqw;margin-top:1.6cqw;position:static}
.spark path{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;animation:ink 1.6s 1.5s ease both}
.bq{margin-top:2cqw;margin-inline-start:auto;width:fit-content;max-width:92%;background:var(--navy);color:#fff;border-radius:12px 12px 3px 12px;padding:.6em .9em;font-weight:500}
.ba{margin-top:1.4cqw;width:fit-content;max-width:94%;background:var(--mist);border-radius:12px 12px 12px 3px;padding:.6em .9em;font-weight:500;animation:fu .6s 2.4s both}
.smp{display:block;margin-top:1.6cqw;font-size:.82em;color:#5A6F88}
.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.route .dash{fill:none;stroke:var(--navy);stroke-width:.55;stroke-dasharray:1.6 1.8;stroke-linecap:round}
.route .msk{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:1;animation:ink 1.6s 1.2s ease both}
.route circle{fill:var(--blue);animation:penon .01s linear 2.8s both}
@keyframes penon{from{opacity:0}to{opacity:1}}
.pin{position:absolute;display:grid;place-items:center;width:clamp(30px,7.4cqw,44px);aspect-ratio:1;border-radius:32% 32% 32% 8%;font:800 clamp(14px,3.6cqw,21px) Montserrat,sans-serif;color:#fff;transform:translate(-50%,-50%);animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.pin.a{left:57%;top:9.5%;background:var(--navy);animation-delay:1s}
.pin.b{left:95%;top:49.5%;background:var(--blue);animation-delay:2.6s}
.pin.b::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2px solid var(--blue);animation:halo 2.4s 3s ease-out infinite;opacity:0}
@keyframes pop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes halo{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.note{position:absolute;font-size:clamp(19px,4.6cqw,29px);white-space:nowrap}
.note.na{left:21%;top:-3%;transform:rotate(-4deg);animation:fu .6s 1.3s both}
.note.na svg{position:absolute;left:101%;top:20%;width:9cqw;height:8cqw;animation:ink .6s 1.6s both}
.note.nb{right:12%;top:37.5%;transform:rotate(3deg);animation:fu .6s 2.9s both}

.un{display:block}span.un{display:inline-block}
/* systems strip */
.sys{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;display:flex;align-items:center;gap:28px;overflow:hidden}
.sys-t{flex:none;padding-inline-start:clamp(20px,5vw,48px);font:700 12.5px/1.4 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);max-width:210px}
.mq{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-r{display:flex;width:max-content;animation:mq 50s linear infinite}
.mq:hover .mq-r{animation-play-state:paused}
.mq-s{display:flex;align-items:center}
.mq-s span{display:inline-flex;align-items:center;font:700 clamp(19px,2vw,26px) Montserrat,sans-serif;letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
.mq-s span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);margin:0 26px}
@keyframes mq{to{transform:translateX(-50%)}}

/* point A: ledger */
.paper{background:var(--paper)}
.paper::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:max(18px,calc(50% - 596px));width:4px;border-left:1px solid #DDA79B;border-right:1px solid #DDA79B;pointer-events:none}
.pa-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end;padding-inline-start:clamp(14px,3vw,40px)}
.pa-date{justify-self:end;text-align:end;font-size:30px;transform:rotate(-3deg)}
.pa-date small{display:block;font-size:.8em;color:var(--slate);direction:rtl}
.ledger{margin-top:40px;border-top:2px solid var(--navy);padding-inline-start:clamp(14px,3vw,40px)}
.lhead,.lrow{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,300px);gap:clamp(16px,3vw,44px);align-items:start}
.lhead{padding:12px 0;border-bottom:1px solid var(--navy);font:700 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.lrow{padding:30px 0 28px;border-bottom:1px solid var(--rule)}
.lno{font:800 15px/1.9 Montserrat,sans-serif;color:var(--slate);font-variant-numeric:tabular-nums}
.lrow h3{font:700 clamp(21px,2.3vw,29px)/1.2 Montserrat,sans-serif;letter-spacing:-.02em}
.lrow p{color:var(--slate);margin-top:8px;max-width:560px}
.lnote{position:relative;font-size:clamp(25px,2.5vw,31px);padding-top:2px;transform:rotate(var(--r,-2deg));width:fit-content}
.lnote.red{color:var(--red)}
.lnote .pen{left:-3%;bottom:-9px;width:106%;height:10px}
.ltotal{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,300px);gap:clamp(16px,3vw,44px);align-items:center;padding:26px 0;border-bottom:3px double var(--navy);font:700 13px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ltotal .lnote{text-transform:none;letter-spacing:0;font-size:clamp(28px,3vw,36px)}
.pa-end{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:40px;padding-inline-start:clamp(14px,3vw,40px);font:800 clamp(20px,2.1vw,28px) Montserrat,sans-serif;letter-spacing:-.02em}
.pa-end .hw{font-size:1.15em;display:inline-flex;align-items:center;gap:8px}
.pa-end svg{position:static;width:44px;height:44px}

/* point B: services */
.pb-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end}
.svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid var(--line)}
.svc.flip .svc-t{order:2}
.big-n{font:800 clamp(52px,5.6vw,84px)/.9 Montserrat,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--navy)}
.svc h3{font:800 clamp(24px,2.5vw,34px)/1.12 Montserrat,sans-serif;letter-spacing:-.03em;margin-top:18px}
.svc-t>p{color:var(--slate);margin-top:16px;max-width:480px}
.tl{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px}
.tl li{display:flex;gap:14px;align-items:flex-start;font-weight:500}
.tl svg{position:static;flex:none;width:22px;height:22px;margin-top:3px;stroke-width:2.8}
.spec{position:relative;background:var(--mist);border-radius:28px 28px 28px 5px;padding:clamp(22px,4vw,48px);min-height:340px;display:flex;flex-direction:column;justify-content:center}
.spec .hw{font-size:clamp(23px,2.3vw,29px)}
.thread{display:flex;flex-direction:column;gap:12px;max-width:440px;width:100%;margin:0 auto}
.t-q{align-self:flex-end;max-width:86%;background:var(--navy);color:#fff;border-radius:18px 18px 4px 18px;padding:12px 18px;font-weight:500;font-size:17px;line-height:1.6}
.t-a{align-self:flex-start;max-width:90%;background:#fff;border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 18px;font-weight:500;font-size:17px;line-height:1.6}
.t-typing{display:inline-flex;gap:5px;align-items:center;height:1em}
.t-typing i{width:7px;height:7px;border-radius:50%;background:var(--slate);animation:blink 1s infinite}
.t-typing i:nth-child(2){animation-delay:.15s}.t-typing i:nth-child(3){animation-delay:.3s}
.t-time{align-self:flex-end;font-size:13px;color:#5A6F88}
.an{position:absolute}
.an svg{position:absolute}
.an1{right:6%;bottom:7%;transform:rotate(-3deg)}
.an1 svg{right:102%;bottom:30%;width:54px;height:44px;transform:scaleX(-1) rotate(160deg)}
.kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kp div{background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 3px;padding:14px 16px;position:relative}
.kp small{display:block;font-size:13px;color:var(--slate)}
.kp strong{display:block;font:800 clamp(20px,2.4vw,28px)/1.2 Montserrat,sans-serif;letter-spacing:-.02em;margin-top:4px}
.kp .dn{color:var(--red)}
.kp .circ{left:-6%;top:-12%;width:112%;height:124%}
.chart{background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 3px;margin-top:10px;padding:18px}
.chart svg{display:block;width:100%;height:150px;position:static}
.chart .ln2{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2s ease .3s}
.js .sx:not(.in) .chart .ln2{stroke-dashoffset:1}
.chart .gl{stroke:var(--line);stroke-width:1}
.an2{right:4%;top:3%;transform:rotate(3deg)}
.flowmap{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:520/300;container-type:inline-size}
.flowmap>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flowmap .dash{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.stop{position:absolute;transform:translate(-50%,-50%);font:700 clamp(11px,2.6cqw,13.5px) Montserrat,sans-serif;white-space:nowrap}
.stop .un{display:flex;flex-direction:column;align-items:center;gap:8px}
.stop i{display:grid;place-items:center;width:clamp(42px,10.5cqw,56px);aspect-ratio:1;border-radius:30% 30% 30% 8%;background:#fff;border:2px solid var(--navy);color:var(--navy);animation:lit 6s infinite}
.stop svg{position:static;width:46%;height:46%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes lit{0%,100%{background:#fff;color:var(--navy);border-color:var(--navy)}4%,18%{background:var(--blue);color:#fff;border-color:var(--blue)}26%{background:#fff;color:var(--navy);border-color:var(--navy)}}
.an3{left:30%;bottom:0;transform:rotate(-2deg)}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(36px,4vw,56px)}
.more div{padding:6px 0;padding-inline:clamp(16px,2.6vw,36px);border-inline-start:1px solid var(--line)}
.more div:first-child{border-inline-start:0;padding-inline-start:0}
.more small{font:800 12.5px Montserrat,sans-serif;letter-spacing:.14em;color:var(--pen);text-transform:uppercase}
.more h4{font:700 21px/1.25 Montserrat,sans-serif;letter-spacing:-.015em;margin-top:10px}
.more p{color:var(--slate);margin-top:8px;font-size:16px}

/* demo */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,88px);align-items:start;margin-top:44px}
.ql{display:flex;flex-direction:column}
.qb{position:relative;display:flex;gap:18px;align-items:baseline;width:100%;min-height:72px;text-align:start;padding:20px 0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.16);font:700 clamp(17px,1.7vw,22px)/1.3 Montserrat,sans-serif;letter-spacing:-.02em;color:rgba(255,255,255,.55);cursor:pointer;transition:color .25s ease,padding .3s ease}
.qb small{font:800 12.5px Montserrat,sans-serif;letter-spacing:.12em;color:var(--sky);flex:none}
.qb:hover{color:#fff;padding-inline-start:8px}
.qb.on{color:#fff;padding-inline-start:8px}
.qb .pen{inset-inline-start:44px;bottom:8px;width:min(70%,340px);height:10px;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .6s ease}
.qb.on .pen{stroke-dashoffset:0;opacity:1}
.ql-n{margin-top:26px;font-size:27px;transform:rotate(-2deg);transform-origin:left}
.win{background:#fff;color:var(--navy);border-radius:28px 28px 28px 5px;overflow:hidden;box-shadow:10px 10px 0 var(--blue)}
.win-h{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.win-h img{width:40px;height:40px;border-radius:12px 12px 12px 3px;background:var(--navy);padding:7px}
.win-h b{display:block;font:700 15px Montserrat,sans-serif}
.win-h small{display:block;font-size:13px;color:var(--slate);line-height:1.3}
.win-b{display:flex;flex-direction:column;gap:12px;padding:24px 22px;min-height:430px}
.m-q{align-self:flex-end;max-width:85%;background:var(--navy);color:#fff;border-radius:18px 18px 4px 18px;padding:12px 16px;font-weight:500;font-size:16px;line-height:1.5;animation:fu .4s ease both}
.m-a{align-self:flex-start;max-width:94%;background:var(--mist);border-radius:18px 18px 18px 4px;padding:14px 16px;font-size:16px;line-height:1.6;animation:fu .5s .3s ease both}
.m-v{border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:16px;animation:fu .5s .55s ease both}
.cb{display:flex;align-items:flex-end;gap:14px;height:130px}
.cb div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;font-weight:600;font-size:12.5px;color:var(--slate)}
.cb span{display:block;width:100%;border-radius:8px 8px 2px 2px;background:#CFE2FF;transform-origin:bottom;animation:grow .9s .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
.cb .hi span{background:var(--blue)}.cb .lo span{background:#8EA3BD}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-weight:600;font-size:15px}
.row:last-child{border:0}
.row em{font-style:normal;font-size:13px;color:var(--red);font-weight:600}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.act{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px 10px 10px 2px;background:var(--navy);color:#fff;font:700 13px Montserrat,sans-serif}
.act.o{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile small{font-size:13px;color:var(--slate)}
.tile strong{display:block;font:800 34px/1.1 Montserrat,sans-serif;letter-spacing:-.03em}
.m-v .cf{display:block;width:100%;height:130px;position:static}
.m-v .cf path{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round}

/* how */
.how-g{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:48px}
.how-l{position:absolute;inset-inline-start:0;top:4px;width:calc(75% + 30px);height:56px;overflow:visible}
.how-l path{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.hs{position:relative}
.hs-n{display:grid;place-items:center;width:62px;height:62px;border-radius:30% 30% 30% 8%;background:var(--navy);color:#fff;font:800 20px Montserrat,sans-serif;position:relative;z-index:1;box-shadow:0 0 0 10px #fff}
.hs:last-child .hs-n{background:var(--blue)}
.hs h3{font:800 22px/1.2 Montserrat,sans-serif;letter-spacing:-.02em;margin-top:28px}
.hs p{color:var(--slate);margin-top:10px;font-size:16px}
.hs .hw{display:block;margin-top:14px;font-size:26px;transform:rotate(-2deg);transform-origin:left}

/* industries */
.ind{margin-top:44px;font:800 clamp(24px,3.7vw,52px)/1.28 Montserrat,sans-serif;letter-spacing:-.03em;color:var(--navy);max-width:1100px}
.ind span{transition:color .25s ease;white-space:nowrap}
.ind span:hover{color:var(--blue)}
.ind i{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--blue);margin:0 .34em;vertical-align:.18em}
.ind em{font-style:normal;color:#5A6F88}
.ind-n{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:28px;transform:rotate(-1.5deg);transform-origin:left}


/* industries */
.inds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:40px;border-top:2px solid var(--navy);border-inline-start:1px solid var(--line)}
.indc{position:relative;display:flex;flex-direction:column;gap:16px;min-height:212px;padding:26px 22px 22px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;transition:background .3s ease,color .3s ease}
.indc .ico{width:40px;height:40px;stroke-width:1.5;transition:transform .4s cubic-bezier(.3,1.6,.5,1),stroke .3s ease}
.indc h3{font:700 19px/1.25 Montserrat,sans-serif;letter-spacing:-.015em}
.indc .hw{font-size:23px;margin-top:auto;transition:color .3s ease}
.indc .no{position:absolute;top:24px;inset-inline-end:20px;font:800 12px Montserrat,sans-serif;color:#5A6F88;transition:color .3s ease}
.indc:hover{background:var(--navy);color:#fff}
.indc:hover .ico{stroke:var(--sky);transform:translateY(-5px) rotate(-7deg)}
.indc:hover .hw{color:var(--sky)}
.indc:hover .no{color:var(--soft)}
.indc.you{background:var(--pen);color:#fff}
.indc.you .ico{stroke:#fff}
.indc.you .hw{color:#fff}
.indc.you:hover{background:var(--navy);color:#fff}
@media (max-width:1040px){.inds{grid-template-columns:repeat(2,minmax(0,1fr))}.indc{min-height:176px}}
@media (max-width:720px){.indc{padding:20px 16px 18px;min-height:168px;gap:12px}.indc h3{font-size:16.5px}.indc .hw{font-size:20px}.indc .ico{width:32px;height:32px}}
/* why */
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,110px);align-items:start}
.why-l{position:sticky;top:110px}
.letter{position:relative;margin-top:44px;background:var(--paper);padding:34px 32px 30px;transform:rotate(-1.2deg);box-shadow:0 1px 1px rgba(1,23,56,.1),0 26px 44px -30px rgba(1,23,56,.5)}
.letter::before{content:"";position:absolute;left:50%;top:-14px;width:110px;height:28px;margin-left:-55px;background:rgba(220,233,251,.85);box-shadow:0 1px 2px rgba(1,23,56,.15);transform:rotate(2deg)}
.letter small{font:700 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.letter p{margin-top:14px;font-size:16.5px;color:#1B2C4A}
.sig{display:flex;align-items:center;gap:16px;margin-top:22px}
.ph{display:grid;place-items:center;border:1.5px dashed #8296AE;color:var(--slate);font-weight:600;font-size:13px;text-align:center;padding:8px}
.sig .ph{width:64px;height:64px;border-radius:50%;flex:none;font-size:11px}
.sig .hw{font-size:34px}
.sig span{display:block;font-size:14px;color:var(--slate)}
.rs{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.rs li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:26px 0;border-bottom:1px solid var(--line)}
.rs li>b{font:800 14px/2 Montserrat,sans-serif;color:var(--pen)}
.rs h3{font:800 clamp(20px,2vw,25px)/1.25 Montserrat,sans-serif;letter-spacing:-.02em}
.rs p{color:var(--slate);margin-top:6px;font-size:16.5px}

/* results */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:44px;border-top:1px solid rgba(255,255,255,.2)}
.stat{padding:30px clamp(14px,2vw,28px) 6px;border-inline-start:1px solid rgba(255,255,255,.2)}
.stat:first-child{border-inline-start:0;padding-inline-start:0}
.stat strong{display:block;font:800 clamp(40px,4.4vw,60px)/1 Montserrat,sans-serif;letter-spacing:-.04em}
.stat strong span{color:var(--sky)}
.stat p{margin-top:12px;color:var(--soft);font-size:16px;max-width:220px}
.fill{margin-top:26px;font-size:26px;transform:rotate(-1.5deg);transform-origin:left}
.case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.2)}
.case .ph{height:150px;border-color:rgba(255,255,255,.45);color:var(--soft);border-radius:16px 16px 16px 3px}
.case blockquote{margin:0;font:700 clamp(19px,1.9vw,25px)/1.4 Montserrat,sans-serif;letter-spacing:-.02em}
.case cite{display:block;font-style:normal;margin-top:18px;color:var(--soft);font-size:15.5px}
.case .tlink{color:#fff;margin-top:18px;border-color:var(--sky)}

/* pilot */
.pilot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(36px,7vw,110px);align-items:center}
.rcpt{position:relative;background:var(--paper);padding:44px 34px 34px;transform:rotate(1.6deg);box-shadow:0 34px 54px -34px rgba(1,23,56,.6);-webkit-mask:radial-gradient(9px at 50% 0,transparent 97%,#000) 50% 0/26px 100% repeat-x;mask:radial-gradient(9px at 50% 0,transparent 97%,#000) 50% 0/26px 100% repeat-x}
.rcpt-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px dashed #8A8472}
.rcpt-h img{width:112px}
.rcpt-h span{font:700 11.5px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.ri{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px dashed #B9B29F;font-weight:500;font-size:16px}
.ri svg{position:static;width:22px;height:22px;flex:none;stroke-width:2.8}
.rt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:20px;flex-wrap:wrap}
.rt small{font:700 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.rt strong{font:800 clamp(32px,4vw,44px)/1 Montserrat,sans-serif;letter-spacing:-.03em}
.stamp{position:relative;display:block;width:fit-content;margin:6px 0 0;margin-inline-start:auto;padding:8px 14px;border:3px solid var(--pen);border-radius:8px;color:var(--pen);font:800 15px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-11deg);opacity:.82;background:rgba(245,242,234,.6);transition:transform .5s cubic-bezier(.3,1.7,.5,1) .7s,opacity .3s ease .7s}
.js .sx:not(.in) .stamp{transform:rotate(-11deg) scale(2.2);opacity:0}
.guar{margin-top:20px;font-size:14.5px;color:#1B2C4A;line-height:1.55}
.rcpt .btn{width:100%;margin-top:22px}

/* quotes */
.qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;border-top:2px solid var(--navy)}
.qt{margin:0;padding:34px clamp(16px,2.6vw,36px) 8px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:26px;justify-content:space-between}
.qt:first-child{border-inline-start:0;padding-inline-start:0}
.qt blockquote{margin:0;font:600 clamp(18px,1.6vw,21px)/1.5 Montserrat,sans-serif;letter-spacing:-.01em}
.qt blockquote::before{content:"\201C";display:block;font:800 64px/.7 Montserrat,sans-serif;color:var(--blue);margin-bottom:10px}
.qt figcaption b{display:block;font:700 15.5px Montserrat,sans-serif}
.qt figcaption span{font-size:14.5px;color:var(--slate)}

/* faq */
.faq-g{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:start}
.faqw{border-top:2px solid var(--navy)}
.faq{border-bottom:1px solid var(--line)}
.faq button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:76px;padding:20px 0;background:none;border:0;text-align:start;cursor:pointer;font:700 clamp(18px,1.7vw,22px)/1.3 Montserrat,sans-serif;letter-spacing:-.015em;color:var(--navy)}
.faq button:hover{color:var(--pen)}
.pm{display:grid;place-items:center;width:36px;height:36px;border-radius:30% 30% 30% 8%;border:1.5px solid var(--navy);flex:none;transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease}
.faq.open .pm{transform:rotate(45deg);background:var(--blue);border-color:var(--blue);color:#fff}
.faq p{padding:0 0 26px;padding-inline-end:56px;color:var(--slate);animation:fu .35s ease both}

/* cta */
.cta{background:var(--ink);color:#fff;padding:clamp(64px,8vw,120px) 0;position:relative;overflow:hidden}
.ab{position:relative;display:flex;align-items:center;gap:0;max-width:880px}
.ab b{display:grid;place-items:center;width:clamp(58px,8vw,92px);aspect-ratio:1;border-radius:30% 30% 30% 8%;font:800 clamp(26px,3.6vw,42px) Montserrat,sans-serif;flex:none}
.ab .a{border:2px solid rgba(255,255,255,.5)}
.ab .b{background:var(--blue)}
.ab svg{flex:1;height:60px;overflow:visible;position:static;min-width:0}
.ab svg .dash{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 8;stroke-linecap:round;opacity:.7}
.ab svg circle{fill:var(--sky)}
.cta-h{font:800 clamp(34px,5vw,72px)/1.02 Montserrat,sans-serif;letter-spacing:-.045em;margin-top:32px;max-width:1040px;text-wrap:balance}
.cta .lead{color:var(--soft)}
.cta .hero-cta{margin-top:44px}
.cta .hw{color:var(--sky);font-size:27px;margin-top:22px;transform:rotate(-2deg);transform-origin:left}

/* footer */
.ftr{background:var(--ink);color:var(--soft);border-top:1px solid rgba(255,255,255,.14);padding:72px 0 30px;font-size:15.5px}
.f-g{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px}
.f-g img{width:210px}
.f-g p{margin-top:20px;max-width:340px}
.f-g h4{font:700 12.5px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.f-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.f-l a{color:var(--soft);text-decoration:none}.f-l a:hover{color:#fff}
.soc{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:30% 30% 30% 8%;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.soc a:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-3px);color:#fff}
.soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:14px}
.f-b a{color:var(--soft);text-decoration:none;margin-inline-start:22px}.f-b a:hover{color:#fff}
.wa{position:fixed;inset-inline-end:20px;bottom:20px;z-index:60;display:grid;place-items:center;width:58px;height:58px;border-radius:30% 30% 8% 30%;background:#178A45;color:#fff;box-shadow:0 14px 28px -10px rgba(0,0,0,.5);transition:transform .25s ease}
.wa:hover{transform:scale(1.08) rotate(-4deg);color:#fff}

/* responsive */
@media (max-width:1040px){
  .nav,.hdr-cta,.hdr .lang{display:none}
  .burger{display:inline-flex}
  .hero-g,.pa-top,.pb-top,.svc,.demo,.why,.pilot,.faq-g,.case{grid-template-columns:minmax(0,1fr)}
  .art{justify-self:center;margin-top:36px}
  .h1{font-size:clamp(34px,8.6vw,60px)}
  .pa-date{justify-self:start;text-align:start}
  .svc.flip .svc-t{order:0}
  .why-l{position:static}
  .stats,.how-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .stat{padding-bottom:26px}
  .how-l{display:none}
  .hs-n{box-shadow:none}
  .f-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rcpt{max-width:480px}
  .sys-t{display:none}
}
@media (max-width:720px){
  .a2b{font-size:16.5px}
  .logo{width:164px}
  .lhead{display:none}
  .lrow,.ltotal{grid-template-columns:40px minmax(0,1fr)}
  .lrow .lnote,.ltotal .lnote{grid-column:2}
  .more,.qs{grid-template-columns:minmax(0,1fr)}
  .more div,.more div:first-child{border-inline-start:0;padding:22px 0;border-top:1px solid var(--line)}
  .qt,.qt:first-child{border-inline-start:0;padding:30px 0;border-bottom:1px solid var(--line)}
  .how-g{grid-template-columns:minmax(0,1fr);gap:0}
  .hs{display:grid;grid-template-columns:62px minmax(0,1fr);gap:22px;padding-bottom:40px}
  .hs::before{content:"";position:absolute;inset-inline-start:30px;top:66px;bottom:4px;border-inline-start:2px dashed var(--navy);opacity:.5}
  .hs:last-child::before{display:none}
  .hs h3{margin-top:6px}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat,.stat:first-child{border-inline-start:0;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.2)}
  .f-g{grid-template-columns:minmax(0,1fr)}
  .f-b a{margin:0;margin-inline-end:22px}
  .hero-cta .btn,.cta .hero-cta .btn{width:100%}
  .spec{min-height:300px}
  .an1,.an2,.an3{position:static;margin-top:20px;transform:rotate(-2deg);width:fit-content}
  .an svg{display:none}
  .note.nb{top:30%}
  .faq p{padding-inline-end:0}
  .win-b{min-height:0}
  .kp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kp div:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .a2b *,.a2b *::before,.a2b *::after{animation:none!important;transition:none!important}
  .js .sx:not(.in) .rv{opacity:1;transform:none}
  .js .sx:not(.in) .pen,.js .sx:not(.in) .chart .ln2{stroke-dashoffset:0;opacity:1}
  .js .sx:not(.in) .stamp{opacity:.82;transform:rotate(-11deg)}
  .mover{display:none}
}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
.still .mover{display:none}

/* icons */
.ico{display:inline-block;width:1.15em;height:1.15em;flex:none;fill:none;stroke:var(--pen);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mq-s span .ico{width:1.2em;height:1.2em;margin-inline-end:.5em}
.ind span .ico{width:.82em;height:.82em;margin-inline-end:.28em;vertical-align:-.08em;stroke-width:1.9;transition:transform .25s ease}
.ind span:hover .ico{transform:translateY(-3px) rotate(-6deg)}
.more .ico{display:block;width:38px;height:38px;margin-bottom:16px;stroke-width:1.5}
.rs li>.ico{width:30px;height:30px;margin-top:3px;stroke-width:1.6}
.f-l li .ico{width:17px;height:17px;stroke:var(--sky);margin-inline-end:10px;vertical-align:-3px}
[data-if]{display:contents}[data-if][hidden]{display:none}
html{scroll-behavior:smooth}

/* departments grid (4 cols) and the "your business" card closing the 12-industry grid */
.inds.d4{grid-template-columns:repeat(4,minmax(0,1fr))}
.indc.you{grid-column:span 3}
@media (max-width:1040px){.inds.d4{grid-template-columns:repeat(2,minmax(0,1fr))}.indc.you{grid-column:span 2}}
