@font-face{font-family:"Sora";src:url("/assets/fonts/sora.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Noto Kufi Arabic";src:url("/assets/fonts/kufi.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url("/assets/fonts/nsa.woff2") format("woff2");font-weight:400 600;font-display:swap}
:root{
  color-scheme:light;
  --bg:#F6F4EF; --surface:#FFFFFF; --mist:#E4E1D8; --soft:#EFEAE0;
  --ink:#12161B; --ink-soft:#5B6B7A; --line:#DEDACE;
  --accent:#E4572E; --accent-strong:#B23A17; --focus:#E4572E;
  --p-a:#2B5CE6; --p-b:#E4572E; --p-c:#6C4CF1; --p-d:#1E7A46;
  --band-bg:#12161B; --band-ink:#F6F4EF; --band-soft:#C9D1D8;
  --frame-bar:#EFECE5; --chip:#F1EEE6; --field-line:#C4BFB2;
  --cov-bg:#E2EFE5; --cov-tx:#1E7A46; --part-bg:#FBF0DA; --part-tx:#8A5A12;
  --sev-bg:#FBF0DA; --sev-tx:#8A5A12;
  --radius:14px; --max:1120px;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Sora","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
html[lang="ar"]{
  --font-body:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --font-head:"Noto Kufi Arabic","Segoe UI",Tahoma,Arial,sans-serif;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12161B; --surface:#1B2129; --mist:#232B34; --soft:#1F262E;
  --ink:#F6F4EF; --ink-soft:#A9B4BE; --line:#2B333D;
  --accent:#E4572E; --accent-strong:#FF8A5C; --focus:#FF8A5C;
  --p-a:#6E97FF; --p-b:#FF8A5C; --p-c:#9D86FF; --p-d:#4CC07A;
  --band-bg:#0B0E12; --band-ink:#F6F4EF; --band-soft:#A9B4BE;
  --frame-bar:#232B34; --chip:#232B34; --field-line:#39424E;
  --cov-bg:#14291B; --cov-tx:#4CC07A; --part-bg:#2A2113; --part-tx:#E8B34B;
  --sev-bg:#2A2113; --sev-tx:#E8B34B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.65;font-size:17px;overflow-x:clip}
h1,h2,h3,.brand{font-family:var(--font-head)}
::selection{background:var(--accent);color:#12161B}
a{color:var(--accent-strong)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;inset-inline-start:1rem;top:-4rem;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:99;border-radius:0 0 8px 8px}
.skip:focus{top:0;color:var(--bg)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
section[id],[id]{scroll-margin-top:5.5rem}
header.site{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:50}
header.site .wrap{max-width:1520px;width:100%}
.nav{display:flex;align-items:center;gap:13px;padding-block:14px;flex-wrap:nowrap;min-width:0}
.brand{font-weight:700;font-size:16.6px;color:var(--ink);text-decoration:none;letter-spacing:.01em;white-space:nowrap;display:inline-flex;align-items:center;flex:none}
.brand .logo-mark{width:30px;height:30px;flex:none;margin-inline-end:9px;color:var(--ink)}
.foot-mark{width:22px;height:22px;vertical-align:-5px;margin-inline-end:.4rem;color:var(--ink)}
nav.main{display:flex;gap:12px;margin-inline-start:auto;flex-wrap:nowrap;align-items:center;min-width:0}
nav.main a{color:var(--ink);text-decoration:none;font-size:15.4px;white-space:nowrap}
nav.main a:hover,nav.main a[aria-current]{color:var(--accent-strong);text-decoration:underline}
.lang{border:1px solid var(--line);border-radius:999px;padding:4px 13px;font-size:14px;text-decoration:none;color:var(--ink);background:var(--surface);white-space:nowrap;flex:none}
.menu-btn{display:none;flex:none;margin-inline-start:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 13px;font-family:inherit;font-size:15px;cursor:pointer}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:none;padding:0}
.theme-btn svg{width:19px;height:19px}
.nav-tools{display:flex;align-items:center;gap:10px;flex:none}
.wa-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:none;padding:0}
.wa-icon-btn svg{width:20px;height:20px}
html[data-theme="dark"] .ic-moon{display:none}
html:not([data-theme="dark"]) .ic-sun{display:none}
.hero{padding:4.2rem 0 3rem}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.15;margin:.4rem 0 1rem;letter-spacing:-.01em}
.eyebrow{color:var(--accent-strong);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
[dir=rtl] .eyebrow{letter-spacing:0}
.lede{font-size:1.18rem;color:var(--ink-soft);max-width:44rem}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:.75rem 1.5rem;border-radius:10px;text-decoration:none;font-weight:600;border:1px solid var(--ink)}
.btn:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.ghost{background:transparent;color:var(--accent-strong);border-color:var(--accent-strong)}
.btn.ghost:hover{background:var(--soft)}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
section{padding:2.6rem 0}
h2{font-size:1.65rem;margin:0 0 1rem;line-height:1.3}
h3{font-size:1.15rem;margin:0 0 .45rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem}
.card p{color:var(--ink-soft);margin:.3rem 0 0}
.card a{font-weight:600}
.card.p-a{border-top:3px solid var(--p-a)}
.card.p-b{border-top:3px solid var(--p-b)}
.card.p-c{border-top:3px solid var(--p-c)}
.card.p-d{border-top:3px solid var(--p-d)}
.dark{background:var(--band-bg);color:var(--band-ink)}
.dark h2,.dark h3{color:var(--band-ink)}
.dark p{color:var(--band-soft)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding:.42rem 0 .42rem 0;padding-inline-start:1.7rem;position:relative}
ul.check li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--p-d);font-weight:700}
ul.plain{padding-inline-start:1.2rem}
ul.plain li{padding:.25rem 0}
.tag{display:inline-block;background:var(--ink);color:var(--bg);font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:.22rem .6rem;border-radius:999px;text-transform:uppercase;vertical-align:middle}
[dir=rtl] .tag{letter-spacing:0}
figure{margin:0}
figure img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);display:block}
figcaption{color:var(--ink-soft);font-size:.9rem;margin-top:.55rem}
.steps{counter-reset:step;display:grid;gap:1rem}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.35rem;display:flex;gap:1.1rem}
.step .n{counter-increment:step;flex:0 0 2.2rem;height:2.2rem;border-radius:50%;background:var(--soft);color:var(--accent-strong);display:grid;place-items:center;font-weight:700}
.step .n::before{content:counter(step)}
.note{background:var(--soft);border-radius:var(--radius);padding:1.1rem 1.3rem}
.wa-block{display:flex;gap:1.1rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.4rem 0;max-width:640px}
.wa-block .wa-icon-btn{width:52px;height:52px}
.wa-block .wa-icon-btn svg{width:26px;height:26px}
.wa-block h3{margin:0 0 .3rem}
.wa-block p{margin:0;color:var(--ink-soft)}
.wa-foot{margin-top:.9rem}
table.scope{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.scope th,table.scope td{padding:.8rem 1rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
table.scope th{width:34%;background:var(--mist)}
form.proj{display:grid;gap:1rem;max-width:640px}
form.proj label{font-weight:600;display:grid;gap:.35rem}
form.proj input,form.proj select,form.proj textarea{font:inherit;padding:.65rem .8rem;border:1px solid var(--field-line);border-radius:8px;background:var(--surface);color:var(--ink)}
footer.site{border-top:1px solid var(--line);margin-top:3rem;padding:2.4rem 0;background:var(--mist)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
footer a{color:var(--ink)}
.small{font-size:.88rem;color:var(--ink-soft)}
article.post h1{font-size:2.1rem;line-height:1.25}
article.post p,article.post li{max-width:46rem}
.cta-band{background:#12161B;color:#F6F4EF;border:1px solid #12161B;border-radius:var(--radius);padding:2rem;margin:2.5rem 0}
[data-theme="dark"] .cta-band{border-color:var(--line)}
.cta-band h2{color:#F6F4EF;margin-top:0}
.cta-band p{color:#C9D1D8}
.cta-band .btn{background:#F6F4EF;color:#12161B;border-color:#F6F4EF}
.cta-band .btn:hover{background:var(--accent);border-color:var(--accent);color:#12161B}
.email-block{display:flex;gap:1.1rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.4rem 0;max-width:640px}
.email-block .eic{flex:0 0 2.6rem;height:2.6rem;border-radius:50%;background:var(--soft);color:var(--accent-strong);display:grid;place-items:center}
.email-block .eic svg{width:22px;height:22px}
.email-block h3{margin:0 0 .3rem}
.email-block p{margin:0 0 .8rem;color:var(--ink-soft)}
.email-addr{font-weight:700;color:var(--ink);margin:0 0 .8rem}
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.1rem;margin:1.2rem 0 2.2rem}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.35rem}
.qa h3{margin-top:0}
.qa p{color:var(--ink-soft);margin:0}
.owasp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem;margin:1.2rem 0 2rem;font-variant-numeric:tabular-nums}
.owasp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.35rem}
.owasp-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.6rem}
.onum{font-family:var(--font-head);font-size:1.45rem;font-weight:700;color:var(--accent)}
.ostatus{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;white-space:nowrap}
[dir=rtl] .ostatus{letter-spacing:0}
.ostatus.cov{background:var(--cov-bg);color:var(--cov-tx)}
.ostatus.part{background:var(--part-bg);color:var(--part-tx)}
.ostatus.out{background:var(--mist);color:var(--ink-soft)}
.owasp-card h3{margin:0 0 .2rem}
.owasp-en{font-size:.85rem;color:var(--ink-soft);margin:0 0 .5rem;font-variant-numeric:tabular-nums}
.owasp-card p{color:var(--ink-soft);margin:.35rem 0}
.obase{border-top:1px dashed var(--line);padding-top:.6rem;margin-top:.7rem;font-size:.92rem;color:var(--ink-soft)}
.obase strong{color:var(--ink)}
.source-note{font-size:.9rem;color:var(--ink-soft)}

/* featured project + case cards (work page) */
.featured{display:grid;grid-template-columns:7fr 5fr;gap:2rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;margin:1.2rem 0 2.2rem;box-shadow:0 6px 22px rgba(18,22,27,.06)}
.featured-media{display:flex;gap:1.1rem;align-items:flex-start}
.browser-frame{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(18,22,27,.10)}
.browser-bar{display:flex;align-items:center;gap:.45rem;background:var(--frame-bar);padding:.5rem .8rem;border-bottom:1px solid var(--line)}
.browser-bar .dot{width:10px;height:10px;border-radius:50%;background:#CFC9BA;flex:none}
.browser-url{margin-inline-start:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.12rem .7rem;font-size:.75rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-frame img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top center;display:block}
.phone-frame{flex:0 0 168px;border:2px solid #12161B;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(18,22,27,.12)}
.phone-notch{height:15px;background:#12161B;display:flex;justify-content:center;align-items:center}
.phone-notch::after{content:"";width:52px;height:5px;border-radius:3px;background:#3A4149}
.phone-frame img{width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top center;display:block}
.featured-body .tag{font-size:.78rem;padding:.3rem .7rem}
.meta{margin:.9rem 0 1.1rem;font-variant-numeric:tabular-nums}
.meta>div{display:flex;gap:.6rem;padding:.3rem 0;border-bottom:1px dashed var(--line)}
.meta dt{font-weight:700;flex:0 0 7.25rem}
.meta dd{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.45}
.featured-narrative{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;border-top:1px solid var(--line);padding-top:1.2rem}
.featured-narrative h3{margin-top:0}
.featured-narrative p{color:var(--ink-soft);margin:.3rem 0 0}
.f-main{flex:1;min-width:0}
.f-gallery{display:flex;gap:1.1rem;margin-top:1.1rem}
.f-gallery .browser-frame{flex:1;min-width:0}
.f-gallery .browser-frame img{aspect-ratio:16/10}
.tag.real{background:rgba(30,122,70,.13);color:#1E7A46}
[data-theme="dark"] .tag.real{color:var(--p-d)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.3rem;margin:1.2rem 0 2rem}
.case-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.case-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,22,27,.12)}
.case-media{aspect-ratio:4/3;overflow:hidden;background:var(--mist);border-bottom:1px solid var(--line)}
.case-media img{width:100%;height:100%;object-fit:cover;display:block}
.spec-panel{height:100%;padding:1.1rem;display:flex;flex-direction:column;justify-content:center;gap:.8rem;background:var(--soft)}
.panel-note{font-size:.8rem;color:var(--ink-soft);margin:0}
.pipe{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.3rem .65rem;font-size:.78rem;font-weight:600}
.stage.win{border-color:var(--p-d);color:var(--p-d)}
.stage.lost{opacity:.6}
.arr{color:var(--ink-soft);font-size:.78rem}
.flow{display:grid;gap:.4rem}
.fstep{display:flex;gap:.55rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;font-size:.82rem}
.fstep .fn{flex:0 0 1.35rem;height:1.35rem;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:.75rem;font-weight:700}
.rrow{font-size:.83rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.5rem .65rem}
.rlabel{display:block;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
[dir=rtl] .rlabel{letter-spacing:0;text-transform:none}
.sev{display:inline-block;background:var(--sev-bg);color:var(--sev-tx);border-radius:6px;padding:.05rem .45rem;font-weight:700}
.case-body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.55rem}
.case-top{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0}
.case-top h3{margin:0;min-width:0}
.case-top .tag{max-width:100%}
.case-desc{color:var(--ink-soft);margin:0}
.case-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.ptag{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:.18rem .6rem;font-size:.76rem;font-weight:600;color:var(--ink)}
.ptag.p-a::before,.ptag.p-b::before,.ptag.p-c::before,.ptag.p-d::before{content:"";width:7px;height:7px;border-radius:50%;margin-inline-end:.38rem;flex:none}
.ptag.p-a::before{background:var(--p-a)}
.ptag.p-b::before{background:var(--p-b)}
.ptag.p-c::before{background:var(--p-c)}
.ptag.p-d::before{background:var(--p-d)}
.case-deliv{margin:0;font-size:.9rem;color:var(--ink-soft)}
.case-deliv strong{color:var(--ink)}
.mini{display:flex;flex-direction:column;gap:.55rem}
.mini-search{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;font-size:.8rem;color:var(--ink-soft)}
.mini-hero{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.mini-hero .mh-name{font-family:var(--font-head);font-weight:700;font-size:.95rem}
.mini-hero .mh-sub{font-size:.78rem;color:var(--ink-soft)}
.mini-row{display:flex;gap:.6rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem}
.mini-thumb{flex:0 0 2.4rem;height:2.4rem;border-radius:8px;background:var(--mist);display:grid;place-items:center;color:var(--ink-soft)}
.mini-thumb svg{width:18px;height:18px}
.mini-main{flex:1;min-width:0}
.mini-name{font-weight:700;font-size:.85rem;line-height:1.35}
.mini-meta{font-size:.75rem;color:var(--ink-soft)}
.mini-price{font-weight:700;font-size:.8rem;color:var(--accent-strong);white-space:nowrap;font-variant-numeric:tabular-nums}
.mini-cta{font-size:.78rem;font-weight:700;color:var(--accent-strong);white-space:nowrap}
.linkrow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.lbox{background:var(--surface);border:1.5px solid var(--ink);border-radius:10px;padding:.55rem .7rem;font-size:.82rem;font-weight:700}
.larr{color:var(--ink-soft);font-weight:700}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .9rem}
.chk{font-size:.83rem;display:flex;gap:.5rem;align-items:flex-start}
.chk::before{content:"✓";flex:0 0 1.15rem;height:1.15rem;border-radius:4px;background:var(--p-d);color:var(--bg);display:grid;place-items:center;font-size:.7rem;font-weight:700;margin-top:.1rem}
@media(max-width:1520px){
  nav.main{display:none;position:absolute;top:100%;inset-inline:0;background:var(--surface);flex-direction:column;align-items:stretch;padding:16px 20px;border-bottom:1px solid var(--line);gap:3px;margin-inline-start:0}
  nav.main.open{display:flex}
  nav.main a{padding:8px 0}
  .menu-btn{display:block}
}
@media(max-width:640px){
  header.site .wrap{padding:0 13px}
  .nav{gap:9px}
  .brand-name{display:none}
  .brand .logo-mark{margin-inline-end:0}
  .nav-tools{gap:7px}
  .lang{font-size:13px;padding:3px 9px}
  .theme-btn,.wa-icon-btn{width:36px;height:36px}
  .theme-btn svg{width:17px;height:17px}
  .wa-icon-btn svg{width:18px;height:18px}
  .menu-btn{padding:6px 10px;font-size:15px}
}
@media(max-width:900px){.featured{grid-template-columns:1fr}.featured-narrative{grid-template-columns:1fr}}
@media(max-width:560px){.f-gallery{flex-direction:column}.featured-media{flex-direction:column}.phone-frame{flex:none;width:190px;margin:0 auto}.email-block{flex-direction:column}.chk-grid{grid-template-columns:1fr}}