:root{
  --navy:#0F172A; --navy-2:#16233B; --blue:#1E3A8A; --blue-soft:#3B5BA9;
  --gold:#A16207; --gold-l:#D4A72C; --gold-soft:#FBF3DF;
  --bg:#F8FAFC; --surface:#FFFFFF; --ink:#020617; --body:#1E293B;
  --muted:#5B6B82; --border:#E2E8F0; --muted-bg:#EEF2F7;
  --red:#C8102E; --green:#047857; --green-l:#10B981;
  --radius:18px; --radius-sm:12px;
  --shadow-s:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.05);
  --shadow-m:0 8px 28px rgba(15,23,42,.09);
  --shadow-l:0 20px 50px rgba(15,23,42,.16);
  --ff-h:'Noto Naskh Arabic',Georgia,serif;
  --ff-b:'Noto Sans Arabic',system-ui,-apple-system,Segoe UI,sans-serif;
  --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--ff-b); font-weight:400; font-size:17px; line-height:1.85;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--ff-h); color:var(--ink); line-height:1.35; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.skip-link{position:absolute; inset-inline-start:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; z-index:99; border-radius:0 0 10px 10px}
.skip-link:focus{inset-inline-start:0}
:focus-visible{outline:3px solid var(--gold-l); outline-offset:3px; border-radius:6px}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 520px at 88% -10%, rgba(30,58,138,.55), transparent 62%),
  radial-gradient(760px 420px at 8% 110%, rgba(161,98,7,.32), transparent 60%),
  linear-gradient(160deg,#0B1425 0%, #0F172A 46%, #16233B 100%);
  color:#E9EEF6; padding-top:34px;}
.hero__pattern{position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    linear-gradient(30deg, rgba(212,167,44,.55) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(212,167,44,.4) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 1px, transparent 1.6px);
  background-size:72px 72px,72px 72px,26px 26px;
  mask-image:linear-gradient(180deg,#000 20%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 92%);}
.hero__inner{position:relative; z-index:1; padding-block:26px 40px}
.hero__top{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.pill{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600;
  letter-spacing:.2px; color:#E7D8AE; background:rgba(212,167,44,.11);
  border:1px solid rgba(212,167,44,.35); padding:8px 16px; border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 0 4px rgba(212,167,44,.18)}
.hero__brand{font-family:var(--ff-h); font-size:18px; font-weight:600; color:#fff; letter-spacing:.5px}
.hero h1{font-size:clamp(30px,5.2vw,58px); font-weight:700; color:#fff; margin:26px 0 0; letter-spacing:-.4px}
.grad{color:#F0C97A}
.grad2{color:#8FB6FF}
.hero__lede{max-width:74ch; margin-top:18px; font-size:clamp(16px,1.9vw,19.5px); color:#C7D3E5; font-weight:300}
.hero__lede strong{color:#fff; font-weight:700}
.hero__meta{margin-top:22px; font-size:13.5px; color:#93A3BC}

/* ============ STAT STRIP ============ */
.hero__stat-strip{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,.10); border-top:1px solid rgba(255,255,255,.10);}
.strip__item{background:rgba(9,15,28,.62); backdrop-filter:blur(8px); padding:24px 22px; display:flex; flex-direction:column; gap:6px}
.strip__num{font-family:var(--ff-h); font-size:clamp(28px,3.6vw,42px); font-weight:700; color:#F5D68E; line-height:1}
.strip__lbl{font-size:13.5px; color:#A9B7CC; line-height:1.6}

/* ============ JUMP NAV ============ */
.jump{position:sticky; top:0; z-index:40; background:rgba(248,250,252,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--border)}
.jump__inner{display:flex; gap:8px; overflow-x:auto; padding-block:11px; scrollbar-width:none}
.jump__inner::-webkit-scrollbar{display:none}
.jump a{white-space:nowrap; font-size:14.5px; font-weight:600; color:var(--muted);
  padding:8px 15px; border-radius:999px; border:1px solid transparent; transition:.22s}
.jump a:hover{color:var(--navy); background:#fff; border-color:var(--border); box-shadow:var(--shadow-s)}

/* ============ SECTIONS ============ */
.sec{padding-block:clamp(46px,6vw,84px)}
.sec--alt{background:linear-gradient(180deg,#FFFFFF 0%, #F4F7FB 100%); border-block:1px solid var(--border)}
.sec__head{display:flex; flex-direction:column; gap:10px; margin-bottom:34px; max-width:82ch}
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--gold)}
.kicker::before{content:""; width:26px; height:2px; background:var(--gold-l); border-radius:2px}
.sec h2{font-size:clamp(24px,3.4vw,38px); font-weight:700; letter-spacing:-.3px}
.sec p.lead{font-size:17.5px; color:var(--muted); line-height:1.95}

/* ============ KPI CARDS ============ */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:18px}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow-s); position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s}
.kpi::after{content:""; position:absolute; inset-inline-start:0; top:0; height:100%; width:4px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold)); opacity:.9}
.kpi:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.kpi__lbl{font-size:14px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px}
.kpi__val{font-family:var(--ff-h); font-size:38px; font-weight:700; color:var(--navy); line-height:1.1; margin-top:12px;
  display:flex; align-items:baseline; gap:7px}
.kpi__val small{font-family:var(--ff-b); font-size:14.5px; font-weight:600; color:var(--muted)}
.kpi__delta{margin-top:10px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px}
.up{color:var(--green); background:rgba(4,120,87,.09)}
.down{color:var(--red); background:rgba(200,16,46,.09)}
.flat{color:var(--blue); background:rgba(30,58,138,.09)}
.kpi__note{margin-top:12px; font-size:13.5px; color:var(--muted); line-height:1.7}
.kpi svg{position:absolute; top:20px; inset-inline-end:20px; color:#C9D4E3}
.kpi--dark{background:linear-gradient(150deg,var(--navy) 0%, #1B2B49 100%); border-color:transparent; color:#DCE5F2}
.kpi--dark .kpi__lbl{color:#A9B7CC}
.kpi--dark .kpi__val{color:#fff}
.kpi--dark .kpi__note{color:#93A3BC}
.kpi--dark svg{color:rgba(255,255,255,.28)}
.kpi--dark .up{color:#6EE7B7; background:rgba(110,231,183,.14)}
.kpi--dark .down{color:#FCA5A5; background:rgba(252,165,165,.14)}

/* ============ TIMELINE ============ */
.tl{position:relative; margin-top:8px; padding-inline-start:6px}
.tl::before{content:""; position:absolute; inset-inline-start:14px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--gold-l),var(--border) 70%,transparent)}
.tl__item{position:relative; padding-inline-start:52px; padding-bottom:30px}
.tl__item:last-child{padding-bottom:0}
.tl__dot{position:absolute; inset-inline-start:5px; top:5px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--gold-l); box-shadow:0 0 0 5px rgba(212,167,44,.14)}
.tl__item.is-neg .tl__dot{border-color:var(--red); box-shadow:0 0 0 5px rgba(200,16,46,.13)}
.tl__item.is-pos .tl__dot{border-color:var(--green-l); box-shadow:0 0 0 5px rgba(16,185,129,.15)}
.tl__era{font-family:var(--ff-h); font-size:15px; font-weight:700; color:var(--gold); letter-spacing:.4px}
.tl__title{font-family:var(--ff-h); font-size:21px; font-weight:700; margin-top:2px}
.tl__txt{color:var(--muted); font-size:15.5px; margin-top:6px; max-width:76ch}
.tl__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{font-size:13px; font-weight:600; color:var(--navy); background:var(--muted-bg);
  border:1px solid var(--border); padding:5px 12px; border-radius:999px}
.chip--red{color:#8C1020; background:rgba(200,16,46,.07); border-color:rgba(200,16,46,.2)}
.chip--green{color:#04624A; background:rgba(4,120,87,.08); border-color:rgba(4,120,87,.2)}
.chip--gold{color:#7A4A05; background:var(--gold-soft); border-color:rgba(161,98,7,.25)}

/* ============ CHART CARDS ============ */
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:20px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px 18px; box-shadow:var(--shadow-s); transition:box-shadow .3s, transform .3s}
.card:hover{box-shadow:var(--shadow-m)}
.card__head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px}
.card h3{font-size:19.5px; font-weight:700}
.card__sub{font-size:13.5px; color:var(--muted); margin-top:4px}
.card__unit{font-size:12.5px; font-weight:700; color:var(--gold); background:var(--gold-soft);
  border:1px solid rgba(161,98,7,.2); padding:4px 11px; border-radius:999px; white-space:nowrap}
.chart{width:100%; height:auto; display:block; margin-top:12px}
.legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:13.5px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:14px; height:14px; border-radius:4px; display:inline-block}
.grid-line{stroke:#E6ECF4; stroke-width:1}
.axis-lbl{font-family:var(--ff-b); font-size:11.5px; fill:#8496AC; font-weight:600}
.val-lbl{font-family:var(--ff-b); font-size:11.5px; fill:#334155; font-weight:700}
.zero-line{stroke:#B9C6D6; stroke-width:1.5}
.bar{transition:opacity .2s}
.bar:hover{opacity:.78}
.card__foot{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border);
  font-size:13.5px; color:var(--muted); line-height:1.75}

/* ============ COMPARISON TABLE ============ */
.tablewrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-s); overflow:hidden}
table.cmp{width:100%; border-collapse:collapse; font-size:15.5px}
table.cmp thead th{background:linear-gradient(150deg,var(--navy),#1D2C49); color:#fff;
  font-family:var(--ff-h); font-weight:600; font-size:15px; padding:16px 18px; text-align:start}
table.cmp thead th:nth-child(2){color:#F3B7B7}
table.cmp thead th:nth-child(3){color:#8CE0BE}
table.cmp tbody tr{border-top:1px solid var(--border); transition:background .2s}
table.cmp tbody tr:hover{background:#F6F9FD}
table.cmp td{padding:14px 18px; vertical-align:top}
table.cmp td:first-child{font-weight:600; color:var(--navy)}
table.cmp td:nth-child(2){color:#8C1020}
table.cmp td:nth-child(3){color:#04624A; font-weight:600}
table.cmp .tag{display:inline-block; font-size:12.5px; font-weight:700; padding:2px 9px; border-radius:6px;
  background:var(--muted-bg); color:var(--muted); margin-inline-start:7px}
.table-cap{padding:14px 20px; font-size:13px; color:var(--muted); background:#FBFCFE;
  border-top:1px solid var(--border)}

/* ============ DRIVER CARDS ============ */
.drivers{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px}
.drv{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-s); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s}
.drv:hover{transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:#D6DFEC}
.drv__ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg,#1E3A8A,#0F172A); margin-bottom:15px}
.drv:nth-child(2n) .drv__ico{background:linear-gradient(145deg,#B4800F,#8A5206)}
.drv:nth-child(3n) .drv__ico{background:linear-gradient(145deg,#0E7C63,#065F46)}
.drv h4{font-size:17.5px; font-weight:700; margin-bottom:7px}
.drv p{font-size:14.5px; color:var(--muted); line-height:1.8}
.drv__fig{margin-top:14px; font-family:var(--ff-h); font-size:22px; font-weight:700; color:var(--navy);
  display:flex; align-items:baseline; gap:8px}
.drv__fig small{font-family:var(--ff-b); font-size:13px; font-weight:600; color:var(--muted)}

/* ============ RATING LADDER ============ */
.ladder{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:6px}
.rung{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:20px 18px; box-shadow:var(--shadow-s); position:relative; overflow:hidden}
.rung::before{content:""; position:absolute; inset-inline:0; top:0; height:4px; background:#CBD5E1}
.rung.is-junk::before{background:linear-gradient(90deg,var(--red),#E4717F)}
.rung.is-ig::before{background:linear-gradient(90deg,var(--green),var(--green-l))}
.rung.is-mid::before{background:linear-gradient(90deg,var(--gold-l),var(--gold))}
.rung__year{font-size:13px; font-weight:700; color:var(--muted)}
.rung__ag{font-size:13.5px; font-weight:700; color:var(--navy); margin-top:2px}
.rung__gr{font-family:var(--ff-h); font-size:27px; font-weight:700; margin-top:8px; line-height:1}
.is-junk .rung__gr{color:var(--red)}
.is-ig .rung__gr{color:var(--green)}
.is-mid .rung__gr{color:var(--gold)}
.rung__txt{font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.7}

/* ============ RISKS ============ */
.risks{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.risk{display:flex; gap:14px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:20px; box-shadow:var(--shadow-s); transition:transform .3s, box-shadow .3s}
.risk:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.risk__ico{flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(200,16,46,.08); color:var(--red)}
.risk h4{font-size:16.5px; font-weight:700; margin-bottom:5px}
.risk p{font-size:14.5px; color:var(--muted); line-height:1.8}

/* ============ CALLOUT / SOURCES / FOOTER ============ */
.callout{display:flex; gap:16px; background:linear-gradient(150deg,#FFFDF6,#FBF3DF);
  border:1px solid rgba(161,98,7,.24); border-inline-start:5px solid var(--gold-l);
  border-radius:var(--radius-sm); padding:22px 24px; margin-top:26px}
.callout p{font-size:15.5px; color:#5A4517; line-height:1.9}
.callout strong{color:#3F2F0B}
.srcs{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.src{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 20px}
.src h4{font-size:15.5px; font-weight:700; margin-bottom:4px}
.src p{font-size:14px; color:var(--muted); line-height:1.75}
.foot{background:var(--navy); color:#9FB0C7; padding-block:34px; margin-top:10px}
.foot__inner{display:flex; flex-direction:column; gap:10px}
.foot strong{color:#fff}
.foot__note{font-size:13.5px; line-height:1.8; max-width:96ch}

/* ============ ANIMATION ============ */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none; transition:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero__stat-strip{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .hero__stat-strip{grid-template-columns:1fr}
  .strip__item{padding:18px}
  .sec{padding-block:44px}
  table.cmp{font-size:14.5px}
  table.cmp thead th,table.cmp td{padding:12px 12px}
  .tablewrap{overflow-x:auto}
  table.cmp{min-width:620px}
  .kpi__val{font-size:32px}
  .tl__item{padding-inline-start:44px}
  .tl::before{inset-inline-start:10px}
  .tl__dot{inset-inline-start:1px}
}
@media (max-width:420px){
  .hero h1{font-size:27px}
  .kpi__val{font-size:29px}
}

/* ============ PRINT / PDF ============ */
@media print{
  @page{size:A4; margin:10mm 9mm}
  body{background:#fff; font-size:10.6pt; line-height:1.7}
  .jump{display:none}
  .hero{padding-top:10px}
  .hero__inner{padding-block:12px 18px}
  .hero h1{font-size:30pt; margin-top:12px}
  .hero__lede{font-size:11pt; margin-top:10px}
  .hero__meta{margin-top:10px; font-size:9pt}
  .strip__item{padding:14px 14px}
  .strip__num{font-size:22pt}
  .strip__lbl{font-size:8.6pt}
  .sec{padding-block:16px 20px}
  .sec__head{margin-bottom:16px}
  .sec h2{font-size:19pt}
  .sec p.lead{font-size:10.5pt; line-height:1.65}
  .kpis{grid-template-columns:repeat(3,1fr); gap:9px}
  .kpi{padding:14px 14px}
  .kpi__val{font-size:20pt; margin-top:6px}
  .kpi__note,.kpi__delta{font-size:8.6pt}
  .charts{grid-template-columns:1fr; gap:10px}
  .card{padding:14px 14px 10px}
  .card h3{font-size:12.5pt}
  .card__sub,.card__foot,.legend{font-size:9pt}
  .drivers{grid-template-columns:repeat(3,1fr); gap:9px}
  .drv{padding:13px}
  .drv__ico{display:none}
  .drv p{font-size:8.8pt}
  .drv__fig{font-size:14pt}
  .risks{grid-template-columns:repeat(2,1fr); gap:9px}
  .risk{padding:13px}
  .risk p{font-size:9pt}
  .srcs{grid-template-columns:repeat(2,1fr); gap:9px}
  .src{padding:12px 13px}
  .src p{font-size:8.8pt}
  .ladder{grid-template-columns:repeat(3,1fr); gap:8px}
  .rung{padding:12px}
  .rung__gr{font-size:17pt}
  .rung__txt{font-size:8.6pt}
  .tl__item{padding-bottom:14px}
  .tl__title{font-size:13pt}
  .tl__txt{font-size:9.4pt; margin-top:3px}
  .tl__chips{gap:5px; margin-top:7px}
  .chip{font-size:8.2pt; padding:3px 8px}
  table.cmp{font-size:9.4pt}
  table.cmp thead th{padding:9px 10px; font-size:9.6pt}
  table.cmp td{padding:8px 10px}
  .table-cap{font-size:8.4pt; padding:9px 12px}
  .callout{padding:13px 15px; margin-top:14px}
  .callout p{font-size:9.6pt; line-height:1.7}
  .foot{padding-block:16px; font-size:9pt}
  .foot__note{font-size:8.6pt}
  .hero,.card,.kpi,.drv,.risk,.src,.tablewrap,.callout,.rung,.tl__item{break-inside:avoid; box-shadow:none}
  table.cmp tr,.strip__item,.chart{break-inside:avoid}
  table.cmp{min-width:0}
  .tablewrap{overflow:visible}
  .js .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}