/* ============================================================
   SuperQi design system  (مستوحى من qi.iq)
   ألوان Qi الرسمية:  الأصفر #f3cd00 · الأسود #22211f · الرمادي #f3f3f3
   ============================================================ */
:root{
  --qi-yellow:#f3cd00;
  --qi-yellow-dark:#d8b600;
  --qi-yellow-tint:#fff7cc;
  --qi-ink:#22211f;
  --qi-ink-2:#393631;
  --qi-slate:#344154;
  --qi-muted:#868686;
  --qi-line:#e4e4e4;
  --qi-bg:#ffffff;
  --qi-bg-alt:#f3f3f3;
  --qi-radius:20px;
  --qi-radius-sm:12px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal','Cairo','Aktiv Grotesk',-apple-system,'Segoe UI',sans-serif;
  color:var(--qi-ink);background:var(--qi-bg);line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- تخطيط ---------- */
.qi-container{max-width:1180px;margin:0 auto;padding:0 20px;}
.qi-section{padding:72px 0;}
.qi-section--alt{background:var(--qi-bg-alt);}
.qi-eyebrow{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.14em;
  color:var(--qi-slate);text-transform:uppercase;margin-bottom:12px;}
.qi-h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;line-height:1.3;letter-spacing:-.01em;}
.qi-sub{color:var(--qi-muted);font-size:1.05rem;max-width:640px;margin-top:12px;}
.qi-center{text-align:center;}
.qi-center .qi-sub{margin-inline:auto;}

/* ---------- الهيدر ---------- */
.qi-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--qi-line);}
.qi-header .qi-container{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px;}
.qi-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--qi-ink);}
.qi-logo .mark{width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;color:var(--qi-ink);}
.qi-nav{display:flex;gap:26px;font-weight:700;font-size:.95rem;}
.qi-nav a{color:var(--qi-ink-2);transition:color .15s;}
.qi-nav a:hover{color:var(--qi-yellow-dark);}
@media(max-width:820px){.qi-nav{display:none;}}

/* ---------- أزرار (نمط Qi: حبة كاملة + حد 3px) ---------- */
.qi-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:800;font-size:1rem;line-height:1;cursor:pointer;
  padding:15px 30px;border-radius:210px;border:3px solid var(--qi-ink);
  background:transparent;color:var(--qi-ink);transition:all .18s ease;white-space:nowrap;}
.qi-btn:hover{background:var(--qi-ink);color:#fff;}
.qi-btn--primary{background:var(--qi-yellow);border-color:var(--qi-yellow);color:var(--qi-ink);}
.qi-btn--primary:hover{background:var(--qi-yellow-dark);border-color:var(--qi-yellow-dark);color:var(--qi-ink);}
.qi-btn--dark{background:var(--qi-ink);border-color:var(--qi-ink);color:#fff;}
.qi-btn--dark:hover{background:var(--qi-yellow);border-color:var(--qi-yellow);color:var(--qi-ink);}
.qi-btn--block{width:100%;}
.qi-btn--sm{padding:10px 20px;font-size:.9rem;border-width:2px;}

/* ---------- بطاقات ---------- */
.qi-card{background:#fff;border:1px solid var(--qi-line);border-radius:var(--qi-radius);
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
.qi-card:hover{transform:translateY(-4px);box-shadow:0 22px 45px -18px rgba(34,33,31,.28);}
.qi-chip{display:inline-flex;align-items:center;gap:6px;background:var(--qi-yellow);
  color:var(--qi-ink);font-weight:800;font-size:.75rem;padding:6px 13px;border-radius:210px;}

/* ---------- الهيرو ---------- */
.qi-hero{background:var(--qi-bg-alt);position:relative;overflow:hidden;}
.qi-hero .qi-container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;padding-top:64px;padding-bottom:64px;}
.qi-hero h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;}
.qi-hero h1 .hl{color:var(--qi-yellow-dark);}
.qi-hero p{margin:18px 0 28px;font-size:1.15rem;color:var(--qi-ink-2);max-width:520px;}
.qi-hero .qi-watermark{position:absolute;inset-inline-start:-120px;top:-120px;width:460px;height:460px;
  border-radius:50%;background:var(--qi-yellow);opacity:.16;z-index:1;}
.qi-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
@media(max-width:860px){.qi-hero .qi-container{grid-template-columns:1fr;text-align:center;}
  .qi-hero p{margin-inline:auto;}.qi-hero-actions{justify-content:center;}}

/* ---------- شرائط الإحصاء ---------- */
.qi-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;}
.qi-stats div{background:#fff;border:1px solid var(--qi-line);border-radius:var(--qi-radius-sm);padding:14px 20px;}
.qi-stats b{display:block;font-size:1.35rem;font-weight:800;color:var(--qi-ink);}
.qi-stats span{font-size:.82rem;color:var(--qi-muted);}
@media(max-width:860px){.qi-stats{justify-content:center;}}

/* ---------- الفوتر ---------- */
.qi-footer{background:var(--qi-ink);color:#cfcdc8;padding:44px 0;}
.qi-footer .qi-container{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.qi-footer a:hover{color:var(--qi-yellow);}
.qi-footer .qi-logo{color:#fff;}

/* ---------- نماذج ---------- */
.qi-field label{display:block;font-size:.85rem;font-weight:700;margin:12px 0 6px;color:var(--qi-ink-2);}
.qi-field input,.qi-field textarea,.qi-field select{
  width:100%;border:2px solid var(--qi-line);border-radius:var(--qi-radius-sm);
  padding:13px 15px;font-size:.98rem;font-family:inherit;color:var(--qi-ink);background:#fff;
  transition:border-color .15s,box-shadow .15s;}
.qi-field input:focus,.qi-field textarea:focus,.qi-field select:focus{
  outline:none;border-color:var(--qi-yellow);box-shadow:0 0 0 4px rgba(243,205,0,.2);}

/* ---------- توست ---------- */
.qi-toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;
  padding:13px 24px;border-radius:210px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.15);}
.qi-toast--ok{background:#e7f7e7;color:#1c6b2b;}
.qi-toast--err{background:#fdeaea;color:#b3261e;}

/* ---------- مودال ---------- */
.qi-modal-back{position:fixed;inset:0;background:rgba(34,33,31,.6);display:none;
  align-items:center;justify-content:center;padding:16px;z-index:120;}
.qi-modal-back.open{display:flex;}
.qi-modal{background:#fff;border-radius:var(--qi-radius);width:100%;max-width:440px;padding:30px;}
.qi-modal h3{font-size:1.35rem;font-weight:800;margin-bottom:4px;}