@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/Cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/Cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

:root {
  --bg: #06070f; --panel: #11142a; --panel2: #191d3a; --edge: #262c52;
  --ink: #f0f2ff; --ink2: #9aa3d0; --ink3: #626c9e;
  --t1: #16e0ff; --t2: #ff3d90; --gold: #ffc93c; --ok: #2ce08a; --vi: #a06bff;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Cairo', -apple-system, "SF Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(1000px, 92vw); margin: 0 auto; }
h2 { font-size: clamp(24px, 4.2vw, 34px); font-weight: 900; margin: 64px 0 22px; text-align: center; }

/* ---------- البطل ---------- */
.hero {
  text-align: center; padding: clamp(48px, 9vw, 92px) 20px 64px;
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(22,224,255,.18), transparent 60%),
    radial-gradient(120% 60% at 80% 100%, rgba(255,61,144,.16), transparent 60%);
}
.logo { filter: drop-shadow(0 18px 40px rgba(255,201,60,.3)); }
.hero h1 {
  margin: 16px 0 0; font-size: clamp(44px, 9vw, 76px); font-weight: 900; letter-spacing: -.5px;
  background: linear-gradient(100deg, var(--t1), #fff 45%, var(--t2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tag { margin: 10px 0 0; color: var(--ink2); font-size: clamp(15px, 2.4vw, 19px); }
.micro { margin: 22px 0 0; color: var(--ink3); font-size: 13.5px; }

.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.btn {
  display: inline-block; padding: 15px 30px; border-radius: 16px;
  font-weight: 800; font-size: 16px; text-decoration: none;
}
.btn.primary {
  background: linear-gradient(100deg, var(--t1), var(--t2)); color: #05070f;
  box-shadow: 0 12px 34px rgba(255,61,144,.28);
}
.btn.soon { background: var(--panel2); color: var(--ink3); box-shadow: inset 0 0 0 1px var(--edge); }

/* ---------- أشرطة ---------- */
.band { background: var(--panel); border-block: 1px solid var(--edge); padding: 40px 0; margin-top: 56px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; text-align: center; }
.grid-4 b {
  display: block; font-size: clamp(30px, 5vw, 42px); font-weight: 900;
  background: linear-gradient(100deg, var(--t1), var(--t2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.grid-4 span { color: var(--ink3); font-size: 14px; }

/* ---------- بطاقات ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.card {
  padding: 24px; border-radius: 24px; background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--edge);
  border-top: 3px solid var(--ac, var(--t1));
}
.card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--ac, var(--t1)); }
.card p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.c1 { --ac: var(--t1); } .c2 { --ac: var(--t2); } .c3 { --ac: var(--gold); } .c4 { --ac: var(--ok); }

/* ---------- مزايا ---------- */
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 720px; margin-inline: auto; }
.perks li {
  position: relative; padding: 16px 54px 16px 20px; border-radius: 18px;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--ink2); font-size: 15px;
}
.perks li b { color: var(--ink); }
.perks li::before {
  content: "◆"; position: absolute; inset-inline-start: 20px; top: 16px;
  color: var(--gold); font-size: 14px;
}

/* ---------- B2B ---------- */
.b2b { text-align: center; }
.b2b p { max-width: 640px; margin: 0 auto 26px; color: var(--ink2); font-size: 15.5px; }
.b2b h2 { margin-top: 0; }

/* ---------- التذييل ---------- */
footer { text-align: center; padding: 56px 20px 44px; color: var(--ink3); }
footer nav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 18px 0 14px; }
footer a { color: var(--ink2); text-decoration: none; font-size: 14.5px; font-weight: 600; }
footer a:hover { color: var(--t1); }
footer p { margin: 0; font-size: 12.5px; }

/* ---------- صفحات نصّية ---------- */
.doc { width: min(760px, 92vw); margin: 0 auto; padding: 56px 0 72px; }
.doc h1 { font-size: clamp(28px, 5vw, 38px); font-weight: 900; margin: 0 0 8px; }
.doc .updated { color: var(--ink3); font-size: 13px; margin: 0 0 34px; }
.doc h2 { font-size: 20px; text-align: start; margin: 34px 0 10px; }
.doc p, .doc li { color: var(--ink2); font-size: 15px; }
.doc ul { padding-inline-start: 20px; }
.doc a { color: var(--t1); }
.back { display: inline-block; margin-bottom: 26px; color: var(--ink3); text-decoration: none; font-size: 14px; }