@font-face{font-family:"Resonate";src:url(fonts/resonate-200.woff2) format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"Resonate";src:url(fonts/resonate-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Resonate";src:url(fonts/resonate-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"HNAr";src:url(fonts/hnar-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"HNAr";src:url(fonts/hnar-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"HNAr";src:url(fonts/hnar-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --red:#C8102E; --black:#06090C; --navy:#252A36; --moon:#DDE4E6; --white:#fff;
  --bg:var(--black); --panel:#0c1016; --line:#1c2129; --ink:#fff; --ink-2:var(--moon); --muted:#8a909c; --track:#1f242d;
  --green:#3E9B6E; --amber:#D79A1E;
  --ar:"HNAr","IBM Plex Sans Arabic",Tahoma,sans-serif; --en:"Resonate","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ar);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.num{font-family:var(--en);font-feature-settings:"tnum";unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)} .small{font-size:13px}
.s-green{color:var(--green)} .s-amber{color:var(--amber)} .s-red{color:#ff5a6e}
.dot::before{content:"";display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--red);vertical-align:.62em;margin-inline-end:.14em}
.logo{height:22px;width:auto;display:block;color:var(--ink)}

/* top bar */
.top{display:flex;align-items:center;gap:28px;padding:16px 40px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10;flex-wrap:wrap}
.top nav{display:flex;gap:2px;flex-wrap:wrap}
.top nav a{color:var(--muted);text-decoration:none;padding:6px 12px;font-size:14px}
.top nav a:hover{color:var(--ink)}
.top nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.top-tools{margin-inline-start:auto;display:flex;gap:10px;align-items:center}
select,input,textarea,button{font:inherit;color:inherit}
select{background:var(--panel);border:1px solid var(--line);padding:6px 10px}
.btn{display:inline-block;background:transparent;border:1px solid #2c323d;color:var(--ink-2);padding:6px 14px;text-decoration:none;cursor:pointer;font-size:14px}
.btn:hover,.btn.on{border-color:var(--moon);color:var(--ink)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;padding:10px 22px}
.btn.primary:hover{filter:brightness(1.1)}
.menu{position:relative}
.menu summary{cursor:pointer;list-style:none;color:var(--muted);font-size:14px;padding:6px 8px}
.menu summary::-webkit-details-marker{display:none}
.menu>div{position:absolute;inset-inline-end:0;top:36px;background:var(--panel);border:1px solid var(--line);min-width:170px;display:grid}
.menu>div a,.menu>div button{display:block;padding:10px 14px;text-decoration:none;background:none;border:0;text-align:start;cursor:pointer;font-size:14px}
.menu>div a:hover,.menu>div button:hover{background:#151a22}
:focus-visible{outline:2px solid var(--moon);outline-offset:2px}

/* home hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;padding:40px;align-items:center}
.gauge{position:relative;max-width:480px;width:100%;justify-self:center}
.gauge-svg{width:100%;display:block}
.g-zone{fill:none;stroke-width:22;opacity:.28}
.g-red{stroke:var(--red)} .g-amber{stroke:var(--amber)} .g-green{stroke:var(--green)}
.g-fill{fill:none;stroke-width:22}
.g-tick{stroke:var(--muted);stroke-width:1}
.g-label{fill:var(--muted);font:12px var(--en);text-anchor:middle}
.gauge-val{position:absolute;inset-inline:0;bottom:4%;text-align:center}
.gauge-n{font-size:104px;font-weight:200;line-height:1}
.gauge-l{color:var(--ink-2);font-size:14px;margin-top:6px}
.eyebrow{color:var(--muted);margin:0 0 6px;font-size:14px}
.verdict h1{font-size:34px;font-weight:700;margin:0 0 10px;line-height:1.35}
.verdict p{color:var(--ink-2);margin:0 0 18px;max-width:50ch}
.alerts{display:grid;gap:8px}
.alerts div{display:flex;gap:12px;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-2);padding:10px 14px;background:var(--panel);border-inline-start:2px solid var(--amber)}
.alerts div.a-red{border-color:var(--red)}
.note{font-size:13px;color:var(--muted);margin-top:14px}

/* KPI row */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.kpi{padding:26px 40px;border-inline-start:1px solid var(--line)}
.kpi:first-child{border-inline-start:0}
.kpi-t{color:var(--muted);font-size:13px}
.kpi-n{font-size:38px;margin:6px 0 10px;line-height:1.1}
.kpi-sub{font-size:13px;color:var(--ink-2);margin-top:10px}

.bar{height:6px;background:var(--track);position:relative}
.bar i{position:absolute;inset-block:0;inset-inline-start:0;background:currentColor}
.bar .mark{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);opacity:.7}

/* summary sections */
.pages{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.pages.two{grid-template-columns:1fr 2fr}
.page .pages{background:none;gap:16px;border:0}
.page .pages.two{grid-template-columns:1fr 1fr}
.pg{background:var(--bg);padding:26px 40px;min-width:0}
.page .pg{border:1px solid var(--line);padding:24px}
.pg h2{margin:0 0 14px;font-size:15px;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.pg h2 a{color:var(--muted);font-weight:400;font-size:13px;text-decoration:none}
.pg h2 a:hover{color:var(--ink)}
.row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2);padding:6px 0;align-items:baseline}
.gate{margin-bottom:10px}
.mini-funnel>div{margin-bottom:6px}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border:1px solid currentColor;white-space:nowrap;margin-inline-start:6px;color:var(--muted)}
.t-green{color:var(--green)} .t-amber{color:var(--amber)} .t-red{color:#ff5a6e} .t-muted{color:var(--muted)}

/* chart */
.chart{width:100%;height:auto;display:block}
.c-grid{stroke:var(--line);stroke-width:1}
.c-axis{fill:var(--muted);font:11px var(--ar)}
.c-ref{stroke:#5b6272;stroke-dasharray:4 4}
.c-ref-label{fill:var(--muted);font:11px var(--ar)}
.c-line{fill:none}
.c-main{stroke:#8a909c;stroke-width:2}
.c-alt{stroke:#3a4154;stroke-width:1.5}
.c-actual{stroke:#fff;stroke-width:2.5}
.c-dot{fill:#fff} .c-dot-hl{fill:var(--red)}
.c-end{font:11px var(--ar);fill:var(--muted)} .c-end-main{fill:var(--ink-2)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:10px}
.lg{display:inline-block;width:18px;height:0;border-top:2px solid;vertical-align:middle;margin-inline-end:6px}
.lg-actual{border-color:#fff;border-top-width:3px} .lg-main{border-color:#8a909c} .lg-alt{border-color:#3a4154} .lg-ref{border-color:#5b6272;border-top-style:dashed}

/* inner pages */
.page{padding:36px 40px 60px;display:grid;gap:20px;max-width:1400px}
.page.narrow{max-width:760px}
.page>h1{font-size:30px;margin:0;font-weight:700}
.lead{color:var(--ink-2);margin:0;max-width:72ch}
.big{font-size:44px;font-weight:200;line-height:1;margin:4px 0 14px}
.big small{font-size:15px;color:var(--muted);font-weight:400}
.split{margin-bottom:22px}
.split-legend{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);margin-bottom:6px}
.split-bar{height:14px;background:#3a4154;position:relative}
.split-bar i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--moon)}
.split-bar .mark{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--red)}
.split-target{font-size:12px;color:var(--muted);margin-top:6px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;color:var(--muted);font-weight:400;font-size:13px;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.tbl tr.hl td{background:#11151c;color:var(--ink)}
.tbl tr.total td{color:var(--ink);font-weight:700;border-top:1px solid #3a4154}
.tbl a{text-decoration:none;border-bottom:1px solid #3a4154}
.funnel{display:grid;gap:10px;margin-bottom:12px}
.f-step{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:center;font-size:14px;color:var(--ink-2)}
.f-bar{height:38px;background:#3a4154;display:flex;align-items:center;padding-inline:12px;font-size:18px;color:#fff}
.f-bar[data-i="1"]{background:#5b6272} .f-bar[data-i="2"]{background:var(--red)}
.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.meter{border:1px solid var(--line);padding:22px;text-align:center;position:relative}
.meter svg{width:140px;height:140px}
.m-track{fill:none;stroke:var(--track);stroke-width:10}
.m-fill{fill:none;stroke-width:10}
.m-target{stroke:var(--ink);stroke-width:2}
.meter-val{position:absolute;top:76px;inset-inline:0;font-size:28px}
.meter-label{font-weight:700;margin-top:8px}
.meter-sub{font-size:13px;color:var(--muted)}
.pg .meter{border:0;padding:0}
.alert-line{border-inline-start:2px solid var(--red);padding:10px 14px;background:var(--panel);margin:0}
.check{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.check-box{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #5b6272;font-size:13px;flex:none}
.check.ok .check-box{background:var(--green);border-color:var(--green);color:#fff}
.road{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:start}
.road-col{border:1px solid var(--line);padding:18px}
.road-col.now{border-color:#5b6272;background:var(--panel)}
.road-col h2{font-size:15px;margin:0 0 10px}
.road-prog{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:12px}
.road-item{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.road-item .tag{margin:0;align-self:start}
.road-item a{text-decoration:none}

/* forms */
.entry{display:grid;gap:18px}
fieldset{border:1px solid var(--line);padding:18px;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
legend{padding:0 6px;color:var(--muted);font-size:13px}
.field{display:grid;gap:4px;font-size:14px}
.field.wide{grid-column:1/-1}
.field small{color:var(--muted);font-size:12px}
input,textarea{background:var(--panel);border:1px solid #2c323d;padding:9px 11px;width:100%}
input[type=number]{font-family:var(--en);direction:ltr;text-align:right}
.checkline{display:flex;gap:10px;align-items:center;grid-column:1/-1}
.checkline input{width:auto}
details summary{cursor:pointer;color:var(--muted);font-size:14px;margin-bottom:10px}
.actions{display:flex;gap:16px;align-items:center}
.saved{color:var(--green);margin:0}
.login{max-width:380px;margin:12vh auto;padding:0 16px;display:grid;gap:18px}
.login .logo{height:30px}
.login h1{font-size:24px;margin:0}
.login form{display:grid;gap:14px}

.foot{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:16px 40px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);flex-wrap:wrap}
.foot form{margin:0}
.link{background:none;border:0;color:var(--ink-2);text-decoration:underline;cursor:pointer;font-size:12px;padding:0}

@media (max-width:1100px){
  .meters{grid-template-columns:1fr 1fr}
  .road{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .top{padding:12px 16px;gap:10px;position:static}
  .top nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .hero{grid-template-columns:1fr;padding:24px 16px;gap:24px}
  .gauge-n{font-size:80px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:18px 16px}
  .kpi:nth-child(3){border-inline-start:0}
  .kpi-n{font-size:28px}
  .pages,.pages.two,.page .pages.two{grid-template-columns:1fr}
  .pg{padding:20px 16px}
  .page{padding:24px 16px 48px}
  .road{grid-template-columns:1fr}
  .foot{padding:14px 16px}
  .tbl{font-size:13px}
}
@media (max-width:520px){ .meters{grid-template-columns:1fr} }
.qr{background:#fff;padding:14px;width:220px;height:220px;justify-self:center}
.qr svg{width:100%;height:100%;display:block}
.secret{display:block;word-break:break-all;background:var(--panel);padding:10px;margin-top:8px;direction:ltr;text-align:left}