:root{--night:#021C1A;--deep:#064239;--panel:#05302A;--teal:#0D6E60;--gold:#FFC83D;--gold-l:#FFE89A;--gold-d:#B9791B;
--cream:#FFF6E0;--red:#E0243A;--blue:#2A7DF0;--yellow:#FFC21A;--green:#22B14C}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,var(--teal),transparent 60%),var(--night);
color:var(--cream);font:16px/1.7 system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Kufi Arabic","Noto Sans Arabic",sans-serif}
a{color:var(--gold)}a:hover{color:var(--gold-l)}
header{position:sticky;top:0;z-index:5;background:rgba(2,28,26,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,200,61,.25)}
.bar{max-width:1080px;margin:auto;display:flex;align-items:center;gap:18px;padding:10px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold);font-weight:800;text-decoration:none;font-size:18px}
.brand img{width:36px;height:36px;border-radius:9px}
nav{display:flex;gap:16px;flex-wrap:wrap;margin-inline-start:auto;align-items:center}
nav a{color:var(--cream);text-decoration:none;opacity:.85}nav a:hover,nav a.on{color:var(--gold);opacity:1}
.lang{border:1px solid var(--gold);border-radius:20px;padding:2px 12px}
main{max-width:1080px;margin:auto;padding:28px 20px 60px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:30px 0 20px}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.15;margin:0 0 14px;color:var(--gold);
text-shadow:0 3px 0 var(--gold-d),0 10px 30px rgba(0,0,0,.4)}
.hero p{font-size:19px;opacity:.92}
.hero img{width:100%;max-width:380px;height:auto;justify-self:center;border-radius:22%;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 4px rgba(255,200,61,.35)}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(var(--gold-l),var(--gold) 50%,var(--gold-d));
color:#1E2350;font-weight:800;padding:12px 22px;border-radius:30px;text-decoration:none;box-shadow:0 4px 0 #7a4f10}
.badge.soon{filter:saturate(.55) brightness(.9);cursor:default}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:30px 0}
.card{background:var(--panel);border:1px solid rgba(255,200,61,.35);border-radius:18px;padding:20px}
.card h3{margin:.2em 0 .4em;color:var(--gold)}.card .ico{font-size:30px}
.dots{display:flex;gap:6px;margin:8px 0}.dots i{width:16px;height:16px;border-radius:50%;display:block;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.dots .c1{background:var(--red)}.dots .c2{background:var(--blue)}.dots .c3{background:var(--yellow)}.dots .c4{background:var(--green)}
h1.page{color:var(--gold);font-size:clamp(28px,5vw,42px);margin:10px 0 4px}
.meta{opacity:.7;font-size:14px;margin-bottom:24px}
.doc{background:rgba(5,48,42,.75);border:1px solid rgba(255,200,61,.25);border-radius:18px;padding:8px 28px 24px}
.doc h2{color:var(--gold);margin-top:28px;font-size:22px}.doc li{margin:6px 0}
.tbl{overflow-x:auto}table{width:100%;border-collapse:collapse;margin:10px 0}
td,th{border:1px solid rgba(255,200,61,.25);padding:8px 10px;text-align:start;vertical-align:top}th{background:rgba(255,200,61,.1);color:var(--gold-l)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.pc{display:flex;gap:14px;background:var(--panel);border-radius:16px;padding:14px;border:1px solid rgba(255,200,61,.25)}
.pc .face{flex:none;width:56px;height:78px;border-radius:8px;background:#fff;color:#111;font-weight:900;font-size:22px;line-height:1.1;
display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.pc .face.r{color:var(--red)}.pc h3{margin:0 0 4px;color:var(--gold);font-size:17px}.pc p{margin:0;font-size:15px}
.cta{background:linear-gradient(135deg,var(--deep),var(--panel));border:1px solid var(--gold);border-radius:18px;padding:6px 22px;margin:16px 0}
footer{border-top:1px solid rgba(255,200,61,.2);padding:24px 20px;text-align:center;font-size:14px;opacity:.85}footer a{margin:0 8px}
@media(max-width:760px){.hero{grid-template-columns:1fr;text-align:center}.badges,.dots{justify-content:center}
.hero img{max-width:220px;grid-row:1}nav{margin-inline-start:0;width:100%;gap:12px}.doc{padding:4px 16px 18px}}