/* نظام التصميم المشترك: الصفحة الرئيسية، الدخول، ولوحة التحكم */
:root {
  --brand-1: #0f9b8e;
  --brand-2: #5b2be0;
  --brand-grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --ink: #15203a;
  --ink-2: #4a5470;
  --muted: #7a839a;
  --bg: #f5f7fb;
  --card: #ffffff;
  --line: #e6e9f2;
  --wa: #1fae5b;
  --danger: #d92d20;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(21, 32, 58, .08);
  --shadow-lg: 0 24px 60px rgba(21, 32, 58, .14);
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-2); text-decoration: none; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }

/* أزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 22px;
  font: 600 16px var(--font); cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 10px 24px rgba(91, 43, 224, .28); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 10px 24px rgba(31, 174, 91, .3); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* شعار */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 19px; }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 16px rgba(91, 43, 224, .25); }

/* زر واتساب العائم */
.wa-float { position: fixed; left: 22px; bottom: 22px; z-index: 50; width: 60px; height: 60px; border-radius: 50%; background: var(--wa);
  display: grid; place-items: center; box-shadow: 0 12px 28px rgba(31, 174, 91, .45); animation: wa-pulse 2.6s infinite; }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
.wa-float:hover { transform: scale(1.06); }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 174, 91, .5); } 70% { box-shadow: 0 0 0 18px rgba(31, 174, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 174, 91, 0); } }

/* خلفية متحركة */
.blobs { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blobs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: float 18s ease-in-out infinite; }
.blobs span:nth-child(1) { width: 420px; height: 420px; background: var(--brand-1); top: -120px; right: -80px; }
.blobs span:nth-child(2) { width: 380px; height: 380px; background: var(--brand-2); bottom: -140px; left: -60px; animation-delay: -6s; }
.blobs span:nth-child(3) { width: 260px; height: 260px; background: #34c3ff; top: 40%; left: 40%; animation-delay: -12s; opacity: .25; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 25px) scale(.95); } }

/* ظهور عند التمرير */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}