@font-face{font-family:"Noto Arabic";src:url("../fonts/noto-arabic-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Arabic";src:url("../fonts/noto-arabic-semibold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("../fonts/plex-arabic-medium.ttf") format("truetype");font-weight:500;font-display:swap}
:root{
  --canvas:#080909;--surface:#0f1110;--surface-raised:#141715;
  --text:#eceeeb;--muted:#a2a8a4;--quiet:#828b85;--accent:#9bc3ab;
  --border:rgba(224,235,229,.1);--border-hover:rgba(224,235,229,.23);
  --panel:linear-gradient(145deg,#121514 0%,#0c0e0d 75%);
  --radius:16px;--radius-small:9px;--content:1160px;--chapter:116px;
  --display:"Plex Arabic","Noto Arabic",Tahoma,sans-serif;
  --body:"Noto Arabic",Tahoma,sans-serif;
  --quick:160ms;--ease:cubic-bezier(.2,.7,.3,1);
  color:var(--text);background:var(--canvas);font:400 16px/1.8 var(--body);
  color-scheme:dark;font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0}
h1,h2,h3,p,figure,ul{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.35;text-wrap:balance}
h2{font-size:clamp(32px,3.4vw,48px)}
h3{font-size:26px}
p{color:var(--muted);line-height:1.95}
a{color:inherit;text-decoration:none;touch-action:manipulation}
button,summary{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button{border:0;background:none}
img{display:block;max-width:100%;height:auto}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:4px}
a:active,button:active,summary:active{opacity:.76}
[hidden]{display:none!important}
.wrap{width:min(var(--content),calc(100% - 96px));margin-inline:auto}
.section{padding-block:var(--chapter)}
.section+.section{padding-top:24px}
.eyebrow{font-size:13px;color:var(--accent);margin-bottom:20px}
.muted{color:var(--muted)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:56px;margin-bottom:42px}
.section-heading>p{max-width:340px;font-size:15px}
.section-heading .eyebrow{margin-bottom:17px}
.section-end{display:flex;justify-content:center;margin-top:32px}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{display:inline-block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.device-icon{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.button{display:inline-flex;justify-content:center;align-items:center;gap:22px;min-height:48px;padding:11px 20px;border:1px solid var(--border);border-radius:var(--radius-small);font-size:14px;line-height:1.6;transition:background var(--quick),border-color var(--quick),color var(--quick)}
.button.primary{background:linear-gradient(160deg,#2b312d,#1b201d);border-color:#ffffff1d;color:#eef3ef;box-shadow:inset 0 1px #ffffff09}
.button.primary:hover{background:linear-gradient(160deg,#343e37,#232c26);border-color:#ffffff30}
.button.secondary{background:#ffffff03;color:#dce5df}
.button.secondary:hover{background:#ffffff08;border-color:var(--border-hover)}
.text-link{display:inline-flex;align-items:center;gap:19px;min-height:48px;font-size:14px;color:#c4cec7}
.text-link:hover{color:var(--text)}
.text-link .icon{transition:transform var(--quick) var(--ease)}
.text-link:hover .icon{transform:translateX(-3px)}
.skip{position:fixed;z-index:100;top:-100px;right:24px;padding:12px 20px;border-radius:6px;color:#08160e;background:var(--accent)}
.skip:focus{top:12px}
.dropdown{position:relative}
.dropdown summary{display:flex;align-items:center;gap:7px;min-height:44px;list-style:none}
.dropdown summary::-webkit-details-marker{display:none}
.chevron{width:12px;height:12px;transition:transform var(--quick)}
.dropdown[open]>summary .chevron{transform:rotate(180deg)}
.dropdown-panel{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:-12px;min-width:228px;z-index:40;border:1px solid var(--border);border-radius:var(--radius-small);background:#111412;padding:7px;box-shadow:0 14px 35px #0008;transform-origin:top right;animation:disclosure-in 140ms var(--ease)}
.dropdown-panel a{display:flex;align-items:center;min-height:46px;padding:9px 13px;border-radius:5px;color:#bcc4bf;font-size:14px}
.dropdown-panel a:hover{color:#f0f4f1;background:#ffffff07}
.dropdown-panel p{font-size:14px;padding:9px 13px}
@keyframes disclosure-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.page-shell{padding-top:140px;padding-bottom:100px;min-height:55vh}
.page-shell h1{font-size:clamp(36px,4.5vw,56px);margin-bottom:20px}
.page-shell p.lead{font-size:17px;max-width:680px;line-height:1.9;color:var(--muted);margin-bottom:32px}
.page-shell-notice{display:inline-block;padding:8px 16px;border-radius:6px;border:1px solid var(--border);font-size:13px;color:var(--quiet);margin-top:20px}

footer{border-top:1px solid var(--border);padding-block:35px 45px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.footer-brand>a{font:600 20px Arial,sans-serif;display:inline-flex;align-items:center;min-height:44px}
.footer-brand>p{font-size:12px;margin-top:8px}
.footer-links{display:flex;align-items:center;gap:25px;font-size:13px}
.footer-links>a{min-height:44px;display:inline-flex;align-items:center}
.footer-links>small{font:11px Arial,sans-serif;color:var(--quiet)}

@media(max-width:1080px){
  :root{--chapter:92px}
  .wrap{width:calc(100% - 64px)}
  .section-heading{gap:32px}.section-heading>p{max-width:300px;font-size:14px}
  .footer-links{gap:18px}
}
@media(max-width:700px){
  :root{--chapter:74px}
  .wrap{width:calc(100% - 40px)}
  .section+.section{padding-top:12px}
  h2{font-size:34px}.eyebrow{font-size:13px;margin-bottom:16px}
  .section-heading{display:block;margin-bottom:30px}
  .section-heading>p{font-size:15px;margin-top:20px;max-width:100%}
  .section-heading>.text-link{margin-top:17px}
  .page-shell{padding-top:100px;padding-bottom:60px}
  .page-shell h1{font-size:32px}
  .page-shell p.lead{font-size:15px}
  footer{display:block;padding-block:30px}.footer-brand>p{font-size:11px}
  .footer-links{margin-top:21px;font-size:12px;gap:23px;flex-wrap:wrap}
  .footer-links>small{margin-inline-start:auto}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .text-link:hover .icon{transform:none}
}
@media(prefers-contrast:more){
  :root{--muted:#c1cbc4;--quiet:#a5b4aa}
  .button{border-color:#718278}
  .dropdown-panel{border-color:#59685f}
}
