:root{--red:#FF2B24;--navy:#3A3E4D;--ink:#23252f;--muted:#6b6f80;--bg:#fff;--soft:#f6f7fb;--line:#e6e8f0;--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.8;-webkit-font-smoothing:antialiased}
html[lang=ar]{--font:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}
html[lang=en]{--font:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;line-height:1.7}
img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.7rem;border-radius:999px;font-weight:600;font-size:1rem;border:2px solid var(--red);background:var(--red);color:#fff;cursor:pointer;font-family:inherit;transition:.25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px -10px var(--red)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff;box-shadow:0 12px 24px -10px var(--navy)}
.arrow{display:inline-block;transition:.25s} [dir=rtl] .arrow{transform:scaleX(-1)}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1rem}
.brand{display:flex;align-items:center;gap:.8rem}
.brand svg{width:50px;height:42px}
.brand b{display:block;font-size:1.05rem;letter-spacing:.04em;line-height:1.2} .brand b i{font-style:normal;color:var(--red)}
.brand small{display:block;font-size:.72rem;color:var(--muted);line-height:1.2}
nav ul{display:flex;gap:.3rem;list-style:none}
nav a{padding:.5rem 1rem;border-radius:999px;font-weight:500;font-size:.97rem;transition:.2s}
nav a:hover{color:var(--red)} nav a.active{background:var(--red);color:#fff}
.lang{border:2px solid var(--navy);border-radius:999px;padding:.3rem 1rem;font-weight:700;font-size:.9rem;transition:.2s}
.lang:hover{background:var(--navy);color:#fff}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--navy);margin:7px 9px;transition:.3s}
/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 85% -10%,#ffe3e1 0,transparent 60%),radial-gradient(700px 400px at 0 100%,#e9eaf3 0,transparent 60%)}
[dir=rtl] .hero{background:radial-gradient(900px 500px at 15% -10%,#ffe3e1 0,transparent 60%),radial-gradient(700px 400px at 100% 100%,#e9eaf3 0,transparent 60%)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding:5rem 0 4.5rem}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;color:var(--red);font-size:.95rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:3px;background:var(--red)}
h1{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.25;font-weight:700;color:var(--navy);margin-bottom:1.2rem}
h1 em{font-style:normal;color:var(--red)}
.lead{font-size:1.15rem;color:var(--muted);max-width:34em;margin-bottom:2rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-art{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:-2.6rem;position:relative;z-index:2}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1rem;text-align:center;box-shadow:0 18px 40px -26px rgba(35,37,47,.5)}
.stat b{display:block;font-size:2.3rem;color:var(--red);line-height:1.2;font-weight:700} .stat span{color:var(--muted);font-size:.95rem}
/* sections */
section{padding:5.5rem 0} .soft{background:var(--soft)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 3.2rem}
.sec-head .eyebrow{justify-content:center} .sec-head .eyebrow::after{content:"";width:34px;height:3px;border-radius:3px;background:var(--red)}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--navy);line-height:1.3;margin-bottom:.8rem}
.sec-head p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:2rem;transition:.3s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:linear-gradient(90deg,var(--red),#ff7a45);transform:scaleX(0);transform-origin:left;transition:.35s}
[dir=rtl] .card::before{transform-origin:right}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -28px rgba(35,37,47,.55)} .card:hover::before{transform:scaleX(1)}
.ico{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:#fff1f0;color:var(--red);margin-bottom:1.2rem}
.card:nth-child(even) .ico{background:#eceef5;color:var(--navy)}
.ico svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.25rem;color:var(--navy);margin-bottom:.5rem} .card p{color:var(--muted);font-size:.98rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split p{color:var(--muted);margin-bottom:1rem}
.checks{list-style:none;margin-top:1.4rem;display:grid;gap:.7rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;font-weight:500}
.checks li::before{content:"";flex:none;width:24px;height:24px;margin-top:.2rem;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
.panel{border-radius:28px;background:linear-gradient(145deg,var(--navy),#262936);color:#fff;padding:3rem;position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--red);opacity:.9;inset-inline-end:-90px;bottom:-110px}
.panel h3{font-size:1.6rem;margin-bottom:1rem;position:relative;z-index:1} .panel p{color:#d5d8e4;position:relative;z-index:1;margin-bottom:.8rem}
.panel .mark{width:90px;margin-bottom:1.4rem;position:relative;z-index:1} .panel .mark svg path{stroke:#fff} .panel .mark svg path:first-child{stroke:var(--red)}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.val{text-align:center;padding:1.6rem 1rem} .val .n{font-size:3rem;font-weight:700;color:var(--red);line-height:1} .val h4{color:var(--navy);margin:.6rem 0 .3rem} .val p{color:var(--muted);font-size:.93rem}
/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.member{background:#fff;border:1px solid var(--line);border-radius:var(--r);text-align:center;padding:2rem 1.2rem;transition:.3s}
.member:hover{transform:translateY(-8px);box-shadow:0 26px 50px -28px rgba(35,37,47,.55)}
.avatar{width:112px;height:112px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;font-size:2.1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--red),#ff7a45);box-shadow:0 0 0 6px #fff,0 0 0 8px var(--line)}
.member:nth-child(even) .avatar{background:linear-gradient(135deg,var(--navy),#5a6078)}
.member h3{color:var(--navy);font-size:1.15rem} .member span{color:var(--red);font-weight:600;font-size:.92rem;display:block;margin-bottom:.6rem} .member p{color:var(--muted);font-size:.92rem}
.leader{display:grid;grid-template-columns:auto 1fr;gap:2.4rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:2.4rem;margin-bottom:2.4rem}
.leader .avatar{width:150px;height:150px;font-size:3rem;margin:0}
.leader h3{font-size:1.6rem;color:var(--navy)} .leader span{color:var(--red);font-weight:600} .leader p{color:var(--muted);margin-top:.6rem}
/* page banner */
.banner{background:linear-gradient(120deg,var(--navy),#262936);color:#fff;padding:4.2rem 0;position:relative;overflow:hidden}
.banner::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--red);inset-inline-end:-110px;top:-150px;opacity:.92}
.banner h1{color:#fff;margin:0 0 .6rem;position:relative;z-index:1} .banner p{color:#d5d8e4;position:relative;z-index:1}
.crumbs{font-size:.9rem;color:#b4b8c9;margin-bottom:.6rem;position:relative;z-index:1} .crumbs a:hover{color:#fff}
/* services detail */
.svc{display:grid;grid-template-columns:90px 1fr;gap:1.6rem;padding:2rem 0;border-bottom:1px solid var(--line)}
.svc:last-child{border:0} .svc .num{font-size:3.4rem;font-weight:700;color:var(--red);opacity:.9;line-height:1}
.svc h3{color:var(--navy);font-size:1.4rem;margin-bottom:.4rem} .svc p{color:var(--muted)}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem} .tags span{background:var(--soft);border:1px solid var(--line);padding:.2rem .9rem;border-radius:999px;font-size:.85rem;color:var(--navy)}
/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.4rem}
.info{display:grid;gap:1.1rem;align-content:start}
.info .row{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;align-items:center}
.info .ico{margin:0;flex:none;width:52px;height:52px} .info b{display:block;color:var(--navy)} .info span{color:var(--muted);font-size:.95rem}
form{background:#fff;border:1px solid var(--line);border-radius:28px;padding:2.4rem;display:grid;gap:1.1rem;box-shadow:0 30px 60px -40px rgba(35,37,47,.5)}
form .two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
label{font-weight:600;font-size:.92rem;color:var(--navy);display:grid;gap:.4rem}
input,textarea,select{font-family:inherit;font-size:1rem;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);transition:.2s;width:100%}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(255,43,36,.12)}
textarea{min-height:140px;resize:vertical}
.ok{display:none;background:#e7f9ef;color:#157a45;border-radius:12px;padding:.9rem 1rem;font-weight:600}
.map{margin-top:2.4rem;border-radius:28px;height:240px;background:linear-gradient(135deg,#eceef5,#f6f7fb);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);font-weight:600;position:relative;overflow:hidden}
.map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:36px 36px}
.map div{position:relative;display:flex;align-items:center;gap:.7rem;background:#fff;padding:.8rem 1.4rem;border-radius:999px;box-shadow:0 16px 30px -16px rgba(35,37,47,.5)}
.map i{width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(255,43,36,.2)}
/* cta band + footer */
.band{background:linear-gradient(120deg,var(--red),#ff6a3d);color:#fff;border-radius:32px;padding:3.2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.band h2{color:#fff;margin:0} .band p{opacity:.92} .band .btn{background:#fff;color:var(--red);border-color:#fff}
footer.site{background:#1d1f29;color:#b9bccb;padding:4rem 0 1.6rem;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding-bottom:2.4rem;border-bottom:1px solid #2e313f}
footer.site h4{color:#fff;margin-bottom:1rem} footer.site ul{list-style:none;display:grid;gap:.5rem} footer.site a:hover{color:var(--red)}
footer.site .brand b{color:#fff} footer.site .brand small{color:#9a9eb0} footer.site .brand svg path:last-child{stroke:#fff}
footer.site p{margin-top:1rem;font-size:.95rem} .copy{text-align:center;padding-top:1.4rem;font-size:.88rem}
/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s} .js .rv.in{opacity:1;transform:none}
@media(max-width:980px){
.hero .grid,.split,.contact{grid-template-columns:1fr} .hero-art{max-width:440px;margin:auto}
.cards{grid-template-columns:1fr 1fr} .team,.vals,.stats{grid-template-columns:1fr 1fr} .fgrid{grid-template-columns:1fr 1fr}
.burger{display:block} nav{position:absolute;inset-inline:0;top:78px;background:#fff;border-bottom:1px solid var(--line);display:none;padding:1rem 4%}
nav.open{display:block} nav ul{flex-direction:column} .leader{grid-template-columns:1fr;text-align:center} .leader .avatar{margin:auto}
}
@media(max-width:620px){
.cards,.team,.vals,.fgrid,form .two{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} section{padding:4rem 0} .svc{grid-template-columns:1fr} .panel{padding:2rem} .band{padding:2rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important} .js .rv{opacity:1;transform:none}}

.hero-art img{border-radius:28px;box-shadow:0 30px 60px -30px rgba(35,37,47,.5);width:100%;aspect-ratio:4/3.4;object-fit:cover}
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}
.brand img.custom-logo{width:auto;height:46px}
.entry{max-width:860px;margin:0 auto;padding:3rem 0}.entry>*+*{margin-top:1rem}
.err{display:none;background:#fdeaea;color:#b42318;border-radius:12px;padding:.9rem 1rem;font-weight:600}
.ok.show,.err.show{display:block}
.about-img{border-radius:28px;margin-top:1.4rem;width:100%}
.screen-reader-text{position:absolute;left:-9999px}
.hp{position:absolute;left:-9999px;opacity:0}

.products{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s;margin:0}
.prod:hover{transform:translateY(-8px);box-shadow:0 26px 50px -28px rgba(35,37,47,.55)}
.pimg{aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.pimg img,.pimg svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.prod:hover .pimg img,.prod:hover .pimg svg{transform:scale(1.06)}
.prod figcaption{padding:1.3rem 1.5rem 1.6rem}
.prod h3{color:var(--navy);font-size:1.2rem;margin-bottom:.3rem}.prod p{color:var(--muted);font-size:.93rem}
@media(max-width:980px){.products{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.products{grid-template-columns:1fr}}


/* ===== Team portraits: organic blob frame ===== */
:root{--blob1:46% 54% 50% 50%/56% 44% 56% 44%;--blob2:58% 42% 47% 53%/45% 55% 45% 55%}
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:860px;margin:0 auto 3.6rem}
.leaders .leader{display:block;background:none;border:0;padding:1rem 0;margin:0;text-align:center;overflow:visible}
.lphoto,.member .avatar{position:relative;display:block;width:190px;height:190px;margin:0 auto 1.6rem;background:none!important;box-shadow:none;border-radius:0;overflow:visible;font-size:0}
.lphoto::before,.member .avatar::before{content:"";position:absolute;inset:-4px;transform:translate(14px,10px) rotate(0);background:linear-gradient(135deg,var(--red),#ff7a45);border-radius:var(--blob2);z-index:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),border-radius .6s}
.leader.alt .lphoto::before,.member:nth-child(even) .avatar::before{background:linear-gradient(135deg,var(--navy),#7a8099)}
.lphoto::after,.member .avatar::after{content:"";position:absolute;width:26px;height:26px;border:4px solid var(--navy);border-radius:50%;top:-6px;inset-inline-start:-12px;z-index:2;background:#fff}
.leader.alt .lphoto::after,.member:nth-child(even) .avatar::after{border-color:var(--red)}
.lphoto img,.lphoto span,.member .avatar img,.member .avatar span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:var(--blob1);object-fit:cover;object-position:top center;background:#eef0f6;color:var(--navy);font-size:3.2rem;font-weight:700;margin:0;transition:border-radius .6s}
.leader:hover .lphoto::before,.member:hover .avatar::before{transform:translate(8px,6px) rotate(14deg);border-radius:var(--blob1)}
.leader:hover .lphoto img,.leader:hover .lphoto span,.member:hover .avatar img,.member:hover .avatar span{border-radius:var(--blob2)}
.leaders .leader:hover{transform:none;box-shadow:none}
.ltext{padding:0 1rem;text-align:center}
.ltext h3{font-size:1.35rem;color:var(--navy)}.ltext span{color:var(--red);font-weight:600;display:block;margin-bottom:.5rem}.ltext p{color:var(--muted);font-size:.95rem}
.member{background:none;border:0;padding:1rem .6rem}.member:hover{transform:none;box-shadow:none}
.member .avatar{width:150px;height:150px}.member .avatar span{font-size:2.4rem}
.member h3{font-size:1.15rem}
@media(max-width:760px){.leaders{grid-template-columns:1fr}}