/* ==========================================================================
   ELITE GRID — Design System
   Direction: Global engineering-firm editorial. Deep ink navy + brushed gold.
   Asymmetric editorial layouts, oversized type, progressive disclosure.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#0A1220;
  --navy:#0F2440;
  --navy-2:#16345A;
  --navy-soft:#25436D;
  --gold:#B99450;
  --gold-light:#D9BD84;
  --gold-dim:#8A703C;
  --paper:#F5F5F2;
  --paper-2:#FFFFFF;
  --stone:#EAE8E1;
  --ash:#5B6472;
  --ash-light:#8992A0;
  --line:#DEDCD4;
  --line-dark:rgba(217,189,132,.18);
  --maxw:1320px;
  --pad: clamp(24px, 5vw, 72px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic', sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:'Tajawal', sans-serif;
  margin:0;
  color:var(--navy);
  line-height:1.15;
  letter-spacing:-.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.mono{font-family:'IBM Plex Mono', monospace; direction:ltr; unicode-bidi:isolate;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.section{position:relative;}
.pad-xl{padding:150px 0;}
.pad-lg{padding:110px 0;}
.pad-md{padding:80px 0;}
@media (max-width:900px){
  .pad-xl{padding:90px 0;}
  .pad-lg{padding:72px 0;}
  .pad-md{padding:56px 0;}
}
.dark{background:var(--ink); color:var(--paper);}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}
.navy-bg{background:var(--navy); color:var(--paper);}
.navy-bg h1,.navy-bg h2,.navy-bg h3,.navy-bg h4{color:#fff;}

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:20px;
  direction:ltr; justify-content:flex-end;
}
[dir="rtl"] .kicker{justify-content:flex-start;}
.kicker::before{content:""; width:34px; height:1px; background:var(--gold);}
.dark .kicker, .navy-bg .kicker{color:var(--gold-light);}

/* ---------- Scroll progress ---------- */
#scrollbar{
  position:fixed; top:0; right:0; height:2px; background:var(--gold); z-index:1000; width:0%;
  transition:width .1s linear;
}

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:rgba(10,18,32,.0);
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(10,18,32,.92);
  backdrop-filter:blur(14px);
  border-color:rgba(217,189,132,.15);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:92px; display:flex; align-items:center; justify-content:space-between;
}
header.scrolled .nav-inner{height:76px;}
.brand{display:flex; align-items:center; gap:13px;}
.brand img{height:40px; width:auto; transition:height .3s;}
header.scrolled .brand img{height:34px;}
.brand-name{font-family:'Tajawal',sans-serif; font-weight:800; color:#fff; font-size:17px;}
.brand-name span{display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:9.5px; letter-spacing:.12em; color:var(--gold-light); direction:ltr;}

nav.main-nav ul{display:flex; gap:2px; list-style:none; margin:0; padding:0; align-items:center;}
nav.main-nav a{
  color:rgba(245,245,242,.78); font-size:14.5px; font-weight:500; padding:10px 16px; position:relative;
}
nav.main-nav a::after{
  content:""; position:absolute; bottom:4px; right:16px; left:16px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .3s;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{transform:scaleX(1);}
nav.main-nav a:hover{color:#fff;}
nav.main-nav a.active{color:#fff;}
.nav-cta{
  border:1px solid var(--gold); color:#fff !important; padding:10px 22px !important; margin-inline-start:8px;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--gold); color:var(--ink) !important;}

/* Dropdown nav */
.has-dropdown{position:relative;}
.dropdown-toggle{display:flex; align-items:center; gap:5px; cursor:pointer;}
.dropdown-toggle .chev{font-size:11px; transition:transform .25s;}
.has-dropdown:hover .dropdown-toggle .chev, .has-dropdown.open .dropdown-toggle .chev{transform:rotate(180deg);}
.dropdown-panel{
  position:absolute; top:100%; right:0; background:var(--ink); border:1px solid rgba(217,189,132,.2);
  min-width:230px; padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s;
  list-style:none; margin:0; box-shadow:0 24px 50px rgba(0,0,0,.45); z-index:50;
}
.has-dropdown:hover .dropdown-panel, .has-dropdown.open .dropdown-panel{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-panel li{width:100%;}
.dropdown-panel a{display:block; padding:12px 14px; font-size:14px; white-space:nowrap; color:rgba(245,245,242,.78);}
.dropdown-panel a:hover{background:rgba(217,189,132,.08); color:#fff;}
.dropdown-panel a::after{display:none;}
@media (max-width:1040px){
  .dropdown-panel{
    position:static; opacity:1; visibility:visible; transform:none; background:none; border:none; box-shadow:none;
    padding:6px 0 0; text-align:center;
  }
  .dropdown-panel a{font-size:16px; padding:10px 20px; color:rgba(245,245,242,.6);}
  .dropdown-toggle{justify-content:center; pointer-events:none;}
  .dropdown-toggle .chev{display:none;}
}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:10px; z-index:600;}
.burger span{width:24px; height:1.5px; background:#fff; display:block; transition:.3s;}
.lang-switch{
  color:rgba(245,245,242,.85); font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.04em;
  border:1px solid rgba(217,189,132,.3); padding:8px 15px; margin-inline-start:14px; transition:all .2s; flex-shrink:0;
}
.lang-switch:hover{border-color:var(--gold); color:var(--gold-light); background:rgba(217,189,132,.06);}
@media (max-width:1040px){
  nav.main-nav{
    position:fixed; inset:0; background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .35s;
  }
  nav.main-nav.open{opacity:1; pointer-events:auto;}
  nav.main-nav ul{flex-direction:column; gap:6px;}
  nav.main-nav a{font-size:22px; padding:14px 20px;}
  .burger{display:flex;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
  font-weight:700; font-size:14.5px; border-radius:1px; cursor:pointer; border:1px solid transparent;
  transition:all .25s; font-family:'IBM Plex Sans Arabic',sans-serif;
}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-light); transform:translateY(-2px);}
.btn-line{border-color:rgba(255,255,255,.4); color:#fff;}
.btn-line:hover{border-color:var(--gold); background:rgba(217,189,132,.08);}
.btn-line-dark{border-color:var(--navy); color:var(--navy);}
.btn-line-dark:hover{background:var(--navy); color:#fff;}

/* ---------- Reveal on scroll ---------- */
.r{opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.16,.8,.28,1), transform .8s cubic-bezier(.16,.8,.28,1);}
.r.in{opacity:1; transform:translateY(0);}
.r2{transition-delay:.12s;}
.r3{transition-delay:.24s;}
.r4{transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){.r{opacity:1; transform:none; transition:none;}}

/* ---------- Page transition ---------- */
body.page-enter{animation:pageIn .6s ease both;}
@keyframes pageIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:200px 0 90px; position:relative; overflow:hidden;
}
.page-hero .num{
  font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:14px; direction:ltr;
}
.page-hero h1{font-size:clamp(38px,6vw,74px); font-weight:900; max-width:920px;}
.page-hero .sub{max-width:620px; margin-top:24px; font-size:17px; color:rgba(245,245,242,.72); font-weight:300;}
.page-hero-grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(217,189,132,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(217,189,132,.06) 1px, transparent 1px);
  background-size:64px 64px;
}
.crumb{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--gold-light); margin-bottom:26px; font-family:'IBM Plex Mono',monospace; direction:ltr;}

/* ---------- Editorial big numeral ---------- */
.big-num{
  font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--gold);
  font-size:clamp(50px,7vw,110px); line-height:1; direction:ltr;
}

/* ---------- Divider rule ---------- */
.rule{height:1px; background:var(--line); width:100%;}
.rule-gold{height:1px; background:linear-gradient(90deg, var(--gold), transparent); width:120px;}

/* ---------- Marquee / stats strip ---------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
}
.stats-strip .stat{
  padding:40px var(--pad); border-inline-end:1px solid var(--line-dark);
}
.stats-strip .stat:last-child{border-inline-end:none;}
.stats-strip .num{font-family:'IBM Plex Mono',monospace; font-size:clamp(28px,3vw,42px); font-weight:600; color:var(--gold); direction:ltr;}
.stats-strip .lbl{font-size:13px; color:rgba(245,245,242,.65); margin-top:8px;}
@media (max-width:820px){.stats-strip{grid-template-columns:1fr 1fr;} .stats-strip .stat{border-bottom:1px solid var(--line-dark);}}

/* ---------- Feature row (zig-zag editorial) ---------- */
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.feature-row.rev{direction:rtl;}
.feature-row.rev > *{direction:rtl;}
@media (max-width:900px){.feature-row{grid-template-columns:1fr; gap:36px;}}
.feature-row .ph{position:relative; overflow:hidden; aspect-ratio:6/5;}
.feature-row .ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,.8,.28,1);}
.feature-row:hover .ph img{transform:scale(1.05);}
.feature-row .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(15,36,64,.35), transparent 60%);}
.feature-index{font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:13px; margin-bottom:16px; direction:ltr;}
.feature-row h3{font-size:clamp(24px,2.6vw,34px); font-weight:800; margin-bottom:18px;}
.feature-row p{color:var(--ash); font-size:15.5px; max-width:460px;}
.feature-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.feature-tags span{
  font-size:12px; font-family:'IBM Plex Mono',monospace; color:var(--navy); border:1px solid var(--line); padding:6px 12px;
}
.feature-row .ph.diagram{background:var(--navy); display:flex; align-items:center; justify-content:center;}
.feature-row .ph.diagram svg{width:88%; height:88%;}
.feature-row .ph.diagram::after{display:none;}
.feature-row .ph.iconpanel{
  background:linear-gradient(150deg, var(--navy), var(--navy-2)); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
}
.feature-row .ph.iconpanel::after{display:none;}
.feature-row .ph.iconpanel svg{width:76px; height:76px;}
.feature-row .ph.iconpanel span{font-family:'IBM Plex Mono',monospace; color:var(--gold-light); font-size:12px; letter-spacing:.08em;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:rgba(245,245,242,.6); padding:80px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.3fr .9fr .9fr .9fr 1fr; gap:36px; padding-bottom:56px; border-bottom:1px solid rgba(217,189,132,.14);}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
.footer-grid h5{color:#fff; font-size:13px; font-family:'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; font-weight:500;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer-grid a{font-size:14.5px; color:rgba(245,245,242,.68); transition:color .2s;}
.footer-grid a:hover{color:var(--gold-light);}
.footer-brand img{height:38px; margin-bottom:18px;}
.footer-brand p{font-size:14px; max-width:280px; color:rgba(245,245,242,.55);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:28px; font-size:12.5px;}
.back-top{
  width:44px; height:44px; border:1px solid rgba(217,189,132,.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s; color:#fff;
}
.back-top:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}

/* ---------- Accordion (progressive disclosure) ---------- */
.accordion-item{border-bottom:1px solid var(--line-dark);}
.accordion-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0; cursor:pointer; background:none; border:none; width:100%; text-align:inherit; color:inherit;
}
.accordion-head h4{font-size:16px; color:#fff; font-weight:600;}
.accordion-plus{
  width:30px; height:30px; border:1px solid rgba(217,189,132,.4); border-radius:50%; flex-shrink:0;
  position:relative; transition:transform .35s, background .25s;
}
.accordion-plus::before, .accordion-plus::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--gold-light);
  transform:translate(-50%,-50%);
}
.accordion-plus::before{width:11px; height:1px;}
.accordion-plus::after{width:1px; height:11px; transition:opacity .3s;}
.accordion-item.open .accordion-plus{transform:rotate(135deg); background:var(--gold);}
.accordion-item.open .accordion-plus::before, .accordion-item.open .accordion-plus::after{background:var(--ink);}
.accordion-body{max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,.8,.28,1);}
.accordion-body-inner{padding:0 0 30px;}

/* small data table used inside accordions */
.mini-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.mini-table th{
  text-align:right; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-light); padding:0 0 12px; font-weight:500; border-bottom:1px solid rgba(217,189,132,.18);
}
.mini-table td{padding:14px 0; border-bottom:1px solid rgba(217,189,132,.08); color:rgba(245,245,242,.8); vertical-align:top;}
.mini-table td:first-child, .mini-table th:first-child{padding-inline-end:16px;}

/* ---------- Cards ---------- */
.card{background:#fff; border:1px solid var(--line);}

/* ---------- LTR overrides for directional rules (English pages) ---------- */
[dir="ltr"] #scrollbar{right:auto; left:0;}
[dir="ltr"] .dropdown-panel{right:auto; left:0;}
[dir="ltr"] .mini-table th{text-align:left;}
[dir="ltr"] .mini-table td:first-child, [dir="ltr"] .mini-table th:first-child{padding-inline-end:16px; padding-inline-start:0;}
[dir="ltr"] .kicker{justify-content:flex-start;}
[dir="ltr"] .eyebrow{justify-content:flex-start;}

/* ---------- Partners grid ---------- */
.partners-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:900px){.partners-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.partners-grid{grid-template-columns:1fr 1fr;}}