:root{
  --navy:#0d1f2d; --green:#0b3d2e; --green2:#11543f; --gold:#d4a72c;
  --bg:#f6f8fa; --card:#fff; --text:#182430; --muted:#5b6b7a; --line:#e3e9ef;
  --ok:#1a7f4e; --warn:#b07a10; --bad:#b3382c;
  --okbg:#e7f5ee; --warnbg:#fdf3dd; --badbg:#fdeae8;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"IBM Plex Sans Arabic",-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.9;font-size:17px}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
a{color:var(--green2)}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:13px 0;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.12rem;color:var(--navy);text-decoration:none}
.logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--green2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:500}
.nav-links a:hover,.nav-links a.on{color:var(--green)}
@media(max-width:820px){.nav-links a.hide-sm{display:none}}

/* article header */
.art-head{background:linear-gradient(160deg,var(--navy),#123528 75%,var(--green));color:#fff;padding:46px 0 38px}
.art-head .kicker{color:var(--gold);font-size:.85rem;font-weight:600;letter-spacing:.02em}
.art-head h1{font-size:clamp(1.5rem,3.6vw,2.25rem);line-height:1.45;margin:10px 0 12px;font-weight:700}
.art-head .dek{color:#cfdad4;font-size:1.02rem;max-width:720px}
.art-meta{margin-top:16px;color:#9fb4aa;font-size:.85rem;display:flex;gap:14px;flex-wrap:wrap}

/* article body */
article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px;margin:28px 0;box-shadow:0 4px 18px rgba(13,31,45,.05)}
@media(max-width:640px){article{padding:24px 20px}}
article h2{font-size:1.42rem;color:var(--navy);margin:32px 0 12px;line-height:1.5}
article h2:first-child{margin-top:0}
article h3{font-size:1.12rem;color:var(--green);margin:24px 0 8px}
article p{margin-bottom:16px}
article ul,article ol{margin:0 0 18px;padding-inline-start:24px}
article li{margin-bottom:9px}
article strong{color:var(--navy)}
article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.94rem}
article th,article td{border:1px solid var(--line);padding:11px 13px;text-align:start;vertical-align:top}
article th{background:#f0f5f2;color:var(--navy);font-weight:700}
article tr:nth-child(even) td{background:#fafcfd}

/* callouts */
.note{border-radius:11px;padding:16px 20px;margin:22px 0;font-size:.96rem;border:1px solid}
.note.warn{background:var(--warnbg);border-color:#ecd9a8}
.note.bad{background:var(--badbg);border-color:#f2c9c3}
.note.ok{background:var(--okbg);border-color:#c3e4d2}
.note b{display:block;margin-bottom:4px}

/* toc */
.toc{background:#f4f7f9;border:1px solid var(--line);border-radius:11px;padding:18px 22px;margin-bottom:26px}
.toc b{color:var(--navy);display:block;margin-bottom:8px}
.toc ol{margin:0;padding-inline-start:20px}
.toc li{margin-bottom:5px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* CTA */
.cta{background:linear-gradient(150deg,var(--navy),var(--green));border-radius:16px;padding:30px 28px;color:#fff;margin:30px 0}
.cta h3{color:#fff;font-size:1.3rem;margin-bottom:8px}
.cta p{color:#c6d4cd;margin-bottom:18px}
.btn{display:inline-block;border:none;border-radius:10px;padding:12px 26px;font-family:inherit;
  font-size:.98rem;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:#26200a}
.btn-gold:hover{background:#e0b53e}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-green{background:var(--green2);color:#fff}

/* related + cards */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:16px 0 0}
.rel a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  text-decoration:none;display:block;transition:border-color .15s}
.rel a:hover{border-color:var(--green2)}
.rel b{display:block;color:var(--navy);font-size:.98rem;line-height:1.5;margin-bottom:5px}
.rel span{color:var(--muted);font-size:.87rem}

.disclaimer{background:#f0f3f6;border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;font-size:.85rem;color:var(--muted);margin:28px 0}
.src{font-size:.86rem;color:var(--muted)}
.src li{margin-bottom:6px}

footer{background:var(--navy);color:#93a5b3;padding:34px 0;font-size:.88rem;margin-top:20px}
footer .container{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:#c6d4cd}