:root{--navy:#0A1530;--navy2:#13224A;--gold:#D4AF5F;--gold2:#B8913F;--ink:#16203A;--muted:#5B6478;--line:#E6E2D8;--bg:#F7F5F0;--white:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.75}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Noto Kufi Arabic",sans-serif;line-height:1.35;margin:0}
.latin{font-family:Montserrat,sans-serif}

/* top bar */
.top{background:var(--navy);color:#C9CFDD;font-size:13px}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.top span{margin-inline-start:22px}.top span:first-child{margin-inline-start:0}.top .wrap>div{display:flex;gap:22px}
.top b{color:var(--gold);font-weight:600}

/* header */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:48px;height:48px;flex:none}footer .brand .mark{width:40px;height:40px}
.brand .n{font-family:Montserrat;font-weight:800;letter-spacing:3px;color:var(--navy);font-size:19px}
.brand .s{font-size:11.5px;color:var(--muted);letter-spacing:.5px}
nav a{margin:0 16px;font-weight:600;font-size:15px;color:var(--ink)}
nav a.on{color:var(--gold2);border-bottom:2px solid var(--gold);padding-bottom:6px}
.hbtn{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:6px;font-weight:700;font-size:15px}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.navy{background:var(--navy);color:#fff}
.btn.ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn.line{border:1.5px solid var(--navy);color:var(--navy)}

/* hero */
.hero{background:linear-gradient(115deg,var(--navy) 55%,var(--navy2));color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 30%,rgba(212,175,95,.18),transparent 45%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:78px;padding-bottom:0;position:relative}
.eyebrow{display:inline-block;color:var(--gold);font-size:13.5px;font-weight:700;letter-spacing:1px;margin-bottom:18px}
.hero h1{font-size:46px;font-weight:700}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{color:#C9CFDD;font-size:18px;max-width:560px;margin:20px 0 32px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:56px}
.facts{display:flex;gap:40px;border-top:1px solid rgba(255,255,255,.12);padding:26px 0 34px}
.facts div b{display:block;font-family:"Noto Kufi Arabic";font-size:20px;color:#fff}
.facts div span{font-size:13px;color:#9AA3B8}
.portrait{align-self:end;position:relative;height:520px}
.portrait img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 18%)}
.badge{position:absolute;bottom:60px;right:0;background:#fff;color:var(--ink);border-radius:10px;padding:14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.25);font-size:14px}
.badge b{display:block;font-family:"Noto Kufi Arabic";color:var(--navy)}

/* sections */
section{padding:96px 0}
.sh{display:flex;justify-content:space-between;align-items:end;margin-bottom:44px;gap:24px}
.sh .k{color:var(--gold2);font-weight:700;font-size:14px;letter-spacing:1px}
.sh h2{font-size:34px;margin-top:8px}
.sh p{color:var(--muted);max-width:460px;margin:0}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{border:1px solid var(--line);border-radius:12px;padding:32px;background:#fff;transition:.2s;position:relative}
.svc:hover{box-shadow:0 20px 50px rgba(10,21,48,.08);border-color:var(--gold)}
.ico{width:56px;height:56px;border-radius:12px;background:var(--bg);display:grid;place-items:center;margin-bottom:22px}
.ico svg{width:28px;height:28px;stroke:var(--navy);fill:none;stroke-width:1.7}
.svc h3{font-size:20px;margin-bottom:8px}
.svc p{color:var(--muted);margin:0 0 18px;font-size:15px}
.svc ul{list-style:none;padding:0;margin:0 0 22px;font-size:14px;color:var(--ink)}
.svc li{padding:5px 0;border-top:1px dashed var(--line)}
.svc li:before{content:"◆";color:var(--gold);font-size:9px;margin-inline-end:8px}
.more{font-weight:700;color:var(--navy);font-size:14px}
.more:after{content:" ←";color:var(--gold2)}

.why{background:var(--bg)}
.why .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why h2{font-size:34px;margin:8px 0 18px}
.why .lead{color:var(--muted);font-size:17px}
.pts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pt{background:#fff;border-radius:12px;padding:26px;border:1px solid var(--line)}
.pt b{display:block;font-family:"Noto Kufi Arabic";font-size:17px;margin:12px 0 6px}
.pt span{color:var(--muted);font-size:14.5px}
.pt .num{font-family:Montserrat;font-weight:800;color:var(--gold);font-size:14px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps:before{content:"";position:absolute;top:27px;right:12%;left:12%;height:2px;background:var(--line)}
.st{text-align:center;padding:0 18px;position:relative}
.st .c{width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;margin:0 auto 18px;font-family:Montserrat;font-weight:800;border:5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.st b{display:block;font-family:"Noto Kufi Arabic";margin-bottom:6px}
.st span{color:var(--muted);font-size:14.5px}

.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.about .ph{background:var(--navy);border-radius:16px;aspect-ratio:4/5;overflow:hidden;position:relative}
.about .ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.about h2{font-size:32px;margin:8px 0 18px}
.about p{color:var(--muted);font-size:16.5px}
.sig{display:flex;gap:28px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.sig div b{display:block;font-family:"Noto Kufi Arabic";color:var(--navy)}
.sig div span{font-size:13.5px;color:var(--muted)}

.contact{background:var(--navy);color:#fff;border-radius:20px;padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px}
.contact h2{font-size:32px;margin:8px 0 14px}
.contact p{color:#C9CFDD}
.ch{display:grid;gap:14px}
.ch a{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:18px 20px}
.ch a b{display:block;font-size:15px}
.ch a span{font-size:13.5px;color:#9AA3B8}
.ch .i{width:44px;height:44px;border-radius:10px;background:var(--gold);display:grid;place-items:center;flex:none}
.ch .i svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.8}

footer{background:#070F24;color:#9AA3B8;margin-top:96px;padding:64px 0 28px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
footer h4{color:#fff;font-family:"Noto Kufi Arabic";font-size:15px;margin:0 0 16px}
footer a{display:block;padding:4px 0}
footer .base{display:flex;justify-content:space-between;padding-top:24px;font-size:13px}

@media (max-width:900px){
 .top{display:none} nav,.hbtn .line{display:none}
 header .wrap{height:68px}
 .hero .wrap,.why .grid,.about,.contact{grid-template-columns:1fr}
 .hero h1{font-size:32px} .portrait{height:360px}
 .grid3,.pts{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr;gap:28px} .steps:before{display:none}
 .sh{display:block} .sh h2{font-size:27px} section{padding:64px 0}
 .contact{padding:32px} footer .cols{grid-template-columns:1fr 1fr}
 .facts{gap:22px;flex-wrap:wrap}
}

html{scroll-behavior:smooth} section,[id]{scroll-margin-top:100px}
.page-hero{background:linear-gradient(115deg,var(--navy) 55%,var(--navy2));color:#fff;padding:64px 0 56px}
.crumb{font-size:13.5px;color:#9AA3B8;margin-bottom:14px}.crumb a{color:var(--gold)}
.page-hero h1{font-size:40px}.page-hero p{color:#C9CFDD;font-size:18px;max-width:640px;margin:16px 0 26px}
.two{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
.box{border:1px solid var(--line);border-radius:12px;padding:28px;margin-bottom:22px;background:#fff}
.box h2{font-size:22px;margin-bottom:12px}.box ul{margin:0;padding-inline-start:20px}.box li{padding:4px 0}
.aside{background:var(--bg);border-radius:12px;padding:28px;position:sticky;top:110px}
.aside h3{font-size:19px;margin-bottom:8px}.aside .btn{width:100%;justify-content:center;margin-top:10px}
@media (max-width:900px){.two{grid-template-columns:1fr}.page-hero h1{font-size:30px}}

.brand .n,.brand .s,nav a,.btn{white-space:nowrap}
.burger{display:none}
@media (max-width:1150px){
 nav{display:none} .hbtn .line{display:none}
 .burger{display:block;position:relative}
 .burger summary{list-style:none;cursor:pointer;width:46px;height:46px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:22px;color:var(--navy)}
 .burger summary::-webkit-details-marker{display:none}
 .burger[open] .menu{display:flex}
 .menu{position:absolute;top:56px;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(10,21,48,.15);flex-direction:column;min-width:230px;padding:10px;z-index:20}
 .menu a{padding:12px 14px;border-radius:8px;font-weight:600}
 .menu a:hover{background:var(--bg)}
 .hbtn{align-items:center}
}
@media (max-width:480px){.hbtn .navy{display:none}.brand .s{display:none}}

.whyimg{width:100%;aspect-ratio:1000/1050;max-height:520px;height:auto;object-fit:cover;object-position:center top;border-radius:14px;margin-bottom:26px;display:block}

.mbar{display:none}
@media (max-width:900px){
 body{padding-bottom:76px}
 .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:10px 14px;box-shadow:0 -8px 24px rgba(10,21,48,.08)}
 .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:8px;font-weight:700;font-size:15px}
 .mbar .c{background:var(--navy);color:#fff}.mbar .w{background:#1E8E4E;color:#fff}
 .mbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
}

.infocard{background:var(--navy);color:#fff;border-radius:16px;padding:40px 34px;position:relative;overflow:hidden}
.infocard:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(212,175,95,.2),transparent 50%)}
.infocard .mark.big{width:64px;height:64px;position:relative}
.ic-n{font-family:Montserrat;font-weight:800;letter-spacing:4px;color:var(--gold);margin:14px 0 22px;position:relative}
.ic-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14.5px;position:relative}
.ic-row span{color:#9AA3B8}.ic-row b{font-weight:600;text-align:left}

/* readability */
:root{--muted:#4E576B}
body{font-size:16.5px}
.svc p,.pt span,.st span{font-size:15.5px}
.svc ul{font-size:15px}
.hero p{font-size:19px}
.maplink{display:inline-block;margin-top:6px;color:var(--gold);font-weight:700;font-size:15px}

.legal{max-width:820px}.legal h2{font-size:20px;margin:30px 0 8px}.legal p{color:var(--ink)}