:root{
  --nav:#0D2B4E;--navdk:#06182D;--teal:#006B75;--teal2:#00A896;--bteal:#2E86AB;
  --amber:#C06E00;--ink:#0A1A2B;--body:#44607A;--mgrey:#8FA5B8;--line:#E2E9F0;
  --wash:#F5F8FA;--white:#fff;--radius:14px;
  --fen:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --far:'Tajawal','Segoe UI',Tahoma,sans-serif;--f:var(--fen);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--white);color:var(--body);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
[dir="rtl"]{--f:var(--far)}
[dir="rtl"] body{font-family:var(--far)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-n{max-width:880px;margin:0 auto;padding:0 24px}
a{color:inherit}

/* nav */
.nb{position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(13,43,78,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,168,150,.18)}
.nb-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.nb-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.nb-logo img{width:36px;height:36px;object-fit:contain;border-radius:7px}
.nb-l1{font-size:13.5px;font-weight:700;color:#fff;line-height:1.1;display:block}
.nb-l2{font-size:10.5px;color:var(--mgrey);line-height:1.1;display:block;font-family:var(--far)}
.nb-links{display:flex;gap:2px;align-items:center}
.nb-links a{color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:6px;transition:.25s}
.nb-links a:hover,.nb-links a.on{color:#fff;background:rgba(0,168,150,.18)}
.nb-act{display:flex;gap:9px;align-items:center}
.lang{display:flex;align-items:center;gap:6px;background:rgba(0,107,117,.22);border:1px solid var(--teal);color:#fff;font-size:12px;font-weight:700;padding:6px 13px;border-radius:20px;cursor:pointer;font-family:var(--far)}
.cta-s{background:var(--teal2);color:#fff;font-size:13px;font-weight:600;padding:8px 17px;border-radius:7px;border:none;cursor:pointer;font-family:var(--fen);text-decoration:none}
.cta-s:hover{filter:brightness(1.1)}
@media(max-width:1000px){.nb-links{display:none}}

/* breadcrumb */
.bc{padding:96px 0 0;font-size:13px;color:var(--mgrey)}
.bc a{color:var(--teal);text-decoration:none}
.bc a:hover{text-decoration:underline}
.bc span{margin:0 8px;opacity:.5}

/* hero */
.ih{padding:34px 0 54px;border-bottom:1px solid var(--line)}
.kick{display:inline-block;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal2);margin-bottom:16px}
.ih h1{font-size:clamp(34px,5.6vw,62px);font-weight:800;color:var(--ink);line-height:1.06;letter-spacing:-1.4px;margin-bottom:20px;max-width:15ch}
.ih .lede{font-size:clamp(16px,2vw,20px);color:var(--body);max-width:70ch;line-height:1.65}
.meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.meta div{min-width:120px}
.meta dt{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--mgrey);margin-bottom:5px}
.meta dd{font-size:14.5px;font-weight:600;color:var(--ink)}

/* sections */
.sec{padding:64px 0}
.sec.tint{background:var(--wash)}
.sec.dark{background:var(--nav);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}
h2.h{font-size:clamp(24px,3.2vw,36px);font-weight:800;color:var(--ink);letter-spacing:-.6px;margin-bottom:14px;line-height:1.15}
p.sub{font-size:16px;color:var(--body);max-width:66ch;margin-bottom:34px}
.sec.dark p.sub{color:#BDD0E0}

/* motion */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* flow diagram */
.flow{display:grid;gap:14px}
.step{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;transition:.3s}
.step:hover{border-color:rgba(0,168,150,.45);transform:translateY(-2px);box-shadow:0 8px 30px rgba(13,43,78,.07)}
.sn{width:52px;height:52px;border-radius:13px;background:var(--nav);color:var(--teal2);font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center}
.step h3{font-size:17.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.step p{font-size:14.5px;color:var(--body)}
.step .out{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--teal);background:rgba(0,168,150,.09);display:inline-block;padding:5px 11px;border-radius:20px}

/* tiers (scopes) */
.tiers{display:grid;gap:16px}
.tier{border-radius:var(--radius);padding:26px 28px;color:#fff;position:relative;overflow:hidden}
.tier h3{font-size:20px;font-weight:800;margin-bottom:6px;color:#fff}
.tier .tl{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.72;margin-bottom:10px}
.tier p{font-size:14.5px;opacity:.92;max-width:62ch}
.tier ul{margin-top:12px;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tier li{font-size:12.5px;background:rgba(255,255,255,.16);padding:5px 12px;border-radius:20px}

/* pillar bars */
.pill-row{display:grid;grid-template-columns:210px 1fr 62px;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.pill-row b{font-size:16px;color:var(--ink);font-weight:700}
.pill-row small{display:block;font-size:13px;color:var(--body);font-weight:400;margin-top:2px}
.bar{height:12px;border-radius:20px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:20px;transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.pw{font-size:19px;font-weight:800;color:var(--ink);text-align:right}
@media(max-width:700px){.pill-row{grid-template-columns:1fr 54px;gap:10px}.bar{grid-column:1/-1}}

/* matrix */
.mx{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:520px}
.mx div{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.9)}
.mx-ax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mgrey);margin-top:8px;max-width:520px;font-weight:600}

/* cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.3s}
.card:hover{border-color:rgba(0,168,150,.4);transform:translateY(-3px);box-shadow:0 10px 34px rgba(13,43,78,.08)}
.card h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px}
.card p{font-size:14.5px}
.sec.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.sec.dark .card p{color:#BDD0E0}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px}
.stat b{display:block;font-size:clamp(34px,4.6vw,50px);font-weight:800;color:var(--teal2);line-height:1;letter-spacing:-1.5px}
.stat span{display:block;font-size:14px;color:var(--body);margin-top:9px}
.sec.dark .stat span{color:#BDD0E0}

/* checklist */
.chk{list-style:none;display:grid;gap:11px}
.chk li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:15px;align-items:start}
.chk li::before{content:'';width:19px;height:19px;border-radius:50%;border:2px solid var(--teal2);margin-top:4px;background:radial-gradient(circle,var(--teal2) 0 42%,transparent 43%)}

/* callout */
.callout{background:var(--nav);color:#fff;border-radius:18px;padding:40px 42px;margin-top:8px}
.callout h3{font-size:22px;font-weight:800;margin-bottom:10px;color:#fff}
.callout p{color:#C4D6E4;max-width:64ch;margin-bottom:20px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal2);color:#fff;border:none;padding:13px 26px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;font-family:var(--f)}
.btn:hover{filter:brightness(1.12)}
.btn.gh{background:transparent;border:2px solid rgba(255,255,255,.32)}
.btn.gh:hover{border-color:var(--teal2);color:var(--teal2);filter:none}

/* prev/next */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:44px 0;border-top:1px solid var(--line)}
.pn a{text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;transition:.3s;display:block}
.pn a:hover{border-color:var(--teal2);background:var(--wash)}
.pn small{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--mgrey);display:block;margin-bottom:7px}
.pn b{font-size:16.5px;color:var(--ink);font-weight:700}
.pn .nx{text-align:right}
[dir="rtl"] .pn .nx{text-align:left}
@media(max-width:640px){.pn{grid-template-columns:1fr}}

/* hub cards */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.hcard{border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:.35s;background:#fff}
.hcard:hover{transform:translateY(-5px);box-shadow:0 16px 44px rgba(13,43,78,.12);border-color:rgba(0,168,150,.4)}
.hc-top{height:150px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hc-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.hc-tag{font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.hcard h3{font-size:20px;font-weight:800;color:var(--ink);line-height:1.22;margin-bottom:10px;letter-spacing:-.4px}
.hcard p{font-size:14.5px;color:var(--body);flex:1}
.hc-go{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--teal2);display:flex;align-items:center;gap:7px}
.hcard:hover .hc-go span{transform:translateX(4px)}
.hc-go span{transition:.3s}
[dir="rtl"] .hc-go span{transform:scaleX(-1)}

/* footer */
.ft{background:var(--navdk);color:var(--mgrey);padding:52px 0 26px;font-size:13.5px}
.ft-g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.ft h4{color:#fff;font-size:13.5px;font-weight:700;margin-bottom:13px}
.ft a{color:var(--mgrey);text-decoration:none;display:block;margin-bottom:8px}
.ft a:hover{color:var(--teal2)}
.ft-b{border-top:1px solid rgba(255,255,255,.09);padding-top:19px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px}
@media(max-width:820px){.ft-g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-g{grid-template-columns:1fr}}