:root {
  --ink:    #0F214A;
  --ink2:   #1E3A8A;
  --ink3:   #2353D8;
  --gold:   #F39C12;
  --gold2:  #F5AB1F;
  --gold3:  #F7C55A;
  --paper:  #F8F9FA;
  --paper2: #EAF0FF;
  --paper3: #C7D8FF;
  --green:  #0A7A59;
  --red:    #C0392B;
  --body:   #2D3748;
  --mid:    #4B5563;
  --soft:   #6B7280;
  --rule:   rgba(35,83,216,.08);
  --sg:     0 8px 28px -6px rgba(243,156,18,.36);
  --s2:     0 8px 32px -8px rgba(15,33,74,.16);
  --r1: 8px; --r2: 14px; --r3: 22px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: 'Noto Kufi Arabic','Tajawal',sans-serif;
  background: var(--paper);
  color: var(--body);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit }
img { display:block; max-width:100% }
h1,h2,h3,h4 { font-family:'Tajawal',sans-serif; font-weight:900; line-height:1.2; letter-spacing:-.02em }

/* ── Width wrapper ── */
.w { max-width:1220px; margin:0 auto; padding:0 28px }
.w-art { max-width:860px; margin:0 auto; padding:0 28px }

/* ════ NAV ════ */
.nav {
  position:fixed; inset:0 0 auto; z-index:900;
  background:#fff;
  box-shadow:0 2px 20px -4px rgba(15,33,74,.12);
  transition:box-shadow .3s;
}
.nav.scrolled { box-shadow:0 2px 24px -4px rgba(15,33,74,.18) }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:70px }
.logo img { height:58px; width:auto; object-fit:contain; display:block }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none }
.nav-links a {
  color:var(--ink2); font-size:14px; font-weight:600;
  transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; right:0;
  width:0; height:2px; background:var(--ink3); border-radius:2px;
  transition:width .25s;
}
.nav-links a:hover { color:var(--ink3) }
.nav-links a:hover::after { width:100% }
.nav-cta {
  background:linear-gradient(130deg,var(--gold),var(--gold2)) !important;
  color:var(--ink) !important;
  padding:9px 22px; border-radius:var(--r1);
  font-weight:700 !important;
  box-shadow:var(--sg);
  transition:transform .2s, box-shadow .2s !important;
}
.nav-cta::after { display:none !important }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 12px 32px -6px rgba(243,156,18,.55) !important }

/* ════ HERO / PAGE HEADER ════ */
.page-hero {
  padding: 110px 0 64px;
  background:
    radial-gradient(ellipse 55% 50% at 80% 20%, rgba(243,156,18,.09) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(35,83,216,.07) 0%, transparent 50%),
    linear-gradient(152deg, var(--ink) 0%, var(--ink2) 55%, var(--ink3) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero-layout {
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:52px;
  align-items:center;
}
.hero-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.browser-frame {
  width:100%;
  max-width:460px;
  background:#f8f9fa;
  border-radius:14px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  overflow:hidden;
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(-.5deg) }
  50%      { transform: translateY(-14px) rotate(.4deg) }
}
.browser-bar {
  background:#0F214A;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.b-dots { display:flex; gap:5px }
.b-dot  { width:10px; height:10px; border-radius:50% }
.b-dot:nth-child(1){background:#FF5F57}
.b-dot:nth-child(2){background:#FFBD2E}
.b-dot:nth-child(3){background:#28C840}
.b-url {
  flex:1; background:rgba(255,255,255,.07);
  border-radius:5px; padding:4px 10px;
  font-size:11px; color:rgba(255,255,255,.4);
  font-family:'Noto Kufi Arabic',sans-serif;
}
.browser-frame img {
  width:100%; display:block;
  transition: transform .6s ease;
}
.browser-frame:hover img { transform:scale(1.02) }

.hero-chip {
  position:absolute;
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  display:flex; align-items:center; gap:9px;
  box-shadow: 0 12px 36px -8px rgba(0,0,0,.35);
}
.hero-chip-a { bottom:-10px; right:-16px; animation:drift 6s ease-in-out infinite }
.hero-chip-b { top:10px; left:-20px; animation:drift 6s ease-in-out infinite 2.5s }
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.chip-ico {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.chip-gold { background:linear-gradient(135deg,#F39C12,#F5AB1F); color:#0F214A }
.chip-green { background:linear-gradient(135deg,#0A7A59,#0e9b70); color:#fff }
.chip-txt small { display:block; font-size:10px; color:#6B7280; font-family:'Noto Kufi Arabic',sans-serif }
.chip-txt strong { display:block; font-size:12.5px; color:#0F214A; font-weight:700; font-family:'Noto Kufi Arabic',sans-serif }

@media(max-width:900px){
  .hero-layout { grid-template-columns:1fr; gap:36px }
  .hero-visual { display:none }
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero-inner { position:relative; z-index:2; max-width:820px }
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,.5);
  margin-bottom:20px;
}
.breadcrumb a { color:rgba(255,255,255,.55); transition:color .2s }
.breadcrumb a:hover { color:var(--gold3) }
.breadcrumb span { color:rgba(255,255,255,.25) }
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(243,156,18,.1); border:1px solid rgba(243,156,18,.3);
  color:var(--gold3); font-size:13px; font-weight:700;
  padding:7px 18px; border-radius:100px; margin-bottom:22px;
}
.hero-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--gold2);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {0%,100%{box-shadow:0 0 0 3px rgba(243,156,18,.2)}50%{box-shadow:0 0 0 7px rgba(243,156,18,.04)}}
.page-hero h1 {
  font-size:clamp(28px,4vw,52px);
  color:#fff; margin-bottom:18px; line-height:1.1;
}
.page-hero h1 em { font-style:normal; color:var(--gold2) }
.hero-sub {
  font-size:17px; color:rgba(255,255,255,.7);
  line-height:1.85; margin-bottom:36px; max-width:640px;
}
.hero-sub strong { color:var(--gold3) }
.hero-stats {
  display:flex; gap:0; flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r2);
  background:rgba(255,255,255,.04);
  overflow:hidden; width:fit-content;
}
.hs-item {
  padding:16px 28px; text-align:center;
  border-left:1px solid rgba(255,255,255,.08);
}
.hs-item:last-child { border-left:none }
.hs-v { font-size:30px; font-weight:900; color:var(--gold3); line-height:1; margin-bottom:4px }
.hs-l { font-size:12px; color:rgba(255,255,255,.45) }

/* ════ TOC ════ */
.toc-box {
  background:#fff; border:1px solid var(--rule);
  border-right:4px solid var(--ink3);
  border-radius:var(--r2); padding:24px 28px;
  box-shadow: 0 2px 16px rgba(15,33,74,.06);
  margin:48px 0 0;
}
.toc-label { font-size:12px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px }
.toc-box ol { list-style:none; counter-reset:toc }
.toc-box ol li {
  counter-increment:toc;
  padding:7px 0;
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; gap:10px;
}
.toc-box ol li:last-child { border-bottom:none }
.toc-box ol li::before {
  content:counter(toc, arabic-indic);
  flex-shrink:0; width:24px; height:24px; border-radius:6px;
  background:var(--paper2); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--ink3);
}
.toc-box ol li a {
  font-size:14.5px; font-weight:600; color:var(--ink);
  transition:color .2s;
}
.toc-box ol li a:hover { color:var(--ink3) }

/* ════ ARTICLE BODY ════ */
.article-section { padding:64px 0 0 }
.sec-hd { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px }
.sec-num {
  flex-shrink:0; width:42px; height:42px;
  background:var(--ink); color:var(--gold3);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:'Tajawal'; font-size:18px; font-weight:900; margin-top:2px;
}
.sec-hd h2 { font-size:clamp(20px,2.8vw,28px); color:var(--ink); margin-bottom:3px }
.sec-hd .sub { font-size:13.5px; color:var(--soft); font-weight:400 }
p { color:var(--body); font-size:16px; line-height:1.88; margin-bottom:16px }
strong { color:var(--ink); font-weight:700 }

/* ── Stats Bar ── */
.stats-bar {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin:28px 0;
}
.stat-card {
  background:var(--ink); border-radius:var(--r2);
  padding:22px 18px; text-align:center;
}
.stat-card .n { font-size:36px; font-weight:900; font-family:'Tajawal'; color:var(--gold3); line-height:1; margin-bottom:6px }
.stat-card .l { font-size:13px; color:rgba(255,255,255,.65); line-height:1.45 }

/* ── Cards Grid ── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:28px 0 }
.card {
  background:#fff; border:1px solid var(--rule);
  border-radius:var(--r2); padding:22px;
  transition:box-shadow .25s, transform .25s;
  box-shadow:0 1px 8px rgba(15,33,74,.05);
}
.card:hover { box-shadow:var(--s2); transform:translateY(-3px) }
.card-icon { font-size:28px; margin-bottom:12px }
.card h3 { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:8px }
.card p { font-size:14px; color:var(--mid); margin:0; line-height:1.65 }

/* ── Highlight Boxes ── */
.hl { border-radius:var(--r2); padding:20px 22px; margin:24px 0; display:flex; gap:14px; align-items:flex-start }
.hl.info  { background:var(--paper2); border-right:4px solid var(--ink3) }
.hl.ok    { background:#edfaf5;        border-right:4px solid var(--green) }
.hl.warn  { background:#fffbeb;        border-right:4px solid #d97706 }
.hl.bad   { background:#fef2f2;        border-right:4px solid var(--red) }
.hl-ico { font-size:22px; flex-shrink:0; margin-top:1px }
.hl p { margin:0; font-size:15px; line-height:1.75 }

/* ── Steps ── */
.steps { margin:24px 0 }
.step { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule) }
.step:last-child { border-bottom:none }
.step-n {
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:var(--paper2); border:2px solid var(--ink3);
  color:var(--ink3); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.step h4 { font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:5px }
.step p { font-size:14.5px; color:var(--mid); margin:0; line-height:1.65 }

/* ── Checklist ── */
.checklist { list-style:none; margin:20px 0 }
.checklist li {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--rule);
  font-size:15.5px; color:var(--body);
}
.checklist li:last-child { border-bottom:none }
.chk {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:#edfaf5; border:1.5px solid #c6f6e4;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--green); margin-top:2px;
}

/* ── Danger Banner ── */
.danger-banner {
  background:linear-gradient(135deg, var(--ink) 0%, #1e1e2e 100%);
  border-radius:var(--r2); padding:28px 26px; margin:28px 0; color:#fff;
}
.danger-banner h3 { font-size:18px; color:#fca5a5; margin-bottom:12px }
.danger-banner ul { list-style:none; display:flex; flex-direction:column; gap:6px }
.danger-banner ul li { font-size:14.5px; color:rgba(255,255,255,.78); display:flex; gap:8px }
.danger-banner ul li::before { content:"→"; color:var(--gold3); flex-shrink:0 }

/* ── Divider ── */
.divider { height:1px; background:var(--rule); margin:56px 0 0 }

/* ── FAQ ── */
.fi { border:1px solid var(--rule); border-radius:var(--r1); margin-bottom:10px; background:var(--paper); overflow:hidden; transition:border-color .25s }
.fi:hover { border-color:rgba(243,156,18,.28) }
.fi.open { border-color:rgba(243,156,18,.4); background:#fff }
.fq { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; cursor:pointer; font-size:15px; font-weight:700; color:var(--ink); user-select:none; gap:12px }
.fq-ico { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--paper2); border:1.5px solid var(--rule); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:13px; font-weight:900; transition:all .28s }
.fi.open .fq-ico { background:var(--gold); color:var(--ink); border-color:var(--gold); transform:rotate(45deg) }
.fa { max-height:0; overflow:hidden; transition:max-height .4s ease }
.fi.open .fa { max-height:400px }
.fa-in { padding:0 22px 20px; font-size:14px; color:var(--mid); line-height:1.9 }

/* ════ CTA FINAL ════ */
.cta-final {
  margin-top:72px;
  padding:72px 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(243,156,18,.11) 0%, transparent 65%),
    linear-gradient(148deg, var(--ink) 0%, var(--ink3) 100%);
  text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cta-final::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:54px 54px;
}
.cta-final > * { position:relative; z-index:2 }
.cta-seal {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(243,156,18,.09); border:1px solid rgba(243,156,18,.28);
  color:var(--gold3); padding:7px 18px; border-radius:100px;
  font-size:12.5px; font-weight:600; margin-bottom:22px;
}
.cta-final h2 { font-size:clamp(26px,3.5vw,46px); color:#fff; margin-bottom:16px }
.cta-final h2 em { font-style:normal; color:var(--gold2) }
.cta-final > p { font-size:16.5px; color:rgba(255,255,255,.65); max-width:550px; margin:0 auto 32px }
.btn-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 30px; border-radius:var(--r1);
  font-weight:700; font-size:15px; font-family:'Tajawal';
  cursor:pointer; border:none; transition:all .26s;
}
.btn-gold { background:linear-gradient(130deg,var(--gold),var(--gold2)); color:var(--ink); box-shadow:var(--sg) }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 14px 36px -6px rgba(243,156,18,.55) }
.btn-ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.22) }
.btn-ghost:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.45) }
.cta-meta { display:flex; justify-content:center; gap:28px; margin-top:30px; flex-wrap:wrap }
.cta-m { display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.5) }
.cta-m strong { color:#fff }

/* ════ FOOTER ════ */
footer { background:#fff; color:#4b5563; padding:56px 0 0; border-top:3px solid var(--ink3) }
.ft-g { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--rule) }
.ft-logo-r { display:flex; align-items:center; gap:11px; margin-bottom:16px }
.ft-logo-r img { height:60px; width:auto; object-fit:contain }
.ft-about { font-size:13px; line-height:1.85; margin-bottom:16px; max-width:280px; color:#334155 }
.soc-r { display:flex; gap:8px }
.soc {
  width:32px; height:32px; border-radius:7px;
  background:var(--paper2); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; color:var(--ink2);
  transition:all .22s; text-decoration:none;
}
.soc:hover { background:var(--ink3); color:#fff; border-color:var(--ink3) }
.ft-col h4 {
  color:var(--ink); font-size:13.5px; margin-bottom:14px;
  font-weight:800; padding-bottom:8px; border-bottom:2px solid var(--paper2);
}
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:9px }
.ft-col ul a { font-size:13px; color:#334155; font-weight:500; transition:color .2s }
.ft-col ul a:hover { color:var(--ink3) }
.ft-bottom {
  padding:18px 0; display:flex; justify-content:space-between;
  font-size:12px; flex-wrap:wrap; gap:10px; color:#475569;
  border-top:1px solid #e2e8f0;
}

/* ════ WA STICKY ════ */
.wa {
  position:fixed; bottom:24px; left:24px; z-index:800;
  width:54px; height:54px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px -4px rgba(37,211,102,.5);
  transition:transform .28s; animation:wap 3.2s ease-in-out infinite;
}
.wa:hover { transform:scale(1.1) }
@keyframes wap{0%,100%{box-shadow:0 6px 28px -4px rgba(37,211,102,.5)}50%{box-shadow:0 6px 40px 0 rgba(37,211,102,.28),0 0 0 10px rgba(37,211,102,.05)}}

/* ════ RESPONSIVE ════ */
@media(max-width:1024px){
  .ft-g { grid-template-columns:1fr 1fr; gap:28px }
  .stats-bar { grid-template-columns:1fr 1fr }
}
@media(max-width:640px){
  .w,.w-art { padding:0 16px }
  .nav-links { display:none }
  .hero-stats { flex-direction:column; width:100% }
  .hs-item { border-left:none; border-bottom:1px solid rgba(255,255,255,.08) }
  .stats-bar { grid-template-columns:1fr }
  .cards { grid-template-columns:1fr }
  .ft-g { grid-template-columns:1fr }
  .btn-row { flex-direction:column; align-items:center }
  .cta-meta { flex-direction:column; gap:12px }
}

/* ════ REVEAL ════ */
.rv { opacity:0; transform:translateY(20px); transition:opacity .55s cubic-bezier(.2,.7,0,1.1), transform .55s cubic-bezier(.2,.7,0,1.1) }
.rv.on { opacity:1; transform:none }
.rv.d1{transition-delay:.07s} .rv.d2{transition-delay:.14s} .rv.d3{transition-delay:.21s}