@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@400;500;700&family=Frank+Ruhl+Libre:wght@500;700&family=Assistant:wght@300;400;600&family=IBM+Plex+Sans+Arabic:wght@300;400;600&display=swap');

:root{
  --ink:#0D2438; --ink-deep:#08192a; --ink-soft:#14314a;
  --seal:#12874E; --seal-lt:#1E9E5A;
  --cream:#F1EFE9; --paper:#fff;
  --mist:#8A97A3; --mist-2:#B7C6D2;
  --line:rgba(138,151,163,.2);
  --amber:#C8942A; --red:#B4453C;
  --maxw:1120px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

body{margin:0;background:var(--ink);color:var(--cream);
  font-family:'Assistant',system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
html[data-lang="ar"] body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
h1,h2,h3,h4{font-family:'David Libre','Frank Ruhl Libre',Georgia,serif;font-weight:700;line-height:1.18;margin:0}
html[data-lang="en"] h1,html[data-lang="en"] h2,html[data-lang="en"] h3,html[data-lang="en"] h4{font-family:'Frank Ruhl Libre',Georgia,serif}
html[data-lang="ar"] h1,html[data-lang="ar"] h2,html[data-lang="ar"] h3,html[data-lang="ar"] h4{font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600;line-height:1.35}
p{margin:0} a{color:inherit} img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--seal-lt);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
section{padding-block:84px}
@media(max-width:720px){section{padding-block:58px}}
.head{max-width:60ch;margin-block-end:44px}
.head h2{font-size:clamp(28px,3.5vw,40px)}
.head p{margin-block-start:14px;color:var(--mist-2);font-size:18px}
.foot-note{margin-block-start:32px;font-size:15px;color:var(--mist);max-width:70ch}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(13,36,56,.9);backdrop-filter:blur(12px);border-block-end:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:36px;height:36px}
.brand span{font-family:'David Libre',serif;font-weight:700;font-size:20px;letter-spacing:.16em}
.nav nav{display:flex;gap:24px;margin-inline-start:auto;font-size:15px}
.nav nav a{color:var(--mist-2);text-decoration:none}
.nav nav a:hover{color:var(--cream)}
.langs{display:flex;gap:2px;margin-inline-start:8px}
.lang-btn{background:none;border:1px solid var(--line);color:var(--mist-2);font:inherit;font-size:13px;padding:4px 10px;cursor:pointer;border-radius:3px}
.lang-btn.is-on{color:var(--ink);background:var(--cream);border-color:var(--cream)}
@media(max-width:900px){.nav nav{display:none}.langs{margin-inline-start:auto}}

/* hero */
.hero{padding-block:76px 92px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset-block-start:-35%;inset-inline-end:-12%;width:66vw;height:66vw;
  background:radial-gradient(circle,rgba(30,158,90,.14),transparent 62%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(40px,6vw,66px)}
.hero .lead{margin-block-start:24px;font-size:19px;color:var(--mist-2);max-width:46ch}
.btns{display:flex;gap:13px;margin-block-start:34px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:4px;text-decoration:none;font-size:16px;font-weight:600;border:1px solid transparent}
.btn-p{background:var(--seal);color:#fff}.btn-p:hover{background:var(--seal-lt)}
.btn-s{border-color:var(--line);color:var(--cream)}.btn-s:hover{border-color:var(--mist)}
.figure img{border-radius:4px;box-shadow:0 30px 60px -22px rgba(0,0,0,.65)}
.figure .cap{margin-block-start:12px;font-size:13.5px;color:var(--mist);text-align:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:44px}}

/* three parts */
.parts{background:var(--ink-deep)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.cols3>div{background:var(--ink-deep);padding:28px 26px 32px}
.cols3 h3{font-size:21px}.cols3 p{margin-block-start:11px;color:var(--mist);font-size:16px}
.cols3 .n{font-size:12.5px;color:var(--seal-lt);letter-spacing:.14em;margin-block-end:12px}
@media(max-width:820px){.cols3{grid-template-columns:1fr}}

/* four stages */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.flow>div{background:var(--ink);padding:26px 22px 30px;position:relative}
.flow .num{font-family:'David Libre',serif;font-size:34px;font-weight:700;color:var(--seal-lt);line-height:1}
.flow h3{font-size:19px;margin-block-start:10px}
.flow p{margin-block-start:9px;color:var(--mist);font-size:15px}
.flow .who{margin-block-start:14px;font-size:12px;color:var(--mist-2);border-block-start:1px solid var(--line);padding-block-start:10px}
@media(max-width:860px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}

/* statuses */
.statuses{background:var(--ink-deep)}
.st{display:grid;gap:1px;background:var(--line)}
.st>div{background:var(--ink-deep);display:grid;grid-template-columns:auto 190px 1fr;gap:16px;align-items:baseline;padding:15px 20px}
.st .bul{width:9px;height:9px;border-radius:50%;align-self:center}
.st h3{font-size:17px}.st p{color:var(--mist);font-size:15.5px}
@media(max-width:700px){.st>div{grid-template-columns:auto 1fr}.st p{grid-column:2}}

/* screens carousel */
.screens{background:var(--ink)}
.carousel{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.stage{position:relative;width:270px;height:auto;cursor:pointer;justify-self:center}
.stage .shot{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.stage .shot.on{position:relative;opacity:1}
.stage img{border-radius:22px;box-shadow:0 26px 52px -20px rgba(0,0,0,.7)}
.scr-text{display:none}
.scr-text.on{display:block}
.scr-text .n{font-size:13px;color:var(--seal-lt);letter-spacing:.14em;margin-block-end:12px}
.scr-text h3{font-size:clamp(24px,2.7vw,32px)}
.scr-text p{margin-block-start:14px;color:var(--mist-2);max-width:44ch;font-size:17px}
.dots{display:flex;gap:8px;margin-block-start:28px;flex-wrap:wrap}
.dot{width:auto;background:none;border:1px solid var(--line);color:var(--mist);font:inherit;font-size:12.5px;
  padding:5px 11px;border-radius:20px;cursor:pointer}
.dot.on{border-color:var(--seal-lt);color:var(--seal-lt)}
@media(max-width:900px){.carousel{grid-template-columns:1fr;gap:32px}.stage{width:240px}}

/* iron rules */
.rules{background:var(--ink-deep)}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.grid6>div{background:var(--ink-deep);padding:24px 22px 28px;border-inline-start:3px solid var(--seal)}
.grid6 h3{font-size:18px}.grid6 p{margin-block-start:9px;color:var(--mist);font-size:15.5px}
@media(max-width:900px){.grid6{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid6{grid-template-columns:1fr}}

/* dashboard + doc */
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.rows{display:grid;gap:1px;background:var(--line)}
.rows>div{background:var(--ink);padding:15px 20px}
.rows h3{font-size:16px;color:var(--seal-lt)}
.rows p{margin-block-start:5px;color:var(--mist);font-size:15.5px}
.docsec{background:var(--ink-deep)}
.docsec .rows>div{background:var(--ink-deep)}

/* what works */
.now{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.now>div{background:var(--ink);padding:24px 24px 28px;border-inline-start:3px solid var(--seal)}
.now>div.wip{border-inline-start-color:var(--amber)}
.now .stat{display:inline-block;font-size:12px;letter-spacing:.1em;color:var(--seal-lt);margin-block-end:9px}
.now>div.wip .stat{color:var(--amber)}
.now h3{font-size:18px}.now p{margin-block-start:7px;color:var(--mist);font-size:15.5px}
@media(max-width:700px){.now{grid-template-columns:1fr}}

/* about */
.people{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.person{background:var(--ink);padding:32px 28px 36px}
.face{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-block-end:18px;
  filter:grayscale(1) contrast(1.05);border:1px solid var(--line)}
.face-empty{display:grid;place-content:center;color:var(--mist);font-size:26px;background:var(--ink-soft);border:1px dashed var(--line)}
.person .role{font-size:12.5px;color:var(--seal-lt);letter-spacing:.1em;margin-block-end:9px}
.person h3{font-size:24px}.person p{margin-block-start:13px;color:var(--mist-2);font-size:16px}
.note{margin-block-start:34px;padding-inline-start:18px;border-inline-start:2px solid var(--seal);color:var(--mist-2);max-width:62ch}
@media(max-width:820px){.people{grid-template-columns:1fr}}

/* cta + footer */
.cta{background:var(--cream);color:var(--ink);text-align:center}
.cta h2{font-size:clamp(27px,3.3vw,38px)}
.cta p{margin-block-start:13px;color:#5A6873;font-size:18px}
.cta .btn-p{margin-block-start:28px;background:var(--ink)}
.cta .btn-p:hover{background:var(--ink-soft)}
.cta .mail{display:block;margin-block-start:16px;font-size:15px;color:#6C7A85;direction:ltr}
footer{background:var(--ink-deep);border-block-start:1px solid var(--line);padding-block:32px;font-size:14px;color:var(--mist)}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--mist-2);text-decoration:none}footer a:hover{color:var(--cream)}
footer .links{display:flex;gap:20px;margin-inline-start:auto}
@media(max-width:640px){footer .links{margin-inline-start:0}}

/* ---- gallery with tabs + lightbox ---- */
.gallery{background:var(--ink)}
.tabs{display:flex;gap:6px;margin-block-end:28px;flex-wrap:wrap}
.tab{background:none;border:1px solid var(--line);color:var(--mist-2);font:inherit;font-size:15px;
  padding:8px 18px;border-radius:3px;cursor:pointer}
.tab.on{background:var(--cream);color:var(--ink);border-color:var(--cream);font-weight:600}
.pane{display:none}.pane.on{display:block}
.gr{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gr.wide,.gr.doc{grid-template-columns:1fr;max-width:820px}
.gr.doc{max-width:520px}
.gr figure{margin:0;cursor:zoom-in}
.gr img{border-radius:10px;border:1px solid var(--line);transition:border-color .2s}
.gr figure:hover img{border-color:var(--seal-lt)}
.gr figcaption{margin-block-start:9px;font-size:13.5px;color:var(--mist);text-align:center}
.gr.wide figcaption,.gr.doc figcaption{text-align:start;font-size:15px}
@media(max-width:900px){.gr{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:600px){.gr{grid-template-columns:repeat(2,1fr)}}

.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,17,28,.94);display:grid;place-items:center;padding:44px 18px}
.lb img{max-width:min(94vw,860px);max-height:88vh;width:auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-x{position:absolute;inset-block-start:16px;inset-inline-end:18px;background:none;border:1px solid var(--line);
  color:var(--cream);font:inherit;font-size:14px;padding:7px 16px;border-radius:3px;cursor:pointer}