@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+00A0,U+060C,U+061B,U+061F}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+00A0,U+060C,U+061B,U+061F}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+00A0,U+060C,U+061B,U+061F}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+00A0,U+060C,U+061B,U+061F}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#060f26; --bg2:#0a1a3d; --card:#0d2150; --card2:#102a63; --line:#1e3a78;
  --ink:#eaf2ff; --muted:#a3b8dd; --cyan:#3ec9ff; --cyan2:#7fe0ff; --violet:#6f80ff; --silver:#d3dcee;
  --ok:#47d6a0; --warn:#ffcf6b; --bad:#ff7a8a;
  --r:18px; --w:1180px;
  --font:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.85;font-size:17px;
  background-image:radial-gradient(1200px 600px at 85% -5%,rgba(62,201,255,.13),transparent 60%),radial-gradient(900px 500px at 5% 20%,rgba(111,128,255,.12),transparent 60%);
  background-attachment:fixed}
a{color:var(--cyan2);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.skip{position:absolute;right:12px;top:-60px;background:var(--cyan);color:#001;padding:10px 16px;border-radius:10px;z-index:99}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 20px}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(6,15,38,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(62,201,255,.15)}
.bar{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none!important}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(62,201,255,.5)}
.brand b{display:block;font-size:15.5px;line-height:1.25;font-weight:700}
.brand small{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.2px;direction:ltr;text-align:right}
nav.main{margin-inline-start:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.main a{color:var(--silver);padding:8px 12px;border-radius:10px;font-size:15px;font-weight:500;text-decoration:none}
nav.main a:hover,nav.main a[aria-current=page]{background:rgba(62,201,255,.14);color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:600;padding:12px 22px;border-radius:14px;text-decoration:none!important;transition:.2s}
.btn.pri{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#021028}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(62,201,255,.3)}
.btn.sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(62,201,255,.5)}
.btn.sec:hover{background:rgba(62,201,255,.12)}
.btn.sm{padding:8px 16px;font-size:14.5px;border-radius:11px}
.menu-btn{display:none;margin-inline-start:auto;background:none;border:1.5px solid rgba(62,201,255,.5);color:var(--ink);border-radius:10px;padding:8px 12px;font:inherit}

/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 40px}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--cyan2);font-weight:600;font-size:14.5px;border:1px solid rgba(62,201,255,.35);padding:5px 14px;border-radius:99px;background:rgba(62,201,255,.07)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(71,214,160,.2)}
h1{font-size:clamp(30px,4.6vw,52px);line-height:1.3;margin:18px 0 14px;font-weight:700;letter-spacing:-.3px}
h1 em{white-space:nowrap;font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;color:var(--silver);max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.logo-orb{position:relative;display:grid;place-items:center}
.logo-orb img{width:min(470px,100%);-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}
.logo-orb:before{content:"";position:absolute;inset:-6%;border-radius:50%;border:1px dashed rgba(62,201,255,.35);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.logo-orb:before{animation:none}html{scroll-behavior:auto}}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px}
.facts div b{display:block;font-size:30px;color:var(--cyan2);line-height:1.1}
.facts div span{font-size:14px;color:var(--muted)}

/* sections */
section{padding:56px 0}
section.alt{background:linear-gradient(180deg,rgba(13,33,80,.5),rgba(13,33,80,.15))}
.sh{margin-bottom:30px;max-width:760px}
.sh .k{color:var(--cyan);font-weight:700;font-size:14px;letter-spacing:.3px}
.sh h2{font-size:clamp(26px,3.4vw,38px);line-height:1.35;margin:4px 0 8px}
.sh p{color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;background:linear-gradient(160deg,var(--card),#0a1b42);border:1px solid var(--line);border-radius:var(--r);padding:22px;color:var(--ink);text-decoration:none!important;transition:.25s;overflow:hidden}
.tile:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 14px 40px rgba(62,201,255,.15)}
.tile:after{content:"";position:absolute;left:-40px;bottom:-40px;width:120px;height:120px;border-radius:50%;border:1px solid rgba(62,201,255,.18)}
.ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,rgba(127,224,255,.35),rgba(111,128,255,.12));border:1.5px solid rgba(62,201,255,.55);color:var(--cyan2)}
.ico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:19px}.tile p{font-size:14.5px;color:var(--muted);line-height:1.7}
.tile .go{margin-top:auto;font-size:14px;color:var(--cyan2);font-weight:600}
.tile.hl{background:linear-gradient(160deg,#12358a,#1b3f9e);border-color:var(--cyan)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:linear-gradient(160deg,var(--card),#0a1b42);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h3{font-size:19px;margin-bottom:6px}.card p,.card li{color:var(--muted);font-size:15.5px}
.card ul{padding-inline-start:20px;margin-top:8px}
.pill{display:inline-block;background:rgba(62,201,255,.12);border:1px solid rgba(62,201,255,.35);color:var(--cyan2);border-radius:99px;padding:2px 12px;font-size:13px;font-weight:600}
.pill.g{background:rgba(71,214,160,.1);border-color:rgba(71,214,160,.4);color:var(--ok)}
.pill.w{background:rgba(255,207,107,.1);border-color:rgba(255,207,107,.4);color:var(--warn)}
.progs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prog{display:flex;flex-direction:column;gap:10px}
.prog .dur{font-size:34px;font-weight:700;color:var(--cyan2);line-height:1.1}
.prog .en{font-size:13px;color:var(--muted);direction:ltr;text-align:right}
.prog .price{font-weight:700;font-size:20px}.prog .price small{font-weight:400;color:var(--muted);font-size:13px}
.prog .btn{margin-top:auto}
.note{background:rgba(255,207,107,.08);border:1px solid rgba(255,207,107,.35);border-radius:14px;padding:14px 18px;color:#ffe3a3;font-size:15px}
.note.info{background:rgba(62,201,255,.07);border-color:rgba(62,201,255,.3);color:var(--silver)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pagehead{padding:46px 0 22px;border-bottom:1px solid rgba(62,201,255,.12)}
.pagehead h1{font-size:clamp(28px,4vw,42px);margin:6px 0 8px}
.crumb{font-size:14px;color:var(--muted)}.crumb a{color:var(--muted)}

/* tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15.5px}
.tbl th{background:var(--card2);text-align:right;padding:10px 14px;font-weight:600}
.tbl td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:rgba(13,33,80,.35)}
.code{direction:ltr;unicode-bidi:isolate;font-weight:700;color:var(--cyan2);white-space:nowrap}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
details.acc{background:linear-gradient(160deg,var(--card),#0a1b42);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
details.acc summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary:after{content:"+";font-size:22px;color:var(--cyan)}
details.acc[open] summary:after{content:"–"}
details.acc .in{padding:0 18px 16px;color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.chip{background:transparent;border:1.5px solid var(--line);color:var(--silver);border-radius:99px;padding:6px 16px;font:inherit;font-size:14.5px;cursor:pointer}
.chip[aria-pressed=true]{background:rgba(62,201,255,.18);border-color:var(--cyan);color:#fff}
input,select,textarea{font:inherit;color:var(--ink);background:#081634;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(62,201,255,.2)}
label{display:block;font-weight:600;font-size:15px;margin:14px 0 6px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help{font-size:13.5px;color:var(--muted);margin-top:4px}
.err{color:var(--bad);font-size:14px;margin-top:4px;min-height:1px}
.steps{display:flex;gap:8px;margin-bottom:20px}
.steps span{flex:1;text-align:center;padding:9px 6px;border-radius:12px;background:rgba(13,33,80,.6);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.steps span.on{background:rgba(62,201,255,.18);border-color:var(--cyan);color:#fff;font-weight:600}
.steps span.done{color:var(--ok);border-color:rgba(71,214,160,.5)}
.radios{display:grid;gap:10px}
.radio{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;background:rgba(13,33,80,.4)}
.radio input{width:auto;margin-top:7px}
.radio:has(input:checked){border-color:var(--cyan);background:rgba(62,201,255,.1)}
.radio b{display:block}.radio small{color:var(--muted)}
.result{border:1.5px solid var(--ok);background:rgba(71,214,160,.07);border-radius:18px;padding:24px}
.big{font-size:30px;font-weight:700;direction:ltr;unicode-bidi:isolate;color:var(--ok)}
.book{display:grid;grid-template-columns:auto 1fr;gap:18px}
.cover{width:84px;height:116px;border-radius:6px 12px 12px 6px;background:linear-gradient(150deg,#16409a,#0b1f4d);border:1px solid var(--cyan);display:grid;place-items:center;text-align:center;font-size:11px;padding:8px;line-height:1.4;color:var(--cyan2);box-shadow:-5px 5px 0 rgba(62,201,255,.15);direction:ltr}
.book h3{font-size:19px}.book .meta{font-size:13.5px;color:var(--muted);direction:ltr;text-align:right}
.book .lbl{display:block;font-weight:700;color:var(--cyan2);font-size:13.5px;margin-top:10px}
.book.feat{grid-column:1/-1;background:linear-gradient(160deg,#12358a,#0d2150);border-color:var(--cyan)}
.cols{columns:2;column-gap:30px}
.kbd{direction:ltr;unicode-bidi:isolate;display:inline-block}
footer{border-top:1px solid rgba(62,201,255,.15);margin-top:30px;padding:36px 0 26px;background:rgba(3,9,25,.7)}
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
footer h4{font-size:15px;margin-bottom:8px;color:var(--cyan2)}
footer li{list-style:none;font-size:14.5px;margin:5px 0}footer ul{padding:0}
footer a{color:var(--silver)}
footer .legal{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
@media(max-width:980px){
  .tiles{grid-template-columns:repeat(2,1fr)}.progs{grid-template-columns:repeat(2,1fr)}
  .hero .grid{grid-template-columns:1fr}.logo-orb{order:-1}.logo-orb img{width:min(300px,70%)}
  footer .fg{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}
  .menu-btn{display:block}
  nav.main{display:none;position:absolute;inset-inline:0;top:68px;background:var(--bg2);flex-direction:column;padding:12px 20px;border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
  .bar>.btn{display:none}
}
@media(max-width:600px){
  body{font-size:16px}.tiles,.progs,.f2{grid-template-columns:1fr}.cols{columns:1}
  .steps span{font-size:12.5px}.book{grid-template-columns:1fr}.cover{width:70px;height:96px}
  section{padding:40px 0}footer .fg{grid-template-columns:1fr}
}
@media print{header.top,footer,.cta,nav{display:none}body{background:#fff;color:#000}}
