@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;600;700;800&display=swap");

:root{
  /* ألوان الماركة */
    --brand: #f37021;        /* برتقالي يونيفرسال */
    --brand-dark: #d85e12;   /* برتقالي غامق */
  --ink: #111827;
  --muted: #6b7280;
  --bg: #f7fafc;
  --card: #ffffff;
  --border: #e5e7eb;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Noto Kufi Arabic", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a{color:inherit}
.small-muted{color:var(--muted); font-size:.95rem}

.navbar{
  border-bottom: 1px solid var(--border);
}

.brand-badge{
  display:flex; align-items:center; gap:.6rem;
}
.brand-dot{
  width:14px;height:14px;border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(243,112,33,.18);
}

.hero{
  background:
    radial-gradient(900px 250px at 85% 20%, rgba(243,112,33,.25), transparent 60%),
    radial-gradient(700px 220px at 20% 10%, rgba(243,112,33,.18), transparent 55%),
    linear-gradient(180deg, #ffffff, #f3fbff);
  border-bottom: 1px solid var(--border);
  padding: 54px 0 34px;
}

.hero-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}

.kpi{
  display:flex; gap:14px; flex-wrap:wrap;
}
.kpi .chip{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:600;
}

.call-primary{
  background: var(--brand);
  border: 1px solid rgba(0,0,0,.06);
  color: #ffffff;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 14px;
  transition: .2s;
}
.call-primary:hover{
  background: var(--brand-dark);
  color:#fff;
  transform: translateY(-1px);
}

.call-outline{
  border:1px solid rgba(243,112,33,.55);
  background:#fff;
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  transition:.2s;
}
.call-outline:hover{
  background: rgba(243,112,33,.12);
}

.section-title{
  font-weight: 800;
  letter-spacing: -.3px;
}

.cardx{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  height: 100%;
}

.icon-pill{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(243,112,33,.16);
  border:1px solid rgba(243,112,33,.25);
  font-size: 20px;
}

.notice{
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 600;
}

.footer{
  background: #0b1220;
  color: #cbd5e1;
  padding: 36px 0;
  margin-top: 38px;
}
.footer a{color:#cbd5e1;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}

.bottom-call{
  position: fixed;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 9999;
  display: none;
}
.bottom-call .wrap{
  background: var(--brand);
  border-radius: 999px;
  padding: 12px 14px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
}
.bottom-call .wrap strong{font-weight:900}
.bottom-call a{
  text-decoration:none;
  color:#062a33;
  font-weight:900;
}

@media (max-width: 992px){
  .bottom-call{display:block;}
}