/* Digital solutions brochure — builds on profile.css (pages, toolbar, cover, back) and mock.css (system mock-up). Sizes in cqw. */
.bh{display:flex;flex-direction:column;gap:.2cqw;max-width:78cqw}
.bh h2.a{font-size:2.5cqw}.bh h2.e{font-size:1.5cqw;margin-bottom:.5cqw}
.bh .lead.a{font-size:1.12cqw;line-height:1.75}.bh .lead.e{font-size:.95cqw;line-height:1.6}
.bc{display:flex;gap:1cqw;align-items:flex-start;padding:1.2cqw 1.3cqw;border:.1cqw solid var(--line);border-radius:1.4cqw;background:#fff}
.bc>i{flex:none;width:3cqw;height:3cqw;border-radius:.95cqw;display:grid;place-items:center;background:linear-gradient(135deg,#e2f1e9,#f6efdc);color:var(--g)}
.bc>i svg{width:1.55cqw;height:1.55cqw}
.bc b.a{font:700 1.12cqw/1.35 var(--fa);color:var(--gd)}.bc b.e{font:500 .9cqw var(--fe);color:var(--g)}
.bc .d.a{font-size:.9cqw;line-height:1.55;color:var(--mut);margin-top:.3cqw}.bc .d.e{font-size:.8cqw;line-height:1.45;color:var(--mut2)}
.bcs{display:grid;grid-template-columns:1fr 1fr;gap:.9cqw}
.bcs.b4{grid-template-columns:repeat(4,1fr);margin-top:auto;margin-bottom:.4cqw}
.bcs.b1{grid-template-columns:1fr 1fr}

/* cover */
.bcov .bgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) .08cqw,transparent .08cqw),linear-gradient(90deg,rgba(255,255,255,.05) .08cqw,transparent .08cqw);background-size:3.6cqw 3.6cqw;-webkit-mask-image:radial-gradient(ellipse at 25% 50%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 25% 50%,#000 10%,transparent 70%)}
.bcov .cv-main{max-width:50cqw}
.bcov .cv-t b{font-size:4.4cqw;background:linear-gradient(110deg,#fff 30%,#f7e096 60%,#deb75c);-webkit-background-clip:text;background-clip:text;color:transparent}
.cap .bcov .cv-t b{background:none;color:#fff}
.bcv-p{margin-top:1cqw;max-width:46cqw;padding:1.1cqw 1.3cqw;border-radius:1.2cqw;background:rgba(255,255,255,.06);border:.08cqw solid rgba(255,255,255,.12)}
.bcv-p p.a{color:#e3efe9;font-size:1.02cqw;line-height:1.7}.bcv-p p.e{color:#9dbcad;font-size:.88cqw}
.bcv-art{position:absolute!important;inset-inline-end:2.4cqw;top:11cqw;width:44cqw}
.bcv-art .dgm{font-size:1.25cqw}
.bcov .cv-ft{inset-inline-end:48cqw}

/* before / after */
.ba{flex:1;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;gap:1.8cqw;align-items:stretch;margin-top:.6cqw}
.ba-c{border-radius:1.8cqw;padding:1.8cqw 2cqw;display:flex;flex-direction:column}
.ba-c h3{font-size:1.7cqw;margin-bottom:1cqw}.ba-c h3 em{font-style:normal;font:400 1.1cqw var(--fe);margin-inline-start:.5cqw}
.ba-c ul{list-style:none;margin:0;padding:0;display:grid;gap:.75cqw;flex:1;align-content:space-around}
.ba-c li{display:flex;flex-direction:column;padding:.75cqw 1cqw .75cqw 1cqw;padding-inline-start:3.4cqw;border-radius:1cqw;position:relative}
.ba-c li::before{content:"";position:absolute;inset-inline-start:1cqw;top:1cqw;width:1.5cqw;height:1.5cqw;border-radius:50%}
.ba-c li .a{font:500 1.08cqw var(--fa)}.ba-c li .e{font-size:.86cqw}
.ba-b{background:#f6f3ee;border:.1cqw solid #ece4d6}.ba-b h3{color:#8a6d34}.ba-b h3 em{color:#b0842e}
.ba-b li{background:#fff}.ba-b li .a{color:#6b5a3a}.ba-b li .e{color:#9a8a6a}
.ba-b li::before{background:#f2dfd6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4532c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/62% no-repeat}
.ba-a{background:linear-gradient(160deg,#0e2e22,#0b3a29);color:#fff}.ba-a h3{color:#fff}.ba-a h3 em{color:var(--gold2)}
.ba-a li{background:rgba(255,255,255,.06);border:.08cqw solid rgba(255,255,255,.1)}.ba-a li .a{color:#fff}.ba-a li .e{color:#9dbcad}
.ba-a li::before{background:#7fe0b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2e22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/62% no-repeat}
.ba-arr{align-self:center;width:4.4cqw;height:4.4cqw;border-radius:50%;background:var(--goldg);color:var(--gd);display:grid;place-items:center;box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.4)}
.ba-arr svg{width:2cqw;height:2cqw}
html[dir=rtl] .ba-arr svg,.doc[dir=rtl] .ba-arr svg{transform:scaleX(-1)}

/* websites page */
.bw2{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr 1fr;gap:2.6cqw;align-items:center}
.bw-t{display:flex;flex-direction:column;gap:1.2cqw}
.bw-t .bh h2.a{font-size:2.3cqw}
.bw-art{position:relative}
.wsm{position:relative;font-size:1.15cqw;padding:0 0 4em 0;font-family:var(--fa)}
.ws-w{background:#fff;border-radius:1em;overflow:hidden;box-shadow:0 2em 4em -1.6em rgba(14,46,34,.55),0 0 0 .08em #e2e7e3}
.ws-bar{display:flex;align-items:center;gap:.4em;height:2.2em;padding:0 .9em;background:#eef2ef}
.ws-bar i{width:.6em;height:.6em;border-radius:50%;background:#e8a29a}.ws-bar i:nth-child(2){background:#e9cf7f}.ws-bar i:nth-child(3){background:#8fd5ae}
.ws-bar span{margin:0 auto;font-size:.68em;color:#5d6b64;background:#fff;padding:.3em 1.6em;border-radius:1em}.ws-bar b{color:#007549}
.ws-hd{display:flex;align-items:center;gap:.8em;padding:.6em 1em;border-bottom:.06em solid #edf1ee}
.ws-hd img{width:1.6em}.ws-hd em{width:2.6em;height:.35em;border-radius:1em;background:#dfe6e2}.ws-hd em:first-of-type{margin-inline-start:auto}
.ws-hd u{text-decoration:none;font-size:.6em;color:#fff;background:#007549;padding:.4em 1em;border-radius:1em}
.ws-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1em;align-items:center;padding:1.2em 1.2em;background:linear-gradient(120deg,#0e2e22,#0b3a29);color:#fff}
.ws-hero>div{display:grid;gap:.35em;justify-items:start}
.ws-hero small{font-size:.55em;color:#cfeadc;border:.1em solid rgba(255,255,255,.25);padding:.2em .8em;border-radius:1em}
.ws-hero b{font-size:1.25em;line-height:1.2}.ws-hero b.g{color:#e3c477}
.ws-hero span{height:.35em;width:90%;border-radius:1em;background:rgba(255,255,255,.2)}.ws-hero span.s{width:65%}
.ws-hero u{text-decoration:none;font-size:.6em;color:#0e2e22;background:#fff;padding:.45em 1.2em;border-radius:1em;margin-top:.3em}
.ws-hero img{width:100%;height:8.5em;object-fit:cover;border-radius:4em 4em .5em .5em;box-shadow:0 0 0 .2em rgba(227,196,119,.5)}
.ws-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:.9em 1em 1.1em}
.ws-svc span{display:flex;align-items:center;gap:.4em;padding:.55em .6em;border-radius:.6em;border:.06em solid #e5ebe7;font-size:.58em}
.ws-svc i{display:grid;width:1.8em;height:1.8em;place-items:center;border-radius:.5em;background:#e2f1e9;color:#007549;flex:none}.ws-svc i svg{width:1.1em;height:1.1em}
.ws-svc b{color:#0e2e22;font-weight:600;line-height:1.3}
.ws-ph{position:absolute;bottom:0;inset-inline-end:-1em;width:9.5em;background:#0e2e22;border-radius:1.4em;padding:.5em;box-shadow:0 1.6em 3em -1em rgba(0,0,0,.6);display:flex;flex-direction:column;gap:.35em;color:#fff;border:.3em solid #1a1f1d}
.ws-nt{width:3em;height:.45em;border-radius:1em;background:#1a1f1d;margin:-.2em auto .1em}
.ws-pbar{display:flex;align-items:center;justify-content:space-between;padding:0 .3em}.ws-pbar img{width:1.2em}.ws-pbar em{width:1.1em;height:.6em;border-top:.14em solid #fff;border-bottom:.14em solid #fff}
.ws-pimg{width:100%;height:6em;object-fit:cover;border-radius:2.6em 2.6em .4em .4em}
.ws-ph b{font-size:.78em;padding:0 .3em}.ws-ph b.g{color:#e3c477;margin-top:-.3em}
.ws-ph span{height:.3em;border-radius:1em;background:rgba(255,255,255,.2);margin:0 .3em}.ws-ph span.s{width:60%}
.ws-ph u{text-decoration:none;font-size:.52em;text-align:center;background:#fff;color:#0e2e22;border-radius:1em;padding:.5em;margin:.3em .4em .5em}

/* cloud system page */
.bs2{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:2.6cqw;align-items:center}
.bs-art .dgm{font-size:1.2cqw}
.bs-t{display:flex;flex-direction:column;gap:1.4cqw}
.dpg .bh h2.a{color:#fff}.dpg .bh h2.e{color:var(--gold2)}.dpg .bh .lead.a{color:#e3efe9}.dpg .bh .lead.e{color:#9dbcad}
.mds{display:grid;grid-template-columns:1fr 1fr;gap:.8cqw}
.md{display:flex;align-items:center;gap:1cqw;padding:.9cqw 1.1cqw;border-radius:1.2cqw;background:rgba(255,255,255,.05);border:.08cqw solid rgba(255,255,255,.1)}
.md i{flex:none;width:2.8cqw;height:2.8cqw;border-radius:.9cqw;display:grid;place-items:center;background:linear-gradient(135deg,rgba(127,224,178,.2),rgba(227,196,119,.18));color:var(--gold2)}
.md i svg{width:1.45cqw;height:1.45cqw}
.md b.a{font:600 1.1cqw var(--fa);color:#fff}.md b.e{font:500 .85cqw var(--fe);color:#9dbcad}

/* document flow */
.flw{display:flex;align-items:stretch;gap:.6cqw;margin:1cqw 0 .4cqw}
.fs{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.6cqw 1cqw 1.4cqw;border-radius:1.6cqw;background:var(--sand);border:.1cqw solid #ece4d6}
.fs .e{text-align:center}
.fs:nth-child(odd){background:#fff;border-color:var(--line)}
.fs:last-child{background:linear-gradient(160deg,#0e2e22,#0b3a29);border-color:transparent}.fs:last-child b.a{color:#fff}.fs:last-child b.e{color:var(--gold2)}.fs:last-child .d.a{color:#cfe0d7}.fs:last-child .d.e{color:#9dbcad}
.fn{position:absolute;top:.8cqw;inset-inline-start:1cqw;font:700 .85cqw var(--fe);color:var(--gold)}
.fs>i{width:4.6cqw;height:4.6cqw;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#fff;margin-bottom:.9cqw;box-shadow:0 0 0 .5cqw rgba(0,117,73,.12)}
.fs>i svg{width:2.2cqw;height:2.2cqw}
.fs b.a{font:700 1.35cqw var(--fa);color:var(--gd)}.fs b.e{font:500 1cqw var(--fe);color:var(--g)}
.fs .d.a{font-size:.92cqw;color:var(--mut);margin-top:.4cqw}.fs .d.e{font-size:.82cqw;color:var(--mut2)}
.fa{align-self:center;flex:none;width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--goldg);color:var(--gd);display:grid;place-items:center}
.fa svg{width:1.2cqw;height:1.2cqw}
.bc2{flex-direction:column;background:#fbfaf7}

/* domain & security */
.bd2{flex:1;min-height:0;display:grid;grid-template-columns:1.15fr 1fr;gap:2.6cqw;align-items:center}
.bd-t{display:flex;flex-direction:column;gap:1.4cqw}
.dms{display:grid;gap:.8cqw}
.dm{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2cqw;padding:1cqw 1.4cqw;border-radius:1.3cqw;background:linear-gradient(120deg,#0e2e22,#12382a);color:#fff}
.dm i{width:3cqw;height:3cqw;border-radius:.9cqw;display:grid;place-items:center;background:rgba(227,196,119,.16);color:var(--gold2)}.dm i svg{width:1.5cqw;height:1.5cqw}
.dm b{font:500 1.35cqw var(--fe);color:#fff;text-align:left}.dm b em{font-style:normal;color:var(--gold2);font-weight:600}
.dm .a{font-size:.95cqw;color:#cfe0d7}.dm .e{font-size:.8cqw;color:#9dbcad}
.dm>span{text-align:end}
.bd-s{position:relative;display:flex;flex-direction:column;gap:1.2cqw;align-items:center}
.bd-sh{width:11cqw;height:11cqw;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#e2f1e9 30%,#f3f8f5 70%);box-shadow:0 0 0 1cqw #f7faf8,0 0 0 1.1cqw var(--line)}
.bd-sh span{color:var(--g);display:grid}.bd-sh svg{width:5.4cqw;height:5.4cqw}
.bc3{flex-direction:column}

/* AI services */
.aipg{background:linear-gradient(155deg,#08201a 0%,#0e2e22 40%,#14322e 70%,#1b2a3d 100%);color:#fff}
.ai-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ai-bg .orb.o1{width:50cqw;height:50cqw;background:radial-gradient(circle,rgba(127,224,178,.25),transparent 65%);top:-20cqw;inset-inline-end:-12cqw}
.ai-bg .orb.o2{width:50cqw;height:50cqw;background:radial-gradient(circle,rgba(120,140,255,.18),transparent 65%);bottom:-24cqw;inset-inline-start:-14cqw}
.ai-bg .grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) .12cqw,transparent .14cqw);background-size:2.4cqw 2.4cqw;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 15%,transparent 70%)}
.aipg>*:not(.ai-bg){position:relative;z-index:1}
.ai-hd{display:flex;align-items:center;gap:1.8cqw}
.ai-ic{flex:none;width:6.4cqw;height:6.4cqw;border-radius:1.8cqw;display:grid;place-items:center;background:linear-gradient(135deg,#7fe0b2,#e3c477);color:#0e2e22;box-shadow:0 0 3cqw rgba(127,224,178,.35)}
.ai-ic svg{width:3.4cqw;height:3.4cqw}
.aipg .bh h2.a{color:#fff}.aipg .bh h2.e{color:#7fe0b2}.aipg .bh .lead.a{color:#e3efe9}.aipg .bh .lead.e{color:#9dbcad}
.ais{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1cqw;margin-top:.6cqw}
.bai{flex-direction:column;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.bai>i{background:linear-gradient(135deg,rgba(127,224,178,.25),rgba(227,196,119,.2));color:#e3c477}
.bai b.a{color:#fff}.bai b.e{color:#7fe0b2}.bai .d.a{color:#cfe0d7}.bai .d.e{color:#8fb3a2}

/* AI assistant */
.ba2{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:3cqw;align-items:center}
.ba-t{display:flex;flex-direction:column;gap:1.4cqw}
.asl{list-style:none;margin:0;padding:0;display:grid;gap:.7cqw}
.asl li{display:grid;grid-template-columns:auto 1fr;column-gap:1cqw;align-items:center;padding:.8cqw 1.1cqw;border-radius:1.1cqw;background:var(--sand)}
.asl li i{grid-row:span 2;width:2.6cqw;height:2.6cqw;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#fff}.asl li i svg{width:1.3cqw;height:1.3cqw}
.asl .a{font:600 1.08cqw var(--fa);color:var(--gd)}.asl .e{font-size:.86cqw;color:var(--g)}
.chm{font-size:1.15cqw;background:#fff;border-radius:1.4em;overflow:hidden;box-shadow:0 2em 4em -1.6em rgba(14,46,34,.55),0 0 0 .08em #e2e7e3;display:flex;flex-direction:column}
.ch-h{display:flex;align-items:center;gap:.8em;padding:.9em 1.1em;background:linear-gradient(120deg,#0e2e22,#12382a);color:#fff}
.ch-av{width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7fe0b2,#e3c477);color:#0e2e22}.ch-av svg{width:1.5em;height:1.5em}
.ch-h b{display:block;font-size:.85em}.ch-h b em{font-style:normal;font-weight:400;color:#9dbcad;font-family:var(--fe)}
.ch-h small{display:flex;align-items:center;gap:.4em;font-size:.65em;color:#7fe0b2}.ch-h small i{width:.55em;height:.55em;border-radius:50%;background:#7fe0b2}
.ch-b{display:flex;flex-direction:column;gap:.6em;padding:1.1em;background:#f4f7f5;background-image:radial-gradient(rgba(0,117,73,.06) .1em,transparent .12em);background-size:1.2em 1.2em}
.cm{display:flex}.cm span{max-width:82%;font-size:.78em;line-height:1.6;padding:.6em .9em;border-radius:1em}
.cm.u{justify-content:flex-start}.cm.u span{background:#007549;color:#fff;border-start-start-radius:.25em}
.cm.b{justify-content:flex-end}.cm.b span{background:#fff;color:#14231c;border-start-end-radius:.25em;box-shadow:0 .3em .8em -.4em rgba(0,0,0,.25)}
.cm.ty span{display:flex;gap:.3em;padding:.8em .9em}.cm.ty i{width:.45em;height:.45em;border-radius:50%;background:#9aa9a2;animation:chty 1.2s infinite}.cm.ty i:nth-child(2){animation-delay:.2s}.cm.ty i:nth-child(3){animation-delay:.4s}
@keyframes chty{50%{transform:translateY(-.25em);opacity:.4}}
.ch-f{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.7em 1em;border-top:.06em solid #e5ebe7}
.ch-f span{font-size:.72em;color:#9aa9a2}.ch-f i{width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:#007549;color:#fff}.ch-f i svg{width:1.1em;height:1.1em}
html[dir=rtl] .ch-f i svg,.doc[dir=rtl] .ch-f i svg{transform:scaleX(-1)}

/* how we work + live example */
.hws.h5{grid-template-columns:repeat(5,1fr);flex:none;margin:1.4cqw 0 .6cqw}
.hws.h5::before{top:2.8cqw;inset-inline:9%}
.hws.h5 .hs-n{width:5.6cqw;height:5.6cqw}
.live{flex:1;min-height:0;display:grid;grid-template-columns:auto 1fr 30cqw;gap:2cqw;align-items:center;padding:1.6cqw 1.8cqw;border-radius:1.8cqw;background:linear-gradient(120deg,#0e2e22,#12382a);color:#fff;overflow:hidden;margin-bottom:.4cqw}
.lv-q{width:12cqw;background:#fff;border-radius:1.4cqw;padding:1cqw}
.live h3.a{font-size:1.8cqw;color:var(--gold2)}.live h3.e{font-size:1.2cqw;color:#cfe0d7;margin-bottom:.5cqw}
.live p.a{color:#e3efe9;font-size:1.02cqw}.live p.e{color:#9dbcad;font-size:.88cqw}
.live img{width:100%;height:100%;max-height:16cqw;object-fit:cover;border-radius:7cqw 7cqw 1cqw 1cqw;box-shadow:0 0 0 .4cqw rgba(227,196,119,.45)}
.cap .wsm *,.cap .chm *{animation:none!important}
.bai b.a{font-size:1.25cqw}.bai b.e{font-size:.98cqw}.bai .d.a{font-size:.98cqw;line-height:1.6}.bai .d.e{font-size:.86cqw}
.bai{padding:1.4cqw 1.5cqw;gap:.8cqw}.bai>i{width:3.4cqw;height:3.4cqw}
